@vibe/core 3.35.0 → 3.36.0

package/dist/mocked_classnames/src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerContent.js","sources":["../../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.tsx"],"sourcesContent":["import { difference as _difference, intersection as _intersection } from \"lodash-es\";\nimport React, { forwardRef, useCallback, useMemo, useRef } from \"react\";\nimport { BaseSizes } from \"../../../../constants\";\nimport { ColorStyle as ColorStyleEnum, CONTENT_COLORS_VALUES, contentColors } from \"../../../../utils/colors-vars-map\";\nimport { NoColor } from \"@vibe/icons\";\nimport { ColorShapes as ColorShapesEnum, DEFAULT_NUMBER_OF_COLORS_IN_LINE } from \"../../ColorPickerConstants\";\nimport { ColorShapes, ColorPickerSizes, ColorPickerValue, ColorPickerArrayValueOnly } from \"../../ColorPicker.types\";\nimport { calculateColorPickerWidth } from \"../../services/ColorPickerStyleService\";\nimport {\n  GridKeyboardNavigationContext,\n  useGridKeyboardNavigationContext\n} from \"../../../GridKeyboardNavigationContext/GridKeyboardNavigationContext\";\nimport { ColorPickerClearButton } from \"./ColorPickerClearButton\";\nimport { ColorPickerColorsGrid } from \"./ColorPickerColorsGrid\";\nimport { VibeComponentProps, VibeComponent, SubIcon, withStaticProps } from \"../../../../types\";\nimport useMergeRef from \"../../../../hooks/useMergeRef\";\nimport { ColorStyle } from \"../../../../types/Colors\";\n\nexport interface ColorPickerContentProps extends VibeComponentProps {\n  value: ColorPickerValue;\n  onValueChange: (value: ColorPickerArrayValueOnly) => void;\n  colorsList: ColorPickerArrayValueOnly;\n  ColorIndicatorIcon?: SubIcon;\n  SelectedIndicatorIcon?: SubIcon;\n  NoColorIcon?: SubIcon;\n  colorStyle?: ColorStyle;\n  colorSize?: ColorPickerSizes;\n  colorShape?: ColorShapes;\n  tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string>>;\n  noColorText?: string;\n  shouldRenderIndicatorWithoutBackground?: boolean;\n  isBlackListMode?: boolean;\n  numberOfColorsInLine?: number;\n  focusOnMount?: boolean;\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: VibeComponent<ColorPickerContentProps, HTMLDivElement> & {\n  sizes?: typeof BaseSizes;\n  colorStyles?: typeof ColorStyleEnum;\n  colorSizes?: typeof BaseSizes;\n  colorShapes?: typeof ColorShapesEnum;\n} = 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\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 withStaticProps(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":"igCA+CA,IAsGeA,EAAAA,EAjGXC,GACF,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,IAGiD,CACjDmC,MAAOtD,EACPuD,YAAaC,EACbC,WAAYzD,EACZ0D,YAAaC"}
+{"version":3,"file":"ColorPickerContent.js","sources":["../../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.tsx"],"sourcesContent":["import { difference as _difference, intersection as _intersection } from \"lodash-es\";\nimport React, { forwardRef, useCallback, useMemo, useRef } from \"react\";\nimport { BaseSizes } from \"../../../../constants\";\nimport { ColorStyle as ColorStyleEnum, CONTENT_COLORS_VALUES, contentColors } from \"../../../../utils/colors-vars-map\";\nimport { NoColor } from \"@vibe/icons\";\nimport { ColorShapes as ColorShapesEnum, DEFAULT_NUMBER_OF_COLORS_IN_LINE } from \"../../ColorPickerConstants\";\nimport { ColorShapes, ColorPickerSizes, ColorPickerValue, ColorPickerArrayValueOnly } from \"../../ColorPicker.types\";\nimport { calculateColorPickerWidth } from \"../../services/ColorPickerStyleService\";\nimport {\n  GridKeyboardNavigationContext,\n  useGridKeyboardNavigationContext\n} from \"../../../GridKeyboardNavigationContext/GridKeyboardNavigationContext\";\nimport { ColorPickerClearButton } from \"./ColorPickerClearButton\";\nimport { ColorPickerColorsGrid } from \"./ColorPickerColorsGrid\";\nimport { VibeComponentProps, VibeComponent, SubIcon, withStaticProps } from \"../../../../types\";\nimport useMergeRef from \"../../../../hooks/useMergeRef\";\nimport { ColorStyle } from \"../../../../types/Colors\";\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: VibeComponent<ColorPickerContentProps, HTMLDivElement> & {\n  sizes?: typeof BaseSizes;\n  colorStyles?: typeof ColorStyleEnum;\n  colorSizes?: typeof BaseSizes;\n  colorShapes?: typeof ColorShapesEnum;\n} = 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\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 withStaticProps(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":"igCA+FA,IAsGeA,EAAAA,EAjGXC,GACF,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,IAGiD,CACjDmC,MAAOtD,EACPuD,YAAaC,EACbC,WAAYzD,EACZ0D,YAAaC"}

package/dist/mocked_classnames/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.js.map

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

package/dist/mocked_classnames/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.module.scss.js

@@ -1,2 +1,2 @@
-var e={itemWrapper:"itemWrapper",circle:"circle",feedbackIndicator:"feedbackIndicator",active:"active",selectedColor:"selectedColor",colorItem:"colorItem",colorIndicatorWrapper:"colorIndicatorWrapper",colorItemSizeSmall:"colorItemSizeSmall",colorItemSizeMedium:"colorItemSizeMedium",colorItemSizeLarge:"colorItemSizeLarge",colorItemTextMode:"colorItemTextMode",colorIconWhite:"colorIconWhite"};!function(e){const r="s_id-2198989e565d_3_34_2";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 {\n  --border-radius-multiplier: 1;\n}\n\n.itemWrapper.circle {\n  --border-radius-multiplier: 99999;\n}\n\n/* stylelint-disable scss/operator-no-unspaced */\n\n.itemWrapper {\n  margin: 4px;\n  display: flex;\n  list-style-type: none;\n  position: relative;\n}\n\n.itemWrapper .feedbackIndicator {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.itemWrapper:focus,\n.itemWrapper:focus-visible,\n.itemWrapper.active {\n  outline: none;\n}\n\n.itemWrapper:focus .feedbackIndicator:before,\n.itemWrapper:focus-visible .feedbackIndicator:before,\n.itemWrapper.active .feedbackIndicator: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:focus .feedbackIndicator:after,\n.itemWrapper:focus-visible .feedbackIndicator:after,\n.itemWrapper.active .feedbackIndicator: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:hover:not(.active):not(.selectedColor) .feedbackIndicator {\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 .colorItem {\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 .colorItem .colorIndicatorWrapper {\n  margin-top: 3px;\n}\n\n.itemWrapper .colorItem.colorItemSizeSmall {\n  width: 24px;\n  height: 24px;\n}\n\n.itemWrapper .colorItem.colorItemSizeMedium {\n  width: 32px;\n  height: 32px;\n}\n\n.itemWrapper .colorItem.colorItemSizeLarge {\n  width: 40px;\n  height: 40px;\n}\n\n.itemWrapper.selectedColor {\n  position: relative;\n}\n\n.itemWrapper.selectedColor: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.selectedColor .feedbackIndicator:before {\n  /* hide the outer border from the "active" feedback indicator */\n  display: none;\n}\n\n.itemWrapper .colorItemTextMode:hover {\n  background-color: var(--primary-background-hover-color) !important;\n}\n\n.itemWrapper .colorIconWhite {\n  color: var(--color-snow_white);\n}');export{e as default};
+var e={itemWrapper:"itemWrapper",circle:"circle",feedbackIndicator:"feedbackIndicator",active:"active",selectedColor:"selectedColor",colorItem:"colorItem",colorIndicatorWrapper:"colorIndicatorWrapper",colorItemSizeSmall:"colorItemSizeSmall",colorItemSizeMedium:"colorItemSizeMedium",colorItemSizeLarge:"colorItemSizeLarge",colorItemTextMode:"colorItemTextMode",colorIconWhite:"colorIconWhite"};!function(e){const r="s_id-2198989e565d_3_35_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 {\n  --border-radius-multiplier: 1;\n}\n\n.itemWrapper.circle {\n  --border-radius-multiplier: 99999;\n}\n\n/* stylelint-disable scss/operator-no-unspaced */\n\n.itemWrapper {\n  margin: 4px;\n  display: flex;\n  list-style-type: none;\n  position: relative;\n}\n\n.itemWrapper .feedbackIndicator {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.itemWrapper:focus,\n.itemWrapper:focus-visible,\n.itemWrapper.active {\n  outline: none;\n}\n\n.itemWrapper:focus .feedbackIndicator:before,\n.itemWrapper:focus-visible .feedbackIndicator:before,\n.itemWrapper.active .feedbackIndicator: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:focus .feedbackIndicator:after,\n.itemWrapper:focus-visible .feedbackIndicator:after,\n.itemWrapper.active .feedbackIndicator: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:hover:not(.active):not(.selectedColor) .feedbackIndicator {\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 .colorItem {\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 .colorItem .colorIndicatorWrapper {\n  margin-top: 3px;\n}\n\n.itemWrapper .colorItem.colorItemSizeSmall {\n  width: 24px;\n  height: 24px;\n}\n\n.itemWrapper .colorItem.colorItemSizeMedium {\n  width: 32px;\n  height: 32px;\n}\n\n.itemWrapper .colorItem.colorItemSizeLarge {\n  width: 40px;\n  height: 40px;\n}\n\n.itemWrapper.selectedColor {\n  position: relative;\n}\n\n.itemWrapper.selectedColor: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.selectedColor .feedbackIndicator:before {\n  /* hide the outer border from the "active" feedback indicator */\n  display: none;\n}\n\n.itemWrapper .colorItemTextMode:hover {\n  background-color: var(--primary-background-hover-color) !important;\n}\n\n.itemWrapper .colorIconWhite {\n  color: var(--color-snow_white);\n}');export{e as default};
 //# sourceMappingURL=ColorPickerItemComponent.module.scss.js.map

package/dist/mocked_classnames/src/components/Combobox/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sources":["../../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\nimport cx from \"classnames\";\nimport React, { useRef, useState, forwardRef, useMemo, useCallback } from \"react\";\nimport { isFunction, noop as NOOP } from \"lodash-es\";\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 \"../Button/Button\";\nimport Text from \"../Text/Text\";\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 { ElementContent, SubIcon, VibeComponentProps, withStaticProps } from \"../../types\";\nimport {\n  IComboboxCategoryMap,\n  IComboboxItem,\n  IComboboxOption,\n  COMBOBOX_LISTBOX_ID,\n  IComboboxCategory\n} from \"./components/ComboboxConstants\";\nimport styles from \"./Combobox.module.scss\";\nimport { ComboboxSizes } from \"./Combobox.types\";\nimport IconButton from \"../IconButton/IconButton\";\nimport MenuButton from \"../MenuButton/MenuButton\";\n\nexport interface ComboboxProps extends VibeComponentProps {\n  className?: string;\n  optionClassName?: string;\n  searchWrapperClassName?: string;\n  /**\n   * Class name for sticky category header\n   */\n  stickyCategoryClassName?: string;\n  /**\n   * Placeholder to show when no value was selected\n   */\n  placeholder?: string;\n  /**\n   * Unique element id\n   */\n  id?: string;\n  /**\n   * A message that will be displayed inside the combo box when no results are found\n   */\n  noResultsMessage?: string;\n  disabled?: boolean;\n  options?: IComboboxOption[];\n  categories?: IComboboxCategoryMap;\n  /**\n   * Divider between categories sections\n   */\n  withCategoriesDivider?: boolean;\n  size?: ComboboxSizes;\n  optionLineHeight?: number;\n  optionsListHeight?: number;\n  autoFocus?: boolean;\n  /**\n   * Callback that called after clicking on the add new combo box button.\n   * @param {string} _filterValue\n   */\n  onAddNew?: (value: string) => void;\n  /**\n   * The label of the button that appears at the end of the combo box when the search does not return appropriate options\n   */\n  addNewLabel?: ((label: string) => ElementContent) | string;\n  filter?: (filterValue: string, options: IComboboxOption[]) => IComboboxOption[];\n  /**\n   * Default search input\n   */\n  defaultFilter?: string;\n  disableFilter?: boolean;\n  /**\n   * For controlled search input. If provided, `defaultFilter` will be ignored\n   */\n  filterValue?: string;\n  onFilterChanged?: (value: string) => void;\n  /**\n   * Display the combo box with loading state\n   */\n  loading?: boolean;\n  /**\n   * on mouse hover callback for option\n   */\n  // onOptionHover?: PropTypes.func,\n  onOptionHover?: (event: React.MouseEvent, index: number, option: IComboboxOption) => void;\n  /**\n   * on mouse leave callback for option\n   */\n  // onOptionLeave?: PropTypes.func,\n  onOptionLeave?: () => void;\n  /**\n   * Allowed to the following behavior: scrolling automatically to the combo box's selected option\n   */\n  shouldScrollToSelectedItem?: boolean;\n  noResultsRenderer?: () => JSX.Element;\n  stickyCategories?: boolean;\n  /** By default, the first option will be selected, when focusing selecting the first option, or when changing items */\n  defaultVisualFocusFirstIndex?: boolean;\n  /** Clear the filter/search on selection (click or enter) */\n  clearFilterOnSelection?: boolean;\n  /** Replace the regular appearance of combo box option with custom renderer. */\n  optionRenderer?: (option: IComboboxOption) => JSX.Element;\n  /** Maximum options count without scroll */\n  maxOptionsWithoutScroll?: number;\n  /**\n   * Using virtualized list for rendering only the items which visible to the user in any given user (performance optimization)\n   */\n  renderOnlyVisibleOptions?: boolean;\n  /**\n   * On option click callback\n   */\n  onClick?: (optionData: IComboboxOption) => void;\n  /**\n   * Custom search icon\n   */\n  searchIcon?: SubIcon;\n  searchInputAriaLabel?: string;\n  debounceRate?: number;\n  searchInputRef?: React.RefObject<HTMLInputElement>;\n  /**\n   * Render additional action within the right section of search component.\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: React.FC<ComboboxProps> & {\n  sizes?: typeof BASE_SIZES;\n  iconTypes?: typeof ComboboxOption.iconTypes;\n} = 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\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      >\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 withStaticProps(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","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","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":"uvCAsIA,IAyPeA,EAAAA,EAtPXC,GACF,SAAAC,EA4CEC,GACE,IAAAC,EAAAF,EA3CAG,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EAAAE,EAAAJ,EACdK,gBAAAA,OAAkB,IAAHD,EAAG,GAAEA,EACpBE,EAAsBN,EAAtBM,uBACAC,EAAuBP,EAAvBO,wBACAC,EAAUR,EAAVQ,WAAUC,EAAAT,EACVU,GAAAA,OAAK,IAAHD,EAAG,GAAEA,EAAAE,EAAAX,EACPY,YAAAA,OAAc,IAAHD,EAAG,GAAEA,EAAAE,EAAAb,EAChBc,KAAAA,OAAO,IAAHD,EAAG,SAAQA,EACfE,EAA4Bf,EAA5Be,6BAA4BC,EAAAhB,EAC5BiB,iBAAAA,OAAmB,IAAHD,EAAG,GAAEA,EACrBE,EAAiBlB,EAAjBkB,kBAAiBC,EAAAnB,EACjBoB,UAAAA,OAAY,IAAHD,GAAQA,EAAAE,EAAArB,EACjBsB,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAvB,EAChBwB,QAAAA,OAAU,IAAHD,EAAG,GAAEA,EACZE,EAAUzB,EAAVyB,WAAUC,EAAA1B,EACV2B,sBAAAA,OAAwB,IAAHD,GAAQA,EAAAE,GAAA5B,EAC7B6B,iBAAAA,QAAmB,IAAHD,GAAG,mBAAkBA,GACrCE,GAAQ9B,EAAR8B,SAAQC,GAAA/B,EACRgC,YAAAA,QAAc,IAAHD,GAAG,UAASA,GAAAE,GAAAjC,EACvBkC,QAAAA,QAAU,IAAHD,GAAG,SAACE,GAAmC,EAAAF,GAAAG,GAAApC,EAC9CqC,OAAAA,QAASC,IAAHF,GAAGE,EAAaF,GAAAG,GAAAvC,EACtBwC,cAAAA,QAAgB,IAAHD,IAAQA,GACRE,GAAezC,EAA5B0C,YACAC,GAAe3C,EAAf2C,gBAAeC,GAAA5C,EACf6C,QAAAA,QAAU,IAAHD,IAAQA,GAAAE,GAAA9C,EACf+C,cAAAA,QAAgBC,IAAHF,GAAGE,EAAIF,GAAAG,GAAAjD,EACpBkD,cAAAA,QAAgBF,IAAHC,GAAGD,EAAIC,GAAAE,GAAAnD,EACpBoD,2BAAAA,QAA6B,IAAHD,IAAOA,GACjCE,GAAiBrD,EAAjBqD,kBAAiBC,GAAAtD,EACjBuD,iBAAAA,QAAmB,IAAHD,IAAQA,GAAAE,GAAAxD,EACxByD,eAAAA,QAAiB,IAAHD,GAAG,KAAIA,GAAAE,GAAA1D,EACrB2D,yBAAAA,QAA2B,IAAHD,IAAQA,GAAAE,GAAA5D,EAChC6D,uBAAAA,QAAyB,IAAHD,IAAQA,GAC9BE,GAAuB9D,EAAvB8D,wBAAuBC,GAAA/D,EACvBsC,cAAe0B,QAAqB,IAAHD,GAAG,GAAEA,GAAAE,GAAAjE,EACtCkE,qBAAAA,QAAuB,IAAHD,GAAG,qBAAoBA,GAC5BE,GAAUnE,EAAzB,eACAoE,GAAYpE,EAAZoE,aACAC,GAAcrE,EAAdqE,eACcC,GAAYtE,EAA1BuE,aACAC,GAAuBxE,EAAvBwE,wBAIIC,GAAeC,EAAO,MACtBC,GAAWD,EAAO,MAClBE,GAAYC,EAAY5E,EAAKwE,IAC7BK,GAAiBD,EAAYF,GAAUN,IAE7CU,GAAsCC,EAASvC,IAAmBuB,IAAmBiB,GAAAC,EAAAH,GAAA,GAA9ErC,GAAWuC,GAAA,GAAEE,GAAcF,GAAA,QAEVG,IAApB3C,IAAiCA,KAAoBC,IACvDyC,GAAe1C,IAGjB,IAAM4C,GAAmBC,GACvB,SAACC,GACCC,IAAsB,GAClB7C,IACFA,GAAgB4C,GAElBJ,GAAeI,EACjB,GACA,CAACJ,GAAgBxC,KAGb8C,GAAkBH,GACtB,SAACI,EAAyBC,EAAeC,GACvC7C,GAAc2C,EAAOC,EAAOC,EAC9B,GACA,CAAC7C,KAGG8C,GAAqCC,GAAQ,WACjD,OAAItD,GACKhB,EAEFa,GAAOK,GAAalB,EAC5B,GAAE,CAACA,EAASkB,GAAaL,GAAQG,KAElCuD,GAAkDf,GAAU,GAAEgB,GAAAd,EAAAa,GAAA,GAAvDE,GAAiBD,GAAA,GAAER,GAAoBQ,GAAA,GAExCE,GAAoBZ,GACxB,SAACK,GACC,YAAiBP,IAAVO,GAAuBE,GAAgBF,KAAWE,GAAgBF,GAAOrE,QAClF,GACA,CAACuE,KAGGM,GAAmBb,GAAY,WACnCxD,IAAYA,GAASY,IAErByC,GAAe,GAChB,GAAE,CAACrD,GAAUY,GAAayC,KAErBiB,GAAaP,GAAgBQ,OAAS,EACtCC,GAAY5D,GAAY2D,OAAS,EA4BvC,IAAAE,GAA4CvB,IAA6BwB,GAAAtB,EAAAqB,GAAA,GAAlEE,GAAcD,GAAA,GAAEE,GAAiBF,GAAA,GAElCG,GAA0BrB,GAC9B,SAACsB,UAC2B,UAAtBA,aAAA,EAAAA,EAAcC,gBAAQ,IAAAC,OAAA,EAAAA,EAAEC,UAAUN,cAAc,EAAdA,GAAgBM,QACpDL,GAAkBE,eAAAA,EAAcC,SAEpC,GACA,CAACJ,KAGHO,GAA6CC,EAAa,CACxDxF,WAAAA,EACAD,QAASqE,GACTnD,YAAAA,GACAf,sBAAAA,EACAV,iBAAAA,IALMiG,GAAKF,GAALE,MAAOC,GAAQH,GAARG,SAAUC,GAAeJ,GAAfI,gBAQnBC,GAAkB/B,GACtB,SAACgC,EAAgDC,GAC/CrF,GAAQkF,GAAgBG,IACpBrB,GAAkBqB,IACpB/B,GAAqB+B,GAEnB1D,IAEFwB,GAAiB,GAErB,GACA,CAACnD,GAASkF,GAAiBlB,GAAmBrC,GAAwBwB,KAGxEmC,GAIIC,EAAsB,CACxBC,YAAAA,EACA3G,6BAAAA,EACAmB,QAASmF,GACTnB,kBAAAA,GACA1E,QAAS4F,GACTzC,SAAUG,KATV6C,GAAoBH,GAApBG,qBACAC,GAAiBJ,GAAjBI,kBACeC,GAAqBL,GAApCM,cAUF,OACEC,EAAAC,cAACC,EAAI,CACHC,KAAK,QACLjI,IAAK2E,GACLzE,UAAWgI,EAAGC,EAAOC,SAAUlI,EAAWmI,EAASF,EAAQG,EAAU,QAAUzH,IAAM0H,EAAAA,EAClFJ,GAAAA,EAAOK,OAASrC,IAChBgC,EAAOM,eAAiBnF,KAE3B7C,GAAIA,EACS,cAAAyD,IAAcwE,EAAUC,EAAuBC,SAAUnI,GACtEoI,UAAU,GAEVf,EAAAC,cAAA,MAAA,CAAK7H,UAAWiI,EAAOW,aAAcC,MAAO,CAAEC,UAAW/H,IACvD6G,EAACC,cAAAkB,GACCjJ,IAAK6E,GACLS,MAAO7C,GACPvC,UAAWgI,EAAGC,EAAOe,sBAAuB7I,GAC5C8I,eAAgBlF,GAChBmF,oBAAqBzB,GACrBlH,GAAG,kBACHE,YAAaA,EACbE,KAAMA,EACNQ,SAAUA,EACVgI,SAAUjE,GACVjE,UAAWA,EACXyB,QAASA,GACT0G,eAAgB/I,EAChBgJ,aAAclD,IAAaF,GAC3BqD,aAAa,UACbC,yBAA0BhJ,EAAE,GAAAiJ,OAAMjJ,cAAekJ,EACjDxF,aAAcA,GACdG,aAAcD,GACdE,wBAAyBA,KAE1BjB,IACCwE,EAACC,cAAA6B,EACC,CAAA9C,MAAON,cAAA,EAAAA,GAAgBM,MACvB+C,MAAOrD,cAAA,EAAAA,GAAgBqD,MACvB3J,UAAWI,IAGd6F,IACC2B,EAAAC,cAAC+B,EACC,CAAAxG,iBAAkBA,GAClB9B,WAAYA,EACZD,QAAS0F,GACTC,SAAUA,GACV9G,gBAAiBA,EACjBoD,eAAgBA,GAChBuG,gBAAiB/D,GACjBU,wBAAyBA,GACzBmB,cAAeD,GACfoC,cAAexE,GACfvC,cAAeA,GACfjC,iBAAkBA,EAClBmC,2BAA4BA,GAC5BO,yBAA0BA,GAC1BG,wBAAyBA,GACzB6D,qBAAsBA,GACtBjH,GAAIA,EAAE,GAAAiJ,OAAMjJ,EAAekJ,YAAAA,KAIhCtD,KAAcF,KAAevD,KA/H5BQ,GACKA,KAIP0E,EAAKC,cAAA,MAAA,CAAA7H,UAAWiI,EAAO8B,mBACrBnC,EAAAC,cAAA,MAAA,CAAK7H,UAAWiI,EAAO+B,wBACrBpC,EAAMC,cAAA,OAAA,CAAA7H,UAAWiI,EAAOgC,iBAAkBvI,KAE3CC,KAAaR,GACZyG,gBAACsC,EAAM,CAAClK,UAAWiI,EAAOkC,aAAcxJ,KAAMA,EAAMyJ,KAAK,WAAWrI,QAASiE,IAC3E4B,EAAAC,cAAA,OAAA,CAAM7H,UAAWiI,EAAOoC,aAlB5BC,EAAWzI,IACNA,GAAYU,IAEdV,OAsIX,IAOuC,CACvC0I,MAAOC,EACPC,UAAWC,EAAeD"}
+{"version":3,"file":"Combobox.js","sources":["../../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\nimport cx from \"classnames\";\nimport React, { useRef, useState, forwardRef, useMemo, useCallback } from \"react\";\nimport { isFunction, noop as NOOP } from \"lodash-es\";\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 \"../Button/Button\";\nimport Text from \"../Text/Text\";\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 { ElementContent, SubIcon, VibeComponentProps, withStaticProps } from \"../../types\";\nimport {\n  IComboboxCategoryMap,\n  IComboboxItem,\n  IComboboxOption,\n  COMBOBOX_LISTBOX_ID,\n  IComboboxCategory\n} from \"./components/ComboboxConstants\";\nimport styles from \"./Combobox.module.scss\";\nimport { ComboboxSizes } from \"./Combobox.types\";\nimport IconButton from \"../IconButton/IconButton\";\nimport MenuButton from \"../MenuButton/MenuButton\";\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: React.FC<ComboboxProps> & {\n  sizes?: typeof BASE_SIZES;\n  iconTypes?: typeof ComboboxOption.iconTypes;\n} = 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\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      >\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 withStaticProps(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","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","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":"uvCAyLA,IAyPeA,EAAAA,EAtPXC,GACF,SAAAC,EA4CEC,GACE,IAAAC,EAAAF,EA3CAG,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EAAAE,EAAAJ,EACdK,gBAAAA,OAAkB,IAAHD,EAAG,GAAEA,EACpBE,EAAsBN,EAAtBM,uBACAC,EAAuBP,EAAvBO,wBACAC,EAAUR,EAAVQ,WAAUC,EAAAT,EACVU,GAAAA,OAAK,IAAHD,EAAG,GAAEA,EAAAE,EAAAX,EACPY,YAAAA,OAAc,IAAHD,EAAG,GAAEA,EAAAE,EAAAb,EAChBc,KAAAA,OAAO,IAAHD,EAAG,SAAQA,EACfE,EAA4Bf,EAA5Be,6BAA4BC,EAAAhB,EAC5BiB,iBAAAA,OAAmB,IAAHD,EAAG,GAAEA,EACrBE,EAAiBlB,EAAjBkB,kBAAiBC,EAAAnB,EACjBoB,UAAAA,OAAY,IAAHD,GAAQA,EAAAE,EAAArB,EACjBsB,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAvB,EAChBwB,QAAAA,OAAU,IAAHD,EAAG,GAAEA,EACZE,EAAUzB,EAAVyB,WAAUC,EAAA1B,EACV2B,sBAAAA,OAAwB,IAAHD,GAAQA,EAAAE,GAAA5B,EAC7B6B,iBAAAA,QAAmB,IAAHD,GAAG,mBAAkBA,GACrCE,GAAQ9B,EAAR8B,SAAQC,GAAA/B,EACRgC,YAAAA,QAAc,IAAHD,GAAG,UAASA,GAAAE,GAAAjC,EACvBkC,QAAAA,QAAU,IAAHD,GAAG,SAACE,GAAmC,EAAAF,GAAAG,GAAApC,EAC9CqC,OAAAA,QAASC,IAAHF,GAAGE,EAAaF,GAAAG,GAAAvC,EACtBwC,cAAAA,QAAgB,IAAHD,IAAQA,GACRE,GAAezC,EAA5B0C,YACAC,GAAe3C,EAAf2C,gBAAeC,GAAA5C,EACf6C,QAAAA,QAAU,IAAHD,IAAQA,GAAAE,GAAA9C,EACf+C,cAAAA,QAAgBC,IAAHF,GAAGE,EAAIF,GAAAG,GAAAjD,EACpBkD,cAAAA,QAAgBF,IAAHC,GAAGD,EAAIC,GAAAE,GAAAnD,EACpBoD,2BAAAA,QAA6B,IAAHD,IAAOA,GACjCE,GAAiBrD,EAAjBqD,kBAAiBC,GAAAtD,EACjBuD,iBAAAA,QAAmB,IAAHD,IAAQA,GAAAE,GAAAxD,EACxByD,eAAAA,QAAiB,IAAHD,GAAG,KAAIA,GAAAE,GAAA1D,EACrB2D,yBAAAA,QAA2B,IAAHD,IAAQA,GAAAE,GAAA5D,EAChC6D,uBAAAA,QAAyB,IAAHD,IAAQA,GAC9BE,GAAuB9D,EAAvB8D,wBAAuBC,GAAA/D,EACvBsC,cAAe0B,QAAqB,IAAHD,GAAG,GAAEA,GAAAE,GAAAjE,EACtCkE,qBAAAA,QAAuB,IAAHD,GAAG,qBAAoBA,GAC5BE,GAAUnE,EAAzB,eACAoE,GAAYpE,EAAZoE,aACAC,GAAcrE,EAAdqE,eACcC,GAAYtE,EAA1BuE,aACAC,GAAuBxE,EAAvBwE,wBAIIC,GAAeC,EAAO,MACtBC,GAAWD,EAAO,MAClBE,GAAYC,EAAY5E,EAAKwE,IAC7BK,GAAiBD,EAAYF,GAAUN,IAE7CU,GAAsCC,EAASvC,IAAmBuB,IAAmBiB,GAAAC,EAAAH,GAAA,GAA9ErC,GAAWuC,GAAA,GAAEE,GAAcF,GAAA,QAEVG,IAApB3C,IAAiCA,KAAoBC,IACvDyC,GAAe1C,IAGjB,IAAM4C,GAAmBC,GACvB,SAACC,GACCC,IAAsB,GAClB7C,IACFA,GAAgB4C,GAElBJ,GAAeI,EACjB,GACA,CAACJ,GAAgBxC,KAGb8C,GAAkBH,GACtB,SAACI,EAAyBC,EAAeC,GACvC7C,GAAc2C,EAAOC,EAAOC,EAC9B,GACA,CAAC7C,KAGG8C,GAAqCC,GAAQ,WACjD,OAAItD,GACKhB,EAEFa,GAAOK,GAAalB,EAC5B,GAAE,CAACA,EAASkB,GAAaL,GAAQG,KAElCuD,GAAkDf,GAAU,GAAEgB,GAAAd,EAAAa,GAAA,GAAvDE,GAAiBD,GAAA,GAAER,GAAoBQ,GAAA,GAExCE,GAAoBZ,GACxB,SAACK,GACC,YAAiBP,IAAVO,GAAuBE,GAAgBF,KAAWE,GAAgBF,GAAOrE,QAClF,GACA,CAACuE,KAGGM,GAAmBb,GAAY,WACnCxD,IAAYA,GAASY,IAErByC,GAAe,GAChB,GAAE,CAACrD,GAAUY,GAAayC,KAErBiB,GAAaP,GAAgBQ,OAAS,EACtCC,GAAY5D,GAAY2D,OAAS,EA4BvC,IAAAE,GAA4CvB,IAA6BwB,GAAAtB,EAAAqB,GAAA,GAAlEE,GAAcD,GAAA,GAAEE,GAAiBF,GAAA,GAElCG,GAA0BrB,GAC9B,SAACsB,UAC2B,UAAtBA,aAAA,EAAAA,EAAcC,gBAAQ,IAAAC,OAAA,EAAAA,EAAEC,UAAUN,cAAc,EAAdA,GAAgBM,QACpDL,GAAkBE,eAAAA,EAAcC,SAEpC,GACA,CAACJ,KAGHO,GAA6CC,EAAa,CACxDxF,WAAAA,EACAD,QAASqE,GACTnD,YAAAA,GACAf,sBAAAA,EACAV,iBAAAA,IALMiG,GAAKF,GAALE,MAAOC,GAAQH,GAARG,SAAUC,GAAeJ,GAAfI,gBAQnBC,GAAkB/B,GACtB,SAACgC,EAAgDC,GAC/CrF,GAAQkF,GAAgBG,IACpBrB,GAAkBqB,IACpB/B,GAAqB+B,GAEnB1D,IAEFwB,GAAiB,GAErB,GACA,CAACnD,GAASkF,GAAiBlB,GAAmBrC,GAAwBwB,KAGxEmC,GAIIC,EAAsB,CACxBC,YAAAA,EACA3G,6BAAAA,EACAmB,QAASmF,GACTnB,kBAAAA,GACA1E,QAAS4F,GACTzC,SAAUG,KATV6C,GAAoBH,GAApBG,qBACAC,GAAiBJ,GAAjBI,kBACeC,GAAqBL,GAApCM,cAUF,OACEC,EAAAC,cAACC,EAAI,CACHC,KAAK,QACLjI,IAAK2E,GACLzE,UAAWgI,EAAGC,EAAOC,SAAUlI,EAAWmI,EAASF,EAAQG,EAAU,QAAUzH,IAAM0H,EAAAA,EAClFJ,GAAAA,EAAOK,OAASrC,IAChBgC,EAAOM,eAAiBnF,KAE3B7C,GAAIA,EACS,cAAAyD,IAAcwE,EAAUC,EAAuBC,SAAUnI,GACtEoI,UAAU,GAEVf,EAAAC,cAAA,MAAA,CAAK7H,UAAWiI,EAAOW,aAAcC,MAAO,CAAEC,UAAW/H,IACvD6G,EAACC,cAAAkB,GACCjJ,IAAK6E,GACLS,MAAO7C,GACPvC,UAAWgI,EAAGC,EAAOe,sBAAuB7I,GAC5C8I,eAAgBlF,GAChBmF,oBAAqBzB,GACrBlH,GAAG,kBACHE,YAAaA,EACbE,KAAMA,EACNQ,SAAUA,EACVgI,SAAUjE,GACVjE,UAAWA,EACXyB,QAASA,GACT0G,eAAgB/I,EAChBgJ,aAAclD,IAAaF,GAC3BqD,aAAa,UACbC,yBAA0BhJ,EAAE,GAAAiJ,OAAMjJ,cAAekJ,EACjDxF,aAAcA,GACdG,aAAcD,GACdE,wBAAyBA,KAE1BjB,IACCwE,EAACC,cAAA6B,EACC,CAAA9C,MAAON,cAAA,EAAAA,GAAgBM,MACvB+C,MAAOrD,cAAA,EAAAA,GAAgBqD,MACvB3J,UAAWI,IAGd6F,IACC2B,EAAAC,cAAC+B,EACC,CAAAxG,iBAAkBA,GAClB9B,WAAYA,EACZD,QAAS0F,GACTC,SAAUA,GACV9G,gBAAiBA,EACjBoD,eAAgBA,GAChBuG,gBAAiB/D,GACjBU,wBAAyBA,GACzBmB,cAAeD,GACfoC,cAAexE,GACfvC,cAAeA,GACfjC,iBAAkBA,EAClBmC,2BAA4BA,GAC5BO,yBAA0BA,GAC1BG,wBAAyBA,GACzB6D,qBAAsBA,GACtBjH,GAAIA,EAAE,GAAAiJ,OAAMjJ,EAAekJ,YAAAA,KAIhCtD,KAAcF,KAAevD,KA/H5BQ,GACKA,KAIP0E,EAAKC,cAAA,MAAA,CAAA7H,UAAWiI,EAAO8B,mBACrBnC,EAAAC,cAAA,MAAA,CAAK7H,UAAWiI,EAAO+B,wBACrBpC,EAAMC,cAAA,OAAA,CAAA7H,UAAWiI,EAAOgC,iBAAkBvI,KAE3CC,KAAaR,GACZyG,gBAACsC,EAAM,CAAClK,UAAWiI,EAAOkC,aAAcxJ,KAAMA,EAAMyJ,KAAK,WAAWrI,QAASiE,IAC3E4B,EAAAC,cAAA,OAAA,CAAM7H,UAAWiI,EAAOoC,aAlB5BC,EAAWzI,IACNA,GAAYU,IAEdV,OAsIX,IAOuC,CACvC0I,MAAOC,EACPC,UAAWC,EAAeD"}

package/dist/mocked_classnames/src/components/Combobox/Combobox.module.scss.js

@@ -1,2 +1,2 @@
-var o={combobox:"combobox",stickyCategory:"stickyCategory",comboboxCategory:"comboboxCategory",sizeSmall:"sizeSmall",sizeMedium:"sizeMedium",sizeLarge:"sizeLarge",empty:"empty",comboboxSearchWrapper:"comboboxSearchWrapper",comboboxNoResults:"comboboxNoResults",comboboxMessageWrapper:"comboboxMessageWrapper",comboboxMessage:"comboboxMessage",addNewButton:"addNewButton",buttonLabel:"buttonLabel",comboboxList:"comboboxList"};!function(o){const e="s_id-140391bb7df9_3_34_2";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+e))return;const t=document.createElement("style");t.id=e,n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=o)}(".combobox {\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\n.combobox.stickyCategory .comboboxCategory {\n  z-index: 10;\n  background-color: var(--secondary-background-color);\n}\n\n/* Relative to Search height */\n\n.combobox.stickyCategory.sizeSmall .comboboxCategory {\n  top: 32px;\n}\n\n.combobox.stickyCategory.sizeMedium .comboboxCategory {\n  top: 40px;\n}\n\n.combobox.stickyCategory.sizeLarge .comboboxCategory {\n  top: 48px;\n}\n\n.combobox.empty {\n  max-height: 200px;\n  margin-bottom: 0;\n}\n\n.comboboxSearchWrapper {\n  position: sticky;\n  top: 0;\n  z-index: 12;\n}\n\n.comboboxNoResults {\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\n.comboboxNoResults .comboboxMessageWrapper {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.comboboxNoResults .comboboxMessageWrapper .comboboxMessage {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.comboboxNoResults .addNewButton {\n  flex: 0 0 auto;\n  width: 100% !important;\n  margin-bottom: 8px;\n}\n\n.comboboxNoResults .addNewButton .buttonLabel {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.comboboxList {\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",stickyCategory:"stickyCategory",comboboxCategory:"comboboxCategory",sizeSmall:"sizeSmall",sizeMedium:"sizeMedium",sizeLarge:"sizeLarge",empty:"empty",comboboxSearchWrapper:"comboboxSearchWrapper",comboboxNoResults:"comboboxNoResults",comboboxMessageWrapper:"comboboxMessageWrapper",comboboxMessage:"comboboxMessage",addNewButton:"addNewButton",buttonLabel:"buttonLabel",comboboxList:"comboboxList"};!function(o){const e="s_id-140391bb7df9_3_35_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+e))return;const t=document.createElement("style");t.id=e,n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=o)}(".combobox {\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\n.combobox.stickyCategory .comboboxCategory {\n  z-index: 10;\n  background-color: var(--secondary-background-color);\n}\n\n/* Relative to Search height */\n\n.combobox.stickyCategory.sizeSmall .comboboxCategory {\n  top: 32px;\n}\n\n.combobox.stickyCategory.sizeMedium .comboboxCategory {\n  top: 40px;\n}\n\n.combobox.stickyCategory.sizeLarge .comboboxCategory {\n  top: 48px;\n}\n\n.combobox.empty {\n  max-height: 200px;\n  margin-bottom: 0;\n}\n\n.comboboxSearchWrapper {\n  position: sticky;\n  top: 0;\n  z-index: 12;\n}\n\n.comboboxNoResults {\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\n.comboboxNoResults .comboboxMessageWrapper {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.comboboxNoResults .comboboxMessageWrapper .comboboxMessage {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.comboboxNoResults .addNewButton {\n  flex: 0 0 auto;\n  width: 100% !important;\n  margin-bottom: 8px;\n}\n\n.comboboxNoResults .addNewButton .buttonLabel {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.comboboxList {\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/mocked_classnames/src/components/Combobox/ComboboxHelpers/ComboboxHelpers.module.scss.js

@@ -1,2 +1,2 @@
-var e={comboboxItemContainer:"comboboxItemContainer",dividerContainer:"dividerContainer",divider:"divider",sticky:"sticky"};!function(e){const n="s_id-78c8179b7fe9_3_34_2";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 {\n  display: flex;\n  flex: auto;\n  width: 100%;\n  background-color: var(--secondary-background-color);\n}\n\n.dividerContainer {\n  position: relative;\n  width: 95%;\n}\n\n.divider {\n  position: absolute;\n  width: calc(100% + 16px);\n  margin-left: -12px;\n}\n\n.sticky {\n  position: sticky;\n  top: 0;\n  z-index: 20;\n}");export{e as default};
+var e={comboboxItemContainer:"comboboxItemContainer",dividerContainer:"dividerContainer",divider:"divider",sticky:"sticky"};!function(e){const n="s_id-78c8179b7fe9_3_35_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 {\n  display: flex;\n  flex: auto;\n  width: 100%;\n  background-color: var(--secondary-background-color);\n}\n\n.dividerContainer {\n  position: relative;\n  width: 95%;\n}\n\n.divider {\n  position: absolute;\n  width: calc(100% + 16px);\n  margin-left: -12px;\n}\n\n.sticky {\n  position: sticky;\n  top: 0;\n  z-index: 20;\n}");export{e as default};
 //# sourceMappingURL=ComboboxHelpers.module.scss.js.map

package/dist/mocked_classnames/src/components/Combobox/components/ComboboxCategory/ComboboxCategory.js.map

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

package/dist/mocked_classnames/src/components/Combobox/components/ComboboxCategory/ComboboxCategory.module.scss.js

@@ -1,2 +1,2 @@
-var e={comboboxCategory:"comboboxCategory"};!function(e){const o="s_id-a004d249e1c1_3_34_2";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+o))return;const n=document.createElement("style");n.id=o,t.firstChild?t.insertBefore(n,t.firstChild):t.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=e)}(".comboboxCategory {\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"};!function(e){const o="s_id-a004d249e1c1_3_35_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+o))return;const n=document.createElement("style");n.id=o,t.firstChild?t.insertBefore(n,t.firstChild):t.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=e)}(".comboboxCategory {\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/mocked_classnames/src/components/Combobox/components/ComboboxConstants.js.map

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

package/dist/mocked_classnames/src/components/Combobox/components/ComboboxItems/ComboboxItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxItems.js","sources":["../../../../../../../src/components/Combobox/components/ComboboxItems/ComboboxItems.tsx"],"sourcesContent":["import React, { CSSProperties, forwardRef, RefObject, useCallback, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { comboboxItemRenderer } from \"../../ComboboxHelpers/ComboboxHelpers\";\nimport VirtualizedList from \"../../../../components/VirtualizedList/VirtualizedList\";\nimport {\n  COMBOBOX_CATEGORY_ITEM,\n  COMBOBOX_OPTION_ITEM,\n  IComboboxCategoryMap,\n  IComboboxItem,\n  IComboboxOption,\n  IComboboxOptionEvents\n} from \"../ComboboxConstants\";\nimport styles from \"./ComboboxItems.module.scss\";\n\nexport interface ComboboxItemsProps extends IComboboxOptionEvents {\n  className?: string;\n  optionClassName?: string;\n  categories?: IComboboxCategoryMap;\n  options?: IComboboxItem[];\n  optionRenderer?: (option: IComboboxOption) => JSX.Element;\n  activeItemIndex?: number;\n  visualFocusItemIndex?: number;\n  optionLineHeight?: number;\n  shouldScrollToSelectedItem?: boolean;\n  renderOnlyVisibleOptions?: boolean;\n  onActiveCategoryChanged?: (category: IComboboxItem) => void;\n  maxOptionsWithoutScroll?: number;\n  itemsMap?: Map<string, IComboboxItem>;\n  stickyCategories?: boolean;\n  id?: string;\n}\n\nexport const ComboboxItems: React.FC<ComboboxItemsProps> = forwardRef(\n  (\n    {\n      className,\n      optionClassName,\n      categories,\n      options,\n      optionRenderer,\n      activeItemIndex,\n      visualFocusItemIndex,\n      onOptionClick,\n      onOptionEnter,\n      onOptionLeave,\n      optionLineHeight,\n      shouldScrollToSelectedItem,\n      renderOnlyVisibleOptions,\n      onActiveCategoryChanged,\n      maxOptionsWithoutScroll,\n      itemsMap,\n      stickyCategories,\n      id\n    },\n    ref: RefObject<HTMLDivElement>\n  ) => {\n    const activeCategoryId = useRef<string>();\n    const style = useMemo(() => {\n      if (maxOptionsWithoutScroll) {\n        // Adding 0.5 to show next option to indicate scroll is available\n        const maxCount = Math.min(options.length + Object.keys(categories ?? {}).length, maxOptionsWithoutScroll + 0.5);\n        return { height: optionLineHeight * maxCount };\n      }\n      return undefined;\n    }, [maxOptionsWithoutScroll, optionLineHeight, options, categories]);\n\n    const createItemElementRenderer = useCallback(\n      (item: IComboboxItem, index: number, style: CSSProperties) =>\n        comboboxItemRenderer({\n          stickyCategories,\n          item,\n          style,\n          optionEvents: {\n            onOptionClick,\n            onOptionEnter,\n            onOptionLeave\n          },\n          optionRenderData: {\n            className: optionClassName,\n            optionLineHeight,\n            optionRenderer,\n            visualFocusItemIndex,\n            scrollRef: renderOnlyVisibleOptions ? null : ref,\n            activeItemIndex,\n            shouldScrollToSelectedItem\n          },\n          isVirtualized: renderOnlyVisibleOptions\n        }),\n      [\n        onOptionClick,\n        onOptionEnter,\n        onOptionLeave,\n        optionClassName,\n        optionLineHeight,\n        optionRenderer,\n        visualFocusItemIndex,\n        renderOnlyVisibleOptions,\n        ref,\n        activeItemIndex,\n        shouldScrollToSelectedItem\n      ]\n    );\n\n    const onItemsRender = useCallback(\n      ({ firstItemId }: { firstItemId?: string }) => {\n        window.requestAnimationFrame(() => {\n          const itemData = itemsMap.get(firstItemId);\n          if (itemData && (itemData.type === COMBOBOX_CATEGORY_ITEM || itemData.type === COMBOBOX_OPTION_ITEM)) {\n            const newActiveCategoryId =\n              itemData.type === COMBOBOX_OPTION_ITEM && itemData.categoryId ? itemData.categoryId : itemData.id;\n\n            if (newActiveCategoryId !== activeCategoryId.current) {\n              activeCategoryId.current = newActiveCategoryId;\n              const categoryObject = itemsMap.get(activeCategoryId.current);\n              onActiveCategoryChanged(categoryObject);\n            }\n          }\n        });\n      },\n      [itemsMap, onActiveCategoryChanged]\n    );\n\n    let itemsElements;\n\n    // If we request to render only the items which visible in a given moment (optimization for very large lists)\n    if (renderOnlyVisibleOptions) {\n      itemsElements = (\n        <VirtualizedList\n          ref={ref}\n          className={cx(styles.optionsContainer, className)}\n          items={options}\n          itemRenderer={createItemElementRenderer}\n          role=\"listbox\"\n          scrollableClassName={styles.scrollableContainer}\n          onItemsRendered={onItemsRender}\n          style={style}\n          id={id}\n        />\n      );\n    } else {\n      itemsElements = (\n        <div\n          className={cx(styles.scrollableContainer, styles.optionsContainer, className)}\n          role=\"listbox\"\n          id={id}\n          style={style}\n          ref={ref}\n        >\n          {options.map((itemData, index) => createItemElementRenderer(itemData, index, undefined))}\n        </div>\n      );\n    }\n\n    return itemsElements;\n  }\n);\n"],"names":["ComboboxItems","forwardRef","_ref","ref","className","optionClassName","categories","options","optionRenderer","activeItemIndex","visualFocusItemIndex","onOptionClick","onOptionEnter","onOptionLeave","optionLineHeight","shouldScrollToSelectedItem","renderOnlyVisibleOptions","onActiveCategoryChanged","maxOptionsWithoutScroll","itemsMap","stickyCategories","id","activeCategoryId","useRef","style","useMemo","height","Math","min","length","Object","keys","createItemElementRenderer","useCallback","item","index","comboboxItemRenderer","optionEvents","optionRenderData","scrollRef","isVirtualized","onItemsRender","_ref2","firstItemId","window","requestAnimationFrame","itemData","get","type","COMBOBOX_CATEGORY_ITEM","COMBOBOX_OPTION_ITEM","newActiveCategoryId","categoryId","current","categoryObject","React","createElement","VirtualizedList","cx","styles","optionsContainer","items","itemRenderer","role","scrollableClassName","scrollableContainer","onItemsRendered","map","undefined"],"mappings":"8XAgCO,IAAMA,EAA8CC,GACzD,SAAAC,EAqBEC,GACE,IApBAC,EAASF,EAATE,UACAC,EAAeH,EAAfG,gBACAC,EAAUJ,EAAVI,WACAC,EAAOL,EAAPK,QACAC,EAAcN,EAAdM,eACAC,EAAeP,EAAfO,gBACAC,EAAoBR,EAApBQ,qBACAC,EAAaT,EAAbS,cACAC,EAAaV,EAAbU,cACAC,EAAaX,EAAbW,cACAC,EAAgBZ,EAAhBY,iBACAC,EAA0Bb,EAA1Ba,2BACAC,EAAwBd,EAAxBc,yBACAC,EAAuBf,EAAvBe,wBACAC,EAAuBhB,EAAvBgB,wBACAC,EAAQjB,EAARiB,SACAC,EAAgBlB,EAAhBkB,iBACAC,EAAEnB,EAAFmB,GAIIC,EAAmBC,IACnBC,EAAQC,GAAQ,WACpB,GAAIP,EAGF,MAAO,CAAEQ,OAAQZ,EADAa,KAAKC,IAAIrB,EAAQsB,OAASC,OAAOC,KAAKzB,QAAAA,EAAc,CAAA,GAAIuB,OAAQX,EAA0B,IAI9G,GAAE,CAACA,EAAyBJ,EAAkBP,EAASD,IAElD0B,EAA4BC,GAChC,SAACC,EAAqBC,EAAeX,GAAoB,OACvDY,EAAqB,CACnBhB,iBAAAA,EACAc,KAAAA,EACAV,MAAAA,EACAa,aAAc,CACZ1B,cAAAA,EACAC,cAAAA,EACAC,cAAAA,GAEFyB,iBAAkB,CAChBlC,UAAWC,EACXS,iBAAAA,EACAN,eAAAA,EACAE,qBAAAA,EACA6B,UAAWvB,EAA2B,KAAOb,EAC7CM,gBAAAA,EACAM,2BAAAA,GAEFyB,cAAexB,GAEnB,GAAA,CACEL,EACAC,EACAC,EACAR,EACAS,EACAN,EACAE,EACAM,EACAb,EACAM,EACAM,IAIE0B,EAAgBR,GACpB,SAAAS,GAA8C,IAA3CC,EAAWD,EAAXC,YACDC,OAAOC,uBAAsB,WAC3B,IAAMC,EAAW3B,EAAS4B,IAAIJ,GAC9B,GAAIG,IAAaA,EAASE,OAASC,GAA0BH,EAASE,OAASE,GAAuB,CACpG,IAAMC,EACJL,EAASE,OAASE,GAAwBJ,EAASM,WAAaN,EAASM,WAAaN,EAASzB,GAEjG,GAAI8B,IAAwB7B,EAAiB+B,QAAS,CACpD/B,EAAiB+B,QAAUF,EAC3B,IAAMG,EAAiBnC,EAAS4B,IAAIzB,EAAiB+B,SACrDpC,EAAwBqC,EACzB,CACF,CACH,GACF,GACA,CAACnC,EAAUF,IAkCb,OA5BID,EAEAuC,EAACC,cAAAC,GACCtD,IAAKA,EACLC,UAAWsD,EAAGC,EAAOC,iBAAkBxD,GACvCyD,MAAOtD,EACPuD,aAAc9B,EACd+B,KAAK,UACLC,oBAAqBL,EAAOM,oBAC5BC,gBAAiBzB,EACjBjB,MAAOA,EACPH,GAAIA,IAKNkC,EAAAC,cAAA,MAAA,CACEpD,UAAWsD,EAAGC,EAAOM,oBAAqBN,EAAOC,iBAAkBxD,GACnE2D,KAAK,UACL1C,GAAIA,EACJG,MAAOA,EACPrB,IAAKA,GAEJI,EAAQ4D,KAAI,SAACrB,EAAUX,GAAK,OAAKH,EAA0Bc,EAAUX,OAAOiC,EAAU,IAM/F"}
+{"version":3,"file":"ComboboxItems.js","sources":["../../../../../../../src/components/Combobox/components/ComboboxItems/ComboboxItems.tsx"],"sourcesContent":["import React, { CSSProperties, forwardRef, RefObject, useCallback, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { comboboxItemRenderer } from \"../../ComboboxHelpers/ComboboxHelpers\";\nimport VirtualizedList from \"../../../../components/VirtualizedList/VirtualizedList\";\nimport {\n  COMBOBOX_CATEGORY_ITEM,\n  COMBOBOX_OPTION_ITEM,\n  IComboboxCategoryMap,\n  IComboboxItem,\n  IComboboxOption,\n  IComboboxOptionEvents\n} from \"../ComboboxConstants\";\nimport styles from \"./ComboboxItems.module.scss\";\n\nexport interface ComboboxItemsProps extends IComboboxOptionEvents {\n  /**\n   * Class name applied to the options container.\n   */\n  className?: string;\n  /**\n   * Class name applied to individual options.\n   */\n  optionClassName?: string;\n  /**\n   * The categories available in the combobox.\n   */\n  categories?: IComboboxCategoryMap;\n  /**\n   * The list of options displayed in the combobox.\n   */\n  options?: IComboboxItem[];\n  /**\n   * Custom renderer for an option.\n   */\n  optionRenderer?: (option: IComboboxOption) => JSX.Element;\n  /**\n   * The index of the currently active item.\n   */\n  activeItemIndex?: number;\n  /**\n   * The index of the item with visual focus.\n   */\n  visualFocusItemIndex?: number;\n  /**\n   * The height of each option item.\n   */\n  optionLineHeight?: number;\n  /**\n   * If true, the list scrolls to the selected item when opened.\n   */\n  shouldScrollToSelectedItem?: boolean;\n  /**\n   * If true, only renders visible options (optimization for large lists).\n   */\n  renderOnlyVisibleOptions?: boolean;\n  /**\n   * Callback fired when the active category changes.\n   */\n  onActiveCategoryChanged?: (category: IComboboxItem) => void;\n  /**\n   * The maximum number of options displayed without scrolling.\n   */\n  maxOptionsWithoutScroll?: number;\n  /**\n   * A map of item IDs to item data.\n   */\n  itemsMap?: Map<string, IComboboxItem>;\n  /**\n   * If true, categories remain visible when scrolling.\n   */\n  stickyCategories?: boolean;\n  /**\n   * The ID of the options container.\n   */\n  id?: string;\n}\n\nexport const ComboboxItems: React.FC<ComboboxItemsProps> = forwardRef(\n  (\n    {\n      className,\n      optionClassName,\n      categories,\n      options,\n      optionRenderer,\n      activeItemIndex,\n      visualFocusItemIndex,\n      onOptionClick,\n      onOptionEnter,\n      onOptionLeave,\n      optionLineHeight,\n      shouldScrollToSelectedItem,\n      renderOnlyVisibleOptions,\n      onActiveCategoryChanged,\n      maxOptionsWithoutScroll,\n      itemsMap,\n      stickyCategories,\n      id\n    },\n    ref: RefObject<HTMLDivElement>\n  ) => {\n    const activeCategoryId = useRef<string>();\n    const style = useMemo(() => {\n      if (maxOptionsWithoutScroll) {\n        // Adding 0.5 to show next option to indicate scroll is available\n        const maxCount = Math.min(options.length + Object.keys(categories ?? {}).length, maxOptionsWithoutScroll + 0.5);\n        return { height: optionLineHeight * maxCount };\n      }\n      return undefined;\n    }, [maxOptionsWithoutScroll, optionLineHeight, options, categories]);\n\n    const createItemElementRenderer = useCallback(\n      (item: IComboboxItem, index: number, style: CSSProperties) =>\n        comboboxItemRenderer({\n          stickyCategories,\n          item,\n          style,\n          optionEvents: {\n            onOptionClick,\n            onOptionEnter,\n            onOptionLeave\n          },\n          optionRenderData: {\n            className: optionClassName,\n            optionLineHeight,\n            optionRenderer,\n            visualFocusItemIndex,\n            scrollRef: renderOnlyVisibleOptions ? null : ref,\n            activeItemIndex,\n            shouldScrollToSelectedItem\n          },\n          isVirtualized: renderOnlyVisibleOptions\n        }),\n      [\n        onOptionClick,\n        onOptionEnter,\n        onOptionLeave,\n        optionClassName,\n        optionLineHeight,\n        optionRenderer,\n        visualFocusItemIndex,\n        renderOnlyVisibleOptions,\n        ref,\n        activeItemIndex,\n        shouldScrollToSelectedItem\n      ]\n    );\n\n    const onItemsRender = useCallback(\n      ({ firstItemId }: { firstItemId?: string }) => {\n        window.requestAnimationFrame(() => {\n          const itemData = itemsMap.get(firstItemId);\n          if (itemData && (itemData.type === COMBOBOX_CATEGORY_ITEM || itemData.type === COMBOBOX_OPTION_ITEM)) {\n            const newActiveCategoryId =\n              itemData.type === COMBOBOX_OPTION_ITEM && itemData.categoryId ? itemData.categoryId : itemData.id;\n\n            if (newActiveCategoryId !== activeCategoryId.current) {\n              activeCategoryId.current = newActiveCategoryId;\n              const categoryObject = itemsMap.get(activeCategoryId.current);\n              onActiveCategoryChanged(categoryObject);\n            }\n          }\n        });\n      },\n      [itemsMap, onActiveCategoryChanged]\n    );\n\n    let itemsElements;\n\n    // If we request to render only the items which visible in a given moment (optimization for very large lists)\n    if (renderOnlyVisibleOptions) {\n      itemsElements = (\n        <VirtualizedList\n          ref={ref}\n          className={cx(styles.optionsContainer, className)}\n          items={options}\n          itemRenderer={createItemElementRenderer}\n          role=\"listbox\"\n          scrollableClassName={styles.scrollableContainer}\n          onItemsRendered={onItemsRender}\n          style={style}\n          id={id}\n        />\n      );\n    } else {\n      itemsElements = (\n        <div\n          className={cx(styles.scrollableContainer, styles.optionsContainer, className)}\n          role=\"listbox\"\n          id={id}\n          style={style}\n          ref={ref}\n        >\n          {options.map((itemData, index) => createItemElementRenderer(itemData, index, undefined))}\n        </div>\n      );\n    }\n\n    return itemsElements;\n  }\n);\n"],"names":["ComboboxItems","forwardRef","_ref","ref","className","optionClassName","categories","options","optionRenderer","activeItemIndex","visualFocusItemIndex","onOptionClick","onOptionEnter","onOptionLeave","optionLineHeight","shouldScrollToSelectedItem","renderOnlyVisibleOptions","onActiveCategoryChanged","maxOptionsWithoutScroll","itemsMap","stickyCategories","id","activeCategoryId","useRef","style","useMemo","height","Math","min","length","Object","keys","createItemElementRenderer","useCallback","item","index","comboboxItemRenderer","optionEvents","optionRenderData","scrollRef","isVirtualized","onItemsRender","_ref2","firstItemId","window","requestAnimationFrame","itemData","get","type","COMBOBOX_CATEGORY_ITEM","COMBOBOX_OPTION_ITEM","newActiveCategoryId","categoryId","current","categoryObject","React","createElement","VirtualizedList","cx","styles","optionsContainer","items","itemRenderer","role","scrollableClassName","scrollableContainer","onItemsRendered","map","undefined"],"mappings":"8XA6EO,IAAMA,EAA8CC,GACzD,SAAAC,EAqBEC,GACE,IApBAC,EAASF,EAATE,UACAC,EAAeH,EAAfG,gBACAC,EAAUJ,EAAVI,WACAC,EAAOL,EAAPK,QACAC,EAAcN,EAAdM,eACAC,EAAeP,EAAfO,gBACAC,EAAoBR,EAApBQ,qBACAC,EAAaT,EAAbS,cACAC,EAAaV,EAAbU,cACAC,EAAaX,EAAbW,cACAC,EAAgBZ,EAAhBY,iBACAC,EAA0Bb,EAA1Ba,2BACAC,EAAwBd,EAAxBc,yBACAC,EAAuBf,EAAvBe,wBACAC,EAAuBhB,EAAvBgB,wBACAC,EAAQjB,EAARiB,SACAC,EAAgBlB,EAAhBkB,iBACAC,EAAEnB,EAAFmB,GAIIC,EAAmBC,IACnBC,EAAQC,GAAQ,WACpB,GAAIP,EAGF,MAAO,CAAEQ,OAAQZ,EADAa,KAAKC,IAAIrB,EAAQsB,OAASC,OAAOC,KAAKzB,QAAAA,EAAc,CAAA,GAAIuB,OAAQX,EAA0B,IAI9G,GAAE,CAACA,EAAyBJ,EAAkBP,EAASD,IAElD0B,EAA4BC,GAChC,SAACC,EAAqBC,EAAeX,GAAoB,OACvDY,EAAqB,CACnBhB,iBAAAA,EACAc,KAAAA,EACAV,MAAAA,EACAa,aAAc,CACZ1B,cAAAA,EACAC,cAAAA,EACAC,cAAAA,GAEFyB,iBAAkB,CAChBlC,UAAWC,EACXS,iBAAAA,EACAN,eAAAA,EACAE,qBAAAA,EACA6B,UAAWvB,EAA2B,KAAOb,EAC7CM,gBAAAA,EACAM,2BAAAA,GAEFyB,cAAexB,GAEnB,GAAA,CACEL,EACAC,EACAC,EACAR,EACAS,EACAN,EACAE,EACAM,EACAb,EACAM,EACAM,IAIE0B,EAAgBR,GACpB,SAAAS,GAA8C,IAA3CC,EAAWD,EAAXC,YACDC,OAAOC,uBAAsB,WAC3B,IAAMC,EAAW3B,EAAS4B,IAAIJ,GAC9B,GAAIG,IAAaA,EAASE,OAASC,GAA0BH,EAASE,OAASE,GAAuB,CACpG,IAAMC,EACJL,EAASE,OAASE,GAAwBJ,EAASM,WAAaN,EAASM,WAAaN,EAASzB,GAEjG,GAAI8B,IAAwB7B,EAAiB+B,QAAS,CACpD/B,EAAiB+B,QAAUF,EAC3B,IAAMG,EAAiBnC,EAAS4B,IAAIzB,EAAiB+B,SACrDpC,EAAwBqC,EACzB,CACF,CACH,GACF,GACA,CAACnC,EAAUF,IAkCb,OA5BID,EAEAuC,EAACC,cAAAC,GACCtD,IAAKA,EACLC,UAAWsD,EAAGC,EAAOC,iBAAkBxD,GACvCyD,MAAOtD,EACPuD,aAAc9B,EACd+B,KAAK,UACLC,oBAAqBL,EAAOM,oBAC5BC,gBAAiBzB,EACjBjB,MAAOA,EACPH,GAAIA,IAKNkC,EAAAC,cAAA,MAAA,CACEpD,UAAWsD,EAAGC,EAAOM,oBAAqBN,EAAOC,iBAAkBxD,GACnE2D,KAAK,UACL1C,GAAIA,EACJG,MAAOA,EACPrB,IAAKA,GAEJI,EAAQ4D,KAAI,SAACrB,EAAUX,GAAK,OAAKH,EAA0Bc,EAAUX,OAAOiC,EAAU,IAM/F"}

package/dist/mocked_classnames/src/components/Combobox/components/ComboboxItems/ComboboxItems.module.scss.js

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

package/dist/mocked_classnames/src/components/Combobox/components/ComboboxOption/ComboboxOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxOption.js","sources":["../../../../../../../src/components/Combobox/components/ComboboxOption/ComboboxOption.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { RefObject, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport Icon from \"../../../Icon/Icon\";\nimport Tooltip from \"../../../Tooltip/Tooltip\";\nimport useIsOverflowing from \"../../../../hooks/useIsOverflowing/useIsOverflowing\";\nimport { keyCodes } from \"../../../../constants/keyCodes\";\nimport { getOptionId } from \"../../helpers\";\nimport { SubIcon, withStaticProps } from \"../../../../types\";\nimport {\n  ComboboxOptionIconType as ComboboxOptionIconTypeEnum,\n  IComboboxOption,\n  IComboboxOptionEvents\n} from \"../ComboboxConstants\";\nimport { 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  index?: number;\n  option?: IComboboxOption;\n  className?: string;\n  isActive?: boolean;\n  visualFocus?: boolean;\n  scrollRef?: RefObject<HTMLElement>;\n  scrollOffset?: number;\n  optionLineHeight?: number;\n  shouldScrollWhenActive?: boolean;\n  optionRenderer?: (option: IComboboxOption) => JSX.Element;\n}\n\nconst ComboboxOption: React.FC<ComboboxOptionProps> & { iconTypes?: typeof ComboboxOptionIconTypeEnum } = ({\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}) => {\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 content={tooltipContent}>\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 withStaticProps(ComboboxOption, { iconTypes: ComboboxOptionIconTypeEnum });\n"],"names":["withStaticProps","_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","content","getOptionId","getTestId","ComponentDefaultTestId","COMBOBOX_OPTION","comboboxOption","_defineProperty","active","activeOutline","style","height","iconTypes","ComboboxOptionIconTypeEnum"],"mappings":"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"}
+{"version":3,"file":"ComboboxOption.js","sources":["../../../../../../../src/components/Combobox/components/ComboboxOption/ComboboxOption.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { RefObject, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport Icon from \"../../../Icon/Icon\";\nimport Tooltip from \"../../../Tooltip/Tooltip\";\nimport useIsOverflowing from \"../../../../hooks/useIsOverflowing/useIsOverflowing\";\nimport { keyCodes } from \"../../../../constants/keyCodes\";\nimport { getOptionId } from \"../../helpers\";\nimport { SubIcon, withStaticProps } from \"../../../../types\";\nimport {\n  ComboboxOptionIconType as ComboboxOptionIconTypeEnum,\n  IComboboxOption,\n  IComboboxOptionEvents\n} from \"../ComboboxConstants\";\nimport { 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: React.FC<ComboboxOptionProps> & { iconTypes?: typeof ComboboxOptionIconTypeEnum } = ({\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}) => {\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 content={tooltipContent}>\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 withStaticProps(ComboboxOption, { iconTypes: ComboboxOptionIconTypeEnum });\n"],"names":["withStaticProps","_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","content","getOptionId","getTestId","ComponentDefaultTestId","COMBOBOX_OPTION","comboboxOption","_defineProperty","active","activeOutline","style","height","iconTypes","ComboboxOptionIconTypeEnum"],"mappings":"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"}

package/dist/mocked_classnames/src/components/Combobox/components/ComboboxOption/ComboboxOption.module.scss.js

@@ -1,2 +1,2 @@
-var o={comboboxOption:"comboboxOption",disabled:"disabled",selected:"selected",active:"active",activeOutline:"activeOutline",optionLabel:"optionLabel",optionIcon:"optionIcon",left:"left"};!function(o){const n="s_id-cc5db5fd586e_3_34_2";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,e.firstChild?e.insertBefore(t,e.firstChild):e.appendChild(t),t.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=o)}(".comboboxOption {\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\n.comboboxOption.disabled {\n  cursor: not-allowed;\n  border-color: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n}\n\n.comboboxOption.disabled:hover {\n  background-color: transparent;\n}\n\n.comboboxOption.selected {\n  background-color: var(--primary-selected-color);\n}\n\n.comboboxOption:hover:not(.disabled):not(.selected),\n.comboboxOption.active {\n  color: var(--primary-text-color);\n  background-color: var(--primary-background-hover-color);\n  position: relative;\n}\n\n.comboboxOption.activeOutline {\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\n.comboboxOption .optionLabel {\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.comboboxOption .optionIcon {\n  flex: 0 0 auto;\n}\n\n.comboboxOption .optionIcon.left {\n  margin-right: 4px;\n}");export{o as default};
+var o={comboboxOption:"comboboxOption",disabled:"disabled",selected:"selected",active:"active",activeOutline:"activeOutline",optionLabel:"optionLabel",optionIcon:"optionIcon",left:"left"};!function(o){const n="s_id-cc5db5fd586e_3_35_0";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,e.firstChild?e.insertBefore(t,e.firstChild):e.appendChild(t),t.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=o)}(".comboboxOption {\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\n.comboboxOption.disabled {\n  cursor: not-allowed;\n  border-color: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n}\n\n.comboboxOption.disabled:hover {\n  background-color: transparent;\n}\n\n.comboboxOption.selected {\n  background-color: var(--primary-selected-color);\n}\n\n.comboboxOption:hover:not(.disabled):not(.selected),\n.comboboxOption.active {\n  color: var(--primary-text-color);\n  background-color: var(--primary-background-hover-color);\n  position: relative;\n}\n\n.comboboxOption.activeOutline {\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\n.comboboxOption .optionLabel {\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.comboboxOption .optionIcon {\n  flex: 0 0 auto;\n}\n\n.comboboxOption .optionIcon.left {\n  margin-right: 4px;\n}");export{o as default};
 //# sourceMappingURL=ComboboxOption.module.scss.js.map

package/dist/mocked_classnames/src/components/Combobox/components/StickyCategoryHeader/StickyCategoryHeader.module.scss.js

@@ -1,2 +1,2 @@
-var e={stickyCategoryHeader:"stickyCategoryHeader"};!function(e){const t="s_id-f549b49034f1_3_34_2";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 {\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"};!function(e){const t="s_id-f549b49034f1_3_35_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 {\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/mocked_classnames/src/components/Counter/Counter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Counter.js","sources":["../../../../../src/components/Counter/Counter.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\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 VibeComponentProps from \"../../types/VibeComponentProps\";\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 { CounterColor, CounterSize, CounterType } from \"./Counter.types\";\nimport { withStaticProps } from \"../../types\";\nimport styles from \"./Counter.module.scss\";\n\nexport interface CounterProps extends VibeComponentProps {\n  /** id to pass to the element */\n  id?: string;\n  /** element id to describe the counter accordingly */\n  ariaLabeledBy?: string;\n  /** Custom class names to pass to the component wrapper */\n  className?: string;\n  /** Custom class names to pass to the component */\n  counterClassName?: string;\n  /** The numeric value of the counter */\n  count?: number;\n  /** Counter description */\n  ariaLabel?: string;\n  /** The size of the counter */\n  size?: CounterSize;\n  kind?: CounterType;\n  /** The color of the counter */\n  color?: CounterColor;\n  /** maximum number of digits to display (see relevant story) */\n  maxDigits?: number;\n  /** Text prepended to counter value */\n  prefix?: string;\n  /** Callback to be called when the counter is clicked. */\n  onMouseDown?: (event: React.MouseEvent<HTMLSpanElement>) => void;\n  /** Disables the component's animation */\n  noAnimation?: boolean;\n}\n\nconst Counter: React.FC<CounterProps> & {\n  sizes?: typeof CounterSizeEnum;\n  colors?: typeof CounterColorEnum;\n  kinds?: typeof CounterTypeEnum;\n} = ({\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\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    >\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              classNames={{\n                enter: styles.fadeEnter,\n                enterActive: styles.fadeEnterActive,\n                exit: styles.fadeExit,\n                exitActive: styles.fadeExitActive\n              }}\n              // @ts-expect-error @definitelyTyped typings expecting a single parameter for some reason when the function passed here is called with two parameters\n              // See https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L522-L534\n              addEndListener={(node: HTMLElement, done: () => void) => {\n                node.addEventListener(\"transitionend\", done, false);\n              }}\n            >\n              <span id={counterId} data-testid={dataTestId || getTestId(ComponentDefaultTestId.COUNTER, id)}>\n                {prefix + countText}\n              </span>\n            </CSSTransition>\n          </SwitchTransition>\n        )}\n      </div>\n    </span>\n  );\n};\n\nexport default withStaticProps(Counter, {\n  sizes: CounterSizeEnum,\n  colors: CounterColorEnum,\n  kinds: CounterTypeEnum\n});\n"],"names":["withStaticProps","_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","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","SwitchTransition","mode","CSSTransition","key","enter","fadeEnter","enterActive","fadeEnterActive","exit","fadeExit","exitActive","fadeExitActive","addEndListener","node","done","addEventListener","sizes","CounterSizeEnum","colors","CounterColorEnum","kinds","CounterTypeEnum"],"mappings":"22BA+CA,IA8GeA,EAAAA,GA1GX,SAJSC,GAmBM,IAdjBC,EAASD,EAATC,UACAC,EAAgBF,EAAhBE,iBAAgBC,EAAAH,EAChBI,MAAAA,OAAQ,IAAHD,EAAG,EAACA,EAAAE,EAAAL,EACTM,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EAAAE,EAAAP,EACdQ,KAAAA,OAAO,IAAHD,EAAG,OAAMA,EAAAE,EAAAT,EACbU,MAAAA,OAAQ,IAAHD,EAAG,UAASA,EAAAE,EAAAX,EACjBY,UAAAA,OAAY,IAAHD,EAAG,EAACA,EAAAE,EAAAb,EACbc,cAAAA,OAAgB,IAAHD,EAAG,GAAEA,EAAAE,EAAAf,EAClBgB,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EAAAE,EAAAjB,EACdkB,GAAAA,OAAK,IAAHD,EAAG,GAAEA,EAAAE,EAAAnB,EACPoB,OAAAA,OAAS,IAAHD,EAAG,GAAEA,EAAAE,EAAArB,EACXsB,YAAAA,OAAcC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAxB,EAClByB,YAAAA,OAAc,IAAHD,GAAQA,EACJE,EAAU1B,EAAzB,eAEA2B,EAAkEC,GAAS,GAAMC,EAAAC,EAAAH,EAAA,GAA1EI,EAAyBF,EAAA,GAAEG,EAA4BH,EAAA,GAExDI,EAAMC,EAAuB,MAE7BC,EAAiCC,GAAY,WACjDJ,GAA6B,EAC/B,GAAG,CAACA,IAEEK,EAAoCD,GAAY,WACpDJ,GAA6B,EAC/B,GAAG,CAACA,IAEJM,EAAiB,CACfC,UAAW,eACXC,SAAUH,EACVJ,IAAAA,IAGF,IAAMQ,EAAqBC,IAE3BC,GAAU,WACJF,EAAmBG,SACrBT,GAEH,GAAE,CAAC/B,EAAOqC,EAAoBN,IAE/BQ,GAAU,WACJ/B,EAAa,GACfiC,QAAQC,MAAM,uCAElB,GAAG,CAAClC,IAEJ,IAAMmC,EAAaC,GAAQ,WACzB,OAAOC,EACLC,EAAOC,QACPC,EAASF,EAAQG,EAAU,QAAU/C,IACrC8C,EAASF,EAAQG,EAAU,QAAU7C,IACrC4C,EAASF,EAAQG,EAAU,SAAW3C,IAAO4C,EAAA,CAAA,EAE1CJ,EAAOK,cAAgBxB,GAE1B7B,EAEJ,GAAG,CAACI,EAAME,EAAME,EAAOqB,EAA2B7B,IAE5CsD,GAAY,WAAatC,EAAEuC,IAAAA,OAAOvC,GAAO,IACzCwC,IAAYtD,aAAK,GAALA,MAAkBuD,QAAS/C,EAAS,GAAA6C,OAAMG,KAAAC,IAAA,GAAMjD,GAAY,OAAcR,EAAP0D,GAC/EX,GACJY,EAAMC,cAAA,OAAA,CAAA9C,GAAIsC,GAAS,cAAe9B,GAAcuC,EAAUC,EAAuBC,QAASjD,IACvFE,EAASsC,IAId,OACEK,EACEC,cAAA,OAAA,CAAA/D,UAAWA,yBACIe,OAASyC,OAAIC,IACX,kBAAA5C,EACjBQ,YAAaA,GAEbyC,EAAKC,cAAA,MAAA,CAAA/D,UAAW8C,EAAwB,aAAAW,GAAWzB,IAAKA,GACrDR,EACC0B,GAEAY,EAAAC,cAACI,EAAgB,CAACC,KAAK,UACrBN,EAAAC,cAACM,EACC,CAAAC,IAAKb,GACLX,WAAY,CACVyB,MAAOtB,EAAOuB,UACdC,YAAaxB,EAAOyB,gBACpBC,KAAM1B,EAAO2B,SACbC,WAAY5B,EAAO6B,gBAIrBC,eAAgB,SAACC,EAAmBC,GAClCD,EAAKE,iBAAiB,gBAAiBD,GAAM,EAC/C,GAEAnB,EAAMC,cAAA,OAAA,CAAA9C,GAAIsC,GAAwB,cAAA9B,GAAcuC,EAAUC,EAAuBC,QAASjD,IACvFE,EAASsC,OAQ1B,GAEwC,CACtC0B,MAAOC,EACPC,OAAQC,EACRC,MAAOC"}
+{"version":3,"file":"Counter.js","sources":["../../../../../src/components/Counter/Counter.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\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 VibeComponentProps from \"../../types/VibeComponentProps\";\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 { CounterColor, CounterSize, CounterType } from \"./Counter.types\";\nimport { withStaticProps } from \"../../types\";\nimport styles from \"./Counter.module.scss\";\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: React.FC<CounterProps> & {\n  sizes?: typeof CounterSizeEnum;\n  colors?: typeof CounterColorEnum;\n  kinds?: typeof CounterTypeEnum;\n} = ({\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\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    >\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              classNames={{\n                enter: styles.fadeEnter,\n                enterActive: styles.fadeEnterActive,\n                exit: styles.fadeExit,\n                exitActive: styles.fadeExitActive\n              }}\n              // @ts-expect-error @definitelyTyped typings expecting a single parameter for some reason when the function passed here is called with two parameters\n              // See https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L522-L534\n              addEndListener={(node: HTMLElement, done: () => void) => {\n                node.addEventListener(\"transitionend\", done, false);\n              }}\n            >\n              <span id={counterId} data-testid={dataTestId || getTestId(ComponentDefaultTestId.COUNTER, id)}>\n                {prefix + countText}\n              </span>\n            </CSSTransition>\n          </SwitchTransition>\n        )}\n      </div>\n    </span>\n  );\n};\n\nexport default withStaticProps(Counter, {\n  sizes: CounterSizeEnum,\n  colors: CounterColorEnum,\n  kinds: CounterTypeEnum\n});\n"],"names":["withStaticProps","_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","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","SwitchTransition","mode","CSSTransition","key","enter","fadeEnter","enterActive","fadeEnterActive","exit","fadeExit","exitActive","fadeExitActive","addEndListener","node","done","addEventListener","sizes","CounterSizeEnum","colors","CounterColorEnum","kinds","CounterTypeEnum"],"mappings":"22BAkEA,IA8GeA,EAAAA,GA1GX,SAJSC,GAmBM,IAdjBC,EAASD,EAATC,UACAC,EAAgBF,EAAhBE,iBAAgBC,EAAAH,EAChBI,MAAAA,OAAQ,IAAHD,EAAG,EAACA,EAAAE,EAAAL,EACTM,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EAAAE,EAAAP,EACdQ,KAAAA,OAAO,IAAHD,EAAG,OAAMA,EAAAE,EAAAT,EACbU,MAAAA,OAAQ,IAAHD,EAAG,UAASA,EAAAE,EAAAX,EACjBY,UAAAA,OAAY,IAAHD,EAAG,EAACA,EAAAE,EAAAb,EACbc,cAAAA,OAAgB,IAAHD,EAAG,GAAEA,EAAAE,EAAAf,EAClBgB,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EAAAE,EAAAjB,EACdkB,GAAAA,OAAK,IAAHD,EAAG,GAAEA,EAAAE,EAAAnB,EACPoB,OAAAA,OAAS,IAAHD,EAAG,GAAEA,EAAAE,EAAArB,EACXsB,YAAAA,OAAcC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAxB,EAClByB,YAAAA,OAAc,IAAHD,GAAQA,EACJE,EAAU1B,EAAzB,eAEA2B,EAAkEC,GAAS,GAAMC,EAAAC,EAAAH,EAAA,GAA1EI,EAAyBF,EAAA,GAAEG,EAA4BH,EAAA,GAExDI,EAAMC,EAAuB,MAE7BC,EAAiCC,GAAY,WACjDJ,GAA6B,EAC/B,GAAG,CAACA,IAEEK,EAAoCD,GAAY,WACpDJ,GAA6B,EAC/B,GAAG,CAACA,IAEJM,EAAiB,CACfC,UAAW,eACXC,SAAUH,EACVJ,IAAAA,IAGF,IAAMQ,EAAqBC,IAE3BC,GAAU,WACJF,EAAmBG,SACrBT,GAEH,GAAE,CAAC/B,EAAOqC,EAAoBN,IAE/BQ,GAAU,WACJ/B,EAAa,GACfiC,QAAQC,MAAM,uCAElB,GAAG,CAAClC,IAEJ,IAAMmC,EAAaC,GAAQ,WACzB,OAAOC,EACLC,EAAOC,QACPC,EAASF,EAAQG,EAAU,QAAU/C,IACrC8C,EAASF,EAAQG,EAAU,QAAU7C,IACrC4C,EAASF,EAAQG,EAAU,SAAW3C,IAAO4C,EAAA,CAAA,EAE1CJ,EAAOK,cAAgBxB,GAE1B7B,EAEJ,GAAG,CAACI,EAAME,EAAME,EAAOqB,EAA2B7B,IAE5CsD,GAAY,WAAatC,EAAEuC,IAAAA,OAAOvC,GAAO,IACzCwC,IAAYtD,aAAK,GAALA,MAAkBuD,QAAS/C,EAAS,GAAA6C,OAAMG,KAAAC,IAAA,GAAMjD,GAAY,OAAcR,EAAP0D,GAC/EX,GACJY,EAAMC,cAAA,OAAA,CAAA9C,GAAIsC,GAAS,cAAe9B,GAAcuC,EAAUC,EAAuBC,QAASjD,IACvFE,EAASsC,IAId,OACEK,EACEC,cAAA,OAAA,CAAA/D,UAAWA,yBACIe,OAASyC,OAAIC,IACX,kBAAA5C,EACjBQ,YAAaA,GAEbyC,EAAKC,cAAA,MAAA,CAAA/D,UAAW8C,EAAwB,aAAAW,GAAWzB,IAAKA,GACrDR,EACC0B,GAEAY,EAAAC,cAACI,EAAgB,CAACC,KAAK,UACrBN,EAAAC,cAACM,EACC,CAAAC,IAAKb,GACLX,WAAY,CACVyB,MAAOtB,EAAOuB,UACdC,YAAaxB,EAAOyB,gBACpBC,KAAM1B,EAAO2B,SACbC,WAAY5B,EAAO6B,gBAIrBC,eAAgB,SAACC,EAAmBC,GAClCD,EAAKE,iBAAiB,gBAAiBD,GAAM,EAC/C,GAEAnB,EAAMC,cAAA,OAAA,CAAA9C,GAAIsC,GAAwB,cAAA9B,GAAcuC,EAAUC,EAAuBC,QAASjD,IACvFE,EAASsC,OAQ1B,GAEwC,CACtC0B,MAAOC,EACPC,OAAQC,EACRC,MAAOC"}

package/dist/mocked_classnames/src/components/Counter/Counter.module.scss.js

@@ -1,2 +1,2 @@
-var n={counter:"counter",withAnimation:"withAnimation",counterPopElastic:"counterPopElastic",sizeXs:"sizeXs",sizeSmall:"sizeSmall",sizeLarge:"sizeLarge",kindFill:"kindFill",colorPrimary:"colorPrimary",colorDark:"colorDark",colorNegative:"colorNegative",colorLight:"colorLight",kindLine:"kindLine",fadeEnter:"fadeEnter",fadeEnterActive:"fadeEnterActive",fadeExit:"fadeExit",fadeExitActive:"fadeExitActive","counter-pop-elastic":"counter-pop-elastic"};!function(n){const o="s_id-51f4f5079107_3_34_2";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+o))return;const r=document.createElement("style");r.id=o,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=n)}(".counter {\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 {\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 {\n  animation: counterPopElastic var(--motion-expressive-short);\n}\n.sizeXs {\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 {\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 {\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.colorPrimary {\n  color: var(--fixed-light-color);\n  background-color: var(--primary-color);\n}\n.kindFill.colorDark {\n  color: var(--text-color-on-inverted);\n  background-color: var(--inverted-color-background);\n}\n.kindFill.colorNegative {\n  color: var(--fixed-light-color);\n  background-color: var(--negative-color);\n}\n.kindFill.colorLight {\n  color: var(--primary-text-color);\n  background-color: var(--ui-background-color);\n}\n.kindLine {\n  box-shadow: 0 0 0 1px currentColor inset;\n}\n.kindLine.colorPrimary {\n  color: var(--primary-color);\n}\n.kindLine.colorDark {\n  color: var(--inverted-color-background);\n}\n.kindLine.colorNegative {\n  color: var(--negative-color);\n}\n.kindLine.colorLight {\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 {\n  opacity: 0;\n  transform: translateY(15px);\n}\n.fadeEnterActive {\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 {\n  position: relative;\n  opacity: 1;\n  transform: translateY(0);\n}\n.fadeExitActive {\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",withAnimation:"withAnimation",counterPopElastic:"counterPopElastic",sizeXs:"sizeXs",sizeSmall:"sizeSmall",sizeLarge:"sizeLarge",kindFill:"kindFill",colorPrimary:"colorPrimary",colorDark:"colorDark",colorNegative:"colorNegative",colorLight:"colorLight",kindLine:"kindLine",fadeEnter:"fadeEnter",fadeEnterActive:"fadeEnterActive",fadeExit:"fadeExit",fadeExitActive:"fadeExitActive","counter-pop-elastic":"counter-pop-elastic"};!function(n){const o="s_id-51f4f5079107_3_35_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+o))return;const r=document.createElement("style");r.id=o,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=n)}(".counter {\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 {\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 {\n  animation: counterPopElastic var(--motion-expressive-short);\n}\n.sizeXs {\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 {\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 {\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.colorPrimary {\n  color: var(--fixed-light-color);\n  background-color: var(--primary-color);\n}\n.kindFill.colorDark {\n  color: var(--text-color-on-inverted);\n  background-color: var(--inverted-color-background);\n}\n.kindFill.colorNegative {\n  color: var(--fixed-light-color);\n  background-color: var(--negative-color);\n}\n.kindFill.colorLight {\n  color: var(--primary-text-color);\n  background-color: var(--ui-background-color);\n}\n.kindLine {\n  box-shadow: 0 0 0 1px currentColor inset;\n}\n.kindLine.colorPrimary {\n  color: var(--primary-color);\n}\n.kindLine.colorDark {\n  color: var(--inverted-color-background);\n}\n.kindLine.colorNegative {\n  color: var(--negative-color);\n}\n.kindLine.colorLight {\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 {\n  opacity: 0;\n  transform: translateY(15px);\n}\n.fadeEnterActive {\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 {\n  position: relative;\n  opacity: 1;\n  transform: translateY(0);\n}\n.fadeExitActive {\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/mocked_classnames/src/components/DatePicker/DateNavigationItem/DateNavigationItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateNavigationItem.js","sources":["../../../../../../src/components/DatePicker/DateNavigationItem/DateNavigationItem.tsx"],"sourcesContent":["import React from \"react\";\nimport Icon from \"../../Icon/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  kind: keyof typeof ICONS;\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":"qOAKA,IAAMA,EAAQ,CACZC,KAAMC,EACNC,KAAMC,GAQFC,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"}
+{"version":3,"file":"DateNavigationItem.js","sources":["../../../../../../src/components/DatePicker/DateNavigationItem/DateNavigationItem.tsx"],"sourcesContent":["import React from \"react\";\nimport Icon from \"../../Icon/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":"qOAKA,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/mocked_classnames/src/components/DatePicker/DateNavigationItem/DateNavigationItem.module.scss.js

@@ -1,2 +1,2 @@
-var e={navigationItemContainer:"navigationItemContainer"};!function(e){const n="s_id-84193b4fa4fe_3_34_2";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 {\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};
+var e={navigationItemContainer:"navigationItemContainer"};!function(e){const n="s_id-84193b4fa4fe_3_35_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 {\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};
 //# sourceMappingURL=DateNavigationItem.module.scss.js.map