npm - @vibe/core - Versions diffs - 3.87.0 → 4.0.0-alpha.1 - Mend

@vibe/core 3.87.0 → 4.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2022) hide show

package/dist/src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{toConsumableArray as o}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{difference as r,intersection as e}from"es-toolkit";import t,{forwardRef as i,useRef as l,useCallback as n,useMemo as s}from"react";import{BaseSizes as a}from"../../../../constants/sizes.js";import{ColorStyle as c,contentColors as d}from"../../../../utils/colors-vars-map.js";import{ColorShapes as m,DEFAULT_NUMBER_OF_COLORS_IN_LINE as u}from"../../ColorPickerConstants.js";import{calculateColorPickerWidth as f}from"../../services/ColorPickerStyleService.js";import{useGridKeyboardNavigationContext as p,GridKeyboardNavigationContext as C}from"../../../GridKeyboardNavigationContext/GridKeyboardNavigationContext.js";import v from"./ColorPickerClearButton.js";import I from"./ColorPickerColorsGrid.js";import{withStaticProps as h}from"../../../../types/withStaticProps.js";import S from"../../../../hooks/useMergeRef.js";import j from"../../../../../icons/dist/react/NoColor.js";var k=h(i((function(i,c){var m=i.className,h=i.onValueChange,k=i.value,y=i.noColorText,b=i.colorStyle,g=void 0===b?"regular":b,N=i.ColorIndicatorIcon,x=i.SelectedIndicatorIcon,B=i.shouldRenderIndicatorWithoutBackground,E=i.NoColorIcon,M=void 0===E?j:E,P=i.isBlackListMode,w=void 0===P||P,z=i.colorsList,L=i.isMultiselect,O=i.colorSize,R=void 0===O?a.MEDIUM:O,T=i.numberOfColorsInLine,G=void 0===T?u:T,K=i.tooltipContentByColor,U=void 0===K?{}:K,W=i.focusOnMount,_=i.colorShape,q=void 0===_?"square":_,A=i.forceUseRawColorList,D=i.showColorNameTooltip,H=i.id,V=i["data-testid"],F=l(null),J=S(c,F),Q=l(null),X=l(null),Y=n((function(){h(null)}),[h]),Z=s((function(){return A?z:w?r(d,z):e(d,z)}),[A,w,z]),$=n((function(r){if(L){var e=o(k);if(e.includes(r)){var t=e.indexOf(r);t>-1&&e.splice(t,1)}else e.push(r);h(e)}else h([r])}),[L,h,k]),oo=s((function(){return[{topElement:Q,bottomElement:X}]}),[]),ro=p(oo,F),eo=f(R,G);return t.createElement("div",{className:m,style:{width:eo},ref:J,tabIndex:-1},t.createElement(C.Provider,{value:ro},t.createElement(I,{ref:Q,onColorClicked:$,colorsToRender:Z,numberOfColorsInLine:G,focusOnMount:W,value:k,colorStyle:g,ColorIndicatorIcon:N,shouldRenderIndicatorWithoutBackground:B,SelectedIndicatorIcon:x,colorSize:R,tooltipContentByColor:U,colorShape:q,showColorNameTooltip:D,id:H,"data-testid":V}),y&&t.createElement(v,{Icon:M,onClick:Y,text:y,ref:X})))})),{sizes:a,colorStyles:c,colorSizes:a,colorShapes:m});export{k as default};
+import{toConsumableArray as o}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{difference as e,intersection as r}from"es-toolkit";import t,{forwardRef as i,useRef as l,useCallback as n,useMemo as s}from"react";import{BaseSizes as a}from"../../../../constants/sizes.js";import{contentColors as c}from"../../../../utils/colors-vars-map.js";import{DEFAULT_NUMBER_OF_COLORS_IN_LINE as d}from"../../ColorPickerConstants.js";import{calculateColorPickerWidth as u}from"../../services/ColorPickerStyleService.js";import{useGridKeyboardNavigationContext as m,GridKeyboardNavigationContext as f}from"../../../GridKeyboardNavigationContext/GridKeyboardNavigationContext.js";import C from"./ColorPickerClearButton.js";import p from"./ColorPickerColorsGrid.js";import v from"../../../../hooks/useMergeRef.js";import I from"../../../../../icons/dist/react/NoColor.js";var h=i((function(i,h){var k=i.className,j=i.onValueChange,S=i.value,y=i.noColorText,b=i.colorStyle,g=void 0===b?"regular":b,N=i.ColorIndicatorIcon,x=i.SelectedIndicatorIcon,B=i.shouldRenderIndicatorWithoutBackground,E=i.NoColorIcon,M=void 0===E?I:E,P=i.isBlackListMode,L=void 0===P||P,O=i.colorsList,R=i.isMultiselect,w=i.colorSize,T=void 0===w?a.MEDIUM:w,z=i.numberOfColorsInLine,G=void 0===z?d:z,K=i.tooltipContentByColor,U=void 0===K?{}:K,W=i.focusOnMount,_=i.colorShape,q=void 0===_?"square":_,A=i.forceUseRawColorList,D=i.showColorNameTooltip,H=i.id,V=i["data-testid"],F=l(null),J=v(h,F),Q=l(null),X=l(null),Y=n((function(){j(null)}),[j]),Z=s((function(){return A?O:L?e(c,O):r(c,O)}),[A,L,O]),$=n((function(e){if(R){var r=o(S);if(r.includes(e)){var t=r.indexOf(e);t>-1&&r.splice(t,1)}else r.push(e);j(r)}else j([e])}),[R,j,S]),oo=s((function(){return[{topElement:Q,bottomElement:X}]}),[]),eo=m(oo,F),ro=u(T,G);return t.createElement("div",{className:k,style:{width:ro},ref:J,tabIndex:-1},t.createElement(f.Provider,{value:eo},t.createElement(p,{ref:Q,onColorClicked:$,colorsToRender:Z,numberOfColorsInLine:G,focusOnMount:W,value:S,colorStyle:g,ColorIndicatorIcon:N,shouldRenderIndicatorWithoutBackground:B,SelectedIndicatorIcon:x,colorSize:T,tooltipContentByColor:U,colorShape:q,showColorNameTooltip:D,id:H,"data-testid":V}),y&&t.createElement(C,{Icon:M,onClick:Y,text:y,ref:X})))}));export{h as default};
 //# sourceMappingURL=ColorPickerContent.js.map

package/dist/src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPickerContent.js","sources":["../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.tsx"],"sourcesContent":["import { difference as _difference, intersection as _intersection } from \"es-toolkit\";\nimport React, { forwardRef, useCallback, useMemo, useRef } from \"react\";\nimport { BaseSizes } from \"../../../../constants\";\nimport {\n ColorStyle as ColorStyleEnum,\n type CONTENT_COLORS_VALUES,\n contentColors\n} from \"../../../../utils/colors-vars-map\";\nimport { NoColor } from \"@vibe/icons\";\nimport { ColorShapes as ColorShapesEnum, DEFAULT_NUMBER_OF_COLORS_IN_LINE } from \"../../ColorPickerConstants\";\nimport {\n type ColorShapes,\n type ColorPickerSizes,\n type ColorPickerValue,\n type ColorPickerArrayValueOnly\n} from \"../../ColorPicker.types\";\nimport { calculateColorPickerWidth } from \"../../services/ColorPickerStyleService\";\nimport {\n GridKeyboardNavigationContext,\n useGridKeyboardNavigationContext\n} from \"../../../GridKeyboardNavigationContext\";\nimport ColorPickerClearButton from \"./ColorPickerClearButton\";\nimport ColorPickerColorsGrid from \"./ColorPickerColorsGrid\";\nimport { type VibeComponentProps, withStaticProps } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport useMergeRef from \"../../../../hooks/useMergeRef\";\nimport { type ColorStyle } from \"../../../../types\";\n\nexport interface ColorPickerContentProps extends VibeComponentProps {\n /*\n The selected color(s).\n /\n value: ColorPickerValue;\n /\n Callback fired when the selected color(s) change.\n /\n onValueChange: (value: ColorPickerArrayValueOnly) => void;\n /\n The list of colors available for selection.\n /\n colorsList: ColorPickerArrayValueOnly;\n /\n Icon displayed as an indicator inside the color.\n /\n ColorIndicatorIcon?: SubIcon;\n /\n Icon displayed when a color is selected.\n /\n SelectedIndicatorIcon?: SubIcon;\n /\n Icon used for clearing the color selection.\n /\n NoColorIcon?: SubIcon;\n /\n The style applied to the colors.\n /\n colorStyle?: ColorStyle;\n /\n The size of the color items.\n /\n colorSize?: ColorPickerSizes;\n /\n The shape of the color items.\n /\n colorShape?: ColorShapes;\n /\n Custom tooltip content for specific colors.\n /\n tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string>>;\n /\n Text displayed for the \"no color\" option.\n /\n noColorText?: string;\n /\n If true, renders the color indicator without a background.\n /\n shouldRenderIndicatorWithoutBackground?: boolean;\n /\n If true, treats the color list as a blacklist rather than a whitelist.\n /\n isBlackListMode?: boolean;\n /\n The number of colors displayed per row.\n /\n numberOfColorsInLine?: number;\n /\n If true, the first color is focused when the component mounts.\n /\n focusOnMount?: boolean;\n /\n If true, allows selecting multiple colors.\n /\n isMultiselect?: boolean;\n /\n Used to force the component render the colorList prop as is. Usually, this flag should not be used. It's intended only for edge cases.\n * Usually, only \"monday colors\" will be rendered (unless blacklist mode is used). This flag will override this behavior.\n /\n forceUseRawColorList?: boolean;\n /\n Used to enable color name tooltip on each color in the component.\n * When \"tooltipContentByColor\" is supplied, it will override the color name tooltip.\n */\n showColorNameTooltip?: boolean;\n}\n\nconst ColorPickerContent = forwardRef(\n (\n {\n className,\n onValueChange,\n value,\n noColorText,\n colorStyle = \"regular\",\n ColorIndicatorIcon,\n SelectedIndicatorIcon,\n shouldRenderIndicatorWithoutBackground,\n NoColorIcon = NoColor,\n isBlackListMode = true,\n colorsList,\n isMultiselect,\n colorSize = BaseSizes.MEDIUM,\n numberOfColorsInLine = DEFAULT_NUMBER_OF_COLORS_IN_LINE,\n tooltipContentByColor = {},\n focusOnMount,\n colorShape = \"square\",\n forceUseRawColorList,\n showColorNameTooltip,\n id,\n \"data-testid\": dataTestId\n }: ColorPickerContentProps,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const gridRef = useRef(null);\n const mergedRef = useMergeRef(ref, gridRef);\n const colorsRef = useRef(null);\n const buttonRef = useRef(null);\n\n const onClearButton = useCallback(() => {\n onValueChange(null);\n }, [onValueChange]);\n\n const colorsToRender = useMemo(() => {\n if (forceUseRawColorList) {\n return colorsList;\n }\n return isBlackListMode ? _difference(contentColors, colorsList) : _intersection(contentColors, colorsList);\n }, [forceUseRawColorList, isBlackListMode, colorsList]);\n\n const onColorClicked = useCallback(\n (color: CONTENT_COLORS_VALUES) => {\n if (!isMultiselect) {\n onValueChange([color]);\n return;\n }\n const colors = [...value];\n if (colors.includes(color)) {\n const indexInSelected = colors.indexOf(color);\n if (indexInSelected > -1) {\n colors.splice(indexInSelected, 1);\n }\n } else {\n colors.push(color);\n }\n onValueChange(colors);\n },\n [isMultiselect, onValueChange, value]\n );\n\n const positions = useMemo(() => [{ topElement: colorsRef, bottomElement: buttonRef }], []);\n const keyboardContext = useGridKeyboardNavigationContext(positions, gridRef);\n const width = calculateColorPickerWidth(colorSize as BaseSizes, numberOfColorsInLine);\n\n return (\n <div className={className} style={{ width }} ref={mergedRef} tabIndex={-1}>\n <GridKeyboardNavigationContext.Provider value={keyboardContext}>\n <ColorPickerColorsGrid\n ref={colorsRef}\n onColorClicked={onColorClicked}\n colorsToRender={colorsToRender}\n numberOfColorsInLine={numberOfColorsInLine}\n focusOnMount={focusOnMount}\n value={value}\n colorStyle={colorStyle}\n ColorIndicatorIcon={ColorIndicatorIcon}\n shouldRenderIndicatorWithoutBackground={shouldRenderIndicatorWithoutBackground}\n SelectedIndicatorIcon={SelectedIndicatorIcon}\n colorSize={colorSize}\n tooltipContentByColor={tooltipContentByColor}\n colorShape={colorShape}\n showColorNameTooltip={showColorNameTooltip}\n id={id}\n data-testid={dataTestId}\n />\n {noColorText && (\n <ColorPickerClearButton Icon={NoColorIcon} onClick={onClearButton} text={noColorText} ref={buttonRef} />\n )}\n </GridKeyboardNavigationContext.Provider>\n </div>\n );\n }\n);\n\ninterface ColorPickerContentStaticProps {\n sizes: typeof BaseSizes;\n colorStyles: typeof ColorStyleEnum;\n colorSizes: typeof BaseSizes;\n colorShapes: typeof ColorShapesEnum;\n}\n\nexport default withStaticProps<ColorPickerContentProps, ColorPickerContentStaticProps>(ColorPickerContent, {\n sizes: BaseSizes,\n colorStyles: ColorStyleEnum,\n colorSizes: BaseSizes,\n colorShapes: ColorShapesEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","onValueChange","value","noColorText","_ref$colorStyle","colorStyle","ColorIndicatorIcon","SelectedIndicatorIcon","shouldRenderIndicatorWithoutBackground","_ref$NoColorIcon","NoColorIcon","NoColor","_ref$isBlackListMode","isBlackListMode","colorsList","isMultiselect","_ref$colorSize","colorSize","BaseSizes","MEDIUM","_ref$numberOfColorsIn","numberOfColorsInLine","DEFAULT_NUMBER_OF_COLORS_IN_LINE","_ref$tooltipContentBy","tooltipContentByColor","focusOnMount","_ref$colorShape","colorShape","forceUseRawColorList","showColorNameTooltip","id","dataTestId","gridRef","useRef","mergedRef","useMergeRef","colorsRef","buttonRef","onClearButton","useCallback","colorsToRender","useMemo","_difference","contentColors","_intersection","onColorClicked","color","colors","_toConsumableArray","includes","indexInSelected","indexOf","splice","push","positions","topElement","bottomElement","keyboardContext","useGridKeyboardNavigationContext","width","calculateColorPickerWidth","React","createElement","style","tabIndex","GridKeyboardNavigationContext","Provider","ColorPickerColorsGrid","ColorPickerClearButton","Icon","onClick","text","sizes","colorStyles","ColorStyleEnum","colorSizes","colorShapes","ColorShapesEnum"],"mappings":"+8BAyGA,IAwGeA,EAAAA,EAxGYC,GACzB,SAAAC,EAwBEC,GACE,IAvBAC,EAASF,EAATE,UACAC,EAAaH,EAAbG,cACAC,EAAKJ,EAALI,MACAC,EAAWL,EAAXK,YAAWC,EAAAN,EACXO,WAAAA,OAAa,IAAHD,EAAG,UAASA,EACtBE,EAAkBR,EAAlBQ,mBACAC,EAAqBT,EAArBS,sBACAC,EAAsCV,EAAtCU,uCAAsCC,EAAAX,EACtCY,YAAAA,OAAcC,IAAHF,EAAGE,EAAOF,EAAAG,EAAAd,EACrBe,gBAAAA,OAAkB,IAAHD,GAAOA,EACtBE,EAAUhB,EAAVgB,WACAC,EAAajB,EAAbiB,cAAaC,EAAAlB,EACbmB,UAAAA,OAAS,IAAAD,EAAGE,EAAUC,OAAMH,EAAAI,EAAAtB,EAC5BuB,qBAAAA,OAAuBC,IAAHF,EAAGE,EAAgCF,EAAAG,EAAAzB,EACvD0B,sBAAAA,OAAqB,IAAAD,EAAG,CAAE,EAAAA,EAC1BE,EAAY3B,EAAZ2B,aAAYC,EAAA5B,EACZ6B,WAAAA,OAAa,IAAHD,EAAG,SAAQA,EACrBE,EAAoB9B,EAApB8B,qBACAC,EAAoB/B,EAApB+B,qBACAC,EAAEhC,EAAFgC,GACeC,EAAUjC,EAAzB,eAIIkC,EAAUC,EAAO,MACjBC,EAAYC,EAAYpC,EAAKiC,GAC7BI,EAAYH,EAAO,MACnBI,EAAYJ,EAAO,MAEnBK,EAAgBC,GAAY,WAChCtC,EAAc,KAChB,GAAG,CAACA,IAEEuC,EAAiBC,GAAQ,WAC7B,OAAIb,EACKd,EAEFD,EAAkB6B,EAAYC,EAAe7B,GAAc8B,EAAcD,EAAe7B,EAChG,GAAE,CAACc,EAAsBf,EAAiBC,IAErC+B,EAAiBN,GACrB,SAACO,GACC,GAAK/B,EAAL,CAIA,IAAMgC,EAAMC,EAAO9C,GACnB,GAAI6C,EAAOE,SAASH,GAAQ,CAC1B,IAAMI,EAAkBH,EAAOI,QAAQL,GACnCI,GAAmB,GACrBH,EAAOK,OAAOF,EAAiB,EAElC,MACCH,EAAOM,KAAKP,GAEd7C,EAAc8C,EAVb,MAFC9C,EAAc,CAAC6C,GAalB,GACD,CAAC/B,EAAed,EAAeC,IAG3BoD,GAAYb,GAAQ,WAAA,MAAM,CAAC,CAAEc,WAAYnB,EAAWoB,cAAenB,GAAY,GAAE,IACjFoB,GAAkBC,EAAiCJ,GAAWtB,GAC9D2B,GAAQC,EAA0B3C,EAAwBI,GAEhE,OACEwC,EAAKC,cAAA,MAAA,CAAA9D,UAAWA,EAAW+D,MAAO,CAAEJ,MAAAA,IAAS5D,IAAKmC,EAAW8B,UAAW,GACtEH,EAAAC,cAACG,EAA8BC,SAAS,CAAAhE,MAAOuD,IAC7CI,EAAAC,cAACK,EAAqB,CACpBpE,IAAKqC,EACLS,eAAgBA,EAChBL,eAAgBA,EAChBnB,qBAAsBA,EACtBI,aAAcA,EACdvB,MAAOA,EACPG,WAAYA,EACZC,mBAAoBA,EACpBE,uCAAwCA,EACxCD,sBAAuBA,EACvBU,UAAWA,EACXO,sBAAuBA,EACvBG,WAAYA,EACZE,qBAAsBA,EACtBC,GAAIA,EAAE,cACOC,IAEd5B,GACC0D,EAAAC,cAACM,EAAsB,CAACC,KAAM3D,EAAa4D,QAAShC,EAAeiC,KAAMpE,EAAaJ,IAAKsC,KAKrG,IAUyG,CACzGmC,MAAOtD,EACPuD,YAAaC,EACbC,WAAYzD,EACZ0D,YAAaC"}
1	+ {"version":3,"file":"ColorPickerContent.js","sources":["../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.tsx"],"sourcesContent":["import { difference as _difference, intersection as _intersection } from \"es-toolkit\";\nimport React, { forwardRef, useCallback, useMemo, useRef } from \"react\";\nimport { BaseSizes } from \"../../../../constants\";\nimport { type CONTENT_COLORS_VALUES, contentColors } from \"../../../../utils/colors-vars-map\";\nimport { NoColor } from \"@vibe/icons\";\nimport { DEFAULT_NUMBER_OF_COLORS_IN_LINE } from \"../../ColorPickerConstants\";\nimport {\n type ColorShapes,\n type ColorPickerSizes,\n type ColorPickerValue,\n type ColorPickerArrayValueOnly\n} from \"../../ColorPicker.types\";\nimport { calculateColorPickerWidth } from \"../../services/ColorPickerStyleService\";\nimport {\n GridKeyboardNavigationContext,\n useGridKeyboardNavigationContext\n} from \"../../../GridKeyboardNavigationContext\";\nimport ColorPickerClearButton from \"./ColorPickerClearButton\";\nimport ColorPickerColorsGrid from \"./ColorPickerColorsGrid\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport useMergeRef from \"../../../../hooks/useMergeRef\";\nimport { type ColorStyle } from \"../../../../types\";\n\nexport interface ColorPickerContentProps extends VibeComponentProps {\n /*\n The selected color(s).\n /\n value: ColorPickerValue;\n /\n Callback fired when the selected color(s) change.\n /\n onValueChange: (value: ColorPickerArrayValueOnly) => void;\n /\n The list of colors available for selection.\n /\n colorsList: ColorPickerArrayValueOnly;\n /\n Icon displayed as an indicator inside the color.\n /\n ColorIndicatorIcon?: SubIcon;\n /\n Icon displayed when a color is selected.\n /\n SelectedIndicatorIcon?: SubIcon;\n /\n Icon used for clearing the color selection.\n /\n NoColorIcon?: SubIcon;\n /\n The style applied to the colors.\n /\n colorStyle?: ColorStyle;\n /\n The size of the color items.\n /\n colorSize?: ColorPickerSizes;\n /\n The shape of the color items.\n /\n colorShape?: ColorShapes;\n /\n Custom tooltip content for specific colors.\n /\n tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string>>;\n /\n Text displayed for the \"no color\" option.\n /\n noColorText?: string;\n /\n If true, renders the color indicator without a background.\n /\n shouldRenderIndicatorWithoutBackground?: boolean;\n /\n If true, treats the color list as a blacklist rather than a whitelist.\n /\n isBlackListMode?: boolean;\n /\n The number of colors displayed per row.\n /\n numberOfColorsInLine?: number;\n /\n If true, the first color is focused when the component mounts.\n /\n focusOnMount?: boolean;\n /\n If true, allows selecting multiple colors.\n /\n isMultiselect?: boolean;\n /\n Used to force the component render the colorList prop as is. Usually, this flag should not be used. It's intended only for edge cases.\n * Usually, only \"monday colors\" will be rendered (unless blacklist mode is used). This flag will override this behavior.\n /\n forceUseRawColorList?: boolean;\n /\n Used to enable color name tooltip on each color in the component.\n * When \"tooltipContentByColor\" is supplied, it will override the color name tooltip.\n */\n showColorNameTooltip?: boolean;\n}\n\nconst ColorPickerContent = forwardRef(\n (\n {\n className,\n onValueChange,\n value,\n noColorText,\n colorStyle = \"regular\",\n ColorIndicatorIcon,\n SelectedIndicatorIcon,\n shouldRenderIndicatorWithoutBackground,\n NoColorIcon = NoColor,\n isBlackListMode = true,\n colorsList,\n isMultiselect,\n colorSize = BaseSizes.MEDIUM,\n numberOfColorsInLine = DEFAULT_NUMBER_OF_COLORS_IN_LINE,\n tooltipContentByColor = {},\n focusOnMount,\n colorShape = \"square\",\n forceUseRawColorList,\n showColorNameTooltip,\n id,\n \"data-testid\": dataTestId\n }: ColorPickerContentProps,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const gridRef = useRef(null);\n const mergedRef = useMergeRef(ref, gridRef);\n const colorsRef = useRef(null);\n const buttonRef = useRef(null);\n\n const onClearButton = useCallback(() => {\n onValueChange(null);\n }, [onValueChange]);\n\n const colorsToRender = useMemo(() => {\n if (forceUseRawColorList) {\n return colorsList;\n }\n return isBlackListMode ? _difference(contentColors, colorsList) : _intersection(contentColors, colorsList);\n }, [forceUseRawColorList, isBlackListMode, colorsList]);\n\n const onColorClicked = useCallback(\n (color: CONTENT_COLORS_VALUES) => {\n if (!isMultiselect) {\n onValueChange([color]);\n return;\n }\n const colors = [...value];\n if (colors.includes(color)) {\n const indexInSelected = colors.indexOf(color);\n if (indexInSelected > -1) {\n colors.splice(indexInSelected, 1);\n }\n } else {\n colors.push(color);\n }\n onValueChange(colors);\n },\n [isMultiselect, onValueChange, value]\n );\n\n const positions = useMemo(() => [{ topElement: colorsRef, bottomElement: buttonRef }], []);\n const keyboardContext = useGridKeyboardNavigationContext(positions, gridRef);\n const width = calculateColorPickerWidth(colorSize as BaseSizes, numberOfColorsInLine);\n\n return (\n <div className={className} style={{ width }} ref={mergedRef} tabIndex={-1}>\n <GridKeyboardNavigationContext.Provider value={keyboardContext}>\n <ColorPickerColorsGrid\n ref={colorsRef}\n onColorClicked={onColorClicked}\n colorsToRender={colorsToRender}\n numberOfColorsInLine={numberOfColorsInLine}\n focusOnMount={focusOnMount}\n value={value}\n colorStyle={colorStyle}\n ColorIndicatorIcon={ColorIndicatorIcon}\n shouldRenderIndicatorWithoutBackground={shouldRenderIndicatorWithoutBackground}\n SelectedIndicatorIcon={SelectedIndicatorIcon}\n colorSize={colorSize}\n tooltipContentByColor={tooltipContentByColor}\n colorShape={colorShape}\n showColorNameTooltip={showColorNameTooltip}\n id={id}\n data-testid={dataTestId}\n />\n {noColorText && (\n <ColorPickerClearButton Icon={NoColorIcon} onClick={onClearButton} text={noColorText} ref={buttonRef} />\n )}\n </GridKeyboardNavigationContext.Provider>\n </div>\n );\n }\n);\n\nexport default ColorPickerContent;\n"],"names":["ColorPickerContent","forwardRef","_ref","ref","className","onValueChange","value","noColorText","_ref$colorStyle","colorStyle","ColorIndicatorIcon","SelectedIndicatorIcon","shouldRenderIndicatorWithoutBackground","_ref$NoColorIcon","NoColorIcon","NoColor","_ref$isBlackListMode","isBlackListMode","colorsList","isMultiselect","_ref$colorSize","colorSize","BaseSizes","MEDIUM","_ref$numberOfColorsIn","numberOfColorsInLine","DEFAULT_NUMBER_OF_COLORS_IN_LINE","_ref$tooltipContentBy","tooltipContentByColor","focusOnMount","_ref$colorShape","colorShape","forceUseRawColorList","showColorNameTooltip","id","dataTestId","gridRef","useRef","mergedRef","useMergeRef","colorsRef","buttonRef","onClearButton","useCallback","colorsToRender","useMemo","_difference","contentColors","_intersection","onColorClicked","color","colors","_toConsumableArray","includes","indexInSelected","indexOf","splice","push","positions","topElement","bottomElement","keyboardContext","useGridKeyboardNavigationContext","width","calculateColorPickerWidth","React","createElement","style","tabIndex","GridKeyboardNavigationContext","Provider","ColorPickerColorsGrid","ColorPickerClearButton","Icon","onClick","text"],"mappings":"u2BAqGMA,IAAAA,EAAqBC,GACzB,SAAAC,EAwBEC,GACE,IAvBAC,EAASF,EAATE,UACAC,EAAaH,EAAbG,cACAC,EAAKJ,EAALI,MACAC,EAAWL,EAAXK,YAAWC,EAAAN,EACXO,WAAAA,OAAa,IAAHD,EAAG,UAASA,EACtBE,EAAkBR,EAAlBQ,mBACAC,EAAqBT,EAArBS,sBACAC,EAAsCV,EAAtCU,uCAAsCC,EAAAX,EACtCY,YAAAA,OAAcC,IAAHF,EAAGE,EAAOF,EAAAG,EAAAd,EACrBe,gBAAAA,OAAkB,IAAHD,GAAOA,EACtBE,EAAUhB,EAAVgB,WACAC,EAAajB,EAAbiB,cAAaC,EAAAlB,EACbmB,UAAAA,OAAS,IAAAD,EAAGE,EAAUC,OAAMH,EAAAI,EAAAtB,EAC5BuB,qBAAAA,OAAuBC,IAAHF,EAAGE,EAAgCF,EAAAG,EAAAzB,EACvD0B,sBAAAA,OAAqB,IAAAD,EAAG,CAAE,EAAAA,EAC1BE,EAAY3B,EAAZ2B,aAAYC,EAAA5B,EACZ6B,WAAAA,OAAa,IAAHD,EAAG,SAAQA,EACrBE,EAAoB9B,EAApB8B,qBACAC,EAAoB/B,EAApB+B,qBACAC,EAAEhC,EAAFgC,GACeC,EAAUjC,EAAzB,eAIIkC,EAAUC,EAAO,MACjBC,EAAYC,EAAYpC,EAAKiC,GAC7BI,EAAYH,EAAO,MACnBI,EAAYJ,EAAO,MAEnBK,EAAgBC,GAAY,WAChCtC,EAAc,KAChB,GAAG,CAACA,IAEEuC,EAAiBC,GAAQ,WAC7B,OAAIb,EACKd,EAEFD,EAAkB6B,EAAYC,EAAe7B,GAAc8B,EAAcD,EAAe7B,EAChG,GAAE,CAACc,EAAsBf,EAAiBC,IAErC+B,EAAiBN,GACrB,SAACO,GACC,GAAK/B,EAAL,CAIA,IAAMgC,EAAMC,EAAO9C,GACnB,GAAI6C,EAAOE,SAASH,GAAQ,CAC1B,IAAMI,EAAkBH,EAAOI,QAAQL,GACnCI,GAAmB,GACrBH,EAAOK,OAAOF,EAAiB,EAElC,MACCH,EAAOM,KAAKP,GAEd7C,EAAc8C,EAVb,MAFC9C,EAAc,CAAC6C,GAalB,GACD,CAAC/B,EAAed,EAAeC,IAG3BoD,GAAYb,GAAQ,WAAA,MAAM,CAAC,CAAEc,WAAYnB,EAAWoB,cAAenB,GAAY,GAAE,IACjFoB,GAAkBC,EAAiCJ,GAAWtB,GAC9D2B,GAAQC,EAA0B3C,EAAwBI,GAEhE,OACEwC,EAAKC,cAAA,MAAA,CAAA9D,UAAWA,EAAW+D,MAAO,CAAEJ,MAAAA,IAAS5D,IAAKmC,EAAW8B,UAAW,GACtEH,EAAAC,cAACG,EAA8BC,SAAS,CAAAhE,MAAOuD,IAC7CI,EAAAC,cAACK,EAAqB,CACpBpE,IAAKqC,EACLS,eAAgBA,EAChBL,eAAgBA,EAChBnB,qBAAsBA,EACtBI,aAAcA,EACdvB,MAAOA,EACPG,WAAYA,EACZC,mBAAoBA,EACpBE,uCAAwCA,EACxCD,sBAAuBA,EACvBU,UAAWA,EACXO,sBAAuBA,EACvBG,WAAYA,EACZE,qBAAsBA,EACtBC,GAAIA,EAAE,cACOC,IAEd5B,GACC0D,EAAAC,cAACM,EAAsB,CAACC,KAAM3D,EAAa4D,QAAShC,EAAeiC,KAAMpE,EAAaJ,IAAKsC,KAKrG"}

package/dist/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineProperty as e}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as o}from"es-toolkit";import{getStyle as t}from"../../../../helpers/typesciptCssModulesHelper.js";import r from"classnames";import n,{forwardRef as l,useMemo as s,useRef as c,useCallback as i,useEffect as a}from"react";import{contentColors as m}from"../../../../utils/colors-vars-map.js";import d from"../../../../utils/colors-utils.js";import{getTestId as u}from"../../../../tests/testIds.js";import{ComponentDefaultTestId as p}from"../../../../tests/constants.js";import f from"./ColorPickerItemComponent.module.scss.js";import v from"../../../../../components/tooltip/dist/Tooltip/Tooltip.js";import I from"../../../../../components/clickable/dist/Clickable/Clickable.js";import C from"../../../../../components/icon/dist/Icon/Icon.js";var g=l((function(l,g){var k=l.color,y=l.onColorClicked,E=l.colorStyle,b=void 0===E?"regular":E,j=l.shouldRenderIndicatorWithoutBackground,S=l.ColorIndicatorIcon,h=l.SelectedIndicatorIcon,L=void 0===h?S:h,M=l.isSelected,N=l.colorSize,P=l.tooltipContent,T=l.isActive,W=l.colorShape,_=l["data-testid"],x=s((function(){return m.includes(k)}),[k]),A=x?d.getMondayColorAsStyle(k,b):k,R=c(null),z=i((function(){return y(k)}),[y,k]);a((function(){if((null==R?void 0:R.current)&&!j&&x){var e=R.current,o=function(e){e.target.style.background=d.getMondayColorAsStyle(k,"selected"===b?"regular":"hover")},t=function(e){e.target.style.background=A};return e.addEventListener("mouseenter",o,!1),e.addEventListener("mouseleave",t,!1),function(){e.removeEventListener("mouseenter",o,!1),e.removeEventListener("mouseleave",t,!1)}}}),[k,A,b,x,R,j]);var B=M||S,D=j?{color:A}:{};return n.createElement(v,{content:P},n.createElement("li",{className:r(f.itemWrapper,e(e(e({},f.selectedColor,M),f.active,T),f.circle,"circle"===W)),"data-testid":_||u(p.COLOR_PICKER_ITEM,k)},n.createElement("div",{className:r(f.feedbackIndicator)}),n.createElement(I,{ref:R,ariaLabel:k,className:r(f.colorItem,t(f,o("color-item-size-"+N)),e({},f.colorItemTextMode,j)),style:{background:j?"transparent":A},onClick:z,tabIndex:"-1",onMouseDown:function(e){return e.preventDefault()}},n.createElement("div",{className:r(f.colorIndicatorWrapper),style:D},B&&n.createElement(C,{icon:M?L:S,className:r(e({},f.colorIconWhite,!j)),ignoreFocusStyle:!0})))))}));export{g as default};
+import{defineProperty as e}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as o}from"es-toolkit";import{getStyle as t}from"../../../../helpers/typesciptCssModulesHelper.js";import r from"classnames";import n,{forwardRef as l,useMemo as s,useRef as c,useCallback as i,useEffect as a}from"react";import{contentColors as m}from"../../../../utils/colors-vars-map.js";import d from"../../../../utils/colors-utils.js";import{getTestId as u}from"../../../../tests/testIds.js";import{ComponentDefaultTestId as p}from"../../../../tests/constants.js";import f from"./ColorPickerItemComponent.module.scss.js";import v from"../../../../../components/tooltip/dist/Tooltip/Tooltip.js";import I from"../../../../../components/clickable/dist/Clickable/Clickable.js";import C from"../../../../../components/icon/dist/Icon/Icon.js";var g=l((function(l,g){var k=l.color,y=l.onColorClicked,E=l.colorStyle,b=void 0===E?"regular":E,j=l.shouldRenderIndicatorWithoutBackground,S=l.ColorIndicatorIcon,h=l.SelectedIndicatorIcon,M=void 0===h?S:h,L=l.isSelected,N=l.colorSize,P=l.tooltipContent,T=l.isActive,W=l.colorShape,_=l["data-testid"],x=s((function(){return m.includes(k)}),[k]),A=x?d.getMondayColorAsStyle(k,b):k,R=c(null),z=i((function(){return y(k)}),[y,k]);a((function(){if((null==R?void 0:R.current)&&!j&&x){var e=R.current,o=function(e){e.target.style.background=d.getMondayColorAsStyle(k,"selected"===b?"regular":"hover")},t=function(e){e.target.style.background=A};return e.addEventListener("mouseenter",o,!1),e.addEventListener("mouseleave",t,!1),function(){e.removeEventListener("mouseenter",o,!1),e.removeEventListener("mouseleave",t,!1)}}}),[k,A,b,x,R,j]);var B=L||S,D=j?{color:A}:{};return n.createElement(v,{content:P},n.createElement("li",{className:r(f.itemWrapper,e(e(e({},f.selectedColor,L),f.active,T),f.circle,"circle"===W)),"data-testid":_||u(p.COLOR_PICKER_ITEM,k)},n.createElement("div",{className:r(f.feedbackIndicator)}),n.createElement(I,{ref:R,"aria-label":k,className:r(f.colorItem,t(f,o("color-item-size-"+N)),e({},f.colorItemTextMode,j)),style:{background:j?"transparent":A},onClick:z,tabIndex:-1,onMouseDown:function(e){return e.preventDefault()}},n.createElement("div",{className:r(f.colorIndicatorWrapper),style:D},B&&n.createElement(C,{icon:L?M:S,className:r(e({},f.colorIconWhite,!j)),ignoreFocusStyle:!0})))))}));export{g as default};
 //# sourceMappingURL=ColorPickerItemComponent.js.map

package/dist/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPickerItemComponent.js","sources":["../../../../../../src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"../../../../helpers/typesciptCssModulesHelper\";\nimport cx from \"classnames\";\nimport React, { useRef, useCallback, useMemo, forwardRef, useEffect } from \"react\";\nimport { contentColors } from \"../../../../utils/colors-vars-map\";\nimport ColorUtils from \"../../../../utils/colors-utils\";\nimport { Icon } from \"@vibe/icon\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { Clickable } from \"@vibe/clickable\";\nimport { type ColorPickerValueOnly } from \"../../ColorPicker.types\";\nimport { type ColorShapes, type ColorPickerSizes } from \"../../ColorPicker.types\";\nimport { getTestId } from \"../../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../../tests/constants\";\nimport { type VibeComponentProps, type ElementContent, type ColorStyle } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport styles from \"./ColorPickerItemComponent.module.scss\";\n\nexport interface ColorPickerItemComponentProps extends VibeComponentProps {\n /*\n The color value of the item.\n /\n color: ColorPickerValueOnly;\n /\n Callback fired when the color is clicked.\n /\n onColorClicked: (color: ColorPickerValueOnly) => void;\n /\n The style applied to the color.\n /\n colorStyle: ColorStyle;\n /\n If true, renders the color indicator without a background.\n /\n shouldRenderIndicatorWithoutBackground: boolean;\n /\n Icon displayed inside the color item.\n /\n ColorIndicatorIcon: SubIcon;\n /\n Icon displayed when the color is selected.\n /\n SelectedIndicatorIcon: SubIcon;\n /\n If true, the color is marked as selected.\n /\n isSelected: boolean;\n /\n The size of the color item.\n /\n colorSize: ColorPickerSizes;\n /\n Tooltip content for the color item.\n /\n tooltipContent: ElementContent;\n /\n If true, the color item is currently active.\n /\n isActive: boolean;\n /\n The shape of the color item.\n */\n colorShape: ColorShapes;\n}\n\nconst ColorPickerItemComponent = forwardRef(\n (\n {\n color,\n onColorClicked,\n colorStyle = \"regular\",\n shouldRenderIndicatorWithoutBackground,\n ColorIndicatorIcon,\n SelectedIndicatorIcon = ColorIndicatorIcon,\n isSelected,\n colorSize,\n tooltipContent,\n isActive,\n colorShape,\n \"data-testid\": dataTestId\n }: ColorPickerItemComponentProps,\n _ref: React.ForwardedRef<HTMLElement>\n ) => {\n const isMondayColor = useMemo(() => (contentColors as readonly string[]).includes(color), [color]); // casting to any since color can be one of the system content colors but can also be a custom one\n const colorAsStyle = isMondayColor ? ColorUtils.getMondayColorAsStyle(color, colorStyle) : color;\n const itemRef = useRef<HTMLDivElement>(null);\n\n const onClick = useCallback(() => onColorClicked(color), [onColorClicked, color]);\n\n useEffect(() => {\n if (!itemRef?.current \|\| shouldRenderIndicatorWithoutBackground \|\| !isMondayColor) return;\n const item = itemRef.current;\n const setHoverColor = (e: MouseEvent) => {\n if (colorStyle === \"selected\") {\n (e.target as HTMLDivElement).style.background = ColorUtils.getMondayColorAsStyle(color, \"regular\");\n } else {\n (e.target as HTMLDivElement).style.background = ColorUtils.getMondayColorAsStyle(color, \"hover\");\n }\n };\n const restoreToOriginalColor = (e: MouseEvent) => {\n (e.target as HTMLDivElement).style.background = colorAsStyle;\n };\n item.addEventListener(\"mouseenter\", setHoverColor, false);\n item.addEventListener(\"mouseleave\", restoreToOriginalColor, false);\n\n return () => {\n item.removeEventListener(\"mouseenter\", setHoverColor, false);\n item.removeEventListener(\"mouseleave\", restoreToOriginalColor, false);\n };\n }, [color, colorAsStyle, colorStyle, isMondayColor, itemRef, shouldRenderIndicatorWithoutBackground]);\n\n const shouldRenderIcon = isSelected \|\| ColorIndicatorIcon;\n const colorIndicatorWrapperStyle = shouldRenderIndicatorWithoutBackground ? { color: colorAsStyle } : {};\n return (\n <Tooltip content={tooltipContent}>\n <li\n className={cx(styles.itemWrapper, {\n [styles.selectedColor]: isSelected,\n [styles.active]: isActive,\n [styles.circle]: colorShape === \"circle\"\n })}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.COLOR_PICKER_ITEM, color)}\n >\n <div className={cx(styles.feedbackIndicator)} />\n <Clickable\n ref={itemRef}\n ~~ariaLabel~~={color}\n className={cx(styles.colorItem, getStyle(styles, camelCase(\"color-item-size-\" + colorSize)), {\n [styles.colorItemTextMode]: shouldRenderIndicatorWithoutBackground\n })}\n style={{ background: shouldRenderIndicatorWithoutBackground ? \"transparent\" : colorAsStyle }}\n onClick={onClick}\n tabIndex~~=\"~~-1\"\n onMouseDown={e => e.preventDefault()} // this is for quill to not lose the selection\n >\n <div className={cx(styles.colorIndicatorWrapper)} style={colorIndicatorWrapperStyle}>\n {shouldRenderIcon && (\n <Icon\n icon={isSelected ? SelectedIndicatorIcon : ColorIndicatorIcon}\n className={cx({\n [styles.colorIconWhite]: !shouldRenderIndicatorWithoutBackground\n })}\n ignoreFocusStyle\n />\n )}\n </div>\n </Clickable>\n </li>\n </Tooltip>\n );\n }\n);\n\nexport default ColorPickerItemComponent;\n"],"names":["ColorPickerItemComponent","forwardRef","_ref2","_ref","color","onColorClicked","_ref2$colorStyle","colorStyle","shouldRenderIndicatorWithoutBackground","ColorIndicatorIcon","_ref2$SelectedIndicat","SelectedIndicatorIcon","isSelected","colorSize","tooltipContent","isActive","colorShape","dataTestId","isMondayColor","useMemo","contentColors","includes","colorAsStyle","ColorUtils","getMondayColorAsStyle","itemRef","useRef","onClick","useCallback","useEffect","current","item","setHoverColor","e","target","style","background","restoreToOriginalColor","addEventListener","removeEventListener","shouldRenderIcon","colorIndicatorWrapperStyle","React","createElement","Tooltip","content","className","cx","styles","itemWrapper","_defineProperty","selectedColor","active","circle","getTestId","ComponentDefaultTestId","COLOR_PICKER_ITEM","feedbackIndicator","Clickable","ref","~~ariaLabel","~~colorItem","getStyle","camelCase","colorItemTextMode","tabIndex","onMouseDown","preventDefault","colorIndicatorWrapper","Icon","icon","colorIconWhite","ignoreFocusStyle"],"mappings":"00BAgEMA,IAAAA,EAA2BC,GAC/B,SAAAC,EAeEC,GACE,IAdAC,EAAKF,EAALE,MACAC,EAAcH,EAAdG,eAAcC,EAAAJ,EACdK,WAAAA,OAAa,IAAHD,EAAG,UAASA,EACtBE,EAAsCN,EAAtCM,uCACAC,EAAkBP,EAAlBO,mBAAkBC,EAAAR,EAClBS,sBAAAA,OAAwBF,IAAHC,EAAGD,EAAkBC,EAC1CE,EAAUV,EAAVU,WACAC,EAASX,EAATW,UACAC,EAAcZ,EAAdY,eACAC,EAAQb,EAARa,SACAC,EAAUd,EAAVc,WACeC,EAAUf,EAAzB,eAIIgB,EAAgBC,GAAQ,WAAA,OAAOC,EAAoCC,SAASjB,EAAM,GAAE,CAACA,IACrFkB,EAAeJ,EAAgBK,EAAWC,sBAAsBpB,EAAOG,GAAcH,EACrFqB,EAAUC,EAAuB,MAEjCC,EAAUC,GAAY,WAAA,OAAMvB,EAAeD,EAAM,GAAE,CAACC,EAAgBD,IAE1EyB,GAAU,WACR,IAAKJ,aAAA,EAAAA,EAASK,WAAWtB,GAA2CU,EAApE,CACA,IAAMa,EAAON,EAAQK,QACfE,EAAgB,SAACC,GAElBA,EAAEC,OAA0BC,MAAMC,WAAab,EAAWC,sBAAsBpB,EADhE,aAAfG,EACsF,UAEA,UAGtF8B,EAAyB,SAACJ,GAC7BA,EAAEC,OAA0BC,MAAMC,WAAad,GAKlD,OAHAS,EAAKO,iBAAiB,aAAcN,GAAe,GACnDD,EAAKO,iBAAiB,aAAcD,GAAwB,GAErD,WACLN,EAAKQ,oBAAoB,aAAcP,GAAe,GACtDD,EAAKQ,oBAAoB,aAAcF,GAAwB,GAjBkB,CAmBrF,GAAG,CAACjC,EAAOkB,EAAcf,EAAYW,EAAeO,EAASjB,IAE7D,IAAMgC,EAAmB5B,GAAcH,EACjCgC,EAA6BjC,EAAyC,CAAEJ,MAAOkB,GAAiB,GACtG,OACEoB,EAACC,cAAAC,EAAQ,CAAAC,QAAS/B,GAChB4B,EAAAC,cAAA,KAAA,CACEG,UAAWC,EAAGC,EAAOC,YAAWC,EAAAA,EAAAA,EAAA,CAAA,EAC7BF,EAAOG,cAAgBvC,GACvBoC,EAAOI,OAASrC,GAChBiC,EAAOK,OAAwB,WAAfrC,IACjB,cACWC,GAAcqC,EAAUC,EAAuBC,kBAAmBpD,IAE/EsC,EAAKC,cAAA,MAAA,CAAAG,UAAWC,EAAGC,EAAOS,qBAC1Bf,~~EAAAC~~,~~cAACe~~,~~EAAS~~,~~CACRC~~,IAAKlC,~~EACLmC~~,~~UAAWxD~~,~~EACX0C~~,UAAWC,EAAGC,~~EAAOa~~,UAAWC,~~EAASd~~,~~EAAQe~~,EAAU,~~mBAAqBlD~~,IAAWqC,EAAA,CAAA,EACxFF,~~EAAOgB~~,~~kBAAoBxD~~,IAE9B2B,MAAO,CAAEC,WAAY5B,EAAyC,cAAgBc,GAC9EK,QAASA,~~EACTsC~~,~~SAAS~~,~~KACTC~~,YAAa,~~SAAAjC~~,GAAC,OAAIA,~~EAAEkC~~,gBAAgB,~~GAEpCzB~~,EAAAC,cAAA,MAAA,CAAKG,UAAWC,EAAGC,~~EAAOoB~~,~~uBAAwBjC~~,MAAOM,GACtDD,GACCE,EAAAC,~~cAAC0B~~,EAAI,CACHC,~~KAAM1D~~,EAAaD,EAAwBF,EAC3CqC,UAAWC,EAAEG,EACVF,CAAAA,EAAAA,~~EAAOuB~~,~~gBAAkB/~~D,~~IAE5BgE,~~kBACA,OAOhB"}
1	+ {"version":3,"file":"ColorPickerItemComponent.js","sources":["../../../../../../src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"../../../../helpers/typesciptCssModulesHelper\";\nimport cx from \"classnames\";\nimport React, { useRef, useCallback, useMemo, forwardRef, useEffect } from \"react\";\nimport { contentColors } from \"../../../../utils/colors-vars-map\";\nimport ColorUtils from \"../../../../utils/colors-utils\";\nimport { Icon } from \"@vibe/icon\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { Clickable } from \"@vibe/clickable\";\nimport { type ColorPickerValueOnly } from \"../../ColorPicker.types\";\nimport { type ColorShapes, type ColorPickerSizes } from \"../../ColorPicker.types\";\nimport { getTestId } from \"../../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../../tests/constants\";\nimport { type VibeComponentProps, type ElementContent, type ColorStyle } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport styles from \"./ColorPickerItemComponent.module.scss\";\n\nexport interface ColorPickerItemComponentProps extends VibeComponentProps {\n /*\n The color value of the item.\n /\n color: ColorPickerValueOnly;\n /\n Callback fired when the color is clicked.\n /\n onColorClicked: (color: ColorPickerValueOnly) => void;\n /\n The style applied to the color.\n /\n colorStyle: ColorStyle;\n /\n If true, renders the color indicator without a background.\n /\n shouldRenderIndicatorWithoutBackground: boolean;\n /\n Icon displayed inside the color item.\n /\n ColorIndicatorIcon: SubIcon;\n /\n Icon displayed when the color is selected.\n /\n SelectedIndicatorIcon: SubIcon;\n /\n If true, the color is marked as selected.\n /\n isSelected: boolean;\n /\n The size of the color item.\n /\n colorSize: ColorPickerSizes;\n /\n Tooltip content for the color item.\n /\n tooltipContent: ElementContent;\n /\n If true, the color item is currently active.\n /\n isActive: boolean;\n /\n The shape of the color item.\n */\n colorShape: ColorShapes;\n}\n\nconst ColorPickerItemComponent = forwardRef(\n (\n {\n color,\n onColorClicked,\n colorStyle = \"regular\",\n shouldRenderIndicatorWithoutBackground,\n ColorIndicatorIcon,\n SelectedIndicatorIcon = ColorIndicatorIcon,\n isSelected,\n colorSize,\n tooltipContent,\n isActive,\n colorShape,\n \"data-testid\": dataTestId\n }: ColorPickerItemComponentProps,\n _ref: React.ForwardedRef<HTMLElement>\n ) => {\n const isMondayColor = useMemo(() => (contentColors as readonly string[]).includes(color), [color]); // casting to any since color can be one of the system content colors but can also be a custom one\n const colorAsStyle = isMondayColor ? ColorUtils.getMondayColorAsStyle(color, colorStyle) : color;\n const itemRef = useRef<HTMLDivElement>(null);\n\n const onClick = useCallback(() => onColorClicked(color), [onColorClicked, color]);\n\n useEffect(() => {\n if (!itemRef?.current \|\| shouldRenderIndicatorWithoutBackground \|\| !isMondayColor) return;\n const item = itemRef.current;\n const setHoverColor = (e: MouseEvent) => {\n if (colorStyle === \"selected\") {\n (e.target as HTMLDivElement).style.background = ColorUtils.getMondayColorAsStyle(color, \"regular\");\n } else {\n (e.target as HTMLDivElement).style.background = ColorUtils.getMondayColorAsStyle(color, \"hover\");\n }\n };\n const restoreToOriginalColor = (e: MouseEvent) => {\n (e.target as HTMLDivElement).style.background = colorAsStyle;\n };\n item.addEventListener(\"mouseenter\", setHoverColor, false);\n item.addEventListener(\"mouseleave\", restoreToOriginalColor, false);\n\n return () => {\n item.removeEventListener(\"mouseenter\", setHoverColor, false);\n item.removeEventListener(\"mouseleave\", restoreToOriginalColor, false);\n };\n }, [color, colorAsStyle, colorStyle, isMondayColor, itemRef, shouldRenderIndicatorWithoutBackground]);\n\n const shouldRenderIcon = isSelected \|\| ColorIndicatorIcon;\n const colorIndicatorWrapperStyle = shouldRenderIndicatorWithoutBackground ? { color: colorAsStyle } : {};\n return (\n <Tooltip content={tooltipContent}>\n <li\n className={cx(styles.itemWrapper, {\n [styles.selectedColor]: isSelected,\n [styles.active]: isActive,\n [styles.circle]: colorShape === \"circle\"\n })}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.COLOR_PICKER_ITEM, color)}\n >\n <div className={cx(styles.feedbackIndicator)} />\n <Clickable\n ref={itemRef}\n aria-label={color}\n className={cx(styles.colorItem, getStyle(styles, camelCase(\"color-item-size-\" + colorSize)), {\n [styles.colorItemTextMode]: shouldRenderIndicatorWithoutBackground\n })}\n style={{ background: shouldRenderIndicatorWithoutBackground ? \"transparent\" : colorAsStyle }}\n onClick={onClick}\n tabIndex={-1}\n onMouseDown={e => e.preventDefault()} // this is for quill to not lose the selection\n >\n <div className={cx(styles.colorIndicatorWrapper)} style={colorIndicatorWrapperStyle}>\n {shouldRenderIcon && (\n <Icon\n icon={isSelected ? SelectedIndicatorIcon : ColorIndicatorIcon}\n className={cx({\n [styles.colorIconWhite]: !shouldRenderIndicatorWithoutBackground\n })}\n ignoreFocusStyle\n />\n )}\n </div>\n </Clickable>\n </li>\n </Tooltip>\n );\n }\n);\n\nexport default ColorPickerItemComponent;\n"],"names":["ColorPickerItemComponent","forwardRef","_ref2","_ref","color","onColorClicked","_ref2$colorStyle","colorStyle","shouldRenderIndicatorWithoutBackground","ColorIndicatorIcon","_ref2$SelectedIndicat","SelectedIndicatorIcon","isSelected","colorSize","tooltipContent","isActive","colorShape","dataTestId","isMondayColor","useMemo","contentColors","includes","colorAsStyle","ColorUtils","getMondayColorAsStyle","itemRef","useRef","onClick","useCallback","useEffect","current","item","setHoverColor","e","target","style","background","restoreToOriginalColor","addEventListener","removeEventListener","shouldRenderIcon","colorIndicatorWrapperStyle","React","createElement","Tooltip","content","className","cx","styles","itemWrapper","_defineProperty","selectedColor","active","circle","getTestId","ComponentDefaultTestId","COLOR_PICKER_ITEM","feedbackIndicator","Clickable","ref","colorItem","getStyle","camelCase","colorItemTextMode","tabIndex","onMouseDown","preventDefault","colorIndicatorWrapper","Icon","icon","colorIconWhite","ignoreFocusStyle"],"mappings":"00BAgEMA,IAAAA,EAA2BC,GAC/B,SAAAC,EAeEC,GACE,IAdAC,EAAKF,EAALE,MACAC,EAAcH,EAAdG,eAAcC,EAAAJ,EACdK,WAAAA,OAAa,IAAHD,EAAG,UAASA,EACtBE,EAAsCN,EAAtCM,uCACAC,EAAkBP,EAAlBO,mBAAkBC,EAAAR,EAClBS,sBAAAA,OAAwBF,IAAHC,EAAGD,EAAkBC,EAC1CE,EAAUV,EAAVU,WACAC,EAASX,EAATW,UACAC,EAAcZ,EAAdY,eACAC,EAAQb,EAARa,SACAC,EAAUd,EAAVc,WACeC,EAAUf,EAAzB,eAIIgB,EAAgBC,GAAQ,WAAA,OAAOC,EAAoCC,SAASjB,EAAM,GAAE,CAACA,IACrFkB,EAAeJ,EAAgBK,EAAWC,sBAAsBpB,EAAOG,GAAcH,EACrFqB,EAAUC,EAAuB,MAEjCC,EAAUC,GAAY,WAAA,OAAMvB,EAAeD,EAAM,GAAE,CAACC,EAAgBD,IAE1EyB,GAAU,WACR,IAAKJ,aAAA,EAAAA,EAASK,WAAWtB,GAA2CU,EAApE,CACA,IAAMa,EAAON,EAAQK,QACfE,EAAgB,SAACC,GAElBA,EAAEC,OAA0BC,MAAMC,WAAab,EAAWC,sBAAsBpB,EADhE,aAAfG,EACsF,UAEA,UAGtF8B,EAAyB,SAACJ,GAC7BA,EAAEC,OAA0BC,MAAMC,WAAad,GAKlD,OAHAS,EAAKO,iBAAiB,aAAcN,GAAe,GACnDD,EAAKO,iBAAiB,aAAcD,GAAwB,GAErD,WACLN,EAAKQ,oBAAoB,aAAcP,GAAe,GACtDD,EAAKQ,oBAAoB,aAAcF,GAAwB,GAjBkB,CAmBrF,GAAG,CAACjC,EAAOkB,EAAcf,EAAYW,EAAeO,EAASjB,IAE7D,IAAMgC,EAAmB5B,GAAcH,EACjCgC,EAA6BjC,EAAyC,CAAEJ,MAAOkB,GAAiB,GACtG,OACEoB,EAACC,cAAAC,EAAQ,CAAAC,QAAS/B,GAChB4B,EAAAC,cAAA,KAAA,CACEG,UAAWC,EAAGC,EAAOC,YAAWC,EAAAA,EAAAA,EAAA,CAAA,EAC7BF,EAAOG,cAAgBvC,GACvBoC,EAAOI,OAASrC,GAChBiC,EAAOK,OAAwB,WAAfrC,IACjB,cACWC,GAAcqC,EAAUC,EAAuBC,kBAAmBpD,IAE/EsC,EAAKC,cAAA,MAAA,CAAAG,UAAWC,EAAGC,EAAOS,qBAC1Bf,EAACC,cAAAe,EACC,CAAAC,IAAKlC,EACO,aAAArB,EACZ0C,UAAWC,EAAGC,EAAOY,UAAWC,EAASb,EAAQc,EAAU,mBAAqBjD,IAAWqC,EAAA,CAAA,EACxFF,EAAOe,kBAAoBvD,IAE9B2B,MAAO,CAAEC,WAAY5B,EAAyC,cAAgBc,GAC9EK,QAASA,EACTqC,UAAW,EACXC,YAAa,SAAAhC,GAAC,OAAIA,EAAEiC,gBAAgB,GAEpCxB,EAAAC,cAAA,MAAA,CAAKG,UAAWC,EAAGC,EAAOmB,uBAAwBhC,MAAOM,GACtDD,GACCE,EAAAC,cAACyB,EAAI,CACHC,KAAMzD,EAAaD,EAAwBF,EAC3CqC,UAAWC,EAAEG,EACVF,CAAAA,EAAAA,EAAOsB,gBAAkB9D,IAE5B+D,kBACA,OAOhB"}

package/dist/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={itemWrapper:"itemWrapper_bf0a5a07d1",circle:"circle_9299b18b38",feedbackIndicator:"feedbackIndicator_22e9ba33fc",active:"active_df5066d3ad",selectedColor:"selectedColor_375cf93131",colorItem:"colorItem_658fa81272",colorIndicatorWrapper:"colorIndicatorWrapper_56c388f2ea",colorItemSizeSmall:"colorItemSizeSmall_949572f002",colorItemSizeMedium:"colorItemSizeMedium_6c1d4d6298",colorItemSizeLarge:"colorItemSizeLarge_12c2f9e85d",colorItemTextMode:"colorItemTextMode_a016034e56",colorIconWhite:"colorIconWhite_6f0a3a9833"};!function(e){const r="s_id-4f41e3ef6859_3_86_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+r))return;const a=document.createElement("style");a.id=r,n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=e)}('.itemWrapper_bf0a5a07d1.circle_9299b18b38 {\n  --border-radius-multiplier: 99999;\n}\n\n/* stylelint-disable scss/operator-no-unspaced */\n\n.itemWrapper_bf0a5a07d1 {\n  --border-radius-multiplier: 1;\n  margin: 4px;\n  display: flex;\n  list-style-type: none;\n  position: relative;\n}\n\n.itemWrapper_bf0a5a07d1 .feedbackIndicator_22e9ba33fc {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.itemWrapper_bf0a5a07d1:focus,\n.itemWrapper_bf0a5a07d1:focus-visible,\n.itemWrapper_bf0a5a07d1.active_df5066d3ad {\n  outline: none;\n}\n\n.itemWrapper_bf0a5a07d1:focus .feedbackIndicator_22e9ba33fc:before,\n.itemWrapper_bf0a5a07d1:focus-visible .feedbackIndicator_22e9ba33fc:before,\n.itemWrapper_bf0a5a07d1.active_df5066d3ad .feedbackIndicator_22e9ba33fc:before {\n  content: " ";\n  position: absolute;\n  border-radius: calc(7px * var(--border-radius-multiplier, 1));\n  inset: -4px;\n  border: 4px solid;\n  border-color: var(--primary-selected-color);\n  pointer-events: none;\n}\n\n.itemWrapper_bf0a5a07d1:focus .feedbackIndicator_22e9ba33fc:after,\n.itemWrapper_bf0a5a07d1:focus-visible .feedbackIndicator_22e9ba33fc:after,\n.itemWrapper_bf0a5a07d1.active_df5066d3ad .feedbackIndicator_22e9ba33fc:after {\n  content: " ";\n  position: absolute;\n  border-radius: calc(7px * var(--border-radius-multiplier, 1));\n  inset: -1px;\n  border: 1px solid;\n  border-color: var(--primary-color);\n  pointer-events: none;\n}\n\n/* active elements have no "hover feedback" */\n\n.itemWrapper_bf0a5a07d1:hover:not(.active_df5066d3ad):not(.selectedColor_375cf93131) .feedbackIndicator_22e9ba33fc {\n  content: " ";\n  position: absolute;\n  border-radius: calc(8px * var(--border-radius-multiplier, 1));\n  inset: -4px;\n  border: 4px solid;\n  border-color: var(--primary-background-hover-color);\n  pointer-events: none;\n}\n\n.itemWrapper_bf0a5a07d1 .colorItem_658fa81272 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 2px solid transparent;\n  border-radius: calc(4px * var(--border-radius-multiplier, 1));\n  cursor: pointer;\n}\n\n.itemWrapper_bf0a5a07d1 .colorItem_658fa81272 .colorIndicatorWrapper_56c388f2ea {\n  display: flex;\n}\n\n.itemWrapper_bf0a5a07d1 .colorItem_658fa81272.colorItemSizeSmall_949572f002 {\n  width: 24px;\n  height: 24px;\n}\n\n.itemWrapper_bf0a5a07d1 .colorItem_658fa81272.colorItemSizeMedium_6c1d4d6298 {\n  width: 32px;\n  height: 32px;\n}\n\n.itemWrapper_bf0a5a07d1 .colorItem_658fa81272.colorItemSizeLarge_12c2f9e85d {\n  width: 40px;\n  height: 40px;\n}\n\n.itemWrapper_bf0a5a07d1.selectedColor_375cf93131 {\n  position: relative;\n}\n\n.itemWrapper_bf0a5a07d1.selectedColor_375cf93131:before {\n  content: " ";\n  position: absolute;\n  border-radius: calc(7px * var(--border-radius-multiplier, 1));\n  inset: -4px;\n  border: 2px solid;\n  border-color: var(--primary-color);\n  pointer-events: none;\n}\n\n.itemWrapper_bf0a5a07d1.selectedColor_375cf93131 .feedbackIndicator_22e9ba33fc:before {\n  /* hide the outer border from the "active" feedback indicator */\n  display: none;\n}\n\n.itemWrapper_bf0a5a07d1 .colorItemTextMode_a016034e56:hover {\n  background-color: var(--primary-background-hover-color) !important;\n}\n\n.itemWrapper_bf0a5a07d1 .colorIconWhite_6f0a3a9833 {\n  color: var(--color-snow_white);\n}');export{e as default};
+var e={itemWrapper:"itemWrapper_114930b9cd",circle:"circle_f28d972e47",feedbackIndicator:"feedbackIndicator_3747f32995",active:"active_f78d80be16",selectedColor:"selectedColor_2c3b11837a",colorItem:"colorItem_baed10be6d",colorIndicatorWrapper:"colorIndicatorWrapper_bf1b42cbe2",colorItemSizeSmall:"colorItemSizeSmall_1403c4073d",colorItemSizeMedium:"colorItemSizeMedium_13e260238e",colorItemSizeLarge:"colorItemSizeLarge_29e287c488",colorItemTextMode:"colorItemTextMode_0710a17031",colorIconWhite:"colorIconWhite_1b420dbfed"};!function(e){const r="s_id-4f41e3ef6859_4_0_0-alpha_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+r))return;const o=document.createElement("style");o.id=r,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=e)}('.itemWrapper_114930b9cd.circle_f28d972e47 {\n  --border-radius-multiplier: 99999;\n}\n\n/* stylelint-disable scss/operator-no-unspaced */\n\n.itemWrapper_114930b9cd {\n  --border-radius-multiplier: 1;\n  margin: 4px;\n  display: flex;\n  list-style-type: none;\n  position: relative;\n}\n\n.itemWrapper_114930b9cd .feedbackIndicator_3747f32995 {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.itemWrapper_114930b9cd:focus,\n.itemWrapper_114930b9cd:focus-visible,\n.itemWrapper_114930b9cd.active_f78d80be16 {\n  outline: none;\n}\n\n.itemWrapper_114930b9cd:focus .feedbackIndicator_3747f32995:before,\n.itemWrapper_114930b9cd:focus-visible .feedbackIndicator_3747f32995:before,\n.itemWrapper_114930b9cd.active_f78d80be16 .feedbackIndicator_3747f32995:before {\n  content: " ";\n  position: absolute;\n  border-radius: calc(7px * var(--border-radius-multiplier, 1));\n  inset: -4px;\n  border: 4px solid;\n  border-color: var(--primary-selected-color);\n  pointer-events: none;\n}\n\n.itemWrapper_114930b9cd:focus .feedbackIndicator_3747f32995:after,\n.itemWrapper_114930b9cd:focus-visible .feedbackIndicator_3747f32995:after,\n.itemWrapper_114930b9cd.active_f78d80be16 .feedbackIndicator_3747f32995:after {\n  content: " ";\n  position: absolute;\n  border-radius: calc(7px * var(--border-radius-multiplier, 1));\n  inset: -1px;\n  border: 1px solid;\n  border-color: var(--primary-color);\n  pointer-events: none;\n}\n\n/* active elements have no "hover feedback" */\n\n.itemWrapper_114930b9cd:hover:not(.active_f78d80be16):not(.selectedColor_2c3b11837a) .feedbackIndicator_3747f32995 {\n  content: " ";\n  position: absolute;\n  border-radius: calc(8px * var(--border-radius-multiplier, 1));\n  inset: -4px;\n  border: 4px solid;\n  border-color: var(--primary-background-hover-color);\n  pointer-events: none;\n}\n\n.itemWrapper_114930b9cd .colorItem_baed10be6d {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 2px solid transparent;\n  border-radius: calc(4px * var(--border-radius-multiplier, 1));\n  cursor: pointer;\n}\n\n.itemWrapper_114930b9cd .colorItem_baed10be6d .colorIndicatorWrapper_bf1b42cbe2 {\n  display: flex;\n}\n\n.itemWrapper_114930b9cd .colorItem_baed10be6d.colorItemSizeSmall_1403c4073d {\n  width: 24px;\n  height: 24px;\n}\n\n.itemWrapper_114930b9cd .colorItem_baed10be6d.colorItemSizeMedium_13e260238e {\n  width: 32px;\n  height: 32px;\n}\n\n.itemWrapper_114930b9cd .colorItem_baed10be6d.colorItemSizeLarge_29e287c488 {\n  width: 40px;\n  height: 40px;\n}\n\n.itemWrapper_114930b9cd.selectedColor_2c3b11837a {\n  position: relative;\n}\n\n.itemWrapper_114930b9cd.selectedColor_2c3b11837a:before {\n  content: " ";\n  position: absolute;\n  border-radius: calc(7px * var(--border-radius-multiplier, 1));\n  inset: -4px;\n  border: 2px solid;\n  border-color: var(--primary-color);\n  pointer-events: none;\n}\n\n.itemWrapper_114930b9cd.selectedColor_2c3b11837a .feedbackIndicator_3747f32995:before {\n  /* hide the outer border from the "active" feedback indicator */\n  display: none;\n}\n\n.itemWrapper_114930b9cd .colorItemTextMode_0710a17031:hover {\n  background-color: var(--primary-background-hover-color) !important;\n}\n\n.itemWrapper_114930b9cd .colorIconWhite_1b420dbfed {\n  color: var(--color-snow_white);\n}');export{e as default};
 //# sourceMappingURL=ColorPickerItemComponent.module.scss.js.map

package/dist/src/components/Combobox/Combobox.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t from"classnames";import i,{forwardRef as s,useRef as r,useState as n,useCallback as a,useMemo as l}from"react";import{camelCase as c,noop as d,isFunction as m}from"es-toolkit";import{getStyle as p}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as u,ComponentDefaultTestId as b}from"../../tests/testIds.js";import v from"../../hooks/useMergeRef.js";import f from"../Search/Search.js";import{BASE_SIZES as h}from"../../constants/sizes.js";import{useWarnDeprecated as C}from"../../utils/warn-deprecated.js";import x from"./components/ComboboxOption/ComboboxOption.js";import{defaultFilter as g}from"./ComboboxService.js";import{ComboboxItems as y}from"./components/ComboboxItems/ComboboxItems.js";import{StickyCategoryHeader as I}from"./components/StickyCategoryHeader/StickyCategoryHeader.js";import{useItemsData as O,useKeyboardNavigation as j}from"./ComboboxHelpers/ComboboxHelpers.js";import{getOptionId as N}from"./helpers.js";import{withStaticProps as S}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import{COMBOBOX_LISTBOX_ID as R}from"./components/ComboboxConstants.js";import k from"./Combobox.module.scss.js";import{ComponentVibeId as F}from"../../tests/constants.js";import H from"../../../components/typography/dist/Text/Text.js";import E from"../../../components/button/dist/Button/Button.js";var A=S(s((function(s,h){var x=s.className,S=void 0===x?"":x,A=s.optionClassName,L=void 0===A?"":A,w=s.searchWrapperClassName,M=s.stickyCategoryClassName,B=s.searchIcon,T=s.id,z=void 0===T?"":T,V=s.placeholder,P=void 0===V?"":V,W=s.size,D=void 0===W?"medium":W,X=s.defaultVisualFocusFirstIndex,_=s.optionLineHeight,q=void 0===_?32:_,G=s.optionsListHeight,J=s.autoFocus,K=void 0!==J&&J,Q=s.disabled,U=void 0!==Q&&Q,Y=s.options,Z=void 0===Y?[]:Y,$=s.categories,ee=s.withCategoriesDivider,oe=void 0!==ee&&ee,te=s.noResultsMessage,ie=void 0===te?"No results found":te,se=s.onAddNew,re=s.addNewLabel,ne=void 0===re?"Add new":re,ae=s.onClick,le=void 0===ae?function(e){}:ae,ce=s.filter,de=void 0===ce?g:ce,me=s.disableFilter,pe=void 0!==me&&me,ue=s.filterValue,be=s.onFilterChanged,ve=s.loading,fe=void 0!==ve&&ve,he=s.onOptionHover,Ce=void 0===he?d:he,xe=s.onOptionLeave,ge=void 0===xe?d:xe,ye=s.shouldScrollToSelectedItem,Ie=void 0===ye||ye,Oe=s.noResultsRenderer,je=s.stickyCategories,Ne=void 0!==je&&je,Se=s.optionRenderer,Re=void 0===Se?null:Se,ke=s.renderOnlyVisibleOptions,Fe=void 0!==ke&&ke,He=s.clearFilterOnSelection,Ee=void 0!==He&&He,Ae=s.maxOptionsWithoutScroll,Le=s.defaultFilter,we=void 0===Le?"":Le,Me=s.searchInputAriaLabel,Be=void 0===Me?"Search for content":Me,Te=s["data-testid"],ze=s.debounceRate,Ve=s.searchInputRef,Pe=s.renderAction,We=s.hideRenderActionOnInput;C({component:"Combobox",message:"This component is deprecated and will be removed in the next major version. Please use Dropdown box mode from @vibe/core/next instead."});var De=r(null),Xe=r(null),_e=v(h,De),qe=v(Xe,Ve),Ge=n(ue||we),Je=e(Ge,2),Ke=Je[0],Qe=Je[1];void 0!==ue&&ue!==Ke&&Qe(ue);var Ue=a((function(e){to(-1),be&&be(e),Qe(e)}),[Qe,be]),Ye=a((function(e,o,t){Ce(e,o,t)}),[Ce]),Ze=l((function(){return pe?Z:de(Ke,Z)}),[Z,Ke,de,pe]),$e=n(-1),eo=e($e,2),oo=eo[0],to=eo[1],io=a((function(e){return void 0!==e&&Ze[e]&&!Ze[e].disabled}),[Ze]),so=a((function(){se&&se(Ke),Qe("")}),[se,Ke,Qe]),ro=Ze.length>0,no=Ke.length>0;var ao=n(),lo=e(ao,2),co=lo[0],mo=lo[1],po=a((function(e){var o;(null===(o=null==e?void 0:e.category)||void 0===o?void 0:o.label)!==(null==co?void 0:co.label)&&mo(null==e?void 0:e.category)}),[co]),uo=O({categories:$,options:Ze,filterValue:Ke,withCategoriesDivider:oe,optionLineHeight:q}),bo=uo.items,vo=uo.itemsMap,fo=uo.selectableItems,ho=a((function(e,o){le(fo[o]),io(o)&&to(o),Ee&&Ue("")}),[le,fo,io,Ee,Ue]),Co=j({getOptionId:N,defaultVisualFocusFirstIndex:X,onClick:ho,isChildSelectable:io,options:fo,inputRef:qe}),xo=Co.visualFocusItemIndex,go=Co.visualFocusItemId,yo=Co.onOptionClick;return i.createElement(H,{type:"text2",ref:_e,className:t(k.combobox,S,p(k,c("size-"+D)),o(o({},k.empty,!ro),k.stickyCategory,Ne)),id:z,"data-testid":Te||u(b.COMBOBOX,z),ellipsis:!1,"data-vibe":F.COMBOBOX},i.createElement("div",{className:k.comboboxList,style:{maxHeight:G}},i.createElement(f,{ref:qe,value:Ke,className:t(k.comboboxSearchWrapper,w),inputAriaLabel:Be,currentAriaResultId:go,id:"combobox-search",placeholder:P,size:D,disabled:U,onChange:Ue,autoFocus:K,loading:fe,searchIconName:B,ariaExpanded:no||ro,ariaHasPopup:"listbox",searchResultsContainerId:z?"".concat(z,"-listbox"):R,debounceRate:ze,renderAction:Pe,hideRenderActionOnInput:We}),Ne&&i.createElement(I,{label:null==co?void 0:co.label,color:null==co?void 0:co.color,className:M}),ro&&i.createElement(y,{stickyCategories:Ne,categories:$,options:bo,itemsMap:vo,optionClassName:L,optionRenderer:Re,activeItemIndex:oo,onActiveCategoryChanged:po,onOptionClick:yo,onOptionEnter:Ye,onOptionLeave:ge,optionLineHeight:q,shouldScrollToSelectedItem:Ie,renderOnlyVisibleOptions:Fe,maxOptionsWithoutScroll:Ae,visualFocusItemIndex:xo,id:z?"".concat(z,"-listbox"):R})),no&&!ro&&!fe&&(Oe?Oe():i.createElement("div",{className:k.comboboxNoResults},i.createElement("div",{className:k.comboboxMessageWrapper},i.createElement("span",{className:k.comboboxMessage},ie)),se&&!U&&i.createElement(E,{className:k.addNewButton,size:D,kind:"tertiary",onClick:so},i.createElement("span",{className:k.buttonLabel},m(ne)?ne(Ke):ne)))))})),{sizes:h,iconTypes:x.iconTypes});export{A as default};
+import{slicedToArray as e,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t from"classnames";import i,{forwardRef as s,useRef as r,useState as n,useCallback as a,useMemo as l}from"react";import{camelCase as d,noop as c,isFunction as m}from"es-toolkit";import{getStyle as p}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as u,ComponentDefaultTestId as v}from"../../tests/testIds.js";import b from"../../hooks/useMergeRef.js";import f from"../Search/Search.js";import{useWarnDeprecated as h}from"../../utils/warn-deprecated.js";import{defaultFilter as C}from"./ComboboxService.js";import{ComboboxItems as g}from"./components/ComboboxItems/ComboboxItems.js";import{StickyCategoryHeader as x}from"./components/StickyCategoryHeader/StickyCategoryHeader.js";import{useItemsData as I,useKeyboardNavigation as y}from"./ComboboxHelpers/ComboboxHelpers.js";import{getOptionId as O}from"./helpers.js";import{COMBOBOX_LISTBOX_ID as N}from"./components/ComboboxConstants.js";import j from"./Combobox.module.scss.js";import{ComponentVibeId as R}from"../../tests/constants.js";import S from"../../../components/typography/dist/Text/Text.js";import k from"../../../components/button/dist/Button/Button.js";var F=s((function(s,F){var H=s.className,A=void 0===H?"":H,E=s.optionClassName,L=void 0===E?"":E,w=s.searchWrapperClassName,M=s.stickyCategoryClassName,B=s.searchIcon,T=s.id,V=void 0===T?"":T,W=s.placeholder,z=void 0===W?"":W,D=s.size,P=void 0===D?"medium":D,X=s.defaultVisualFocusFirstIndex,_=s.optionLineHeight,q=void 0===_?32:_,G=s.optionsListHeight,J=s.autoFocus,K=void 0!==J&&J,Q=s.disabled,U=void 0!==Q&&Q,Y=s.options,Z=void 0===Y?[]:Y,$=s.categories,ee=s.withCategoriesDivider,oe=void 0!==ee&&ee,te=s.noResultsMessage,ie=void 0===te?"No results found":te,se=s.onAddNew,re=s.addNewLabel,ne=void 0===re?"Add new":re,ae=s.onClick,le=void 0===ae?function(e){}:ae,de=s.filter,ce=void 0===de?C:de,me=s.disableFilter,pe=void 0!==me&&me,ue=s.filterValue,ve=s.onFilterChanged,be=s.loading,fe=void 0!==be&&be,he=s.onOptionHover,Ce=void 0===he?c:he,ge=s.onOptionLeave,xe=void 0===ge?c:ge,Ie=s.shouldScrollToSelectedItem,ye=void 0===Ie||Ie,Oe=s.noResultsRenderer,Ne=s.stickyCategories,je=void 0!==Ne&&Ne,Re=s.optionRenderer,Se=void 0===Re?null:Re,ke=s.renderOnlyVisibleOptions,Fe=void 0!==ke&&ke,He=s.clearFilterOnSelection,Ae=void 0!==He&&He,Ee=s.maxOptionsWithoutScroll,Le=s.defaultFilter,we=void 0===Le?"":Le,Me=s.searchInputAriaLabel,Be=void 0===Me?"Search for content":Me,Te=s["data-testid"],Ve=s.debounceRate,We=s.searchInputRef,ze=s.renderAction,De=s.hideRenderActionOnInput;h({component:"Combobox",message:"This component is deprecated and will be removed in the next major version. Please use Dropdown box mode from @vibe/core instead."});var Pe=r(null),Xe=r(null),_e=b(F,Pe),qe=b(Xe,We),Ge=n(ue||we),Je=e(Ge,2),Ke=Je[0],Qe=Je[1];void 0!==ue&&ue!==Ke&&Qe(ue);var Ue=a((function(e){to(-1),ve&&ve(e),Qe(e)}),[Qe,ve]),Ye=a((function(e,o,t){Ce(e,o,t)}),[Ce]),Ze=l((function(){return pe?Z:ce(Ke,Z)}),[Z,Ke,ce,pe]),$e=n(-1),eo=e($e,2),oo=eo[0],to=eo[1],io=a((function(e){return void 0!==e&&Ze[e]&&!Ze[e].disabled}),[Ze]),so=a((function(){se&&se(Ke),Qe("")}),[se,Ke,Qe]),ro=Ze.length>0,no=Ke.length>0;var ao=n(),lo=e(ao,2),co=lo[0],mo=lo[1],po=a((function(e){var o;(null===(o=null==e?void 0:e.category)||void 0===o?void 0:o.label)!==(null==co?void 0:co.label)&&mo(null==e?void 0:e.category)}),[co]),uo=I({categories:$,options:Ze,filterValue:Ke,withCategoriesDivider:oe,optionLineHeight:q}),vo=uo.items,bo=uo.itemsMap,fo=uo.selectableItems,ho=a((function(e,o){le(fo[o]),io(o)&&to(o),Ae&&Ue("")}),[le,fo,io,Ae,Ue]),Co=y({getOptionId:O,defaultVisualFocusFirstIndex:X,onClick:ho,isChildSelectable:io,options:fo,inputRef:qe}),go=Co.visualFocusItemIndex,xo=Co.visualFocusItemId,Io=Co.onOptionClick;return i.createElement(S,{type:"text2",ref:_e,className:t(j.combobox,A,p(j,d("size-"+P)),o(o({},j.empty,!ro),j.stickyCategory,je)),id:V,"data-testid":Te||u(v.COMBOBOX,V),ellipsis:!1,"data-vibe":R.COMBOBOX},i.createElement("div",{className:j.comboboxList,style:{maxHeight:G}},i.createElement(f,{ref:qe,value:Ke,className:t(j.comboboxSearchWrapper,w),inputAriaLabel:Be,currentAriaResultId:xo,id:"combobox-search",placeholder:z,size:P,disabled:U,onChange:Ue,autoFocus:K,loading:fe,searchIconName:B,"aria-expanded":no||ro,"aria-haspopup":"listbox",searchResultsContainerId:V?"".concat(V,"-listbox"):N,debounceRate:Ve,renderAction:ze,hideRenderActionOnInput:De}),je&&i.createElement(x,{label:null==co?void 0:co.label,color:null==co?void 0:co.color,className:M}),ro&&i.createElement(g,{stickyCategories:je,categories:$,options:vo,itemsMap:bo,optionClassName:L,optionRenderer:Se,activeItemIndex:oo,onActiveCategoryChanged:po,onOptionClick:Io,onOptionEnter:Ye,onOptionLeave:xe,optionLineHeight:q,shouldScrollToSelectedItem:ye,renderOnlyVisibleOptions:Fe,maxOptionsWithoutScroll:Ee,visualFocusItemIndex:go,id:V?"".concat(V,"-listbox"):N})),no&&!ro&&!fe&&(Oe?Oe():i.createElement("div",{className:j.comboboxNoResults},i.createElement("div",{className:j.comboboxMessageWrapper},i.createElement("span",{className:j.comboboxMessage},ie)),se&&!U&&i.createElement(k,{className:j.addNewButton,size:P,kind:"tertiary",onClick:so},i.createElement("span",{className:j.buttonLabel},m(ne)?ne(Ke):ne)))))}));export{F as default};
 //# sourceMappingURL=Combobox.js.map

package/dist/src/components/Combobox/Combobox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Combobox.js","sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { useRef, useState, forwardRef, useMemo, useCallback } from \"react\";\nimport { isFunction } from \"es-toolkit\";\nimport { noop as NOOP, camelCase } from \"es-toolkit\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport Search from \"../Search/Search\";\nimport { BASE_SIZES } from \"../../constants\";\nimport { Button } from \"@vibe/button\";\nimport { Text } from \"@vibe/typography\";\nimport { useWarnDeprecated } from \"../../utils/warn-deprecated\";\nimport ComboboxOption from \"./components/ComboboxOption/ComboboxOption\";\nimport { defaultFilter } from \"./ComboboxService\";\nimport { ComboboxItems } from \"./components/ComboboxItems/ComboboxItems\";\nimport { StickyCategoryHeader } from \"./components/StickyCategoryHeader/StickyCategoryHeader\";\nimport { useItemsData, useKeyboardNavigation } from \"./ComboboxHelpers/ComboboxHelpers\";\nimport { getOptionId } from \"./helpers\";\nimport { type ElementContent, type VibeComponentProps, withStaticProps } from \"../../types\";\nimport {\n type IComboboxCategoryMap,\n type IComboboxItem,\n type IComboboxOption,\n COMBOBOX_LISTBOX_ID,\n type IComboboxCategory\n} from \"./components/ComboboxConstants\";\nimport styles from \"./Combobox.module.scss\";\nimport { type ComboboxSizes } from \"./Combobox.types\";\nimport type { IconButton } from \"@vibe/icon-button\";\nimport type MenuButton from \"../MenuButton/MenuButton\";\nimport { ComponentVibeId } from \"../../tests/constants\";\nimport { type SubIcon } from \"@vibe/icon\";\n\nexport interface ComboboxProps extends VibeComponentProps {\n /*\n Class name applied to each option item.\n /\n optionClassName?: string;\n /\n Class name applied to the search wrapper.\n /\n searchWrapperClassName?: string;\n /\n Class name applied to the sticky category header.\n /\n stickyCategoryClassName?: string;\n /\n Placeholder text displayed in the search input.\n /\n placeholder?: string;\n /\n Message displayed when no results are found.\n /\n noResultsMessage?: string;\n /\n If true, the combobox is disabled.\n /\n disabled?: boolean;\n /\n The list of available options.\n /\n options?: IComboboxOption[];\n /\n The list of available categories.\n /\n categories?: IComboboxCategoryMap;\n /\n If true, displays a divider between category sections.\n /\n withCategoriesDivider?: boolean;\n /\n The size of the combobox.\n /\n size?: ComboboxSizes;\n /\n The height of each option item.\n /\n optionLineHeight?: number;\n /\n The height of the options list.\n /\n optionsListHeight?: number;\n /\n If true, the search input is focused when the component mounts.\n /\n autoFocus?: boolean;\n /\n Callback fired when the \"Add new\" button is clicked.\n /\n onAddNew?: (value: string) => void;\n /\n Label displayed for the \"Add new\" button.\n /\n addNewLabel?: ((label: string) => ElementContent) \| string;\n /\n Custom filter function for searching options.\n /\n filter?: (filterValue: string, options: IComboboxOption[]) => IComboboxOption[];\n /\n The default search input\n /\n defaultFilter?: string;\n /\n If true, disables filtering.\n /\n disableFilter?: boolean;\n /\n Controlled search input value.\n /\n filterValue?: string;\n /\n Callback fired when the search input value changes.\n /\n onFilterChanged?: (value: string) => void;\n /\n If true, displays a loading state.\n /\n loading?: boolean;\n /\n Callback fired when an option is hovered.\n /\n onOptionHover?: (event: React.MouseEvent, index: number, option: IComboboxOption) => void;\n /\n Callback fired when the mouse leaves an option.\n /\n onOptionLeave?: () => void;\n /\n If true, automatically scrolls to the selected option.\n /\n shouldScrollToSelectedItem?: boolean;\n /\n Custom renderer for when no results are found.\n /\n noResultsRenderer?: () => JSX.Element;\n /\n If true, keeps categories visible when scrolling.\n /\n stickyCategories?: boolean;\n /\n If true, visually focuses the first item by default.\n /\n defaultVisualFocusFirstIndex?: boolean;\n /\n If true, clears the search input when an option is selected.\n /\n clearFilterOnSelection?: boolean;\n /\n Custom renderer for options.\n /\n optionRenderer?: (option: IComboboxOption) => JSX.Element;\n /\n Maximum number of options displayed before scrolling.\n /\n maxOptionsWithoutScroll?: number;\n /\n If true, renders only visible options for performance optimization.\n /\n renderOnlyVisibleOptions?: boolean;\n /\n Callback fired when an option is clicked.\n /\n onClick?: (optionData: IComboboxOption) => void;\n /\n Custom search icon.\n /\n searchIcon?: SubIcon;\n /\n ARIA label for the search input.\n /\n searchInputAriaLabel?: string;\n /\n The debounce rate for filtering.\n /\n debounceRate?: number;\n /\n Ref for the search input element.\n /\n searchInputRef?: React.RefObject<HTMLInputElement>;\n /\n Additional action button inside the search input.\n /\n renderAction?: React.ReactElement<typeof IconButton \| typeof MenuButton>;\n /\n If true, hides the additional action when the user types in the search input.\n */\n hideRenderActionOnInput?: boolean;\n}\n\nconst Combobox = forwardRef(\n (\n {\n className = \"\",\n optionClassName = \"\",\n searchWrapperClassName,\n stickyCategoryClassName,\n searchIcon,\n id = \"\",\n placeholder = \"\",\n size = \"medium\",\n defaultVisualFocusFirstIndex,\n optionLineHeight = 32,\n optionsListHeight,\n autoFocus = false,\n disabled = false,\n options = [],\n categories,\n withCategoriesDivider = false,\n noResultsMessage = \"No results found\",\n onAddNew,\n addNewLabel = \"Add new\",\n onClick = (_optionData: IComboboxOption) => {},\n filter = defaultFilter,\n disableFilter = false,\n filterValue: filterValueProp,\n onFilterChanged,\n loading = false,\n onOptionHover = NOOP,\n onOptionLeave = NOOP,\n shouldScrollToSelectedItem = true,\n noResultsRenderer,\n stickyCategories = false,\n optionRenderer = null,\n renderOnlyVisibleOptions = false,\n clearFilterOnSelection = false,\n maxOptionsWithoutScroll,\n defaultFilter: defaultFilterValue = \"\",\n searchInputAriaLabel = \"Search for content\",\n \"data-testid\": dataTestId,\n debounceRate,\n searchInputRef,\n renderAction: RenderAction,\n hideRenderActionOnInput\n }: ComboboxProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n useWarnDeprecated({\n component: \"Combobox\",\n message:\n \"This component is deprecated and will be removed in the next major version. Please use Dropdown box mode from @vibe/core/next instead.\"\n });\n\n const componentRef = useRef(null);\n const inputRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n const mergedInputRef = useMergeRef(inputRef, searchInputRef);\n\n const [filterValue, setFilterValue] = useState(filterValueProp \|\| defaultFilterValue);\n\n if (filterValueProp !== undefined && filterValueProp !== filterValue) {\n setFilterValue(filterValueProp);\n }\n\n const onChangeCallback = useCallback(\n (value: string) => {\n setActiveOptionIndex(-1);\n if (onFilterChanged) {\n onFilterChanged(value);\n }\n setFilterValue(value);\n },\n [setFilterValue, onFilterChanged]\n );\n\n const onOptionHoverCB = useCallback(\n (event: React.MouseEvent, index: number, option: IComboboxOption) => {\n onOptionHover(event, index, option);\n },\n [onOptionHover]\n );\n\n const filteredOptions: IComboboxOption[] = useMemo(() => {\n if (disableFilter) {\n return options;\n }\n return filter(filterValue, options);\n }, [options, filterValue, filter, disableFilter]);\n\n const [activeOptionIndex, setActiveOptionIndex] = useState(-1);\n\n const isChildSelectable = useCallback(\n (index: number) => {\n return index !== undefined && filteredOptions[index] && !filteredOptions[index].disabled;\n },\n [filteredOptions]\n );\n\n const onAddNewCallback = useCallback(() => {\n onAddNew && onAddNew(filterValue);\n // clear filter after adding\n setFilterValue(\"\");\n }, [onAddNew, filterValue, setFilterValue]);\n\n const hasResults = filteredOptions.length > 0;\n const hasFilter = filterValue.length > 0;\n\n function getAddNewLabel() {\n if (isFunction(addNewLabel)) {\n return addNewLabel(filterValue);\n }\n return addNewLabel;\n }\n\n function renderNoResults() {\n if (noResultsRenderer) {\n return noResultsRenderer();\n }\n\n return (\n <div className={styles.comboboxNoResults}>\n <div className={styles.comboboxMessageWrapper}>\n <span className={styles.comboboxMessage}>{noResultsMessage}</span>\n </div>\n {onAddNew && !disabled && (\n <Button className={styles.addNewButton} size={size} kind=\"tertiary\" onClick={onAddNewCallback}>\n <span className={styles.buttonLabel}>{getAddNewLabel()}</span>\n </Button>\n )}\n </div>\n );\n }\n\n const [activeCategory, setActiveCategory] = useState<IComboboxCategory>();\n\n const onActiveCategoryChanged = useCallback(\n (categoryData: IComboboxItem) => {\n if (categoryData?.category?.label !== activeCategory?.label) {\n setActiveCategory(categoryData?.category);\n }\n },\n [activeCategory]\n );\n\n const { items, itemsMap, selectableItems } = useItemsData({\n categories,\n options: filteredOptions,\n filterValue,\n withCategoriesDivider,\n optionLineHeight\n });\n\n const overrideOnClick = useCallback(\n (_event: React.MouseEvent \| React.KeyboardEvent, itemIndex: number) => {\n onClick(selectableItems[itemIndex]);\n if (isChildSelectable(itemIndex)) {\n setActiveOptionIndex(itemIndex);\n }\n if (clearFilterOnSelection) {\n // clear filter after adding\n onChangeCallback(\"\");\n }\n },\n [onClick, selectableItems, isChildSelectable, clearFilterOnSelection, onChangeCallback]\n );\n\n const {\n visualFocusItemIndex,\n visualFocusItemId,\n onOptionClick: overrideOnOptionClick\n } = useKeyboardNavigation({\n getOptionId,\n defaultVisualFocusFirstIndex,\n onClick: overrideOnClick,\n isChildSelectable,\n options: selectableItems,\n inputRef: mergedInputRef\n });\n\n return (\n <Text\n type=\"text2\"\n ref={mergedRef}\n className={cx(styles.combobox, className, getStyle(styles, camelCase(\"size-\" + size)), {\n [styles.empty]: !hasResults,\n [styles.stickyCategory]: stickyCategories\n })}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.COMBOBOX, id)}\n ellipsis={false}\n data-vibe={ComponentVibeId.COMBOBOX}\n >\n <div className={styles.comboboxList} style={{ maxHeight: optionsListHeight }}>\n <Search\n ref={mergedInputRef}\n value={filterValue}\n className={cx(styles.comboboxSearchWrapper, searchWrapperClassName)}\n inputAriaLabel={searchInputAriaLabel}\n currentAriaResultId={visualFocusItemId}\n id=\"combobox-search\"\n placeholder={placeholder}\n size={size}\n disabled={disabled}\n onChange={onChangeCallback}\n autoFocus={autoFocus}\n loading={loading}\n searchIconName={searchIcon}\n ariaExpanded={hasFilter \|\| hasResults}\n ariaHasPopup=\"listbox\"\n searchResultsContainerId={id ? `${id}-listbox` : COMBOBOX_LISTBOX_ID}\n debounceRate={debounceRate}\n renderAction={RenderAction}\n hideRenderActionOnInput={hideRenderActionOnInput}\n />\n {stickyCategories && (\n <StickyCategoryHeader\n label={activeCategory?.label}\n color={activeCategory?.color}\n className={stickyCategoryClassName}\n />\n )}\n {hasResults && (\n <ComboboxItems\n stickyCategories={stickyCategories}\n categories={categories}\n options={items}\n itemsMap={itemsMap}\n optionClassName={optionClassName}\n optionRenderer={optionRenderer}\n activeItemIndex={activeOptionIndex}\n onActiveCategoryChanged={onActiveCategoryChanged}\n onOptionClick={overrideOnOptionClick}\n onOptionEnter={onOptionHoverCB}\n onOptionLeave={onOptionLeave}\n optionLineHeight={optionLineHeight}\n shouldScrollToSelectedItem={shouldScrollToSelectedItem}\n renderOnlyVisibleOptions={renderOnlyVisibleOptions}\n maxOptionsWithoutScroll={maxOptionsWithoutScroll}\n visualFocusItemIndex={visualFocusItemIndex}\n id={id ? `${id}-listbox` : COMBOBOX_LISTBOX_ID}\n />\n )}\n </div>\n {hasFilter && !hasResults && !loading && renderNoResults()}\n </Text>\n );\n }\n);\n\n// Locate loading next to search icon\n// color it with --secondary-text-color\n// size it like the icon - we think it's 16px - make sure it's not fat\n\ninterface ComboboxStaticProps {\n sizes: typeof BASE_SIZES;\n iconTypes: typeof ComboboxOption.iconTypes;\n}\n\nexport default withStaticProps<ComboboxProps, ComboboxStaticProps>(Combobox, {\n sizes: BASE_SIZES,\n iconTypes: ComboboxOption.iconTypes\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","_ref$className","className","_ref$optionClassName","optionClassName","searchWrapperClassName","stickyCategoryClassName","searchIcon","_ref$id","id","_ref$placeholder","placeholder","_ref$size","size","defaultVisualFocusFirstIndex","_ref$optionLineHeight","optionLineHeight","optionsListHeight","_ref$autoFocus","autoFocus","_ref$disabled","disabled","_ref$options","options","categories","_ref$withCategoriesDi","withCategoriesDivider","_ref$noResultsMessage","noResultsMessage","onAddNew","_ref$addNewLabel","addNewLabel","_ref$onClick","onClick","_optionData","_ref$filter","filter","defaultFilter","_ref$disableFilter","disableFilter","filterValueProp","filterValue","onFilterChanged","_ref$loading","loading","_ref$onOptionHover","onOptionHover","NOOP","_ref$onOptionLeave","onOptionLeave","_ref$shouldScrollToSe","shouldScrollToSelectedItem","noResultsRenderer","_ref$stickyCategories","stickyCategories","_ref$optionRenderer","optionRenderer","_ref$renderOnlyVisibl","renderOnlyVisibleOptions","_ref$clearFilterOnSel","clearFilterOnSelection","maxOptionsWithoutScroll","_ref$defaultFilter","defaultFilterValue","_ref$searchInputAriaL","searchInputAriaLabel","dataTestId","debounceRate","searchInputRef","RenderAction","renderAction","hideRenderActionOnInput","useWarnDeprecated","component","message","componentRef","useRef","inputRef","mergedRef","useMergeRef","mergedInputRef","_useState","useState","_useState2","_slicedToArray","setFilterValue","undefined","onChangeCallback","useCallback","value","setActiveOptionIndex","onOptionHoverCB","event","index","option","filteredOptions","useMemo","_useState3","_useState4","activeOptionIndex","isChildSelectable","onAddNewCallback","hasResults","length","hasFilter","_useState5","_useState6","activeCategory","setActiveCategory","onActiveCategoryChanged","categoryData","category","_a","label","_useItemsData","useItemsData","items","itemsMap","selectableItems","overrideOnClick","_event","itemIndex","_useKeyboardNavigatio","useKeyboardNavigation","getOptionId","visualFocusItemIndex","visualFocusItemId","overrideOnOptionClick","onOptionClick","React","createElement","Text","type","cx","styles","combobox","getStyle","camelCase","_defineProperty","empty","stickyCategory","getTestId","ComponentDefaultTestId","COMBOBOX","ellipsis","ComponentVibeId","comboboxList","style","maxHeight","Search","comboboxSearchWrapper","inputAriaLabel","currentAriaResultId","onChange","searchIconName","ariaExpanded","ariaHasPopup","searchResultsContainerId","concat","COMBOBOX_LISTBOX_ID","StickyCategoryHeader","color","ComboboxItems","activeItemIndex","onOptionEnter","comboboxNoResults","comboboxMessageWrapper","comboboxMessage","Button","addNewButton","kind","buttonLabel","isFunction","sizes","BASE_SIZES","iconTypes","ComboboxOption"],"mappings":"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"}
1	+ {"version":3,"file":"Combobox.js","sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { useRef, useState, forwardRef, useMemo, useCallback } from \"react\";\nimport { isFunction } from \"es-toolkit\";\nimport { noop as NOOP, camelCase } from \"es-toolkit\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport Search from \"../Search/Search\";\nimport { Button } from \"@vibe/button\";\nimport { Text } from \"@vibe/typography\";\nimport { useWarnDeprecated } from \"../../utils/warn-deprecated\";\nimport { defaultFilter } from \"./ComboboxService\";\nimport { ComboboxItems } from \"./components/ComboboxItems/ComboboxItems\";\nimport { StickyCategoryHeader } from \"./components/StickyCategoryHeader/StickyCategoryHeader\";\nimport { useItemsData, useKeyboardNavigation } from \"./ComboboxHelpers/ComboboxHelpers\";\nimport { getOptionId } from \"./helpers\";\nimport { type ElementContent, type VibeComponentProps } from \"../../types\";\nimport {\n type IComboboxCategoryMap,\n type IComboboxItem,\n type IComboboxOption,\n COMBOBOX_LISTBOX_ID,\n type IComboboxCategory\n} from \"./components/ComboboxConstants\";\nimport styles from \"./Combobox.module.scss\";\nimport { type ComboboxSizes } from \"./Combobox.types\";\nimport type { IconButton } from \"@vibe/icon-button\";\nimport type MenuButton from \"../MenuButton/MenuButton\";\nimport { ComponentVibeId } from \"../../tests/constants\";\nimport { type SubIcon } from \"@vibe/icon\";\n\nexport interface ComboboxProps extends VibeComponentProps {\n /*\n Class name applied to each option item.\n /\n optionClassName?: string;\n /\n Class name applied to the search wrapper.\n /\n searchWrapperClassName?: string;\n /\n Class name applied to the sticky category header.\n /\n stickyCategoryClassName?: string;\n /\n Placeholder text displayed in the search input.\n /\n placeholder?: string;\n /\n Message displayed when no results are found.\n /\n noResultsMessage?: string;\n /\n If true, the combobox is disabled.\n /\n disabled?: boolean;\n /\n The list of available options.\n /\n options?: IComboboxOption[];\n /\n The list of available categories.\n /\n categories?: IComboboxCategoryMap;\n /\n If true, displays a divider between category sections.\n /\n withCategoriesDivider?: boolean;\n /\n The size of the combobox.\n /\n size?: ComboboxSizes;\n /\n The height of each option item.\n /\n optionLineHeight?: number;\n /\n The height of the options list.\n /\n optionsListHeight?: number;\n /\n If true, the search input is focused when the component mounts.\n /\n autoFocus?: boolean;\n /\n Callback fired when the \"Add new\" button is clicked.\n /\n onAddNew?: (value: string) => void;\n /\n Label displayed for the \"Add new\" button.\n /\n addNewLabel?: ((label: string) => ElementContent) \| string;\n /\n Custom filter function for searching options.\n /\n filter?: (filterValue: string, options: IComboboxOption[]) => IComboboxOption[];\n /\n The default search input\n /\n defaultFilter?: string;\n /\n If true, disables filtering.\n /\n disableFilter?: boolean;\n /\n Controlled search input value.\n /\n filterValue?: string;\n /\n Callback fired when the search input value changes.\n /\n onFilterChanged?: (value: string) => void;\n /\n If true, displays a loading state.\n /\n loading?: boolean;\n /\n Callback fired when an option is hovered.\n /\n onOptionHover?: (event: React.MouseEvent, index: number, option: IComboboxOption) => void;\n /\n Callback fired when the mouse leaves an option.\n /\n onOptionLeave?: () => void;\n /\n If true, automatically scrolls to the selected option.\n /\n shouldScrollToSelectedItem?: boolean;\n /\n Custom renderer for when no results are found.\n /\n noResultsRenderer?: () => JSX.Element;\n /\n If true, keeps categories visible when scrolling.\n /\n stickyCategories?: boolean;\n /\n If true, visually focuses the first item by default.\n /\n defaultVisualFocusFirstIndex?: boolean;\n /\n If true, clears the search input when an option is selected.\n /\n clearFilterOnSelection?: boolean;\n /\n Custom renderer for options.\n /\n optionRenderer?: (option: IComboboxOption) => JSX.Element;\n /\n Maximum number of options displayed before scrolling.\n /\n maxOptionsWithoutScroll?: number;\n /\n If true, renders only visible options for performance optimization.\n /\n renderOnlyVisibleOptions?: boolean;\n /\n Callback fired when an option is clicked.\n /\n onClick?: (optionData: IComboboxOption) => void;\n /\n Custom search icon.\n /\n searchIcon?: SubIcon;\n /\n ARIA label for the search input.\n /\n searchInputAriaLabel?: string;\n /\n The debounce rate for filtering.\n /\n debounceRate?: number;\n /\n Ref for the search input element.\n /\n searchInputRef?: React.RefObject<HTMLInputElement>;\n /\n Additional action button inside the search input.\n /\n renderAction?: React.ReactElement<typeof IconButton \| typeof MenuButton>;\n /\n If true, hides the additional action when the user types in the search input.\n */\n hideRenderActionOnInput?: boolean;\n}\n\nconst Combobox = forwardRef(\n (\n {\n className = \"\",\n optionClassName = \"\",\n searchWrapperClassName,\n stickyCategoryClassName,\n searchIcon,\n id = \"\",\n placeholder = \"\",\n size = \"medium\",\n defaultVisualFocusFirstIndex,\n optionLineHeight = 32,\n optionsListHeight,\n autoFocus = false,\n disabled = false,\n options = [],\n categories,\n withCategoriesDivider = false,\n noResultsMessage = \"No results found\",\n onAddNew,\n addNewLabel = \"Add new\",\n onClick = (_optionData: IComboboxOption) => {},\n filter = defaultFilter,\n disableFilter = false,\n filterValue: filterValueProp,\n onFilterChanged,\n loading = false,\n onOptionHover = NOOP,\n onOptionLeave = NOOP,\n shouldScrollToSelectedItem = true,\n noResultsRenderer,\n stickyCategories = false,\n optionRenderer = null,\n renderOnlyVisibleOptions = false,\n clearFilterOnSelection = false,\n maxOptionsWithoutScroll,\n defaultFilter: defaultFilterValue = \"\",\n searchInputAriaLabel = \"Search for content\",\n \"data-testid\": dataTestId,\n debounceRate,\n searchInputRef,\n renderAction: RenderAction,\n hideRenderActionOnInput\n }: ComboboxProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n useWarnDeprecated({\n component: \"Combobox\",\n message:\n \"This component is deprecated and will be removed in the next major version. Please use Dropdown box mode from @vibe/core instead.\"\n });\n\n const componentRef = useRef(null);\n const inputRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n const mergedInputRef = useMergeRef(inputRef, searchInputRef);\n\n const [filterValue, setFilterValue] = useState(filterValueProp \|\| defaultFilterValue);\n\n if (filterValueProp !== undefined && filterValueProp !== filterValue) {\n setFilterValue(filterValueProp);\n }\n\n const onChangeCallback = useCallback(\n (value: string) => {\n setActiveOptionIndex(-1);\n if (onFilterChanged) {\n onFilterChanged(value);\n }\n setFilterValue(value);\n },\n [setFilterValue, onFilterChanged]\n );\n\n const onOptionHoverCB = useCallback(\n (event: React.MouseEvent, index: number, option: IComboboxOption) => {\n onOptionHover(event, index, option);\n },\n [onOptionHover]\n );\n\n const filteredOptions: IComboboxOption[] = useMemo(() => {\n if (disableFilter) {\n return options;\n }\n return filter(filterValue, options);\n }, [options, filterValue, filter, disableFilter]);\n\n const [activeOptionIndex, setActiveOptionIndex] = useState(-1);\n\n const isChildSelectable = useCallback(\n (index: number) => {\n return index !== undefined && filteredOptions[index] && !filteredOptions[index].disabled;\n },\n [filteredOptions]\n );\n\n const onAddNewCallback = useCallback(() => {\n onAddNew && onAddNew(filterValue);\n // clear filter after adding\n setFilterValue(\"\");\n }, [onAddNew, filterValue, setFilterValue]);\n\n const hasResults = filteredOptions.length > 0;\n const hasFilter = filterValue.length > 0;\n\n function getAddNewLabel() {\n if (isFunction(addNewLabel)) {\n return addNewLabel(filterValue);\n }\n return addNewLabel;\n }\n\n function renderNoResults() {\n if (noResultsRenderer) {\n return noResultsRenderer();\n }\n\n return (\n <div className={styles.comboboxNoResults}>\n <div className={styles.comboboxMessageWrapper}>\n <span className={styles.comboboxMessage}>{noResultsMessage}</span>\n </div>\n {onAddNew && !disabled && (\n <Button className={styles.addNewButton} size={size} kind=\"tertiary\" onClick={onAddNewCallback}>\n <span className={styles.buttonLabel}>{getAddNewLabel()}</span>\n </Button>\n )}\n </div>\n );\n }\n\n const [activeCategory, setActiveCategory] = useState<IComboboxCategory>();\n\n const onActiveCategoryChanged = useCallback(\n (categoryData: IComboboxItem) => {\n if (categoryData?.category?.label !== activeCategory?.label) {\n setActiveCategory(categoryData?.category);\n }\n },\n [activeCategory]\n );\n\n const { items, itemsMap, selectableItems } = useItemsData({\n categories,\n options: filteredOptions,\n filterValue,\n withCategoriesDivider,\n optionLineHeight\n });\n\n const overrideOnClick = useCallback(\n (_event: React.MouseEvent \| React.KeyboardEvent, itemIndex: number) => {\n onClick(selectableItems[itemIndex]);\n if (isChildSelectable(itemIndex)) {\n setActiveOptionIndex(itemIndex);\n }\n if (clearFilterOnSelection) {\n // clear filter after adding\n onChangeCallback(\"\");\n }\n },\n [onClick, selectableItems, isChildSelectable, clearFilterOnSelection, onChangeCallback]\n );\n\n const {\n visualFocusItemIndex,\n visualFocusItemId,\n onOptionClick: overrideOnOptionClick\n } = useKeyboardNavigation({\n getOptionId,\n defaultVisualFocusFirstIndex,\n onClick: overrideOnClick,\n isChildSelectable,\n options: selectableItems,\n inputRef: mergedInputRef\n });\n\n return (\n <Text\n type=\"text2\"\n ref={mergedRef}\n className={cx(styles.combobox, className, getStyle(styles, camelCase(\"size-\" + size)), {\n [styles.empty]: !hasResults,\n [styles.stickyCategory]: stickyCategories\n })}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.COMBOBOX, id)}\n ellipsis={false}\n data-vibe={ComponentVibeId.COMBOBOX}\n >\n <div className={styles.comboboxList} style={{ maxHeight: optionsListHeight }}>\n <Search\n ref={mergedInputRef}\n value={filterValue}\n className={cx(styles.comboboxSearchWrapper, searchWrapperClassName)}\n inputAriaLabel={searchInputAriaLabel}\n currentAriaResultId={visualFocusItemId}\n id=\"combobox-search\"\n placeholder={placeholder}\n size={size}\n disabled={disabled}\n onChange={onChangeCallback}\n autoFocus={autoFocus}\n loading={loading}\n searchIconName={searchIcon}\n aria-expanded={hasFilter \|\| hasResults}\n aria-haspopup=\"listbox\"\n searchResultsContainerId={id ? `${id}-listbox` : COMBOBOX_LISTBOX_ID}\n debounceRate={debounceRate}\n renderAction={RenderAction}\n hideRenderActionOnInput={hideRenderActionOnInput}\n />\n {stickyCategories && (\n <StickyCategoryHeader\n label={activeCategory?.label}\n color={activeCategory?.color}\n className={stickyCategoryClassName}\n />\n )}\n {hasResults && (\n <ComboboxItems\n stickyCategories={stickyCategories}\n categories={categories}\n options={items}\n itemsMap={itemsMap}\n optionClassName={optionClassName}\n optionRenderer={optionRenderer}\n activeItemIndex={activeOptionIndex}\n onActiveCategoryChanged={onActiveCategoryChanged}\n onOptionClick={overrideOnOptionClick}\n onOptionEnter={onOptionHoverCB}\n onOptionLeave={onOptionLeave}\n optionLineHeight={optionLineHeight}\n shouldScrollToSelectedItem={shouldScrollToSelectedItem}\n renderOnlyVisibleOptions={renderOnlyVisibleOptions}\n maxOptionsWithoutScroll={maxOptionsWithoutScroll}\n visualFocusItemIndex={visualFocusItemIndex}\n id={id ? `${id}-listbox` : COMBOBOX_LISTBOX_ID}\n />\n )}\n </div>\n {hasFilter && !hasResults && !loading && renderNoResults()}\n </Text>\n );\n }\n);\n\n// Locate loading next to search icon\n// color it with --secondary-text-color\n// size it like the icon - we think it's 16px - make sure it's not fat\n\nexport default Combobox;\n"],"names":["Combobox","forwardRef","_ref","ref","_ref$className","className","_ref$optionClassName","optionClassName","searchWrapperClassName","stickyCategoryClassName","searchIcon","_ref$id","id","_ref$placeholder","placeholder","_ref$size","size","defaultVisualFocusFirstIndex","_ref$optionLineHeight","optionLineHeight","optionsListHeight","_ref$autoFocus","autoFocus","_ref$disabled","disabled","_ref$options","options","categories","_ref$withCategoriesDi","withCategoriesDivider","_ref$noResultsMessage","noResultsMessage","onAddNew","_ref$addNewLabel","addNewLabel","_ref$onClick","onClick","_optionData","_ref$filter","filter","defaultFilter","_ref$disableFilter","disableFilter","filterValueProp","filterValue","onFilterChanged","_ref$loading","loading","_ref$onOptionHover","onOptionHover","NOOP","_ref$onOptionLeave","onOptionLeave","_ref$shouldScrollToSe","shouldScrollToSelectedItem","noResultsRenderer","_ref$stickyCategories","stickyCategories","_ref$optionRenderer","optionRenderer","_ref$renderOnlyVisibl","renderOnlyVisibleOptions","_ref$clearFilterOnSel","clearFilterOnSelection","maxOptionsWithoutScroll","_ref$defaultFilter","defaultFilterValue","_ref$searchInputAriaL","searchInputAriaLabel","dataTestId","debounceRate","searchInputRef","RenderAction","renderAction","hideRenderActionOnInput","useWarnDeprecated","component","message","componentRef","useRef","inputRef","mergedRef","useMergeRef","mergedInputRef","_useState","useState","_useState2","_slicedToArray","setFilterValue","undefined","onChangeCallback","useCallback","value","setActiveOptionIndex","onOptionHoverCB","event","index","option","filteredOptions","useMemo","_useState3","_useState4","activeOptionIndex","isChildSelectable","onAddNewCallback","hasResults","length","hasFilter","_useState5","_useState6","activeCategory","setActiveCategory","onActiveCategoryChanged","categoryData","category","_a","label","_useItemsData","useItemsData","items","itemsMap","selectableItems","overrideOnClick","_event","itemIndex","_useKeyboardNavigatio","useKeyboardNavigation","getOptionId","visualFocusItemIndex","visualFocusItemId","overrideOnOptionClick","onOptionClick","React","createElement","Text","type","cx","styles","combobox","getStyle","camelCase","_defineProperty","empty","stickyCategory","getTestId","ComponentDefaultTestId","COMBOBOX","ellipsis","ComponentVibeId","comboboxList","style","maxHeight","Search","comboboxSearchWrapper","inputAriaLabel","currentAriaResultId","onChange","searchIconName","searchResultsContainerId","concat","COMBOBOX_LISTBOX_ID","StickyCategoryHeader","color","ComboboxItems","activeItemIndex","onOptionEnter","comboboxNoResults","comboboxMessageWrapper","comboboxMessage","Button","addNewButton","kind","buttonLabel","isFunction"],"mappings":"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"}

package/dist/src/components/Combobox/Combobox.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={combobox:"combobox_6304dd0d4e",stickyCategory:"stickyCategory_d01f6cbe08",comboboxCategory:"comboboxCategory_5f3e1e81c5",sizeSmall:"sizeSmall_99b02310c2",sizeMedium:"sizeMedium_46a507ca59",sizeLarge:"sizeLarge_99b02310c2",empty:"empty_f272bb7e5e",comboboxSearchWrapper:"comboboxSearchWrapper_94815dd8c1",comboboxNoResults:"comboboxNoResults_e31c70f940",comboboxMessageWrapper:"comboboxMessageWrapper_c435b01d09",comboboxMessage:"comboboxMessage_907d498004",addNewButton:"addNewButton_ad2aeaac07",buttonLabel:"buttonLabel_907d498004",comboboxList:"comboboxList_ca6e73a4f2"};!function(e){const o="s_id-140391bb7df9_3_86_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+o))return;const t=document.createElement("style");t.id=o,n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.combobox_6304dd0d4e {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  margin-bottom: var(--spacing-small);\n}\n.combobox_6304dd0d4e.stickyCategory_d01f6cbe08 .comboboxCategory_5f3e1e81c5 {\n  z-index: 10;\n  background-color: var(--secondary-background-color);\n}\n/* Relative to Search height */\n.combobox_6304dd0d4e.stickyCategory_d01f6cbe08.sizeSmall_99b02310c2 .comboboxCategory_5f3e1e81c5 {\n  top: 32px;\n}\n.combobox_6304dd0d4e.stickyCategory_d01f6cbe08.sizeMedium_46a507ca59 .comboboxCategory_5f3e1e81c5 {\n  top: 40px;\n}\n.combobox_6304dd0d4e.stickyCategory_d01f6cbe08.sizeLarge_99b02310c2 .comboboxCategory_5f3e1e81c5 {\n  top: 48px;\n}\n.combobox_6304dd0d4e.empty_f272bb7e5e {\n  max-height: 200px;\n  margin-bottom: 0;\n}\n.comboboxSearchWrapper_94815dd8c1 {\n  position: sticky;\n  top: 0;\n  z-index: 12;\n}\n.comboboxNoResults_e31c70f940 {\n  margin-top: var(--spacing-small);\n  flex: 1 1 auto;\n  height: calc(100% - 20px);\n  overflow: hidden;\n  position: relative;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: column;\n}\n.comboboxNoResults_e31c70f940 .comboboxMessageWrapper_c435b01d09 {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.comboboxNoResults_e31c70f940 .comboboxMessageWrapper_c435b01d09 .comboboxMessage_907d498004 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.comboboxNoResults_e31c70f940 .addNewButton_ad2aeaac07 {\n  flex: 0 0 auto;\n  width: 100% !important;\n  margin-bottom: 8px;\n}\n.comboboxNoResults_e31c70f940 .addNewButton_ad2aeaac07 .buttonLabel_907d498004 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.comboboxList_ca6e73a4f2 {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  padding: 0 4px;\n  overflow: hidden;\n}");export{e as default};
+var o={combobox:"combobox_a0ea19b94d",stickyCategory:"stickyCategory_be310aaaba",comboboxCategory:"comboboxCategory_6d06909cb1",sizeSmall:"sizeSmall_7551ba4be6",sizeMedium:"sizeMedium_cf2e5780f1",sizeLarge:"sizeLarge_7551ba4be6",empty:"empty_7d7a846f47",comboboxSearchWrapper:"comboboxSearchWrapper_9f5475e60e",comboboxNoResults:"comboboxNoResults_24ff70ca6f",comboboxMessageWrapper:"comboboxMessageWrapper_2a57e5535d",comboboxMessage:"comboboxMessage_20f55caf2a",addNewButton:"addNewButton_1404184849",buttonLabel:"buttonLabel_20f55caf2a",comboboxList:"comboboxList_f6b8e86e41"};!function(o){const e="s_id-5bf292a5a8b0_4_0_0-alpha_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+e))return;const n=document.createElement("style");n.id=e,a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=o)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.combobox_a0ea19b94d {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  margin-bottom: var(--space-8);\n}\n.combobox_a0ea19b94d.stickyCategory_be310aaaba .comboboxCategory_6d06909cb1 {\n  z-index: 10;\n  background-color: var(--secondary-background-color);\n}\n/* Relative to Search height */\n.combobox_a0ea19b94d.stickyCategory_be310aaaba.sizeSmall_7551ba4be6 .comboboxCategory_6d06909cb1 {\n  top: 32px;\n}\n.combobox_a0ea19b94d.stickyCategory_be310aaaba.sizeMedium_cf2e5780f1 .comboboxCategory_6d06909cb1 {\n  top: 40px;\n}\n.combobox_a0ea19b94d.stickyCategory_be310aaaba.sizeLarge_7551ba4be6 .comboboxCategory_6d06909cb1 {\n  top: 48px;\n}\n.combobox_a0ea19b94d.empty_7d7a846f47 {\n  max-height: 200px;\n  margin-bottom: 0;\n}\n.comboboxSearchWrapper_9f5475e60e {\n  position: sticky;\n  top: 0;\n  z-index: 12;\n}\n.comboboxNoResults_24ff70ca6f {\n  margin-top: var(--space-8);\n  flex: 1 1 auto;\n  height: calc(100% - 20px);\n  overflow: hidden;\n  position: relative;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: column;\n}\n.comboboxNoResults_24ff70ca6f .comboboxMessageWrapper_2a57e5535d {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.comboboxNoResults_24ff70ca6f .comboboxMessageWrapper_2a57e5535d .comboboxMessage_20f55caf2a {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.comboboxNoResults_24ff70ca6f .addNewButton_1404184849 {\n  flex: 0 0 auto;\n  width: 100% !important;\n  margin-bottom: 8px;\n}\n.comboboxNoResults_24ff70ca6f .addNewButton_1404184849 .buttonLabel_20f55caf2a {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.comboboxList_f6b8e86e41 {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  padding: 0 4px;\n  overflow: hidden;\n}");export{o as default};
 //# sourceMappingURL=Combobox.module.scss.js.map

package/dist/src/components/Combobox/ComboboxHelpers/ComboboxHelpers.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineProperty as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import{__rest as t}from"../../../../_virtual/_tslib.js";import o,{useMemo as i}from"react";import n from"classnames";import r from"../components/ComboboxOption/ComboboxOption.js";import s from"../components/ComboboxCategory/ComboboxCategory.js";import a from"../../Divider/Divider.js";import{COMBOBOX_DIVIDER_ITEM as c,COMBOBOX_CATEGORY_ITEM as l,COMBOBOX_OPTION_ITEM as m}from"../components/ComboboxConstants.js";import d from"../../../hooks/useActiveDescendantListFocus/index.js";import{getOptionsByCategories as u}from"../ComboboxService.js";import p from"../components/ComboboxItems/ComboboxItems.module.scss.js";import g from"./ComboboxHelpers.module.scss.js";var h=17,v=32;function f(t){var o=t.categories,r=t.options,s=t.filterValue,a=t.withCategoriesDivider,c=t.optionLineHeight;return i((function(){var t=[],i=[],l=new Map;if(o){var m=u(r,o,s),d=0;Object.keys(m).forEach((function(r,s){var u=a&&0!==s;u&&t.push(I({categoryId:r}));var g=m[r].length>0,h=0===s,v=b({categoryId:r,categoryData:o[r],withDivider:u,className:n(e(e(e({},p.categoryWithOptions,g),p.categoryWithoutOptions,!g),p.firstCategory,h))});t.push(v),l.set(r,v),m[r].forEach((function(e){var o=C({height:c,option:e,index:d,categoryId:v.id});l.set(o.id,o),t.push(o),i.push(e),d++}))}))}else i=r,t=r.map((function(e,t){return C({height:c,option:e,index:t})}));return{items:t,itemsMap:l,selectableItems:i}}),[o,r,s,a,c])}function y(e){var t=e.defaultVisualFocusFirstIndex,o=e.inputRef,n=e.onClick,r=e.isChildSelectable,s=e.options,a=e.getOptionId,c=i((function(){return s.map((function(e,t){return a(null==e?void 0:e.id,t)}))}),[a,s]),l=d({defaultVisualFocusFirstIndex:t,focusedElementRef:o,focusedElementRole:d.roles.COMBOBOX,itemsIds:c,onItemClick:n,isItemSelectable:r,isIgnoreSpaceAsItemSelection:!0});return{visualFocusItemIndex:l.visualFocusItemIndex,visualFocusItemId:l.visualFocusItemId,onOptionClick:l.onItemClickCallback}}function I(e){return{type:c,height:h,id:"".concat(e.categoryId,"-divider")}}function b(e){return{height:v,type:l,category:e.categoryData,id:e.categoryId,withDivider:e.withDivider,className:e.className}}function C(e){var t=e.option,o=e.index;return{type:m,height:e.height,belongToCategory:!0,index:o,option:t,id:t.id||""+o,optionRenderer:e.optionRenderer,isActive:e.isActive,optionLineHeight:e.optionLineHeight,shouldScrollToSelectedItem:e.shouldScrollToSelectedItem,categoryId:e.categoryId}}function x(e){var i,r,s=e.item,a=e.style,d=e.optionEvents,u=e.optionRenderData,p=e.isVirtualized,h=e.stickyCategories,v=s.type,f=t(s,["type"]);switch(v){case c:r=O({id:f.id,height:f.height});break;case l:r=k({id:f.id,category:f.category,className:f.className}),h&&!p&&(i=g.sticky);break;case m:r=j(Object.assign(Object.assign(Object.assign({},f),d),u))}return o.createElement("div",{key:f.id,className:n(g.comboboxItemContainer,i),style:a},r)}function O(e){return o.createElement("div",{className:g.dividerContainer,style:{height:e.height}},o.createElement(a,{className:g.divider,key:e.id}))}function k(e){return o.createElement(s,{key:e.id,category:e.category,className:e.className})}function j(e){var t=e.index,i=e.onOptionEnter;return o.createElement(r,{className:e.className,index:t,key:e.id,option:e.option,optionRenderer:e.optionRenderer,scrollRef:e.scrollRef,isActive:e.activeItemIndex===t,visualFocus:t===e.visualFocusItemIndex,onOptionClick:e.onOptionClick,onOptionHover:i,onOptionLeave:e.onOptionLeave,onOptionEnter:i,optionLineHeight:e.optionLineHeight,shouldScrollWhenActive:e.shouldScrollToSelectedItem})}export{k as categoryItemRenderer,x as comboboxItemRenderer,b as createCategoryItemObject,I as createDividerItemObject,C as createOptionItemObject,O as dividerItemRenderer,j as optionItemRenderer,f as useItemsData,y as useKeyboardNavigation};
+import{defineProperty as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import{__rest as t}from"../../../../_virtual/_tslib.js";import o,{useMemo as i}from"react";import n from"classnames";import r from"../components/ComboboxOption/ComboboxOption.js";import s from"../components/ComboboxCategory/ComboboxCategory.js";import a from"../../Divider/Divider.js";import{COMBOBOX_DIVIDER_ITEM as c,COMBOBOX_CATEGORY_ITEM as l,COMBOBOX_OPTION_ITEM as m}from"../components/ComboboxConstants.js";import d from"../../../hooks/useActiveDescendantListFocus/index.js";import{getOptionsByCategories as u}from"../ComboboxService.js";import p from"../components/ComboboxItems/ComboboxItems.module.scss.js";import g from"./ComboboxHelpers.module.scss.js";var h=17,v=32;function f(t){var o=t.categories,r=t.options,s=t.filterValue,a=t.withCategoriesDivider,c=t.optionLineHeight;return i((function(){var t=[],i=[],l=new Map;if(o){var m=u(r,o,s),d=0;Object.keys(m).forEach((function(r,s){var u=a&&0!==s;u&&t.push(I({categoryId:r}));var g=m[r].length>0,h=0===s,v=b({categoryId:r,categoryData:o[r],withDivider:u,className:n(e(e(e({},p.categoryWithOptions,g),p.categoryWithoutOptions,!g),p.firstCategory,h))});t.push(v),l.set(r,v),m[r].forEach((function(e){var o=C({height:c,option:e,index:d,categoryId:v.id});l.set(o.id,o),t.push(o),i.push(e),d++}))}))}else i=r,t=r.map((function(e,t){return C({height:c,option:e,index:t})}));return{items:t,itemsMap:l,selectableItems:i}}),[o,r,s,a,c])}function y(e){var t=e.defaultVisualFocusFirstIndex,o=e.inputRef,n=e.onClick,r=e.isChildSelectable,s=e.options,a=e.getOptionId,c=i((function(){return s.map((function(e,t){return a(null==e?void 0:e.id,t)}))}),[a,s]),l=d({defaultVisualFocusFirstIndex:t,focusedElementRef:o,focusedElementRole:d.roles.COMBOBOX,itemsIds:c,onItemClick:n,isItemSelectable:r,isIgnoreSpaceAsItemSelection:!0});return{visualFocusItemIndex:l.visualFocusItemIndex,visualFocusItemId:l.visualFocusItemId,onOptionClick:n}}function I(e){return{type:c,height:h,id:"".concat(e.categoryId,"-divider")}}function b(e){return{height:v,type:l,category:e.categoryData,id:e.categoryId,withDivider:e.withDivider,className:e.className}}function C(e){var t=e.option,o=e.index;return{type:m,height:e.height,belongToCategory:!0,index:o,option:t,id:t.id||""+o,optionRenderer:e.optionRenderer,isActive:e.isActive,optionLineHeight:e.optionLineHeight,shouldScrollToSelectedItem:e.shouldScrollToSelectedItem,categoryId:e.categoryId}}function x(e){var i,r,s=e.item,a=e.style,d=e.optionEvents,u=e.optionRenderData,p=e.isVirtualized,h=e.stickyCategories,v=s.type,f=t(s,["type"]);switch(v){case c:r=O({id:f.id,height:f.height});break;case l:r=k({id:f.id,category:f.category,className:f.className}),h&&!p&&(i=g.sticky);break;case m:r=j(Object.assign(Object.assign(Object.assign({},f),d),u))}return o.createElement("div",{key:f.id,className:n(g.comboboxItemContainer,i),style:a},r)}function O(e){return o.createElement("div",{className:g.dividerContainer,style:{height:e.height}},o.createElement(a,{className:g.divider,key:e.id}))}function k(e){return o.createElement(s,{key:e.id,category:e.category,className:e.className})}function j(e){var t=e.index,i=e.onOptionEnter;return o.createElement(r,{className:e.className,index:t,key:e.id,option:e.option,optionRenderer:e.optionRenderer,scrollRef:e.scrollRef,isActive:e.activeItemIndex===t,visualFocus:t===e.visualFocusItemIndex,onOptionClick:e.onOptionClick,onOptionHover:i,onOptionLeave:e.onOptionLeave,onOptionEnter:i,optionLineHeight:e.optionLineHeight,shouldScrollWhenActive:e.shouldScrollToSelectedItem})}export{k as categoryItemRenderer,x as comboboxItemRenderer,b as createCategoryItemObject,I as createDividerItemObject,C as createOptionItemObject,O as dividerItemRenderer,j as optionItemRenderer,f as useItemsData,y as useKeyboardNavigation};
 //# sourceMappingURL=ComboboxHelpers.js.map

package/dist/src/components/Combobox/ComboboxHelpers/ComboboxHelpers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboboxHelpers.js","sources":["../../../../../src/components/Combobox/ComboboxHelpers/ComboboxHelpers.tsx"],"sourcesContent":["import React, { type CSSProperties, type MutableRefObject, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport ComboboxOption from \"../components/ComboboxOption/ComboboxOption\";\nimport ComboboxCategory from \"../components/ComboboxCategory/ComboboxCategory\";\nimport Divider from \"../../Divider/Divider\";\nimport {\n COMBOBOX_DIVIDER_ITEM,\n COMBOBOX_CATEGORY_ITEM,\n COMBOBOX_OPTION_ITEM,\n type IComboboxCategory,\n type IComboboxOption,\n type IComboboxCategoryMap,\n type IComboboxItem,\n type IOptionItemRendererArgs,\n type IComboboxOptionEvents\n} from \"../components/ComboboxConstants\";\nimport useActiveDescendantListFocus from \"../../../hooks/useActiveDescendantListFocus\";\nimport { getOptionsByCategories } from \"../ComboboxService\";\nimport comboboxItemsStyles from \"../components/ComboboxItems/ComboboxItems.module.scss\";\nimport styles from \"./ComboboxHelpers.module.scss\";\n\nconst DIVIDER_HEIGHT = 17;\nconst CATEGORY_HEIGHT = 32;\n\nexport function useItemsData({\n categories,\n options,\n filterValue,\n withCategoriesDivider,\n optionLineHeight\n}: {\n categories: IComboboxCategoryMap;\n options: IComboboxOption[];\n filterValue: string;\n withCategoriesDivider: boolean;\n optionLineHeight: number;\n}) {\n return useMemo(() => {\n let items: IComboboxItem[] = [];\n let selectableItems: IComboboxOption[] = [];\n const itemsMap = new Map();\n\n if (categories) {\n const optionsByCategories = getOptionsByCategories(options, categories, filterValue);\n let optionIndex = 0;\n Object.keys(optionsByCategories).forEach((categoryId, categoryIndex) => {\n const withDivider = withCategoriesDivider && categoryIndex !== 0;\n if (withDivider) {\n items.push(createDividerItemObject({ categoryId }));\n }\n\n const isCategoryWithOptions = optionsByCategories[categoryId].length > 0;\n const isFirstCategory = categoryIndex === 0;\n\n const categoryObject = createCategoryItemObject({\n categoryId,\n categoryData: categories[categoryId],\n withDivider,\n className: cx({\n [comboboxItemsStyles.categoryWithOptions]: isCategoryWithOptions,\n [comboboxItemsStyles.categoryWithoutOptions]: !isCategoryWithOptions,\n [comboboxItemsStyles.firstCategory]: isFirstCategory\n })\n });\n\n // save category object in both items array and categories map\n items.push(categoryObject);\n itemsMap.set(categoryId, categoryObject);\n\n optionsByCategories[categoryId].forEach((option: IComboboxOption) => {\n const itemObject = createOptionItemObject({\n height: optionLineHeight,\n option,\n index: optionIndex,\n categoryId: categoryObject.id\n });\n\n itemsMap.set(itemObject.id, itemObject);\n items.push(itemObject);\n selectableItems.push(option);\n optionIndex++;\n });\n });\n } else {\n selectableItems = options;\n items = options.map((option, index) => {\n return createOptionItemObject({\n height: optionLineHeight,\n option,\n index\n });\n });\n }\n return { items, itemsMap, selectableItems };\n }, [categories, options, filterValue, withCategoriesDivider, optionLineHeight]);\n}\n\nexport function useKeyboardNavigation({\n defaultVisualFocusFirstIndex,\n inputRef,\n onClick,\n isChildSelectable,\n options,\n getOptionId\n}: {\n defaultVisualFocusFirstIndex?: boolean;\n inputRef: MutableRefObject<HTMLElement>;\n onClick: (event: React.KeyboardEvent \| React.MouseEvent, index: number) => void;\n isChildSelectable: (index: number) => boolean;\n options: IComboboxOption[];\n getOptionId: (optionId: string, index: number) => string;\n}) {\n const filteredOptionsIds = useMemo(\n () => options.map((option: IComboboxOption, index: number) => getOptionId(option?.id, index)),\n [getOptionId, options]\n );\n\n const {\n visualFocusItemIndex,\n visualFocusItemId,\n onItemClickCallback: onOptionClick\n } = useActiveDescendantListFocus({\n defaultVisualFocusFirstIndex,\n focusedElementRef: inputRef,\n focusedElementRole: useActiveDescendantListFocus.roles.COMBOBOX,\n itemsIds: filteredOptionsIds,\n onItemClick: onClick,\n isItemSelectable: isChildSelectable,\n isIgnoreSpaceAsItemSelection: true\n });\n\n return { visualFocusItemIndex, visualFocusItemId, onOptionClick };\n}\nexport function createDividerItemObject({ categoryId }: { categoryId: string }): IComboboxItem {\n return { type: COMBOBOX_DIVIDER_ITEM, height: DIVIDER_HEIGHT, id: `${categoryId}-divider` };\n}\n\nexport function createCategoryItemObject({\n withDivider,\n categoryId,\n categoryData,\n className\n}: {\n withDivider: boolean;\n categoryId: string;\n categoryData: IComboboxCategory;\n className: string;\n}): IComboboxItem {\n return {\n height: CATEGORY_HEIGHT,\n type: COMBOBOX_CATEGORY_ITEM,\n category: categoryData,\n id: categoryId,\n withDivider,\n className\n };\n}\n\nexport function createOptionItemObject({\n option,\n height,\n index,\n optionRenderer,\n isActive,\n optionLineHeight,\n shouldScrollToSelectedItem,\n categoryId\n}: {\n option?: IComboboxOption;\n height?: number;\n index?: number;\n optionRenderer?: (option: IComboboxOption) => JSX.Element;\n isActive?: boolean;\n optionLineHeight?: number;\n shouldScrollToSelectedItem?: boolean;\n categoryId?: string;\n}): IComboboxItem {\n return {\n type: COMBOBOX_OPTION_ITEM,\n height,\n belongToCategory: true,\n index,\n option,\n id: option.id \|\| index.toString(),\n optionRenderer,\n isActive,\n optionLineHeight,\n shouldScrollToSelectedItem,\n categoryId\n };\n}\n\nexport function comboboxItemRenderer({\n item,\n style,\n optionEvents,\n optionRenderData,\n isVirtualized,\n stickyCategories\n}: {\n item: IComboboxItem;\n style: CSSProperties;\n optionEvents: IComboboxOptionEvents;\n optionRenderData: any;\n isVirtualized: boolean;\n stickyCategories?: boolean;\n}) {\n const { type, ...otherArgs } = item;\n let customClassNames;\n let innerElement;\n switch (type) {\n case COMBOBOX_DIVIDER_ITEM: {\n innerElement = dividerItemRenderer({ id: otherArgs.id, height: otherArgs.height });\n break;\n }\n case COMBOBOX_CATEGORY_ITEM: {\n innerElement = categoryItemRenderer({\n id: otherArgs.id,\n category: otherArgs.category,\n className: otherArgs.className\n });\n if (stickyCategories && !isVirtualized) {\n customClassNames = styles.sticky;\n }\n break;\n }\n case COMBOBOX_OPTION_ITEM: {\n innerElement = optionItemRenderer({\n ...otherArgs,\n ...optionEvents,\n ...optionRenderData\n });\n break;\n }\n }\n\n return (\n <div key={otherArgs.id} className={cx(styles.comboboxItemContainer, customClassNames)} style={style}>\n {innerElement}\n </div>\n );\n}\n\nexport function dividerItemRenderer({ id, height }: { id: string; height: number }) {\n return (\n <div className={styles.dividerContainer} style={{ height: height }}>\n <Divider className={styles.divider} key={id} />\n </div>\n );\n}\n\nexport function categoryItemRenderer({\n id,\n category,\n className\n}: {\n id: string;\n category: IComboboxCategory;\n className: string;\n}) {\n return <ComboboxCategory key={id} category={category} className={className} />;\n}\n\nexport function optionItemRenderer({\n id,\n index,\n option,\n className,\n onOptionClick,\n onOptionEnter,\n onOptionLeave,\n optionLineHeight,\n optionRenderer,\n scrollRef,\n shouldScrollToSelectedItem,\n activeItemIndex,\n visualFocusItemIndex\n}: IOptionItemRendererArgs) {\n return (\n <ComboboxOption\n className={className}\n index={index}\n key={id}\n option={option}\n optionRenderer={optionRenderer}\n scrollRef={scrollRef}\n isActive={activeItemIndex === index}\n visualFocus={index === visualFocusItemIndex}\n onOptionClick={onOptionClick}\n onOptionHover={onOptionEnter}\n onOptionLeave={onOptionLeave}\n onOptionEnter={onOptionEnter}\n optionLineHeight={optionLineHeight}\n shouldScrollWhenActive={shouldScrollToSelectedItem}\n />\n );\n}\n"],"names":["DIVIDER_HEIGHT","CATEGORY_HEIGHT","useItemsData","_ref","categories","options","filterValue","withCategoriesDivider","optionLineHeight","useMemo","items","selectableItems","itemsMap","Map","optionsByCategories","getOptionsByCategories","optionIndex","Object","keys","forEach","categoryId","categoryIndex","withDivider","push","createDividerItemObject","isCategoryWithOptions","length","isFirstCategory","categoryObject","createCategoryItemObject","categoryData","className","cx","_defineProperty","comboboxItemsStyles","categoryWithOptions","categoryWithoutOptions","firstCategory","set","option","itemObject","createOptionItemObject","height","index","id","map","useKeyboardNavigation","_ref2","defaultVisualFocusFirstIndex","inputRef","onClick","isChildSelectable","getOptionId","filteredOptionsIds","_useActiveDescendantL","useActiveDescendantListFocus","focusedElementRef","focusedElementRole","roles","COMBOBOX","itemsIds","onItemClick","isItemSelectable","isIgnoreSpaceAsItemSelection","visualFocusItemIndex","visualFocusItemId","onOptionClick","onItemClickCallback","_ref3","type","COMBOBOX_DIVIDER_ITEM","concat","_ref4","COMBOBOX_CATEGORY_ITEM","category","_ref5","COMBOBOX_OPTION_ITEM","belongToCategory","optionRenderer","isActive","shouldScrollToSelectedItem","comboboxItemRenderer","_ref6","customClassNames","innerElement","item","style","optionEvents","optionRenderData","isVirtualized","stickyCategories","otherArgs","__rest","dividerItemRenderer","categoryItemRenderer","styles","sticky","optionItemRenderer","assign","React","createElement","key","comboboxItemContainer","_ref7","dividerContainer","Divider","divider","_ref8","ComboboxCategory","_ref9","onOptionEnter","ComboboxOption","scrollRef","activeItemIndex","visualFocus","onOptionHover","onOptionLeave","shouldScrollWhenActive"],"mappings":"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"}
1	+ {"version":3,"file":"ComboboxHelpers.js","sources":["../../../../../src/components/Combobox/ComboboxHelpers/ComboboxHelpers.tsx"],"sourcesContent":["import React, { type CSSProperties, type MutableRefObject, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport ComboboxOption from \"../components/ComboboxOption/ComboboxOption\";\nimport ComboboxCategory from \"../components/ComboboxCategory/ComboboxCategory\";\nimport Divider from \"../../Divider/Divider\";\nimport {\n COMBOBOX_DIVIDER_ITEM,\n COMBOBOX_CATEGORY_ITEM,\n COMBOBOX_OPTION_ITEM,\n type IComboboxCategory,\n type IComboboxOption,\n type IComboboxCategoryMap,\n type IComboboxItem,\n type IOptionItemRendererArgs,\n type IComboboxOptionEvents\n} from \"../components/ComboboxConstants\";\nimport useActiveDescendantListFocus from \"../../../hooks/useActiveDescendantListFocus\";\nimport { getOptionsByCategories } from \"../ComboboxService\";\nimport comboboxItemsStyles from \"../components/ComboboxItems/ComboboxItems.module.scss\";\nimport styles from \"./ComboboxHelpers.module.scss\";\n\nconst DIVIDER_HEIGHT = 17;\nconst CATEGORY_HEIGHT = 32;\n\nexport function useItemsData({\n categories,\n options,\n filterValue,\n withCategoriesDivider,\n optionLineHeight\n}: {\n categories: IComboboxCategoryMap;\n options: IComboboxOption[];\n filterValue: string;\n withCategoriesDivider: boolean;\n optionLineHeight: number;\n}) {\n return useMemo(() => {\n let items: IComboboxItem[] = [];\n let selectableItems: IComboboxOption[] = [];\n const itemsMap = new Map();\n\n if (categories) {\n const optionsByCategories = getOptionsByCategories(options, categories, filterValue);\n let optionIndex = 0;\n Object.keys(optionsByCategories).forEach((categoryId, categoryIndex) => {\n const withDivider = withCategoriesDivider && categoryIndex !== 0;\n if (withDivider) {\n items.push(createDividerItemObject({ categoryId }));\n }\n\n const isCategoryWithOptions = optionsByCategories[categoryId].length > 0;\n const isFirstCategory = categoryIndex === 0;\n\n const categoryObject = createCategoryItemObject({\n categoryId,\n categoryData: categories[categoryId],\n withDivider,\n className: cx({\n [comboboxItemsStyles.categoryWithOptions]: isCategoryWithOptions,\n [comboboxItemsStyles.categoryWithoutOptions]: !isCategoryWithOptions,\n [comboboxItemsStyles.firstCategory]: isFirstCategory\n })\n });\n\n // save category object in both items array and categories map\n items.push(categoryObject);\n itemsMap.set(categoryId, categoryObject);\n\n optionsByCategories[categoryId].forEach((option: IComboboxOption) => {\n const itemObject = createOptionItemObject({\n height: optionLineHeight,\n option,\n index: optionIndex,\n categoryId: categoryObject.id\n });\n\n itemsMap.set(itemObject.id, itemObject);\n items.push(itemObject);\n selectableItems.push(option);\n optionIndex++;\n });\n });\n } else {\n selectableItems = options;\n items = options.map((option, index) => {\n return createOptionItemObject({\n height: optionLineHeight,\n option,\n index\n });\n });\n }\n return { items, itemsMap, selectableItems };\n }, [categories, options, filterValue, withCategoriesDivider, optionLineHeight]);\n}\n\nexport function useKeyboardNavigation({\n defaultVisualFocusFirstIndex,\n inputRef,\n onClick,\n isChildSelectable,\n options,\n getOptionId\n}: {\n defaultVisualFocusFirstIndex?: boolean;\n inputRef: MutableRefObject<HTMLElement>;\n onClick: (event: React.KeyboardEvent \| React.MouseEvent, index: number) => void;\n isChildSelectable: (index: number) => boolean;\n options: IComboboxOption[];\n getOptionId: (optionId: string, index: number) => string;\n}) {\n const filteredOptionsIds = useMemo(\n () => options.map((option: IComboboxOption, index: number) => getOptionId(option?.id, index)),\n [getOptionId, options]\n );\n\n const { visualFocusItemIndex, visualFocusItemId } = useActiveDescendantListFocus({\n defaultVisualFocusFirstIndex,\n focusedElementRef: inputRef,\n focusedElementRole: useActiveDescendantListFocus.roles.COMBOBOX,\n itemsIds: filteredOptionsIds,\n onItemClick: onClick,\n isItemSelectable: isChildSelectable,\n isIgnoreSpaceAsItemSelection: true\n });\n\n return { visualFocusItemIndex, visualFocusItemId, onOptionClick: onClick };\n}\nexport function createDividerItemObject({ categoryId }: { categoryId: string }): IComboboxItem {\n return { type: COMBOBOX_DIVIDER_ITEM, height: DIVIDER_HEIGHT, id: `${categoryId}-divider` };\n}\n\nexport function createCategoryItemObject({\n withDivider,\n categoryId,\n categoryData,\n className\n}: {\n withDivider: boolean;\n categoryId: string;\n categoryData: IComboboxCategory;\n className: string;\n}): IComboboxItem {\n return {\n height: CATEGORY_HEIGHT,\n type: COMBOBOX_CATEGORY_ITEM,\n category: categoryData,\n id: categoryId,\n withDivider,\n className\n };\n}\n\nexport function createOptionItemObject({\n option,\n height,\n index,\n optionRenderer,\n isActive,\n optionLineHeight,\n shouldScrollToSelectedItem,\n categoryId\n}: {\n option?: IComboboxOption;\n height?: number;\n index?: number;\n optionRenderer?: (option: IComboboxOption) => JSX.Element;\n isActive?: boolean;\n optionLineHeight?: number;\n shouldScrollToSelectedItem?: boolean;\n categoryId?: string;\n}): IComboboxItem {\n return {\n type: COMBOBOX_OPTION_ITEM,\n height,\n belongToCategory: true,\n index,\n option,\n id: option.id \|\| index.toString(),\n optionRenderer,\n isActive,\n optionLineHeight,\n shouldScrollToSelectedItem,\n categoryId\n };\n}\n\nexport function comboboxItemRenderer({\n item,\n style,\n optionEvents,\n optionRenderData,\n isVirtualized,\n stickyCategories\n}: {\n item: IComboboxItem;\n style: CSSProperties;\n optionEvents: IComboboxOptionEvents;\n optionRenderData: any;\n isVirtualized: boolean;\n stickyCategories?: boolean;\n}) {\n const { type, ...otherArgs } = item;\n let customClassNames;\n let innerElement;\n switch (type) {\n case COMBOBOX_DIVIDER_ITEM: {\n innerElement = dividerItemRenderer({ id: otherArgs.id, height: otherArgs.height });\n break;\n }\n case COMBOBOX_CATEGORY_ITEM: {\n innerElement = categoryItemRenderer({\n id: otherArgs.id,\n category: otherArgs.category,\n className: otherArgs.className\n });\n if (stickyCategories && !isVirtualized) {\n customClassNames = styles.sticky;\n }\n break;\n }\n case COMBOBOX_OPTION_ITEM: {\n innerElement = optionItemRenderer({\n ...otherArgs,\n ...optionEvents,\n ...optionRenderData\n });\n break;\n }\n }\n\n return (\n <div key={otherArgs.id} className={cx(styles.comboboxItemContainer, customClassNames)} style={style}>\n {innerElement}\n </div>\n );\n}\n\nexport function dividerItemRenderer({ id, height }: { id: string; height: number }) {\n return (\n <div className={styles.dividerContainer} style={{ height: height }}>\n <Divider className={styles.divider} key={id} />\n </div>\n );\n}\n\nexport function categoryItemRenderer({\n id,\n category,\n className\n}: {\n id: string;\n category: IComboboxCategory;\n className: string;\n}) {\n return <ComboboxCategory key={id} category={category} className={className} />;\n}\n\nexport function optionItemRenderer({\n id,\n index,\n option,\n className,\n onOptionClick,\n onOptionEnter,\n onOptionLeave,\n optionLineHeight,\n optionRenderer,\n scrollRef,\n shouldScrollToSelectedItem,\n activeItemIndex,\n visualFocusItemIndex\n}: IOptionItemRendererArgs) {\n return (\n <ComboboxOption\n className={className}\n index={index}\n key={id}\n option={option}\n optionRenderer={optionRenderer}\n scrollRef={scrollRef}\n isActive={activeItemIndex === index}\n visualFocus={index === visualFocusItemIndex}\n onOptionClick={onOptionClick}\n onOptionHover={onOptionEnter}\n onOptionLeave={onOptionLeave}\n onOptionEnter={onOptionEnter}\n optionLineHeight={optionLineHeight}\n shouldScrollWhenActive={shouldScrollToSelectedItem}\n />\n );\n}\n"],"names":["DIVIDER_HEIGHT","CATEGORY_HEIGHT","useItemsData","_ref","categories","options","filterValue","withCategoriesDivider","optionLineHeight","useMemo","items","selectableItems","itemsMap","Map","optionsByCategories","getOptionsByCategories","optionIndex","Object","keys","forEach","categoryId","categoryIndex","withDivider","push","createDividerItemObject","isCategoryWithOptions","length","isFirstCategory","categoryObject","createCategoryItemObject","categoryData","className","cx","_defineProperty","comboboxItemsStyles","categoryWithOptions","categoryWithoutOptions","firstCategory","set","option","itemObject","createOptionItemObject","height","index","id","map","useKeyboardNavigation","_ref2","defaultVisualFocusFirstIndex","inputRef","onClick","isChildSelectable","getOptionId","filteredOptionsIds","_useActiveDescendantL","useActiveDescendantListFocus","focusedElementRef","focusedElementRole","roles","COMBOBOX","itemsIds","onItemClick","isItemSelectable","isIgnoreSpaceAsItemSelection","visualFocusItemIndex","visualFocusItemId","onOptionClick","_ref3","type","COMBOBOX_DIVIDER_ITEM","concat","_ref4","COMBOBOX_CATEGORY_ITEM","category","_ref5","COMBOBOX_OPTION_ITEM","belongToCategory","optionRenderer","isActive","shouldScrollToSelectedItem","comboboxItemRenderer","_ref6","customClassNames","innerElement","item","style","optionEvents","optionRenderData","isVirtualized","stickyCategories","otherArgs","__rest","dividerItemRenderer","categoryItemRenderer","styles","sticky","optionItemRenderer","assign","React","createElement","key","comboboxItemContainer","_ref7","dividerContainer","Divider","divider","_ref8","ComboboxCategory","_ref9","onOptionEnter","ComboboxOption","scrollRef","activeItemIndex","visualFocus","onOptionHover","onOptionLeave","shouldScrollWhenActive"],"mappings":"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"}

package/dist/src/components/Combobox/ComboboxHelpers/ComboboxHelpers.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={comboboxItemContainer:"comboboxItemContainer_3046909f03",dividerContainer:"dividerContainer_458e41673f",divider:"divider_ab806a9886",sticky:"sticky_4ee94331f5"};!function(e){const n="s_id-78c8179b7fe9_3_86_0";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,i.firstChild?i.insertBefore(t,i.firstChild):i.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".comboboxItemContainer_3046909f03 {\n  display: flex;\n  flex: auto;\n  width: 100%;\n  background-color: var(--secondary-background-color);\n}\n\n.dividerContainer_458e41673f {\n  position: relative;\n  width: 95%;\n}\n\n.divider_ab806a9886 {\n  position: absolute;\n  width: calc(100% + 16px);\n  margin-left: -12px;\n}\n\n.sticky_4ee94331f5 {\n  position: sticky;\n  top: 0;\n  z-index: 20;\n}");export{e as default};
+var e={comboboxItemContainer:"comboboxItemContainer_5aa0051bbd",dividerContainer:"dividerContainer_58c5666ecb",divider:"divider_f174fd80b9",sticky:"sticky_91338255ca"};!function(e){const n="s_id-cfec7f62c06c_4_0_0-alpha_0";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,i.firstChild?i.insertBefore(t,i.firstChild):i.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".comboboxItemContainer_5aa0051bbd {\n  display: flex;\n  flex: auto;\n  width: 100%;\n  background-color: var(--secondary-background-color);\n}\n\n.dividerContainer_58c5666ecb {\n  position: relative;\n  width: 95%;\n}\n\n.divider_f174fd80b9 {\n  position: absolute;\n  width: calc(100% + 16px);\n  margin-inline-start: -12px;\n}\n\n.sticky_91338255ca {\n  position: sticky;\n  top: 0;\n  z-index: 20;\n}");export{e as default};
 //# sourceMappingURL=ComboboxHelpers.module.scss.js.map

package/dist/src/components/Combobox/components/ComboboxCategory/ComboboxCategory.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import o from"classnames";import a from"react";import r from"./ComboboxCategory.module.scss.js";import e from"../../Combobox.module.scss.js";var l=function(l){var m=l.category,t=l.className,c=m.label,s=m.id,b=m.color;return c?a.createElement("div",{key:s,role:"row","aria-level":1,"aria-label":m.ariaLabel||c,id:"combobox-category-".concat(s),style:b&&{color:b},className:o(r.comboboxCategory,e.comboboxCategory,t)},c):null};export{l as default};
+import o from"classnames";import a from"react";import r from"./ComboboxCategory.module.scss.js";import e from"../../Combobox.module.scss.js";var l=function(l){var m=l.category,t=l.className,c=m.label,s=m.id,b=m.color;return c?a.createElement("div",{key:s,role:"row","aria-level":1,"aria-label":m["aria-label"]||c,id:"combobox-category-".concat(s),style:b&&{color:b},className:o(r.comboboxCategory,e.comboboxCategory,t)},c):null};export{l as default};
 //# sourceMappingURL=ComboboxCategory.js.map

package/dist/src/components/Combobox/components/ComboboxCategory/ComboboxCategory.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboboxCategory.js","sources":["../../../../../../src/components/Combobox/components/ComboboxCategory/ComboboxCategory.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { type FC } from \"react\";\nimport { type IComboboxCategory } from \"../ComboboxConstants\";\nimport styles from \"./ComboboxCategory.module.scss\";\nimport comboboxStyles from \"../../Combobox.module.scss\";\n\nexport interface ComboboxCategoryProps {\n /*\n The category data.\n /\n category: IComboboxCategory;\n /\n Class name applied to the category element.\n */\n className: string;\n}\n\nconst ComboboxCategory: FC<ComboboxCategoryProps> = ({ category, className }) => {\n const { label, id, ariaLabel, color } = category;\n\n if (!label) return null;\n\n return (\n <div\n key={id}\n role=\"row\"\n aria-level={1}\n aria-label={ariaLabel \|\| label}\n id={`combobox-category-${id}`}\n style={color && { color }}\n className={cx(styles.comboboxCategory, comboboxStyles.comboboxCategory, className)}\n >\n {label}\n </div>\n );\n};\n\nexport default ComboboxCategory;\n"],"names":["ComboboxCategory","_ref","category","className","label","id","color","React","key","role","~~ariaLabel","~~concat","style","cx","styles","comboboxCategory","comboboxStyles"],"mappings":"6IAiBA,IAAMA,EAA8C,SAA9BC,GAA0D,IAAzBC,EAAQD,EAARC,SAAUC,EAASF,EAATE,UACvDC,~~EAAgCF~~,~~EAAhCE~~,MAAOC,~~EAAyBH~~,~~EAAzBG~~,~~GAAeC~~,EAAUJ,EAAVI,~~MAE9B~~,OAAKF,EAGHG,uBACEC,IAAKH,EACLI,KAAK,MACO,aAAA,~~eARwBP~~,~~EAArBQ~~,~~WASUN~~,EACzBC,~~GAAEM~~,qBAAAA,~~OAAuBN~~,~~GACzBO~~,~~MAAON~~,GAAS,CAAEA,MAAAA,GAClBH,~~UAAWU~~,EAAGC,EAAOC,iBAAkBC,EAAeD,~~iBAAkBZ~~,IAEvEC,GAZc,IAerB"}
1	+ {"version":3,"file":"ComboboxCategory.js","sources":["../../../../../../src/components/Combobox/components/ComboboxCategory/ComboboxCategory.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { type FC } from \"react\";\nimport { type IComboboxCategory } from \"../ComboboxConstants\";\nimport styles from \"./ComboboxCategory.module.scss\";\nimport comboboxStyles from \"../../Combobox.module.scss\";\n\nexport interface ComboboxCategoryProps {\n /*\n The category data.\n /\n category: IComboboxCategory;\n /\n Class name applied to the category element.\n */\n className: string;\n}\n\nconst ComboboxCategory: FC<ComboboxCategoryProps> = ({ category, className }) => {\n const { label, id, \"aria-label\": ariaLabel, color } = category;\n\n if (!label) return null;\n\n return (\n <div\n key={id}\n role=\"row\"\n aria-level={1}\n aria-label={ariaLabel \|\| label}\n id={`combobox-category-${id}`}\n style={color && { color }}\n className={cx(styles.comboboxCategory, comboboxStyles.comboboxCategory, className)}\n >\n {label}\n </div>\n );\n};\n\nexport default ComboboxCategory;\n"],"names":["ComboboxCategory","_ref","category","className","label","id","color","React","key","role","concat","style","cx","styles","comboboxCategory","comboboxStyles"],"mappings":"6IAiBA,IAAMA,EAA8C,SAA9BC,GAA0D,IAAzBC,EAAQD,EAARC,SAAUC,EAASF,EAATE,UACvDC,EAA8CF,EAA9CE,MAAOC,EAAuCH,EAAvCG,GAA6BC,EAAUJ,EAAVI,MAE5C,OAAKF,EAGHG,uBACEC,IAAKH,EACLI,KAAK,MACO,aAAA,eARsCP,EAAnC,eASUE,EACzBC,GAAEK,qBAAAA,OAAuBL,GACzBM,MAAOL,GAAS,CAAEA,MAAAA,GAClBH,UAAWS,EAAGC,EAAOC,iBAAkBC,EAAeD,iBAAkBX,IAEvEC,GAZc,IAerB"}

package/dist/src/components/Combobox/components/ComboboxCategory/ComboboxCategory.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={comboboxCategory:"comboboxCategory_980679aa52"};!function(e){const t="s_id-a004d249e1c1_3_86_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const l=document.createElement("style");l.id=t,n.firstChild?n.insertBefore(l,n.firstChild):n.appendChild(l),l.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.comboboxCategory_980679aa52 {\n  color: var(--placeholder-color);\n  display: flex;\n  align-items: center;\n  padding-top: var(--spacing-small);\n}");export{e as default};
+var e={comboboxCategory:"comboboxCategory_720c794516"};!function(e){const t="s_id-ddc89c066e12_4_0_0-alpha_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const l=document.createElement("style");l.id=t,n.firstChild?n.insertBefore(l,n.firstChild):n.appendChild(l),l.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.comboboxCategory_720c794516 {\n  color: var(--placeholder-color);\n  display: flex;\n  align-items: center;\n  padding-top: var(--space-8);\n}");export{e as default};
 //# sourceMappingURL=ComboboxCategory.module.scss.js.map

package/dist/src/components/Combobox/components/ComboboxConstants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboboxConstants.js","sources":["../../../../../src/components/Combobox/components/ComboboxConstants.ts"],"sourcesContent":["import type React from \"react\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport type { TooltipProps } from \"@vibe/tooltip\";\n\nexport const COMBOBOX_DIVIDER_ITEM = \"combobox-divider\";\nexport const COMBOBOX_CATEGORY_ITEM = \"combobox-category\";\nexport const COMBOBOX_OPTION_ITEM = \"combobox-option\";\nexport const COMBOBOX_LISTBOX_ID = \"combobox-listbox\";\n\n/*\n @deprecated\n /\nexport enum ComboboxOptionIconType {\n DEFAULT = \"default\",\n RENDERER = \"renderer\"\n}\n\nexport interface IComboboxCategoryMap {\n /\n A mapping of category IDs to category details.\n /\n [key: string]: IComboboxCategory;\n}\n\nexport interface IComboboxCategory {\n /\n The display label of the category.\n /\n label: string;\n /\n The unique ID of the category.\n /\n id: string;\n /\n The ARIA label for accessibility.\n /\n ~~ariaLabel~~?: string;\n /\n If true, the category is only shown when searching.\n /\n onlyShowOnSearch?: boolean;\n /\n The color associated with the category.\n /\n color?: string;\n}\n\nexport interface IComboboxOption {\n /\n The unique ID of the option.\n /\n id: string;\n /\n The ID of the category the option belongs to.\n /\n categoryId?: string;\n /\n The icon displayed on the left side.\n /\n leftIcon?: SubIcon \| ((className: string) => JSX.Element);\n /\n The icon displayed on the right side.\n /\n rightIcon?: SubIcon \| ((className: string) => JSX.Element);\n /\n The type of the left icon.\n /\n leftIconType?: ComboboxOptionIconType;\n /\n The type of the right icon.\n /\n rightIconType?: ComboboxOptionIconType;\n /\n The display label of the option.\n /\n label: string;\n /\n The size of the icons.\n /\n iconSize?: number;\n /\n If true, the option is disabled.\n /\n disabled?: boolean;\n /\n If true, the option is selected.\n /\n selected?: boolean;\n /\n The ARIA label for accessibility.\n /\n ~~ariaLabel~~?: string;\n /\n If true, the option belongs to a category.\n /\n belongToCategory?: boolean;\n /\n The tooltip content displayed on hover.\n /\n tooltipContent?: string;\n /\n Props for the Tooltip component.\n * The \"Omit\" is here on purpose to avoid the content prop, in case tooltipProps would be expanded in the future.\n /\n tooltipProps?: Pick<Omit<TooltipProps, \"content\">, \"position\">;\n}\n\nexport interface IComboboxItem {\n /\n The height of the item.\n /\n height?: number;\n /\n The type of the item.\n /\n type?: string;\n /\n The category details if the item is a category.\n /\n category?: IComboboxCategory;\n /\n The ID of the category the item belongs to.\n /\n categoryId?: string;\n /\n The unique ID of the item.\n /\n id?: string;\n /\n The index of the item in the list.\n /\n index?: number;\n /\n If true, a divider is displayed before this item.\n /\n withDivider?: boolean;\n /\n Class name applied to the item.\n /\n className?: string;\n /\n If true, the item belongs to a category.\n /\n belongToCategory?: boolean;\n /\n The option details if the item is an option.\n /\n option?: IComboboxOption;\n /\n Custom renderer for the option.\n /\n optionRenderer?: (option: IComboboxOption) => JSX.Element;\n /\n If true, the item is currently active.\n /\n isActive?: boolean;\n /\n The height of the option item.\n /\n optionLineHeight?: number;\n /\n If true, the selected item is automatically scrolled into view.\n /\n shouldScrollToSelectedItem?: boolean;\n}\n\nexport interface IComboboxOptionEvents {\n /\n Callback fired when an option is clicked.\n /\n onOptionClick: (\n event: React.MouseEvent \| React.KeyboardEvent,\n index: number,\n option: IComboboxOption,\n mouseTriggered: boolean\n ) => void;\n /\n Callback fired when the mouse leaves an option.\n /\n onOptionLeave: (event: React.MouseEvent, index: number, option: IComboboxOption, mouseTriggered: boolean) => void;\n /\n Callback fired when the mouse enters an option.\n /\n onOptionEnter: (event: React.MouseEvent, index: number, option: IComboboxOption, mouseTriggered: boolean) => void;\n /\n Callback fired when hovering over an option.\n /\n onOptionHover?: (event: React.MouseEvent, index: number, option: IComboboxOption, mouseTriggered: boolean) => void;\n}\n\nexport interface IOptionItemRendererArgs extends IComboboxOptionEvents {\n /\n The unique ID of the option item.\n /\n id?: string;\n /\n The index of the option item.\n /\n index?: number;\n /\n The option details.\n /\n option?: IComboboxOption;\n /\n Class name applied to the option item.\n /\n className?: string;\n /\n If true, the option is currently active.\n /\n isActive?: boolean;\n /\n If true, the option has visual focus.\n /\n visualFocus?: boolean;\n /\n A reference to the scroll container.\n /\n scrollRef?: React.MutableRefObject<HTMLElement>;\n /\n The amount of offset when scrolling to the active item.\n /\n scrollOffset?: number;\n /\n The height of the option item.\n /\n optionLineHeight?: number;\n /\n If true, the selected item is automatically scrolled into view.\n /\n shouldScrollToSelectedItem?: boolean;\n /\n If true, scrolls to the active option when it is selected.\n /\n shouldScrollWhenActive?: boolean;\n /\n If true, the option belongs to a category.\n /\n belongToCategory?: boolean;\n /\n The index of the item with visual focus.\n /\n visualFocusItemIndex?: number;\n /\n The index of the currently active item.\n /\n activeItemIndex?: number;\n /\n Custom renderer for the option content.\n */\n optionRenderer?: (option: IComboboxOption) => JSX.Element;\n}\n"],"names":["ComboboxOptionIconType","COMBOBOX_DIVIDER_ITEM","COMBOBOX_CATEGORY_ITEM","COMBOBOX_OPTION_ITEM","COMBOBOX_LISTBOX_ID"],"mappings":"AAIO,IAQKA,EARCC,EAAwB,mBACxBC,EAAyB,oBACzBC,EAAuB,kBACvBC,EAAsB,oBAKnC,SAAYJ,GACVA,EAAA,QAAA,UACAA,EAAA,SAAA,UACD,CAHD,CAAYA,IAAAA,EAGX,CAAA"}
1	+ {"version":3,"file":"ComboboxConstants.js","sources":["../../../../../src/components/Combobox/components/ComboboxConstants.ts"],"sourcesContent":["import type React from \"react\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport type { TooltipProps } from \"@vibe/tooltip\";\n\nexport const COMBOBOX_DIVIDER_ITEM = \"combobox-divider\";\nexport const COMBOBOX_CATEGORY_ITEM = \"combobox-category\";\nexport const COMBOBOX_OPTION_ITEM = \"combobox-option\";\nexport const COMBOBOX_LISTBOX_ID = \"combobox-listbox\";\n\n/*\n @deprecated\n /\nexport enum ComboboxOptionIconType {\n DEFAULT = \"default\",\n RENDERER = \"renderer\"\n}\n\nexport interface IComboboxCategoryMap {\n /\n A mapping of category IDs to category details.\n /\n [key: string]: IComboboxCategory;\n}\n\nexport interface IComboboxCategory {\n /\n The display label of the category.\n /\n label: string;\n /\n The unique ID of the category.\n /\n id: string;\n /\n The ARIA label for accessibility.\n /\n \"aria-label\"?: string;\n /\n If true, the category is only shown when searching.\n /\n onlyShowOnSearch?: boolean;\n /\n The color associated with the category.\n /\n color?: string;\n}\n\nexport interface IComboboxOption {\n /\n The unique ID of the option.\n /\n id: string;\n /\n The ID of the category the option belongs to.\n /\n categoryId?: string;\n /\n The icon displayed on the left side.\n /\n leftIcon?: SubIcon \| ((className: string) => JSX.Element);\n /\n The icon displayed on the right side.\n /\n rightIcon?: SubIcon \| ((className: string) => JSX.Element);\n /\n The type of the left icon.\n /\n leftIconType?: ComboboxOptionIconType;\n /\n The type of the right icon.\n /\n rightIconType?: ComboboxOptionIconType;\n /\n The display label of the option.\n /\n label: string;\n /\n The size of the icons.\n /\n iconSize?: number;\n /\n If true, the option is disabled.\n /\n disabled?: boolean;\n /\n If true, the option is selected.\n /\n selected?: boolean;\n /\n The ARIA label for accessibility.\n /\n \"aria-label\"?: string;\n /\n If true, the option belongs to a category.\n /\n belongToCategory?: boolean;\n /\n The tooltip content displayed on hover.\n /\n tooltipContent?: string;\n /\n Props for the Tooltip component.\n * The \"Omit\" is here on purpose to avoid the content prop, in case tooltipProps would be expanded in the future.\n /\n tooltipProps?: Pick<Omit<TooltipProps, \"content\">, \"position\">;\n}\n\nexport interface IComboboxItem {\n /\n The height of the item.\n /\n height?: number;\n /\n The type of the item.\n /\n type?: string;\n /\n The category details if the item is a category.\n /\n category?: IComboboxCategory;\n /\n The ID of the category the item belongs to.\n /\n categoryId?: string;\n /\n The unique ID of the item.\n /\n id?: string;\n /\n The index of the item in the list.\n /\n index?: number;\n /\n If true, a divider is displayed before this item.\n /\n withDivider?: boolean;\n /\n Class name applied to the item.\n /\n className?: string;\n /\n If true, the item belongs to a category.\n /\n belongToCategory?: boolean;\n /\n The option details if the item is an option.\n /\n option?: IComboboxOption;\n /\n Custom renderer for the option.\n /\n optionRenderer?: (option: IComboboxOption) => JSX.Element;\n /\n If true, the item is currently active.\n /\n isActive?: boolean;\n /\n The height of the option item.\n /\n optionLineHeight?: number;\n /\n If true, the selected item is automatically scrolled into view.\n /\n shouldScrollToSelectedItem?: boolean;\n}\n\nexport interface IComboboxOptionEvents {\n /\n Callback fired when an option is clicked.\n /\n onOptionClick: (\n event: React.MouseEvent \| React.KeyboardEvent,\n index: number,\n option: IComboboxOption,\n mouseTriggered: boolean\n ) => void;\n /\n Callback fired when the mouse leaves an option.\n /\n onOptionLeave: (event: React.MouseEvent, index: number, option: IComboboxOption, mouseTriggered: boolean) => void;\n /\n Callback fired when the mouse enters an option.\n /\n onOptionEnter: (event: React.MouseEvent, index: number, option: IComboboxOption, mouseTriggered: boolean) => void;\n /\n Callback fired when hovering over an option.\n /\n onOptionHover?: (event: React.MouseEvent, index: number, option: IComboboxOption, mouseTriggered: boolean) => void;\n}\n\nexport interface IOptionItemRendererArgs extends IComboboxOptionEvents {\n /\n The unique ID of the option item.\n /\n id?: string;\n /\n The index of the option item.\n /\n index?: number;\n /\n The option details.\n /\n option?: IComboboxOption;\n /\n Class name applied to the option item.\n /\n className?: string;\n /\n If true, the option is currently active.\n /\n isActive?: boolean;\n /\n If true, the option has visual focus.\n /\n visualFocus?: boolean;\n /\n A reference to the scroll container.\n /\n scrollRef?: React.MutableRefObject<HTMLElement>;\n /\n The amount of offset when scrolling to the active item.\n /\n scrollOffset?: number;\n /\n The height of the option item.\n /\n optionLineHeight?: number;\n /\n If true, the selected item is automatically scrolled into view.\n /\n shouldScrollToSelectedItem?: boolean;\n /\n If true, scrolls to the active option when it is selected.\n /\n shouldScrollWhenActive?: boolean;\n /\n If true, the option belongs to a category.\n /\n belongToCategory?: boolean;\n /\n The index of the item with visual focus.\n /\n visualFocusItemIndex?: number;\n /\n The index of the currently active item.\n /\n activeItemIndex?: number;\n /\n Custom renderer for the option content.\n */\n optionRenderer?: (option: IComboboxOption) => JSX.Element;\n}\n"],"names":["ComboboxOptionIconType","COMBOBOX_DIVIDER_ITEM","COMBOBOX_CATEGORY_ITEM","COMBOBOX_OPTION_ITEM","COMBOBOX_LISTBOX_ID"],"mappings":"AAIO,IAQKA,EARCC,EAAwB,mBACxBC,EAAyB,oBACzBC,EAAuB,kBACvBC,EAAsB,oBAKnC,SAAYJ,GACVA,EAAA,QAAA,UACAA,EAAA,SAAA,UACD,CAHD,CAAYA,IAAAA,EAGX,CAAA"}

package/dist/src/components/Combobox/components/ComboboxItems/ComboboxItems.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var t={scrollableContainer:"scrollableContainer_5601848db3",optionsContainer:"optionsContainer_b5997a2463",categoryWithOptions:"categoryWithOptions_257be59e72",firstCategory:"firstCategory_32c8d42656",categoryWithoutOptions:"categoryWithoutOptions_a915d7b12a"};!function(t){const e="s_id-4d4facb041a8_3_86_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+e))return;const o=document.createElement("style");o.id=e,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(t))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=t)}("/* stylelint-disable */\n/* stylelint-enable */\n.scrollableContainer_5601848db3::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.scrollableContainer_5601848db3::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}\n.optionsContainer_b5997a2463 {\n  overflow-x: visible;\n  overflow-y: auto;\n  margin-top: var(--spacing-small);\n}\n.categoryWithOptions_257be59e72.firstCategory_32c8d42656,\n.categoryWithoutOptions_a915d7b12a.firstCategory_32c8d42656 {\n  padding-top: 0;\n}\n.categoryWithOptions_257be59e72 {\n  margin-bottom: var(--spacing-xs);\n}\n.categoryWithoutOptions_a915d7b12a {\n  margin-bottom: 0;\n}");export{t as default};
+var t={scrollableContainer:"scrollableContainer_41c5d9090c",optionsContainer:"optionsContainer_eb780a569f",categoryWithOptions:"categoryWithOptions_32953c07a6",firstCategory:"firstCategory_4ee35ba4fb",categoryWithoutOptions:"categoryWithoutOptions_1f0c1b3a41"};!function(t){const e="s_id-9dc0ac18aa3d_4_0_0-alpha_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+e))return;const o=document.createElement("style");o.id=e,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(t))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=t)}("/* stylelint-disable */\n/* stylelint-enable */\n.scrollableContainer_41c5d9090c::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.scrollableContainer_41c5d9090c::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}\n.optionsContainer_eb780a569f {\n  overflow-x: visible;\n  overflow-y: auto;\n  margin-top: var(--space-8);\n}\n.categoryWithOptions_32953c07a6.firstCategory_4ee35ba4fb,\n.categoryWithoutOptions_1f0c1b3a41.firstCategory_4ee35ba4fb {\n  padding-top: 0;\n}\n.categoryWithOptions_32953c07a6 {\n  margin-bottom: var(--space-4);\n}\n.categoryWithoutOptions_1f0c1b3a41 {\n  margin-bottom: 0;\n}");export{t as default};
 //# sourceMappingURL=ComboboxItems.module.scss.js.map

package/dist/src/components/Combobox/components/ComboboxOption/ComboboxOption.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineProperty as o}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import e from"classnames";import t,{useRef as n,useEffect as i,useCallback as r,useMemo as s}from"react";import{keyCodes as l}from"../../../../constants/keyCodes.js";import"../../../../constants/sizes.js";import{getOptionId as c}from"../../helpers.js";import{withStaticPropsWithoutForwardRef as a}from"../../../../types/withStaticProps.js";import"../../../../utils/colors-vars-map.js";import{ComboboxOptionIconType as p}from"../ComboboxConstants.js";import{getTestId as m,ComponentDefaultTestId as d}from"../../../../tests/testIds.js";import f from"./ComboboxOption.module.scss.js";import u from"../../../../../hooks/dist/useIsOverflowing/index.js";import v from"../../../../../components/tooltip/dist/Tooltip/Tooltip.js";import b from"../../../../../components/icon/dist/Icon/Icon.js";var h=a((function(a){var p=a.index,h=a.option,y=a.className,O=a.isActive,j=a.visualFocus,I=a.scrollRef,g=a.scrollOffset,T=void 0===g?100:g,C=a.onOptionClick,E=a.onOptionLeave,k=a.onOptionHover,x=a.optionLineHeight,N=a.shouldScrollWhenActive,P=void 0===N||N,S=a.optionRenderer,L=void 0===S?null:S,w=h.id,H=h.leftIcon,R=h.leftIconType,z=h.rightIcon,A=h.rightIconType,B=h.label,F=h.iconSize,M=void 0===F?18:F,_=h.disabled,W=h.selected,D=h.ariaLabel,K=h.belongToCategory,V=void 0!==K&&K,X=h.tooltipContent,q=n(null),G=n(),J=u({ref:G});i((function(){var o,e=q.current;j&&e&&P&&((null==I?void 0:I.current)&&e?I.current.scrollTop=e.offsetTop-T:null===(o=null==e?void 0:e.scrollIntoView)||void 0===o||o.call(e,{behaviour:"smooth"}))}),[q,j,P,I,T,V]);var Q=function(o,n,i){return"renderer"===n?o(e(f.optionIcon,i)):t.createElement(b,{className:e(f.optionIcon,i),iconType:"font",icon:o,iconSize:M,ignoreFocusStyle:!0})},U=r((function(o){_||C(o,p,h,!0)}),[p,h,C,_]),Y=r((function(o){_||E(o,p,h,!0)}),[p,h,E,_]),Z=r((function(o){_||k(o,p,h,!0)}),[p,h,k,_]),$=r((function(o){o.key!==l.ENTER&&o.key!==l.SPACE||C(o,p,h,!1)}),[C,p,h]);X||(X=J?B:null);var oo=s((function(){return L&&L(h)}),[L,h]),eo=t.createElement(t.Fragment,null,H&&Q(H,R,f.left),t.createElement("div",{ref:G,className:e(f.optionLabel)},B),z&&Q(z,A,""));return t.createElement(v,Object.assign({},h.tooltipProps,{content:X,hideWhenReferenceHidden:!0}),t.createElement("div",{ref:q,key:w||B,"aria-level":V?2:1,"aria-selected":O,"aria-label":D||B,id:c(w,p),"data-testid":m(d.COMBOBOX_OPTION,p),onMouseEnter:Z,onClick:U,onKeyDown:$,onMouseLeave:Y,className:e(f.comboboxOption,y,o(o(o(o({},f.disabled,_),f.selected,W),f.active,O),f.activeOutline,j)),style:{height:x}},oo||eo))}),{iconTypes:p});export{h as default};
+import{defineProperty as e}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import o from"classnames";import t,{useRef as n,useEffect as i,useCallback as r,useMemo as l}from"react";import{keyCodes as s}from"../../../../constants/keyCodes.js";import"../../../../constants/sizes.js";import{getOptionId as c}from"../../helpers.js";import{getTestId as a,ComponentDefaultTestId as p}from"../../../../tests/testIds.js";import m from"./ComboboxOption.module.scss.js";import d from"../../../../../hooks/dist/useIsOverflowing/index.js";import u from"../../../../../components/tooltip/dist/Tooltip/Tooltip.js";import f from"../../../../../components/icon/dist/Icon/Icon.js";var v=function(v){var b=v.index,O=v.option,h=v.className,y=v.isActive,I=v.visualFocus,g=v.scrollRef,j=v.scrollOffset,E=void 0===j?100:j,T=v.onOptionClick,C=v.onOptionLeave,k=v.onOptionHover,N=v.optionLineHeight,x=v.shouldScrollWhenActive,P=void 0===x||x,H=v.optionRenderer,L=void 0===H?null:H,R=O.id,S=O.leftIcon,w=O.leftIconType,z=O.rightIcon,A=O.rightIconType,B=O.label,F=O.iconSize,M=void 0===F?18:F,_=O.disabled,W=O.selected,D=O["aria-label"],K=O.belongToCategory,V=void 0!==K&&K,X=O.tooltipContent,q=n(null),G=n(),J=d({ref:G});i((function(){var e,o=q.current;I&&o&&P&&((null==g?void 0:g.current)&&o?g.current.scrollTop=o.offsetTop-E:null===(e=null==o?void 0:o.scrollIntoView)||void 0===e||e.call(o,{behaviour:"smooth"}))}),[q,I,P,g,E,V]);var Q=function(e,n,i){return"renderer"===n?e(o(m.optionIcon,i)):t.createElement(f,{className:o(m.optionIcon,i),type:"font",icon:e,size:M,ignoreFocusStyle:!0})},U=r((function(e){_||T(e,b,O,!0)}),[b,O,T,_]),Y=r((function(e){_||C(e,b,O,!0)}),[b,O,C,_]),Z=r((function(e){_||k(e,b,O,!0)}),[b,O,k,_]),$=r((function(e){e.key!==s.ENTER&&e.key!==s.SPACE||T(e,b,O,!1)}),[T,b,O]);X||(X=J?B:null);var ee=l((function(){return L&&L(O)}),[L,O]),oe=t.createElement(t.Fragment,null,S&&Q(S,w,m.left),t.createElement("div",{ref:G,className:o(m.optionLabel)},B),z&&Q(z,A,""));return t.createElement(u,Object.assign({},O.tooltipProps,{content:X,hideWhenReferenceHidden:!0}),t.createElement("div",{ref:q,key:R||B,"aria-level":V?2:1,"aria-selected":y,"aria-label":D||B,id:c(R,b),"data-testid":a(p.COMBOBOX_OPTION,b),onMouseEnter:Z,onClick:U,onKeyDown:$,onMouseLeave:Y,className:o(m.comboboxOption,h,e(e(e(e({},m.disabled,_),m.selected,W),m.active,y),m.activeOutline,I)),style:{height:N}},ee||oe))};export{v as default};
 //# sourceMappingURL=ComboboxOption.js.map