import o from"classnames";import e,{useCallback as r}from"react";import"prop-types";import n from"../../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js";import t from"../ColorPickerItemComponent/ColorPickerItemComponent.js";import{COLOR_STYLES as c}from"../../../../utils/colors-vars-map.js";import{SIZES as i}from"../../../../constants/sizes.js";import{COLOR_SHAPES as l,DEFAULT_NUMBER_OF_COLORS_IN_LINE as a}from"../../ColorPickerConstants.js";var s=e.forwardRef((function(c,i){var l=c.onColorClicked,a=c.colorsToRender,s=c.numberOfColorsInLine,u=c.focusOnMount,d=c.value,m=c.colorStyle,p=c.ColorIndicatorIcon,C=c.shouldRenderIndicatorWithoutBackground,f=c.SelectedIndicatorIcon,I=c.colorSize,S=c.tooltipContentByColor,h=c.colorShape,v=c.showColorNameTooltip,k=r((function(o){return a[o]}),[a]),y=function(o){return S&&S[o]?S[o]:v?R(o):void 0},R=function(o){return o.replace(/-|_/g," ").replace(/(?:^|\s)\S/g,(function(o){return o.toUpperCase()}))},g=n({focusOnMount:u,ref:i,onItemClicked:l,itemsCount:a.length,numberOfItemsInLine:s,getItemByIndex:k}),O=g.activeIndex,L=g.onSelectionAction,E=r((function(o){return function(){return L(o)}}),[L]);return e.createElement("ul",{className:o("color-picker"),ref:i,tabIndex:-1},a.map((function(o,r){return e.createElement(t,{key:o,color:o,onValueChange:E(r),value:d,shouldRenderIndicatorWithoutBackground:p&&C,colorStyle:m,ColorIndicatorIcon:p,SelectedIndicatorIcon:f,isSelected:Array.isArray(d)?d.includes(o):d===o,isActive:r===O,colorSize:I,tooltipContent:y(o),colorShape:h})})))}));s.COLOR_STYLES=c,s.sizes=i,s.colorShapes=l,s.defaultProps={onColorClicked:function(){},ColorIndicatorIcon:void 0,colorsToRender:[],SelectedIndicatorIcon:void 0,colorStyle:s.COLOR_STYLES.REGULAR,value:"",shouldRenderIndicatorWithoutBackground:!1,colorSize:s.sizes.MEDIUM,numberOfColorsInLine:a,tooltipContentByColor:{},focusOnMount:!1,colorShape:s.colorShapes.SQUARE,showColorNameTooltip:!1};export{s as ColorPickerColorsGrid};
