npm - @vibe/core - Versions diffs - 3.86.0 → 3.88.0 - Mend

@vibe/core 3.86.0 → 3.88.0

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 (1703) hide show

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 { 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"}
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"}

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

@@ -1,2 +1,2 @@
-var e={itemWrapper:"itemWrapper_32763fcd94",circle:"circle_0f76691f64",feedbackIndicator:"feedbackIndicator_033db6732e",active:"active_e24a8a46c2",selectedColor:"selectedColor_c2482225f1",colorItem:"colorItem_9c4280f51e",colorIndicatorWrapper:"colorIndicatorWrapper_12475324f9",colorItemSizeSmall:"colorItemSizeSmall_d4f65d669d",colorItemSizeMedium:"colorItemSizeMedium_69cb303684",colorItemSizeLarge:"colorItemSizeLarge_7963605e2d",colorItemTextMode:"colorItemTextMode_9b68094d9f",colorIconWhite:"colorIconWhite_d095f0da52"};!function(e){const r="s_id-4f41e3ef6859_3_85_1";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_32763fcd94.circle_0f76691f64 {\n  --border-radius-multiplier: 99999;\n}\n\n/* stylelint-disable scss/operator-no-unspaced */\n\n.itemWrapper_32763fcd94 {\n  --border-radius-multiplier: 1;\n  margin: 4px;\n  display: flex;\n  list-style-type: none;\n  position: relative;\n}\n\n.itemWrapper_32763fcd94 .feedbackIndicator_033db6732e {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.itemWrapper_32763fcd94:focus,\n.itemWrapper_32763fcd94:focus-visible,\n.itemWrapper_32763fcd94.active_e24a8a46c2 {\n  outline: none;\n}\n\n.itemWrapper_32763fcd94:focus .feedbackIndicator_033db6732e:before,\n.itemWrapper_32763fcd94:focus-visible .feedbackIndicator_033db6732e:before,\n.itemWrapper_32763fcd94.active_e24a8a46c2 .feedbackIndicator_033db6732e: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_32763fcd94:focus .feedbackIndicator_033db6732e:after,\n.itemWrapper_32763fcd94:focus-visible .feedbackIndicator_033db6732e:after,\n.itemWrapper_32763fcd94.active_e24a8a46c2 .feedbackIndicator_033db6732e: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_32763fcd94:hover:not(.active_e24a8a46c2):not(.selectedColor_c2482225f1) .feedbackIndicator_033db6732e {\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_32763fcd94 .colorItem_9c4280f51e {\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_32763fcd94 .colorItem_9c4280f51e .colorIndicatorWrapper_12475324f9 {\n  display: flex;\n}\n\n.itemWrapper_32763fcd94 .colorItem_9c4280f51e.colorItemSizeSmall_d4f65d669d {\n  width: 24px;\n  height: 24px;\n}\n\n.itemWrapper_32763fcd94 .colorItem_9c4280f51e.colorItemSizeMedium_69cb303684 {\n  width: 32px;\n  height: 32px;\n}\n\n.itemWrapper_32763fcd94 .colorItem_9c4280f51e.colorItemSizeLarge_7963605e2d {\n  width: 40px;\n  height: 40px;\n}\n\n.itemWrapper_32763fcd94.selectedColor_c2482225f1 {\n  position: relative;\n}\n\n.itemWrapper_32763fcd94.selectedColor_c2482225f1: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_32763fcd94.selectedColor_c2482225f1 .feedbackIndicator_033db6732e:before {\n  /* hide the outer border from the "active" feedback indicator */\n  display: none;\n}\n\n.itemWrapper_32763fcd94 .colorItemTextMode_9b68094d9f:hover {\n  background-color: var(--primary-background-hover-color) !important;\n}\n\n.itemWrapper_32763fcd94 .colorIconWhite_d095f0da52 {\n  color: var(--color-snow_white);\n}');export{e as default};
+var e={itemWrapper:"itemWrapper_492e61ef2f",circle:"circle_de60811dc2",feedbackIndicator:"feedbackIndicator_ab9dc49c19",active:"active_6ec0d89167",selectedColor:"selectedColor_12c3180f73",colorItem:"colorItem_dddf47f2e4",colorIndicatorWrapper:"colorIndicatorWrapper_1df6e1b172",colorItemSizeSmall:"colorItemSizeSmall_4904418c1a",colorItemSizeMedium:"colorItemSizeMedium_56196cea62",colorItemSizeLarge:"colorItemSizeLarge_d99f092e9c",colorItemTextMode:"colorItemTextMode_ddd057cb47",colorIconWhite:"colorIconWhite_c3322be335"};!function(e){const r="s_id-4f41e3ef6859_3_87_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_492e61ef2f.circle_de60811dc2 {\n  --border-radius-multiplier: 99999;\n}\n\n/* stylelint-disable scss/operator-no-unspaced */\n\n.itemWrapper_492e61ef2f {\n  --border-radius-multiplier: 1;\n  margin: 4px;\n  display: flex;\n  list-style-type: none;\n  position: relative;\n}\n\n.itemWrapper_492e61ef2f .feedbackIndicator_ab9dc49c19 {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.itemWrapper_492e61ef2f:focus,\n.itemWrapper_492e61ef2f:focus-visible,\n.itemWrapper_492e61ef2f.active_6ec0d89167 {\n  outline: none;\n}\n\n.itemWrapper_492e61ef2f:focus .feedbackIndicator_ab9dc49c19:before,\n.itemWrapper_492e61ef2f:focus-visible .feedbackIndicator_ab9dc49c19:before,\n.itemWrapper_492e61ef2f.active_6ec0d89167 .feedbackIndicator_ab9dc49c19: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_492e61ef2f:focus .feedbackIndicator_ab9dc49c19:after,\n.itemWrapper_492e61ef2f:focus-visible .feedbackIndicator_ab9dc49c19:after,\n.itemWrapper_492e61ef2f.active_6ec0d89167 .feedbackIndicator_ab9dc49c19: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_492e61ef2f:hover:not(.active_6ec0d89167):not(.selectedColor_12c3180f73) .feedbackIndicator_ab9dc49c19 {\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_492e61ef2f .colorItem_dddf47f2e4 {\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_492e61ef2f .colorItem_dddf47f2e4 .colorIndicatorWrapper_1df6e1b172 {\n  display: flex;\n}\n\n.itemWrapper_492e61ef2f .colorItem_dddf47f2e4.colorItemSizeSmall_4904418c1a {\n  width: 24px;\n  height: 24px;\n}\n\n.itemWrapper_492e61ef2f .colorItem_dddf47f2e4.colorItemSizeMedium_56196cea62 {\n  width: 32px;\n  height: 32px;\n}\n\n.itemWrapper_492e61ef2f .colorItem_dddf47f2e4.colorItemSizeLarge_d99f092e9c {\n  width: 40px;\n  height: 40px;\n}\n\n.itemWrapper_492e61ef2f.selectedColor_12c3180f73 {\n  position: relative;\n}\n\n.itemWrapper_492e61ef2f.selectedColor_12c3180f73: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_492e61ef2f.selectedColor_12c3180f73 .feedbackIndicator_ab9dc49c19:before {\n  /* hide the outer border from the "active" feedback indicator */\n  display: none;\n}\n\n.itemWrapper_492e61ef2f .colorItemTextMode_ddd057cb47:hover {\n  background-color: var(--primary-background-hover-color) !important;\n}\n\n.itemWrapper_492e61ef2f .colorIconWhite_c3322be335 {\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 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,E=void 0===H?"":H,A=s.optionClassName,L=void 0===A?"":A,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,P=s.size,D=void 0===P?"medium":P,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,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"],Ve=s.debounceRate,We=s.searchInputRef,ze=s.renderAction,Pe=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 De=r(null),Xe=r(null),_e=b(F,De),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),Ee&&Ue("")}),[le,fo,io,Ee,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,E,p(j,d("size-"+D)),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:D,disabled:U,onChange:Ue,autoFocus:K,loading:fe,searchIconName:B,ariaExpanded:no||ro,ariaHasPopup:"listbox",searchResultsContainerId:V?"".concat(V,"-listbox"):N,debounceRate:Ve,renderAction:ze,hideRenderActionOnInput:Pe}),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:Ae,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:D,kind:"tertiary",onClick:so},i.createElement("span",{className:j.buttonLabel},m(ne)?ne(Ke):ne)))))}));export{F 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 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};
 //# 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 { 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 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\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","ariaExpanded","ariaHasPopup","searchResultsContainerId","concat","COMBOBOX_LISTBOX_ID","StickyCategoryHeader","color","ComboboxItems","activeItemIndex","onOptionEnter","comboboxNoResults","comboboxMessageWrapper","comboboxMessage","Button","addNewButton","kind","buttonLabel","isFunction"],"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 { 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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"}

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

@@ -1,2 +1,2 @@
-var o={combobox:"combobox_99bedd840a",stickyCategory:"stickyCategory_989c81411b",comboboxCategory:"comboboxCategory_6aa5c16179",sizeSmall:"sizeSmall_6bbaa27b6d",sizeMedium:"sizeMedium_c3507f9310",sizeLarge:"sizeLarge_6bbaa27b6d",empty:"empty_07a9f867b3",comboboxSearchWrapper:"comboboxSearchWrapper_63acea124f",comboboxNoResults:"comboboxNoResults_2fcd7aed3a",comboboxMessageWrapper:"comboboxMessageWrapper_86534cfd33",comboboxMessage:"comboboxMessage_efa4fc98ff",addNewButton:"addNewButton_657780f340",buttonLabel:"buttonLabel_efa4fc98ff",comboboxList:"comboboxList_0119862691"};!function(o){const e="s_id-140391bb7df9_3_85_1";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+e))return;const a=document.createElement("style");a.id=e,n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=o)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.combobox_99bedd840a {\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_99bedd840a.stickyCategory_989c81411b .comboboxCategory_6aa5c16179 {\n  z-index: 10;\n  background-color: var(--secondary-background-color);\n}\n/* Relative to Search height */\n.combobox_99bedd840a.stickyCategory_989c81411b.sizeSmall_6bbaa27b6d .comboboxCategory_6aa5c16179 {\n  top: 32px;\n}\n.combobox_99bedd840a.stickyCategory_989c81411b.sizeMedium_c3507f9310 .comboboxCategory_6aa5c16179 {\n  top: 40px;\n}\n.combobox_99bedd840a.stickyCategory_989c81411b.sizeLarge_6bbaa27b6d .comboboxCategory_6aa5c16179 {\n  top: 48px;\n}\n.combobox_99bedd840a.empty_07a9f867b3 {\n  max-height: 200px;\n  margin-bottom: 0;\n}\n.comboboxSearchWrapper_63acea124f {\n  position: sticky;\n  top: 0;\n  z-index: 12;\n}\n.comboboxNoResults_2fcd7aed3a {\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_2fcd7aed3a .comboboxMessageWrapper_86534cfd33 {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.comboboxNoResults_2fcd7aed3a .comboboxMessageWrapper_86534cfd33 .comboboxMessage_efa4fc98ff {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.comboboxNoResults_2fcd7aed3a .addNewButton_657780f340 {\n  flex: 0 0 auto;\n  width: 100% !important;\n  margin-bottom: 8px;\n}\n.comboboxNoResults_2fcd7aed3a .addNewButton_657780f340 .buttonLabel_efa4fc98ff {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.comboboxList_0119862691 {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  padding: 0 4px;\n  overflow: hidden;\n}");export{o as default};
+var o={combobox:"combobox_90a0866265",stickyCategory:"stickyCategory_1a9b976fa9",comboboxCategory:"comboboxCategory_b2d5423e3e",sizeSmall:"sizeSmall_15366e7afe",sizeMedium:"sizeMedium_d000a1b69b",sizeLarge:"sizeLarge_15366e7afe",empty:"empty_6f8bca37c2",comboboxSearchWrapper:"comboboxSearchWrapper_3aac9f6f24",comboboxNoResults:"comboboxNoResults_e4f83cda67",comboboxMessageWrapper:"comboboxMessageWrapper_9457b1060b",comboboxMessage:"comboboxMessage_4946efb7c4",addNewButton:"addNewButton_2d563959ad",buttonLabel:"buttonLabel_4946efb7c4",comboboxList:"comboboxList_b8ae782bcf"};!function(o){const e="s_id-140391bb7df9_3_87_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+e))return;const a=document.createElement("style");a.id=e,n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=o)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.combobox_90a0866265 {\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_90a0866265.stickyCategory_1a9b976fa9 .comboboxCategory_b2d5423e3e {\n  z-index: 10;\n  background-color: var(--secondary-background-color);\n}\n/* Relative to Search height */\n.combobox_90a0866265.stickyCategory_1a9b976fa9.sizeSmall_15366e7afe .comboboxCategory_b2d5423e3e {\n  top: 32px;\n}\n.combobox_90a0866265.stickyCategory_1a9b976fa9.sizeMedium_d000a1b69b .comboboxCategory_b2d5423e3e {\n  top: 40px;\n}\n.combobox_90a0866265.stickyCategory_1a9b976fa9.sizeLarge_15366e7afe .comboboxCategory_b2d5423e3e {\n  top: 48px;\n}\n.combobox_90a0866265.empty_6f8bca37c2 {\n  max-height: 200px;\n  margin-bottom: 0;\n}\n.comboboxSearchWrapper_3aac9f6f24 {\n  position: sticky;\n  top: 0;\n  z-index: 12;\n}\n.comboboxNoResults_e4f83cda67 {\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_e4f83cda67 .comboboxMessageWrapper_9457b1060b {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.comboboxNoResults_e4f83cda67 .comboboxMessageWrapper_9457b1060b .comboboxMessage_4946efb7c4 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.comboboxNoResults_e4f83cda67 .addNewButton_2d563959ad {\n  flex: 0 0 auto;\n  width: 100% !important;\n  margin-bottom: 8px;\n}\n.comboboxNoResults_e4f83cda67 .addNewButton_2d563959ad .buttonLabel_4946efb7c4 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.comboboxList_b8ae782bcf {\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.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={comboboxItemContainer:"comboboxItemContainer_f070f8ad0a",dividerContainer:"dividerContainer_7ae5e51565",divider:"divider_2da2a71f0a",sticky:"sticky_b054ddb61f"};!function(e){const n="s_id-78c8179b7fe9_3_85_1";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_f070f8ad0a {\n  display: flex;\n  flex: auto;\n  width: 100%;\n  background-color: var(--secondary-background-color);\n}\n\n.dividerContainer_7ae5e51565 {\n  position: relative;\n  width: 95%;\n}\n\n.divider_2da2a71f0a {\n  position: absolute;\n  width: calc(100% + 16px);\n  margin-left: -12px;\n}\n\n.sticky_b054ddb61f {\n  position: sticky;\n  top: 0;\n  z-index: 20;\n}");export{e as default};
+var e={comboboxItemContainer:"comboboxItemContainer_399440ec07",dividerContainer:"dividerContainer_132b419b79",divider:"divider_3be2edc073",sticky:"sticky_fea778cd88"};!function(e){const n="s_id-78c8179b7fe9_3_87_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_399440ec07 {\n  display: flex;\n  flex: auto;\n  width: 100%;\n  background-color: var(--secondary-background-color);\n}\n\n.dividerContainer_132b419b79 {\n  position: relative;\n  width: 95%;\n}\n\n.divider_3be2edc073 {\n  position: absolute;\n  width: calc(100% + 16px);\n  margin-left: -12px;\n}\n\n.sticky_fea778cd88 {\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.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={comboboxCategory:"comboboxCategory_69721b847a"};!function(e){const t="s_id-a004d249e1c1_3_85_1";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_69721b847a {\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_f5fd17deb4"};!function(e){const t="s_id-a004d249e1c1_3_87_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_f5fd17deb4 {\n  color: var(--placeholder-color);\n  display: flex;\n  align-items: center;\n  padding-top: var(--spacing-small);\n}");export{e as default};
 //# sourceMappingURL=ComboboxCategory.module.scss.js.map

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

@@ -1,2 +1,2 @@
-var t={scrollableContainer:"scrollableContainer_63e4cfb590",optionsContainer:"optionsContainer_b01bbe4288",categoryWithOptions:"categoryWithOptions_dfcf84f81e",firstCategory:"firstCategory_8393acc5d7",categoryWithoutOptions:"categoryWithoutOptions_ac1715dfc3"};!function(t){const e="s_id-4d4facb041a8_3_85_1";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_63e4cfb590::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.scrollableContainer_63e4cfb590::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}\n.optionsContainer_b01bbe4288 {\n  overflow-x: visible;\n  overflow-y: auto;\n  margin-top: var(--spacing-small);\n}\n.categoryWithOptions_dfcf84f81e.firstCategory_8393acc5d7,\n.categoryWithoutOptions_ac1715dfc3.firstCategory_8393acc5d7 {\n  padding-top: 0;\n}\n.categoryWithOptions_dfcf84f81e {\n  margin-bottom: var(--spacing-xs);\n}\n.categoryWithoutOptions_ac1715dfc3 {\n  margin-bottom: 0;\n}");export{t as default};
+var t={scrollableContainer:"scrollableContainer_e33ca6b4a0",optionsContainer:"optionsContainer_d8effb1dd8",categoryWithOptions:"categoryWithOptions_f2feb22029",firstCategory:"firstCategory_8c47d019c7",categoryWithoutOptions:"categoryWithoutOptions_90c290763d"};!function(t){const e="s_id-4d4facb041a8_3_87_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_e33ca6b4a0::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.scrollableContainer_e33ca6b4a0::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}\n.optionsContainer_d8effb1dd8 {\n  overflow-x: visible;\n  overflow-y: auto;\n  margin-top: var(--spacing-small);\n}\n.categoryWithOptions_f2feb22029.firstCategory_8c47d019c7,\n.categoryWithoutOptions_90c290763d.firstCategory_8c47d019c7 {\n  padding-top: 0;\n}\n.categoryWithOptions_f2feb22029 {\n  margin-bottom: var(--spacing-xs);\n}\n.categoryWithoutOptions_90c290763d {\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 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,L=void 0===x||x,P=v.optionRenderer,H=void 0===P?null:P,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.ariaLabel,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&&L&&((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,L,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 H&&H(O)}),[H,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};
+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};
 //# sourceMappingURL=ComboboxOption.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboboxOption.js","sources":["../../../../../../src/components/Combobox/components/ComboboxOption/ComboboxOption.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { type RefObject, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { useIsOverflowing } from \"@vibe/hooks\";\nimport { keyCodes } from \"../../../../constants\";\nimport { getOptionId } from \"../../helpers\";\nimport { type IComboboxOption, type IComboboxOptionEvents } from \"../ComboboxConstants\";\nimport { type ComboboxOptionIconType } from \"../../Combobox.types\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../../tests/test-ids-utils\";\nimport styles from \"./ComboboxOption.module.scss\";\n\nexport interface ComboboxOptionProps extends IComboboxOptionEvents {\n /*\n The index of the option in the list.\n /\n index?: number;\n /\n The option data containing label, icons, and other properties.\n /\n option?: IComboboxOption;\n /\n Class name applied to the option element.\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?: RefObject<HTMLElement>;\n /\n The amount of offset when scrolling to the active item.\n /\n scrollOffset?: number;\n /\n The height of each option.\n /\n optionLineHeight?: number;\n /\n If true, scrolls to the active option when it is selected.\n /\n shouldScrollWhenActive?: boolean;\n /\n Custom renderer for the option content.\n */\n optionRenderer?: (option: IComboboxOption) => JSX.Element;\n}\n\nconst ComboboxOption = ({\n index,\n option,\n className,\n isActive,\n visualFocus,\n scrollRef,\n scrollOffset = 100,\n onOptionClick,\n onOptionLeave,\n onOptionHover,\n optionLineHeight,\n shouldScrollWhenActive = true,\n optionRenderer = null\n}: ComboboxOptionProps) => {\n const {\n id,\n leftIcon,\n leftIconType,\n rightIcon,\n rightIconType,\n label,\n iconSize = 18,\n disabled,\n selected,\n ariaLabel,\n belongToCategory = false\n } = option;\n let { tooltipContent } = option;\n\n const ref = useRef(null);\n const labelRef = useRef();\n\n const isOptionOverflowing = useIsOverflowing({ ref: labelRef });\n\n useEffect(() => {\n const element = ref.current;\n if (visualFocus && element && shouldScrollWhenActive) {\n if (scrollRef?.current && element) {\n // not supported with virtualized atm, need their scrollRef (element with overflow-y auto that has the scroll)\n scrollRef.current.scrollTop = element.offsetTop - scrollOffset;\n } else {\n element?.scrollIntoView?.({ behaviour: \"smooth\" });\n }\n }\n }, [ref, visualFocus, shouldScrollWhenActive, scrollRef, scrollOffset, belongToCategory]);\n\n const renderIcon = (\n icon: SubIcon \| ((className: string) => JSX.Element),\n iconType: ComboboxOptionIconType,\n className: string\n ) => {\n if (iconType === \"renderer\") {\n return (icon as (className: string) => JSX.Element)(cx(styles.optionIcon, className));\n }\n\n return (\n <Icon\n className={cx(styles.optionIcon, className)}\n ~~type~~=\"font\"\n icon={icon as SubIcon}\n ~~size~~={iconSize}\n ignoreFocusStyle\n />\n );\n };\n\n const onClick = useCallback(\n (event: React.MouseEvent) => {\n if (disabled) return;\n onOptionClick(event, index, option, true);\n },\n [index, option, onOptionClick, disabled]\n );\n\n const onMouseLeave = useCallback(\n (event: React.MouseEvent) => {\n if (disabled) return;\n onOptionLeave(event, index, option, true);\n },\n [index, option, onOptionLeave, disabled]\n );\n\n const onMouseEnter = useCallback(\n (event: React.MouseEvent) => {\n if (disabled) return;\n onOptionHover(event, index, option, true);\n },\n [index, option, onOptionHover, disabled]\n );\n\n const onKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === keyCodes.ENTER \|\| event.key === keyCodes.SPACE) {\n onOptionClick(event, index, option, false);\n }\n },\n [onOptionClick, index, option]\n );\n if (!tooltipContent) {\n tooltipContent = isOptionOverflowing ? label : null;\n }\n\n const optionRendererValue = useMemo(() => optionRenderer && optionRenderer(option), [optionRenderer, option]);\n\n const optionValue = (\n <>\n {leftIcon && renderIcon(leftIcon, leftIconType, styles.left)}\n <div ref={labelRef} className={cx(styles.optionLabel)}>\n {label}\n </div>\n {rightIcon && renderIcon(rightIcon, rightIconType, \"\")}\n </>\n );\n\n return (\n <Tooltip {...option.tooltipProps} content={tooltipContent} hideWhenReferenceHidden>\n <div\n ref={ref}\n key={id \|\| label}\n aria-level={belongToCategory ? 2 : 1}\n aria-selected={isActive}\n aria-label={ariaLabel \|\| label}\n id={getOptionId(id, index)}\n data-testid={getTestId(ComponentDefaultTestId.COMBOBOX_OPTION, index)}\n onMouseEnter={onMouseEnter}\n onClick={onClick}\n onKeyDown={onKeyDown}\n onMouseLeave={onMouseLeave}\n className={cx(styles.comboboxOption, className, {\n [styles.disabled]: disabled,\n [styles.selected]: selected,\n [styles.active]: isActive,\n [styles.activeOutline]: visualFocus\n })}\n style={{ height: optionLineHeight }}\n >\n {optionRendererValue \|\| optionValue}\n </div>\n </Tooltip>\n );\n};\n\nexport default ComboboxOption;\n"],"names":["~~ComboboxOption~~","_ref","index","option","className","isActive","visualFocus","scrollRef","_ref$scrollOffset","scrollOffset","onOptionClick","onOptionLeave","onOptionHover","optionLineHeight","_ref$shouldScrollWhen","shouldScrollWhenActive","_ref$optionRenderer","optionRenderer","id","leftIcon","leftIconType","rightIcon","rightIconType","label","_option$iconSize","iconSize","disabled","selected","ariaLabel","_option$belongToCateg","belongToCategory","tooltipContent","ref","useRef","labelRef","isOptionOverflowing","useIsOverflowing","useEffect","element","current","scrollTop","offsetTop","_a","scrollIntoView","call","behaviour","renderIcon","icon","iconType","cx","styles","optionIcon","React","createElement","Icon","~~type","size","~~ignoreFocusStyle","onClick","useCallback","event","onMouseLeave","onMouseEnter","onKeyDown","key","keyCodes","ENTER","SPACE","optionRendererValue","useMemo","optionValue","Fragment","left","optionLabel","Tooltip","Object","assign","tooltipProps","content","hideWhenReferenceHidden","getOptionId","getTestId","ComponentDefaultTestId","COMBOBOX_OPTION","comboboxOption","_defineProperty","active","activeOutline","style","height"],"mappings":"~~kqBAuDA~~,~~IAAMA~~,~~EAAiB~~,SAAHC,GAcM,IAbxBC,EAAKD,EAALC,MACAC,EAAMF,EAANE,OACAC,EAASH,EAATG,UACAC,EAAQJ,EAARI,SACAC,EAAWL,EAAXK,YACAC,EAASN,EAATM,UAASC,EAAAP,EACTQ,aAAAA,OAAe,IAAHD,EAAG,IAAGA,EAClBE,EAAaT,EAAbS,cACAC,EAAaV,EAAbU,cACAC,EAAaX,EAAbW,cACAC,EAAgBZ,EAAhBY,iBAAgBC,EAAAb,EAChBc,uBAAAA,OAAyB,IAAHD,GAAOA,EAAAE,EAAAf,EAC7BgB,eAAAA,OAAiB,IAAHD,EAAG,KAAIA,EAGnBE,EAWEf,EAXFe,GACAC,EAUEhB,EAVFgB,SACAC,EASEjB,EATFiB,aACAC,EAQElB,EARFkB,UACAC,EAOEnB,EAPFmB,cACAC,EAMEpB,EANFoB,MAAKC,EAMHrB,EALFsB,SAAAA,OAAW,IAAHD,EAAG,GAAEA,EACbE,EAIEvB,EAJFuB,SACAC,EAGExB,EAHFwB,SACAC,EAEEzB,EAFFyB,UAASC,EAEP1B,EADF2B,iBAAAA,OAAmB,IAAHD,GAAQA,EAEpBE,EAAmB5B,EAAnB4B,eAEAC,EAAMC,EAAO,MACbC,EAAWD,IAEXE,EAAsBC,EAAiB,CAAEJ,IAAKE,IAEpDG,GAAU,iBACFC,EAAUN,EAAIO,QAChBjC,GAAegC,GAAWvB,KACxBR,aAAS,EAATA,EAAWgC,UAAWD,EAExB/B,EAAUgC,QAAQC,UAAYF,EAAQG,UAAYhC,EAExB,QAA1BiC,EAAAJ,aAAO,EAAPA,EAASK,sBAAiB,IAAAD,GAAAA,EAAAE,KAAAN,EAAA,CAAEO,UAAW,WAG7C,GAAG,CAACb,EAAK1B,EAAaS,EAAwBR,EAAWE,EAAcqB,IAEvE,IAAMgB,EAAa,SACjBC,EACAC,EACA5C,GAEA,MAAiB,aAAb4C,EACMD,EAA4CE,EAAGC,EAAOC,WAAY/C,IAI1EgD,EAAAC,cAACC,EAAI,CACHlD,UAAW6C,EAAGC,EAAOC,WAAY/C,~~GACjCmD~~,~~KAAK~~,~~OACLR~~,KAAMA,~~EACNS~~,~~KAAM/B~~,~~EACNgC~~,kBAAgB,KAKhBC,EAAUC,GACd,SAACC,~~GACKlC~~,GACJhB,~~EAAckD~~,~~EAAO1D~~,EAAOC,GAAQ,EACrC,GACD,CAACD,EAAOC,EAAQO,EAAegB,~~IAG3BmC~~,EAAeF,GACnB,SAACC,~~GACKlC~~,GACJf,~~EAAciD~~,~~EAAO1D~~,EAAOC,GAAQ,EACrC,GACD,CAACD,EAAOC,EAAQQ,EAAee,~~IAG3BoC~~,EAAeH,GACnB,SAACC,~~GACKlC~~,GACJd,~~EAAcgD~~,~~EAAO1D~~,EAAOC,GAAQ,EACrC,GACD,CAACD,EAAOC,EAAQS,EAAec,~~IAG3BqC~~,EAAYJ,GAChB,SAACC,GACKA,EAAMI,MAAQC,EAASC,OAASN,EAAMI,MAAQC,EAASE,~~OACzDzD~~,~~EAAckD~~,~~EAAO1D~~,EAAOC,GAAQ,EAEvC,GACD,CAACO,EAAeR,EAAOC,IAEpB4B,IACHA,EAAiBI,EAAsBZ,EAAQ,MAGjD,~~IAAM6C~~,GAAsBC,GAAQ,WAAA,~~OAAMpD~~,GAAkBA,EAAed,EAAO,GAAE,CAACc,EAAgBd,IAE/~~FmE~~,~~GACJlB~~,EAAAC,cAAAD,~~EAAAmB~~,SAAA,~~KACGpD~~,GAAY2B,EAAW3B,EAAUC,EAAc8B,~~EAAOsB~~,~~MACvDpB~~,EAAAC,cAAA,MAAA,CAAKrB,IAAKE,EAAU9B,UAAW6C,EAAGC,~~EAAOuB~~,~~cACtClD~~,GAEFF,GAAayB,EAAWzB,EAAWC,EAAe,KAIvD,OACE8B,EAAAC,~~cAACqB~~,EAAOC,OAAAC,OAAA,CAAA,~~EAAKzE~~,~~EAAO0E~~,aAAY,CAAEC,~~QAAS/C~~,~~EAAgBgD~~,yBAAuB,~~IAChF3B~~,EAAAC,cAAA,MAAA,CACErB,IAAKA,~~EACLgC~~,~~IAAK9C~~,GAAMK,EACC,aAAAO,EAAmB,EAAI,EAAC,gBACrBzB,EAAQ,aACXuB,GAAaL,EACzBL,~~GAAI8D~~,~~EAAY9D~~,EAAIhB,GACP,~~cAAA+E~~,EAAUC,EAAuBC,~~gBAAiBjF~~,GAC/~~D4D~~,aAAcA,EACdJ,QAASA,EACTK,UAAWA,EACXF,aAAcA,~~EACdzD~~,UAAW6C,EAAGC,~~EAAOkC~~,~~eAAgBhF~~,~~EAASiF~~,EAAAA,EAAAA,EAAAA,EAAA,CAAA,~~EAC3CnC~~,EAAOxB,SAAWA,GAClBwB,EAAOvB,SAAWA,GAClBuB,~~EAAOoC~~,~~OAASjF~~,GAChB6C,~~EAAOqC~~,~~cAAgBjF~~,~~IAE1BkF~~,MAAO,CAAEC,~~OAAQ5E~~,~~IAEhBuD~~,IAAuBE,IAIhC"}
1	+ {"version":3,"file":"ComboboxOption.js","sources":["../../../../../../src/components/Combobox/components/ComboboxOption/ComboboxOption.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { type RefObject, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { useIsOverflowing } from \"@vibe/hooks\";\nimport { keyCodes } from \"../../../../constants\";\nimport { getOptionId } from \"../../helpers\";\nimport { withStaticPropsWithoutForwardRef } from \"../../../../types\";\nimport {\n ComboboxOptionIconType as ComboboxOptionIconTypeEnum,\n type IComboboxOption,\n type IComboboxOptionEvents\n} from \"../ComboboxConstants\";\nimport { type ComboboxOptionIconType } from \"../../Combobox.types\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../../tests/test-ids-utils\";\nimport styles from \"./ComboboxOption.module.scss\";\n\nexport interface ComboboxOptionProps extends IComboboxOptionEvents {\n /*\n The index of the option in the list.\n /\n index?: number;\n /\n The option data containing label, icons, and other properties.\n /\n option?: IComboboxOption;\n /\n Class name applied to the option element.\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?: RefObject<HTMLElement>;\n /\n The amount of offset when scrolling to the active item.\n /\n scrollOffset?: number;\n /\n The height of each option.\n /\n optionLineHeight?: number;\n /\n If true, scrolls to the active option when it is selected.\n /\n shouldScrollWhenActive?: boolean;\n /\n Custom renderer for the option content.\n */\n optionRenderer?: (option: IComboboxOption) => JSX.Element;\n}\n\nconst ComboboxOption = ({\n index,\n option,\n className,\n isActive,\n visualFocus,\n scrollRef,\n scrollOffset = 100,\n onOptionClick,\n onOptionLeave,\n onOptionHover,\n optionLineHeight,\n shouldScrollWhenActive = true,\n optionRenderer = null\n}: ComboboxOptionProps) => {\n const {\n id,\n leftIcon,\n leftIconType,\n rightIcon,\n rightIconType,\n label,\n iconSize = 18,\n disabled,\n selected,\n ariaLabel,\n belongToCategory = false\n } = option;\n let { tooltipContent } = option;\n\n const ref = useRef(null);\n const labelRef = useRef();\n\n const isOptionOverflowing = useIsOverflowing({ ref: labelRef });\n\n useEffect(() => {\n const element = ref.current;\n if (visualFocus && element && shouldScrollWhenActive) {\n if (scrollRef?.current && element) {\n // not supported with virtualized atm, need their scrollRef (element with overflow-y auto that has the scroll)\n scrollRef.current.scrollTop = element.offsetTop - scrollOffset;\n } else {\n element?.scrollIntoView?.({ behaviour: \"smooth\" });\n }\n }\n }, [ref, visualFocus, shouldScrollWhenActive, scrollRef, scrollOffset, belongToCategory]);\n\n const renderIcon = (\n icon: SubIcon \| ((className: string) => JSX.Element),\n iconType: ComboboxOptionIconType,\n className: string\n ) => {\n if (iconType === \"renderer\") {\n return (icon as (className: string) => JSX.Element)(cx(styles.optionIcon, className));\n }\n\n return (\n <Icon\n className={cx(styles.optionIcon, className)}\n iconType=\"font\"\n icon={icon as SubIcon}\n iconSize={iconSize}\n ignoreFocusStyle\n />\n );\n };\n\n const onClick = useCallback(\n (event: React.MouseEvent) => {\n if (disabled) return;\n onOptionClick(event, index, option, true);\n },\n [index, option, onOptionClick, disabled]\n );\n\n const onMouseLeave = useCallback(\n (event: React.MouseEvent) => {\n if (disabled) return;\n onOptionLeave(event, index, option, true);\n },\n [index, option, onOptionLeave, disabled]\n );\n\n const onMouseEnter = useCallback(\n (event: React.MouseEvent) => {\n if (disabled) return;\n onOptionHover(event, index, option, true);\n },\n [index, option, onOptionHover, disabled]\n );\n\n const onKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === keyCodes.ENTER \|\| event.key === keyCodes.SPACE) {\n onOptionClick(event, index, option, false);\n }\n },\n [onOptionClick, index, option]\n );\n if (!tooltipContent) {\n tooltipContent = isOptionOverflowing ? label : null;\n }\n\n const optionRendererValue = useMemo(() => optionRenderer && optionRenderer(option), [optionRenderer, option]);\n\n const optionValue = (\n <>\n {leftIcon && renderIcon(leftIcon, leftIconType, styles.left)}\n <div ref={labelRef} className={cx(styles.optionLabel)}>\n {label}\n </div>\n {rightIcon && renderIcon(rightIcon, rightIconType, \"\")}\n </>\n );\n\n return (\n <Tooltip {...option.tooltipProps} content={tooltipContent} hideWhenReferenceHidden>\n <div\n ref={ref}\n key={id \|\| label}\n aria-level={belongToCategory ? 2 : 1}\n aria-selected={isActive}\n aria-label={ariaLabel \|\| label}\n id={getOptionId(id, index)}\n data-testid={getTestId(ComponentDefaultTestId.COMBOBOX_OPTION, index)}\n onMouseEnter={onMouseEnter}\n onClick={onClick}\n onKeyDown={onKeyDown}\n onMouseLeave={onMouseLeave}\n className={cx(styles.comboboxOption, className, {\n [styles.disabled]: disabled,\n [styles.selected]: selected,\n [styles.active]: isActive,\n [styles.activeOutline]: visualFocus\n })}\n style={{ height: optionLineHeight }}\n >\n {optionRendererValue \|\| optionValue}\n </div>\n </Tooltip>\n );\n};\n\ninterface ComboboxOptionStaticProps {\n iconTypes: typeof ComboboxOptionIconTypeEnum;\n}\n\nexport default withStaticPropsWithoutForwardRef<ComboboxOptionProps, ComboboxOptionStaticProps>(ComboboxOption, {\n iconTypes: ComboboxOptionIconTypeEnum\n});\n"],"names":["withStaticPropsWithoutForwardRef","_ref","index","option","className","isActive","visualFocus","scrollRef","_ref$scrollOffset","scrollOffset","onOptionClick","onOptionLeave","onOptionHover","optionLineHeight","_ref$shouldScrollWhen","shouldScrollWhenActive","_ref$optionRenderer","optionRenderer","id","leftIcon","leftIconType","rightIcon","rightIconType","label","_option$iconSize","iconSize","disabled","selected","ariaLabel","_option$belongToCateg","belongToCategory","tooltipContent","ref","useRef","labelRef","isOptionOverflowing","useIsOverflowing","useEffect","element","current","scrollTop","offsetTop","_a","scrollIntoView","call","behaviour","renderIcon","icon","iconType","cx","styles","optionIcon","React","createElement","Icon","ignoreFocusStyle","onClick","useCallback","event","onMouseLeave","onMouseEnter","onKeyDown","key","keyCodes","ENTER","SPACE","optionRendererValue","useMemo","optionValue","Fragment","left","optionLabel","Tooltip","Object","assign","tooltipProps","content","hideWhenReferenceHidden","getOptionId","getTestId","ComponentDefaultTestId","COMBOBOX_OPTION","comboboxOption","_defineProperty","active","activeOutline","style","height","iconTypes","ComboboxOptionIconTypeEnum"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var o={comboboxOption:"comboboxOption_7c57c5165a",disabled:"disabled_89ec7743e3",selected:"selected_9a3cc76b71",active:"active_b4406a56fe",activeOutline:"activeOutline_b55fb35b3c",optionLabel:"optionLabel_af0e151421",optionIcon:"optionIcon_cc926cc209",left:"left_ba01ece5c4"};!function(o){const e="s_id-cc5db5fd586e_3_85_1";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+e))return;const c=document.createElement("style");c.id=e,n.firstChild?n.insertBefore(c,n.firstChild):n.appendChild(c),c.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=o)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.comboboxOption_7c57c5165a {\n  padding: 8px;\n  width: 100%;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  cursor: pointer;\n  user-select: none;\n}\n.comboboxOption_7c57c5165a.disabled_89ec7743e3 {\n  cursor: not-allowed;\n  border-color: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n}\n.comboboxOption_7c57c5165a.disabled_89ec7743e3:hover {\n  background-color: transparent;\n}\n.comboboxOption_7c57c5165a.selected_9a3cc76b71 {\n  background-color: var(--primary-selected-color);\n}\n.comboboxOption_7c57c5165a:hover:not(.disabled_89ec7743e3):not(.selected_9a3cc76b71),\n.comboboxOption_7c57c5165a.active_b4406a56fe {\n  color: var(--primary-text-color);\n  background-color: var(--primary-background-hover-color);\n  position: relative;\n}\n.comboboxOption_7c57c5165a.activeOutline_b55fb35b3c {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n  background-color: var(--secondary-background-color);\n}\n.comboboxOption_7c57c5165a .optionLabel_af0e151421 {\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.comboboxOption_7c57c5165a .optionIcon_cc926cc209 {\n  flex: 0 0 auto;\n}\n.comboboxOption_7c57c5165a .optionIcon_cc926cc209.left_ba01ece5c4 {\n  margin-right: 4px;\n}");export{o as default};
+var o={comboboxOption:"comboboxOption_8bb7f5c6dc",disabled:"disabled_60052cf004",selected:"selected_0fdb75c069",active:"active_1018982479",activeOutline:"activeOutline_dd12b4f396",optionLabel:"optionLabel_2f2a55610e",optionIcon:"optionIcon_feff2ab7df",left:"left_0e1030b27c"};!function(o){const e="s_id-cc5db5fd586e_3_87_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+e))return;const c=document.createElement("style");c.id=e,n.firstChild?n.insertBefore(c,n.firstChild):n.appendChild(c),c.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=o)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.comboboxOption_8bb7f5c6dc {\n  padding: 8px;\n  width: 100%;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  cursor: pointer;\n  user-select: none;\n}\n.comboboxOption_8bb7f5c6dc.disabled_60052cf004 {\n  cursor: not-allowed;\n  border-color: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n}\n.comboboxOption_8bb7f5c6dc.disabled_60052cf004:hover {\n  background-color: transparent;\n}\n.comboboxOption_8bb7f5c6dc.selected_0fdb75c069 {\n  background-color: var(--primary-selected-color);\n}\n.comboboxOption_8bb7f5c6dc:hover:not(.disabled_60052cf004):not(.selected_0fdb75c069),\n.comboboxOption_8bb7f5c6dc.active_1018982479 {\n  color: var(--primary-text-color);\n  background-color: var(--primary-background-hover-color);\n  position: relative;\n}\n.comboboxOption_8bb7f5c6dc.activeOutline_dd12b4f396 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n  background-color: var(--secondary-background-color);\n}\n.comboboxOption_8bb7f5c6dc .optionLabel_2f2a55610e {\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.comboboxOption_8bb7f5c6dc .optionIcon_feff2ab7df {\n  flex: 0 0 auto;\n}\n.comboboxOption_8bb7f5c6dc .optionIcon_feff2ab7df.left_0e1030b27c {\n  margin-right: 4px;\n}");export{o as default};
 //# sourceMappingURL=ComboboxOption.module.scss.js.map

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

@@ -1,2 +1,2 @@
-var e={stickyCategoryHeader:"stickyCategoryHeader_515c3b3016"};!function(e){const t="s_id-f549b49034f1_3_85_1";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const d=document.createElement("style");d.id=t,n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".stickyCategoryHeader_515c3b3016 {\n  position: absolute;\n  z-index: 10;\n  width: calc(100% - 12px);\n  background-color: var(--primary-background-color);\n  padding-block: 10px var(--spacing-xs);\n  display: flex;\n  align-items: center;\n}");export{e as default};
+var e={stickyCategoryHeader:"stickyCategoryHeader_50180d6fde"};!function(e){const t="s_id-f549b49034f1_3_87_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const d=document.createElement("style");d.id=t,n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".stickyCategoryHeader_50180d6fde {\n  position: absolute;\n  z-index: 10;\n  width: calc(100% - 12px);\n  background-color: var(--primary-background-color);\n  padding-block: 10px var(--spacing-xs);\n  display: flex;\n  align-items: center;\n}");export{e as default};
 //# sourceMappingURL=StickyCategoryHeader.module.scss.js.map

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

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as i}from"es-toolkit";import{getStyle as o}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as r,ComponentDefaultTestId as n}from"../../tests/testIds.js";import a from"classnames";import s,{useState as l,useRef as d,useCallback as c,useEffect as m,useMemo as u}from"react";import{SwitchTransition as f,CSSTransition as v}from"react-transition-group";import p from"../../hooks/useEventListener/index.js";import E from"../../hooks/useAfterFirstRender/index.js";import{NOOP as b}from"../../utils/function-utils.js";import x from"./Counter.module.scss.js";import{ComponentVibeId as N}from"../../tests/constants.js";var j=function(j){var A=j.className,k=j.counterClassName,y=j.count,g=void 0===y?0:y,h=j.size,C=void 0===h?"large":h,L=j.kind,M=void 0===L?"fill":L,R=j.color,w=void 0===R?"primary":R,T=j.maxDigits,D=void 0===T?3:T,O=j.ariaLabeledBy,U=void 0===O?"":O,z=j.ariaLabel,B=void 0===z?"":z,H=j.id,P=void 0===H?"":H,_=j.prefix,F=void 0===_?"":_,I=j.onMouseDown,q=void 0===I?b:I,G=j.noAnimation,J=void 0!==G&&G,K=j["data-testid"],Q=l(!1),S=e(Q,2),V=S[0],W=S[1],X=d(null),Y=d(null),Z=c((function(){W(!0)}),[W]),$=c((function(){W(!1)}),[W]);p({eventName:"animationend",callback:$,ref:X});var ee=E();m((function(){ee.current&&Z()}),[g,ee,Z]),m((function(){D>0||console.error("Max digits must be a positive number")}),[D]);var te=u((function(){return a(x.counter,o(x,i("size-"+C)),o(x,i("kind-"+M)),o(x,i("color-"+w)),t({},x.withAnimation,V),k)}),[C,M,w,V,k]),ie="counter"+(P?"-".concat(P):""),oe=(null==g?void 0:(""+g).length)>D?"".concat(Math.pow(10,D)-1,"+"):g+"",re=s.createElement("span",{id:ie,"data-testid":K||r(n.COUNTER,P)},F+oe);return s.createElement("span",{className:A,"aria-label":"".concat(B," ").concat(oe),"aria-labelledby":U,onMouseDown:q,"data-vibe":N.COUNTER},s.createElement("div",{className:te,"aria-label":oe,ref:X},J?re:s.createElement(f,{mode:"out-in"},s.createElement(v,{key:oe,nodeRef:Y,classNames:{enter:x.fadeEnter,enterActive:x.fadeEnterActive,exit:x.fadeExit,exitActive:x.fadeExitActive},addEndListener:function(e){var t;null===(t=Y.current)||void 0===t||t.addEventListener("transitionend",e,!1)}},s.createElement("span",{ref:Y,id:ie,"data-testid":K||r(n.COUNTER,P)},F+oe)))))};export{j as default};
+import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as o}from"es-toolkit";import{getStyle as i}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as r,ComponentDefaultTestId as n}from"../../tests/testIds.js";import a from"classnames";import s,{useState as l,useRef as d,useCallback as m,useEffect as c,useMemo as u}from"react";import{SwitchTransition as f,CSSTransition as p}from"react-transition-group";import v from"../../hooks/useEventListener/index.js";import E from"../../hooks/useAfterFirstRender/index.js";import{NOOP as b}from"../../utils/function-utils.js";import{CounterSize as j,CounterColor as x,CounterType as N}from"./CounterConstants.js";import{withStaticPropsWithoutForwardRef as k}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import y from"./Counter.module.scss.js";import{ComponentVibeId as A}from"../../tests/constants.js";var C=k((function(j){var x=j.className,N=j.counterClassName,k=j.count,C=void 0===k?0:k,h=j.size,g=void 0===h?"large":h,w=j.kind,L=void 0===w?"fill":w,M=j.color,R=void 0===M?"primary":M,T=j.maxDigits,z=void 0===T?3:T,D=j.ariaLabeledBy,O=void 0===D?"":D,P=j.ariaLabel,U=void 0===P?"":P,B=j.id,H=void 0===B?"":B,_=j.prefix,F=void 0===_?"":_,I=j.onMouseDown,S=void 0===I?b:I,q=j.noAnimation,G=void 0!==q&&q,J=j["data-testid"],K=l(!1),Q=e(K,2),V=Q[0],W=Q[1],X=d(null),Y=d(null),Z=m((function(){W(!0)}),[W]),$=m((function(){W(!1)}),[W]);v({eventName:"animationend",callback:$,ref:X});var ee=E();c((function(){ee.current&&Z()}),[C,ee,Z]),c((function(){z>0||console.error("Max digits must be a positive number")}),[z]);var te=u((function(){return a(y.counter,i(y,o("size-"+g)),i(y,o("kind-"+L)),i(y,o("color-"+R)),t({},y.withAnimation,V),N)}),[g,L,R,V,N]),oe="counter"+(H?"-".concat(H):""),ie=(null==C?void 0:(""+C).length)>z?"".concat(Math.pow(10,z)-1,"+"):C+"",re=s.createElement("span",{id:oe,"data-testid":J||r(n.COUNTER,H)},F+ie);return s.createElement("span",{className:x,"aria-label":"".concat(U," ").concat(ie),"aria-labelledby":O,onMouseDown:S,"data-vibe":A.COUNTER},s.createElement("div",{className:te,"aria-label":ie,ref:X},G?re:s.createElement(f,{mode:"out-in"},s.createElement(p,{key:ie,nodeRef:Y,classNames:{enter:y.fadeEnter,enterActive:y.fadeEnterActive,exit:y.fadeExit,exitActive:y.fadeExitActive},addEndListener:function(e){var t;null===(t=Y.current)||void 0===t||t.addEventListener("transitionend",e,!1)}},s.createElement("span",{ref:Y,id:oe,"data-testid":J||r(n.COUNTER,H)},F+ie)))))}),{sizes:j,colors:x,kinds:N});export{C as default};
 //# sourceMappingURL=Counter.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Counter.js","sources":["../../../../src/components/Counter/Counter.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { CSSTransition, SwitchTransition } from \"react-transition-group\";\nimport useEventListener from \"../../hooks/useEventListener\";\nimport useAfterFirstRender from \"../../hooks/useAfterFirstRender\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { type CounterColor, type CounterSize, type CounterType } from \"./Counter.types\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./Counter.module.scss\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface CounterProps extends VibeComponentProps {\n /*\n The ID of the element describing the counter.\n /\n ariaLabeledBy?: string;\n /\n Class name applied to the counter element.\n /\n counterClassName?: string;\n /\n The numeric value displayed in the counter.\n /\n count?: number;\n /\n The label of the counter for accessibility.\n /\n ariaLabel?: string;\n /\n The size of the counter.\n /\n size?: CounterSize;\n /\n The visual style of the counter.\n /\n kind?: CounterType;\n /\n The color of the counter.\n /\n color?: CounterColor;\n /\n The maximum number of digits displayed before truncation.\n /\n maxDigits?: number;\n /\n Text prepended to the counter value.\n /\n prefix?: string;\n /\n Callback fired when the counter is clicked.\n /\n onMouseDown?: (event: React.MouseEvent<HTMLSpanElement>) => void;\n /\n If true, disables counter animations.\n /\n noAnimation?: boolean;\n}\n\nconst Counter = ({\n className,\n counterClassName,\n count = 0,\n size = \"large\",\n kind = \"fill\",\n color = \"primary\",\n maxDigits = 3,\n ariaLabeledBy = \"\",\n ariaLabel = \"\",\n id = \"\",\n prefix = \"\",\n onMouseDown = NOOP,\n noAnimation = false,\n \"data-testid\": dataTestId\n}: CounterProps) => {\n const [countChangeAnimationState, setCountChangeAnimationState] = useState(false);\n\n const ref = useRef<HTMLDivElement>(null);\n const nodeRef = useRef<HTMLSpanElement>(null);\n\n const setCountChangedAnimationActive = useCallback(() => {\n setCountChangeAnimationState(true);\n }, [setCountChangeAnimationState]);\n\n const setCountChangedAnimationNotActive = useCallback(() => {\n setCountChangeAnimationState(false);\n }, [setCountChangeAnimationState]);\n\n useEventListener({\n eventName: \"animationend\",\n callback: setCountChangedAnimationNotActive,\n ref\n });\n\n const isAfterFirstRender = useAfterFirstRender();\n\n useEffect(() => {\n if (isAfterFirstRender.current) {\n setCountChangedAnimationActive();\n }\n }, [count, isAfterFirstRender, setCountChangedAnimationActive]);\n\n useEffect(() => {\n if (maxDigits <= 0) {\n console.error(\"Max digits must be a positive number\");\n }\n }, [maxDigits]);\n\n const classNames = useMemo(() => {\n return cx(\n styles.counter,\n getStyle(styles, camelCase(\"size-\" + size)),\n getStyle(styles, camelCase(\"kind-\" + kind)),\n getStyle(styles, camelCase(\"color-\" + color)),\n {\n [styles.withAnimation]: countChangeAnimationState\n },\n counterClassName\n );\n }, [size, kind, color, countChangeAnimationState, counterClassName]);\n\n const counterId = \"counter\" + (id ? `-${id}` : \"\");\n const countText = count?.toString().length > maxDigits ? `${10 * maxDigits - 1}+` : String(count);\n const counter = (\n <span id={counterId} data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.COUNTER, id)}>\n {prefix + countText}\n </span>\n );\n\n return (\n <span\n className={className}\n aria-label={`${ariaLabel} ${countText}`}\n aria-labelledby={ariaLabeledBy}\n onMouseDown={onMouseDown}\n data-vibe={ComponentVibeId.COUNTER}\n >\n <div className={classNames} aria-label={countText} ref={ref}>\n {noAnimation ? (\n counter\n ) : (\n <SwitchTransition mode=\"out-in\">\n <CSSTransition\n key={countText}\n nodeRef={nodeRef}\n classNames={{\n enter: styles.fadeEnter,\n enterActive: styles.fadeEnterActive,\n exit: styles.fadeExit,\n exitActive: styles.fadeExitActive\n }}\n addEndListener={done => {\n nodeRef.current?.addEventListener(\"transitionend\", done, false);\n }}\n >\n <span\n ref={nodeRef}\n id={counterId}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.COUNTER, id)}\n >\n {prefix + countText}\n </span>\n </CSSTransition>\n </SwitchTransition>\n )}\n </div>\n </span>\n );\n};\n\nexport default Counter;\n"],"names":["~~Counter~~","_ref","className","counterClassName","_ref$count","count","_ref$size","size","_ref$kind","kind","_ref$color","color","_ref$maxDigits","maxDigits","_ref$ariaLabeledBy","ariaLabeledBy","_ref$ariaLabel","ariaLabel","_ref$id","id","_ref$prefix","prefix","_ref$onMouseDown","onMouseDown","NOOP","_ref$noAnimation","noAnimation","dataTestId","_useState","useState","_useState2","_slicedToArray","countChangeAnimationState","setCountChangeAnimationState","ref","useRef","nodeRef","setCountChangedAnimationActive","useCallback","setCountChangedAnimationNotActive","useEventListener","eventName","callback","isAfterFirstRender","useAfterFirstRender","useEffect","current","console","error","classNames","useMemo","cx","styles","counter","getStyle","camelCase","_defineProperty","withAnimation","counterId","concat","countText","length","Math","pow","String","React","createElement","getTestId","ComponentDefaultTestId","COUNTER","ComponentVibeId","SwitchTransition","mode","CSSTransition","key","enter","fadeEnter","enterActive","fadeEnterActive","exit","fadeExit","exitActive","fadeExitActive","addEndListener","done","_a","addEventListener"],"mappings":"~~wuBA6DA~~,~~IAAMA~~,~~EAAU~~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"}
1	+ {"version":3,"file":"Counter.js","sources":["../../../../src/components/Counter/Counter.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { CSSTransition, SwitchTransition } from \"react-transition-group\";\nimport useEventListener from \"../../hooks/useEventListener\";\nimport useAfterFirstRender from \"../../hooks/useAfterFirstRender\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport {\n CounterColor as CounterColorEnum,\n CounterSize as CounterSizeEnum,\n CounterType as CounterTypeEnum\n} from \"./CounterConstants\";\nimport { type CounterColor, type CounterSize, type CounterType } from \"./Counter.types\";\nimport { type VibeComponentProps, withStaticPropsWithoutForwardRef } from \"../../types\";\nimport styles from \"./Counter.module.scss\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface CounterProps extends VibeComponentProps {\n /*\n The ID of the element describing the counter.\n /\n ariaLabeledBy?: string;\n /\n Class name applied to the counter element.\n /\n counterClassName?: string;\n /\n The numeric value displayed in the counter.\n /\n count?: number;\n /\n The label of the counter for accessibility.\n /\n ariaLabel?: string;\n /\n The size of the counter.\n /\n size?: CounterSize;\n /\n The visual style of the counter.\n /\n kind?: CounterType;\n /\n The color of the counter.\n /\n color?: CounterColor;\n /\n The maximum number of digits displayed before truncation.\n /\n maxDigits?: number;\n /\n Text prepended to the counter value.\n /\n prefix?: string;\n /\n Callback fired when the counter is clicked.\n /\n onMouseDown?: (event: React.MouseEvent<HTMLSpanElement>) => void;\n /\n If true, disables counter animations.\n /\n noAnimation?: boolean;\n}\n\nconst Counter = ({\n className,\n counterClassName,\n count = 0,\n size = \"large\",\n kind = \"fill\",\n color = \"primary\",\n maxDigits = 3,\n ariaLabeledBy = \"\",\n ariaLabel = \"\",\n id = \"\",\n prefix = \"\",\n onMouseDown = NOOP,\n noAnimation = false,\n \"data-testid\": dataTestId\n}: CounterProps) => {\n const [countChangeAnimationState, setCountChangeAnimationState] = useState(false);\n\n const ref = useRef<HTMLDivElement>(null);\n const nodeRef = useRef<HTMLSpanElement>(null);\n\n const setCountChangedAnimationActive = useCallback(() => {\n setCountChangeAnimationState(true);\n }, [setCountChangeAnimationState]);\n\n const setCountChangedAnimationNotActive = useCallback(() => {\n setCountChangeAnimationState(false);\n }, [setCountChangeAnimationState]);\n\n useEventListener({\n eventName: \"animationend\",\n callback: setCountChangedAnimationNotActive,\n ref\n });\n\n const isAfterFirstRender = useAfterFirstRender();\n\n useEffect(() => {\n if (isAfterFirstRender.current) {\n setCountChangedAnimationActive();\n }\n }, [count, isAfterFirstRender, setCountChangedAnimationActive]);\n\n useEffect(() => {\n if (maxDigits <= 0) {\n console.error(\"Max digits must be a positive number\");\n }\n }, [maxDigits]);\n\n const classNames = useMemo(() => {\n return cx(\n styles.counter,\n getStyle(styles, camelCase(\"size-\" + size)),\n getStyle(styles, camelCase(\"kind-\" + kind)),\n getStyle(styles, camelCase(\"color-\" + color)),\n {\n [styles.withAnimation]: countChangeAnimationState\n },\n counterClassName\n );\n }, [size, kind, color, countChangeAnimationState, counterClassName]);\n\n const counterId = \"counter\" + (id ? `-${id}` : \"\");\n const countText = count?.toString().length > maxDigits ? `${10 * maxDigits - 1}+` : String(count);\n const counter = (\n <span id={counterId} data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.COUNTER, id)}>\n {prefix + countText}\n </span>\n );\n\n return (\n <span\n className={className}\n aria-label={`${ariaLabel} ${countText}`}\n aria-labelledby={ariaLabeledBy}\n onMouseDown={onMouseDown}\n data-vibe={ComponentVibeId.COUNTER}\n >\n <div className={classNames} aria-label={countText} ref={ref}>\n {noAnimation ? (\n counter\n ) : (\n <SwitchTransition mode=\"out-in\">\n <CSSTransition\n key={countText}\n nodeRef={nodeRef}\n classNames={{\n enter: styles.fadeEnter,\n enterActive: styles.fadeEnterActive,\n exit: styles.fadeExit,\n exitActive: styles.fadeExitActive\n }}\n addEndListener={done => {\n nodeRef.current?.addEventListener(\"transitionend\", done, false);\n }}\n >\n <span\n ref={nodeRef}\n id={counterId}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.COUNTER, id)}\n >\n {prefix + countText}\n </span>\n </CSSTransition>\n </SwitchTransition>\n )}\n </div>\n </span>\n );\n};\n\ninterface CounterStaticProps {\n sizes: typeof CounterSizeEnum;\n colors: typeof CounterColorEnum;\n kinds: typeof CounterTypeEnum;\n}\n\nexport default withStaticPropsWithoutForwardRef<CounterProps, CounterStaticProps>(Counter, {\n sizes: CounterSizeEnum,\n colors: CounterColorEnum,\n kinds: CounterTypeEnum\n});\n"],"names":["withStaticPropsWithoutForwardRef","_ref","className","counterClassName","_ref$count","count","_ref$size","size","_ref$kind","kind","_ref$color","color","_ref$maxDigits","maxDigits","_ref$ariaLabeledBy","ariaLabeledBy","_ref$ariaLabel","ariaLabel","_ref$id","id","_ref$prefix","prefix","_ref$onMouseDown","onMouseDown","NOOP","_ref$noAnimation","noAnimation","dataTestId","_useState","useState","_useState2","_slicedToArray","countChangeAnimationState","setCountChangeAnimationState","ref","useRef","nodeRef","setCountChangedAnimationActive","useCallback","setCountChangedAnimationNotActive","useEventListener","eventName","callback","isAfterFirstRender","useAfterFirstRender","useEffect","current","console","error","classNames","useMemo","cx","styles","counter","getStyle","camelCase","_defineProperty","withAnimation","counterId","concat","countText","length","Math","pow","String","React","createElement","getTestId","ComponentDefaultTestId","COUNTER","ComponentVibeId","SwitchTransition","mode","CSSTransition","key","enter","fadeEnter","enterActive","fadeEnterActive","exit","fadeExit","exitActive","fadeExitActive","addEndListener","done","_a","addEventListener","sizes","CounterSizeEnum","colors","CounterColorEnum","kinds","CounterTypeEnum"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var n={counter:"counter_aab3629b5f",withAnimation:"withAnimation_000dd0c628",counterPopElastic:"counterPopElastic_505a247662",sizeXs:"sizeXs_0d3dae8434",sizeSmall:"sizeSmall_92b60c3e50",sizeLarge:"sizeLarge_eb40cbee58",kindFill:"kindFill_9cd64ae6e1",colorPrimary:"colorPrimary_6c9468fbc5",colorDark:"colorDark_c0c460a8d6",colorNegative:"colorNegative_bcd7b97b5a",colorLight:"colorLight_4d72dff260",kindLine:"kindLine_0cf7f11496",fadeEnter:"fadeEnter_820c081ece",fadeEnterActive:"fadeEnterActive_61aa34a6ec",fadeExit:"fadeExit_e6827b0ca2",fadeExitActive:"fadeExitActive_e4ca4656fc","counter-pop-elastic":"counter-pop-elastic_51f45519ca"};!function(n){const o="s_id-51f4f5079107_3_85_1";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+o))return;const t=document.createElement("style");t.id=o,e.firstChild?e.insertBefore(t,e.firstChild):e.appendChild(t),t.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n.counter_aab3629b5f {\n  display: inline-flex;\n  justify-content: center;\n  border-radius: 30px;\n  overflow: hidden;\n  transform-origin: center;\n}\n@keyframes counter-pop-elastic_51f45519ca {\n  0% {\n    transform: scale(1);\n  }\n  33% {\n    transform: scale(1.2);\n  }\n  66% {\n    transform: scale(0.9);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n.withAnimation_000dd0c628 {\n  animation: counterPopElastic_505a247662 var(--motion-expressive-short);\n}\n.sizeXs_0d3dae8434 {\n  font: var(--font-text3-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  min-width: 18px;\n  line-height: 18px;\n  padding: 0 var(--spacing-small);\n}\n.sizeSmall_92b60c3e50 {\n  font: var(--font-text2-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  min-width: 18px;\n  line-height: 18px;\n  padding: 0 var(--spacing-small);\n}\n.sizeLarge_eb40cbee58 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  min-width: 24px;\n  padding: 2px var(--spacing-small);\n}\n.kindFill_9cd64ae6e1.colorPrimary_6c9468fbc5 {\n  color: var(--fixed-light-color);\n  background-color: var(--primary-color);\n}\n.kindFill_9cd64ae6e1.colorDark_c0c460a8d6 {\n  color: var(--text-color-on-inverted);\n  background-color: var(--inverted-color-background);\n}\n.kindFill_9cd64ae6e1.colorNegative_bcd7b97b5a {\n  color: var(--fixed-light-color);\n  background-color: var(--negative-color);\n}\n.kindFill_9cd64ae6e1.colorLight_4d72dff260 {\n  color: var(--primary-text-color);\n  background-color: var(--ui-background-color);\n}\n.kindLine_0cf7f11496 {\n  box-shadow: 0 0 0 1px currentColor inset;\n}\n.kindLine_0cf7f11496.colorPrimary_6c9468fbc5 {\n  color: var(--primary-color);\n}\n.kindLine_0cf7f11496.colorDark_c0c460a8d6 {\n  color: var(--inverted-color-background);\n}\n.kindLine_0cf7f11496.colorNegative_bcd7b97b5a {\n  color: var(--negative-color);\n}\n.kindLine_0cf7f11496.colorLight_4d72dff260 {\n  color: var(--primary-text-color);\n  box-shadow: 0 0 0 1px var(--ui-background-color) inset !important;\n}\n/* New number enters */\n.fadeEnter_820c081ece {\n  opacity: 0;\n  transform: translateY(15px);\n}\n.fadeEnterActive_61aa34a6ec {\n  position: relative;\n  opacity: 1;\n  transition: transform var(--motion-productive-long) var(--motion-timing-enter), opacity var(--motion-productive-short);\n  transform: translateY(0);\n}\n/* Old number exits */\n.fadeExit_e6827b0ca2 {\n  position: relative;\n  opacity: 1;\n  transform: translateY(0);\n}\n.fadeExitActive_e4ca4656fc {\n  position: relative;\n  opacity: 0;\n  transform: translateY(-15px);\n  transition: transform var(--motion-productive-long) var(--motion-timing-exit), opacity var(--motion-productive-short);\n}");export{n as default};
+var n={counter:"counter_59a5eac6e7",withAnimation:"withAnimation_ed1262f985",counterPopElastic:"counterPopElastic_771d2e8793",sizeXs:"sizeXs_f66a7bc381",sizeSmall:"sizeSmall_6275910cbb",sizeLarge:"sizeLarge_f896db890f",kindFill:"kindFill_c0dd1fb539",colorPrimary:"colorPrimary_d1b204fcac",colorDark:"colorDark_0745edd01c",colorNegative:"colorNegative_9767d9970f",colorLight:"colorLight_92a75eb7f3",kindLine:"kindLine_d5f5add030",fadeEnter:"fadeEnter_a6a2ff02a2",fadeEnterActive:"fadeEnterActive_1457094c45",fadeExit:"fadeExit_1d4929bc13",fadeExitActive:"fadeExitActive_aad0d4dcd0","counter-pop-elastic":"counter-pop-elastic_9f1622d6d9"};!function(n){const o="s_id-51f4f5079107_3_87_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+o))return;const e=document.createElement("style");e.id=o,t.firstChild?t.insertBefore(e,t.firstChild):t.appendChild(e),e.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n.counter_59a5eac6e7 {\n  display: inline-flex;\n  justify-content: center;\n  border-radius: 30px;\n  overflow: hidden;\n  transform-origin: center;\n}\n@keyframes counter-pop-elastic_9f1622d6d9 {\n  0% {\n    transform: scale(1);\n  }\n  33% {\n    transform: scale(1.2);\n  }\n  66% {\n    transform: scale(0.9);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n.withAnimation_ed1262f985 {\n  animation: counterPopElastic_771d2e8793 var(--motion-expressive-short);\n}\n.sizeXs_f66a7bc381 {\n  font: var(--font-text3-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  min-width: 18px;\n  line-height: 18px;\n  padding: 0 var(--spacing-small);\n}\n.sizeSmall_6275910cbb {\n  font: var(--font-text2-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  min-width: 18px;\n  line-height: 18px;\n  padding: 0 var(--spacing-small);\n}\n.sizeLarge_f896db890f {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  min-width: 24px;\n  padding: 2px var(--spacing-small);\n}\n.kindFill_c0dd1fb539.colorPrimary_d1b204fcac {\n  color: var(--fixed-light-color);\n  background-color: var(--primary-color);\n}\n.kindFill_c0dd1fb539.colorDark_0745edd01c {\n  color: var(--text-color-on-inverted);\n  background-color: var(--inverted-color-background);\n}\n.kindFill_c0dd1fb539.colorNegative_9767d9970f {\n  color: var(--fixed-light-color);\n  background-color: var(--negative-color);\n}\n.kindFill_c0dd1fb539.colorLight_92a75eb7f3 {\n  color: var(--primary-text-color);\n  background-color: var(--ui-background-color);\n}\n.kindLine_d5f5add030 {\n  box-shadow: 0 0 0 1px currentColor inset;\n}\n.kindLine_d5f5add030.colorPrimary_d1b204fcac {\n  color: var(--primary-color);\n}\n.kindLine_d5f5add030.colorDark_0745edd01c {\n  color: var(--inverted-color-background);\n}\n.kindLine_d5f5add030.colorNegative_9767d9970f {\n  color: var(--negative-color);\n}\n.kindLine_d5f5add030.colorLight_92a75eb7f3 {\n  color: var(--primary-text-color);\n  box-shadow: 0 0 0 1px var(--ui-background-color) inset !important;\n}\n/* New number enters */\n.fadeEnter_a6a2ff02a2 {\n  opacity: 0;\n  transform: translateY(15px);\n}\n.fadeEnterActive_1457094c45 {\n  position: relative;\n  opacity: 1;\n  transition: transform var(--motion-productive-long) var(--motion-timing-enter), opacity var(--motion-productive-short);\n  transform: translateY(0);\n}\n/* Old number exits */\n.fadeExit_1d4929bc13 {\n  position: relative;\n  opacity: 1;\n  transform: translateY(0);\n}\n.fadeExitActive_aad0d4dcd0 {\n  position: relative;\n  opacity: 0;\n  transform: translateY(-15px);\n  transition: transform var(--motion-productive-long) var(--motion-timing-exit), opacity var(--motion-productive-short);\n}");export{n as default};
 //# sourceMappingURL=Counter.module.scss.js.map

package/dist/src/components/Counter/CounterConstants.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ var i,n,l;!function(i){i.FILL="fill",i.LINE="line"}(i\|\|(i={})),function(i){i.PRIMARY="primary",i.DARK="dark",i.NEGATIVE="negative",i.LIGHT="light"}(n\|\|(n={})),function(i){i.XS="xs",i.SMALL="small",i.LARGE="large"}(l\|\|(l={}));export{n as CounterColor,l as CounterSize,i as CounterType};
2	+ //# sourceMappingURL=CounterConstants.js.map

package/dist/src/components/Counter/CounterConstants.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CounterConstants.js","sources":["../../../../src/components/Counter/CounterConstants.ts"],"sourcesContent":["/**\n * @deprecated\n */\nexport enum CounterType {\n FILL = \"fill\",\n LINE = \"line\"\n}\n\n/**\n * @deprecated\n */\nexport enum CounterColor {\n PRIMARY = \"primary\",\n DARK = \"dark\",\n NEGATIVE = \"negative\",\n LIGHT = \"light\"\n}\n\n/**\n * @deprecated\n */\nexport enum CounterSize {\n XS = \"xs\",\n SMALL = \"small\",\n LARGE = \"large\"\n}\n"],"names":["CounterType","CounterColor","CounterSize"],"mappings":"IAGYA,EAQAC,EAUAC,GAlBZ,SAAYF,GACVA,EAAA,KAAA,OACAA,EAAA,KAAA,MACD,CAHD,CAAYA,IAAAA,EAGX,CAAA,IAKD,SAAYC,GACVA,EAAA,QAAA,UACAA,EAAA,KAAA,OACAA,EAAA,SAAA,WACAA,EAAA,MAAA,OACD,CALD,CAAYA,IAAAA,EAKX,CAAA,IAKD,SAAYC,GACVA,EAAA,GAAA,KACAA,EAAA,MAAA,QACAA,EAAA,MAAA,OACD,CAJD,CAAYA,IAAAA,EAIX,CAAA"}

package/dist/src/components/DatePicker/DateNavigationItem/DateNavigationItem.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import t from"react";import o from"./DateNavigationItem.module.scss.js";import e from"../../../../components/icon/dist/Icon/Icon.js";import n from"../../../../icons/dist/react/MoveArrowLeft.js";import r from"../../../../icons/dist/react/MoveArrowRight.js";var i={prev:n,next:r},c=function(n){var r=n.onClick;return t.createElement("button",{type:"button",className:o.navigationItemContainer,onClick:function(){return r&&r()}},t.createElement(e,{iconType:"svg",icon:i[n.kind],iconSize:24}))};export{c as default};
2	+ //# sourceMappingURL=DateNavigationItem.js.map

package/dist/src/components/DatePicker/DateNavigationItem/DateNavigationItem.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DateNavigationItem.js","sources":["../../../../../src/components/DatePicker/DateNavigationItem/DateNavigationItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@vibe/icon\";\nimport { MoveArrowLeft, MoveArrowRight } from \"@vibe/icons\";\nimport styles from \"./DateNavigationItem.module.scss\";\n\nconst ICONS = {\n prev: MoveArrowLeft,\n next: MoveArrowRight\n};\n\nexport interface DateNavigationItemProps {\n /**\n * The type of navigation button.\n */\n kind: keyof typeof ICONS;\n /**\n * Callback fired when the button is clicked.\n */\n onClick?: () => void;\n}\n\nconst DateNavigationItem = ({ kind, onClick }: DateNavigationItemProps) => {\n return (\n <button type=\"button\" className={styles.navigationItemContainer} onClick={() => onClick && onClick()}>\n <Icon iconType=\"svg\" icon={ICONS[kind]} iconSize={24} />\n </button>\n );\n};\n\nexport default DateNavigationItem;\n"],"names":["ICONS","prev","MoveArrowLeft","next","MoveArrowRight","DateNavigationItem","_ref","onClick","React","type","className","styles","navigationItemContainer","createElement","Icon","iconType","icon","kind","iconSize"],"mappings":"gQAKA,IAAMA,EAAQ,CACZC,KAAMC,EACNC,KAAMC,GAcFC,EAAqB,SAAHC,GAAkD,IAAtCC,EAAOD,EAAPC,QAClC,OACEC,0BAAQC,KAAK,SAASC,UAAWC,EAAOC,wBAAyBL,QAAS,WAAA,OAAMA,GAAWA,GAAS,GAClGC,EAAAK,cAACC,EAAK,CAAAC,SAAS,MAAMC,KAAMhB,EAHCM,EAAJW,MAGgBC,SAAU,KAGxD"}

package/dist/src/components/DatePicker/DateNavigationItem/DateNavigationItem.module.scss.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ var e={navigationItemContainer:"navigationItemContainer_684838d08d"};!function(e){const n="s_id-84193b4fa4fe_3_87_0";if("undefined"!=typeof document){const t=document.head\|\|document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const o=document.createElement("style");o.id=n,t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".navigationItemContainer_684838d08d {\n line-height: 36px;\n font-size: 28px;\n color: var(--icon-color);\n border: none;\n padding: 0;\n margin: 0;\n background: none;\n cursor: pointer;\n}");export{e as default};
2	+ //# sourceMappingURL=DateNavigationItem.module.scss.js.map

package/dist/src/components/DatePicker/DateNavigationItem/DateNavigationItem.module.scss.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"DateNavigationItem.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -1,2 +1,2 @@
-import{defineProperty as e,slicedToArray as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import a,{useMemo as r,useState as n,useRef as o,useEffect as i,useCallback as d,createContext as s}from"react";import l from"classnames";import{InternalModifier as c,DayPicker as u}from"react-day-picker";import m from"./DatePicker.module.scss.js";import f from"./DatePickerHeader.js";import{AddToRangeMiddle as k,AddToRangeStart as v,RemoveFromRange as D,HoveredDayExists as g,AddToRangeEnd as y,HalfRangeSelected as P,addToRange as b,addToRangeModifiers as p}from"./utils.js";import{RangeDayContent as h}from"./RangeDayContent.js";import{SingleDayContent as C}from"./SingleDayContent.js";import{DayContentHoverProvider as S,DayContentHoverContext as R}from"./DateContentHoverContext.js";var A,N={hours:9,minutes:0},E=(e(e(e(e(e(e(e(e(e(e(A={},c.Outside,m.datePickerDayOutside),c.Selected,m.datePickerDaySelected),c.Today,m.datePickerDayToday),c.Disabled,m.datePickerDayDisabled),c.RangeStart,m.datePickerDayRangeStart),c.RangeEnd,m.datePickerDayRangeEnd),c.RangeMiddle,m.datePickerDayRangeMiddle),k,m.datePickerAddToRangeMiddle),v,m.datePickerAddToRangeStart),y,m.datePickerAddToRangeEnd),e(e(e(A,D,m.datePickerRemoveFromRange),g,m.datePickerHoveredDayExists),P,m.datePickerHalfRangeSelected)),j=s({}),w=function(){return a.createElement(j.Consumer,null,(function(e){return a.createElement(f,Object.assign({},e))}))},H=function(s){var f=s.className,k=s.dayClassName,v=s.selectedDayClassName,D=s.id,g=s["data-testid"],y=s.mode,P=void 0===y?"single":y,A=s.date,H=s.endDate,L=s.onDateChange,M=s.firstDayOfWeek,O=void 0===M?0:M,x=s.showWeekNumber,T=s.isDateDisabled,B=s.locale,W=s.nextButtonAriaLabel,_=void 0===W?"Next":W,q=s.prevButtonAriaLabel,F=void 0===q?"Previous":q,Y=s.monthSelectionAriaLabel,z=void 0===Y?"Month":Y,G=s.yearSelectionAriaLabel,I=void 0===G?"Year":G,J=s.dropdownsClassName,K=s.intent,Q=void 0===K?"to":K,U=s.dialogContainerSelector,V=r((function(){return"single"===P?A:{from:A,to:H}}),[A,H,P]),X=n(A||new Date),Z=t(X,2),$=Z[0],ee=Z[1],te=o(),ae=o(),re=o(!1);i((function(){var e=+ae.current!=+H,t=!re.current;+te.current!=+A?t&&A&&ee(A):e&&t&&H&&ee(H),te.current=A,ae.current=H,re.current=!1}),[A,H]);var ne=d((function(e,t){if(re.current=!0,"range"===P){var a=b(t,V,Q);L({date:null==a?void 0:a.from,endDate:null==a?void 0:a.to})}else{var r=e,n=A?{hours:A.getHours(),minutes:A.getMinutes()}:N;r.setHours(n.hours,n.minutes),L(r)}}),[A,Q,P,L,V]),oe=r((function(){return{setDisplayMonth:ee,locale:B,nextButtonAriaLabel:_,prevButtonAriaLabel:F,monthSelectionAriaLabel:z,yearSelectionAriaLabel:I,dropdownsClassName:J,dialogContainerSelector:U}}),[B,z,_,ee,F,I,J,U]),ie=r((function(){return Object.assign(Object.assign({},E),e({},c.Selected,l(E[c.Selected],v)))}),[v]),de=r((function(){return{months:m.datePickerMonths,head:m.datePickerHead,table:m.datePickerTable,tbody:m.datePickerBody,day:l(m.datePickerDay,k)}}),[k]);return a.createElement("div",{id:D,className:l(m.datePicker,e({},m.withWeekNumber,x),f),"data-testid":g,"data-vibe":"DatePicker"},a.createElement(S,null,a.createElement(j.Provider,{value:oe},a.createElement(R.Consumer,null,(function(e){var t=p(e.hover,V,Q);return a.createElement(u,{fixedWeeks:!0,showOutsideDays:!0,showWeekNumber:x,mode:P,required:!0,weekStartsOn:O,disabled:T,selected:V,onSelect:ne,month:$,onMonthChange:ee,components:{Caption:w,DayContent:"single"===P?C:h},classNames:de,modifiers:t,modifiersClassNames:ie,locale:B})})))))};export{N as DEFAULT_TIME,H as default};
+import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import a,{forwardRef as n,useState as r,useCallback as i}from"react";import o from"classnames";import s from"moment";import"react-dates/initialize.js";import{DayPickerRangeController as d,DayPickerSingleDateController as c}from"react-dates";import{DayPickerPhrases as l}from"react-dates/lib/defaultPhrases.js";import m from"./DatePickerHeader/DatePickerHeader.js";import u from"./DateNavigationItem/DateNavigationItem.js";import f from"./YearPicker/YearPicker.js";import{WEEK_FIRST_DAY as v,DAY_SIZE as D}from"./constants.js";import{FocusInput as p,Direction as h}from"./types.js";import{getTestId as k}from"../../tests/testIds.js";import{ComponentDefaultTestId as E,ComponentVibeId as g}from"../../tests/constants.js";import{NOOP as y}from"../../utils/function-utils.js";import{useWarnDeprecated as b}from"../../utils/warn-deprecated.js";import P from"./DatePicker.module.scss.js";import"./external_datepicker.scss.js";var j=n((function(n,j){var O=n.id,N=n.className,C=n.firstDayOfWeek,M=void 0===C?v:C,I=n.daySize,S=void 0===I?D:I,Y=n.range,x=void 0!==Y&&Y,K=n.shouldBlockDay,R=n.shouldBlockYear,T=n.numberOfMonths,W=void 0===T?1:T,A=n.hideNavigationKeys,B=void 0!==A&&A,_=n.date,w=n.endDate,z=n.onPickDate,H=void 0===z?y:z,F=n.enableOutsideDays,V=void 0!==F&&F,L=n.showWeekNumber,q=void 0!==L&&L,G=n.shouldBlockRange,J=n["data-testid"],Q=n.phrases;b({component:"DatePicker",message:"This component is deprecated and will be removed in the next major version. Please use DatePicker from @vibe/core/next instead."});var U=r(p.startDate),X=e(U,2),Z=X[0],$=X[1],ee=r(!1),te=e(ee,2),ae=te[0],ne=te[1],re=r(null),ie=e(re,2),oe=ie[0],se=ie[1],de=r(null),ce=e(de,2),le=ce[0],me=ce[1],ue=i((function(e){var t=e.month,n=e.onYearSelect;return!le&&n&&me((function(){return n})),a.createElement(m,{"data-testid":J||k(E.DATEPICKER_HEADER,O),currentDate:t||s(),isMonthYearSelection:ae,onToggleMonthYearPicker:function(){return ne((function(e){return!e}))},hideNavigationKeys:B})}),[ae,J,O,B,le]),fe=i((function(e){var t=0===M?e.clone().add(1,"d").isoWeek():e.isoWeek();return a.createElement(a.Fragment,null,a.createElement("span",{className:P.calendarDayWeekNumber},t)," ",e.format("D"))}),[M]),ve=i((function(e){var t=oe||_;se(e),ne(!1),le(t,s(e).year())}),[oe,_,le]),De=i((function(){return a.createElement(f,{"data-testid":J||k(E.DATEPICKER_YEAR_SELECTION,O),selectedDate:_,isYearBlocked:R,changeCurrentDate:ve})}),[J,O,oe,_,R,ve]),pe=i((function(e){H&&H(Z===p.startDate?Object.assign(Object.assign({},e),{endDate:null}):e)}),[Z,H]),he=i((function(e){$(e||p.startDate)}),[]),ke=Object.assign(Object.assign({},l),Q),Ee=!B&&!ae;return a.createElement("div",{"data-testid":J||k(E.DATEPICKER,O),ref:j,id:O,className:o(P.datepickerContainer,N,t(t(t({},P.withWeekNumber,q),P.rangePickerMode,x),P.monthYearSelection,ae)),"data-vibe":g.DATE_PICKER},x?a.createElement(d,{phrases:ke,renderDayContents:q?fe:void 0,firstDayOfWeek:M,hideKeyboardShortcutsPanel:!0,startDate:_,endDate:w,onDatesChange:pe,focusedInput:Z,minimumNights:0,onFocusChange:he,navPrev:Ee?a.createElement(u,{kind:h.prev}):a.createElement("div",null),navNext:Ee?a.createElement(u,{kind:h.next}):a.createElement("div",null),daySize:S,isOutsideRange:G,isDayBlocked:K,renderMonthElement:ue,enableOutsideDays:V||q,numberOfMonths:W,initialVisibleMonth:function(){return oe||_||s()}}):a.createElement(c,{phrases:ke,renderDayContents:q?fe:void 0,firstDayOfWeek:M,hideKeyboardShortcutsPanel:!0,onFocusChange:y,numberOfMonths:W,date:_,onDateChange:function(e){return H(e)},navPrev:Ee?a.createElement(u,{kind:h.prev}):a.createElement("div",null),navNext:Ee?a.createElement(u,{kind:h.next}):a.createElement("div",null),focused:!0,renderMonthElement:ue,enableOutsideDays:V||q,daySize:S,isDayBlocked:K,initialVisibleMonth:function(){return oe||_||s()}}),ae&&De())}));export{j as default};
 //# sourceMappingURL=DatePicker.js.map