@vibe/core 4.0.0 → 4.0.1-alpha-649fd.0

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { type AriaRole, useCallback, useMemo } from \"react\";\nimport { isNil } from \"es-toolkit\";\nimport { type ElementAllowedColor, getElementColor } from \"../../types/Colors\";\nimport { type AvatarSize, type AvatarType } from \"./Avatar.types\";\nimport AvatarBadge, { type AvatarBadgeProps } from \"./AvatarBadge\";\nimport AvatarContent from \"./AvatarContent\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { ClickableWrapper } from \"@vibe/clickable\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport styles from \"./Avatar.module.scss\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface AvatarProps extends VibeComponentProps {\n  /**\n   * The image source for the avatar.\n   */\n  src?: string;\n  /**\n   * The text displayed inside the avatar.\n   */\n  text?: string;\n  /**\n   * Props passed to the Tooltip component. See full options in the [Tooltip documentation](https://vibe.monday.com/?path=/docs/components-tooltip--docs).\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * The ARIA label of the avatar.\n   */\n  \"aria-label\"?: string;\n  /**\n   * If true, the tooltip is disabled.\n   */\n  withoutTooltip?: boolean;\n  /**\n   * The icon displayed inside the avatar.\n   */\n  icon?: SubIcon;\n  /**\n   * The type of the avatar.\n   */\n  type?: AvatarType;\n  /**\n   * Class name applied to the text inside the avatar.\n   */\n  textClassName?: string;\n  /**\n   * Class name applied to the avatar content wrapper.\n   */\n  avatarContentWrapperClassName?: string;\n  /**\n   * The background color of the avatar.\n   */\n  backgroundColor?: ElementAllowedColor;\n  /**\n   * A custom background color.\n   */\n  customBackgroundColor?: string;\n  /**\n   * The ARIA role of the avatar.\n   */\n  role?: AriaRole;\n  /**\n   * The size of the avatar.\n   */\n  size?: AvatarSize;\n  /**\n   * A custom size in pixels.\n   */\n  customSize?: number;\n  /**\n   * The tab index of the avatar.\n   */\n  tabIndex?: number;\n  /**\n   * If true, the avatar is hidden from assistive technologies.\n   */\n  \"aria-hidden\"?: boolean;\n  /**\n   * If true, the avatar is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If true, renders the avatar as a square instead of a circle.\n   */\n  square?: boolean;\n  /**\n   * Props for the top-left badge.\n   */\n  topLeftBadgeProps?: AvatarBadgeProps;\n  /**\n   * Props for the top-right badge.\n   */\n  topRightBadgeProps?: AvatarBadgeProps;\n  /**\n   * Props for the bottom-left badge.\n   */\n  bottomLeftBadgeProps?: AvatarBadgeProps;\n  /**\n   * Props for the bottom-right badge.\n   */\n  bottomRightBadgeProps?: AvatarBadgeProps;\n  /**\n   * If true, removes the avatar's border.\n   */\n  withoutBorder?: boolean;\n  /**\n   * Callback fired when the avatar is clicked.\n   */\n  onClick?: (event: React.MouseEvent | React.KeyboardEvent, avatarId: string) => void;\n}\n\nconst Avatar = ({\n  id,\n  type = \"text\",\n  className,\n  avatarContentWrapperClassName,\n  textClassName = \"\",\n  size = \"large\",\n  src,\n  icon,\n  text,\n  tooltipProps,\n  \"aria-label\": ariaLabel,\n  withoutTooltip = false,\n  role,\n  backgroundColor = \"chili-blue\",\n  square,\n  disabled,\n  tabIndex,\n  \"aria-hidden\": ariaHidden = false,\n  topLeftBadgeProps,\n  topRightBadgeProps,\n  bottomLeftBadgeProps,\n  bottomRightBadgeProps,\n  withoutBorder = false,\n  customSize = null,\n  customBackgroundColor = null,\n  onClick,\n  \"data-testid\": dataTestId\n}: AvatarProps) => {\n  const backgroundColorStyle = useMemo(() => {\n    if (customBackgroundColor) return { backgroundColor: customBackgroundColor };\n    return src ? {} : { backgroundColor: getElementColor(backgroundColor) };\n  }, [src, backgroundColor, customBackgroundColor]);\n  const sizeStyle = useMemo(() => {\n    return customSize ? { height: customSize, width: customSize } : {};\n  }, [customSize]);\n\n  const overrideTooltipProps = useMemo(() => {\n    if (withoutTooltip) return undefined;\n\n    if (tooltipProps) {\n      return { content: ariaLabel, ...tooltipProps };\n    } else {\n      return { content: ariaLabel };\n    }\n  }, [ariaLabel, tooltipProps, withoutTooltip]);\n\n  const badgesContainer = useMemo(() => {\n    const badges = [];\n    if (!isNil(topLeftBadgeProps)) {\n      badges.push(\n        <div key=\"top-left-badge\" className={cx(styles.badge, styles.badgeTopLeft)}>\n          <AvatarBadge size={size} {...topLeftBadgeProps} />\n        </div>\n      );\n    }\n    if (!isNil(topRightBadgeProps)) {\n      badges.push(\n        <div key=\"top-right-badge\" className={cx(styles.badge, styles.badgeTopRight)}>\n          <AvatarBadge size={size} {...topRightBadgeProps} />\n        </div>\n      );\n    }\n    if (!isNil(bottomLeftBadgeProps)) {\n      badges.push(\n        <div key=\"bottom-left-badge\" className={cx(styles.badge, styles.badgeBottomLeft)}>\n          <AvatarBadge size={size} {...bottomLeftBadgeProps} />\n        </div>\n      );\n    }\n    if (!isNil(bottomRightBadgeProps)) {\n      badges.push(\n        <div key=\"bottom-right-bade\" className={cx(styles.badge, styles.badgeBottomRight)}>\n          <AvatarBadge size={size} {...bottomRightBadgeProps} />\n        </div>\n      );\n    }\n\n    return badges.length > 0 ? <div className={cx(styles.badges)}>{badges}</div> : null;\n  }, [size, topLeftBadgeProps, topRightBadgeProps, bottomLeftBadgeProps, bottomRightBadgeProps]);\n\n  const defaultTabIndex = useMemo(() => {\n    if (!disabled && (onClick || overrideTooltipProps?.content)) {\n      return 0;\n    }\n    return -1;\n  }, [disabled, onClick, overrideTooltipProps?.content]);\n\n  const overrideTabIndex = tabIndex ?? defaultTabIndex;\n\n  const clickHandler = useCallback(\n    (event: React.MouseEvent | React.KeyboardEvent) => {\n      event.preventDefault();\n      if (onClick) {\n        onClick(event, id);\n      }\n    },\n    [onClick, id]\n  );\n\n  return (\n    <div\n      id={id}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR, id)}\n      className={cx(styles.avatar, styles[size], className)}\n      style={sizeStyle}\n      data-vibe={ComponentVibeId.AVATAR}\n    >\n      <ClickableWrapper\n        isClickable={!!onClick}\n        clickableProps={{\n          onClick: clickHandler,\n          tabIndex: -1,\n          className: styles.clickableWrapper\n        }}\n      >\n        <Tooltip showTrigger={[\"focus\", \"mouseenter\"]} hideTrigger={[\"blur\", \"mouseleave\"]} {...overrideTooltipProps}>\n          <div\n            className={cx(\n              styles.circle,\n              getStyle(styles, camelCase(\"circle--\" + type)),\n              {\n                [styles.disabled]: disabled,\n                [styles.square]: square,\n                [styles.withoutBorder]: withoutBorder\n              },\n              avatarContentWrapperClassName\n            )}\n            aria-hidden={ariaHidden}\n            tabIndex={overrideTabIndex}\n            style={{ ...backgroundColorStyle }}\n          >\n            <AvatarContent\n              type={type}\n              size={size}\n              src={src}\n              icon={icon}\n              text={text}\n              aria-label={ariaLabel}\n              role={role}\n              textClassName={textClassName}\n            />\n          </div>\n          {badgesContainer}\n        </Tooltip>\n      </ClickableWrapper>\n    </div>\n  );\n};\n\nexport default Avatar;\n"],"names":["Avatar","_ref","id","_ref$type","type","className","avatarContentWrapperClassName","_ref$textClassName","textClassName","_ref$size","size","src","icon","text","tooltipProps","ariaLabel","_ref$withoutTooltip","withoutTooltip","role","_ref$backgroundColor","backgroundColor","square","disabled","tabIndex","_ref$ariaHidden","ariaHidden","topLeftBadgeProps","topRightBadgeProps","bottomLeftBadgeProps","bottomRightBadgeProps","_ref$withoutBorder","withoutBorder","_ref$customSize","customSize","_ref$customBackground","customBackgroundColor","onClick","dataTestId","backgroundColorStyle","useMemo","getElementColor","sizeStyle","height","width","overrideTooltipProps","Object","assign","content","badgesContainer","badges","isNil","push","React","key","cx","styles","badge","badgeTopLeft","createElement","AvatarBadge","badgeTopRight","badgeBottomLeft","badgeBottomRight","length","defaultTabIndex","overrideTabIndex","clickHandler","useCallback","event","preventDefault","getTestId","ComponentDefaultTestId","AVATAR","avatar","style","ComponentVibeId","ClickableWrapper","isClickable","clickableProps","clickableWrapper","Tooltip","showTrigger","hideTrigger","circle","getStyle","camelCase","_defineProperty","AvatarContent"],"mappings":"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"}
+{"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"@vibe/shared\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { type AriaRole, useCallback, useMemo } from \"react\";\nimport { isNil } from \"es-toolkit\";\nimport { type ElementAllowedColor, getElementColor } from \"../../types/Colors\";\nimport { type AvatarSize, type AvatarType } from \"./Avatar.types\";\nimport AvatarBadge, { type AvatarBadgeProps } from \"./AvatarBadge\";\nimport AvatarContent from \"./AvatarContent\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { ClickableWrapper } from \"@vibe/clickable\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport styles from \"./Avatar.module.scss\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface AvatarProps extends VibeComponentProps {\n  /**\n   * The image source for the avatar.\n   */\n  src?: string;\n  /**\n   * The text displayed inside the avatar.\n   */\n  text?: string;\n  /**\n   * Props passed to the Tooltip component. See full options in the [Tooltip documentation](https://vibe.monday.com/?path=/docs/components-tooltip--docs).\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * The ARIA label of the avatar.\n   */\n  \"aria-label\"?: string;\n  /**\n   * If true, the tooltip is disabled.\n   */\n  withoutTooltip?: boolean;\n  /**\n   * The icon displayed inside the avatar.\n   */\n  icon?: SubIcon;\n  /**\n   * The type of the avatar.\n   */\n  type?: AvatarType;\n  /**\n   * Class name applied to the text inside the avatar.\n   */\n  textClassName?: string;\n  /**\n   * Class name applied to the avatar content wrapper.\n   */\n  avatarContentWrapperClassName?: string;\n  /**\n   * The background color of the avatar.\n   */\n  backgroundColor?: ElementAllowedColor;\n  /**\n   * A custom background color.\n   */\n  customBackgroundColor?: string;\n  /**\n   * The ARIA role of the avatar.\n   */\n  role?: AriaRole;\n  /**\n   * The size of the avatar.\n   */\n  size?: AvatarSize;\n  /**\n   * A custom size in pixels.\n   */\n  customSize?: number;\n  /**\n   * The tab index of the avatar.\n   */\n  tabIndex?: number;\n  /**\n   * If true, the avatar is hidden from assistive technologies.\n   */\n  \"aria-hidden\"?: boolean;\n  /**\n   * If true, the avatar is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If true, renders the avatar as a square instead of a circle.\n   */\n  square?: boolean;\n  /**\n   * Props for the top-left badge.\n   */\n  topLeftBadgeProps?: AvatarBadgeProps;\n  /**\n   * Props for the top-right badge.\n   */\n  topRightBadgeProps?: AvatarBadgeProps;\n  /**\n   * Props for the bottom-left badge.\n   */\n  bottomLeftBadgeProps?: AvatarBadgeProps;\n  /**\n   * Props for the bottom-right badge.\n   */\n  bottomRightBadgeProps?: AvatarBadgeProps;\n  /**\n   * If true, removes the avatar's border.\n   */\n  withoutBorder?: boolean;\n  /**\n   * Callback fired when the avatar is clicked.\n   */\n  onClick?: (event: React.MouseEvent | React.KeyboardEvent, avatarId: string) => void;\n}\n\nconst Avatar = ({\n  id,\n  type = \"text\",\n  className,\n  avatarContentWrapperClassName,\n  textClassName = \"\",\n  size = \"large\",\n  src,\n  icon,\n  text,\n  tooltipProps,\n  \"aria-label\": ariaLabel,\n  withoutTooltip = false,\n  role,\n  backgroundColor = \"chili-blue\",\n  square,\n  disabled,\n  tabIndex,\n  \"aria-hidden\": ariaHidden = false,\n  topLeftBadgeProps,\n  topRightBadgeProps,\n  bottomLeftBadgeProps,\n  bottomRightBadgeProps,\n  withoutBorder = false,\n  customSize = null,\n  customBackgroundColor = null,\n  onClick,\n  \"data-testid\": dataTestId\n}: AvatarProps) => {\n  const backgroundColorStyle = useMemo(() => {\n    if (customBackgroundColor) return { backgroundColor: customBackgroundColor };\n    return src ? {} : { backgroundColor: getElementColor(backgroundColor) };\n  }, [src, backgroundColor, customBackgroundColor]);\n  const sizeStyle = useMemo(() => {\n    return customSize ? { height: customSize, width: customSize } : {};\n  }, [customSize]);\n\n  const overrideTooltipProps = useMemo(() => {\n    if (withoutTooltip) return undefined;\n\n    if (tooltipProps) {\n      return { content: ariaLabel, ...tooltipProps };\n    } else {\n      return { content: ariaLabel };\n    }\n  }, [ariaLabel, tooltipProps, withoutTooltip]);\n\n  const badgesContainer = useMemo(() => {\n    const badges = [];\n    if (!isNil(topLeftBadgeProps)) {\n      badges.push(\n        <div key=\"top-left-badge\" className={cx(styles.badge, styles.badgeTopLeft)}>\n          <AvatarBadge size={size} {...topLeftBadgeProps} />\n        </div>\n      );\n    }\n    if (!isNil(topRightBadgeProps)) {\n      badges.push(\n        <div key=\"top-right-badge\" className={cx(styles.badge, styles.badgeTopRight)}>\n          <AvatarBadge size={size} {...topRightBadgeProps} />\n        </div>\n      );\n    }\n    if (!isNil(bottomLeftBadgeProps)) {\n      badges.push(\n        <div key=\"bottom-left-badge\" className={cx(styles.badge, styles.badgeBottomLeft)}>\n          <AvatarBadge size={size} {...bottomLeftBadgeProps} />\n        </div>\n      );\n    }\n    if (!isNil(bottomRightBadgeProps)) {\n      badges.push(\n        <div key=\"bottom-right-bade\" className={cx(styles.badge, styles.badgeBottomRight)}>\n          <AvatarBadge size={size} {...bottomRightBadgeProps} />\n        </div>\n      );\n    }\n\n    return badges.length > 0 ? <div className={cx(styles.badges)}>{badges}</div> : null;\n  }, [size, topLeftBadgeProps, topRightBadgeProps, bottomLeftBadgeProps, bottomRightBadgeProps]);\n\n  const defaultTabIndex = useMemo(() => {\n    if (!disabled && (onClick || overrideTooltipProps?.content)) {\n      return 0;\n    }\n    return -1;\n  }, [disabled, onClick, overrideTooltipProps?.content]);\n\n  const overrideTabIndex = tabIndex ?? defaultTabIndex;\n\n  const clickHandler = useCallback(\n    (event: React.MouseEvent | React.KeyboardEvent) => {\n      event.preventDefault();\n      if (onClick) {\n        onClick(event, id);\n      }\n    },\n    [onClick, id]\n  );\n\n  return (\n    <div\n      id={id}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR, id)}\n      className={cx(styles.avatar, styles[size], className)}\n      style={sizeStyle}\n      data-vibe={ComponentVibeId.AVATAR}\n    >\n      <ClickableWrapper\n        isClickable={!!onClick}\n        clickableProps={{\n          onClick: clickHandler,\n          tabIndex: -1,\n          className: styles.clickableWrapper\n        }}\n      >\n        <Tooltip showTrigger={[\"focus\", \"mouseenter\"]} hideTrigger={[\"blur\", \"mouseleave\"]} {...overrideTooltipProps}>\n          <div\n            className={cx(\n              styles.circle,\n              getStyle(styles, camelCase(\"circle--\" + type)),\n              {\n                [styles.disabled]: disabled,\n                [styles.square]: square,\n                [styles.withoutBorder]: withoutBorder\n              },\n              avatarContentWrapperClassName\n            )}\n            aria-hidden={ariaHidden}\n            tabIndex={overrideTabIndex}\n            style={{ ...backgroundColorStyle }}\n          >\n            <AvatarContent\n              type={type}\n              size={size}\n              src={src}\n              icon={icon}\n              text={text}\n              aria-label={ariaLabel}\n              role={role}\n              textClassName={textClassName}\n            />\n          </div>\n          {badgesContainer}\n        </Tooltip>\n      </ClickableWrapper>\n    </div>\n  );\n};\n\nexport default Avatar;\n"],"names":["Avatar","_ref","id","_ref$type","type","className","avatarContentWrapperClassName","_ref$textClassName","textClassName","_ref$size","size","src","icon","text","tooltipProps","ariaLabel","_ref$withoutTooltip","withoutTooltip","role","_ref$backgroundColor","backgroundColor","square","disabled","tabIndex","_ref$ariaHidden","ariaHidden","topLeftBadgeProps","topRightBadgeProps","bottomLeftBadgeProps","bottomRightBadgeProps","_ref$withoutBorder","withoutBorder","_ref$customSize","customSize","_ref$customBackground","customBackgroundColor","onClick","dataTestId","backgroundColorStyle","useMemo","getElementColor","sizeStyle","height","width","overrideTooltipProps","Object","assign","content","badgesContainer","badges","isNil","push","React","key","cx","styles","badge","badgeTopLeft","createElement","AvatarBadge","badgeTopRight","badgeBottomLeft","badgeBottomRight","length","defaultTabIndex","overrideTabIndex","clickHandler","useCallback","event","preventDefault","getTestId","ComponentDefaultTestId","AVATAR","avatar","style","ComponentVibeId","ClickableWrapper","isClickable","clickableProps","clickableWrapper","Tooltip","showTrigger","hideTrigger","circle","getStyle","camelCase","_defineProperty","AvatarContent"],"mappings":"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"}

package/dist/src/components/Avatar/AvatarBadge.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../../_virtual/_tslib.js";import t from"react";import{camelCase as s}from"es-toolkit";import{getStyle as a}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as i,ComponentDefaultTestId as o}from"../../tests/testIds.js";import c from"classnames";import r from"./AvatarBadge.module.scss.js";import l from"../../../components/clickable/dist/Clickable/ClickableWrapper.js";import n from"../../../components/icon/dist/Icon/Icon.js";import m from"../../../components/icon/dist/Icon/CustomSvgIcon/CustomSvgIcon.js";var d=function(d){var p=d.src,b=d.icon,f=d.tabIndex,k=void 0===f?0:f,C=d.className,j=d.size,u=void 0===j?"large":j,I=d.id,v=d.onClick,g=d["data-testid"],x=e(d,["src","icon","tabIndex","className","size","id","onClick","data-testid"]),E=c(a(r,s("badge--"+u)),C),A=g||i(o.AVATAR_BADGE,I),N=-1===k&&!!v;if(b)return N?t.createElement(l,{isClickable:!0,clickableProps:{onClick:v,tabIndex:k}},t.createElement(n,Object.assign({icon:b,className:E},x,{"data-testid":A}))):t.createElement(n,Object.assign({icon:b,className:E,tabindex:k},x,{"data-testid":A}));var O=t.createElement(m,Object.assign({src:p,className:E},x,{"data-testid":A}));return p?N?t.createElement(l,{isClickable:!0,clickableProps:{onClick:v,tabIndex:k}},O):O:null};export{d as default};
+import{__rest as t}from"../../../_virtual/_tslib.js";import e from"react";import{camelCase as s}from"es-toolkit";import{getTestId as a,ComponentDefaultTestId as i}from"../../tests/testIds.js";import o from"classnames";import c from"./AvatarBadge.module.scss.js";import r from"../../../components/clickable/dist/Clickable/ClickableWrapper.js";import l from"../../../components/icon/dist/Icon/Icon.js";import n from"../../../components/icon/dist/Icon/CustomSvgIcon/CustomSvgIcon.js";import{getStyle as m}from"../../../shared/dist/utils/typesciptCssModulesHelper.js";var d=function(d){var p=d.src,b=d.icon,f=d.tabIndex,k=void 0===f?0:f,u=d.className,C=d.size,j=void 0===C?"large":C,I=d.id,v=d.onClick,g=d["data-testid"],x=t(d,["src","icon","tabIndex","className","size","id","onClick","data-testid"]),E=o(m(c,s("badge--"+j)),u),A=g||a(i.AVATAR_BADGE,I),N=-1===k&&!!v;if(b)return N?e.createElement(r,{isClickable:!0,clickableProps:{onClick:v,tabIndex:k}},e.createElement(l,Object.assign({icon:b,className:E},x,{"data-testid":A}))):e.createElement(l,Object.assign({icon:b,className:E,tabindex:k},x,{"data-testid":A}));var O=e.createElement(n,Object.assign({src:p,className:E},x,{"data-testid":A}));return p?N?e.createElement(r,{isClickable:!0,clickableProps:{onClick:v,tabIndex:k}},O):O:null};export{d as default};
 //# sourceMappingURL=AvatarBadge.js.map

package/dist/src/components/Avatar/AvatarBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarBadge.js","sources":["../../../../src/components/Avatar/AvatarBadge.tsx"],"sourcesContent":["import React from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { Icon, CustomSvgIcon } from \"@vibe/icon\";\nimport { type AvatarSize } from \"./Avatar.types\";\nimport styles from \"./AvatarBadge.module.scss\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport { ClickableWrapper } from \"@vibe/clickable\";\n\nexport interface AvatarBadgeProps extends VibeComponentProps {\n  /**\n   * The image source for the badge.\n   */\n  src?: string;\n  /**\n   * The icon displayed inside the badge.\n   */\n  icon?: SubIcon;\n  /**\n   * The tab index of the badge.\n   */\n  tabIndex?: number;\n  /**\n   * The size of the badge.\n   */\n  size?: AvatarSize;\n  /**\n   * Callback fired when the badge is clicked.\n   */\n  onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n}\n\nconst AvatarBadge = ({\n  src,\n  icon,\n  tabIndex = 0,\n  className,\n  size = \"large\",\n  id,\n  onClick,\n  \"data-testid\": dataTestId,\n  ...otherProps\n}: AvatarBadgeProps) => {\n  const classNames = cx(getStyle(styles, camelCase(\"badge--\" + size)), className);\n  const testId = dataTestId || getTestId(ComponentDefaultTestId.AVATAR_BADGE, id);\n  const isClickable = tabIndex === -1 && !!onClick;\n\n  if (icon) {\n    return isClickable ? (\n      <ClickableWrapper isClickable clickableProps={{ onClick, tabIndex }}>\n        <Icon icon={icon} className={classNames} {...otherProps} data-testid={testId} />\n      </ClickableWrapper>\n    ) : (\n      <Icon icon={icon} className={classNames} tabindex={tabIndex} {...otherProps} data-testid={testId} />\n    );\n  }\n\n  const svgIcon = <CustomSvgIcon src={src} className={classNames} {...otherProps} data-testid={testId} />;\n\n  return src ? (\n    isClickable ? (\n      <ClickableWrapper isClickable clickableProps={{ onClick, tabIndex }}>\n        {svgIcon}\n      </ClickableWrapper>\n    ) : (\n      svgIcon\n    )\n  ) : null;\n};\n\nexport default AvatarBadge;\n"],"names":["AvatarBadge","_a","src","icon","_a$tabIndex","tabIndex","className","_a$size","size","id","onClick","dataTestId","otherProps","__rest","classNames","cx","getStyle","styles","camelCase","testId","getTestId","ComponentDefaultTestId","AVATAR_BADGE","isClickable","React","ClickableWrapper","clickableProps","createElement","Icon","Object","assign","tabindex","svgIcon","CustomSvgIcon"],"mappings":"uiBAmCA,IAAMA,EAAc,SAACC,OACnBC,EAOyBD,EAPzBC,IACAC,EAMyBF,EANzBE,KAAIC,EAMqBH,EALzBI,SAAAA,OAAW,IAAHD,EAAG,EAACA,EACZE,EAIyBL,EAJzBK,UAASC,EAIgBN,EAHzBO,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EACdE,EAEyBR,EAFzBQ,GACAC,EACyBT,EADzBS,QACeC,EAAUV,EAAzB,eACGW,EATgBC,EAAAZ,EAAA,CAAA,MAAA,OAAA,WAAA,YAAA,OAAA,KAAA,UAAA,gBAWba,EAAaC,EAAGC,EAASC,EAAQC,EAAU,UAAYV,IAAQF,GAC/Da,EAASR,GAAcS,EAAUC,EAAuBC,aAAcb,GACtEc,GAA4B,IAAdlB,KAAqBK,EAEzC,GAAIP,EACF,OAAOoB,EACLC,gBAACC,EAAgB,CAACF,aAAW,EAACG,eAAgB,CAAEhB,QAAAA,EAASL,SAAAA,IACvDmB,EAAAG,cAACC,EAAKC,OAAAC,OAAA,CAAA3B,KAAMA,EAAMG,UAAWQ,GAAgBF,iBAAyBO,MAGxEK,EAACG,cAAAC,iBAAKzB,KAAMA,EAAMG,UAAWQ,EAAYiB,SAAU1B,GAAcO,iBAAyBO,KAI9F,IAAMa,EAAUR,EAAAG,cAACM,EAAaJ,OAAAC,OAAA,CAAC5B,IAAKA,EAAKI,UAAWQ,GAAgBF,EAAyB,CAAA,cAAAO,KAE7F,OAAOjB,EACLqB,EACEC,gBAACC,EAAgB,CAACF,aAAW,EAACG,eAAgB,CAAEhB,QAAAA,EAASL,SAAAA,IACtD2B,GAGHA,EAEA,IACN"}
+{"version":3,"file":"AvatarBadge.js","sources":["../../../../src/components/Avatar/AvatarBadge.tsx"],"sourcesContent":["import React from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"@vibe/shared\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { Icon, CustomSvgIcon } from \"@vibe/icon\";\nimport { type AvatarSize } from \"./Avatar.types\";\nimport styles from \"./AvatarBadge.module.scss\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport { ClickableWrapper } from \"@vibe/clickable\";\n\nexport interface AvatarBadgeProps extends VibeComponentProps {\n  /**\n   * The image source for the badge.\n   */\n  src?: string;\n  /**\n   * The icon displayed inside the badge.\n   */\n  icon?: SubIcon;\n  /**\n   * The tab index of the badge.\n   */\n  tabIndex?: number;\n  /**\n   * The size of the badge.\n   */\n  size?: AvatarSize;\n  /**\n   * Callback fired when the badge is clicked.\n   */\n  onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n}\n\nconst AvatarBadge = ({\n  src,\n  icon,\n  tabIndex = 0,\n  className,\n  size = \"large\",\n  id,\n  onClick,\n  \"data-testid\": dataTestId,\n  ...otherProps\n}: AvatarBadgeProps) => {\n  const classNames = cx(getStyle(styles, camelCase(\"badge--\" + size)), className);\n  const testId = dataTestId || getTestId(ComponentDefaultTestId.AVATAR_BADGE, id);\n  const isClickable = tabIndex === -1 && !!onClick;\n\n  if (icon) {\n    return isClickable ? (\n      <ClickableWrapper isClickable clickableProps={{ onClick, tabIndex }}>\n        <Icon icon={icon} className={classNames} {...otherProps} data-testid={testId} />\n      </ClickableWrapper>\n    ) : (\n      <Icon icon={icon} className={classNames} tabindex={tabIndex} {...otherProps} data-testid={testId} />\n    );\n  }\n\n  const svgIcon = <CustomSvgIcon src={src} className={classNames} {...otherProps} data-testid={testId} />;\n\n  return src ? (\n    isClickable ? (\n      <ClickableWrapper isClickable clickableProps={{ onClick, tabIndex }}>\n        {svgIcon}\n      </ClickableWrapper>\n    ) : (\n      svgIcon\n    )\n  ) : null;\n};\n\nexport default AvatarBadge;\n"],"names":["AvatarBadge","_a","src","icon","_a$tabIndex","tabIndex","className","_a$size","size","id","onClick","dataTestId","otherProps","__rest","classNames","cx","getStyle","styles","camelCase","testId","getTestId","ComponentDefaultTestId","AVATAR_BADGE","isClickable","React","ClickableWrapper","clickableProps","createElement","Icon","Object","assign","tabindex","svgIcon","CustomSvgIcon"],"mappings":"ojBAmCA,IAAMA,EAAc,SAACC,OACnBC,EAOyBD,EAPzBC,IACAC,EAMyBF,EANzBE,KAAIC,EAMqBH,EALzBI,SAAAA,OAAW,IAAHD,EAAG,EAACA,EACZE,EAIyBL,EAJzBK,UAASC,EAIgBN,EAHzBO,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EACdE,EAEyBR,EAFzBQ,GACAC,EACyBT,EADzBS,QACeC,EAAUV,EAAzB,eACGW,EATgBC,EAAAZ,EAAA,CAAA,MAAA,OAAA,WAAA,YAAA,OAAA,KAAA,UAAA,gBAWba,EAAaC,EAAGC,EAASC,EAAQC,EAAU,UAAYV,IAAQF,GAC/Da,EAASR,GAAcS,EAAUC,EAAuBC,aAAcb,GACtEc,GAA4B,IAAdlB,KAAqBK,EAEzC,GAAIP,EACF,OAAOoB,EACLC,gBAACC,EAAgB,CAACF,aAAW,EAACG,eAAgB,CAAEhB,QAAAA,EAASL,SAAAA,IACvDmB,EAAAG,cAACC,EAAKC,OAAAC,OAAA,CAAA3B,KAAMA,EAAMG,UAAWQ,GAAgBF,iBAAyBO,MAGxEK,EAACG,cAAAC,iBAAKzB,KAAMA,EAAMG,UAAWQ,EAAYiB,SAAU1B,GAAcO,iBAAyBO,KAI9F,IAAMa,EAAUR,EAAAG,cAACM,EAAaJ,OAAAC,OAAA,CAAC5B,IAAKA,EAAKI,UAAWQ,GAAgBF,EAAyB,CAAA,cAAAO,KAE7F,OAAOjB,EACLqB,EACEC,gBAACC,EAAgB,CAACF,aAAW,EAACG,eAAgB,CAAEhB,QAAAA,EAASL,SAAAA,IACtD2B,GAGHA,EAEA,IACN"}

package/dist/src/components/Avatar/AvatarContent.js

@@ -1,2 +1,2 @@
-import{camelCase as t}from"es-toolkit";import{getStyle as e}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as a,ComponentDefaultTestId as s}from"../../tests/testIds.js";import r from"classnames";import o from"react";import i from"./AvatarContent.module.scss.js";import l from"../../../components/icon/dist/Icon/Icon.js";var n=function(n){var c=n.type,m=void 0===c?"text":c,d=n.src,p=n.icon,f=n.text,u=n["aria-label"],A=n.role,N=n.size,T=void 0===N?"large":N,v=n.textClassName,C=void 0===v?"":v,E=n.id,x=n["data-testid"],_=r(e(i,t("content_"+m)),e(i,t("content_"+m+"--"+T)));switch(m){case"img":return o.createElement("img",{role:A,alt:u,src:d,className:_,id:E,"data-testid":x||a(s.AVATAR_CONTENT,E)});case"icon":return o.createElement(l,{icon:p,"aria-label":u,className:_,"aria-hidden":!1,id:E,"data-testid":x||a(s.AVATAR_CONTENT,E)});case"text":return o.createElement("span",{"aria-label":u,role:A,className:r(_,C),id:E,"data-testid":x||a(s.AVATAR_CONTENT,E)},f);default:return null}};export{n as default};
+import{camelCase as t}from"es-toolkit";import{getTestId as e,ComponentDefaultTestId as a}from"../../tests/testIds.js";import s from"classnames";import r from"react";import i from"./AvatarContent.module.scss.js";import o from"../../../components/icon/dist/Icon/Icon.js";import{getStyle as l}from"../../../shared/dist/utils/typesciptCssModulesHelper.js";var n=function(n){var c=n.type,m=void 0===c?"text":c,d=n.src,p=n.icon,u=n.text,f=n["aria-label"],A=n.role,N=n.size,T=void 0===N?"large":N,v=n.textClassName,C=void 0===v?"":v,E=n.id,x=n["data-testid"],_=s(l(i,t("content_"+m)),l(i,t("content_"+m+"--"+T)));switch(m){case"img":return r.createElement("img",{role:A,alt:f,src:d,className:_,id:E,"data-testid":x||e(a.AVATAR_CONTENT,E)});case"icon":return r.createElement(o,{icon:p,"aria-label":f,className:_,"aria-hidden":!1,id:E,"data-testid":x||e(a.AVATAR_CONTENT,E)});case"text":return r.createElement("span",{"aria-label":f,role:A,className:s(_,C),id:E,"data-testid":x||e(a.AVATAR_CONTENT,E)},u);default:return null}};export{n as default};
 //# sourceMappingURL=AvatarContent.js.map

package/dist/src/components/Avatar/AvatarContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarContent.js","sources":["../../../../src/components/Avatar/AvatarContent.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React from \"react\";\nimport { type AvatarSize, type AvatarType } from \"./Avatar.types\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./AvatarContent.module.scss\";\n\nexport interface AvatarContentProps extends VibeComponentProps {\n  /**\n   * The image source when the type is set to `img`.\n   */\n  src?: string;\n  /**\n   * The type of content displayed inside the avatar.\n   */\n  type?: AvatarType;\n  /**\n   * The size of the avatar content.\n   */\n  size?: AvatarSize;\n  /**\n   * The ARIA role of the content.\n   */\n  role?: string;\n  /**\n   * The label of the content for accessibility.\n   */\n  \"aria-label\"?: string;\n  /**\n   * The icon displayed when the type is set to `icon`.\n   */\n  icon?: SubIcon;\n  /**\n   * Class name applied to the text content.\n   */\n  textClassName?: string;\n  /**\n   * The text displayed when the type is set to `text`.\n   */\n  text?: string;\n}\n\nconst AvatarContent = ({\n  type = \"text\",\n  src,\n  icon,\n  text,\n  \"aria-label\": ariaLabel,\n  role,\n  size = \"large\",\n  textClassName = \"\",\n  id,\n  \"data-testid\": dataTestId\n}: AvatarContentProps) => {\n  const className = cx(\n    getStyle(styles, camelCase(\"content_\" + type)),\n    getStyle(styles, camelCase(\"content_\" + type + \"--\" + size))\n  );\n  switch (type) {\n    case \"img\":\n      return (\n        <img\n          role={role}\n          alt={ariaLabel}\n          src={src}\n          className={className}\n          id={id}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}\n        />\n      );\n    case \"icon\":\n      return (\n        <Icon\n          icon={icon}\n          aria-label={ariaLabel}\n          // role={role}\n          className={className}\n          aria-hidden={false}\n          id={id}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}\n        />\n      );\n    case \"text\":\n      return (\n        <span\n          aria-label={ariaLabel}\n          role={role}\n          className={cx(className, textClassName)}\n          id={id}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}\n        >\n          {text}\n        </span>\n      );\n    default:\n      return null;\n  }\n};\n\nexport default AvatarContent;\n"],"names":["AvatarContent","_ref","_ref$type","type","src","icon","text","ariaLabel","role","_ref$size","size","_ref$textClassName","textClassName","id","dataTestId","className","cx","getStyle","styles","camelCase","React","createElement","alt","getTestId","ComponentDefaultTestId","AVATAR_CONTENT","Icon"],"mappings":"mVA6CA,IAAMA,EAAgB,SAAHC,GAWM,IAAAC,EAAAD,EAVvBE,KAAAA,OAAO,IAAHD,EAAG,OAAMA,EACbE,EAAGH,EAAHG,IACAC,EAAIJ,EAAJI,KACAC,EAAIL,EAAJK,KACcC,EAASN,EAAvB,cACAO,EAAIP,EAAJO,KAAIC,EAAAR,EACJS,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EAAAE,EAAAV,EACdW,cAAAA,OAAgB,IAAHD,EAAG,GAAEA,EAClBE,EAAEZ,EAAFY,GACeC,EAAUb,EAAzB,eAEMc,EAAYC,EAChBC,EAASC,EAAQC,EAAU,WAAahB,IACxCc,EAASC,EAAQC,EAAU,WAAahB,EAAO,KAAOO,KAExD,OAAQP,GACN,IAAK,MACH,OACEiB,EAAAC,cAAA,MAAA,CACEb,KAAMA,EACNc,IAAKf,EACLH,IAAKA,EACLW,UAAWA,EACXF,GAAIA,EACS,cAAAC,GAAcS,EAAUC,EAAuBC,eAAgBZ,KAGlF,IAAK,OACH,OACEO,gBAACM,EAAI,CACHrB,KAAMA,eACME,EAEZQ,UAAWA,EACE,eAAA,EACbF,GAAIA,EACS,cAAAC,GAAcS,EAAUC,EAAuBC,eAAgBZ,KAGlF,IAAK,OACH,OACEO,EAAAC,cAAA,OAAA,CAAA,aACcd,EACZC,KAAMA,EACNO,UAAWC,EAAGD,EAAWH,GACzBC,GAAIA,EACS,cAAAC,GAAcS,EAAUC,EAAuBC,eAAgBZ,IAE3EP,GAGP,QACE,OAAO,KAEb"}
+{"version":3,"file":"AvatarContent.js","sources":["../../../../src/components/Avatar/AvatarContent.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"@vibe/shared\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React from \"react\";\nimport { type AvatarSize, type AvatarType } from \"./Avatar.types\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./AvatarContent.module.scss\";\n\nexport interface AvatarContentProps extends VibeComponentProps {\n  /**\n   * The image source when the type is set to `img`.\n   */\n  src?: string;\n  /**\n   * The type of content displayed inside the avatar.\n   */\n  type?: AvatarType;\n  /**\n   * The size of the avatar content.\n   */\n  size?: AvatarSize;\n  /**\n   * The ARIA role of the content.\n   */\n  role?: string;\n  /**\n   * The label of the content for accessibility.\n   */\n  \"aria-label\"?: string;\n  /**\n   * The icon displayed when the type is set to `icon`.\n   */\n  icon?: SubIcon;\n  /**\n   * Class name applied to the text content.\n   */\n  textClassName?: string;\n  /**\n   * The text displayed when the type is set to `text`.\n   */\n  text?: string;\n}\n\nconst AvatarContent = ({\n  type = \"text\",\n  src,\n  icon,\n  text,\n  \"aria-label\": ariaLabel,\n  role,\n  size = \"large\",\n  textClassName = \"\",\n  id,\n  \"data-testid\": dataTestId\n}: AvatarContentProps) => {\n  const className = cx(\n    getStyle(styles, camelCase(\"content_\" + type)),\n    getStyle(styles, camelCase(\"content_\" + type + \"--\" + size))\n  );\n  switch (type) {\n    case \"img\":\n      return (\n        <img\n          role={role}\n          alt={ariaLabel}\n          src={src}\n          className={className}\n          id={id}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}\n        />\n      );\n    case \"icon\":\n      return (\n        <Icon\n          icon={icon}\n          aria-label={ariaLabel}\n          // role={role}\n          className={className}\n          aria-hidden={false}\n          id={id}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}\n        />\n      );\n    case \"text\":\n      return (\n        <span\n          aria-label={ariaLabel}\n          role={role}\n          className={cx(className, textClassName)}\n          id={id}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}\n        >\n          {text}\n        </span>\n      );\n    default:\n      return null;\n  }\n};\n\nexport default AvatarContent;\n"],"names":["AvatarContent","_ref","_ref$type","type","src","icon","text","ariaLabel","role","_ref$size","size","_ref$textClassName","textClassName","id","dataTestId","className","cx","getStyle","styles","camelCase","React","createElement","alt","getTestId","ComponentDefaultTestId","AVATAR_CONTENT","Icon"],"mappings":"gWA6CA,IAAMA,EAAgB,SAAHC,GAWM,IAAAC,EAAAD,EAVvBE,KAAAA,OAAO,IAAHD,EAAG,OAAMA,EACbE,EAAGH,EAAHG,IACAC,EAAIJ,EAAJI,KACAC,EAAIL,EAAJK,KACcC,EAASN,EAAvB,cACAO,EAAIP,EAAJO,KAAIC,EAAAR,EACJS,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EAAAE,EAAAV,EACdW,cAAAA,OAAgB,IAAHD,EAAG,GAAEA,EAClBE,EAAEZ,EAAFY,GACeC,EAAUb,EAAzB,eAEMc,EAAYC,EAChBC,EAASC,EAAQC,EAAU,WAAahB,IACxCc,EAASC,EAAQC,EAAU,WAAahB,EAAO,KAAOO,KAExD,OAAQP,GACN,IAAK,MACH,OACEiB,EAAAC,cAAA,MAAA,CACEb,KAAMA,EACNc,IAAKf,EACLH,IAAKA,EACLW,UAAWA,EACXF,GAAIA,EACS,cAAAC,GAAcS,EAAUC,EAAuBC,eAAgBZ,KAGlF,IAAK,OACH,OACEO,gBAACM,EAAI,CACHrB,KAAMA,eACME,EAEZQ,UAAWA,EACE,eAAA,EACbF,GAAIA,EACS,cAAAC,GAAcS,EAAUC,EAAuBC,eAAgBZ,KAGlF,IAAK,OACH,OACEO,EAAAC,cAAA,OAAA,CAAA,aACcd,EACZC,KAAMA,EACNO,UAAWC,EAAGD,EAAWH,GACzBC,GAAIA,EACS,cAAAC,GAAcS,EAAUC,EAAuBC,eAAgBZ,IAE3EP,GAGP,QACE,OAAO,KAEb"}

package/dist/src/components/AvatarGroup/AvatarGroupCounter.js

@@ -1,2 +1,2 @@
-import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o,{useRef as t,useCallback as r}from"react";import n from"classnames";import i from"../Counter/Counter.js";import a from"../MenuButton/MenuButton.js";import l from"../Menu/Menu/Menu.js";import s from"../Menu/MenuItem/AvatarMenuItem.js";import u from"./AvatarGroupCounterTooltipContainer.js";import{getStyle as m}from"../../helpers/typesciptCssModulesHelper.js";import{avatarOnClick as c}from"./AvatarGroupHelper.js";import p from"./AvatarGroupCounter.module.scss.js";import{AVATAR_GROUP_COUNTER_AVATAR_SIZE as d}from"./AvatarGroupConstants.js";var v=function(v){var f=v.counterTooltipAvatars,b=void 0===f?[]:f,C=v.counterTooltipCustomProps,x=v.counterTooltipIsVirtualizedList,I=void 0!==x&&x,j=v.size,P=void 0===j?"medium":j,g=v.type,M=v.counterAriaLabel,A=v.disabled,E=v.counterProps||{},z=E.color,N=void 0===z?"light":z,T=E.count,h=void 0===T?b.length:T,y=E.prefix,G=void 0===y?"+":y,L=E.maxDigits,k=void 0===L?3:L,B=E.ariaLabelItemsName,H=void 0===B?"items":B,O=E.noAnimation,R=E.dialogContainerSelector,S=E.tabIndex,D=void 0===S?0:S,V=m(p,null==P?void 0:""+P),_=p[N],q=t(null),w=t(null),F=t(null),J=r((function(){return o.createElement(i,{color:N,count:h,prefix:G,maxDigits:k,"aria-label":M||"Tab for more ".concat(H),noAnimation:O,counterClassName:n(e({},p.disabled,A)),size:"xs"===P?"xs":void 0})}),[M,H,N,k,G,h,A,O]);return b.length||h?A?o.createElement("div",{ref:F,className:n(p.counterContainer,p.disabled,V,_)},J()):b.some((function(e){var o;return null===(o=e.props)||void 0===o?void 0:o.onClick}))?o.createElement(a,{component:J,zIndex:1,className:n(p.counterContainer,V,_),"aria-label":M||"".concat(h," additional ").concat(H),dialogContainerSelector:R},o.createElement(l,{id:"menu",size:"medium",className:p.menu,focusItemIndexOnMount:0},b.map((function(e,t){var r,n,i,a;return o.createElement(s,{menuItemProps:{key:(null===(r=e.props)||void 0===r?void 0:r.id)||t+"",title:(null===(i=null===(n=e.props)||void 0===n?void 0:n.tooltipProps)||void 0===i?void 0:i.content)||(null===(a=null==e?void 0:e.props)||void 0===a?void 0:a["aria-label"]),onClick:function(o){return c(o,e.props)}},avatarProps:Object.assign(Object.assign({},e.props),{customSize:d,"aria-label":"",tabIndex:-1})})})))):o.createElement(u,{focusPrevPlaceholderRef:q,focusNextPlaceholderRef:w,counterContainerRef:F,avatars:b,counterTooltipCustomProps:C,counterTooltipIsVirtualizedList:I,type:g},o.createElement("div",{tabIndex:-1,ref:q}),o.createElement("div",{tabIndex:D,className:n(p.counterContainer,V,_),ref:F},J(),o.createElement("div",{tabIndex:-1,ref:w}))):null};export{v as default};
+import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o,{useRef as t,useCallback as r}from"react";import n from"classnames";import i from"../Counter/Counter.js";import a from"../MenuButton/MenuButton.js";import l from"../Menu/Menu/Menu.js";import s from"../Menu/MenuItem/AvatarMenuItem.js";import u from"./AvatarGroupCounterTooltipContainer.js";import{avatarOnClick as m}from"./AvatarGroupHelper.js";import c from"./AvatarGroupCounter.module.scss.js";import{AVATAR_GROUP_COUNTER_AVATAR_SIZE as d}from"./AvatarGroupConstants.js";import{getStyle as p}from"../../../shared/dist/utils/typesciptCssModulesHelper.js";var v=function(v){var f=v.counterTooltipAvatars,b=void 0===f?[]:f,C=v.counterTooltipCustomProps,x=v.counterTooltipIsVirtualizedList,I=void 0!==x&&x,j=v.size,P=void 0===j?"medium":j,g=v.type,M=v.counterAriaLabel,A=v.disabled,E=v.counterProps||{},z=E.color,N=void 0===z?"light":z,T=E.count,h=void 0===T?b.length:T,y=E.prefix,G=void 0===y?"+":y,L=E.maxDigits,k=void 0===L?3:L,B=E.ariaLabelItemsName,H=void 0===B?"items":B,O=E.noAnimation,R=E.dialogContainerSelector,S=E.tabIndex,D=void 0===S?0:S,V=p(c,null==P?void 0:""+P),_=c[N],q=t(null),w=t(null),F=t(null),J=r((function(){return o.createElement(i,{color:N,count:h,prefix:G,maxDigits:k,"aria-label":M||"Tab for more ".concat(H),noAnimation:O,counterClassName:n(e({},c.disabled,A)),size:"xs"===P?"xs":void 0})}),[M,H,N,k,G,h,A,O]);return b.length||h?A?o.createElement("div",{ref:F,className:n(c.counterContainer,c.disabled,V,_)},J()):b.some((function(e){var o;return null===(o=e.props)||void 0===o?void 0:o.onClick}))?o.createElement(a,{component:J,zIndex:1,className:n(c.counterContainer,V,_),"aria-label":M||"".concat(h," additional ").concat(H),dialogContainerSelector:R},o.createElement(l,{id:"menu",size:"medium",className:c.menu,focusItemIndexOnMount:0},b.map((function(e,t){var r,n,i,a;return o.createElement(s,{menuItemProps:{key:(null===(r=e.props)||void 0===r?void 0:r.id)||t+"",title:(null===(i=null===(n=e.props)||void 0===n?void 0:n.tooltipProps)||void 0===i?void 0:i.content)||(null===(a=null==e?void 0:e.props)||void 0===a?void 0:a["aria-label"]),onClick:function(o){return m(o,e.props)}},avatarProps:Object.assign(Object.assign({},e.props),{customSize:d,"aria-label":"",tabIndex:-1})})})))):o.createElement(u,{focusPrevPlaceholderRef:q,focusNextPlaceholderRef:w,counterContainerRef:F,avatars:b,counterTooltipCustomProps:C,counterTooltipIsVirtualizedList:I,type:g},o.createElement("div",{tabIndex:-1,ref:q}),o.createElement("div",{tabIndex:D,className:n(c.counterContainer,V,_),ref:F},J(),o.createElement("div",{tabIndex:-1,ref:w}))):null};export{v as default};
 //# sourceMappingURL=AvatarGroupCounter.js.map

package/dist/src/components/AvatarGroup/AvatarGroupCounter.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroupCounter.js","sources":["../../../../src/components/AvatarGroup/AvatarGroupCounter.tsx"],"sourcesContent":["import React, { type ReactElement, useCallback, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { type AvatarProps } from \"../Avatar/Avatar\";\nimport Counter from \"../Counter/Counter\";\nimport MenuButton from \"../MenuButton/MenuButton\";\nimport Menu from \"../Menu/Menu/Menu\";\nimport AvatarMenuItem from \"../Menu/MenuItem/AvatarMenuItem\";\nimport AvatarGroupCounterTooltipContainer from \"./AvatarGroupCounterTooltipContainer\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { type AvatarSize, type AvatarType } from \"../Avatar/Avatar.types\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { type AvatarGroupCounterVisualProps } from \"./AvatarGroup.types\";\nimport { type TooltipProps } from \"@vibe/tooltip\";\nimport { avatarOnClick } from \"./AvatarGroupHelper\";\nimport styles from \"./AvatarGroupCounter.module.scss\";\nimport { AVATAR_GROUP_COUNTER_AVATAR_SIZE } from \"./AvatarGroupConstants\";\n\nexport interface AvatarGroupCounterProps extends VibeComponentProps {\n  /**\n   * The list of avatars hidden behind the counter.\n   */\n  counterTooltipAvatars?: ReactElement<AvatarProps>[];\n  /**\n   * Props for customizing the counter appearance.\n   */\n  counterProps?: AvatarGroupCounterVisualProps;\n  /**\n   * Props for customizing the counter tooltip.\n   */\n  counterTooltipCustomProps?: Partial<TooltipProps>;\n  /**\n   * If true, the counter tooltip uses a virtualized list for performance optimization.\n   */\n  counterTooltipIsVirtualizedList?: boolean;\n  /**\n   * The size of the counter.\n   */\n  size?: AvatarSize;\n  /**\n   * The type of the avatars in the counter.\n   */\n  type?: AvatarType;\n  /**\n   * The label of the counter for accessibility.\n   */\n  counterAriaLabel?: string;\n  /**\n   * If true, the counter is disabled and non-interactive.\n   */\n  disabled?: boolean;\n}\n\nconst AvatarGroupCounter: React.FC<AvatarGroupCounterProps> = ({\n  counterTooltipAvatars = [],\n  counterProps,\n  counterTooltipCustomProps,\n  counterTooltipIsVirtualizedList = false,\n  size = \"medium\",\n  type,\n  counterAriaLabel,\n  disabled\n}: AvatarGroupCounterProps) => {\n  const {\n    color: counterColor = \"light\",\n    count: counterValue = counterTooltipAvatars.length,\n    prefix: counterPrefix = \"+\",\n    maxDigits: counterMaxDigits = 3,\n    ariaLabelItemsName: counterAriaLabelItemsName = \"items\",\n    noAnimation,\n    dialogContainerSelector,\n    tabIndex: counterTabIndex = 0\n  } = counterProps || {};\n\n  const counterSizeStyle = getStyle(styles, size?.toString());\n  const counterColorStyle = styles[counterColor];\n\n  const focusPrevPlaceholderRef = useRef(null);\n  const focusNextPlaceholderRef = useRef(null);\n  const counterContainerRef = useRef(null);\n  const counterComponent = useCallback(() => {\n    return (\n      <Counter\n        color={counterColor}\n        count={counterValue}\n        prefix={counterPrefix}\n        maxDigits={counterMaxDigits}\n        aria-label={counterAriaLabel ? counterAriaLabel : `Tab for more ${counterAriaLabelItemsName}`}\n        noAnimation={noAnimation}\n        counterClassName={cx({ [styles.disabled]: disabled })}\n        size={size === \"xs\" ? \"xs\" : undefined}\n      />\n    );\n  }, [\n    counterAriaLabel,\n    counterAriaLabelItemsName,\n    counterColor,\n    counterMaxDigits,\n    counterPrefix,\n    counterValue,\n    disabled,\n    noAnimation\n  ]);\n\n  if (!counterTooltipAvatars.length && !counterValue) {\n    return null;\n  }\n\n  if (disabled) {\n    return (\n      <div\n        ref={counterContainerRef}\n        className={cx(styles.counterContainer, styles.disabled, counterSizeStyle, counterColorStyle)}\n      >\n        {counterComponent()}\n      </div>\n    );\n  }\n\n  const areAvatarsClickable = counterTooltipAvatars.some(a => a.props?.onClick);\n  if (areAvatarsClickable) {\n    return (\n      <MenuButton\n        component={counterComponent}\n        zIndex={1}\n        className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)}\n        aria-label={counterAriaLabel ? counterAriaLabel : `${counterValue} additional ${counterAriaLabelItemsName}`}\n        dialogContainerSelector={dialogContainerSelector}\n      >\n        <Menu id=\"menu\" size=\"medium\" className={styles.menu} focusItemIndexOnMount={0}>\n          {counterTooltipAvatars.map((avatar, index) => {\n            return (\n              // eslint-disable-next-line react/jsx-key\n              <AvatarMenuItem\n                menuItemProps={{\n                  key: avatar.props?.id || String(index),\n                  title: (avatar.props?.tooltipProps?.content as string) || avatar?.props?.[\"aria-label\"],\n                  onClick: (event: React.MouseEvent | React.KeyboardEvent) => avatarOnClick(event, avatar.props)\n                }}\n                avatarProps={{\n                  ...avatar.props,\n                  customSize: AVATAR_GROUP_COUNTER_AVATAR_SIZE,\n                  \"aria-label\": \"\",\n                  tabIndex: -1\n                }}\n              />\n            );\n          })}\n        </Menu>\n      </MenuButton>\n    );\n  }\n\n  return (\n    <AvatarGroupCounterTooltipContainer\n      focusPrevPlaceholderRef={focusPrevPlaceholderRef}\n      focusNextPlaceholderRef={focusNextPlaceholderRef}\n      counterContainerRef={counterContainerRef}\n      avatars={counterTooltipAvatars}\n      counterTooltipCustomProps={counterTooltipCustomProps}\n      counterTooltipIsVirtualizedList={counterTooltipIsVirtualizedList}\n      type={type}\n    >\n      <div tabIndex={-1} ref={focusPrevPlaceholderRef} />\n      {/* eslint-disable jsx-a11y/no-noninteractive-tabindex */}\n      <div\n        tabIndex={counterTabIndex}\n        className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)}\n        ref={counterContainerRef}\n      >\n        {/* eslint-enable jsx-a11y/no-noninteractive-tabindex */}\n        {counterComponent()}\n        <div tabIndex={-1} ref={focusNextPlaceholderRef} />\n      </div>\n    </AvatarGroupCounterTooltipContainer>\n  );\n};\n\nexport default AvatarGroupCounter;\n"],"names":["AvatarGroupCounter","_ref","_ref$counterTooltipAv","counterTooltipAvatars","counterTooltipCustomProps","_ref$counterTooltipIs","counterTooltipIsVirtualizedList","_ref$size","size","type","counterAriaLabel","disabled","_ref2","counterProps","_ref2$color","color","counterColor","_ref2$count","count","counterValue","length","_ref2$prefix","prefix","counterPrefix","_ref2$maxDigits","maxDigits","counterMaxDigits","_ref2$ariaLabelItemsN","ariaLabelItemsName","counterAriaLabelItemsName","noAnimation","dialogContainerSelector","_ref2$tabIndex","tabIndex","counterTabIndex","counterSizeStyle","getStyle","styles","counterColorStyle","focusPrevPlaceholderRef","useRef","focusNextPlaceholderRef","counterContainerRef","counterComponent","useCallback","React","createElement","Counter","concat","counterClassName","cx","_defineProperty","undefined","ref","className","counterContainer","some","a","_a","props","onClick","MenuButton","component","zIndex","Menu","id","menu","focusItemIndexOnMount","map","avatar","index","AvatarMenuItem","menuItemProps","key","String","title","_c","_b","tooltipProps","content","_d","event","avatarOnClick","avatarProps","customSize","AVATAR_GROUP_COUNTER_AVATAR_SIZE","AvatarGroupCounterTooltipContainer","avatars"],"mappings":"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"}
+{"version":3,"file":"AvatarGroupCounter.js","sources":["../../../../src/components/AvatarGroup/AvatarGroupCounter.tsx"],"sourcesContent":["import React, { type ReactElement, useCallback, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { type AvatarProps } from \"../Avatar/Avatar\";\nimport Counter from \"../Counter/Counter\";\nimport MenuButton from \"../MenuButton/MenuButton\";\nimport Menu from \"../Menu/Menu/Menu\";\nimport AvatarMenuItem from \"../Menu/MenuItem/AvatarMenuItem\";\nimport AvatarGroupCounterTooltipContainer from \"./AvatarGroupCounterTooltipContainer\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { type AvatarSize, type AvatarType } from \"../Avatar/Avatar.types\";\nimport { getStyle } from \"@vibe/shared\";\nimport { type AvatarGroupCounterVisualProps } from \"./AvatarGroup.types\";\nimport { type TooltipProps } from \"@vibe/tooltip\";\nimport { avatarOnClick } from \"./AvatarGroupHelper\";\nimport styles from \"./AvatarGroupCounter.module.scss\";\nimport { AVATAR_GROUP_COUNTER_AVATAR_SIZE } from \"./AvatarGroupConstants\";\n\nexport interface AvatarGroupCounterProps extends VibeComponentProps {\n  /**\n   * The list of avatars hidden behind the counter.\n   */\n  counterTooltipAvatars?: ReactElement<AvatarProps>[];\n  /**\n   * Props for customizing the counter appearance.\n   */\n  counterProps?: AvatarGroupCounterVisualProps;\n  /**\n   * Props for customizing the counter tooltip.\n   */\n  counterTooltipCustomProps?: Partial<TooltipProps>;\n  /**\n   * If true, the counter tooltip uses a virtualized list for performance optimization.\n   */\n  counterTooltipIsVirtualizedList?: boolean;\n  /**\n   * The size of the counter.\n   */\n  size?: AvatarSize;\n  /**\n   * The type of the avatars in the counter.\n   */\n  type?: AvatarType;\n  /**\n   * The label of the counter for accessibility.\n   */\n  counterAriaLabel?: string;\n  /**\n   * If true, the counter is disabled and non-interactive.\n   */\n  disabled?: boolean;\n}\n\nconst AvatarGroupCounter: React.FC<AvatarGroupCounterProps> = ({\n  counterTooltipAvatars = [],\n  counterProps,\n  counterTooltipCustomProps,\n  counterTooltipIsVirtualizedList = false,\n  size = \"medium\",\n  type,\n  counterAriaLabel,\n  disabled\n}: AvatarGroupCounterProps) => {\n  const {\n    color: counterColor = \"light\",\n    count: counterValue = counterTooltipAvatars.length,\n    prefix: counterPrefix = \"+\",\n    maxDigits: counterMaxDigits = 3,\n    ariaLabelItemsName: counterAriaLabelItemsName = \"items\",\n    noAnimation,\n    dialogContainerSelector,\n    tabIndex: counterTabIndex = 0\n  } = counterProps || {};\n\n  const counterSizeStyle = getStyle(styles, size?.toString());\n  const counterColorStyle = styles[counterColor];\n\n  const focusPrevPlaceholderRef = useRef(null);\n  const focusNextPlaceholderRef = useRef(null);\n  const counterContainerRef = useRef(null);\n  const counterComponent = useCallback(() => {\n    return (\n      <Counter\n        color={counterColor}\n        count={counterValue}\n        prefix={counterPrefix}\n        maxDigits={counterMaxDigits}\n        aria-label={counterAriaLabel ? counterAriaLabel : `Tab for more ${counterAriaLabelItemsName}`}\n        noAnimation={noAnimation}\n        counterClassName={cx({ [styles.disabled]: disabled })}\n        size={size === \"xs\" ? \"xs\" : undefined}\n      />\n    );\n  }, [\n    counterAriaLabel,\n    counterAriaLabelItemsName,\n    counterColor,\n    counterMaxDigits,\n    counterPrefix,\n    counterValue,\n    disabled,\n    noAnimation\n  ]);\n\n  if (!counterTooltipAvatars.length && !counterValue) {\n    return null;\n  }\n\n  if (disabled) {\n    return (\n      <div\n        ref={counterContainerRef}\n        className={cx(styles.counterContainer, styles.disabled, counterSizeStyle, counterColorStyle)}\n      >\n        {counterComponent()}\n      </div>\n    );\n  }\n\n  const areAvatarsClickable = counterTooltipAvatars.some(a => a.props?.onClick);\n  if (areAvatarsClickable) {\n    return (\n      <MenuButton\n        component={counterComponent}\n        zIndex={1}\n        className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)}\n        aria-label={counterAriaLabel ? counterAriaLabel : `${counterValue} additional ${counterAriaLabelItemsName}`}\n        dialogContainerSelector={dialogContainerSelector}\n      >\n        <Menu id=\"menu\" size=\"medium\" className={styles.menu} focusItemIndexOnMount={0}>\n          {counterTooltipAvatars.map((avatar, index) => {\n            return (\n              // eslint-disable-next-line react/jsx-key\n              <AvatarMenuItem\n                menuItemProps={{\n                  key: avatar.props?.id || String(index),\n                  title: (avatar.props?.tooltipProps?.content as string) || avatar?.props?.[\"aria-label\"],\n                  onClick: (event: React.MouseEvent | React.KeyboardEvent) => avatarOnClick(event, avatar.props)\n                }}\n                avatarProps={{\n                  ...avatar.props,\n                  customSize: AVATAR_GROUP_COUNTER_AVATAR_SIZE,\n                  \"aria-label\": \"\",\n                  tabIndex: -1\n                }}\n              />\n            );\n          })}\n        </Menu>\n      </MenuButton>\n    );\n  }\n\n  return (\n    <AvatarGroupCounterTooltipContainer\n      focusPrevPlaceholderRef={focusPrevPlaceholderRef}\n      focusNextPlaceholderRef={focusNextPlaceholderRef}\n      counterContainerRef={counterContainerRef}\n      avatars={counterTooltipAvatars}\n      counterTooltipCustomProps={counterTooltipCustomProps}\n      counterTooltipIsVirtualizedList={counterTooltipIsVirtualizedList}\n      type={type}\n    >\n      <div tabIndex={-1} ref={focusPrevPlaceholderRef} />\n      {/* eslint-disable jsx-a11y/no-noninteractive-tabindex */}\n      <div\n        tabIndex={counterTabIndex}\n        className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)}\n        ref={counterContainerRef}\n      >\n        {/* eslint-enable jsx-a11y/no-noninteractive-tabindex */}\n        {counterComponent()}\n        <div tabIndex={-1} ref={focusNextPlaceholderRef} />\n      </div>\n    </AvatarGroupCounterTooltipContainer>\n  );\n};\n\nexport default AvatarGroupCounter;\n"],"names":["AvatarGroupCounter","_ref","_ref$counterTooltipAv","counterTooltipAvatars","counterTooltipCustomProps","_ref$counterTooltipIs","counterTooltipIsVirtualizedList","_ref$size","size","type","counterAriaLabel","disabled","_ref2","counterProps","_ref2$color","color","counterColor","_ref2$count","count","counterValue","length","_ref2$prefix","prefix","counterPrefix","_ref2$maxDigits","maxDigits","counterMaxDigits","_ref2$ariaLabelItemsN","ariaLabelItemsName","counterAriaLabelItemsName","noAnimation","dialogContainerSelector","_ref2$tabIndex","tabIndex","counterTabIndex","counterSizeStyle","getStyle","styles","counterColorStyle","focusPrevPlaceholderRef","useRef","focusNextPlaceholderRef","counterContainerRef","counterComponent","useCallback","React","createElement","Counter","concat","counterClassName","cx","_defineProperty","undefined","ref","className","counterContainer","some","a","_a","props","onClick","MenuButton","component","zIndex","Menu","id","menu","focusItemIndexOnMount","map","avatar","index","AvatarMenuItem","menuItemProps","key","String","title","_c","_b","tooltipProps","content","_d","event","avatarOnClick","avatarProps","customSize","AVATAR_GROUP_COUNTER_AVATAR_SIZE","AvatarGroupCounterTooltipContainer","avatars"],"mappings":"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"}

package/dist/src/components/AvatarGroup/AvatarGroupCounterTooltipHelper.js

@@ -1,2 +1,2 @@
-import e,{useCallback as t}from"react";import o from"../../hooks/useKeyEvent/index.js";import r from"../Avatar/Avatar.js";import i from"./AvatarGroupCounterTooltipContent.module.scss.js";import n from"../../hooks/useEventListener/index.js";import l from"../../hooks/useListenFocusTriggers/index.js";import{AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY as a,AVATAR_GROUP_COUNTER_AVATAR_SIZE as c}from"./AvatarGroupConstants.js";import{keyCodes as s}from"../../constants/keyCodes.js";import"../../constants/sizes.js";import u from"../../../components/clickable/dist/Clickable/ClickableWrapper.js";import f from"../../../components/layout/dist/Flex/Flex.js";var m=[s.TAB],d=[s.ESCAPE];function p(e){var r=e.counterContainerRef,i=void 0===r?void 0:r,c=e.tooltipContentContainerRef,s=e.focusPrevPlaceholderRef,u=e.focusNextPlaceholderRef,f=e.isKeyboardTooltipVisible,p=e.setIsKeyboardTooltipVisible,v=t((function(){f||setTimeout((function(){return p(!0)}),a)}),[f,p]),b=t((function(){f&&p(!1)}),[f,p]);l({ref:i,onFocusByKeyboard:v}),n({eventName:"blur",ref:c,callback:b}),o({keys:m,ref:i,withoutAnyModifier:!0,preventDefault:!0,callback:t((function(){f&&(null==c?void 0:c.current)&&c.current.focus()}),[f,c])}),o({keys:m,modifier:o.modifiers.SHIFT,ref:i,callback:b}),o({keys:m,ref:c,withoutAnyModifier:!0,callback:t((function(){(null==u?void 0:u.current)&&u.current.focus(),f&&p(!1)}),[u,f,p])}),o({keys:m,ref:c,modifier:o.modifiers.SHIFT,callback:t((function(){(null==s?void 0:s.current)&&s.current.focus(),f&&p(!1)}),[s,f,p])}),o({keys:d,ref:c,callback:t((function(){(null==i?void 0:i.current)&&i.current.focus(),f&&p(!1)}),[i,f,p])}),o({keys:d,ref:i,callback:b}),n({eventName:"focus",ref:u,callback:b})}var v=function(t,o,n,l,a){var s=t.value,m=Object.assign(Object.assign({},n),{width:a?void 0:"100%"}),d="tooltip-item-".concat(o,"-label");return e.createElement(u,{key:o,isClickable:!!(null==s?void 0:s.onClick),clickableProps:{onClick:function(e){return s.onClick(e,s.id)},tabIndex:-1}},e.createElement("div",{style:m},e.createElement(f,{direction:"row",gap:"xs","aria-labelledby":d},e.createElement(r,Object.assign({},s,{tooltipProps:void 0,"aria-label":"",customSize:c,type:l||(null==s?void 0:s.type),tabIndex:-1,size:"small",className:i.tooltipAvatarItemAvatar})),!a&&e.createElement("div",{id:d,className:i.tooltipAvatarItemTitle},s.tooltipContent))))};export{v as avatarRenderer,p as useTooltipContentTabNavigation};
+import e,{useCallback as t}from"react";import o from"../Avatar/Avatar.js";import r from"./AvatarGroupCounterTooltipContent.module.scss.js";import i from"../../hooks/useListenFocusTriggers/index.js";import{AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY as n,AVATAR_GROUP_COUNTER_AVATAR_SIZE as a}from"./AvatarGroupConstants.js";import{keyCodes as l}from"../../constants/keyCodes.js";import"../../constants/sizes.js";import s from"../../../components/clickable/dist/Clickable/ClickableWrapper.js";import c from"../../../components/layout/dist/Flex/Flex.js";import{useEventListener as u}from"../../../shared/dist/hooks/useEventListener.js";import{useKeyEvent as f}from"../../../shared/dist/hooks/useKeyEvent.js";var m=[l.TAB],d=[l.ESCAPE];function p(e){var o=e.counterContainerRef,r=void 0===o?void 0:o,a=e.tooltipContentContainerRef,l=e.focusPrevPlaceholderRef,s=e.focusNextPlaceholderRef,c=e.isKeyboardTooltipVisible,p=e.setIsKeyboardTooltipVisible,v=t((function(){c||setTimeout((function(){return p(!0)}),n)}),[c,p]),b=t((function(){c&&p(!1)}),[c,p]);i({ref:r,onFocusByKeyboard:v}),u({eventName:"blur",ref:a,callback:b}),f({keys:m,ref:r,withoutAnyModifier:!0,preventDefault:!0,callback:t((function(){c&&(null==a?void 0:a.current)&&a.current.focus()}),[c,a])}),f({keys:m,modifier:f.modifiers.SHIFT,ref:r,callback:b}),f({keys:m,ref:a,withoutAnyModifier:!0,callback:t((function(){(null==s?void 0:s.current)&&s.current.focus(),c&&p(!1)}),[s,c,p])}),f({keys:m,ref:a,modifier:f.modifiers.SHIFT,callback:t((function(){(null==l?void 0:l.current)&&l.current.focus(),c&&p(!1)}),[l,c,p])}),f({keys:d,ref:a,callback:t((function(){(null==r?void 0:r.current)&&r.current.focus(),c&&p(!1)}),[r,c,p])}),f({keys:d,ref:r,callback:b}),u({eventName:"focus",ref:s,callback:b})}var v=function(t,i,n,l,u){var f=t.value,m=Object.assign(Object.assign({},n),{width:u?void 0:"100%"}),d="tooltip-item-".concat(i,"-label");return e.createElement(s,{key:i,isClickable:!!(null==f?void 0:f.onClick),clickableProps:{onClick:function(e){return f.onClick(e,f.id)},tabIndex:-1}},e.createElement("div",{style:m},e.createElement(c,{direction:"row",gap:"xs","aria-labelledby":d},e.createElement(o,Object.assign({},f,{tooltipProps:void 0,"aria-label":"",customSize:a,type:l||(null==f?void 0:f.type),tabIndex:-1,size:"small",className:r.tooltipAvatarItemAvatar})),!u&&e.createElement("div",{id:d,className:r.tooltipAvatarItemTitle},f.tooltipContent))))};export{v as avatarRenderer,p as useTooltipContentTabNavigation};
 //# sourceMappingURL=AvatarGroupCounterTooltipHelper.js.map

package/dist/src/components/AvatarGroup/AvatarGroupCounterTooltipHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroupCounterTooltipHelper.js","sources":["../../../../src/components/AvatarGroup/AvatarGroupCounterTooltipHelper.tsx"],"sourcesContent":["import React, { type CSSProperties, type RefObject, useCallback } from \"react\";\nimport useKeyEvent from \"../../hooks/useKeyEvent\";\nimport { Flex } from \"@vibe/layout\";\nimport Avatar, { type AvatarProps } from \"../Avatar/Avatar\";\nimport { ClickableWrapper } from \"@vibe/clickable\";\nimport avatarGroupCounterTooltipContentStyles from \"./AvatarGroupCounterTooltipContent.module.scss\";\nimport useEventListener from \"../../hooks/useEventListener\";\nimport useListenFocusTriggers from \"../../hooks/useListenFocusTriggers\";\nimport { type AvatarType } from \"../Avatar\";\nimport { type ElementContent } from \"../../types\";\nimport { AVATAR_GROUP_COUNTER_AVATAR_SIZE, AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY } from \"./AvatarGroupConstants\";\nimport { keyCodes } from \"../../constants\";\n\nconst TAB = [keyCodes.TAB];\nconst ESC = [keyCodes.ESCAPE];\n\nexport function useTooltipContentTabNavigation({\n  counterContainerRef = undefined,\n  tooltipContentContainerRef,\n  focusPrevPlaceholderRef,\n  focusNextPlaceholderRef,\n  isKeyboardTooltipVisible,\n  setIsKeyboardTooltipVisible\n}: {\n  counterContainerRef: RefObject<HTMLDivElement>;\n  tooltipContentContainerRef: RefObject<HTMLElement>;\n  focusPrevPlaceholderRef: RefObject<HTMLDivElement>;\n  focusNextPlaceholderRef: RefObject<HTMLDivElement>;\n  isKeyboardTooltipVisible: boolean;\n  setIsKeyboardTooltipVisible: (value: boolean) => void;\n}) {\n  const showKeyboardTooltip = useCallback(() => {\n    if (!isKeyboardTooltipVisible) {\n      // temp hack for display tooltip with delay after timeout because refactoring the tooltip with open mechanism is out of scope\n      setTimeout(() => setIsKeyboardTooltipVisible(true), AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY);\n    }\n  }, [isKeyboardTooltipVisible, setIsKeyboardTooltipVisible]);\n\n  const hideKeyboardTooltip = useCallback(() => {\n    if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n  }, [isKeyboardTooltipVisible, setIsKeyboardTooltipVisible]);\n\n  // Open tooltip manually when keyboard focusing on counter\n  useListenFocusTriggers({\n    ref: counterContainerRef,\n    onFocusByKeyboard: showKeyboardTooltip\n  });\n\n  useEventListener({\n    eventName: \"blur\",\n    ref: tooltipContentContainerRef,\n    callback: hideKeyboardTooltip\n  });\n\n  //Move focus to content by keyboard\n  useKeyEvent({\n    keys: TAB,\n    ref: counterContainerRef,\n    withoutAnyModifier: true,\n    preventDefault: true,\n    callback: useCallback(() => {\n      if (isKeyboardTooltipVisible) tooltipContentContainerRef?.current && tooltipContentContainerRef.current.focus();\n    }, [isKeyboardTooltipVisible, tooltipContentContainerRef])\n  });\n\n  // Close tooltip by keyboard\n  useKeyEvent({\n    keys: TAB,\n    modifier: useKeyEvent.modifiers.SHIFT,\n    ref: counterContainerRef,\n    callback: hideKeyboardTooltip\n  });\n  useKeyEvent({\n    keys: TAB,\n    ref: tooltipContentContainerRef,\n    withoutAnyModifier: true,\n    callback: useCallback(() => {\n      // We are not preventing default behaviour here and that's why after pressing tab and after moving focus to here\n      // the browser will move the focus to the next element in the focus order.\n      focusNextPlaceholderRef?.current && focusNextPlaceholderRef.current.focus();\n      if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n    }, [focusNextPlaceholderRef, isKeyboardTooltipVisible, setIsKeyboardTooltipVisible])\n  });\n  useKeyEvent({\n    keys: TAB,\n    ref: tooltipContentContainerRef,\n    modifier: useKeyEvent.modifiers.SHIFT,\n    callback: useCallback(() => {\n      // We are not preventing default behaviour here and that's why after pressing tab and after moving focus to here\n      // the browser will move the focus to the next element in the focus order.\n      focusPrevPlaceholderRef?.current && focusPrevPlaceholderRef.current.focus();\n      if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n    }, [focusPrevPlaceholderRef, isKeyboardTooltipVisible, setIsKeyboardTooltipVisible])\n  });\n  useKeyEvent({\n    keys: ESC,\n    ref: tooltipContentContainerRef,\n    callback: useCallback(() => {\n      counterContainerRef?.current && counterContainerRef.current.focus();\n      if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n    }, [counterContainerRef, isKeyboardTooltipVisible, setIsKeyboardTooltipVisible])\n  });\n  useKeyEvent({\n    keys: ESC,\n    ref: counterContainerRef,\n    callback: hideKeyboardTooltip\n  });\n\n  // Close tooltip when moving focus to next element\n  useEventListener({\n    eventName: \"focus\",\n    ref: focusNextPlaceholderRef,\n    callback: hideKeyboardTooltip\n  });\n}\n\nexport const avatarRenderer = (\n  item: { value: AvatarProps & { tooltipContent: ElementContent } },\n  index: number,\n  style: CSSProperties,\n  type: AvatarType,\n  displayAsGrid: boolean\n) => {\n  const avatarProps = item.value;\n  const overrideStyle: CSSProperties = { ...style, width: displayAsGrid ? undefined : \"100%\" };\n  const labelId = `tooltip-item-${index}-label`;\n\n  return (\n    <ClickableWrapper\n      key={index}\n      isClickable={!!avatarProps?.onClick}\n      clickableProps={{ onClick: event => avatarProps.onClick(event, avatarProps.id), tabIndex: -1 }}\n    >\n      <div style={overrideStyle}>\n        <Flex direction=\"row\" gap=\"xs\" aria-labelledby={labelId}>\n          <Avatar\n            {...avatarProps}\n            tooltipProps={undefined}\n            aria-label={\"\"}\n            customSize={AVATAR_GROUP_COUNTER_AVATAR_SIZE}\n            type={type || avatarProps?.type}\n            tabIndex={-1}\n            size=\"small\"\n            className={avatarGroupCounterTooltipContentStyles.tooltipAvatarItemAvatar}\n          />\n          {!displayAsGrid && (\n            <div id={labelId} className={avatarGroupCounterTooltipContentStyles.tooltipAvatarItemTitle}>\n              {avatarProps.tooltipContent}\n            </div>\n          )}\n        </Flex>\n      </div>\n    </ClickableWrapper>\n  );\n};\n"],"names":["TAB","keyCodes","ESC","ESCAPE","useTooltipContentTabNavigation","_ref","_ref$counterContainer","counterContainerRef","undefined","tooltipContentContainerRef","focusPrevPlaceholderRef","focusNextPlaceholderRef","isKeyboardTooltipVisible","setIsKeyboardTooltipVisible","showKeyboardTooltip","useCallback","setTimeout","AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY","hideKeyboardTooltip","useListenFocusTriggers","ref","onFocusByKeyboard","useEventListener","eventName","callback","useKeyEvent","keys","withoutAnyModifier","preventDefault","current","focus","modifier","modifiers","SHIFT","avatarRenderer","item","index","style","type","displayAsGrid","avatarProps","value","overrideStyle","Object","assign","width","labelId","concat","React","ClickableWrapper","key","isClickable","onClick","clickableProps","event","id","tabIndex","createElement","Flex","direction","gap","Avatar","tooltipProps","customSize","AVATAR_GROUP_COUNTER_AVATAR_SIZE","size","className","avatarGroupCounterTooltipContentStyles","tooltipAvatarItemAvatar","tooltipAvatarItemTitle","tooltipContent"],"mappings":"yoBAaA,IAAMA,EAAM,CAACC,EAASD,KAChBE,EAAM,CAACD,EAASE,iBAENC,EAA8BC,GAc7C,IAAAC,EAAAD,EAbCE,oBAAAA,OAAsBC,IAAHF,OAAGE,EAASF,EAC/BG,EAA0BJ,EAA1BI,2BACAC,EAAuBL,EAAvBK,wBACAC,EAAuBN,EAAvBM,wBACAC,EAAwBP,EAAxBO,yBACAC,EAA2BR,EAA3BQ,4BASMC,EAAsBC,GAAY,WACjCH,GAEHI,YAAW,WAAA,OAAMH,GAA4B,EAAK,GAAEI,EAExD,GAAG,CAACL,EAA0BC,IAExBK,EAAsBH,GAAY,WAClCH,GAA0BC,GAA4B,EAC5D,GAAG,CAACD,EAA0BC,IAG9BM,EAAuB,CACrBC,IAAKb,EACLc,kBAAmBP,IAGrBQ,EAAiB,CACfC,UAAW,OACXH,IAAKX,EACLe,SAAUN,IAIZO,EAAY,CACVC,KAAM1B,EACNoB,IAAKb,EACLoB,oBAAoB,EACpBC,gBAAgB,EAChBJ,SAAUT,GAAY,WAChBH,IAA0BH,aAA0B,EAA1BA,EAA4BoB,UAAWpB,EAA2BoB,QAAQC,OAC1G,GAAG,CAAClB,EAA0BH,MAIhCgB,EAAY,CACVC,KAAM1B,EACN+B,SAAUN,EAAYO,UAAUC,MAChCb,IAAKb,EACLiB,SAAUN,IAEZO,EAAY,CACVC,KAAM1B,EACNoB,IAAKX,EACLkB,oBAAoB,EACpBH,SAAUT,GAAY,YAGpBJ,aAAuB,EAAvBA,EAAyBkB,UAAWlB,EAAwBkB,QAAQC,QAChElB,GAA0BC,GAA4B,EAC3D,GAAE,CAACF,EAAyBC,EAA0BC,MAEzDY,EAAY,CACVC,KAAM1B,EACNoB,IAAKX,EACLsB,SAAUN,EAAYO,UAAUC,MAChCT,SAAUT,GAAY,YAGpBL,aAAuB,EAAvBA,EAAyBmB,UAAWnB,EAAwBmB,QAAQC,QAChElB,GAA0BC,GAA4B,EAC3D,GAAE,CAACH,EAAyBE,EAA0BC,MAEzDY,EAAY,CACVC,KAAMxB,EACNkB,IAAKX,EACLe,SAAUT,GAAY,YACpBR,aAAmB,EAAnBA,EAAqBsB,UAAWtB,EAAoBsB,QAAQC,QACxDlB,GAA0BC,GAA4B,EAC3D,GAAE,CAACN,EAAqBK,EAA0BC,MAErDY,EAAY,CACVC,KAAMxB,EACNkB,IAAKb,EACLiB,SAAUN,IAIZI,EAAiB,CACfC,UAAW,QACXH,IAAKT,EACLa,SAAUN,GAEd,CAEagB,IAAAA,EAAiB,SAC5BC,EACAC,EACAC,EACAC,EACAC,GAEA,IAAMC,EAAcL,EAAKM,MACnBC,EAAoCC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAAP,GAAO,CAAAQ,MAAON,OAAgB/B,EAAY,SAC9EsC,EAAO,gBAAAC,OAAmBX,EAAa,UAE7C,OACEY,gBAACC,EAAgB,CACfC,IAAKd,EACLe,eAAeX,eAAAA,EAAaY,SAC5BC,eAAgB,CAAED,QAAS,SAAAE,GAAK,OAAId,EAAYY,QAAQE,EAAOd,EAAYe,GAAG,EAAEC,UAAW,IAE3FR,EAAKS,cAAA,MAAA,CAAApB,MAAOK,GACVM,EAACS,cAAAC,EAAK,CAAAC,UAAU,MAAMC,IAAI,KAAI,kBAAkBd,GAC9CE,EAAAS,cAACI,EACKlB,OAAAC,OAAA,CAAA,EAAAJ,GACJsB,kBAActD,EACF,aAAA,GACZuD,WAAYC,EACZ1B,KAAMA,IAAQE,aAAW,EAAXA,EAAaF,MAC3BkB,UAAW,EACXS,KAAK,QACLC,UAAWC,EAAuCC,4BAElD7B,GACAS,EAAAS,cAAA,MAAA,CAAKF,GAAIT,EAASoB,UAAWC,EAAuCE,wBACjE7B,EAAY8B,kBAO3B"}
+{"version":3,"file":"AvatarGroupCounterTooltipHelper.js","sources":["../../../../src/components/AvatarGroup/AvatarGroupCounterTooltipHelper.tsx"],"sourcesContent":["import React, { type CSSProperties, type RefObject, useCallback } from \"react\";\nimport useKeyEvent from \"../../hooks/useKeyEvent\";\nimport { Flex } from \"@vibe/layout\";\nimport Avatar, { type AvatarProps } from \"../Avatar/Avatar\";\nimport { ClickableWrapper } from \"@vibe/clickable\";\nimport avatarGroupCounterTooltipContentStyles from \"./AvatarGroupCounterTooltipContent.module.scss\";\nimport useEventListener from \"../../hooks/useEventListener\";\nimport useListenFocusTriggers from \"../../hooks/useListenFocusTriggers\";\nimport { type AvatarType } from \"../Avatar\";\nimport { type ElementContent } from \"../../types\";\nimport { AVATAR_GROUP_COUNTER_AVATAR_SIZE, AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY } from \"./AvatarGroupConstants\";\nimport { keyCodes } from \"../../constants\";\n\nconst TAB = [keyCodes.TAB];\nconst ESC = [keyCodes.ESCAPE];\n\nexport function useTooltipContentTabNavigation({\n  counterContainerRef = undefined,\n  tooltipContentContainerRef,\n  focusPrevPlaceholderRef,\n  focusNextPlaceholderRef,\n  isKeyboardTooltipVisible,\n  setIsKeyboardTooltipVisible\n}: {\n  counterContainerRef: RefObject<HTMLDivElement>;\n  tooltipContentContainerRef: RefObject<HTMLElement>;\n  focusPrevPlaceholderRef: RefObject<HTMLDivElement>;\n  focusNextPlaceholderRef: RefObject<HTMLDivElement>;\n  isKeyboardTooltipVisible: boolean;\n  setIsKeyboardTooltipVisible: (value: boolean) => void;\n}) {\n  const showKeyboardTooltip = useCallback(() => {\n    if (!isKeyboardTooltipVisible) {\n      // temp hack for display tooltip with delay after timeout because refactoring the tooltip with open mechanism is out of scope\n      setTimeout(() => setIsKeyboardTooltipVisible(true), AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY);\n    }\n  }, [isKeyboardTooltipVisible, setIsKeyboardTooltipVisible]);\n\n  const hideKeyboardTooltip = useCallback(() => {\n    if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n  }, [isKeyboardTooltipVisible, setIsKeyboardTooltipVisible]);\n\n  // Open tooltip manually when keyboard focusing on counter\n  useListenFocusTriggers({\n    ref: counterContainerRef,\n    onFocusByKeyboard: showKeyboardTooltip\n  });\n\n  useEventListener({\n    eventName: \"blur\",\n    ref: tooltipContentContainerRef,\n    callback: hideKeyboardTooltip\n  });\n\n  //Move focus to content by keyboard\n  useKeyEvent({\n    keys: TAB,\n    ref: counterContainerRef,\n    withoutAnyModifier: true,\n    preventDefault: true,\n    callback: useCallback(() => {\n      if (isKeyboardTooltipVisible) tooltipContentContainerRef?.current && tooltipContentContainerRef.current.focus();\n    }, [isKeyboardTooltipVisible, tooltipContentContainerRef])\n  });\n\n  // Close tooltip by keyboard\n  useKeyEvent({\n    keys: TAB,\n    modifier: useKeyEvent.modifiers.SHIFT,\n    ref: counterContainerRef,\n    callback: hideKeyboardTooltip\n  });\n  useKeyEvent({\n    keys: TAB,\n    ref: tooltipContentContainerRef,\n    withoutAnyModifier: true,\n    callback: useCallback(() => {\n      // We are not preventing default behaviour here and that's why after pressing tab and after moving focus to here\n      // the browser will move the focus to the next element in the focus order.\n      focusNextPlaceholderRef?.current && focusNextPlaceholderRef.current.focus();\n      if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n    }, [focusNextPlaceholderRef, isKeyboardTooltipVisible, setIsKeyboardTooltipVisible])\n  });\n  useKeyEvent({\n    keys: TAB,\n    ref: tooltipContentContainerRef,\n    modifier: useKeyEvent.modifiers.SHIFT,\n    callback: useCallback(() => {\n      // We are not preventing default behaviour here and that's why after pressing tab and after moving focus to here\n      // the browser will move the focus to the next element in the focus order.\n      focusPrevPlaceholderRef?.current && focusPrevPlaceholderRef.current.focus();\n      if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n    }, [focusPrevPlaceholderRef, isKeyboardTooltipVisible, setIsKeyboardTooltipVisible])\n  });\n  useKeyEvent({\n    keys: ESC,\n    ref: tooltipContentContainerRef,\n    callback: useCallback(() => {\n      counterContainerRef?.current && counterContainerRef.current.focus();\n      if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n    }, [counterContainerRef, isKeyboardTooltipVisible, setIsKeyboardTooltipVisible])\n  });\n  useKeyEvent({\n    keys: ESC,\n    ref: counterContainerRef,\n    callback: hideKeyboardTooltip\n  });\n\n  // Close tooltip when moving focus to next element\n  useEventListener({\n    eventName: \"focus\",\n    ref: focusNextPlaceholderRef,\n    callback: hideKeyboardTooltip\n  });\n}\n\nexport const avatarRenderer = (\n  item: { value: AvatarProps & { tooltipContent: ElementContent } },\n  index: number,\n  style: CSSProperties,\n  type: AvatarType,\n  displayAsGrid: boolean\n) => {\n  const avatarProps = item.value;\n  const overrideStyle: CSSProperties = { ...style, width: displayAsGrid ? undefined : \"100%\" };\n  const labelId = `tooltip-item-${index}-label`;\n\n  return (\n    <ClickableWrapper\n      key={index}\n      isClickable={!!avatarProps?.onClick}\n      clickableProps={{ onClick: event => avatarProps.onClick(event, avatarProps.id), tabIndex: -1 }}\n    >\n      <div style={overrideStyle}>\n        <Flex direction=\"row\" gap=\"xs\" aria-labelledby={labelId}>\n          <Avatar\n            {...avatarProps}\n            tooltipProps={undefined}\n            aria-label={\"\"}\n            customSize={AVATAR_GROUP_COUNTER_AVATAR_SIZE}\n            type={type || avatarProps?.type}\n            tabIndex={-1}\n            size=\"small\"\n            className={avatarGroupCounterTooltipContentStyles.tooltipAvatarItemAvatar}\n          />\n          {!displayAsGrid && (\n            <div id={labelId} className={avatarGroupCounterTooltipContentStyles.tooltipAvatarItemTitle}>\n              {avatarProps.tooltipContent}\n            </div>\n          )}\n        </Flex>\n      </div>\n    </ClickableWrapper>\n  );\n};\n"],"names":["TAB","keyCodes","ESC","ESCAPE","useTooltipContentTabNavigation","_ref","_ref$counterContainer","counterContainerRef","undefined","tooltipContentContainerRef","focusPrevPlaceholderRef","focusNextPlaceholderRef","isKeyboardTooltipVisible","setIsKeyboardTooltipVisible","showKeyboardTooltip","useCallback","setTimeout","AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY","hideKeyboardTooltip","useListenFocusTriggers","ref","onFocusByKeyboard","useEventListener","eventName","callback","useKeyEvent","keys","withoutAnyModifier","preventDefault","current","focus","modifier","modifiers","SHIFT","avatarRenderer","item","index","style","type","displayAsGrid","avatarProps","value","overrideStyle","Object","assign","width","labelId","concat","React","ClickableWrapper","key","isClickable","onClick","clickableProps","event","id","tabIndex","createElement","Flex","direction","gap","Avatar","tooltipProps","customSize","AVATAR_GROUP_COUNTER_AVATAR_SIZE","size","className","avatarGroupCounterTooltipContentStyles","tooltipAvatarItemAvatar","tooltipAvatarItemTitle","tooltipContent"],"mappings":"8rBAaA,IAAMA,EAAM,CAACC,EAASD,KAChBE,EAAM,CAACD,EAASE,iBAENC,EAA8BC,GAc7C,IAAAC,EAAAD,EAbCE,oBAAAA,OAAsBC,IAAHF,OAAGE,EAASF,EAC/BG,EAA0BJ,EAA1BI,2BACAC,EAAuBL,EAAvBK,wBACAC,EAAuBN,EAAvBM,wBACAC,EAAwBP,EAAxBO,yBACAC,EAA2BR,EAA3BQ,4BASMC,EAAsBC,GAAY,WACjCH,GAEHI,YAAW,WAAA,OAAMH,GAA4B,EAAK,GAAEI,EAExD,GAAG,CAACL,EAA0BC,IAExBK,EAAsBH,GAAY,WAClCH,GAA0BC,GAA4B,EAC5D,GAAG,CAACD,EAA0BC,IAG9BM,EAAuB,CACrBC,IAAKb,EACLc,kBAAmBP,IAGrBQ,EAAiB,CACfC,UAAW,OACXH,IAAKX,EACLe,SAAUN,IAIZO,EAAY,CACVC,KAAM1B,EACNoB,IAAKb,EACLoB,oBAAoB,EACpBC,gBAAgB,EAChBJ,SAAUT,GAAY,WAChBH,IAA0BH,aAA0B,EAA1BA,EAA4BoB,UAAWpB,EAA2BoB,QAAQC,OAC1G,GAAG,CAAClB,EAA0BH,MAIhCgB,EAAY,CACVC,KAAM1B,EACN+B,SAAUN,EAAYO,UAAUC,MAChCb,IAAKb,EACLiB,SAAUN,IAEZO,EAAY,CACVC,KAAM1B,EACNoB,IAAKX,EACLkB,oBAAoB,EACpBH,SAAUT,GAAY,YAGpBJ,aAAuB,EAAvBA,EAAyBkB,UAAWlB,EAAwBkB,QAAQC,QAChElB,GAA0BC,GAA4B,EAC3D,GAAE,CAACF,EAAyBC,EAA0BC,MAEzDY,EAAY,CACVC,KAAM1B,EACNoB,IAAKX,EACLsB,SAAUN,EAAYO,UAAUC,MAChCT,SAAUT,GAAY,YAGpBL,aAAuB,EAAvBA,EAAyBmB,UAAWnB,EAAwBmB,QAAQC,QAChElB,GAA0BC,GAA4B,EAC3D,GAAE,CAACH,EAAyBE,EAA0BC,MAEzDY,EAAY,CACVC,KAAMxB,EACNkB,IAAKX,EACLe,SAAUT,GAAY,YACpBR,aAAmB,EAAnBA,EAAqBsB,UAAWtB,EAAoBsB,QAAQC,QACxDlB,GAA0BC,GAA4B,EAC3D,GAAE,CAACN,EAAqBK,EAA0BC,MAErDY,EAAY,CACVC,KAAMxB,EACNkB,IAAKb,EACLiB,SAAUN,IAIZI,EAAiB,CACfC,UAAW,QACXH,IAAKT,EACLa,SAAUN,GAEd,CAEagB,IAAAA,EAAiB,SAC5BC,EACAC,EACAC,EACAC,EACAC,GAEA,IAAMC,EAAcL,EAAKM,MACnBC,EAAoCC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAAP,GAAO,CAAAQ,MAAON,OAAgB/B,EAAY,SAC9EsC,EAAO,gBAAAC,OAAmBX,EAAa,UAE7C,OACEY,gBAACC,EAAgB,CACfC,IAAKd,EACLe,eAAeX,eAAAA,EAAaY,SAC5BC,eAAgB,CAAED,QAAS,SAAAE,GAAK,OAAId,EAAYY,QAAQE,EAAOd,EAAYe,GAAG,EAAEC,UAAW,IAE3FR,EAAKS,cAAA,MAAA,CAAApB,MAAOK,GACVM,EAACS,cAAAC,EAAK,CAAAC,UAAU,MAAMC,IAAI,KAAI,kBAAkBd,GAC9CE,EAAAS,cAACI,EACKlB,OAAAC,OAAA,CAAA,EAAAJ,GACJsB,kBAActD,EACF,aAAA,GACZuD,WAAYC,EACZ1B,KAAMA,IAAQE,aAAW,EAAXA,EAAaF,MAC3BkB,UAAW,EACXS,KAAK,QACLC,UAAWC,EAAuCC,4BAElD7B,GACAS,EAAAS,cAAA,MAAA,CAAKF,GAAIT,EAASoB,UAAWC,EAAuCE,wBACjE7B,EAAY8B,kBAO3B"}

package/dist/src/components/Badge/Badge.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"../../../_virtual/_tslib.js";import e,{forwardRef as r,useRef as o}from"react";import a from"classnames";import{camelCase as s}from"es-toolkit";import i from"../../hooks/useMergeRef.js";import{getTestId as m}from"../../tests/testIds.js";import{ComponentVibeId as n,ComponentDefaultTestId as c}from"../../tests/constants.js";import d from"./Indicator/Indicator.js";import l from"../Counter/Counter.js";import{getStyle as p}from"../../helpers/typesciptCssModulesHelper.js";import f from"./Badge.module.scss.js";var u=r((function(r,u){var g=r.type,j=void 0===g?"indicator":g,v=r.anchor,b=void 0===v?"top-end":v,h=r.alignment,E=void 0===h?"rectangular":h,N=r.className,y=r.id,B=r["data-testid"],C=r.children,I=t(r,["type","anchor","alignment","className","id","data-testid","children"]),k=o(null),A=i(u,k),D=a(f.badge,p(f,s(b)),p(f,E)),G=I.color||"indicator"===j?"notification":"negative";return e.createElement("div",{ref:A,className:a(f.badgeWrapper,N),id:y,"data-vibe":n.BADGE},C,e.createElement("div",{className:D,"data-testid":B||m(c.BADGE,y)},"indicator"===j?e.createElement(d,Object.assign({color:G},I)):"counter"===j&&e.createElement(l,Object.assign({color:G},I))))}));export{u as default};
+import{__rest as t}from"../../../_virtual/_tslib.js";import e,{forwardRef as r,useRef as o}from"react";import s from"classnames";import{camelCase as a}from"es-toolkit";import{getTestId as i}from"../../tests/testIds.js";import{ComponentVibeId as d,ComponentDefaultTestId as m}from"../../tests/constants.js";import n from"./Indicator/Indicator.js";import c from"../Counter/Counter.js";import l from"./Badge.module.scss.js";import{useMergeRef as p}from"../../../shared/dist/hooks/useMergeRef.js";import{getStyle as f}from"../../../shared/dist/utils/typesciptCssModulesHelper.js";var u=r((function(r,u){var g=r.type,j=void 0===g?"indicator":g,v=r.anchor,h=void 0===v?"top-end":v,b=r.alignment,E=void 0===b?"rectangular":b,N=r.className,y=r.id,B=r["data-testid"],C=r.children,I=t(r,["type","anchor","alignment","className","id","data-testid","children"]),k=o(null),A=p(u,k),D=s(l.badge,f(l,a(h)),f(l,E)),G=I.color||"indicator"===j?"notification":"negative";return e.createElement("div",{ref:A,className:s(l.badgeWrapper,N),id:y,"data-vibe":d.BADGE},C,e.createElement("div",{className:D,"data-testid":B||i(m.BADGE,y)},"indicator"===j?e.createElement(n,Object.assign({color:G},I)):"counter"===j&&e.createElement(c,Object.assign({color:G},I))))}));export{u as default};
 //# sourceMappingURL=Badge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { type BadgeAlignments, type BadgeAnchor, type BadgeType } from \"./Badge.types\";\nimport Indicator, { type IndicatorProps } from \"./Indicator/Indicator\";\nimport Counter, { type CounterProps } from \"../Counter/Counter\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { type IndicatorColor } from \"./Indicator/Indicator.types\";\nimport { type CounterColor } from \"../Counter/Counter.types\";\nimport styles from \"./Badge.module.scss\";\nimport { type VibeComponentProps } from \"../../types\";\n\nexport interface BadgeBaseProps extends VibeComponentProps {\n  /**\n   * The position of the badge relative to its parent.\n   */\n  anchor?: BadgeAnchor;\n  /**\n   * The alignment style of the badge.\n   */\n  alignment?: BadgeAlignments;\n  /**\n   * The content the badge is attached to.\n   */\n  children: React.ReactNode;\n}\n\ninterface CounterBadgeProps extends CounterProps {\n  /**\n   * The type of badge, set to `\"counter\"` for numeric values.\n   */\n  type: Extract<BadgeType, \"counter\">;\n}\n\ninterface IndicatorBadgeProps extends IndicatorProps {\n  /**\n   * The type of badge, set to `\"indicator\"` for a simple dot.\n   */\n  type?: Extract<BadgeType, \"indicator\">;\n}\n\nexport type BadgeProps = BadgeBaseProps & (CounterBadgeProps | IndicatorBadgeProps);\n\nconst Badge = forwardRef(\n  (\n    {\n      type = \"indicator\",\n      anchor = \"top-end\",\n      alignment = \"rectangular\",\n      className,\n      id,\n      \"data-testid\": dataTestId,\n      children,\n      ...badgeProps\n    }: BadgeProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const badgeClassNames = cx(\n      styles.badge,\n      getStyle(styles, camelCase(anchor as unknown as string)),\n      getStyle(styles, alignment)\n    );\n\n    const color = badgeProps.color || type === \"indicator\" ? \"notification\" : \"negative\";\n\n    return (\n      <div ref={mergedRef} className={cx(styles.badgeWrapper, className)} id={id} data-vibe={ComponentVibeId.BADGE}>\n        {children}\n        <div className={badgeClassNames} data-testid={dataTestId || getTestId(ComponentDefaultTestId.BADGE, id)}>\n          {type === \"indicator\" ? (\n            <Indicator color={color as IndicatorColor} {...(badgeProps as IndicatorBadgeProps)} />\n          ) : (\n            type === \"counter\" && <Counter color={color as CounterColor} {...(badgeProps as CounterBadgeProps)} />\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nexport default Badge;\n"],"names":["Badge","forwardRef","_a","ref","type","_a$type","_a$anchor","anchor","_a$alignment","alignment","className","id","dataTestId","children","badgeProps","__rest","componentRef","useRef","mergedRef","useMergeRef","badgeClassNames","cx","styles","badge","getStyle","camelCase","color","React","badgeWrapper","ComponentVibeId","BADGE","createElement","getTestId","ComponentDefaultTestId","Indicator","Object","assign","Counter"],"mappings":"qhBA8CMA,IAAAA,EAAQC,GACZ,SACEC,EAUAC,SAHUD,EANRE,KAAAA,OAAO,IAAHC,EAAG,YAAWA,EAAAC,EAMVJ,EALRK,OAAAA,OAAS,IAAHD,EAAG,UAASA,EAAAE,EAKVN,EAJRO,UAAAA,OAAY,IAAHD,EAAG,cAAaA,EACzBE,EAGQR,EAHRQ,UACAC,EAEQT,EAFRS,GACeC,EACPV,EADR,eACAW,EAAQX,EAARW,SACGC,EARLC,EAAAb,EAAA,CAAA,OAAA,SAAA,YAAA,YAAA,KAAA,cAAA,aAYMc,EAAeC,EAAO,MACtBC,EAAYC,EAAYhB,EAAKa,GAC7BI,EAAkBC,EACtBC,EAAOC,MACPC,EAASF,EAAQG,EAAUlB,IAC3BiB,EAASF,EAAQb,IAGbiB,EAAQZ,EAAWY,OAAkB,cAATtB,EAAuB,eAAiB,WAE1E,OACEuB,uBAAKxB,IAAKe,EAAWR,UAAWW,EAAGC,EAAOM,aAAclB,GAAYC,GAAIA,EAAE,YAAakB,EAAgBC,OACpGjB,EACDc,EAAKI,cAAA,MAAA,CAAArB,UAAWU,EAA8B,cAAAR,GAAcoB,EAAUC,EAAuBH,MAAOnB,IACxF,cAATP,EACCuB,EAACI,cAAAG,EAAUC,OAAAC,OAAA,CAAAV,MAAOA,GAA8BZ,IAEvC,YAATV,GAAsBuB,gBAACU,EAAOF,OAAAC,OAAA,CAACV,MAAOA,GAA4BZ,KAK5E"}
+{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport { useMergeRef, getStyle } from \"@vibe/shared\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { type BadgeAlignments, type BadgeAnchor, type BadgeType } from \"./Badge.types\";\nimport Indicator, { type IndicatorProps } from \"./Indicator/Indicator\";\nimport Counter, { type CounterProps } from \"../Counter/Counter\";\n\nimport { type IndicatorColor } from \"./Indicator/Indicator.types\";\nimport { type CounterColor } from \"../Counter/Counter.types\";\nimport styles from \"./Badge.module.scss\";\nimport { type VibeComponentProps } from \"../../types\";\n\nexport interface BadgeBaseProps extends VibeComponentProps {\n  /**\n   * The position of the badge relative to its parent.\n   */\n  anchor?: BadgeAnchor;\n  /**\n   * The alignment style of the badge.\n   */\n  alignment?: BadgeAlignments;\n  /**\n   * The content the badge is attached to.\n   */\n  children: React.ReactNode;\n}\n\ninterface CounterBadgeProps extends CounterProps {\n  /**\n   * The type of badge, set to `\"counter\"` for numeric values.\n   */\n  type: Extract<BadgeType, \"counter\">;\n}\n\ninterface IndicatorBadgeProps extends IndicatorProps {\n  /**\n   * The type of badge, set to `\"indicator\"` for a simple dot.\n   */\n  type?: Extract<BadgeType, \"indicator\">;\n}\n\nexport type BadgeProps = BadgeBaseProps & (CounterBadgeProps | IndicatorBadgeProps);\n\nconst Badge = forwardRef(\n  (\n    {\n      type = \"indicator\",\n      anchor = \"top-end\",\n      alignment = \"rectangular\",\n      className,\n      id,\n      \"data-testid\": dataTestId,\n      children,\n      ...badgeProps\n    }: BadgeProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const badgeClassNames = cx(\n      styles.badge,\n      getStyle(styles, camelCase(anchor as unknown as string)),\n      getStyle(styles, alignment)\n    );\n\n    const color = badgeProps.color || type === \"indicator\" ? \"notification\" : \"negative\";\n\n    return (\n      <div ref={mergedRef} className={cx(styles.badgeWrapper, className)} id={id} data-vibe={ComponentVibeId.BADGE}>\n        {children}\n        <div className={badgeClassNames} data-testid={dataTestId || getTestId(ComponentDefaultTestId.BADGE, id)}>\n          {type === \"indicator\" ? (\n            <Indicator color={color as IndicatorColor} {...(badgeProps as IndicatorBadgeProps)} />\n          ) : (\n            type === \"counter\" && <Counter color={color as CounterColor} {...(badgeProps as CounterBadgeProps)} />\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nexport default Badge;\n"],"names":["Badge","forwardRef","_a","ref","type","_a$type","_a$anchor","anchor","_a$alignment","alignment","className","id","dataTestId","children","badgeProps","__rest","componentRef","useRef","mergedRef","useMergeRef","badgeClassNames","cx","styles","badge","getStyle","camelCase","color","React","badgeWrapper","ComponentVibeId","BADGE","createElement","getTestId","ComponentDefaultTestId","Indicator","Object","assign","Counter"],"mappings":"gkBA8CMA,IAAAA,EAAQC,GACZ,SACEC,EAUAC,SAHUD,EANRE,KAAAA,OAAO,IAAHC,EAAG,YAAWA,EAAAC,EAMVJ,EALRK,OAAAA,OAAS,IAAHD,EAAG,UAASA,EAAAE,EAKVN,EAJRO,UAAAA,OAAY,IAAHD,EAAG,cAAaA,EACzBE,EAGQR,EAHRQ,UACAC,EAEQT,EAFRS,GACeC,EACPV,EADR,eACAW,EAAQX,EAARW,SACGC,EARLC,EAAAb,EAAA,CAAA,OAAA,SAAA,YAAA,YAAA,KAAA,cAAA,aAYMc,EAAeC,EAAO,MACtBC,EAAYC,EAAYhB,EAAKa,GAC7BI,EAAkBC,EACtBC,EAAOC,MACPC,EAASF,EAAQG,EAAUlB,IAC3BiB,EAASF,EAAQb,IAGbiB,EAAQZ,EAAWY,OAAkB,cAATtB,EAAuB,eAAiB,WAE1E,OACEuB,uBAAKxB,IAAKe,EAAWR,UAAWW,EAAGC,EAAOM,aAAclB,GAAYC,GAAIA,EAAE,YAAakB,EAAgBC,OACpGjB,EACDc,EAAKI,cAAA,MAAA,CAAArB,UAAWU,EAA8B,cAAAR,GAAcoB,EAAUC,EAAuBH,MAAOnB,IACxF,cAATP,EACCuB,EAACI,cAAAG,EAAUC,OAAAC,OAAA,CAAAV,MAAOA,GAA8BZ,IAEvC,YAATV,GAAsBuB,gBAACU,EAAOF,OAAAC,OAAA,CAACV,MAAOA,GAA4BZ,KAK5E"}

package/dist/src/components/BaseItem/BaseItem.js

@@ -1,2 +1,2 @@
-import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as o,useRef as i,useEffect as r,useMemo as l}from"react";import s from"classnames";import n from"../../hooks/useMergeRef.js";import{getStyle as m}from"../../helpers/typesciptCssModulesHelper.js";import{useListItemProps as d}from"./hooks/useListItemProps.js";import{renderSideElement as a}from"./utils.js";import p from"./BaseItem.module.scss.js";import c from"../../../components/tooltip/dist/Tooltip/Tooltip.js";import h from"../../../components/typography/dist/Text/Text.js";var u=o((function(o,u){var v=o.className,f=o.id,g=o.component,b=void 0===g?"li":g,j=o.size,y=void 0===j?"medium":j,E=o.selected,P=void 0!==E&&E,x=o.readOnly,z=void 0!==x&&x,O=o.highlighted,T=void 0!==O&&O,k=o.role,N=o.dir,B=void 0===N?"auto":N,C=o.itemRenderer,H=o.itemProps,I=void 0===H?{}:H,M=o.item,R=void 0===M?{}:M,S=i(null),_=n(u,S),w=d({id:f,component:b,size:y,highlighted:T,role:k,itemProps:I});r((function(){var e;null===(e=w.refCallback)||void 0===e||e.call(w,S.current)}),[w]);var F=R.label,L=void 0===F?"":F,q=R.disabled,A=void 0!==q&&q,D=R.startElement,G=R.endElement,J=R.tooltipProps,K=void 0===J?{}:J,Q=l((function(){return s(p.wrapper,e(e(e(e({},p.selected,P),p.disabled,A),p.highlighted,w.highlighted),p.readOnly,z),m(p,w.size),v)}),[P,A,w.highlighted,z,w.size,v]),U="small"===w.size?"text2":"text1",V=w.component;return t.createElement(c,Object.assign({},K,{content:null==K?void 0:K.content,position:"rtl"===B?"right":"left",containerSelector:"body"}),t.createElement(V,Object.assign({id:w.id,ref:_,className:Q,role:w.role,"aria-selected":P,"aria-disabled":A||void 0},w.itemProps),C?C(R):t.createElement(t.Fragment,null,D&&a(D,A,U),t.createElement(h,{type:U,color:"inherit",tooltipProps:{containerSelector:"body"}},L),G&&t.createElement("div",{className:p.endElement},a(G,A,U)))))}));export{u as default};
+import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as o,useRef as i,useEffect as r,useMemo as l}from"react";import s from"classnames";import{useListItemProps as d}from"./hooks/useListItemProps.js";import{renderSideElement as n}from"./utils.js";import a from"./BaseItem.module.scss.js";import m from"../../../components/tooltip/dist/Tooltip/Tooltip.js";import p from"../../../components/typography/dist/Text/Text.js";import{useMergeRef as c}from"../../../shared/dist/hooks/useMergeRef.js";import{getStyle as h}from"../../../shared/dist/utils/typesciptCssModulesHelper.js";var u=o((function(o,u){var v=o.className,f=o.id,g=o.component,b=void 0===g?"li":g,j=o.size,y=void 0===j?"medium":j,E=o.selected,P=void 0!==E&&E,x=o.readOnly,z=void 0!==x&&x,O=o.highlighted,T=void 0!==O&&O,k=o.role,N=o.dir,B=void 0===N?"auto":N,C=o.itemRenderer,H=o.itemProps,I=void 0===H?{}:H,M=o.item,R=void 0===M?{}:M,S=i(null),_=c(u,S),w=d({id:f,component:b,size:y,highlighted:T,role:k,itemProps:I});r((function(){var e;null===(e=w.refCallback)||void 0===e||e.call(w,S.current)}),[w]);var F=R.label,L=void 0===F?"":F,q=R.disabled,A=void 0!==q&&q,D=R.startElement,G=R.endElement,J=R.tooltipProps,K=void 0===J?{}:J,Q=l((function(){return s(a.wrapper,e(e(e(e({},a.selected,P),a.disabled,A),a.highlighted,w.highlighted),a.readOnly,z),h(a,w.size),v)}),[P,A,w.highlighted,z,w.size,v]),U="small"===w.size?"text2":"text1",V=w.component;return t.createElement(m,Object.assign({},K,{content:null==K?void 0:K.content,position:"rtl"===B?"right":"left",containerSelector:"body"}),t.createElement(V,Object.assign({id:w.id,ref:_,className:Q,role:w.role,"aria-selected":P,"aria-disabled":A||void 0},w.itemProps),C?C(R):t.createElement(t.Fragment,null,D&&n(D,A,U),t.createElement(p,{type:U,color:"inherit",tooltipProps:{containerSelector:"body"}},L),G&&t.createElement("div",{className:a.endElement},n(G,A,U)))))}));export{u as default};
 //# sourceMappingURL=BaseItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseItem.js","sources":["../../../../src/components/BaseItem/BaseItem.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { Text, type TextType } from \"@vibe/typography\";\nimport { type BaseItemData, type BaseItemProps } from \"./BaseItem.types\";\nimport { useListItemProps } from \"./hooks/useListItemProps\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { renderSideElement } from \"./utils\";\nimport styles from \"./BaseItem.module.scss\";\n\nconst BaseItem = forwardRef(\n  <Item extends Record<string, unknown>>(\n    {\n      className,\n      id,\n      component = \"li\",\n      size = \"medium\",\n      selected = false,\n      readOnly = false,\n      highlighted = false,\n      role,\n      index: _index,\n      dir = \"auto\",\n      itemRenderer,\n      itemProps = {},\n      item = {} as BaseItemData<Item>\n    }: BaseItemProps<Item>,\n    ref: React.Ref<HTMLElement>\n  ) => {\n    const internalRef = useRef<HTMLElement>(null);\n    const mergedRef = useMergeRef(ref, internalRef);\n\n    const listItemProps = useListItemProps({ id, component, size, highlighted, role, itemProps });\n\n    useEffect(() => {\n      listItemProps.refCallback?.(internalRef.current);\n    }, [listItemProps]);\n\n    const { label = \"\", disabled = false, startElement, endElement, tooltipProps = {} } = item;\n\n    const listItemClassNames = useMemo(\n      () =>\n        cx(\n          styles.wrapper,\n          {\n            [styles.selected]: selected,\n            [styles.disabled]: disabled,\n            [styles.highlighted]: listItemProps.highlighted,\n            [styles.readOnly]: readOnly\n          },\n          getStyle(styles, listItemProps.size),\n          className\n        ),\n      [selected, disabled, listItemProps.highlighted, readOnly, listItemProps.size, className]\n    );\n\n    const textVariant: TextType = listItemProps.size === \"small\" ? \"text2\" : \"text1\";\n    const Element = listItemProps.component as React.ElementType;\n\n    return (\n      <Tooltip\n        {...tooltipProps}\n        content={tooltipProps?.content}\n        position={dir === \"rtl\" ? \"right\" : \"left\"}\n        containerSelector=\"body\"\n      >\n        <Element\n          id={listItemProps.id}\n          ref={mergedRef}\n          className={listItemClassNames}\n          role={listItemProps.role}\n          aria-selected={selected}\n          aria-disabled={disabled || undefined}\n          {...listItemProps.itemProps}\n        >\n          {itemRenderer ? (\n            itemRenderer(item)\n          ) : (\n            <>\n              {startElement && renderSideElement(startElement, disabled, textVariant)}\n              <Text type={textVariant} color=\"inherit\" tooltipProps={{ containerSelector: \"body\" }}>\n                {label}\n              </Text>\n              {endElement && (\n                <div className={styles.endElement}>{renderSideElement(endElement, disabled, textVariant)}</div>\n              )}\n            </>\n          )}\n        </Element>\n      </Tooltip>\n    );\n  }\n);\n\nexport default BaseItem as <Item extends Record<string, unknown>>(\n  props: BaseItemProps<Item> & { ref?: React.Ref<HTMLElement> }\n) => React.ReactElement;\n"],"names":["BaseItem","forwardRef","_ref","ref","className","id","_ref$component","component","_ref$size","size","_ref$selected","selected","_ref$readOnly","readOnly","_ref$highlighted","highlighted","role","_ref$dir","dir","itemRenderer","_ref$itemProps","itemProps","_ref$item","item","internalRef","useRef","mergedRef","useMergeRef","listItemProps","useListItemProps","useEffect","_a","refCallback","call","current","_item$label","label","_item$disabled","disabled","startElement","endElement","_item$tooltipProps","tooltipProps","listItemClassNames","useMemo","cx","styles","wrapper","_defineProperty","getStyle","textVariant","Element","React","createElement","Tooltip","Object","assign","content","position","containerSelector","undefined","Fragment","renderSideElement","Text","type","color"],"mappings":"kkBAWMA,IAAAA,EAAWC,GACf,SAAAC,EAgBEC,GACE,IAfAC,EAASF,EAATE,UACAC,EAAEH,EAAFG,GAAEC,EAAAJ,EACFK,UAAAA,OAAY,IAAHD,EAAG,KAAIA,EAAAE,EAAAN,EAChBO,KAAAA,OAAO,IAAHD,EAAG,SAAQA,EAAAE,EAAAR,EACfS,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAV,EAChBW,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAZ,EAChBa,YAAAA,OAAc,IAAHD,GAAQA,EACnBE,EAAId,EAAJc,KACKC,EAAAf,EACLgB,IAAAA,OAAM,IAAHD,EAAG,OAAMA,EACZE,EAAYjB,EAAZiB,aAAYC,EAAAlB,EACZmB,UAAAA,OAAS,IAAAD,EAAG,CAAA,EAAEA,EAAAE,EAAApB,EACdqB,KAAAA,OAAI,IAAAD,EAAG,CAAwB,EAAAA,EAI3BE,EAAcC,EAAoB,MAClCC,EAAYC,EAAYxB,EAAKqB,GAE7BI,EAAgBC,EAAiB,CAAExB,GAAAA,EAAIE,UAAAA,EAAWE,KAAAA,EAAMM,YAAAA,EAAaC,KAAAA,EAAMK,UAAAA,IAEjFS,GAAU,iBACiB,QAAzBC,EAAAH,EAAcI,mBAAW,IAAAD,GAAAA,EAAAE,KAAAL,EAAGJ,EAAYU,QAC1C,GAAG,CAACN,IAEJ,IAAAO,EAAsFZ,EAA9Ea,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAAoEd,EAAlEe,SAAAA,OAAW,IAAHD,GAAQA,EAAEE,EAAgDhB,EAAhDgB,aAAcC,EAAkCjB,EAAlCiB,WAAUC,EAAwBlB,EAAtBmB,aAAAA,OAAY,IAAAD,EAAG,CAAA,EAAEA,EAE3EE,EAAqBC,GACzB,WAAA,OACEC,EACEC,EAAOC,QAAOC,EAAAA,EAAAA,EAAAA,EAAA,CAAA,EAEXF,EAAOnC,SAAWA,GAClBmC,EAAOR,SAAWA,GAClBQ,EAAO/B,YAAca,EAAcb,aACnC+B,EAAOjC,SAAWA,GAErBoC,EAASH,EAAQlB,EAAcnB,MAC/BL,EACD,GACH,CAACO,EAAU2B,EAAUV,EAAcb,YAAaF,EAAUe,EAAcnB,KAAML,IAG1E8C,EAA+C,UAAvBtB,EAAcnB,KAAmB,QAAU,QACnE0C,EAAUvB,EAAcrB,UAE9B,OACE6C,EAAAC,cAACC,EAAOC,OAAAC,OAAA,CAAA,EACFd,EACJ,CAAAe,QAASf,aAAA,EAAAA,EAAce,QACvBC,SAAkB,QAARxC,EAAgB,QAAU,OACpCyC,kBAAkB,SAElBP,EAACC,cAAAF,iBACC9C,GAAIuB,EAAcvB,GAClBF,IAAKuB,EACLtB,UAAWuC,EACX3B,KAAMY,EAAcZ,KAAI,gBACTL,EACA,gBAAA2B,QAAYsB,GACvBhC,EAAcP,WAEjBF,EACCA,EAAaI,GAEb6B,EAAAC,cAAAD,EAAAS,SAAA,KACGtB,GAAgBuB,EAAkBvB,EAAcD,EAAUY,GAC3DE,EAAAC,cAACU,EAAK,CAAAC,KAAMd,EAAae,MAAM,UAAUvB,aAAc,CAAEiB,kBAAmB,SACzEvB,GAEFI,GACCY,EAAAC,cAAA,MAAA,CAAKjD,UAAW0C,EAAON,YAAasB,EAAkBtB,EAAYF,EAAUY,MAO1F"}
+{"version":3,"file":"BaseItem.js","sources":["../../../../src/components/BaseItem/BaseItem.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { useMergeRef, getStyle } from \"@vibe/shared\";\n\nimport { Text, type TextType } from \"@vibe/typography\";\nimport { type BaseItemData, type BaseItemProps } from \"./BaseItem.types\";\nimport { useListItemProps } from \"./hooks/useListItemProps\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { renderSideElement } from \"./utils\";\nimport styles from \"./BaseItem.module.scss\";\n\nconst BaseItem = forwardRef(\n  <Item extends Record<string, unknown>>(\n    {\n      className,\n      id,\n      component = \"li\",\n      size = \"medium\",\n      selected = false,\n      readOnly = false,\n      highlighted = false,\n      role,\n      index: _index,\n      dir = \"auto\",\n      itemRenderer,\n      itemProps = {},\n      item = {} as BaseItemData<Item>\n    }: BaseItemProps<Item>,\n    ref: React.Ref<HTMLElement>\n  ) => {\n    const internalRef = useRef<HTMLElement>(null);\n    const mergedRef = useMergeRef(ref, internalRef);\n\n    const listItemProps = useListItemProps({ id, component, size, highlighted, role, itemProps });\n\n    useEffect(() => {\n      listItemProps.refCallback?.(internalRef.current);\n    }, [listItemProps]);\n\n    const { label = \"\", disabled = false, startElement, endElement, tooltipProps = {} } = item;\n\n    const listItemClassNames = useMemo(\n      () =>\n        cx(\n          styles.wrapper,\n          {\n            [styles.selected]: selected,\n            [styles.disabled]: disabled,\n            [styles.highlighted]: listItemProps.highlighted,\n            [styles.readOnly]: readOnly\n          },\n          getStyle(styles, listItemProps.size),\n          className\n        ),\n      [selected, disabled, listItemProps.highlighted, readOnly, listItemProps.size, className]\n    );\n\n    const textVariant: TextType = listItemProps.size === \"small\" ? \"text2\" : \"text1\";\n    const Element = listItemProps.component as React.ElementType;\n\n    return (\n      <Tooltip\n        {...tooltipProps}\n        content={tooltipProps?.content}\n        position={dir === \"rtl\" ? \"right\" : \"left\"}\n        containerSelector=\"body\"\n      >\n        <Element\n          id={listItemProps.id}\n          ref={mergedRef}\n          className={listItemClassNames}\n          role={listItemProps.role}\n          aria-selected={selected}\n          aria-disabled={disabled || undefined}\n          {...listItemProps.itemProps}\n        >\n          {itemRenderer ? (\n            itemRenderer(item)\n          ) : (\n            <>\n              {startElement && renderSideElement(startElement, disabled, textVariant)}\n              <Text type={textVariant} color=\"inherit\" tooltipProps={{ containerSelector: \"body\" }}>\n                {label}\n              </Text>\n              {endElement && (\n                <div className={styles.endElement}>{renderSideElement(endElement, disabled, textVariant)}</div>\n              )}\n            </>\n          )}\n        </Element>\n      </Tooltip>\n    );\n  }\n);\n\nexport default BaseItem as <Item extends Record<string, unknown>>(\n  props: BaseItemProps<Item> & { ref?: React.Ref<HTMLElement> }\n) => React.ReactElement;\n"],"names":["BaseItem","forwardRef","_ref","ref","className","id","_ref$component","component","_ref$size","size","_ref$selected","selected","_ref$readOnly","readOnly","_ref$highlighted","highlighted","role","_ref$dir","dir","itemRenderer","_ref$itemProps","itemProps","_ref$item","item","internalRef","useRef","mergedRef","useMergeRef","listItemProps","useListItemProps","useEffect","_a","refCallback","call","current","_item$label","label","_item$disabled","disabled","startElement","endElement","_item$tooltipProps","tooltipProps","listItemClassNames","useMemo","cx","styles","wrapper","_defineProperty","getStyle","textVariant","Element","React","createElement","Tooltip","Object","assign","content","position","containerSelector","undefined","Fragment","renderSideElement","Text","type","color"],"mappings":"6mBAWMA,IAAAA,EAAWC,GACf,SAAAC,EAgBEC,GACE,IAfAC,EAASF,EAATE,UACAC,EAAEH,EAAFG,GAAEC,EAAAJ,EACFK,UAAAA,OAAY,IAAHD,EAAG,KAAIA,EAAAE,EAAAN,EAChBO,KAAAA,OAAO,IAAHD,EAAG,SAAQA,EAAAE,EAAAR,EACfS,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAV,EAChBW,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAZ,EAChBa,YAAAA,OAAc,IAAHD,GAAQA,EACnBE,EAAId,EAAJc,KACKC,EAAAf,EACLgB,IAAAA,OAAM,IAAHD,EAAG,OAAMA,EACZE,EAAYjB,EAAZiB,aAAYC,EAAAlB,EACZmB,UAAAA,OAAS,IAAAD,EAAG,CAAA,EAAEA,EAAAE,EAAApB,EACdqB,KAAAA,OAAI,IAAAD,EAAG,CAAwB,EAAAA,EAI3BE,EAAcC,EAAoB,MAClCC,EAAYC,EAAYxB,EAAKqB,GAE7BI,EAAgBC,EAAiB,CAAExB,GAAAA,EAAIE,UAAAA,EAAWE,KAAAA,EAAMM,YAAAA,EAAaC,KAAAA,EAAMK,UAAAA,IAEjFS,GAAU,iBACiB,QAAzBC,EAAAH,EAAcI,mBAAW,IAAAD,GAAAA,EAAAE,KAAAL,EAAGJ,EAAYU,QAC1C,GAAG,CAACN,IAEJ,IAAAO,EAAsFZ,EAA9Ea,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAAoEd,EAAlEe,SAAAA,OAAW,IAAHD,GAAQA,EAAEE,EAAgDhB,EAAhDgB,aAAcC,EAAkCjB,EAAlCiB,WAAUC,EAAwBlB,EAAtBmB,aAAAA,OAAY,IAAAD,EAAG,CAAA,EAAEA,EAE3EE,EAAqBC,GACzB,WAAA,OACEC,EACEC,EAAOC,QAAOC,EAAAA,EAAAA,EAAAA,EAAA,CAAA,EAEXF,EAAOnC,SAAWA,GAClBmC,EAAOR,SAAWA,GAClBQ,EAAO/B,YAAca,EAAcb,aACnC+B,EAAOjC,SAAWA,GAErBoC,EAASH,EAAQlB,EAAcnB,MAC/BL,EACD,GACH,CAACO,EAAU2B,EAAUV,EAAcb,YAAaF,EAAUe,EAAcnB,KAAML,IAG1E8C,EAA+C,UAAvBtB,EAAcnB,KAAmB,QAAU,QACnE0C,EAAUvB,EAAcrB,UAE9B,OACE6C,EAAAC,cAACC,EAAOC,OAAAC,OAAA,CAAA,EACFd,EACJ,CAAAe,QAASf,aAAA,EAAAA,EAAce,QACvBC,SAAkB,QAARxC,EAAgB,QAAU,OACpCyC,kBAAkB,SAElBP,EAACC,cAAAF,iBACC9C,GAAIuB,EAAcvB,GAClBF,IAAKuB,EACLtB,UAAWuC,EACX3B,KAAMY,EAAcZ,KAAI,gBACTL,EACA,gBAAA2B,QAAYsB,GACvBhC,EAAcP,WAEjBF,EACCA,EAAaI,GAEb6B,EAAAC,cAAAD,EAAAS,SAAA,KACGtB,GAAgBuB,EAAkBvB,EAAcD,EAAUY,GAC3DE,EAAAC,cAACU,EAAK,CAAAC,KAAMd,EAAae,MAAM,UAAUvB,aAAc,CAAEiB,kBAAmB,SACzEvB,GAEFI,GACCY,EAAAC,cAAA,MAAA,CAAKjD,UAAW0C,EAAON,YAAasB,EAAkBtB,EAAYF,EAAUY,MAO1F"}

package/dist/src/components/BaseList/BaseList.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../../_virtual/_tslib.js";import t,{forwardRef as s,useRef as r,useMemo as a}from"react";import i from"classnames";import o from"../../hooks/useMergeRef.js";import n from"../../hooks/ssr/useIsomorphicLayoutEffect.js";import{BaseListItemProvider as d,BaseListProvider as c}from"./context/BaseListContext.js";import{useBaseListFocus as l}from"./hooks/useBaseListFocus.js";import{useBaseListKeyboard as u}from"./hooks/useBaseListKeyboard.js";import{getItemId as m,isListItem as f,getItemComponentType as b,getChildRole as p}from"./utils/baseListUtils.js";import h from"./BaseList.module.scss.js";var v=s((function(s,v){var I=s.className,x=s.id,g=s.as,y=void 0===g?"ul":g,j=s.children,F=s["aria-label"],L=s["aria-describedby"],k=s["aria-controls"],C=s.role,E=void 0===C?"listbox":C,O=s.size,z=void 0===O?"medium":O,B=s.maxHeight,R=s.focusOnMount,M=void 0!==R&&R,N=s.defaultFocusIndex,A=void 0===N?0:N,H=s.onFocusChange,_=s.style,q=s.disabled,D=void 0!==q&&q,K=s["data-testid"],U=e(s,["className","id","as","children","aria-label","aria-describedby","aria-controls","role","size","maxHeight","focusOnMount","defaultFocusIndex","onFocusChange","style","disabled","data-testid"]),V=r(null),w=o(v,V),G=y,J=l({defaultFocusIndex:A,onFocusChange:H,listId:x,disabled:D}),P=J.focusIndex,Q=J.activeDescendantId,S=J.updateFocusedItem,T=J.registerItem,W=J.childrenRefs;u({focusIndex:P,childrenRefs:W,listId:x,updateFocusedItem:S,componentRef:V,disabled:D}),n((function(){M&&V.current&&requestAnimationFrame((function(){var e;null===(e=V.current)||void 0===e||e.focus()}))}),[M]);var X=a((function(){var e=t.Children.toArray(j);return W.current=W.current.slice(0,e.length),e.map((function(e,s){if(!t.isValidElement(e))return e;var r=m(x,s,e.props.id),a=W.current[s],i=null==a||f(a),o=e.props.role||("string"==typeof e.type?void 0:p(E)),n={index:s,id:r,highlighted:P===s&&i,tabIndex:P===s&&i?0:-1,component:b(y),size:z,role:o,refCallback:function(e){W.current[s]=e}};return t.createElement(d,{key:r,value:n},e)}))}),[j,y,P,x,E,z,W]),Y=a((function(){return{activeItemIndex:P,updateFocusedItem:S,registerItem:T,size:z}}),[P,S,T,z]),Z=a((function(){return B?Object.assign(Object.assign({},_),{"--baselist-max-height":"number"==typeof B?"".concat(B,"px"):B}):_}),[B,_]);return t.createElement(c,{value:Y},t.createElement(G,Object.assign({ref:w,id:x,className:i(h.baseList,I),style:Z,"aria-label":F,"aria-describedby":L,"aria-controls":k,"aria-activedescendant":Q,"aria-disabled":D||void 0,role:E,tabIndex:-1,"data-testid":K},U),X))}));export{v as default};
+import{__rest as e}from"../../../_virtual/_tslib.js";import t,{forwardRef as s,useRef as r,useMemo as a}from"react";import i from"classnames";import{BaseListItemProvider as o,BaseListProvider as n}from"./context/BaseListContext.js";import{useBaseListFocus as d}from"./hooks/useBaseListFocus.js";import{useBaseListKeyboard as c}from"./hooks/useBaseListKeyboard.js";import{getItemId as l,isListItem as u,getItemComponentType as m,getChildRole as f}from"./utils/baseListUtils.js";import b from"./BaseList.module.scss.js";import{useMergeRef as p}from"../../../shared/dist/hooks/useMergeRef.js";import{useIsomorphicLayoutEffect as h}from"../../../shared/dist/hooks/ssr/useIsomorphicLayoutEffect.js";var v=s((function(s,v){var I=s.className,x=s.id,g=s.as,y=void 0===g?"ul":g,j=s.children,F=s["aria-label"],L=s["aria-describedby"],k=s["aria-controls"],C=s.role,E=void 0===C?"listbox":C,O=s.size,z=void 0===O?"medium":O,B=s.maxHeight,R=s.focusOnMount,M=void 0!==R&&R,N=s.defaultFocusIndex,A=void 0===N?0:N,H=s.onFocusChange,_=s.style,q=s.disabled,D=void 0!==q&&q,K=s["data-testid"],U=e(s,["className","id","as","children","aria-label","aria-describedby","aria-controls","role","size","maxHeight","focusOnMount","defaultFocusIndex","onFocusChange","style","disabled","data-testid"]),V=r(null),w=p(v,V),G=y,J=d({defaultFocusIndex:A,onFocusChange:H,listId:x,disabled:D}),P=J.focusIndex,Q=J.activeDescendantId,S=J.updateFocusedItem,T=J.registerItem,W=J.childrenRefs;c({focusIndex:P,childrenRefs:W,listId:x,updateFocusedItem:S,componentRef:V,disabled:D}),h((function(){M&&V.current&&requestAnimationFrame((function(){var e;null===(e=V.current)||void 0===e||e.focus()}))}),[M]);var X=a((function(){var e=t.Children.toArray(j);return W.current=W.current.slice(0,e.length),e.map((function(e,s){if(!t.isValidElement(e))return e;var r=l(x,s,e.props.id),a=W.current[s],i=null==a||u(a),n=e.props.role||("string"==typeof e.type?void 0:f(E)),d={index:s,id:r,highlighted:P===s&&i,tabIndex:P===s&&i?0:-1,component:m(y),size:z,role:n,refCallback:function(e){W.current[s]=e}};return t.createElement(o,{key:r,value:d},e)}))}),[j,y,P,x,E,z,W]),Y=a((function(){return{activeItemIndex:P,updateFocusedItem:S,registerItem:T,size:z}}),[P,S,T,z]),Z=a((function(){return B?Object.assign(Object.assign({},_),{"--baselist-max-height":"number"==typeof B?"".concat(B,"px"):B}):_}),[B,_]);return t.createElement(n,{value:Y},t.createElement(G,Object.assign({ref:w,id:x,className:i(b.baseList,I),style:Z,"aria-label":F,"aria-describedby":L,"aria-controls":k,"aria-activedescendant":Q,"aria-disabled":D||void 0,role:E,tabIndex:-1,"data-testid":K},U),X))}));export{v as default};
 //# sourceMappingURL=BaseList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseList.js","sources":["../../../../src/components/BaseList/BaseList.tsx"],"sourcesContent":["import React, { forwardRef, type ReactElement, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport useIsomorphicLayoutEffect from \"../../hooks/ssr/useIsomorphicLayoutEffect\";\nimport { type BaseListProps } from \"./BaseList.types\";\nimport {\n  BaseListProvider,\n  BaseListItemProvider,\n  type BaseListContextProps,\n  type BaseListItemContextProps\n} from \"./context/BaseListContext\";\nimport { useBaseListFocus } from \"./hooks/useBaseListFocus\";\nimport { useBaseListKeyboard } from \"./hooks/useBaseListKeyboard\";\nimport { getChildRole, getItemComponentType, getItemId, isListItem } from \"./utils/baseListUtils\";\nimport styles from \"./BaseList.module.scss\";\n\nconst BaseList = forwardRef(\n  (\n    {\n      className,\n      id,\n      as = \"ul\",\n      children,\n      \"aria-label\": ariaLabel,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-controls\": ariaControls,\n      role = \"listbox\",\n      size = \"medium\",\n      maxHeight,\n      focusOnMount = false,\n      defaultFocusIndex = 0,\n      onFocusChange,\n      style,\n      disabled = false,\n      \"data-testid\": dataTestId,\n      ...rest\n    }: BaseListProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef<HTMLElement>(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const Element = as as React.ElementType;\n\n    const { focusIndex, activeDescendantId, updateFocusedItem, registerItem, childrenRefs } = useBaseListFocus({\n      defaultFocusIndex,\n      onFocusChange,\n      listId: id,\n      disabled\n    });\n\n    useBaseListKeyboard({\n      focusIndex,\n      childrenRefs,\n      listId: id,\n      updateFocusedItem,\n      componentRef,\n      disabled\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      if (focusOnMount && componentRef.current) {\n        requestAnimationFrame(() => {\n          componentRef.current?.focus();\n        });\n      }\n    }, [focusOnMount]);\n\n    const enrichedChildren = useMemo(() => {\n      const childArray = React.Children.toArray(children) as ReactElement[];\n      childrenRefs.current = childrenRefs.current.slice(0, childArray.length);\n\n      return childArray.map((child, index) => {\n        if (!React.isValidElement(child)) {\n          return child;\n        }\n\n        const childId = getItemId(id, index, (child.props as { id?: string }).id);\n        const currentRef = childrenRefs.current[index];\n        const isFocusableItem = currentRef === undefined || currentRef === null || isListItem(currentRef);\n        const isDOMElement = typeof child.type === \"string\";\n\n        const existingRole = (child.props as { role?: string }).role;\n        const childRole = existingRole || (!isDOMElement ? getChildRole(role) : undefined);\n\n        const refCallback = (itemRef: HTMLElement | null) => {\n          childrenRefs.current[index] = itemRef;\n        };\n\n        const itemContextValue: BaseListItemContextProps = {\n          index,\n          id: childId,\n          highlighted: focusIndex === index && isFocusableItem,\n          tabIndex: focusIndex === index && isFocusableItem ? 0 : -1,\n          component: getItemComponentType(as),\n          size,\n          role: childRole,\n          refCallback\n        };\n\n        return (\n          <BaseListItemProvider key={childId} value={itemContextValue}>\n            {child}\n          </BaseListItemProvider>\n        );\n      });\n    }, [children, as, focusIndex, id, role, size, childrenRefs]);\n\n    const contextValue: BaseListContextProps = useMemo(\n      () => ({\n        activeItemIndex: focusIndex,\n        updateFocusedItem,\n        registerItem,\n        size\n      }),\n      [focusIndex, updateFocusedItem, registerItem, size]\n    );\n\n    const listStyle = useMemo(\n      () =>\n        maxHeight\n          ? ({\n              ...style,\n              \"--baselist-max-height\": typeof maxHeight === \"number\" ? `${maxHeight}px` : maxHeight\n            } as React.CSSProperties)\n          : style,\n      [maxHeight, style]\n    );\n\n    return (\n      <BaseListProvider value={contextValue}>\n        <Element\n          ref={mergedRef}\n          id={id}\n          className={cx(styles.baseList, className)}\n          style={listStyle}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedBy}\n          aria-controls={ariaControls}\n          aria-activedescendant={activeDescendantId}\n          aria-disabled={disabled || undefined}\n          role={role}\n          tabIndex={-1}\n          data-testid={dataTestId}\n          {...rest}\n        >\n          {enrichedChildren}\n        </Element>\n      </BaseListProvider>\n    );\n  }\n);\n\nexport default BaseList;\n"],"names":["BaseList","forwardRef","_a","ref","className","id","_a$as","as","children","ariaLabel","ariaDescribedBy","ariaControls","_a$role","role","_a$size","size","maxHeight","_a$focusOnMount","focusOnMount","_a$defaultFocusIndex","defaultFocusIndex","onFocusChange","style","_a$disabled","disabled","dataTestId","rest","__rest","componentRef","useRef","mergedRef","useMergeRef","Element","_useBaseListFocus","useBaseListFocus","listId","focusIndex","activeDescendantId","updateFocusedItem","registerItem","childrenRefs","useBaseListKeyboard","useIsomorphicLayoutEffect","current","requestAnimationFrame","focus","enrichedChildren","useMemo","childArray","React","Children","toArray","slice","length","map","child","index","isValidElement","childId","getItemId","props","currentRef","isFocusableItem","isListItem","childRole","type","undefined","getChildRole","itemContextValue","highlighted","tabIndex","component","getItemComponentType","refCallback","itemRef","createElement","BaseListItemProvider","key","value","contextValue","activeItemIndex","listStyle","Object","concat","BaseListProvider","assign","cx","styles","baseList"],"mappings":"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"}
+{"version":3,"file":"BaseList.js","sources":["../../../../src/components/BaseList/BaseList.tsx"],"sourcesContent":["import React, { forwardRef, type ReactElement, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { useMergeRef, useIsomorphicLayoutEffect } from \"@vibe/shared\";\n\nimport { type BaseListProps } from \"./BaseList.types\";\nimport {\n  BaseListProvider,\n  BaseListItemProvider,\n  type BaseListContextProps,\n  type BaseListItemContextProps\n} from \"./context/BaseListContext\";\nimport { useBaseListFocus } from \"./hooks/useBaseListFocus\";\nimport { useBaseListKeyboard } from \"./hooks/useBaseListKeyboard\";\nimport { getChildRole, getItemComponentType, getItemId, isListItem } from \"./utils/baseListUtils\";\nimport styles from \"./BaseList.module.scss\";\n\nconst BaseList = forwardRef(\n  (\n    {\n      className,\n      id,\n      as = \"ul\",\n      children,\n      \"aria-label\": ariaLabel,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-controls\": ariaControls,\n      role = \"listbox\",\n      size = \"medium\",\n      maxHeight,\n      focusOnMount = false,\n      defaultFocusIndex = 0,\n      onFocusChange,\n      style,\n      disabled = false,\n      \"data-testid\": dataTestId,\n      ...rest\n    }: BaseListProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef<HTMLElement>(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const Element = as as React.ElementType;\n\n    const { focusIndex, activeDescendantId, updateFocusedItem, registerItem, childrenRefs } = useBaseListFocus({\n      defaultFocusIndex,\n      onFocusChange,\n      listId: id,\n      disabled\n    });\n\n    useBaseListKeyboard({\n      focusIndex,\n      childrenRefs,\n      listId: id,\n      updateFocusedItem,\n      componentRef,\n      disabled\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      if (focusOnMount && componentRef.current) {\n        requestAnimationFrame(() => {\n          componentRef.current?.focus();\n        });\n      }\n    }, [focusOnMount]);\n\n    const enrichedChildren = useMemo(() => {\n      const childArray = React.Children.toArray(children) as ReactElement[];\n      childrenRefs.current = childrenRefs.current.slice(0, childArray.length);\n\n      return childArray.map((child, index) => {\n        if (!React.isValidElement(child)) {\n          return child;\n        }\n\n        const childId = getItemId(id, index, (child.props as { id?: string }).id);\n        const currentRef = childrenRefs.current[index];\n        const isFocusableItem = currentRef === undefined || currentRef === null || isListItem(currentRef);\n        const isDOMElement = typeof child.type === \"string\";\n\n        const existingRole = (child.props as { role?: string }).role;\n        const childRole = existingRole || (!isDOMElement ? getChildRole(role) : undefined);\n\n        const refCallback = (itemRef: HTMLElement | null) => {\n          childrenRefs.current[index] = itemRef;\n        };\n\n        const itemContextValue: BaseListItemContextProps = {\n          index,\n          id: childId,\n          highlighted: focusIndex === index && isFocusableItem,\n          tabIndex: focusIndex === index && isFocusableItem ? 0 : -1,\n          component: getItemComponentType(as),\n          size,\n          role: childRole,\n          refCallback\n        };\n\n        return (\n          <BaseListItemProvider key={childId} value={itemContextValue}>\n            {child}\n          </BaseListItemProvider>\n        );\n      });\n    }, [children, as, focusIndex, id, role, size, childrenRefs]);\n\n    const contextValue: BaseListContextProps = useMemo(\n      () => ({\n        activeItemIndex: focusIndex,\n        updateFocusedItem,\n        registerItem,\n        size\n      }),\n      [focusIndex, updateFocusedItem, registerItem, size]\n    );\n\n    const listStyle = useMemo(\n      () =>\n        maxHeight\n          ? ({\n              ...style,\n              \"--baselist-max-height\": typeof maxHeight === \"number\" ? `${maxHeight}px` : maxHeight\n            } as React.CSSProperties)\n          : style,\n      [maxHeight, style]\n    );\n\n    return (\n      <BaseListProvider value={contextValue}>\n        <Element\n          ref={mergedRef}\n          id={id}\n          className={cx(styles.baseList, className)}\n          style={listStyle}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedBy}\n          aria-controls={ariaControls}\n          aria-activedescendant={activeDescendantId}\n          aria-disabled={disabled || undefined}\n          role={role}\n          tabIndex={-1}\n          data-testid={dataTestId}\n          {...rest}\n        >\n          {enrichedChildren}\n        </Element>\n      </BaseListProvider>\n    );\n  }\n);\n\nexport default BaseList;\n"],"names":["BaseList","forwardRef","_a","ref","className","id","_a$as","as","children","ariaLabel","ariaDescribedBy","ariaControls","_a$role","role","_a$size","size","maxHeight","_a$focusOnMount","focusOnMount","_a$defaultFocusIndex","defaultFocusIndex","onFocusChange","style","_a$disabled","disabled","dataTestId","rest","__rest","componentRef","useRef","mergedRef","useMergeRef","Element","_useBaseListFocus","useBaseListFocus","listId","focusIndex","activeDescendantId","updateFocusedItem","registerItem","childrenRefs","useBaseListKeyboard","useIsomorphicLayoutEffect","current","requestAnimationFrame","focus","enrichedChildren","useMemo","childArray","React","Children","toArray","slice","length","map","child","index","isValidElement","childId","getItemId","props","currentRef","isFocusableItem","isListItem","childRole","type","undefined","getChildRole","itemContextValue","highlighted","tabIndex","component","getItemComponentType","refCallback","itemRef","createElement","BaseListItemProvider","key","value","contextValue","activeItemIndex","listStyle","Object","concat","BaseListProvider","assign","cx","styles","baseList"],"mappings":"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"}

package/dist/src/components/BaseList/context/BaseListContext.js

@@ -1,2 +1,2 @@
-import e,{useContext as r,createContext as t}from"react";import{NOOP as n}from"../../../utils/function-utils.js";var i=t({activeItemIndex:-1,updateFocusedItem:n,registerItem:n,size:"medium"}),u=t(void 0),o=function(r){return e.createElement(i.Provider,{value:r.value},r.children)},c=function(r){return e.createElement(u.Provider,{value:r.value},r.children)},m=function(){return r(i)},a=function(){return r(u)};export{c as BaseListItemProvider,o as BaseListProvider,m as useBaseList,a as useBaseListItem};
+import e,{useContext as r,createContext as t}from"react";import{NOOP as i}from"../../../../shared/dist/utils/function-utils.js";var n=t({activeItemIndex:-1,updateFocusedItem:i,registerItem:i,size:"medium"}),u=t(void 0),o=function(r){return e.createElement(n.Provider,{value:r.value},r.children)},c=function(r){return e.createElement(u.Provider,{value:r.value},r.children)},a=function(){return r(n)},d=function(){return r(u)};export{c as BaseListItemProvider,o as BaseListProvider,a as useBaseList,d as useBaseListItem};
 //# sourceMappingURL=BaseListContext.js.map

package/dist/src/components/BaseList/context/BaseListContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseListContext.js","sources":["../../../../../src/components/BaseList/context/BaseListContext.tsx"],"sourcesContent":["import React, { createContext, useContext, type ReactNode, type AriaRole } from \"react\";\nimport { NOOP } from \"../../../utils/function-utils\";\nimport { type BaseListSizes } from \"../BaseList.types\";\n\nexport interface BaseListItemContextProps {\n  /**\n   * The index of this item in the list.\n   */\n  index: number;\n  /**\n   * The derived ID for this item.\n   */\n  id: string;\n  /**\n   * Whether this item is currently highlighted (has keyboard focus).\n   */\n  highlighted: boolean;\n  /**\n   * The tabIndex for this item (0 if highlighted, -1 otherwise).\n   */\n  tabIndex: number;\n  /**\n   * The HTML element to render as.\n   */\n  component: string;\n  /**\n   * The size of the item.\n   */\n  size: BaseListSizes;\n  /**\n   * The ARIA role for this item.\n   */\n  role: AriaRole | undefined;\n  /**\n   * Callback ref to register the item's DOM element.\n   */\n  refCallback: (element: HTMLElement | null) => void;\n}\n\nexport interface BaseListContextProps {\n  /**\n   * The index of the currently focused/active item.\n   */\n  activeItemIndex: number;\n  /**\n   * Callback to update the focused item by id and index.\n   */\n  updateFocusedItem: (id: string, index: number) => void;\n  /**\n   * Register an item ref for keyboard navigation.\n   */\n  registerItem: (ref: HTMLElement | null, index: number) => void;\n  /**\n   * The size of items in the list.\n   */\n  size?: BaseListSizes;\n}\n\nexport interface BaseListProviderProps {\n  value: BaseListContextProps;\n  children: ReactNode;\n}\n\nexport interface BaseListItemProviderProps {\n  value: BaseListItemContextProps;\n  children: ReactNode;\n}\n\nconst defaultListContextValue: BaseListContextProps = {\n  activeItemIndex: -1,\n  updateFocusedItem: NOOP,\n  registerItem: NOOP,\n  size: \"medium\"\n};\n\nconst BaseListContext = createContext<BaseListContextProps>(defaultListContextValue);\nconst BaseListItemContext = createContext<BaseListItemContextProps | undefined>(undefined);\n\nexport const BaseListProvider = ({ value, children }: BaseListProviderProps) => {\n  return <BaseListContext.Provider value={value}>{children}</BaseListContext.Provider>;\n};\n\nexport const BaseListItemProvider = ({ value, children }: BaseListItemProviderProps) => {\n  return <BaseListItemContext.Provider value={value}>{children}</BaseListItemContext.Provider>;\n};\n\nexport const useBaseList = (): BaseListContextProps => {\n  return useContext(BaseListContext);\n};\n\nexport const useBaseListItem = (): BaseListItemContextProps | undefined => {\n  return useContext(BaseListItemContext);\n};\n"],"names":["BaseListContext","createContext","activeItemIndex","updateFocusedItem","NOOP","registerItem","size","BaseListItemContext","undefined","BaseListProvider","_ref","React","createElement","Provider","value","children","BaseListItemProvider","_ref2","useBaseList","useContext","useBaseListItem"],"mappings":"iHAoEA,IAOMA,EAAkBC,EAP8B,CACpDC,iBAAkB,EAClBC,kBAAmBC,EACnBC,aAAcD,EACdE,KAAM,WAIFC,EAAsBN,OAAoDO,GAEnEC,EAAmB,SAAHC,GAC3B,OAAOC,EAAAC,cAACZ,EAAgBa,SAAQ,CAACC,MADKJ,EAALI,OAAeJ,EAARK,SAE1C,EAEaC,EAAuB,SAAHC,GAC/B,OAAON,EAAAC,cAACL,EAAoBM,SAAQ,CAACC,MADKG,EAALH,OAAeG,EAARF,SAE9C,EAEaG,EAAc,WACzB,OAAOC,EAAWnB,EACpB,EAEaoB,EAAkB,WAC7B,OAAOD,EAAWZ,EACpB"}
+{"version":3,"file":"BaseListContext.js","sources":["../../../../../src/components/BaseList/context/BaseListContext.tsx"],"sourcesContent":["import React, { createContext, useContext, type ReactNode, type AriaRole } from \"react\";\nimport { NOOP } from \"@vibe/shared\";\nimport { type BaseListSizes } from \"../BaseList.types\";\n\nexport interface BaseListItemContextProps {\n  /**\n   * The index of this item in the list.\n   */\n  index: number;\n  /**\n   * The derived ID for this item.\n   */\n  id: string;\n  /**\n   * Whether this item is currently highlighted (has keyboard focus).\n   */\n  highlighted: boolean;\n  /**\n   * The tabIndex for this item (0 if highlighted, -1 otherwise).\n   */\n  tabIndex: number;\n  /**\n   * The HTML element to render as.\n   */\n  component: string;\n  /**\n   * The size of the item.\n   */\n  size: BaseListSizes;\n  /**\n   * The ARIA role for this item.\n   */\n  role: AriaRole | undefined;\n  /**\n   * Callback ref to register the item's DOM element.\n   */\n  refCallback: (element: HTMLElement | null) => void;\n}\n\nexport interface BaseListContextProps {\n  /**\n   * The index of the currently focused/active item.\n   */\n  activeItemIndex: number;\n  /**\n   * Callback to update the focused item by id and index.\n   */\n  updateFocusedItem: (id: string, index: number) => void;\n  /**\n   * Register an item ref for keyboard navigation.\n   */\n  registerItem: (ref: HTMLElement | null, index: number) => void;\n  /**\n   * The size of items in the list.\n   */\n  size?: BaseListSizes;\n}\n\nexport interface BaseListProviderProps {\n  value: BaseListContextProps;\n  children: ReactNode;\n}\n\nexport interface BaseListItemProviderProps {\n  value: BaseListItemContextProps;\n  children: ReactNode;\n}\n\nconst defaultListContextValue: BaseListContextProps = {\n  activeItemIndex: -1,\n  updateFocusedItem: NOOP,\n  registerItem: NOOP,\n  size: \"medium\"\n};\n\nconst BaseListContext = createContext<BaseListContextProps>(defaultListContextValue);\nconst BaseListItemContext = createContext<BaseListItemContextProps | undefined>(undefined);\n\nexport const BaseListProvider = ({ value, children }: BaseListProviderProps) => {\n  return <BaseListContext.Provider value={value}>{children}</BaseListContext.Provider>;\n};\n\nexport const BaseListItemProvider = ({ value, children }: BaseListItemProviderProps) => {\n  return <BaseListItemContext.Provider value={value}>{children}</BaseListItemContext.Provider>;\n};\n\nexport const useBaseList = (): BaseListContextProps => {\n  return useContext(BaseListContext);\n};\n\nexport const useBaseListItem = (): BaseListItemContextProps | undefined => {\n  return useContext(BaseListItemContext);\n};\n"],"names":["BaseListContext","createContext","activeItemIndex","updateFocusedItem","NOOP","registerItem","size","BaseListItemContext","undefined","BaseListProvider","_ref","React","createElement","Provider","value","children","BaseListItemProvider","_ref2","useBaseList","useContext","useBaseListItem"],"mappings":"gIAoEA,IAOMA,EAAkBC,EAP8B,CACpDC,iBAAkB,EAClBC,kBAAmBC,EACnBC,aAAcD,EACdE,KAAM,WAIFC,EAAsBN,OAAoDO,GAEnEC,EAAmB,SAAHC,GAC3B,OAAOC,EAAAC,cAACZ,EAAgBa,SAAQ,CAACC,MADKJ,EAALI,OAAeJ,EAARK,SAE1C,EAEaC,EAAuB,SAAHC,GAC/B,OAAON,EAAAC,cAACL,EAAoBM,SAAQ,CAACC,MADKG,EAALH,OAAeG,EAARF,SAE9C,EAEaG,EAAc,WACzB,OAAOC,EAAWnB,EACpB,EAEaoB,EAAkB,WAC7B,OAAOD,EAAWZ,EACpB"}

package/dist/src/components/BaseList/hooks/useBaseListKeyboard.js

@@ -1,2 +1,2 @@
-import{useCallback as e}from"react";import r from"../../../hooks/useKeyEvent/index.js";import{keyCodes as t}from"../../../constants/keyCodes.js";import{findLastFocusableIndex as a,findFirstFocusableIndex as n,findAdjacentFocusableIndex as o,getItemId as i,isFocusableListItem as f}from"../utils/baseListUtils.js";var s=[t.UP_ARROW,t.DOWN_ARROW,t.HOME,t.END,t.PAGE_UP,t.PAGE_DOWN],u=function(u){var v=u.focusIndex,c=u.childrenRefs,d=u.listId,l=u.updateFocusedItem,p=u.componentRef,m=u.disabled,D=e((function(e){if(!m){var r,s=c.current;switch(e.key){case t.UP_ARROW:e.preventDefault(),r=o(s,v,"prev");break;case t.DOWN_ARROW:e.preventDefault(),r=o(s,v,"next");break;case t.HOME:e.preventDefault(),-1===(r=n(s))&&(r=void 0);break;case t.END:e.preventDefault(),-1===(r=a(s))&&(r=void 0);break;case t.PAGE_UP:e.preventDefault(),r=function(e,r){for(var t=Math.max(0,r-10);r>t;t++)if(f(e[t]))return t;var a=n(e);return-1!==a?a:void 0}(s,v);break;case t.PAGE_DOWN:e.preventDefault(),r=function(e,r){for(var t=Math.min(e.length-1,r+10);t>r;t--)if(f(e[t]))return t;var n=a(e);return-1!==n?n:void 0}(s,v);break;default:return}if(void 0!==r){var u=s[r];if(u){var p=i(d,r,u.id);l(p,r),u.focus()}}}}),[v,c,d,l,m]);r({keys:s,callback:D,ref:p})};export{u as useBaseListKeyboard};
+import{useCallback as e}from"react";import{keyCodes as r}from"../../../constants/keyCodes.js";import{findLastFocusableIndex as t,findFirstFocusableIndex as a,findAdjacentFocusableIndex as n,getItemId as o,isFocusableListItem as i}from"../utils/baseListUtils.js";import{useKeyEvent as s}from"../../../../shared/dist/hooks/useKeyEvent.js";var f=[r.UP_ARROW,r.DOWN_ARROW,r.HOME,r.END,r.PAGE_UP,r.PAGE_DOWN],u=function(u){var v=u.focusIndex,c=u.childrenRefs,d=u.listId,l=u.updateFocusedItem,p=u.componentRef,m=u.disabled,D=e((function(e){if(!m){var s,f=c.current;switch(e.key){case r.UP_ARROW:e.preventDefault(),s=n(f,v,"prev");break;case r.DOWN_ARROW:e.preventDefault(),s=n(f,v,"next");break;case r.HOME:e.preventDefault(),-1===(s=a(f))&&(s=void 0);break;case r.END:e.preventDefault(),-1===(s=t(f))&&(s=void 0);break;case r.PAGE_UP:e.preventDefault(),s=function(e,r){for(var t=Math.max(0,r-10);r>t;t++)if(i(e[t]))return t;var n=a(e);return-1!==n?n:void 0}(f,v);break;case r.PAGE_DOWN:e.preventDefault(),s=function(e,r){for(var a=Math.min(e.length-1,r+10);a>r;a--)if(i(e[a]))return a;var n=t(e);return-1!==n?n:void 0}(f,v);break;default:return}if(void 0!==s){var u=f[s];if(u){var p=o(d,s,u.id);l(p,s),u.focus()}}}}),[v,c,d,l,m]);s({keys:f,callback:D,ref:p})};export{u as useBaseListKeyboard};
 //# sourceMappingURL=useBaseListKeyboard.js.map

package/dist/src/components/BaseList/hooks/useBaseListKeyboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBaseListKeyboard.js","sources":["../../../../../src/components/BaseList/hooks/useBaseListKeyboard.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport useKeyEvent from \"../../../hooks/useKeyEvent\";\nimport { keyCodes } from \"../../../constants/keyCodes\";\nimport {\n  findAdjacentFocusableIndex,\n  findFirstFocusableIndex,\n  findLastFocusableIndex,\n  getItemId,\n  isFocusableListItem\n} from \"../utils/baseListUtils\";\n\nexport interface UseBaseListKeyboardProps {\n  /**\n   * The index of the currently focused item.\n   */\n  focusIndex: number;\n  /**\n   * Ref array containing all item DOM elements.\n   */\n  childrenRefs: React.MutableRefObject<(HTMLElement | null)[]>;\n  /**\n   * The unique identifier for the list.\n   */\n  listId: string | undefined;\n  /**\n   * Callback to update the focused item.\n   */\n  updateFocusedItem: (itemId: string, index: number) => void;\n  /**\n   * Ref to the list container element.\n   */\n  componentRef: React.RefObject<HTMLElement>;\n  /**\n   * If true, disables keyboard navigation.\n   */\n  disabled: boolean;\n}\n\nconst NAVIGATION_KEYS: string[] = [\n  keyCodes.UP_ARROW,\n  keyCodes.DOWN_ARROW,\n  keyCodes.HOME,\n  keyCodes.END,\n  keyCodes.PAGE_UP,\n  keyCodes.PAGE_DOWN\n];\n\nconst PAGE_JUMP_SIZE = 10;\n\nconst findPageUpIndex = (refs: (HTMLElement | null)[], currentIndex: number): number | undefined => {\n  const targetIndex = Math.max(0, currentIndex - PAGE_JUMP_SIZE);\n\n  for (let i = targetIndex; i < currentIndex; i++) {\n    if (isFocusableListItem(refs[i])) {\n      return i;\n    }\n  }\n\n  const firstFocusableIndex = findFirstFocusableIndex(refs);\n  return firstFocusableIndex !== -1 ? firstFocusableIndex : undefined;\n};\n\nconst findPageDownIndex = (refs: (HTMLElement | null)[], currentIndex: number): number | undefined => {\n  const targetIndex = Math.min(refs.length - 1, currentIndex + PAGE_JUMP_SIZE);\n\n  for (let i = targetIndex; i > currentIndex; i--) {\n    if (isFocusableListItem(refs[i])) {\n      return i;\n    }\n  }\n\n  const lastFocusableIndex = findLastFocusableIndex(refs);\n  return lastFocusableIndex !== -1 ? lastFocusableIndex : undefined;\n};\n\nexport const useBaseListKeyboard = ({\n  focusIndex,\n  childrenRefs,\n  listId,\n  updateFocusedItem,\n  componentRef,\n  disabled\n}: UseBaseListKeyboardProps): void => {\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (disabled) return;\n\n      const { key } = event;\n      const refs = childrenRefs.current;\n      let newFocusIndex: number | undefined;\n\n      switch (key) {\n        case keyCodes.UP_ARROW:\n          event.preventDefault();\n          newFocusIndex = findAdjacentFocusableIndex(refs, focusIndex, \"prev\");\n          break;\n\n        case keyCodes.DOWN_ARROW:\n          event.preventDefault();\n          newFocusIndex = findAdjacentFocusableIndex(refs, focusIndex, \"next\");\n          break;\n\n        case keyCodes.HOME:\n          event.preventDefault();\n          newFocusIndex = findFirstFocusableIndex(refs);\n          if (newFocusIndex === -1) newFocusIndex = undefined;\n          break;\n\n        case keyCodes.END:\n          event.preventDefault();\n          newFocusIndex = findLastFocusableIndex(refs);\n          if (newFocusIndex === -1) newFocusIndex = undefined;\n          break;\n\n        case keyCodes.PAGE_UP:\n          event.preventDefault();\n          newFocusIndex = findPageUpIndex(refs, focusIndex);\n          break;\n\n        case keyCodes.PAGE_DOWN:\n          event.preventDefault();\n          newFocusIndex = findPageDownIndex(refs, focusIndex);\n          break;\n\n        default:\n          return;\n      }\n\n      if (newFocusIndex !== undefined) {\n        const element = refs[newFocusIndex];\n        if (element) {\n          const itemId = getItemId(listId, newFocusIndex, element.id);\n          updateFocusedItem(itemId, newFocusIndex);\n          element.focus();\n        }\n      }\n    },\n    [focusIndex, childrenRefs, listId, updateFocusedItem, disabled]\n  );\n\n  useKeyEvent({\n    keys: NAVIGATION_KEYS,\n    callback: onKeyDown,\n    ref: componentRef\n  });\n};\n"],"names":["NAVIGATION_KEYS","keyCodes","UP_ARROW","DOWN_ARROW","HOME","END","PAGE_UP","PAGE_DOWN","useBaseListKeyboard","_ref","focusIndex","childrenRefs","listId","updateFocusedItem","componentRef","disabled","onKeyDown","useCallback","event","newFocusIndex","refs","current","key","preventDefault","findAdjacentFocusableIndex","findFirstFocusableIndex","undefined","findLastFocusableIndex","currentIndex","i","Math","max","isFocusableListItem","firstFocusableIndex","findPageUpIndex","min","length","lastFocusableIndex","findPageDownIndex","element","itemId","getItemId","id","focus","useKeyEvent","keys","callback","ref"],"mappings":"yTAsCA,IAAMA,EAA4B,CAChCC,EAASC,SACTD,EAASE,WACTF,EAASG,KACTH,EAASI,IACTJ,EAASK,QACTL,EAASM,WA+BEC,EAAsB,SAAHC,GAOK,IANnCC,EAAUD,EAAVC,WACAC,EAAYF,EAAZE,aACAC,EAAMH,EAANG,OACAC,EAAiBJ,EAAjBI,kBACAC,EAAYL,EAAZK,aACAC,EAAQN,EAARM,SAEMC,EAAYC,GAChB,SAACC,GACC,IAAIH,EAAJ,CAEA,IAEII,EADEC,EAAOT,EAAaU,QAG1B,OAJgBH,EAARI,KAKN,KAAKrB,EAASC,SACZgB,EAAMK,iBACNJ,EAAgBK,EAA2BJ,EAAMV,EAAY,QAC7D,MAEF,KAAKT,EAASE,WACZe,EAAMK,iBACNJ,EAAgBK,EAA2BJ,EAAMV,EAAY,QAC7D,MAEF,KAAKT,EAASG,KACZc,EAAMK,kBAEiB,KADvBJ,EAAgBM,EAAwBL,MACdD,OAAgBO,GAC1C,MAEF,KAAKzB,EAASI,IACZa,EAAMK,kBAEiB,KADvBJ,EAAgBQ,EAAuBP,MACbD,OAAgBO,GAC1C,MAEF,KAAKzB,EAASK,QACZY,EAAMK,iBACNJ,EAnEc,SAACC,EAA8BQ,GAGrD,IAFA,IAESC,EAFWC,KAAKC,IAAI,EAAGH,EAHX,IAKSA,EAAJC,EAAkBA,IAC1C,GAAIG,EAAoBZ,EAAKS,IAC3B,OAAOA,EAIX,IAAMI,EAAsBR,EAAwBL,GACpD,OAAgC,IAAzBa,EAA6BA,OAAsBP,CAC5D,CAwD0BQ,CAAgBd,EAAMV,GACtC,MAEF,KAAKT,EAASM,UACZW,EAAMK,iBACNJ,EA3DgB,SAACC,EAA8BQ,GAGvD,IAFA,IAESC,EAFWC,KAAKK,IAAIf,EAAKgB,OAAS,EAAGR,EAhBzB,IAkBKC,EAAID,EAAcC,IAC1C,GAAIG,EAAoBZ,EAAKS,IAC3B,OAAOA,EAIX,IAAMQ,EAAqBV,EAAuBP,GAClD,OAA+B,IAAxBiB,EAA4BA,OAAqBX,CAC1D,CAgD0BY,CAAkBlB,EAAMV,GACxC,MAEF,QACE,OAGJ,QAAsBgB,IAAlBP,EAA6B,CAC/B,IAAMoB,EAAUnB,EAAKD,GACrB,GAAIoB,EAAS,CACX,IAAMC,EAASC,EAAU7B,EAAQO,EAAeoB,EAAQG,IACxD7B,EAAkB2B,EAAQrB,GAC1BoB,EAAQI,OACV,CACF,CAlDc,CAmDhB,GACA,CAACjC,EAAYC,EAAcC,EAAQC,EAAmBE,IAGxD6B,EAAY,CACVC,KAAM7C,EACN8C,SAAU9B,EACV+B,IAAKjC,GAET"}
+{"version":3,"file":"useBaseListKeyboard.js","sources":["../../../../../src/components/BaseList/hooks/useBaseListKeyboard.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport useKeyEvent from \"../../../hooks/useKeyEvent\";\nimport { keyCodes } from \"../../../constants/keyCodes\";\nimport {\n  findAdjacentFocusableIndex,\n  findFirstFocusableIndex,\n  findLastFocusableIndex,\n  getItemId,\n  isFocusableListItem\n} from \"../utils/baseListUtils\";\n\nexport interface UseBaseListKeyboardProps {\n  /**\n   * The index of the currently focused item.\n   */\n  focusIndex: number;\n  /**\n   * Ref array containing all item DOM elements.\n   */\n  childrenRefs: React.MutableRefObject<(HTMLElement | null)[]>;\n  /**\n   * The unique identifier for the list.\n   */\n  listId: string | undefined;\n  /**\n   * Callback to update the focused item.\n   */\n  updateFocusedItem: (itemId: string, index: number) => void;\n  /**\n   * Ref to the list container element.\n   */\n  componentRef: React.RefObject<HTMLElement>;\n  /**\n   * If true, disables keyboard navigation.\n   */\n  disabled: boolean;\n}\n\nconst NAVIGATION_KEYS: string[] = [\n  keyCodes.UP_ARROW,\n  keyCodes.DOWN_ARROW,\n  keyCodes.HOME,\n  keyCodes.END,\n  keyCodes.PAGE_UP,\n  keyCodes.PAGE_DOWN\n];\n\nconst PAGE_JUMP_SIZE = 10;\n\nconst findPageUpIndex = (refs: (HTMLElement | null)[], currentIndex: number): number | undefined => {\n  const targetIndex = Math.max(0, currentIndex - PAGE_JUMP_SIZE);\n\n  for (let i = targetIndex; i < currentIndex; i++) {\n    if (isFocusableListItem(refs[i])) {\n      return i;\n    }\n  }\n\n  const firstFocusableIndex = findFirstFocusableIndex(refs);\n  return firstFocusableIndex !== -1 ? firstFocusableIndex : undefined;\n};\n\nconst findPageDownIndex = (refs: (HTMLElement | null)[], currentIndex: number): number | undefined => {\n  const targetIndex = Math.min(refs.length - 1, currentIndex + PAGE_JUMP_SIZE);\n\n  for (let i = targetIndex; i > currentIndex; i--) {\n    if (isFocusableListItem(refs[i])) {\n      return i;\n    }\n  }\n\n  const lastFocusableIndex = findLastFocusableIndex(refs);\n  return lastFocusableIndex !== -1 ? lastFocusableIndex : undefined;\n};\n\nexport const useBaseListKeyboard = ({\n  focusIndex,\n  childrenRefs,\n  listId,\n  updateFocusedItem,\n  componentRef,\n  disabled\n}: UseBaseListKeyboardProps): void => {\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (disabled) return;\n\n      const { key } = event;\n      const refs = childrenRefs.current;\n      let newFocusIndex: number | undefined;\n\n      switch (key) {\n        case keyCodes.UP_ARROW:\n          event.preventDefault();\n          newFocusIndex = findAdjacentFocusableIndex(refs, focusIndex, \"prev\");\n          break;\n\n        case keyCodes.DOWN_ARROW:\n          event.preventDefault();\n          newFocusIndex = findAdjacentFocusableIndex(refs, focusIndex, \"next\");\n          break;\n\n        case keyCodes.HOME:\n          event.preventDefault();\n          newFocusIndex = findFirstFocusableIndex(refs);\n          if (newFocusIndex === -1) newFocusIndex = undefined;\n          break;\n\n        case keyCodes.END:\n          event.preventDefault();\n          newFocusIndex = findLastFocusableIndex(refs);\n          if (newFocusIndex === -1) newFocusIndex = undefined;\n          break;\n\n        case keyCodes.PAGE_UP:\n          event.preventDefault();\n          newFocusIndex = findPageUpIndex(refs, focusIndex);\n          break;\n\n        case keyCodes.PAGE_DOWN:\n          event.preventDefault();\n          newFocusIndex = findPageDownIndex(refs, focusIndex);\n          break;\n\n        default:\n          return;\n      }\n\n      if (newFocusIndex !== undefined) {\n        const element = refs[newFocusIndex];\n        if (element) {\n          const itemId = getItemId(listId, newFocusIndex, element.id);\n          updateFocusedItem(itemId, newFocusIndex);\n          element.focus();\n        }\n      }\n    },\n    [focusIndex, childrenRefs, listId, updateFocusedItem, disabled]\n  );\n\n  useKeyEvent({\n    keys: NAVIGATION_KEYS,\n    callback: onKeyDown,\n    ref: componentRef\n  });\n};\n"],"names":["NAVIGATION_KEYS","keyCodes","UP_ARROW","DOWN_ARROW","HOME","END","PAGE_UP","PAGE_DOWN","useBaseListKeyboard","_ref","focusIndex","childrenRefs","listId","updateFocusedItem","componentRef","disabled","onKeyDown","useCallback","event","newFocusIndex","refs","current","key","preventDefault","findAdjacentFocusableIndex","findFirstFocusableIndex","undefined","findLastFocusableIndex","currentIndex","i","Math","max","isFocusableListItem","firstFocusableIndex","findPageUpIndex","min","length","lastFocusableIndex","findPageDownIndex","element","itemId","getItemId","id","focus","useKeyEvent","keys","callback","ref"],"mappings":"iVAsCA,IAAMA,EAA4B,CAChCC,EAASC,SACTD,EAASE,WACTF,EAASG,KACTH,EAASI,IACTJ,EAASK,QACTL,EAASM,WA+BEC,EAAsB,SAAHC,GAOK,IANnCC,EAAUD,EAAVC,WACAC,EAAYF,EAAZE,aACAC,EAAMH,EAANG,OACAC,EAAiBJ,EAAjBI,kBACAC,EAAYL,EAAZK,aACAC,EAAQN,EAARM,SAEMC,EAAYC,GAChB,SAACC,GACC,IAAIH,EAAJ,CAEA,IAEII,EADEC,EAAOT,EAAaU,QAG1B,OAJgBH,EAARI,KAKN,KAAKrB,EAASC,SACZgB,EAAMK,iBACNJ,EAAgBK,EAA2BJ,EAAMV,EAAY,QAC7D,MAEF,KAAKT,EAASE,WACZe,EAAMK,iBACNJ,EAAgBK,EAA2BJ,EAAMV,EAAY,QAC7D,MAEF,KAAKT,EAASG,KACZc,EAAMK,kBAEiB,KADvBJ,EAAgBM,EAAwBL,MACdD,OAAgBO,GAC1C,MAEF,KAAKzB,EAASI,IACZa,EAAMK,kBAEiB,KADvBJ,EAAgBQ,EAAuBP,MACbD,OAAgBO,GAC1C,MAEF,KAAKzB,EAASK,QACZY,EAAMK,iBACNJ,EAnEc,SAACC,EAA8BQ,GAGrD,IAFA,IAESC,EAFWC,KAAKC,IAAI,EAAGH,EAHX,IAKSA,EAAJC,EAAkBA,IAC1C,GAAIG,EAAoBZ,EAAKS,IAC3B,OAAOA,EAIX,IAAMI,EAAsBR,EAAwBL,GACpD,OAAgC,IAAzBa,EAA6BA,OAAsBP,CAC5D,CAwD0BQ,CAAgBd,EAAMV,GACtC,MAEF,KAAKT,EAASM,UACZW,EAAMK,iBACNJ,EA3DgB,SAACC,EAA8BQ,GAGvD,IAFA,IAESC,EAFWC,KAAKK,IAAIf,EAAKgB,OAAS,EAAGR,EAhBzB,IAkBKC,EAAID,EAAcC,IAC1C,GAAIG,EAAoBZ,EAAKS,IAC3B,OAAOA,EAIX,IAAMQ,EAAqBV,EAAuBP,GAClD,OAA+B,IAAxBiB,EAA4BA,OAAqBX,CAC1D,CAgD0BY,CAAkBlB,EAAMV,GACxC,MAEF,QACE,OAGJ,QAAsBgB,IAAlBP,EAA6B,CAC/B,IAAMoB,EAAUnB,EAAKD,GACrB,GAAIoB,EAAS,CACX,IAAMC,EAASC,EAAU7B,EAAQO,EAAeoB,EAAQG,IACxD7B,EAAkB2B,EAAQrB,GAC1BoB,EAAQI,OACV,CACF,CAlDc,CAmDhB,GACA,CAACjC,EAAYC,EAAcC,EAAQC,EAAmBE,IAGxD6B,EAAY,CACVC,KAAM7C,EACN8C,SAAU9B,EACV+B,IAAKjC,GAET"}

package/dist/src/components/ButtonGroup/ButtonGroup.js

@@ -1,2 +1,2 @@
-import{slicedToArray as t,defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as i,useRef as r,useState as l,useCallback as a,useMemo as n,useEffect as s}from"react";import{camelCase as d}from"es-toolkit";import u from"classnames";import{getStyle as p}from"../../helpers/typesciptCssModulesHelper.js";import c from"../../hooks/usePrevious/index.js";import m from"../../hooks/useMergeRef.js";import{ButtonWrapper as f}from"./ButtonWrapper.js";import{getTestId as v}from"../../tests/testIds.js";import{ComponentDefaultTestId as b,ComponentVibeId as h}from"../../tests/constants.js";import y from"./ButtonGroup.module.scss.js";var B=i((function(i,B){var C=i.className,k=i.options,T=i.name,g=void 0===T?"":T,j=i.disabled,N=void 0!==j&&j,x=i.value,P=void 0===x?"":x,M=i.onSelect,O=i.size,U=void 0===O?"small":O,D=i.kind,S=void 0===D?"secondary":D,W=i.groupAriaLabel,E=void 0===W?"":W,G=i.tooltipPosition,H=i.tooltipHideDelay,I=i.tooltipShowDelay,_=i.tooltipContainerSelector,A=i.tooltipMoveBy,R=i.blurOnMouseUp,w=void 0===R||R,z=i.id,F=i["data-testid"],L=i.fullWidth,q=void 0!==L&&L,J=r(),K=m(B,J),Q=l(P),V=t(Q,2),X=V[0],Y=V[1],Z=c(P),$=a((function(t){N||t.disabled||(Y(t.value),M&&M(t.value,g))}),[M,N,g]),tt=function(t){return(null==t?void 0:t.value)===X},et=n((function(){return k.find((function(t){return tt(t)}))}),[k,X]),ot=n((function(){return k.map((function(t,i){var r=tt(t),l=0===i,a=i===k.length-1,n=tt(k[i+1]);return o.createElement(f,{key:t.value,size:U,onClick:function(){return $(t)},rightIcon:t.icon,leftIcon:t.leftIcon,active:r,rightFlat:i!==k.length-1,leftFlat:0!==i,kind:"tertiary",preventClickAnimation:!0,"aria-label":t["aria-label"],tooltipContent:t.tooltipContent,tooltipPosition:G,tooltipHideDelay:H,tooltipShowDelay:I,tooltipContainerSelector:_,tooltipMoveBy:A,blurOnMouseUp:w,fullWidth:q,className:u(y.button,y.optionText,e(e(e(e(e(e({},y.selected,r),y.disabled,N),y.buttonDisabled,t.disabled),y.fullWidth,q),y.startBorder,l),y.endBorder,a||!n)),activeButtonClassName:y.activeButton},t.text)}))}),[k,X,U,G,H,I,_,A,w,N,q,$]);return s((function(){P!==Z&&P!==X&&Y(P)}),[P,Z,X,Y]),o.createElement("div",{className:u(y.buttonGroup,C,p(y,d("kind-"+S)),e({},y.disabled,N)),id:z,"data-testid":F||v(b.BUTTON_GROUP,z),"data-vibe":h.BUTTON_GROUP,ref:K},o.createElement("div",{role:"group","aria-label":E,className:u(y.buttonsContainer,e({},y.fullWidth,q)),"aria-disabled":N},ot),et&&et.subText&&o.createElement("div",{className:u(y.subTextContainer)},et.subText))}));export{B as default};
+import{slicedToArray as t,defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as i,useRef as r,useState as l,useCallback as a,useMemo as n,useEffect as s}from"react";import{camelCase as d}from"es-toolkit";import u from"classnames";import p from"../../hooks/usePrevious/index.js";import{ButtonWrapper as c}from"./ButtonWrapper.js";import{getTestId as m}from"../../tests/testIds.js";import{ComponentDefaultTestId as f,ComponentVibeId as v}from"../../tests/constants.js";import b from"./ButtonGroup.module.scss.js";import{useMergeRef as h}from"../../../shared/dist/hooks/useMergeRef.js";import{getStyle as y}from"../../../shared/dist/utils/typesciptCssModulesHelper.js";var B=i((function(i,B){var C=i.className,k=i.options,T=i.name,g=void 0===T?"":T,j=i.disabled,N=void 0!==j&&j,x=i.value,P=void 0===x?"":x,M=i.onSelect,O=i.size,U=void 0===O?"small":O,D=i.kind,S=void 0===D?"secondary":D,W=i.groupAriaLabel,E=void 0===W?"":W,G=i.tooltipPosition,H=i.tooltipHideDelay,I=i.tooltipShowDelay,_=i.tooltipContainerSelector,A=i.tooltipMoveBy,R=i.blurOnMouseUp,w=void 0===R||R,z=i.id,F=i["data-testid"],L=i.fullWidth,q=void 0!==L&&L,J=r(),K=h(B,J),Q=l(P),V=t(Q,2),X=V[0],Y=V[1],Z=p(P),$=a((function(t){N||t.disabled||(Y(t.value),M&&M(t.value,g))}),[M,N,g]),tt=function(t){return(null==t?void 0:t.value)===X},et=n((function(){return k.find((function(t){return tt(t)}))}),[k,X]),ot=n((function(){return k.map((function(t,i){var r=tt(t),l=0===i,a=i===k.length-1,n=tt(k[i+1]);return o.createElement(c,{key:t.value,size:U,onClick:function(){return $(t)},rightIcon:t.icon,leftIcon:t.leftIcon,active:r,rightFlat:i!==k.length-1,leftFlat:0!==i,kind:"tertiary",preventClickAnimation:!0,"aria-label":t["aria-label"],tooltipContent:t.tooltipContent,tooltipPosition:G,tooltipHideDelay:H,tooltipShowDelay:I,tooltipContainerSelector:_,tooltipMoveBy:A,blurOnMouseUp:w,fullWidth:q,className:u(b.button,b.optionText,e(e(e(e(e(e({},b.selected,r),b.disabled,N),b.buttonDisabled,t.disabled),b.fullWidth,q),b.startBorder,l),b.endBorder,a||!n)),activeButtonClassName:b.activeButton},t.text)}))}),[k,X,U,G,H,I,_,A,w,N,q,$]);return s((function(){P!==Z&&P!==X&&Y(P)}),[P,Z,X,Y]),o.createElement("div",{className:u(b.buttonGroup,C,y(b,d("kind-"+S)),e({},b.disabled,N)),id:z,"data-testid":F||m(f.BUTTON_GROUP,z),"data-vibe":v.BUTTON_GROUP,ref:K},o.createElement("div",{role:"group","aria-label":E,className:u(b.buttonsContainer,e({},b.fullWidth,q)),"aria-disabled":N},ot),et&&et.subText&&o.createElement("div",{className:u(b.subTextContainer)},et.subText))}));export{B as default};
 //# sourceMappingURL=ButtonGroup.js.map