@vibe/core 3.70.2-alpha-96f20.0 → 3.70.2

package/dist/src/components/Chips/Chips.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chips.js","sources":["../../../../src/components/Chips/Chips.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport Icon from \"../Icon/Icon\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport { getCSSVar } from \"../../services/themes\";\nimport { ElementAllowedColor as ElementAllowedColorEnum } from \"../../utils/colors-vars-map\";\nimport { type ElementAllowedColor, getElementColor } from \"../../types/Colors\";\nimport Avatar from \"../Avatar/Avatar\";\nimport IconButton from \"../IconButton/IconButton\";\nimport Text from \"../Text/Text\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { AvatarType as AvatarTypeEnum } from \"../Avatar/AvatarConstants\";\nimport { type AvatarType } from \"../Avatar\";\nimport { type ElementContent, type SubIcon, type VibeComponentProps, withStaticProps } from \"../../types\";\n\nimport useSetFocus from \"../../hooks/useSetFocus\";\nimport useClickableProps from \"../../hooks/useClickableProps/useClickableProps\";\nimport styles from \"./Chips.module.scss\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst CHIPS_AVATAR_SIZE = 18;\n\nexport interface ChipsProps extends VibeComponentProps {\n  /**\n   * The text or content displayed inside the chip.\n   */\n  label?: ElementContent;\n  /**\n   * If true, the chip is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If true, the chip is read-only and cannot be deleted.\n   */\n  readOnly?: boolean;\n  /**\n   * A React element displayed on the right side.\n   */\n  rightRenderer?: ElementContent;\n  /**\n   * A React element displayed on the left side.\n   */\n  leftRenderer?: ElementContent;\n  /**\n   * Icon displayed on the right side.\n   */\n  rightIcon?: SubIcon;\n  /**\n   * Icon displayed on the left side.\n   */\n  leftIcon?: SubIcon;\n  /**\n   * Image URL or text for an avatar displayed on the right.\n   */\n  rightAvatar?: string;\n  /**\n   * The type of avatar displayed on the right.\n   */\n  rightAvatarType?: AvatarType;\n  /**\n   * Image URL or text for an avatar displayed on the left.\n   */\n  leftAvatar?: string;\n  /**\n   * The type of avatar displayed on the left.\n   */\n  leftAvatarType?: AvatarType;\n  /**\n   * Class name applied to left or right icons.\n   */\n  iconClassName?: string;\n  /**\n   * Class name applied to left or right avatars.\n   */\n  avatarClassName?: string;\n  /**\n   * The background color of the chip.\n   */\n  color?: Exclude<ElementAllowedColor, \"dark_indigo\" | \"blackish\">;\n  /**\n   * The size of the icons inside the chip.\n   */\n  iconSize?: number | string;\n  /**\n   * Callback fired when the chip is deleted.\n   */\n  onDelete?: (id: string, event: React.MouseEvent<HTMLSpanElement>) => void;\n  /**\n   * If true, disables the chip's entry animation.\n   */\n  noAnimation?: boolean;\n  /**\n   * If true, allows the user to select text inside the chip.\n   */\n  allowTextSelection?: boolean;\n  /**\n   * Callback fired when the mouse button is pressed on the chip.\n   */\n  onMouseDown?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  /**\n   * Callback fired when the chip is clicked.\n   */\n  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  /**\n   * The label of the chip for accessibility.\n   */\n  ariaLabel?: string;\n  /**\n   * If true, indicates that the chip has a popup.\n   */\n  ariaHasPopup?: boolean;\n  /**\n   * If true, disables all click behaviors.\n   */\n  disableClickableBehavior?: boolean;\n  /**\n   * If true, displays a border around the chip.\n   */\n  showBorder?: boolean;\n  /**\n   * The label for the close button.\n   */\n  closeButtonAriaLabel?: string;\n  /**\n   * If true, removes the default margin from the chip.\n   */\n  noMargin?: boolean;\n}\n\nconst Chips = forwardRef(\n  (\n    {\n      className,\n      avatarClassName,\n      iconClassName,\n      id,\n      label = \"\",\n      leftIcon = null,\n      rightIcon = null,\n      leftAvatar = null,\n      rightAvatar = null,\n      disabled = false,\n      readOnly = false,\n      allowTextSelection = false,\n      color = \"primary\",\n      iconSize = 18,\n      onDelete = (_id: string, _e: React.MouseEvent<HTMLSpanElement>) => {},\n      onMouseDown,\n      onClick,\n      noAnimation = true,\n      ariaLabel,\n      ariaHasPopup = false,\n      \"data-testid\": dataTestId,\n      disableClickableBehavior = false,\n      leftAvatarType = \"img\",\n      rightAvatarType = \"img\",\n      showBorder = false,\n      leftRenderer,\n      rightRenderer,\n      closeButtonAriaLabel = \"Remove\",\n      noMargin = false\n    }: ChipsProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const componentDataTestId = dataTestId || getTestId(ComponentDefaultTestId.CHIP, id);\n    const hasClickableWrapper = (!!onClick || !!onMouseDown) && !disableClickableBehavior;\n    const hasCloseButton = !readOnly && !disabled;\n    const overrideAriaLabel = ariaLabel || (typeof label === \"string\" && label) || \"\";\n\n    const iconButtonRef = useRef(null);\n    const componentRef = useRef(null);\n\n    const [isHovered, setIsHovered] = useState(false);\n    const handleMouseEnter = useCallback(() => setIsHovered(true), []);\n    const handleMouseLeave = useCallback(() => setIsHovered(false), []);\n    const { isFocused } = useSetFocus({ ref: componentRef });\n\n    const mergedRef = useMergeRef<HTMLDivElement>(ref, componentRef);\n\n    const overrideClassName = cx(styles.chips, className, {\n      [styles.disabled]: disabled,\n      [styles.noAnimation]: noAnimation,\n      [styles.withUserSelect]: allowTextSelection,\n      [styles.border]: showBorder,\n      [styles.noMargin]: noMargin\n    });\n    const clickableClassName = cx(styles.clickable, overrideClassName, {\n      [styles.disabled]: disabled,\n      [styles.disableTextSelection]: !allowTextSelection\n    });\n\n    const backgroundColorStyle = useMemo(() => {\n      let cssVar;\n      if (disabled) {\n        cssVar = getCSSVar(\"disabled-background-color\");\n      } else if (hasClickableWrapper && (isHovered || isFocused)) {\n        cssVar = getElementColor(color, true, true);\n      } else {\n        cssVar = getElementColor(color, true);\n      }\n      return { backgroundColor: cssVar };\n    }, [disabled, hasClickableWrapper, isHovered, isFocused, color]);\n\n    const onDeleteCallback = useCallback(\n      (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {\n        e.stopPropagation();\n        if (onDelete) {\n          onDelete(id, e);\n        }\n      },\n      [id, onDelete]\n    );\n\n    const onClickCallback = useCallback(\n      (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n        if (onClick !== undefined && (e.target as HTMLElement) !== iconButtonRef.current) {\n          e.preventDefault();\n          onClick(e);\n        }\n      },\n      [onClick]\n    );\n\n    const clickableProps = useClickableProps(\n      {\n        onClick: onClickCallback,\n        onMouseDown,\n        disabled,\n        id,\n        \"data-testid\": componentDataTestId,\n        ariaLabel: overrideAriaLabel,\n        ariaHidden: false,\n        ariaHasPopup,\n        ariaExpanded: false\n      },\n      mergedRef\n    );\n    const wrapperProps = hasClickableWrapper\n      ? {\n          ...clickableProps,\n          ref: mergedRef,\n          className: clickableClassName,\n          style: backgroundColorStyle,\n          onMouseEnter: handleMouseEnter,\n          onMouseLeave: handleMouseLeave\n        }\n      : {\n          className: overrideClassName,\n          \"aria-label\": overrideAriaLabel,\n          style: backgroundColorStyle,\n          ref: mergedRef,\n          onClick: onClickCallback,\n          onMouseDown,\n          id: id,\n          \"data-testid\": componentDataTestId,\n          onMouseEnter: handleMouseEnter,\n          onMouseLeave: handleMouseLeave\n        };\n\n    const leftAvatarProps = leftAvatarType === \"text\" ? { text: leftAvatar } : { src: leftAvatar };\n    const rightAvatarProps = leftAvatarType === \"text\" ? { text: rightAvatar } : { src: rightAvatar };\n\n    return (\n      <div {...wrapperProps} data-vibe={ComponentVibeId.CHIPS}>\n        {leftAvatar ? (\n          <Avatar\n            withoutBorder\n            className={cx(styles.avatar, styles.left, avatarClassName)}\n            customSize={CHIPS_AVATAR_SIZE}\n            type={leftAvatarType}\n            key={id}\n            {...leftAvatarProps}\n          />\n        ) : null}\n        {leftIcon ? (\n          <Icon\n            className={cx(styles.icon, styles.left, iconClassName)}\n            iconType=\"font\"\n            icon={leftIcon}\n            iconSize={iconSize}\n            ignoreFocusStyle\n          />\n        ) : null}\n        {leftRenderer && <div className={cx(styles.customRenderer, styles.left)}>{leftRenderer}</div>}\n        <Text type=\"text2\" className={styles.label}>\n          {label}\n        </Text>\n        {rightIcon ? (\n          <Icon\n            className={cx(styles.icon, styles.right, iconClassName)}\n            iconType=\"font\"\n            icon={rightIcon}\n            iconSize={iconSize}\n            ignoreFocusStyle\n          />\n        ) : null}\n        {rightAvatar ? (\n          <Avatar\n            withoutBorder\n            className={cx(styles.avatar, styles.right, avatarClassName)}\n            customSize={CHIPS_AVATAR_SIZE}\n            type={rightAvatarType}\n            key={id}\n            {...rightAvatarProps}\n          />\n        ) : null}\n        {rightRenderer && <div className={cx(styles.customRenderer, styles.right)}>{rightRenderer}</div>}\n        {hasCloseButton && (\n          <IconButton\n            size=\"xxs\"\n            color=\"on-primary-color\"\n            className={cx(styles.icon, styles.close)}\n            ariaLabel={closeButtonAriaLabel}\n            hideTooltip\n            icon={CloseSmall}\n            onClick={onDeleteCallback}\n            data-testid={`${componentDataTestId}-close`}\n            ref={iconButtonRef}\n          />\n        )}\n      </div>\n    );\n  }\n);\n\ninterface ChipsStaticProps {\n  colors: typeof ElementAllowedColorEnum;\n  avatarTypes: typeof AvatarTypeEnum;\n}\n\nexport default withStaticProps<ChipsProps, ChipsStaticProps>(Chips, {\n  colors: ElementAllowedColorEnum,\n  avatarTypes: AvatarTypeEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","avatarClassName","iconClassName","id","_ref$label","label","_ref$leftIcon","leftIcon","_ref$rightIcon","rightIcon","_ref$leftAvatar","leftAvatar","_ref$rightAvatar","rightAvatar","_ref$disabled","disabled","_ref$readOnly","readOnly","_ref$allowTextSelecti","allowTextSelection","_ref$color","color","_ref$iconSize","iconSize","_ref$onDelete","onDelete","_id","_e","onMouseDown","onClick","_ref$noAnimation","noAnimation","ariaLabel","_ref$ariaHasPopup","ariaHasPopup","_ref$disableClickable","disableClickableBehavior","_ref$leftAvatarType","leftAvatarType","_ref$rightAvatarType","rightAvatarType","_ref$showBorder","showBorder","leftRenderer","rightRenderer","_ref$closeButtonAriaL","closeButtonAriaLabel","_ref$noMargin","noMargin","componentDataTestId","getTestId","ComponentDefaultTestId","CHIP","hasClickableWrapper","hasCloseButton","overrideAriaLabel","iconButtonRef","useRef","componentRef","_useState","useState","_useState2","_slicedToArray","isHovered","setIsHovered","handleMouseEnter","useCallback","handleMouseLeave","isFocused","useSetFocus","mergedRef","useMergeRef","overrideClassName","cx","styles","chips","_defineProperty","withUserSelect","border","clickableClassName","clickable","disableTextSelection","backgroundColorStyle","useMemo","backgroundColor","getCSSVar","getElementColor","onDeleteCallback","e","stopPropagation","onClickCallback","undefined","target","current","preventDefault","clickableProps","useClickableProps","ariaHidden","ariaExpanded","wrapperProps","Object","assign","style","onMouseEnter","onMouseLeave","leftAvatarProps","text","src","rightAvatarProps","React","createElement","ComponentVibeId","CHIPS","Avatar","withoutBorder","avatar","left","customSize","type","key","Icon","icon","iconType","ignoreFocusStyle","customRenderer","Text","right","IconButton","size","close","hideTooltip","CloseSmall","colors","ElementAllowedColorEnum","avatarTypes","AvatarTypeEnum"],"mappings":"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"}
+{"version":3,"file":"Chips.js","sources":["../../../../src/components/Chips/Chips.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { Icon } from \"@vibe/icon\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport { getCSSVar } from \"../../services/themes\";\nimport { ElementAllowedColor as ElementAllowedColorEnum } from \"../../utils/colors-vars-map\";\nimport { type ElementAllowedColor, getElementColor } from \"../../types/Colors\";\nimport Avatar from \"../Avatar/Avatar\";\nimport IconButton from \"../IconButton/IconButton\";\nimport Text from \"../Text/Text\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { AvatarType as AvatarTypeEnum } from \"../Avatar/AvatarConstants\";\nimport { type AvatarType } from \"../Avatar\";\nimport { type ElementContent, type VibeComponentProps, withStaticProps } from \"../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport useSetFocus from \"../../hooks/useSetFocus\";\nimport useClickableProps from \"../../hooks/useClickableProps/useClickableProps\";\nimport styles from \"./Chips.module.scss\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst CHIPS_AVATAR_SIZE = 18;\n\nexport interface ChipsProps extends VibeComponentProps {\n  /**\n   * The text or content displayed inside the chip.\n   */\n  label?: ElementContent;\n  /**\n   * If true, the chip is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If true, the chip is read-only and cannot be deleted.\n   */\n  readOnly?: boolean;\n  /**\n   * A React element displayed on the right side.\n   */\n  rightRenderer?: ElementContent;\n  /**\n   * A React element displayed on the left side.\n   */\n  leftRenderer?: ElementContent;\n  /**\n   * Icon displayed on the right side.\n   */\n  rightIcon?: SubIcon;\n  /**\n   * Icon displayed on the left side.\n   */\n  leftIcon?: SubIcon;\n  /**\n   * Image URL or text for an avatar displayed on the right.\n   */\n  rightAvatar?: string;\n  /**\n   * The type of avatar displayed on the right.\n   */\n  rightAvatarType?: AvatarType;\n  /**\n   * Image URL or text for an avatar displayed on the left.\n   */\n  leftAvatar?: string;\n  /**\n   * The type of avatar displayed on the left.\n   */\n  leftAvatarType?: AvatarType;\n  /**\n   * Class name applied to left or right icons.\n   */\n  iconClassName?: string;\n  /**\n   * Class name applied to left or right avatars.\n   */\n  avatarClassName?: string;\n  /**\n   * The background color of the chip.\n   */\n  color?: Exclude<ElementAllowedColor, \"dark_indigo\" | \"blackish\">;\n  /**\n   * The size of the icons inside the chip.\n   */\n  iconSize?: number | string;\n  /**\n   * Callback fired when the chip is deleted.\n   */\n  onDelete?: (id: string, event: React.MouseEvent<HTMLSpanElement>) => void;\n  /**\n   * If true, disables the chip's entry animation.\n   */\n  noAnimation?: boolean;\n  /**\n   * If true, allows the user to select text inside the chip.\n   */\n  allowTextSelection?: boolean;\n  /**\n   * Callback fired when the mouse button is pressed on the chip.\n   */\n  onMouseDown?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  /**\n   * Callback fired when the chip is clicked.\n   */\n  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  /**\n   * The label of the chip for accessibility.\n   */\n  ariaLabel?: string;\n  /**\n   * If true, indicates that the chip has a popup.\n   */\n  ariaHasPopup?: boolean;\n  /**\n   * If true, disables all click behaviors.\n   */\n  disableClickableBehavior?: boolean;\n  /**\n   * If true, displays a border around the chip.\n   */\n  showBorder?: boolean;\n  /**\n   * The label for the close button.\n   */\n  closeButtonAriaLabel?: string;\n  /**\n   * If true, removes the default margin from the chip.\n   */\n  noMargin?: boolean;\n}\n\nconst Chips = forwardRef(\n  (\n    {\n      className,\n      avatarClassName,\n      iconClassName,\n      id,\n      label = \"\",\n      leftIcon = null,\n      rightIcon = null,\n      leftAvatar = null,\n      rightAvatar = null,\n      disabled = false,\n      readOnly = false,\n      allowTextSelection = false,\n      color = \"primary\",\n      iconSize = 18,\n      onDelete = (_id: string, _e: React.MouseEvent<HTMLSpanElement>) => {},\n      onMouseDown,\n      onClick,\n      noAnimation = true,\n      ariaLabel,\n      ariaHasPopup = false,\n      \"data-testid\": dataTestId,\n      disableClickableBehavior = false,\n      leftAvatarType = \"img\",\n      rightAvatarType = \"img\",\n      showBorder = false,\n      leftRenderer,\n      rightRenderer,\n      closeButtonAriaLabel = \"Remove\",\n      noMargin = false\n    }: ChipsProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const componentDataTestId = dataTestId || getTestId(ComponentDefaultTestId.CHIP, id);\n    const hasClickableWrapper = (!!onClick || !!onMouseDown) && !disableClickableBehavior;\n    const hasCloseButton = !readOnly && !disabled;\n    const overrideAriaLabel = ariaLabel || (typeof label === \"string\" && label) || \"\";\n\n    const iconButtonRef = useRef(null);\n    const componentRef = useRef(null);\n\n    const [isHovered, setIsHovered] = useState(false);\n    const handleMouseEnter = useCallback(() => setIsHovered(true), []);\n    const handleMouseLeave = useCallback(() => setIsHovered(false), []);\n    const { isFocused } = useSetFocus({ ref: componentRef });\n\n    const mergedRef = useMergeRef<HTMLDivElement>(ref, componentRef);\n\n    const overrideClassName = cx(styles.chips, className, {\n      [styles.disabled]: disabled,\n      [styles.noAnimation]: noAnimation,\n      [styles.withUserSelect]: allowTextSelection,\n      [styles.border]: showBorder,\n      [styles.noMargin]: noMargin\n    });\n    const clickableClassName = cx(styles.clickable, overrideClassName, {\n      [styles.disabled]: disabled,\n      [styles.disableTextSelection]: !allowTextSelection\n    });\n\n    const backgroundColorStyle = useMemo(() => {\n      let cssVar;\n      if (disabled) {\n        cssVar = getCSSVar(\"disabled-background-color\");\n      } else if (hasClickableWrapper && (isHovered || isFocused)) {\n        cssVar = getElementColor(color, true, true);\n      } else {\n        cssVar = getElementColor(color, true);\n      }\n      return { backgroundColor: cssVar };\n    }, [disabled, hasClickableWrapper, isHovered, isFocused, color]);\n\n    const onDeleteCallback = useCallback(\n      (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {\n        e.stopPropagation();\n        if (onDelete) {\n          onDelete(id, e);\n        }\n      },\n      [id, onDelete]\n    );\n\n    const onClickCallback = useCallback(\n      (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n        if (onClick !== undefined && (e.target as HTMLElement) !== iconButtonRef.current) {\n          e.preventDefault();\n          onClick(e);\n        }\n      },\n      [onClick]\n    );\n\n    const clickableProps = useClickableProps(\n      {\n        onClick: onClickCallback,\n        onMouseDown,\n        disabled,\n        id,\n        \"data-testid\": componentDataTestId,\n        ariaLabel: overrideAriaLabel,\n        ariaHidden: false,\n        ariaHasPopup,\n        ariaExpanded: false\n      },\n      mergedRef\n    );\n    const wrapperProps = hasClickableWrapper\n      ? {\n          ...clickableProps,\n          ref: mergedRef,\n          className: clickableClassName,\n          style: backgroundColorStyle,\n          onMouseEnter: handleMouseEnter,\n          onMouseLeave: handleMouseLeave\n        }\n      : {\n          className: overrideClassName,\n          \"aria-label\": overrideAriaLabel,\n          style: backgroundColorStyle,\n          ref: mergedRef,\n          onClick: onClickCallback,\n          onMouseDown,\n          id: id,\n          \"data-testid\": componentDataTestId,\n          onMouseEnter: handleMouseEnter,\n          onMouseLeave: handleMouseLeave\n        };\n\n    const leftAvatarProps = leftAvatarType === \"text\" ? { text: leftAvatar } : { src: leftAvatar };\n    const rightAvatarProps = leftAvatarType === \"text\" ? { text: rightAvatar } : { src: rightAvatar };\n\n    return (\n      <div {...wrapperProps} data-vibe={ComponentVibeId.CHIPS}>\n        {leftAvatar ? (\n          <Avatar\n            withoutBorder\n            className={cx(styles.avatar, styles.left, avatarClassName)}\n            customSize={CHIPS_AVATAR_SIZE}\n            type={leftAvatarType}\n            key={id}\n            {...leftAvatarProps}\n          />\n        ) : null}\n        {leftIcon ? (\n          <Icon\n            className={cx(styles.icon, styles.left, iconClassName)}\n            iconType=\"font\"\n            icon={leftIcon}\n            iconSize={iconSize}\n            ignoreFocusStyle\n          />\n        ) : null}\n        {leftRenderer && <div className={cx(styles.customRenderer, styles.left)}>{leftRenderer}</div>}\n        <Text type=\"text2\" className={styles.label}>\n          {label}\n        </Text>\n        {rightIcon ? (\n          <Icon\n            className={cx(styles.icon, styles.right, iconClassName)}\n            iconType=\"font\"\n            icon={rightIcon}\n            iconSize={iconSize}\n            ignoreFocusStyle\n          />\n        ) : null}\n        {rightAvatar ? (\n          <Avatar\n            withoutBorder\n            className={cx(styles.avatar, styles.right, avatarClassName)}\n            customSize={CHIPS_AVATAR_SIZE}\n            type={rightAvatarType}\n            key={id}\n            {...rightAvatarProps}\n          />\n        ) : null}\n        {rightRenderer && <div className={cx(styles.customRenderer, styles.right)}>{rightRenderer}</div>}\n        {hasCloseButton && (\n          <IconButton\n            size=\"xxs\"\n            color=\"on-primary-color\"\n            className={cx(styles.icon, styles.close)}\n            ariaLabel={closeButtonAriaLabel}\n            hideTooltip\n            icon={CloseSmall}\n            onClick={onDeleteCallback}\n            data-testid={`${componentDataTestId}-close`}\n            ref={iconButtonRef}\n          />\n        )}\n      </div>\n    );\n  }\n);\n\ninterface ChipsStaticProps {\n  colors: typeof ElementAllowedColorEnum;\n  avatarTypes: typeof AvatarTypeEnum;\n}\n\nexport default withStaticProps<ChipsProps, ChipsStaticProps>(Chips, {\n  colors: ElementAllowedColorEnum,\n  avatarTypes: AvatarTypeEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","avatarClassName","iconClassName","id","_ref$label","label","_ref$leftIcon","leftIcon","_ref$rightIcon","rightIcon","_ref$leftAvatar","leftAvatar","_ref$rightAvatar","rightAvatar","_ref$disabled","disabled","_ref$readOnly","readOnly","_ref$allowTextSelecti","allowTextSelection","_ref$color","color","_ref$iconSize","iconSize","_ref$onDelete","onDelete","_id","_e","onMouseDown","onClick","_ref$noAnimation","noAnimation","ariaLabel","_ref$ariaHasPopup","ariaHasPopup","_ref$disableClickable","disableClickableBehavior","_ref$leftAvatarType","leftAvatarType","_ref$rightAvatarType","rightAvatarType","_ref$showBorder","showBorder","leftRenderer","rightRenderer","_ref$closeButtonAriaL","closeButtonAriaLabel","_ref$noMargin","noMargin","componentDataTestId","getTestId","ComponentDefaultTestId","CHIP","hasClickableWrapper","hasCloseButton","overrideAriaLabel","iconButtonRef","useRef","componentRef","_useState","useState","_useState2","_slicedToArray","isHovered","setIsHovered","handleMouseEnter","useCallback","handleMouseLeave","isFocused","useSetFocus","mergedRef","useMergeRef","overrideClassName","cx","styles","chips","_defineProperty","withUserSelect","border","clickableClassName","clickable","disableTextSelection","backgroundColorStyle","useMemo","backgroundColor","getCSSVar","getElementColor","onDeleteCallback","e","stopPropagation","onClickCallback","undefined","target","current","preventDefault","clickableProps","useClickableProps","ariaHidden","ariaExpanded","wrapperProps","Object","assign","style","onMouseEnter","onMouseLeave","leftAvatarProps","text","src","rightAvatarProps","React","createElement","ComponentVibeId","CHIPS","Avatar","withoutBorder","avatar","left","customSize","type","key","Icon","icon","iconType","ignoreFocusStyle","customRenderer","Text","right","IconButton","size","close","hideTooltip","CloseSmall","colors","ElementAllowedColorEnum","avatarTypes","AvatarTypeEnum"],"mappings":"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"}

package/dist/src/components/ColorPicker/ColorPicker.js

@@ -1,2 +1,2 @@
-import o from"classnames";import r,{forwardRef as e,useRef as t,useCallback as i}from"react";import{BaseSizes as s}from"../../constants/sizes.js";import l from"../../hooks/useMergeRef.js";import c from"../DialogContentContainer/DialogContentContainer.js";import{ColorStyle as n}from"../../utils/colors-vars-map.js";import a from"./components/ColorPickerContent/ColorPickerContent.js";import{ColorShapes as m,DEFAULT_NUMBER_OF_COLORS_IN_LINE as d}from"./ColorPickerConstants.js";import{calculateColorPickerDialogWidth as C}from"./services/ColorPickerStyleService.js";import{withStaticProps as u}from"../../types/withStaticProps.js";import{NOOP as f}from"../../utils/function-utils.js";import{getTestId as p,ComponentDefaultTestId as v}from"../../tests/testIds.js";import I from"./ColorPicker.module.scss.js";import{ComponentVibeId as S}from"../../tests/constants.js";import k from"../../../icons/dist/react/NoColor.js";var h=u(e((function(e,s){var n=e.className,m=e.onSave,u=void 0===m?f:m,h=e.value,j=void 0===h?"":h,P=e.noColorText,L=e.colorStyle,g=void 0===L?"regular":L,R=e.ColorIndicatorIcon,y=e.SelectedIndicatorIcon,O=e.shouldRenderIndicatorWithoutBackground,b=e.NoColorIcon,M=void 0===b?k:b,N=e.isBlackListMode,w=void 0===N||N,z=e.colorsList,D=void 0===z?[]:z,B=e.isMultiselect,E=e.colorSize,T=void 0===E?"medium":E,x=e.numberOfColorsInLine,K=void 0===x?d:x,U=e.focusOnMount,W=e.colorShape,_=void 0===W?"square":W,q=e.forceUseRawColorList,V=e.showColorNameTooltip,A=e.id,F=e["data-testid"],G=t(null),H=l(s,G),J=i(u,[u]),Q=C(T,K);return r.createElement(c,{ref:H,className:o(I.colorPicker,I.colorPickerDialogContent,n),ariaLabelledby:"Color Picker Dialog",ariaDescribedby:"Pick color",style:{width:Q},"data-vibe":S.COLOR_PICKER},r.createElement(a,{onValueChange:J,value:j,noColorText:P,shouldRenderIndicatorWithoutBackground:R&&O,colorStyle:g,ColorIndicatorIcon:R,SelectedIndicatorIcon:y,NoColorIcon:M,colorsList:D,isBlackListMode:w,isMultiselect:B,colorSize:T,numberOfColorsInLine:K,focusOnMount:U,colorShape:_,forceUseRawColorList:q,showColorNameTooltip:V,id:A,"data-testid":F||p(v.COLOR_PICKER,A)}))})),{sizes:s,colorStyles:n,colorSizes:s,colorShapes:m});export{h as default};
+import o from"classnames";import r,{forwardRef as e,useRef as t,useCallback as i}from"react";import{BaseSizes as s}from"../../constants/sizes.js";import l from"../../hooks/useMergeRef.js";import c from"../DialogContentContainer/DialogContentContainer.js";import{ColorStyle as a}from"../../utils/colors-vars-map.js";import n from"./components/ColorPickerContent/ColorPickerContent.js";import{ColorShapes as m,DEFAULT_NUMBER_OF_COLORS_IN_LINE as d}from"./ColorPickerConstants.js";import{calculateColorPickerDialogWidth as C}from"./services/ColorPickerStyleService.js";import{withStaticProps as u}from"../../types/withStaticProps.js";import{NOOP as f}from"../../utils/function-utils.js";import{getTestId as p,ComponentDefaultTestId as v}from"../../tests/testIds.js";import I from"./ColorPicker.module.scss.js";import{ComponentVibeId as k}from"../../tests/constants.js";import S from"../../../packages/icons/dist/react/NoColor.js";var h=u(e((function(e,s){var a=e.className,m=e.onSave,u=void 0===m?f:m,h=e.value,j=void 0===h?"":h,P=e.noColorText,L=e.colorStyle,g=void 0===L?"regular":L,R=e.ColorIndicatorIcon,y=e.SelectedIndicatorIcon,O=e.shouldRenderIndicatorWithoutBackground,b=e.NoColorIcon,M=void 0===b?S:b,N=e.isBlackListMode,w=void 0===N||N,z=e.colorsList,D=void 0===z?[]:z,B=e.isMultiselect,E=e.colorSize,T=void 0===E?"medium":E,x=e.numberOfColorsInLine,K=void 0===x?d:x,U=e.focusOnMount,W=e.colorShape,_=void 0===W?"square":W,q=e.forceUseRawColorList,V=e.showColorNameTooltip,A=e.id,F=e["data-testid"],G=t(null),H=l(s,G),J=i(u,[u]),Q=C(T,K);return r.createElement(c,{ref:H,className:o(I.colorPicker,I.colorPickerDialogContent,a),ariaLabelledby:"Color Picker Dialog",ariaDescribedby:"Pick color",style:{width:Q},"data-vibe":k.COLOR_PICKER},r.createElement(n,{onValueChange:J,value:j,noColorText:P,shouldRenderIndicatorWithoutBackground:R&&O,colorStyle:g,ColorIndicatorIcon:R,SelectedIndicatorIcon:y,NoColorIcon:M,colorsList:D,isBlackListMode:w,isMultiselect:B,colorSize:T,numberOfColorsInLine:K,focusOnMount:U,colorShape:_,forceUseRawColorList:q,showColorNameTooltip:V,id:A,"data-testid":F||p(v.COLOR_PICKER,A)}))})),{sizes:s,colorStyles:a,colorSizes:s,colorShapes:m});export{h as default};
 //# sourceMappingURL=ColorPicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\nimport { BaseSizes } from \"../../constants\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport DialogContentContainer from \"../DialogContentContainer/DialogContentContainer\";\nimport { ColorStyle as ColorStyleEnum } from \"../../utils/colors-vars-map\";\nimport { NoColor } from \"@vibe/icons\";\nimport ColorPickerContent from \"./components/ColorPickerContent/ColorPickerContent\";\nimport { ColorShapes as ColorShapesEnum, DEFAULT_NUMBER_OF_COLORS_IN_LINE } from \"./ColorPickerConstants\";\nimport {\n  type ColorShapes,\n  type ColorPickerSizes,\n  type ColorPickerValue,\n  type ColorPickerArrayValueOnly\n} from \"./ColorPicker.types\";\nimport { calculateColorPickerDialogWidth } from \"./services/ColorPickerStyleService\";\nimport { type VibeComponentProps, type SubIcon, withStaticProps } from \"../../types\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./ColorPicker.module.scss\";\nimport { type ColorStyle } from \"../../types/Colors\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface ColorPickerProps extends VibeComponentProps {\n  /**\n   * The selected color(s).\n   */\n  value?: ColorPickerValue;\n  /**\n   * Callback fired when the selected color(s) change.\n   */\n  onSave?: (value: ColorPickerArrayValueOnly) => void;\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   * 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 list of colors available for selection.\n   */\n  colorsList?: ColorPickerArrayValueOnly;\n  /**\n   * If true, allows selecting multiple colors.\n   */\n  isMultiselect?: boolean;\n  /**\n   * The size of the color items.\n   */\n  colorSize?: ColorPickerSizes;\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   * The shape of the color items.\n   */\n  colorShape?: ColorShapes;\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   */\n  showColorNameTooltip?: boolean;\n}\n\nconst ColorPicker = forwardRef(\n  (\n    {\n      className,\n      onSave = NOOP,\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 = \"medium\",\n      numberOfColorsInLine = DEFAULT_NUMBER_OF_COLORS_IN_LINE,\n      focusOnMount,\n      colorShape = \"square\",\n      forceUseRawColorList,\n      showColorNameTooltip,\n      id,\n      \"data-testid\": dataTestId\n    }: ColorPickerProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const onChange = useCallback(onSave, [onSave]);\n\n    const width = calculateColorPickerDialogWidth(colorSize as BaseSizes, numberOfColorsInLine);\n\n    return (\n      <DialogContentContainer\n        ref={mergedRef}\n        className={cx(styles.colorPicker, styles.colorPickerDialogContent, className)}\n        ariaLabelledby=\"Color Picker Dialog\"\n        ariaDescribedby=\"Pick color\"\n        style={{ width }}\n        data-vibe={ComponentVibeId.COLOR_PICKER}\n      >\n        <ColorPickerContent\n          onValueChange={onChange}\n          value={value}\n          noColorText={noColorText}\n          shouldRenderIndicatorWithoutBackground={ColorIndicatorIcon && shouldRenderIndicatorWithoutBackground}\n          colorStyle={colorStyle}\n          ColorIndicatorIcon={ColorIndicatorIcon}\n          SelectedIndicatorIcon={SelectedIndicatorIcon}\n          NoColorIcon={NoColorIcon}\n          colorsList={colorsList}\n          isBlackListMode={isBlackListMode}\n          isMultiselect={isMultiselect}\n          colorSize={colorSize}\n          numberOfColorsInLine={numberOfColorsInLine}\n          focusOnMount={focusOnMount}\n          colorShape={colorShape}\n          forceUseRawColorList={forceUseRawColorList}\n          showColorNameTooltip={showColorNameTooltip}\n          id={id}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.COLOR_PICKER, id)}\n        />\n      </DialogContentContainer>\n    );\n  }\n);\n\ninterface ColorPickerStaticProps {\n  sizes: typeof BaseSizes;\n  colorStyles: typeof ColorStyleEnum;\n  colorSizes: typeof BaseSizes;\n  colorShapes: typeof ColorShapesEnum;\n}\n\nexport default withStaticProps<ColorPickerProps, ColorPickerStaticProps>(ColorPicker, {\n  sizes: BaseSizes,\n  colorStyles: ColorStyleEnum,\n  colorSizes: BaseSizes,\n  colorShapes: ColorShapesEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","_ref$onSave","onSave","NOOP","_ref$value","value","noColorText","_ref$colorStyle","colorStyle","ColorIndicatorIcon","SelectedIndicatorIcon","shouldRenderIndicatorWithoutBackground","_ref$NoColorIcon","NoColorIcon","NoColor","_ref$isBlackListMode","isBlackListMode","_ref$colorsList","colorsList","isMultiselect","_ref$colorSize","colorSize","_ref$numberOfColorsIn","numberOfColorsInLine","DEFAULT_NUMBER_OF_COLORS_IN_LINE","focusOnMount","_ref$colorShape","colorShape","forceUseRawColorList","showColorNameTooltip","id","dataTestId","componentRef","useRef","mergedRef","useMergeRef","onChange","useCallback","width","calculateColorPickerDialogWidth","React","createElement","DialogContentContainer","cx","styles","colorPicker","colorPickerDialogContent","ariaLabelledby","ariaDescribedby","style","ComponentVibeId","COLOR_PICKER","ColorPickerContent","onValueChange","getTestId","ComponentDefaultTestId","sizes","BaseSizes","colorStyles","ColorStyleEnum","colorSizes","colorShapes","ColorShapesEnum"],"mappings":"s5BAiGA,IA2EeA,EAAAA,EA3EKC,GAClB,SAAAC,EAuBEC,GACE,IAtBAC,EAASF,EAATE,UAASC,EAAAH,EACTI,OAAAA,OAASC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAN,EACbO,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EACVE,EAAWR,EAAXQ,YAAWC,EAAAT,EACXU,WAAAA,OAAa,IAAHD,EAAG,UAASA,EACtBE,EAAkBX,EAAlBW,mBACAC,EAAqBZ,EAArBY,sBACAC,EAAsCb,EAAtCa,uCAAsCC,EAAAd,EACtCe,YAAAA,OAAcC,IAAHF,EAAGE,EAAOF,EAAAG,EAAAjB,EACrBkB,gBAAAA,OAAkB,IAAHD,GAAOA,EAAAE,EAAAnB,EACtBoB,WAAAA,OAAa,IAAHD,EAAG,GAAEA,EACfE,EAAarB,EAAbqB,cAAaC,EAAAtB,EACbuB,UAAAA,OAAY,IAAHD,EAAG,SAAQA,EAAAE,EAAAxB,EACpByB,qBAAAA,OAAuBC,IAAHF,EAAGE,EAAgCF,EACvDG,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,EAAeC,EAAO,MACtBC,EAAYC,EAAYpC,EAAKiC,GAE7BI,EAAWC,EAAYnC,EAAQ,CAACA,IAEhCoC,EAAQC,EAAgClB,EAAwBE,GAEtE,OACEiB,EAACC,cAAAC,EACC,CAAA3C,IAAKmC,EACLlC,UAAW2C,EAAGC,EAAOC,YAAaD,EAAOE,yBAA0B9C,GACnE+C,eAAe,sBACfC,gBAAgB,aAChBC,MAAO,CAAEX,MAAAA,GACE,YAAAY,EAAgBC,cAE3BX,EAAAC,cAACW,EACC,CAAAC,cAAejB,EACf/B,MAAOA,EACPC,YAAaA,EACbK,uCAAwCF,GAAsBE,EAC9DH,WAAYA,EACZC,mBAAoBA,EACpBC,sBAAuBA,EACvBG,YAAaA,EACbK,WAAYA,EACZF,gBAAiBA,EACjBG,cAAeA,EACfE,UAAWA,EACXE,qBAAsBA,EACtBE,aAAcA,EACdE,WAAYA,EACZC,qBAAsBA,EACtBC,qBAAsBA,EACtBC,GAAIA,EAAE,cACOC,GAAcuB,EAAUC,EAAuBJ,aAAcrB,KAIlF,IAUoF,CACpF0B,MAAOC,EACPC,YAAaC,EACbC,WAAYH,EACZI,YAAaC"}
+{"version":3,"file":"ColorPicker.js","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\nimport { BaseSizes } from \"../../constants\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport DialogContentContainer from \"../DialogContentContainer/DialogContentContainer\";\nimport { ColorStyle as ColorStyleEnum } from \"../../utils/colors-vars-map\";\nimport { NoColor } from \"@vibe/icons\";\nimport ColorPickerContent from \"./components/ColorPickerContent/ColorPickerContent\";\nimport { ColorShapes as ColorShapesEnum, DEFAULT_NUMBER_OF_COLORS_IN_LINE } from \"./ColorPickerConstants\";\nimport {\n  type ColorShapes,\n  type ColorPickerSizes,\n  type ColorPickerValue,\n  type ColorPickerArrayValueOnly\n} from \"./ColorPicker.types\";\nimport { calculateColorPickerDialogWidth } from \"./services/ColorPickerStyleService\";\nimport { type VibeComponentProps, withStaticProps } from \"../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./ColorPicker.module.scss\";\nimport { type ColorStyle } from \"../../types/Colors\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface ColorPickerProps extends VibeComponentProps {\n  /**\n   * The selected color(s).\n   */\n  value?: ColorPickerValue;\n  /**\n   * Callback fired when the selected color(s) change.\n   */\n  onSave?: (value: ColorPickerArrayValueOnly) => void;\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   * 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 list of colors available for selection.\n   */\n  colorsList?: ColorPickerArrayValueOnly;\n  /**\n   * If true, allows selecting multiple colors.\n   */\n  isMultiselect?: boolean;\n  /**\n   * The size of the color items.\n   */\n  colorSize?: ColorPickerSizes;\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   * The shape of the color items.\n   */\n  colorShape?: ColorShapes;\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   */\n  showColorNameTooltip?: boolean;\n}\n\nconst ColorPicker = forwardRef(\n  (\n    {\n      className,\n      onSave = NOOP,\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 = \"medium\",\n      numberOfColorsInLine = DEFAULT_NUMBER_OF_COLORS_IN_LINE,\n      focusOnMount,\n      colorShape = \"square\",\n      forceUseRawColorList,\n      showColorNameTooltip,\n      id,\n      \"data-testid\": dataTestId\n    }: ColorPickerProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const onChange = useCallback(onSave, [onSave]);\n\n    const width = calculateColorPickerDialogWidth(colorSize as BaseSizes, numberOfColorsInLine);\n\n    return (\n      <DialogContentContainer\n        ref={mergedRef}\n        className={cx(styles.colorPicker, styles.colorPickerDialogContent, className)}\n        ariaLabelledby=\"Color Picker Dialog\"\n        ariaDescribedby=\"Pick color\"\n        style={{ width }}\n        data-vibe={ComponentVibeId.COLOR_PICKER}\n      >\n        <ColorPickerContent\n          onValueChange={onChange}\n          value={value}\n          noColorText={noColorText}\n          shouldRenderIndicatorWithoutBackground={ColorIndicatorIcon && shouldRenderIndicatorWithoutBackground}\n          colorStyle={colorStyle}\n          ColorIndicatorIcon={ColorIndicatorIcon}\n          SelectedIndicatorIcon={SelectedIndicatorIcon}\n          NoColorIcon={NoColorIcon}\n          colorsList={colorsList}\n          isBlackListMode={isBlackListMode}\n          isMultiselect={isMultiselect}\n          colorSize={colorSize}\n          numberOfColorsInLine={numberOfColorsInLine}\n          focusOnMount={focusOnMount}\n          colorShape={colorShape}\n          forceUseRawColorList={forceUseRawColorList}\n          showColorNameTooltip={showColorNameTooltip}\n          id={id}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.COLOR_PICKER, id)}\n        />\n      </DialogContentContainer>\n    );\n  }\n);\n\ninterface ColorPickerStaticProps {\n  sizes: typeof BaseSizes;\n  colorStyles: typeof ColorStyleEnum;\n  colorSizes: typeof BaseSizes;\n  colorShapes: typeof ColorShapesEnum;\n}\n\nexport default withStaticProps<ColorPickerProps, ColorPickerStaticProps>(ColorPicker, {\n  sizes: BaseSizes,\n  colorStyles: ColorStyleEnum,\n  colorSizes: BaseSizes,\n  colorShapes: ColorShapesEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","_ref$onSave","onSave","NOOP","_ref$value","value","noColorText","_ref$colorStyle","colorStyle","ColorIndicatorIcon","SelectedIndicatorIcon","shouldRenderIndicatorWithoutBackground","_ref$NoColorIcon","NoColorIcon","NoColor","_ref$isBlackListMode","isBlackListMode","_ref$colorsList","colorsList","isMultiselect","_ref$colorSize","colorSize","_ref$numberOfColorsIn","numberOfColorsInLine","DEFAULT_NUMBER_OF_COLORS_IN_LINE","focusOnMount","_ref$colorShape","colorShape","forceUseRawColorList","showColorNameTooltip","id","dataTestId","componentRef","useRef","mergedRef","useMergeRef","onChange","useCallback","width","calculateColorPickerDialogWidth","React","createElement","DialogContentContainer","cx","styles","colorPicker","colorPickerDialogContent","ariaLabelledby","ariaDescribedby","style","ComponentVibeId","COLOR_PICKER","ColorPickerContent","onValueChange","getTestId","ComponentDefaultTestId","sizes","BaseSizes","colorStyles","ColorStyleEnum","colorSizes","colorShapes","ColorShapesEnum"],"mappings":"+5BAkGA,IA2EeA,EAAAA,EA3EKC,GAClB,SAAAC,EAuBEC,GACE,IAtBAC,EAASF,EAATE,UAASC,EAAAH,EACTI,OAAAA,OAASC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAN,EACbO,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EACVE,EAAWR,EAAXQ,YAAWC,EAAAT,EACXU,WAAAA,OAAa,IAAHD,EAAG,UAASA,EACtBE,EAAkBX,EAAlBW,mBACAC,EAAqBZ,EAArBY,sBACAC,EAAsCb,EAAtCa,uCAAsCC,EAAAd,EACtCe,YAAAA,OAAcC,IAAHF,EAAGE,EAAOF,EAAAG,EAAAjB,EACrBkB,gBAAAA,OAAkB,IAAHD,GAAOA,EAAAE,EAAAnB,EACtBoB,WAAAA,OAAa,IAAHD,EAAG,GAAEA,EACfE,EAAarB,EAAbqB,cAAaC,EAAAtB,EACbuB,UAAAA,OAAY,IAAHD,EAAG,SAAQA,EAAAE,EAAAxB,EACpByB,qBAAAA,OAAuBC,IAAHF,EAAGE,EAAgCF,EACvDG,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,EAAeC,EAAO,MACtBC,EAAYC,EAAYpC,EAAKiC,GAE7BI,EAAWC,EAAYnC,EAAQ,CAACA,IAEhCoC,EAAQC,EAAgClB,EAAwBE,GAEtE,OACEiB,EAACC,cAAAC,EACC,CAAA3C,IAAKmC,EACLlC,UAAW2C,EAAGC,EAAOC,YAAaD,EAAOE,yBAA0B9C,GACnE+C,eAAe,sBACfC,gBAAgB,aAChBC,MAAO,CAAEX,MAAAA,GACE,YAAAY,EAAgBC,cAE3BX,EAAAC,cAACW,EACC,CAAAC,cAAejB,EACf/B,MAAOA,EACPC,YAAaA,EACbK,uCAAwCF,GAAsBE,EAC9DH,WAAYA,EACZC,mBAAoBA,EACpBC,sBAAuBA,EACvBG,YAAaA,EACbK,WAAYA,EACZF,gBAAiBA,EACjBG,cAAeA,EACfE,UAAWA,EACXE,qBAAsBA,EACtBE,aAAcA,EACdE,WAAYA,EACZC,qBAAsBA,EACtBC,qBAAsBA,EACtBC,GAAIA,EAAE,cACOC,GAAcuB,EAAUC,EAAuBJ,aAAcrB,KAIlF,IAUoF,CACpF0B,MAAOC,EACPC,YAAaC,EACbC,WAAYH,EACZI,YAAaC"}

package/dist/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.js

@@ -1,2 +1,2 @@
-import e,{forwardRef as o}from"react";import t from"../../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js";import r from"../../../Button/Button.js";import{NOOP as n}from"../../../../utils/function-utils.js";import i from"./ColorPickerClearButton.module.scss.js";var a=o((function(o,a){var s=o.text,l=o.Icon,m=t({ref:a,itemsCount:1,numberOfItemsInLine:1,onItemClicked:o.onClick,getItemByIndex:n}).onSelectionAction;return e.createElement(r,{ref:a,size:"small",kind:"tertiary",onClick:function(){return m(-1)},blurOnMouseUp:!1,className:i.clearColorButton},e.createElement(l,{size:"16",className:i.clearColorIcon}),s||"Clear")}));export{a as default};
+import t,{forwardRef as e}from"react";import o from"../../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js";import{NOOP as r}from"../../../../utils/function-utils.js";import n from"./ColorPickerClearButton.module.scss.js";import i from"../../../../../components/button/dist/Button/Button.js";var s=e((function(e,s){var a=e.text,l=e.Icon,m=o({ref:s,itemsCount:1,numberOfItemsInLine:1,onItemClicked:e.onClick,getItemByIndex:r}).onSelectionAction;return t.createElement(i,{ref:s,size:"small",kind:"tertiary",onClick:function(){return m(-1)},blurOnMouseUp:!1,className:n.clearColorButton},t.createElement(l,{size:"16",className:n.clearColorIcon}),a||"Clear")}));export{s as default};
 //# sourceMappingURL=ColorPickerClearButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerClearButton.js","sources":["../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport useGridKeyboardNavigation from \"../../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport Button from \"../../../Button/Button\";\nimport { type VibeComponentProps, type SubIcon } from \"../../../../types\";\nimport { NOOP } from \"../../../../utils/function-utils\";\nimport styles from \"./ColorPickerClearButton.module.scss\";\n\nexport interface ColorPickerClearButtonProps extends VibeComponentProps {\n  /**\n   * Callback fired when the clear button is clicked.\n   */\n  onClick: () => void;\n  /**\n   * The text displayed inside the button.\n   */\n  text?: string;\n  /**\n   * The icon displayed inside the button.\n   */\n  Icon: SubIcon;\n}\n\nconst ColorPickerClearButton = forwardRef(\n  ({ onClick, text, Icon }: ColorPickerClearButtonProps, ref: React.ForwardedRef<HTMLElement>) => {\n    const { onSelectionAction } = useGridKeyboardNavigation({\n      ref: ref as React.MutableRefObject<HTMLElement>,\n      itemsCount: 1,\n      numberOfItemsInLine: 1,\n      onItemClicked: onClick,\n      getItemByIndex: NOOP //hack - we don't really have a grid, it's just for keyboard navigation outside the clear button\n    });\n\n    return (\n      <Button\n        ref={ref}\n        size=\"small\"\n        kind=\"tertiary\"\n        onClick={() => onSelectionAction(-1)} //hack - we don't really have a grid, it's just for keyboard navigation outside the clear button\n        blurOnMouseUp={false}\n        className={styles.clearColorButton}\n      >\n        <Icon size=\"16\" className={styles.clearColorIcon} />\n        {text || \"Clear\"}\n      </Button>\n    );\n  }\n);\n\nexport default ColorPickerClearButton;\n"],"names":["ColorPickerClearButton","forwardRef","_ref","ref","text","Icon","onSelectionAction","useGridKeyboardNavigation","itemsCount","numberOfItemsInLine","onItemClicked","onClick","getItemByIndex","NOOP","React","createElement","Button","size","kind","blurOnMouseUp","className","styles","clearColorButton","clearColorIcon"],"mappings":"yRAsBMA,IAAAA,EAAyBC,GAC7B,SAAAC,EAAuDC,GAAwC,IAAnFC,EAAIF,EAAJE,KAAMC,EAAIH,EAAJG,KACRC,EAAsBC,EAA0B,CACtDJ,IAAKA,EACLK,WAAY,EACZC,oBAAqB,EACrBC,cALMR,EAAPS,QAMCC,eAAgBC,IALVP,kBAQR,OACEQ,EAAAC,cAACC,EAAM,CACLb,IAAKA,EACLc,KAAK,QACLC,KAAK,WACLP,QAAS,WAAA,OAAML,GAAmB,EAAE,EACpCa,eAAe,EACfC,UAAWC,EAAOC,kBAElBR,EAACC,cAAAV,EAAK,CAAAY,KAAK,KAAKG,UAAWC,EAAOE,iBACjCnB,GAAQ,QAGf"}
+{"version":3,"file":"ColorPickerClearButton.js","sources":["../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport useGridKeyboardNavigation from \"../../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport { Button } from \"@vibe/button\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport { NOOP } from \"../../../../utils/function-utils\";\nimport styles from \"./ColorPickerClearButton.module.scss\";\n\nexport interface ColorPickerClearButtonProps extends VibeComponentProps {\n  /**\n   * Callback fired when the clear button is clicked.\n   */\n  onClick: () => void;\n  /**\n   * The text displayed inside the button.\n   */\n  text?: string;\n  /**\n   * The icon displayed inside the button.\n   */\n  Icon: SubIcon;\n}\n\nconst ColorPickerClearButton = forwardRef(\n  ({ onClick, text, Icon }: ColorPickerClearButtonProps, ref: React.ForwardedRef<HTMLElement>) => {\n    const { onSelectionAction } = useGridKeyboardNavigation({\n      ref: ref as React.MutableRefObject<HTMLElement>,\n      itemsCount: 1,\n      numberOfItemsInLine: 1,\n      onItemClicked: onClick,\n      getItemByIndex: NOOP //hack - we don't really have a grid, it's just for keyboard navigation outside the clear button\n    });\n\n    return (\n      <Button\n        ref={ref}\n        size=\"small\"\n        kind=\"tertiary\"\n        onClick={() => onSelectionAction(-1)} //hack - we don't really have a grid, it's just for keyboard navigation outside the clear button\n        blurOnMouseUp={false}\n        className={styles.clearColorButton}\n      >\n        <Icon size=\"16\" className={styles.clearColorIcon} />\n        {text || \"Clear\"}\n      </Button>\n    );\n  }\n);\n\nexport default ColorPickerClearButton;\n"],"names":["ColorPickerClearButton","forwardRef","_ref","ref","text","Icon","onSelectionAction","useGridKeyboardNavigation","itemsCount","numberOfItemsInLine","onItemClicked","onClick","getItemByIndex","NOOP","React","createElement","Button","size","kind","blurOnMouseUp","className","styles","clearColorButton","clearColorIcon"],"mappings":"sTAuBMA,IAAAA,EAAyBC,GAC7B,SAAAC,EAAuDC,GAAwC,IAAnFC,EAAIF,EAAJE,KAAMC,EAAIH,EAAJG,KACRC,EAAsBC,EAA0B,CACtDJ,IAAKA,EACLK,WAAY,EACZC,oBAAqB,EACrBC,cALMR,EAAPS,QAMCC,eAAgBC,IALVP,kBAQR,OACEQ,EAAAC,cAACC,EAAM,CACLb,IAAKA,EACLc,KAAK,QACLC,KAAK,WACLP,QAAS,WAAA,OAAML,GAAmB,EAAE,EACpCa,eAAe,EACfC,UAAWC,EAAOC,kBAElBR,EAACC,cAAAV,EAAK,CAAAY,KAAK,KAAKG,UAAWC,EAAOE,iBACjCnB,GAAQ,QAGf"}

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerColorsGrid.js","sources":["../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerColorsGrid.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from \"react\";\nimport useGridKeyboardNavigation from \"../../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport ColorPickerItemComponent from \"../ColorPickerItemComponent/ColorPickerItemComponent\";\nimport { type CONTENT_COLORS_VALUES } from \"../../../../utils/colors-vars-map\";\nimport { type ColorPickerArrayValueOnly, type ColorPickerValueOnly } from \"../../ColorPicker.types\";\nimport { type ColorShapes, type ColorPickerSizes } from \"../../ColorPicker.types\";\nimport { type SubIcon, type VibeComponentProps } from \"../../../../types\";\nimport styles from \"./ColorPickerColorsGrid.module.scss\";\nimport { type ColorStyle } from \"../../../../types\";\n\nconst formatColorNameForTooltip = (color: ColorPickerValueOnly) => {\n  return color.replace(/-|_/g, \" \").replace(/(?:^|\\s)\\S/g, function (a) {\n    return a.toUpperCase();\n  });\n};\n\nconst calculateColorTooltip = (\n  color: ColorPickerValueOnly,\n  tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string> & Record<string, string>>\n) => {\n  if (tooltipContentByColor && tooltipContentByColor[color]) {\n    return tooltipContentByColor[color];\n  } else {\n    return formatColorNameForTooltip(color);\n  }\n};\n\nexport interface ColorPickerColorsGridProps extends VibeComponentProps {\n  /**\n   * Callback fired when a color is clicked.\n   */\n  onColorClicked?: (color: ColorPickerValueOnly) => void;\n  /**\n   * The list of colors to be displayed.\n   */\n  colorsToRender?: 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   * The style applied to the colors.\n   */\n  colorStyle?: ColorStyle;\n  /**\n   * The currently selected color or colors.\n   */\n  value?: string | string[];\n  /**\n   * If true, renders the color indicator without a background.\n   */\n  shouldRenderIndicatorWithoutBackground?: boolean;\n  /**\n   * The size of the color items.\n   */\n  colorSize?: ColorPickerSizes;\n  /**\n   * The number of colors per row.\n   */\n  numberOfColorsInLine?: number;\n  /**\n   * Custom tooltip content for specific colors.\n   */\n  tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string> & Record<string, string>>;\n  /**\n   * If true, the first color is focused when the component mounts.\n   */\n  focusOnMount?: boolean;\n  /**\n   * The shape of the color items.\n   */\n  colorShape?: ColorShapes;\n  /**\n   * If true, displays a tooltip with the color name.\n   */\n  showColorNameTooltip?: boolean;\n}\n\nconst ColorPickerColorsGrid = forwardRef(\n  (\n    {\n      onColorClicked,\n      colorsToRender,\n      numberOfColorsInLine,\n      focusOnMount,\n      value,\n      colorStyle,\n      ColorIndicatorIcon,\n      shouldRenderIndicatorWithoutBackground,\n      SelectedIndicatorIcon,\n      colorSize,\n      tooltipContentByColor,\n      colorShape,\n      showColorNameTooltip: showColorNameTooltip,\n      id,\n      \"data-testid\": dataTestId\n    }: ColorPickerColorsGridProps,\n    ref: React.ForwardedRef<HTMLUListElement>\n  ) => {\n    const getItemByIndex = useCallback((index: number) => colorsToRender[index], [colorsToRender]);\n\n    const { activeIndex, onSelectionAction } = useGridKeyboardNavigation({\n      focusOnMount,\n      ref: ref as React.MutableRefObject<HTMLUListElement>,\n      onItemClicked: onColorClicked,\n      itemsCount: colorsToRender.length,\n      numberOfItemsInLine: numberOfColorsInLine,\n      entryFocusStrategy: \"first\",\n      getItemByIndex\n    });\n\n    return (\n      <ul className={styles.colorsGrid} ref={ref} tabIndex={0} id={id} data-testid={dataTestId} role=\"grid\">\n        {colorsToRender.map((color, index) => {\n          return (\n            <ColorPickerItemComponent\n              key={color}\n              color={color}\n              onColorClicked={() => onSelectionAction(index)}\n              shouldRenderIndicatorWithoutBackground={ColorIndicatorIcon && shouldRenderIndicatorWithoutBackground}\n              colorStyle={colorStyle}\n              ColorIndicatorIcon={ColorIndicatorIcon}\n              SelectedIndicatorIcon={SelectedIndicatorIcon}\n              isSelected={Array.isArray(value) ? value.includes(color) : value === color}\n              isActive={index === activeIndex}\n              colorSize={colorSize}\n              tooltipContent={showColorNameTooltip ? calculateColorTooltip(color, tooltipContentByColor) : undefined}\n              colorShape={colorShape}\n            />\n          );\n        })}\n      </ul>\n    );\n  }\n);\n\nexport default ColorPickerColorsGrid;\n"],"names":["calculateColorTooltip","color","tooltipContentByColor","replace","a","toUpperCase","formatColorNameForTooltip","ColorPickerColorsGrid","forwardRef","_ref","ref","onColorClicked","colorsToRender","numberOfColorsInLine","focusOnMount","value","colorStyle","ColorIndicatorIcon","shouldRenderIndicatorWithoutBackground","SelectedIndicatorIcon","colorSize","colorShape","showColorNameTooltip","id","dataTestId","getItemByIndex","useCallback","index","_useGridKeyboardNavig","useGridKeyboardNavigation","onItemClicked","itemsCount","length","numberOfItemsInLine","entryFocusStrategy","activeIndex","onSelectionAction","React","createElement","className","styles","colorsGrid","tabIndex","role","map","ColorPickerItemComponent","key","isSelected","Array","isArray","includes","isActive","tooltipContent","undefined"],"mappings":"4QAUA,IAMMA,EAAwB,SAC5BC,EACAC,GAEA,OAAIA,GAAyBA,EAAsBD,GAC1CC,EAAsBD,GAXC,SAACA,GACjC,OAAOA,EAAME,QAAQ,OAAQ,KAAKA,QAAQ,eAAe,SAAUC,GACjE,OAAOA,EAAEC,aACX,GACF,CASWC,CAA0BL,EAErC,EAyDMM,EAAwBC,GAC5B,SAAAC,EAkBEC,GACE,IAjBAC,EAAcF,EAAdE,eACAC,EAAcH,EAAdG,eACAC,EAAoBJ,EAApBI,qBACAC,EAAYL,EAAZK,aACAC,EAAKN,EAALM,MACAC,EAAUP,EAAVO,WACAC,EAAkBR,EAAlBQ,mBACAC,EAAsCT,EAAtCS,uCACAC,EAAqBV,EAArBU,sBACAC,EAASX,EAATW,UACAlB,EAAqBO,EAArBP,sBACAmB,EAAUZ,EAAVY,WACsBC,EAAoBb,EAA1Ca,qBACAC,EAAEd,EAAFc,GACeC,EAAUf,EAAzB,eAIIgB,EAAiBC,GAAY,SAACC,GAAa,OAAKf,EAAee,KAAQ,CAACf,IAE9EgB,EAA2CC,EAA0B,CACnEf,aAAAA,EACAJ,IAAKA,EACLoB,cAAenB,EACfoB,WAAYnB,EAAeoB,OAC3BC,oBAAqBpB,EACrBqB,mBAAoB,QACpBT,eAAAA,IAPMU,EAAWP,EAAXO,YAAaC,EAAiBR,EAAjBQ,kBAUrB,OACEC,EAAAC,cAAA,KAAA,CAAIC,UAAWC,EAAOC,WAAY/B,IAAKA,EAAKgC,SAAU,EAAGnB,GAAIA,gBAAiBC,EAAYmB,KAAK,QAC5F/B,EAAegC,KAAI,SAAC3C,EAAO0B,GAC1B,OACEU,gBAACQ,EAAwB,CACvBC,IAAK7C,EACLA,MAAOA,EACPU,eAAgB,WAAA,OAAMyB,EAAkBT,EAAM,EAC9CT,uCAAwCD,GAAsBC,EAC9DF,WAAYA,EACZC,mBAAoBA,EACpBE,sBAAuBA,EACvB4B,WAAYC,MAAMC,QAAQlC,GAASA,EAAMmC,SAASjD,GAASc,IAAUd,EACrEkD,SAAUxB,IAAUQ,EACpBf,UAAWA,EACXgC,eAAgB9B,EAAuBtB,EAAsBC,EAAOC,QAAyBmD,EAC7FhC,WAAYA,GAGjB,IAGP"}
+{"version":3,"file":"ColorPickerColorsGrid.js","sources":["../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerColorsGrid.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from \"react\";\nimport useGridKeyboardNavigation from \"../../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport ColorPickerItemComponent from \"../ColorPickerItemComponent/ColorPickerItemComponent\";\nimport { type CONTENT_COLORS_VALUES } from \"../../../../utils/colors-vars-map\";\nimport { type ColorPickerArrayValueOnly, type ColorPickerValueOnly } from \"../../ColorPicker.types\";\nimport { type ColorShapes, type ColorPickerSizes } from \"../../ColorPicker.types\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport styles from \"./ColorPickerColorsGrid.module.scss\";\nimport { type ColorStyle } from \"../../../../types\";\n\nconst formatColorNameForTooltip = (color: ColorPickerValueOnly) => {\n  return color.replace(/-|_/g, \" \").replace(/(?:^|\\s)\\S/g, function (a) {\n    return a.toUpperCase();\n  });\n};\n\nconst calculateColorTooltip = (\n  color: ColorPickerValueOnly,\n  tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string> & Record<string, string>>\n) => {\n  if (tooltipContentByColor && tooltipContentByColor[color]) {\n    return tooltipContentByColor[color];\n  } else {\n    return formatColorNameForTooltip(color);\n  }\n};\n\nexport interface ColorPickerColorsGridProps extends VibeComponentProps {\n  /**\n   * Callback fired when a color is clicked.\n   */\n  onColorClicked?: (color: ColorPickerValueOnly) => void;\n  /**\n   * The list of colors to be displayed.\n   */\n  colorsToRender?: 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   * The style applied to the colors.\n   */\n  colorStyle?: ColorStyle;\n  /**\n   * The currently selected color or colors.\n   */\n  value?: string | string[];\n  /**\n   * If true, renders the color indicator without a background.\n   */\n  shouldRenderIndicatorWithoutBackground?: boolean;\n  /**\n   * The size of the color items.\n   */\n  colorSize?: ColorPickerSizes;\n  /**\n   * The number of colors per row.\n   */\n  numberOfColorsInLine?: number;\n  /**\n   * Custom tooltip content for specific colors.\n   */\n  tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string> & Record<string, string>>;\n  /**\n   * If true, the first color is focused when the component mounts.\n   */\n  focusOnMount?: boolean;\n  /**\n   * The shape of the color items.\n   */\n  colorShape?: ColorShapes;\n  /**\n   * If true, displays a tooltip with the color name.\n   */\n  showColorNameTooltip?: boolean;\n}\n\nconst ColorPickerColorsGrid = forwardRef(\n  (\n    {\n      onColorClicked,\n      colorsToRender,\n      numberOfColorsInLine,\n      focusOnMount,\n      value,\n      colorStyle,\n      ColorIndicatorIcon,\n      shouldRenderIndicatorWithoutBackground,\n      SelectedIndicatorIcon,\n      colorSize,\n      tooltipContentByColor,\n      colorShape,\n      showColorNameTooltip: showColorNameTooltip,\n      id,\n      \"data-testid\": dataTestId\n    }: ColorPickerColorsGridProps,\n    ref: React.ForwardedRef<HTMLUListElement>\n  ) => {\n    const getItemByIndex = useCallback((index: number) => colorsToRender[index], [colorsToRender]);\n\n    const { activeIndex, onSelectionAction } = useGridKeyboardNavigation({\n      focusOnMount,\n      ref: ref as React.MutableRefObject<HTMLUListElement>,\n      onItemClicked: onColorClicked,\n      itemsCount: colorsToRender.length,\n      numberOfItemsInLine: numberOfColorsInLine,\n      entryFocusStrategy: \"first\",\n      getItemByIndex\n    });\n\n    return (\n      <ul className={styles.colorsGrid} ref={ref} tabIndex={0} id={id} data-testid={dataTestId} role=\"grid\">\n        {colorsToRender.map((color, index) => {\n          return (\n            <ColorPickerItemComponent\n              key={color}\n              color={color}\n              onColorClicked={() => onSelectionAction(index)}\n              shouldRenderIndicatorWithoutBackground={ColorIndicatorIcon && shouldRenderIndicatorWithoutBackground}\n              colorStyle={colorStyle}\n              ColorIndicatorIcon={ColorIndicatorIcon}\n              SelectedIndicatorIcon={SelectedIndicatorIcon}\n              isSelected={Array.isArray(value) ? value.includes(color) : value === color}\n              isActive={index === activeIndex}\n              colorSize={colorSize}\n              tooltipContent={showColorNameTooltip ? calculateColorTooltip(color, tooltipContentByColor) : undefined}\n              colorShape={colorShape}\n            />\n          );\n        })}\n      </ul>\n    );\n  }\n);\n\nexport default ColorPickerColorsGrid;\n"],"names":["calculateColorTooltip","color","tooltipContentByColor","replace","a","toUpperCase","formatColorNameForTooltip","ColorPickerColorsGrid","forwardRef","_ref","ref","onColorClicked","colorsToRender","numberOfColorsInLine","focusOnMount","value","colorStyle","ColorIndicatorIcon","shouldRenderIndicatorWithoutBackground","SelectedIndicatorIcon","colorSize","colorShape","showColorNameTooltip","id","dataTestId","getItemByIndex","useCallback","index","_useGridKeyboardNavig","useGridKeyboardNavigation","onItemClicked","itemsCount","length","numberOfItemsInLine","entryFocusStrategy","activeIndex","onSelectionAction","React","createElement","className","styles","colorsGrid","tabIndex","role","map","ColorPickerItemComponent","key","isSelected","Array","isArray","includes","isActive","tooltipContent","undefined"],"mappings":"4QAWA,IAMMA,EAAwB,SAC5BC,EACAC,GAEA,OAAIA,GAAyBA,EAAsBD,GAC1CC,EAAsBD,GAXC,SAACA,GACjC,OAAOA,EAAME,QAAQ,OAAQ,KAAKA,QAAQ,eAAe,SAAUC,GACjE,OAAOA,EAAEC,aACX,GACF,CASWC,CAA0BL,EAErC,EAyDMM,EAAwBC,GAC5B,SAAAC,EAkBEC,GACE,IAjBAC,EAAcF,EAAdE,eACAC,EAAcH,EAAdG,eACAC,EAAoBJ,EAApBI,qBACAC,EAAYL,EAAZK,aACAC,EAAKN,EAALM,MACAC,EAAUP,EAAVO,WACAC,EAAkBR,EAAlBQ,mBACAC,EAAsCT,EAAtCS,uCACAC,EAAqBV,EAArBU,sBACAC,EAASX,EAATW,UACAlB,EAAqBO,EAArBP,sBACAmB,EAAUZ,EAAVY,WACsBC,EAAoBb,EAA1Ca,qBACAC,EAAEd,EAAFc,GACeC,EAAUf,EAAzB,eAIIgB,EAAiBC,GAAY,SAACC,GAAa,OAAKf,EAAee,KAAQ,CAACf,IAE9EgB,EAA2CC,EAA0B,CACnEf,aAAAA,EACAJ,IAAKA,EACLoB,cAAenB,EACfoB,WAAYnB,EAAeoB,OAC3BC,oBAAqBpB,EACrBqB,mBAAoB,QACpBT,eAAAA,IAPMU,EAAWP,EAAXO,YAAaC,EAAiBR,EAAjBQ,kBAUrB,OACEC,EAAAC,cAAA,KAAA,CAAIC,UAAWC,EAAOC,WAAY/B,IAAKA,EAAKgC,SAAU,EAAGnB,GAAIA,gBAAiBC,EAAYmB,KAAK,QAC5F/B,EAAegC,KAAI,SAAC3C,EAAO0B,GAC1B,OACEU,gBAACQ,EAAwB,CACvBC,IAAK7C,EACLA,MAAOA,EACPU,eAAgB,WAAA,OAAMyB,EAAkBT,EAAM,EAC9CT,uCAAwCD,GAAsBC,EAC9DF,WAAYA,EACZC,mBAAoBA,EACpBE,sBAAuBA,EACvB4B,WAAYC,MAAMC,QAAQlC,GAASA,EAAMmC,SAASjD,GAASc,IAAUd,EACrEkD,SAAUxB,IAAUQ,EACpBf,UAAWA,EACXgC,eAAgB9B,EAAuBtB,EAAsBC,EAAOC,QAAyBmD,EAC7FhC,WAAYA,GAGjB,IAGP"}

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

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

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

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

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

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

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

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

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

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

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

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