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

package/dist/src/components/Menu/MenuItemButton/MenuItemButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItemButton.js","sources":["../../../../../src/components/Menu/MenuItemButton/MenuItemButton.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { useRef } from \"react\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport { Button, type ButtonType } from \"@vibe/button\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\nimport useMenuItemMouseEvents from \"../MenuItem/hooks/useMenuItemMouseEvents\";\nimport useMenuItemKeyboardEvents from \"../MenuItem/hooks/useMenuItemKeyboardEvents\";\nimport { type VibeComponentProps, type ElementContent } from \"../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport { Text } from \"@vibe/typography\";\nimport styles from \"./MenuItemButton.module.scss\";\nimport { type TooltipPositions } from \"@vibe/tooltip\";\n\nexport interface MenuItemButtonProps extends VibeComponentProps {\n  /**\n   * The style variant of the button.\n   */\n  kind?: ButtonType;\n  /**\n   * Icon displayed on the left side of the button.\n   */\n  leftIcon?: SubIcon;\n  /**\n   * Icon displayed on the right side of the button.\n   */\n  rightIcon?: SubIcon;\n  /**\n   * The index of the menu item in the menu.\n   */\n  index?: number;\n  /**\n   * The index of the currently active menu item.\n   */\n  activeItemIndex?: number;\n  /**\n   * If true, the button is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The reason why the button is disabled, displayed as a tooltip.\n   */\n  disableReason?: string;\n  /**\n   * Callback fired when the button is clicked.\n   */\n  onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n  /**\n   * The position of the tooltip.\n   */\n  tooltipPosition?: TooltipPositions;\n  /**\n   * The delay in milliseconds before the tooltip appears.\n   */\n  tooltipShowDelay?: number;\n  /**\n   * Callback to reset the open submenu index.\n   */\n  resetOpenSubMenuIndex?: () => void;\n  /**\n   * Callback to open or close a submenu by index.\n   */\n  setSubMenuIsOpenByIndex?: (index: number, isOpen: boolean) => void;\n  /**\n   * Callback to set the active item index.\n   */\n  setActiveItemIndex?: (index: number) => void;\n  /**\n   * Reference to the menu container.\n   */\n  menuRef?: React.RefObject<HTMLElement>;\n  /**\n   * Function to close the menu.\n   */\n  closeMenu?: () => void;\n  /**\n   * If true, event listeners are added at the document level.\n   */\n  useDocumentEventListeners?: boolean;\n  /**\n   * The content of the button.\n   */\n  children?: ElementContent | ElementContent[];\n}\n\nconst MenuItemButton = ({\n  className,\n  kind = \"primary\",\n  leftIcon = null,\n  rightIcon = null,\n  disabled = false,\n  disableReason,\n  index,\n  activeItemIndex = -1,\n  onClick,\n  tooltipPosition = \"right\",\n  tooltipShowDelay = 300,\n  children,\n  resetOpenSubMenuIndex,\n  setSubMenuIsOpenByIndex,\n  setActiveItemIndex,\n  menuRef,\n  closeMenu,\n  useDocumentEventListeners,\n  id,\n  \"data-testid\": dataTestId\n}: MenuItemButtonProps) => {\n  const ref = useRef(null);\n  const referenceElementRef = useRef(null);\n  const mergedRef = useMergeRef(ref, referenceElementRef);\n\n  const shouldShowTooltip = disabled && disableReason;\n  const tooltipContent = disableReason;\n\n  const isActive = activeItemIndex === index;\n\n  const isMouseEnter = useMenuItemMouseEvents({\n    ref,\n    resetOpenSubMenuIndex,\n    setSubMenuIsOpenByIndex,\n    isActive,\n    setActiveItemIndex,\n    index,\n    hasChildren: false\n  });\n\n  const { onClickCallback } = useMenuItemKeyboardEvents({\n    onClick,\n    disabled,\n    isActive,\n    index,\n    setActiveItemIndex,\n    hasChildren: false,\n    shouldShowSubMenu: false,\n    setSubMenuIsOpenByIndex,\n    menuRef,\n    isMouseEnter,\n    closeMenu,\n    useDocumentEventListeners\n  });\n\n  return (\n    <Tooltip\n      content={shouldShowTooltip ? tooltipContent : null}\n      position={tooltipPosition}\n      showDelay={tooltipShowDelay}\n    >\n      <Text\n        type=\"text2\"\n        element=\"li\"\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MENU_ITEM_BUTTON, id)}\n        id={id}\n        className={cx(styles.itemButton, className)}\n        ref={mergedRef}\n        role=\"menuitem\"\n        aria-current={isActive}\n      >\n        <Button\n          className={styles.buttonComponent}\n          active={isActive}\n          disabled={disabled}\n          leftIcon={leftIcon}\n          rightIcon={rightIcon}\n          onClick={onClickCallback}\n          kind={kind}\n          size=\"small\"\n          blurOnMouseUp={false}\n        >\n          <div className={styles.content}>{children}</div>\n        </Button>\n      </Text>\n    </Tooltip>\n  );\n};\n\nObject.assign(MenuItemButton, {\n  isSelectable: true,\n  isMenuChild: true\n});\n\nexport default MenuItemButton;\n"],"names":["MenuItemButton","_ref","className","_ref$kind","kind","_ref$leftIcon","leftIcon","_ref$rightIcon","rightIcon","_ref$disabled","disabled","disableReason","index","_ref$activeItemIndex","activeItemIndex","onClick","_ref$tooltipPosition","tooltipPosition","_ref$tooltipShowDelay","tooltipShowDelay","children","resetOpenSubMenuIndex","setSubMenuIsOpenByIndex","setActiveItemIndex","menuRef","closeMenu","useDocumentEventListeners","id","dataTestId","ref","useRef","referenceElementRef","mergedRef","useMergeRef","shouldShowTooltip","tooltipContent","isActive","isMouseEnter","useMenuItemMouseEvents","hasChildren","onClickCallback","useMenuItemKeyboardEvents","shouldShowSubMenu","React","Tooltip","content","position","showDelay","createElement","Text","type","element","getTestId","ComponentDefaultTestId","MENU_ITEM_BUTTON","cx","styles","itemButton","role","Button","buttonComponent","active","size","blurOnMouseUp","Object","assign","isSelectable","isMenuChild"],"mappings":"+iBAqFA,IAAMA,EAAiB,SAAHC,GAqBM,IApBxBC,EAASD,EAATC,UAASC,EAAAF,EACTG,KAAAA,OAAO,IAAHD,EAAG,UAASA,EAAAE,EAAAJ,EAChBK,SAAAA,OAAW,IAAHD,EAAG,KAAIA,EAAAE,EAAAN,EACfO,UAAAA,OAAY,IAAHD,EAAG,KAAIA,EAAAE,EAAAR,EAChBS,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAAaV,EAAbU,cACAC,EAAKX,EAALW,MAAKC,EAAAZ,EACLa,gBAAAA,OAAe,IAAAD,GAAI,EAACA,EACpBE,EAAOd,EAAPc,QAAOC,EAAAf,EACPgB,gBAAAA,OAAkB,IAAHD,EAAG,QAAOA,EAAAE,EAAAjB,EACzBkB,iBAAAA,OAAmB,IAAHD,EAAG,IAAGA,EACtBE,EAAQnB,EAARmB,SACAC,EAAqBpB,EAArBoB,sBACAC,EAAuBrB,EAAvBqB,wBACAC,EAAkBtB,EAAlBsB,mBACAC,EAAOvB,EAAPuB,QACAC,EAASxB,EAATwB,UACAC,EAAyBzB,EAAzByB,0BACAC,EAAE1B,EAAF0B,GACeC,EAAU3B,EAAzB,eAEM4B,EAAMC,EAAO,MACbC,EAAsBD,EAAO,MAC7BE,EAAYC,EAAYJ,EAAKE,GAE7BG,EAAoBxB,GAAYC,EAChCwB,EAAiBxB,EAEjByB,EAAWtB,IAAoBF,EAE/ByB,EAAeC,EAAuB,CAC1CT,IAAAA,EACAR,sBAAAA,EACAC,wBAAAA,EACAc,SAAAA,EACAb,mBAAAA,EACAX,MAAAA,EACA2B,aAAa,IAGPC,EAAoBC,EAA0B,CACpD1B,QAAAA,EACAL,SAAAA,EACA0B,SAAAA,EACAxB,MAAAA,EACAW,mBAAAA,EACAgB,aAAa,EACbG,mBAAmB,EACnBpB,wBAAAA,EACAE,QAAAA,EACAa,aAAAA,EACAZ,UAAAA,EACAC,0BAAAA,IAZMc,gBAeR,OACEG,gBAACC,EAAO,CACNC,QAASX,EAAoBC,EAAiB,KAC9CW,SAAU7B,EACV8B,UAAW5B,GAEXwB,EAACK,cAAAC,GACCC,KAAK,QACLC,QAAQ,KAAI,cACCvB,GAAcwB,EAAUC,EAAuBC,iBAAkB3B,GAC9EA,GAAIA,EACJzB,UAAWqD,EAAGC,EAAOC,WAAYvD,GACjC2B,IAAKG,EACL0B,KAAK,0BACStB,GAEdO,EAAAK,cAACW,EACC,CAAAzD,UAAWsD,EAAOI,gBAClBC,OAAQzB,EACR1B,SAAUA,EACVJ,SAAUA,EACVE,UAAWA,EACXO,QAASyB,EACTpC,KAAMA,EACN0D,KAAK,QACLC,eAAe,GAEfpB,EAAAK,cAAA,MAAA,CAAK9C,UAAWsD,EAAOX,SAAUzB,KAK3C,EAEA4C,OAAOC,OAAOjE,EAAgB,CAC5BkE,cAAc,EACdC,aAAa"}
+{"version":3,"file":"MenuItemButton.js","sources":["../../../../../src/components/Menu/MenuItemButton/MenuItemButton.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { useRef } from \"react\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport { Button, type ButtonType } from \"@vibe/button\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport useMenuItemMouseEvents from \"../MenuItem/hooks/useMenuItemMouseEvents\";\nimport useMenuItemKeyboardEvents from \"../MenuItem/hooks/useMenuItemKeyboardEvents\";\nimport { type VibeComponentProps, type ElementContent } from \"../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport { Text } from \"@vibe/typography\";\nimport styles from \"./MenuItemButton.module.scss\";\nimport { type TooltipPositions } from \"@vibe/tooltip\";\n\nexport interface MenuItemButtonProps extends VibeComponentProps {\n  /**\n   * The style variant of the button.\n   */\n  kind?: ButtonType;\n  /**\n   * Icon displayed on the left side of the button.\n   */\n  leftIcon?: SubIcon;\n  /**\n   * Icon displayed on the right side of the button.\n   */\n  rightIcon?: SubIcon;\n  /**\n   * The index of the menu item in the menu.\n   */\n  index?: number;\n  /**\n   * The index of the currently active menu item.\n   */\n  activeItemIndex?: number;\n  /**\n   * If true, the button is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The reason why the button is disabled, displayed as a tooltip.\n   */\n  disableReason?: string;\n  /**\n   * Callback fired when the button is clicked.\n   */\n  onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n  /**\n   * The position of the tooltip.\n   */\n  tooltipPosition?: TooltipPositions;\n  /**\n   * The delay in milliseconds before the tooltip appears.\n   */\n  tooltipShowDelay?: number;\n  /**\n   * Callback to reset the open submenu index.\n   */\n  resetOpenSubMenuIndex?: () => void;\n  /**\n   * Callback to open or close a submenu by index.\n   */\n  setSubMenuIsOpenByIndex?: (index: number, isOpen: boolean) => void;\n  /**\n   * Callback to set the active item index.\n   */\n  setActiveItemIndex?: (index: number) => void;\n  /**\n   * Reference to the menu container.\n   */\n  menuRef?: React.RefObject<HTMLElement>;\n  /**\n   * Function to close the menu.\n   */\n  closeMenu?: () => void;\n  /**\n   * If true, event listeners are added at the document level.\n   */\n  useDocumentEventListeners?: boolean;\n  /**\n   * The content of the button.\n   */\n  children?: ElementContent | ElementContent[];\n}\n\nconst MenuItemButton = ({\n  className,\n  kind = \"primary\",\n  leftIcon = null,\n  rightIcon = null,\n  disabled = false,\n  disableReason,\n  index,\n  activeItemIndex = -1,\n  onClick,\n  tooltipPosition = \"right\",\n  tooltipShowDelay = 300,\n  children,\n  resetOpenSubMenuIndex,\n  setSubMenuIsOpenByIndex,\n  setActiveItemIndex,\n  menuRef,\n  closeMenu,\n  useDocumentEventListeners,\n  id,\n  \"data-testid\": dataTestId\n}: MenuItemButtonProps) => {\n  const ref = useRef(null);\n  const referenceElementRef = useRef(null);\n  const mergedRef = useMergeRef(ref, referenceElementRef);\n\n  const shouldShowTooltip = disabled && disableReason;\n  const tooltipContent = disableReason;\n\n  const isActive = activeItemIndex === index;\n\n  const isMouseEnter = useMenuItemMouseEvents({\n    ref,\n    resetOpenSubMenuIndex,\n    setSubMenuIsOpenByIndex,\n    isActive,\n    setActiveItemIndex,\n    index,\n    hasChildren: false\n  });\n\n  const { onClickCallback } = useMenuItemKeyboardEvents({\n    onClick,\n    disabled,\n    isActive,\n    index,\n    setActiveItemIndex,\n    hasChildren: false,\n    shouldShowSubMenu: false,\n    setSubMenuIsOpenByIndex,\n    menuRef,\n    isMouseEnter,\n    closeMenu,\n    useDocumentEventListeners\n  });\n\n  return (\n    <Tooltip\n      content={shouldShowTooltip ? tooltipContent : null}\n      position={tooltipPosition}\n      showDelay={tooltipShowDelay}\n    >\n      <Text\n        type=\"text2\"\n        element=\"li\"\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MENU_ITEM_BUTTON, id)}\n        id={id}\n        className={cx(styles.itemButton, className)}\n        ref={mergedRef}\n        role=\"menuitem\"\n        aria-current={isActive}\n      >\n        <Button\n          className={styles.buttonComponent}\n          active={isActive}\n          disabled={disabled}\n          leftIcon={leftIcon}\n          rightIcon={rightIcon}\n          onClick={onClickCallback}\n          kind={kind}\n          size=\"small\"\n          blurOnMouseUp={false}\n        >\n          <div className={styles.content}>{children}</div>\n        </Button>\n      </Text>\n    </Tooltip>\n  );\n};\n\nObject.assign(MenuItemButton, {\n  isSelectable: true,\n  isMenuChild: true\n});\n\nexport default MenuItemButton;\n"],"names":["MenuItemButton","_ref","className","_ref$kind","kind","_ref$leftIcon","leftIcon","_ref$rightIcon","rightIcon","_ref$disabled","disabled","disableReason","index","_ref$activeItemIndex","activeItemIndex","onClick","_ref$tooltipPosition","tooltipPosition","_ref$tooltipShowDelay","tooltipShowDelay","children","resetOpenSubMenuIndex","setSubMenuIsOpenByIndex","setActiveItemIndex","menuRef","closeMenu","useDocumentEventListeners","id","dataTestId","ref","useRef","referenceElementRef","mergedRef","useMergeRef","shouldShowTooltip","tooltipContent","isActive","isMouseEnter","useMenuItemMouseEvents","hasChildren","onClickCallback","useMenuItemKeyboardEvents","shouldShowSubMenu","React","Tooltip","content","position","showDelay","createElement","Text","type","element","getTestId","ComponentDefaultTestId","MENU_ITEM_BUTTON","cx","styles","itemButton","role","Button","buttonComponent","active","size","blurOnMouseUp","Object","assign","isSelectable","isMenuChild"],"mappings":"6kBAqFA,IAAMA,EAAiB,SAAHC,GAqBM,IApBxBC,EAASD,EAATC,UAASC,EAAAF,EACTG,KAAAA,OAAO,IAAHD,EAAG,UAASA,EAAAE,EAAAJ,EAChBK,SAAAA,OAAW,IAAHD,EAAG,KAAIA,EAAAE,EAAAN,EACfO,UAAAA,OAAY,IAAHD,EAAG,KAAIA,EAAAE,EAAAR,EAChBS,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAAaV,EAAbU,cACAC,EAAKX,EAALW,MAAKC,EAAAZ,EACLa,gBAAAA,OAAe,IAAAD,GAAI,EAACA,EACpBE,EAAOd,EAAPc,QAAOC,EAAAf,EACPgB,gBAAAA,OAAkB,IAAHD,EAAG,QAAOA,EAAAE,EAAAjB,EACzBkB,iBAAAA,OAAmB,IAAHD,EAAG,IAAGA,EACtBE,EAAQnB,EAARmB,SACAC,EAAqBpB,EAArBoB,sBACAC,EAAuBrB,EAAvBqB,wBACAC,EAAkBtB,EAAlBsB,mBACAC,EAAOvB,EAAPuB,QACAC,EAASxB,EAATwB,UACAC,EAAyBzB,EAAzByB,0BACAC,EAAE1B,EAAF0B,GACeC,EAAU3B,EAAzB,eAEM4B,EAAMC,EAAO,MACbC,EAAsBD,EAAO,MAC7BE,EAAYC,EAAYJ,EAAKE,GAE7BG,EAAoBxB,GAAYC,EAChCwB,EAAiBxB,EAEjByB,EAAWtB,IAAoBF,EAE/ByB,EAAeC,EAAuB,CAC1CT,IAAAA,EACAR,sBAAAA,EACAC,wBAAAA,EACAc,SAAAA,EACAb,mBAAAA,EACAX,MAAAA,EACA2B,aAAa,IAGPC,EAAoBC,EAA0B,CACpD1B,QAAAA,EACAL,SAAAA,EACA0B,SAAAA,EACAxB,MAAAA,EACAW,mBAAAA,EACAgB,aAAa,EACbG,mBAAmB,EACnBpB,wBAAAA,EACAE,QAAAA,EACAa,aAAAA,EACAZ,UAAAA,EACAC,0BAAAA,IAZMc,gBAeR,OACEG,gBAACC,EAAO,CACNC,QAASX,EAAoBC,EAAiB,KAC9CW,SAAU7B,EACV8B,UAAW5B,GAEXwB,EAACK,cAAAC,GACCC,KAAK,QACLC,QAAQ,KAAI,cACCvB,GAAcwB,EAAUC,EAAuBC,iBAAkB3B,GAC9EA,GAAIA,EACJzB,UAAWqD,EAAGC,EAAOC,WAAYvD,GACjC2B,IAAKG,EACL0B,KAAK,0BACStB,GAEdO,EAAAK,cAACW,EACC,CAAAzD,UAAWsD,EAAOI,gBAClBC,OAAQzB,EACR1B,SAAUA,EACVJ,SAAUA,EACVE,UAAWA,EACXO,QAASyB,EACTpC,KAAMA,EACN0D,KAAK,QACLC,eAAe,GAEfpB,EAAAK,cAAA,MAAA,CAAK9C,UAAWsD,EAAOX,SAAUzB,KAK3C,EAEA4C,OAAOC,OAAOjE,EAAgB,CAC5BkE,cAAc,EACdC,aAAa"}

package/dist/src/components/Menu/MenuTitle/MenuTitle.js

@@ -1,2 +1,2 @@
-import t from"react";import e from"classnames";import{camelCase as o}from"es-toolkit";import{getStyle as s}from"../../../helpers/typesciptCssModulesHelper.js";import{getTestId as i,ComponentDefaultTestId as a}from"../../../tests/testIds.js";import r from"./MenuTitle.module.scss.js";import m from"../../../../components/typography/dist/Text/Text.js";var l=function(l){var n=l.caption,p=void 0===n?"":n,c=l.captionPosition,d=void 0===c?"bottom":c,f=l.id,u=l["data-testid"];return t.createElement(m,{color:"secondary",type:"text2",className:e(r.title,l.className),"data-testid":u||i(a.MENU_TITLE,f)},function(){if(p)return t.createElement("label",{className:e(r.titleCaption,s(r,o("title__caption--"+d))),id:f,"data-testid":u||i(a.MENU_TITLE_CAPTION,f)},p)}())};Object.assign(l,{isMenuChild:!0});export{l as default};
+import t from"react";import e from"classnames";import{camelCase as s}from"es-toolkit";import{getTestId as o,ComponentDefaultTestId as i}from"../../../tests/testIds.js";import a from"./MenuTitle.module.scss.js";import r from"../../../../components/typography/dist/Text/Text.js";import{getStyle as m}from"../../../../shared/dist/utils/typesciptCssModulesHelper.js";var l=function(l){var n=l.caption,d=void 0===n?"":n,p=l.captionPosition,c=void 0===p?"bottom":p,f=l.id,u=l["data-testid"];return t.createElement(r,{color:"secondary",type:"text2",className:e(a.title,l.className),"data-testid":u||o(i.MENU_TITLE,f)},function(){if(d)return t.createElement("label",{className:e(a.titleCaption,m(a,s("title__caption--"+c))),id:f,"data-testid":u||o(i.MENU_TITLE_CAPTION,f)},d)}())};Object.assign(l,{isMenuChild:!0});export{l as default};
 //# sourceMappingURL=MenuTitle.js.map

package/dist/src/components/Menu/MenuTitle/MenuTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuTitle.js","sources":["../../../../../src/components/Menu/MenuTitle/MenuTitle.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport { Text } from \"@vibe/typography\";\nimport { type MenuTitleCaptionPosition } from \"./MenuTitle.type\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport styles from \"./MenuTitle.module.scss\";\n\nexport interface MenuTitleProps extends VibeComponentProps {\n  /**\n   * The caption text displayed alongside the title.\n   */\n  caption?: string | React.ReactNode;\n  /**\n   * The position of the caption relative to the title.\n   */\n  captionPosition?: MenuTitleCaptionPosition;\n}\n\nconst MenuTitle = ({\n  className,\n  caption = \"\",\n  captionPosition = \"bottom\",\n  id,\n  \"data-testid\": dataTestId\n}: MenuTitleProps) => {\n  const renderCaptionIfNeeded = () => {\n    if (caption) {\n      return (\n        <label\n          className={cx(styles.titleCaption, getStyle(styles, camelCase(\"title__caption--\" + captionPosition)))}\n          id={id}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.MENU_TITLE_CAPTION, id)}\n        >\n          {caption}\n        </label>\n      );\n    }\n  };\n  return (\n    <Text\n      color=\"secondary\"\n      type=\"text2\"\n      className={cx(styles.title, className)}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.MENU_TITLE, id)}\n    >\n      {renderCaptionIfNeeded()}\n    </Text>\n  );\n};\n\nObject.assign(MenuTitle, {\n  isMenuChild: true\n});\n\nexport default MenuTitle;\n"],"names":["MenuTitle","_ref","_ref$caption","caption","_ref$captionPosition","captionPosition","id","dataTestId","React","createElement","Text","color","type","className","cx","styles","title","getTestId","ComponentDefaultTestId","MENU_TITLE","titleCaption","getStyle","camelCase","MENU_TITLE_CAPTION","renderCaptionIfNeeded","Object","assign","isMenuChild"],"mappings":"8VAqBA,IAAMA,EAAY,SAAHC,GAMM,IALVC,EAAAD,EACTE,QAAAA,OAAU,IAAHD,EAAG,GAAEA,EAAAE,EAAAH,EACZI,gBAAAA,OAAkB,IAAHD,EAAG,SAAQA,EAC1BE,EAAEL,EAAFK,GACeC,EAAUN,EAAzB,eAeA,OACEO,EAACC,cAAAC,EACC,CAAAC,MAAM,YACNC,KAAK,QACLC,UAAWC,EAAGC,EAAOC,MAvBhBf,EAATY,WAwBiB,cAAAN,GAAcU,EAAUC,EAAuBC,WAAYb,IAlB9C,WAC5B,GAAIH,EACF,OACEK,EACEC,cAAA,QAAA,CAAAI,UAAWC,EAAGC,EAAOK,aAAcC,EAASN,EAAQO,EAAU,mBAAqBjB,KACnFC,GAAIA,EACS,cAAAC,GAAcU,EAAUC,EAAuBK,mBAAoBjB,IAE/EH,GAYJqB,GAGP,EAEAC,OAAOC,OAAO1B,EAAW,CACvB2B,aAAa"}
+{"version":3,"file":"MenuTitle.js","sources":["../../../../../src/components/Menu/MenuTitle/MenuTitle.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"@vibe/shared\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport { Text } from \"@vibe/typography\";\nimport { type MenuTitleCaptionPosition } from \"./MenuTitle.type\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport styles from \"./MenuTitle.module.scss\";\n\nexport interface MenuTitleProps extends VibeComponentProps {\n  /**\n   * The caption text displayed alongside the title.\n   */\n  caption?: string | React.ReactNode;\n  /**\n   * The position of the caption relative to the title.\n   */\n  captionPosition?: MenuTitleCaptionPosition;\n}\n\nconst MenuTitle = ({\n  className,\n  caption = \"\",\n  captionPosition = \"bottom\",\n  id,\n  \"data-testid\": dataTestId\n}: MenuTitleProps) => {\n  const renderCaptionIfNeeded = () => {\n    if (caption) {\n      return (\n        <label\n          className={cx(styles.titleCaption, getStyle(styles, camelCase(\"title__caption--\" + captionPosition)))}\n          id={id}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.MENU_TITLE_CAPTION, id)}\n        >\n          {caption}\n        </label>\n      );\n    }\n  };\n  return (\n    <Text\n      color=\"secondary\"\n      type=\"text2\"\n      className={cx(styles.title, className)}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.MENU_TITLE, id)}\n    >\n      {renderCaptionIfNeeded()}\n    </Text>\n  );\n};\n\nObject.assign(MenuTitle, {\n  isMenuChild: true\n});\n\nexport default MenuTitle;\n"],"names":["MenuTitle","_ref","_ref$caption","caption","_ref$captionPosition","captionPosition","id","dataTestId","React","createElement","Text","color","type","className","cx","styles","title","getTestId","ComponentDefaultTestId","MENU_TITLE","titleCaption","getStyle","camelCase","MENU_TITLE_CAPTION","renderCaptionIfNeeded","Object","assign","isMenuChild"],"mappings":"2WAqBA,IAAMA,EAAY,SAAHC,GAMM,IALVC,EAAAD,EACTE,QAAAA,OAAU,IAAHD,EAAG,GAAEA,EAAAE,EAAAH,EACZI,gBAAAA,OAAkB,IAAHD,EAAG,SAAQA,EAC1BE,EAAEL,EAAFK,GACeC,EAAUN,EAAzB,eAeA,OACEO,EAACC,cAAAC,EACC,CAAAC,MAAM,YACNC,KAAK,QACLC,UAAWC,EAAGC,EAAOC,MAvBhBf,EAATY,WAwBiB,cAAAN,GAAcU,EAAUC,EAAuBC,WAAYb,IAlB9C,WAC5B,GAAIH,EACF,OACEK,EACEC,cAAA,QAAA,CAAAI,UAAWC,EAAGC,EAAOK,aAAcC,EAASN,EAAQO,EAAU,mBAAqBjB,KACnFC,GAAIA,EACS,cAAAC,GAAcU,EAAUC,EAAuBK,mBAAoBjB,IAE/EH,GAYJqB,GAGP,EAEAC,OAAOC,OAAO1B,EAAW,CACvB2B,aAAa"}

package/dist/src/components/MenuButton/MenuButton.js

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as i,useRef as n,useState as r,useCallback as s,useMemo as a}from"react";import l from"classnames";import{camelCase as d}from"es-toolkit";import{isForwardRef as c}from"react-is";import u from"../../hooks/ssr/useIsomorphicLayoutEffect.js";import m from"../../hooks/useMergeRef.js";import{NOOP as p}from"../../utils/function-utils.js";import{getStyle as g}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as f,ComponentDefaultTestId as v}from"../../tests/testIds.js";import h from"./MenuButton.module.scss.js";import{ComponentVibeId as C}from"../../tests/constants.js";import T from"../../../components/dialog/dist/DialogContentContainer/DialogContentContainer.js";import b from"../../../components/dialog/dist/Dialog/Dialog.js";import y from"../../../components/tooltip/dist/Tooltip/Tooltip.js";import j from"../../../icons/dist/react/Menu.js";var M={main:8,secondary:0},O=["esckey","tab"],E=i((function(i,E){var k=i.id,w=i.className,x=i.openDialogComponentClassName,I=i.children,N=i.component,D=void 0===N?j:N,H=i.componentPosition,P=void 0===H?"start":H,S=i.size,z=void 0===S?"small":S,B=i.open,R=void 0!==B&&B,U=i.onClick,A=void 0===U?p:U,W=i.zIndex,_=void 0===W?null:W,F=i["aria-label"],q=void 0===F?"Menu":F,L=i.closeMenuOnItemClick,V=i.dialogOffset,G=void 0===V?M:V,J=i.dialogPosition,K=void 0===J?"bottom-start":J,Q=i.dialogClassName,X=i.dialogPaddingSize,Y=void 0===X?"small":X,Z=i.dialogShowTriggerIgnoreClass,$=i.dialogHideTriggerIgnoreClass,ee=i.onMenuHide,oe=void 0===ee?p:ee,te=i.onMenuShow,ie=void 0===te?p:te,ne=i.disabled,re=void 0!==ne&&ne,se=i.text,ae=i.tooltipContent,le=i.tooltipProps,de=i.tooltipTriggers,ce=void 0===de?["mouseleave"]:de,ue=i.tooltipPosition,me=void 0===ue?"right":ue,pe=i.startingEdge,ge=void 0===pe?"bottom":pe,fe=i.removeTabCloseTrigger,ve=void 0!==fe&&fe,he=i.tooltipReferenceClassName,Ce=i.hideWhenReferenceHidden,Te=void 0===Ce||Ce,be=i.dialogContainerSelector,ye=i.active,je=i.triggerElement,Me=void 0===je?"button":je,Oe=i.showTooltipOnlyOnTriggerElement,Ee=i["data-testid"],ke=i.closeDialogOnContentClick,we=void 0!==ke&&ke,xe=i["aria-controls"],Ie=n(null),Ne=m(E,Ie),De=r(R),He=e(De,2),Pe=He[0],Se=He[1],ze=null!=ye?ye:Pe,Be=s((function(e){oe(),Se(!1);var o=Ie.current;o&&e&&window.requestAnimationFrame((function(){o.focus()}))}),[oe]),Re=s((function(e){var o=O.includes(e.key);(o||L)&&e.propagate&&Be(o)}),[L,Be]),Ue=s((function(e,o){Be(Pe&&O.includes(o))}),[Be,Pe]),Ae=s((function(){Se(!0),ie()}),[Se,ie]),We=a((function(){var e=new Set(["clickoutside","tab","esckey"]);return we&&(e.add("onContentClick"),e.add("enter")),ve&&e.delete("tab"),[t.Children.toArray(I).map((function(o){if(!t.isValidElement(o))return null;var i={};return o.type&&o.type.supportFocusOnMount&&(i.focusOnMount=!0,void 0===o.props.focusItemIndexOnMount&&(i.focusItemIndexOnMount=0),e.delete("esckey")),o.type&&o.type.isMenu&&(i.onClose=Re),t.cloneElement(o,i)})),Array.from(e)]}),[I,Re,we,ve]),_e=e(We,2),Fe=_e[0],qe=_e[1],Le=a((function(){return 0===Fe.length?null:t.createElement(T,{size:Y,type:"popover",role:null},Fe)}),[Fe,Y]),Ve=a((function(){return Object.assign(Object.assign({},M),G)}),[G]),Ge=D,Je=a((function(){switch(z){case"xxs":case"xs":return 16;case"small":case"medium":case"large":return 20;default:return 24}}),[z]),Ke=Ge?t.createElement(Ge,{size:""+Je,role:"img","aria-hidden":"true"}):null;u((function(){Se(R)}),[R,Se]);var Qe="button"===Me?{ref:Ne}:{active:ze,disabled:re,ref:c(Me)?Ne:void 0},Xe=t.createElement(Me,Object.assign({id:k,"data-testid":Ee||f(v.MENU_BUTTON,k),"data-vibe":C.MENU_BUTTON,type:"button",className:l(h.wrapper,w,g(h,d("size-".concat(z))),o(o(o(o({},h.active,ze),g(h,x),Pe&&x),h.disabled,re),h.text,se)),"aria-haspopup":"true","aria-expanded":Pe,"aria-controls":xe,"aria-label":!se&&q,onMouseUp:function(e){re?e.currentTarget.blur():A(e)},"aria-disabled":re},Qe),"start"===P&&Ke,se&&t.createElement("span",{className:h.innerText},se),"end"===P&&Ke),Ye=function(e){return t.createElement(b,{wrapperClassName:Q,position:K,containerSelector:be,startingEdge:ge,animationType:"expand",content:Le,moveBy:Ve,showTrigger:re?[]:["click","enter"],hideTrigger:qe,showTriggerIgnoreClass:Z,hideTriggerIgnoreClass:$,useDerivedStateFromProps:!0,onDialogDidShow:Ae,onDialogDidHide:Ue,zIndex:_,isOpen:Pe,hideWhenReferenceHidden:Te},e)},Ze=function(e){return t.createElement(y,Object.assign({content:ae,position:me,showTrigger:"mouseenter",hideTrigger:ce,referenceWrapperClassName:he,hideWhenReferenceHidden:Te},le),e)};return Oe?Ye(Ze(Xe)):Ze(Ye(Xe))}));export{E as default};
+import{slicedToArray as e,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as i,useRef as n,useState as r,useCallback as s,useMemo as a}from"react";import l from"classnames";import{camelCase as d}from"es-toolkit";import{isForwardRef as c}from"react-is";import{getTestId as u,ComponentDefaultTestId as m}from"../../tests/testIds.js";import p from"./MenuButton.module.scss.js";import{ComponentVibeId as g}from"../../tests/constants.js";import f from"../../../components/dialog/dist/DialogContentContainer/DialogContentContainer.js";import{useIsomorphicLayoutEffect as v}from"../../../shared/dist/hooks/ssr/useIsomorphicLayoutEffect.js";import h from"../../../components/dialog/dist/Dialog/Dialog.js";import C from"../../../components/tooltip/dist/Tooltip/Tooltip.js";import T from"../../../icons/dist/react/Menu.js";import{useMergeRef as b}from"../../../shared/dist/hooks/useMergeRef.js";import{getStyle as y}from"../../../shared/dist/utils/typesciptCssModulesHelper.js";import{NOOP as j}from"../../../shared/dist/utils/function-utils.js";var M={main:8,secondary:0},O=["esckey","tab"],E=i((function(i,E){var k=i.id,w=i.className,x=i.openDialogComponentClassName,I=i.children,N=i.component,D=void 0===N?T:N,H=i.componentPosition,P=void 0===H?"start":H,S=i.size,z=void 0===S?"small":S,B=i.open,R=void 0!==B&&B,U=i.onClick,A=void 0===U?j:U,W=i.zIndex,_=void 0===W?null:W,F=i["aria-label"],q=void 0===F?"Menu":F,L=i.closeMenuOnItemClick,V=i.dialogOffset,G=void 0===V?M:V,J=i.dialogPosition,K=void 0===J?"bottom-start":J,Q=i.dialogClassName,X=i.dialogPaddingSize,Y=void 0===X?"small":X,Z=i.dialogShowTriggerIgnoreClass,$=i.dialogHideTriggerIgnoreClass,ee=i.onMenuHide,oe=void 0===ee?j:ee,te=i.onMenuShow,ie=void 0===te?j:te,ne=i.disabled,re=void 0!==ne&&ne,se=i.text,ae=i.tooltipContent,le=i.tooltipProps,de=i.tooltipTriggers,ce=void 0===de?["mouseleave"]:de,ue=i.tooltipPosition,me=void 0===ue?"right":ue,pe=i.startingEdge,ge=void 0===pe?"bottom":pe,fe=i.removeTabCloseTrigger,ve=void 0!==fe&&fe,he=i.tooltipReferenceClassName,Ce=i.hideWhenReferenceHidden,Te=void 0===Ce||Ce,be=i.dialogContainerSelector,ye=i.active,je=i.triggerElement,Me=void 0===je?"button":je,Oe=i.showTooltipOnlyOnTriggerElement,Ee=i["data-testid"],ke=i.closeDialogOnContentClick,we=void 0!==ke&&ke,xe=i["aria-controls"],Ie=n(null),Ne=b(E,Ie),De=r(R),He=e(De,2),Pe=He[0],Se=He[1],ze=null!=ye?ye:Pe,Be=s((function(e){oe(),Se(!1);var o=Ie.current;o&&e&&window.requestAnimationFrame((function(){o.focus()}))}),[oe]),Re=s((function(e){var o=O.includes(e.key);(o||L)&&e.propagate&&Be(o)}),[L,Be]),Ue=s((function(e,o){Be(Pe&&O.includes(o))}),[Be,Pe]),Ae=s((function(){Se(!0),ie()}),[Se,ie]),We=a((function(){var e=new Set(["clickoutside","tab","esckey"]);return we&&(e.add("onContentClick"),e.add("enter")),ve&&e.delete("tab"),[t.Children.toArray(I).map((function(o){if(!t.isValidElement(o))return null;var i={};return o.type&&o.type.supportFocusOnMount&&(i.focusOnMount=!0,void 0===o.props.focusItemIndexOnMount&&(i.focusItemIndexOnMount=0),e.delete("esckey")),o.type&&o.type.isMenu&&(i.onClose=Re),t.cloneElement(o,i)})),Array.from(e)]}),[I,Re,we,ve]),_e=e(We,2),Fe=_e[0],qe=_e[1],Le=a((function(){return 0===Fe.length?null:t.createElement(f,{size:Y,type:"popover",role:null},Fe)}),[Fe,Y]),Ve=a((function(){return Object.assign(Object.assign({},M),G)}),[G]),Ge=D,Je=a((function(){switch(z){case"xxs":case"xs":return 16;case"small":case"medium":case"large":return 20;default:return 24}}),[z]),Ke=Ge?t.createElement(Ge,{size:""+Je,role:"img","aria-hidden":"true"}):null;v((function(){Se(R)}),[R,Se]);var Qe="button"===Me?{ref:Ne}:{active:ze,disabled:re,ref:c(Me)?Ne:void 0},Xe=t.createElement(Me,Object.assign({id:k,"data-testid":Ee||u(m.MENU_BUTTON,k),"data-vibe":g.MENU_BUTTON,type:"button",className:l(p.wrapper,w,y(p,d("size-".concat(z))),o(o(o(o({},p.active,ze),y(p,x),Pe&&x),p.disabled,re),p.text,se)),"aria-haspopup":"true","aria-expanded":Pe,"aria-controls":xe,"aria-label":!se&&q,onMouseUp:function(e){re?e.currentTarget.blur():A(e)},"aria-disabled":re},Qe),"start"===P&&Ke,se&&t.createElement("span",{className:p.innerText},se),"end"===P&&Ke),Ye=function(e){return t.createElement(h,{wrapperClassName:Q,position:K,containerSelector:be,startingEdge:ge,animationType:"expand",content:Le,moveBy:Ve,showTrigger:re?[]:["click","enter"],hideTrigger:qe,showTriggerIgnoreClass:Z,hideTriggerIgnoreClass:$,useDerivedStateFromProps:!0,onDialogDidShow:Ae,onDialogDidHide:Ue,zIndex:_,isOpen:Pe,hideWhenReferenceHidden:Te},e)},Ze=function(e){return t.createElement(C,Object.assign({content:ae,position:me,showTrigger:"mouseenter",hideTrigger:ce,referenceWrapperClassName:he,hideWhenReferenceHidden:Te},le),e)};return Oe?Ye(Ze(Xe)):Ze(Ye(Xe))}));export{E as default};
 //# sourceMappingURL=MenuButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.js","sources":["../../../../src/components/MenuButton/MenuButton.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport { isForwardRef } from \"react-is\";\nimport { Dialog, type DialogEvent, DialogContentContainer } from \"@vibe/dialog\";\nimport {\n  type DialogOffset,\n  type DialogPosition,\n  type DialogSize,\n  type DialogStartingEdge,\n  type DialogTriggerEvent\n} from \"@vibe/dialog\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport useIsomorphicLayoutEffect from \"../../hooks/ssr/useIsomorphicLayoutEffect\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { type ElementContent, type VibeComponentProps } from \"../../types\";\nimport { type MenuButtonComponentPosition, type MenuButtonSize } from \"./MenuButton.types\";\nimport { type MenuChild } from \"../Menu/Menu/MenuConstants\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { Menu } from \"@vibe/icons\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./MenuButton.module.scss\";\nimport { type TooltipPositions } from \"@vibe/tooltip\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst MOVE_BY = { main: 8, secondary: 0 };\nconst CLOSE_KEYS: DialogTriggerEvent[] = [\"esckey\", \"tab\"];\n\nexport interface MenuButtonProps extends VibeComponentProps {\n  /**\n   * If true, the button is in an active state.\n   */\n  active?: boolean;\n  /**\n   * Class name applied to the button when the dialog is open.\n   */\n  openDialogComponentClassName?: string;\n  /**\n   * The component used as the button icon.\n   */\n  component?: (() => JSX.Element) | React.ElementType;\n  /**\n   * The size of the button.\n   */\n  size?: MenuButtonSize;\n  /**\n   * If true, the menu is open.\n   */\n  open?: boolean;\n  /**\n   * Callback fired when the button is clicked.\n   */\n  onClick?: (event: React.MouseEvent) => void;\n  /**\n   * The z-index of the menu.\n   */\n  zIndex?: number;\n  /**\n   * The label of the button for accessibility.\n   */\n  \"aria-label\"?: string;\n  /**\n   * Class name applied to the menu dialog wrapper.\n   */\n  dialogClassName?: string;\n  /**\n   * The offset of the menu relative to the button.\n   */\n  dialogOffset?: DialogOffset;\n  /**\n   * The padding size inside the menu dialog.\n   */\n  dialogPaddingSize?: DialogSize;\n  /**\n   * The position of the menu dialog relative to the button.\n   */\n  dialogPosition?: DialogPosition;\n  /**\n   * Classes that prevent showing the dialog when present.\n   */\n  dialogShowTriggerIgnoreClass?: string | Array<string>;\n  /**\n   * Classes that prevent hiding the dialog when present.\n   */\n  dialogHideTriggerIgnoreClass?: string | Array<string>;\n  /**\n   * The container selector in which to append the dialog.\n   */\n  dialogContainerSelector?: string;\n  /**\n   * The starting edge alignment of the menu.\n   */\n  startingEdge?: DialogStartingEdge;\n  /**\n   * Callback fired when the menu is shown.\n   */\n  onMenuShow?: () => void;\n  /**\n   * Callback fired when the menu is hidden.\n   */\n  onMenuHide?: () => void;\n  /**\n   * The text displayed inside the button.\n   */\n  text?: string;\n  /**\n   * If true, the button is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The tooltip content displayed when hovering over the button.\n   */\n  tooltipContent?: string;\n  /**\n   * If true, removes the tab key from the hide trigger.\n   */\n  removeTabCloseTrigger?: boolean;\n  /**\n   * The triggers that cause the tooltip to show or hide.\n   */\n  tooltipTriggers?: DialogTriggerEvent | DialogTriggerEvent[];\n  /**\n   * The position of the tooltip.\n   */\n  tooltipPosition?: TooltipPositions;\n  /**\n   * Class name applied to the tooltip reference wrapper.\n   */\n  tooltipReferenceClassName?: string;\n  /**\n   * Additional props for customizing the tooltip.\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * If true, hides the menu and tooltip when the button is not visible.\n   */\n  hideWhenReferenceHidden?: boolean;\n  /**\n   * The content inside the menu button.\n   */\n  children?: ElementContent;\n  /**\n   * The position of the component relative to the text.\n   */\n  componentPosition?: MenuButtonComponentPosition;\n  /**\n   * The element used as the trigger for the menu.\n   */\n  triggerElement?: React.ElementType;\n  /**\n   * If true, closes the menu when a menu item is clicked.\n   */\n  closeMenuOnItemClick?: boolean;\n  /**\n   * If true, the tooltip appears only when hovering over the trigger element, not the menu dialog.\n   */\n  showTooltipOnlyOnTriggerElement?: boolean;\n  /**\n   * If true, closes the menu when clicking inside the dialog.\n   */\n  closeDialogOnContentClick?: boolean;\n  /**\n   * The ARIA control of the menu button for accessibility.\n   */\n  \"aria-controls\"?: string;\n}\n\nconst MenuButton = forwardRef(\n  (\n    {\n      id,\n      className,\n      openDialogComponentClassName,\n      children,\n      component = Menu,\n      componentPosition = \"start\",\n      size = \"small\",\n      open = false,\n      onClick = NOOP,\n      zIndex = null,\n      \"aria-label\": ariaLabel = \"Menu\",\n      closeMenuOnItemClick,\n      dialogOffset = MOVE_BY,\n      dialogPosition = \"bottom-start\",\n      dialogClassName,\n      dialogPaddingSize = \"small\",\n      dialogShowTriggerIgnoreClass,\n      dialogHideTriggerIgnoreClass,\n      onMenuHide = NOOP,\n      onMenuShow = NOOP,\n      disabled = false,\n      text,\n      tooltipContent,\n      tooltipProps,\n      tooltipTriggers = [\"mouseleave\"],\n      tooltipPosition = \"right\",\n      startingEdge = \"bottom\",\n      removeTabCloseTrigger = false,\n      tooltipReferenceClassName,\n      hideWhenReferenceHidden = true,\n      dialogContainerSelector,\n      active,\n      triggerElement: TriggerElement = \"button\",\n      showTooltipOnlyOnTriggerElement,\n      \"data-testid\": dataTestId,\n      closeDialogOnContentClick = false,\n      \"aria-controls\": ariaControls\n    }: MenuButtonProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [isOpen, setIsOpen] = useState(open);\n    const isActive = active ?? isOpen;\n\n    const handleMenuClose = useCallback(\n      (focusOnMenuButtonAfterClose: boolean) => {\n        onMenuHide();\n        setIsOpen(false);\n        const button = componentRef.current;\n        if (!button || !focusOnMenuButtonAfterClose) {\n          return;\n        }\n        window.requestAnimationFrame(() => {\n          button.focus();\n        });\n      },\n      [onMenuHide]\n    );\n\n    const onMenuDidClose = useCallback(\n      (event: React.KeyboardEvent) => {\n        // TODO: check the functionality of the isEscapeKey since the event is not an actual KeyboardEVent but an object with propagate property only\n        const isCloseKey = CLOSE_KEYS.includes(event.key as DialogTriggerEvent);\n        if (isCloseKey || closeMenuOnItemClick) {\n          // @ts-ignore\n          if (event.propagate) {\n            handleMenuClose(isCloseKey);\n          }\n        }\n      },\n      [closeMenuOnItemClick, handleMenuClose]\n    );\n\n    const onDialogDidHide = useCallback(\n      (event: DialogEvent, hideEvent: string) => {\n        handleMenuClose(isOpen && CLOSE_KEYS.includes(hideEvent as DialogTriggerEvent));\n      },\n      [handleMenuClose, isOpen]\n    );\n\n    const onDialogDidShow = useCallback(() => {\n      setIsOpen(true);\n      onMenuShow();\n    }, [setIsOpen, onMenuShow]);\n\n    const [clonedChildren, hideTrigger] = useMemo(() => {\n      const triggers = new Set<DialogTriggerEvent>([\"clickoutside\", \"tab\", \"esckey\"]);\n\n      if (closeDialogOnContentClick) {\n        triggers.add(\"onContentClick\");\n        triggers.add(\"enter\");\n      }\n\n      if (removeTabCloseTrigger) {\n        triggers.delete(\"tab\");\n      }\n      const childrenArr = React.Children.toArray(children) as MenuChild[];\n      const cloned = childrenArr.map(child => {\n        if (!React.isValidElement(child)) return null;\n\n        const newProps: {\n          focusOnMount?: boolean;\n          focusItemIndexOnMount?: number;\n          onClose?: (event: React.KeyboardEvent) => void;\n        } = {};\n        if (child.type && child.type.supportFocusOnMount) {\n          newProps.focusOnMount = true;\n          if (child.props.focusItemIndexOnMount === undefined) {\n            newProps.focusItemIndexOnMount = 0;\n          }\n          triggers.delete(\"esckey\");\n        }\n\n        if (child.type && child.type.isMenu) {\n          newProps.onClose = onMenuDidClose;\n        }\n\n        return React.cloneElement(child, newProps);\n      });\n      return [cloned, Array.from(triggers)];\n    }, [children, onMenuDidClose, closeDialogOnContentClick, removeTabCloseTrigger]);\n\n    const content = useMemo(() => {\n      if (clonedChildren.length === 0) return null;\n      return (\n        <DialogContentContainer size={dialogPaddingSize} type=\"popover\" role={null}>\n          {clonedChildren}\n        </DialogContentContainer>\n      );\n    }, [clonedChildren, dialogPaddingSize]);\n\n    const computedDialogOffset = useMemo(\n      () => ({\n        ...MOVE_BY,\n        ...dialogOffset\n      }),\n      [dialogOffset]\n    );\n\n    const onMouseUp = (event: React.MouseEvent<HTMLElement>) => {\n      if (disabled) {\n        event.currentTarget.blur();\n        return;\n      }\n      onClick(event);\n    };\n\n    const Icon = component;\n    const iconSize = useMemo(() => {\n      switch (size) {\n        case \"xxs\":\n        case \"xs\":\n          return 16;\n        case \"small\":\n        case \"medium\":\n        case \"large\":\n          return 20;\n        default:\n          return 24;\n      }\n    }, [size]);\n    const icon = Icon ? <Icon size={iconSize.toString()} role=\"img\" aria-hidden=\"true\" /> : null;\n\n    useIsomorphicLayoutEffect(() => {\n      setIsOpen(open);\n    }, [open, setIsOpen]);\n\n    // Trigger element props, which are only relevant for \"button\" element, but might be needed for other elements e.g. Button\n    const triggerElementProps =\n      TriggerElement === \"button\"\n        ? {\n            ref: mergedRef\n          }\n        : {\n            active: isActive,\n            disabled: disabled,\n            ref: isForwardRef(TriggerElement) ? mergedRef : undefined\n          };\n\n    const triggerElementNode = (\n      <TriggerElement\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MENU_BUTTON, id)}\n        data-vibe={ComponentVibeId.MENU_BUTTON}\n        type=\"button\"\n        className={cx(styles.wrapper, className, getStyle(styles, camelCase(`size-${size}`)), {\n          [styles.active]: isActive,\n          [getStyle(styles, openDialogComponentClassName)]: isOpen && openDialogComponentClassName,\n          [styles.disabled]: disabled,\n          [styles.text]: text\n        })}\n        aria-haspopup=\"true\"\n        aria-expanded={isOpen}\n        aria-controls={ariaControls}\n        aria-label={!text && ariaLabel}\n        onMouseUp={onMouseUp}\n        aria-disabled={disabled}\n        {...triggerElementProps}\n      >\n        {componentPosition === \"start\" && icon}\n        {text && <span className={styles.innerText}>{text}</span>}\n        {componentPosition === \"end\" && icon}\n      </TriggerElement>\n    );\n\n    const dialogNode = (dialogChildren: React.ReactElement) => (\n      <Dialog\n        wrapperClassName={dialogClassName}\n        position={dialogPosition}\n        containerSelector={dialogContainerSelector}\n        startingEdge={startingEdge}\n        animationType=\"expand\"\n        content={content}\n        moveBy={computedDialogOffset}\n        showTrigger={disabled ? [] : [\"click\", \"enter\"]}\n        hideTrigger={hideTrigger}\n        showTriggerIgnoreClass={dialogShowTriggerIgnoreClass}\n        hideTriggerIgnoreClass={dialogHideTriggerIgnoreClass}\n        useDerivedStateFromProps={true}\n        onDialogDidShow={onDialogDidShow}\n        onDialogDidHide={onDialogDidHide}\n        zIndex={zIndex}\n        isOpen={isOpen}\n        hideWhenReferenceHidden={hideWhenReferenceHidden}\n      >\n        {dialogChildren}\n      </Dialog>\n    );\n\n    const tooltipNode = (tooltipChildren: React.ReactElement) => (\n      <Tooltip\n        content={tooltipContent}\n        position={tooltipPosition}\n        showTrigger=\"mouseenter\"\n        hideTrigger={tooltipTriggers}\n        referenceWrapperClassName={tooltipReferenceClassName}\n        hideWhenReferenceHidden={hideWhenReferenceHidden}\n        {...tooltipProps}\n      >\n        {tooltipChildren}\n      </Tooltip>\n    );\n\n    if (showTooltipOnlyOnTriggerElement) {\n      return dialogNode(tooltipNode(triggerElementNode));\n    }\n    return tooltipNode(dialogNode(triggerElementNode));\n  }\n);\n\nexport default MenuButton;\n"],"names":["MOVE_BY","main","secondary","CLOSE_KEYS","MenuButton","forwardRef","_ref","ref","id","className","openDialogComponentClassName","children","_ref$component","component","Menu","_ref$componentPositio","componentPosition","_ref$size","size","_ref$open","open","_ref$onClick","onClick","NOOP","_ref$zIndex","zIndex","_ref$ariaLabel","ariaLabel","closeMenuOnItemClick","_ref$dialogOffset","dialogOffset","_ref$dialogPosition","dialogPosition","dialogClassName","_ref$dialogPaddingSiz","dialogPaddingSize","dialogShowTriggerIgnoreClass","dialogHideTriggerIgnoreClass","_ref$onMenuHide","onMenuHide","_ref$onMenuShow","onMenuShow","_ref$disabled","disabled","text","tooltipContent","tooltipProps","_ref$tooltipTriggers","tooltipTriggers","_ref$tooltipPosition","tooltipPosition","_ref$startingEdge","startingEdge","_ref$removeTabCloseTr","removeTabCloseTrigger","tooltipReferenceClassName","_ref$hideWhenReferenc","hideWhenReferenceHidden","dialogContainerSelector","active","_ref$triggerElement","triggerElement","TriggerElement","showTooltipOnlyOnTriggerElement","dataTestId","_ref$closeDialogOnCon","closeDialogOnContentClick","ariaControls","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","isOpen","setIsOpen","isActive","handleMenuClose","useCallback","focusOnMenuButtonAfterClose","button","current","window","requestAnimationFrame","focus","onMenuDidClose","event","isCloseKey","includes","key","propagate","onDialogDidHide","hideEvent","onDialogDidShow","_useMemo","useMemo","triggers","Set","add","delete","React","Children","toArray","map","child","isValidElement","newProps","type","supportFocusOnMount","focusOnMount","undefined","props","focusItemIndexOnMount","isMenu","onClose","cloneElement","Array","from","_useMemo2","clonedChildren","hideTrigger","content","length","createElement","DialogContentContainer","role","computedDialogOffset","Object","assign","Icon","iconSize","icon","useIsomorphicLayoutEffect","triggerElementProps","isForwardRef","triggerElementNode","getTestId","ComponentDefaultTestId","MENU_BUTTON","ComponentVibeId","cx","styles","wrapper","getStyle","camelCase","concat","_defineProperty","onMouseUp","currentTarget","blur","innerText","dialogNode","dialogChildren","Dialog","wrapperClassName","position","containerSelector","animationType","moveBy","showTrigger","showTriggerIgnoreClass","hideTriggerIgnoreClass","useDerivedStateFromProps","tooltipNode","tooltipChildren","Tooltip","referenceWrapperClassName"],"mappings":"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"}
+{"version":3,"file":"MenuButton.js","sources":["../../../../src/components/MenuButton/MenuButton.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport { isForwardRef } from \"react-is\";\nimport { Dialog, type DialogEvent, DialogContentContainer } from \"@vibe/dialog\";\nimport {\n  type DialogOffset,\n  type DialogPosition,\n  type DialogSize,\n  type DialogStartingEdge,\n  type DialogTriggerEvent\n} from \"@vibe/dialog\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { useIsomorphicLayoutEffect, useMergeRef, NOOP, getStyle } from \"@vibe/shared\";\n\nimport { type ElementContent, type VibeComponentProps } from \"../../types\";\nimport { type MenuButtonComponentPosition, type MenuButtonSize } from \"./MenuButton.types\";\nimport { type MenuChild } from \"../Menu/Menu/MenuConstants\";\n\nimport { Menu } from \"@vibe/icons\";\n\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./MenuButton.module.scss\";\nimport { type TooltipPositions } from \"@vibe/tooltip\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst MOVE_BY = { main: 8, secondary: 0 };\nconst CLOSE_KEYS: DialogTriggerEvent[] = [\"esckey\", \"tab\"];\n\nexport interface MenuButtonProps extends VibeComponentProps {\n  /**\n   * If true, the button is in an active state.\n   */\n  active?: boolean;\n  /**\n   * Class name applied to the button when the dialog is open.\n   */\n  openDialogComponentClassName?: string;\n  /**\n   * The component used as the button icon.\n   */\n  component?: (() => JSX.Element) | React.ElementType;\n  /**\n   * The size of the button.\n   */\n  size?: MenuButtonSize;\n  /**\n   * If true, the menu is open.\n   */\n  open?: boolean;\n  /**\n   * Callback fired when the button is clicked.\n   */\n  onClick?: (event: React.MouseEvent) => void;\n  /**\n   * The z-index of the menu.\n   */\n  zIndex?: number;\n  /**\n   * The label of the button for accessibility.\n   */\n  \"aria-label\"?: string;\n  /**\n   * Class name applied to the menu dialog wrapper.\n   */\n  dialogClassName?: string;\n  /**\n   * The offset of the menu relative to the button.\n   */\n  dialogOffset?: DialogOffset;\n  /**\n   * The padding size inside the menu dialog.\n   */\n  dialogPaddingSize?: DialogSize;\n  /**\n   * The position of the menu dialog relative to the button.\n   */\n  dialogPosition?: DialogPosition;\n  /**\n   * Classes that prevent showing the dialog when present.\n   */\n  dialogShowTriggerIgnoreClass?: string | Array<string>;\n  /**\n   * Classes that prevent hiding the dialog when present.\n   */\n  dialogHideTriggerIgnoreClass?: string | Array<string>;\n  /**\n   * The container selector in which to append the dialog.\n   */\n  dialogContainerSelector?: string;\n  /**\n   * The starting edge alignment of the menu.\n   */\n  startingEdge?: DialogStartingEdge;\n  /**\n   * Callback fired when the menu is shown.\n   */\n  onMenuShow?: () => void;\n  /**\n   * Callback fired when the menu is hidden.\n   */\n  onMenuHide?: () => void;\n  /**\n   * The text displayed inside the button.\n   */\n  text?: string;\n  /**\n   * If true, the button is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The tooltip content displayed when hovering over the button.\n   */\n  tooltipContent?: string;\n  /**\n   * If true, removes the tab key from the hide trigger.\n   */\n  removeTabCloseTrigger?: boolean;\n  /**\n   * The triggers that cause the tooltip to show or hide.\n   */\n  tooltipTriggers?: DialogTriggerEvent | DialogTriggerEvent[];\n  /**\n   * The position of the tooltip.\n   */\n  tooltipPosition?: TooltipPositions;\n  /**\n   * Class name applied to the tooltip reference wrapper.\n   */\n  tooltipReferenceClassName?: string;\n  /**\n   * Additional props for customizing the tooltip.\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * If true, hides the menu and tooltip when the button is not visible.\n   */\n  hideWhenReferenceHidden?: boolean;\n  /**\n   * The content inside the menu button.\n   */\n  children?: ElementContent;\n  /**\n   * The position of the component relative to the text.\n   */\n  componentPosition?: MenuButtonComponentPosition;\n  /**\n   * The element used as the trigger for the menu.\n   */\n  triggerElement?: React.ElementType;\n  /**\n   * If true, closes the menu when a menu item is clicked.\n   */\n  closeMenuOnItemClick?: boolean;\n  /**\n   * If true, the tooltip appears only when hovering over the trigger element, not the menu dialog.\n   */\n  showTooltipOnlyOnTriggerElement?: boolean;\n  /**\n   * If true, closes the menu when clicking inside the dialog.\n   */\n  closeDialogOnContentClick?: boolean;\n  /**\n   * The ARIA control of the menu button for accessibility.\n   */\n  \"aria-controls\"?: string;\n}\n\nconst MenuButton = forwardRef(\n  (\n    {\n      id,\n      className,\n      openDialogComponentClassName,\n      children,\n      component = Menu,\n      componentPosition = \"start\",\n      size = \"small\",\n      open = false,\n      onClick = NOOP,\n      zIndex = null,\n      \"aria-label\": ariaLabel = \"Menu\",\n      closeMenuOnItemClick,\n      dialogOffset = MOVE_BY,\n      dialogPosition = \"bottom-start\",\n      dialogClassName,\n      dialogPaddingSize = \"small\",\n      dialogShowTriggerIgnoreClass,\n      dialogHideTriggerIgnoreClass,\n      onMenuHide = NOOP,\n      onMenuShow = NOOP,\n      disabled = false,\n      text,\n      tooltipContent,\n      tooltipProps,\n      tooltipTriggers = [\"mouseleave\"],\n      tooltipPosition = \"right\",\n      startingEdge = \"bottom\",\n      removeTabCloseTrigger = false,\n      tooltipReferenceClassName,\n      hideWhenReferenceHidden = true,\n      dialogContainerSelector,\n      active,\n      triggerElement: TriggerElement = \"button\",\n      showTooltipOnlyOnTriggerElement,\n      \"data-testid\": dataTestId,\n      closeDialogOnContentClick = false,\n      \"aria-controls\": ariaControls\n    }: MenuButtonProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [isOpen, setIsOpen] = useState(open);\n    const isActive = active ?? isOpen;\n\n    const handleMenuClose = useCallback(\n      (focusOnMenuButtonAfterClose: boolean) => {\n        onMenuHide();\n        setIsOpen(false);\n        const button = componentRef.current;\n        if (!button || !focusOnMenuButtonAfterClose) {\n          return;\n        }\n        window.requestAnimationFrame(() => {\n          button.focus();\n        });\n      },\n      [onMenuHide]\n    );\n\n    const onMenuDidClose = useCallback(\n      (event: React.KeyboardEvent) => {\n        // TODO: check the functionality of the isEscapeKey since the event is not an actual KeyboardEVent but an object with propagate property only\n        const isCloseKey = CLOSE_KEYS.includes(event.key as DialogTriggerEvent);\n        if (isCloseKey || closeMenuOnItemClick) {\n          // @ts-ignore\n          if (event.propagate) {\n            handleMenuClose(isCloseKey);\n          }\n        }\n      },\n      [closeMenuOnItemClick, handleMenuClose]\n    );\n\n    const onDialogDidHide = useCallback(\n      (event: DialogEvent, hideEvent: string) => {\n        handleMenuClose(isOpen && CLOSE_KEYS.includes(hideEvent as DialogTriggerEvent));\n      },\n      [handleMenuClose, isOpen]\n    );\n\n    const onDialogDidShow = useCallback(() => {\n      setIsOpen(true);\n      onMenuShow();\n    }, [setIsOpen, onMenuShow]);\n\n    const [clonedChildren, hideTrigger] = useMemo(() => {\n      const triggers = new Set<DialogTriggerEvent>([\"clickoutside\", \"tab\", \"esckey\"]);\n\n      if (closeDialogOnContentClick) {\n        triggers.add(\"onContentClick\");\n        triggers.add(\"enter\");\n      }\n\n      if (removeTabCloseTrigger) {\n        triggers.delete(\"tab\");\n      }\n      const childrenArr = React.Children.toArray(children) as MenuChild[];\n      const cloned = childrenArr.map(child => {\n        if (!React.isValidElement(child)) return null;\n\n        const newProps: {\n          focusOnMount?: boolean;\n          focusItemIndexOnMount?: number;\n          onClose?: (event: React.KeyboardEvent) => void;\n        } = {};\n        if (child.type && child.type.supportFocusOnMount) {\n          newProps.focusOnMount = true;\n          if (child.props.focusItemIndexOnMount === undefined) {\n            newProps.focusItemIndexOnMount = 0;\n          }\n          triggers.delete(\"esckey\");\n        }\n\n        if (child.type && child.type.isMenu) {\n          newProps.onClose = onMenuDidClose;\n        }\n\n        return React.cloneElement(child, newProps);\n      });\n      return [cloned, Array.from(triggers)];\n    }, [children, onMenuDidClose, closeDialogOnContentClick, removeTabCloseTrigger]);\n\n    const content = useMemo(() => {\n      if (clonedChildren.length === 0) return null;\n      return (\n        <DialogContentContainer size={dialogPaddingSize} type=\"popover\" role={null}>\n          {clonedChildren}\n        </DialogContentContainer>\n      );\n    }, [clonedChildren, dialogPaddingSize]);\n\n    const computedDialogOffset = useMemo(\n      () => ({\n        ...MOVE_BY,\n        ...dialogOffset\n      }),\n      [dialogOffset]\n    );\n\n    const onMouseUp = (event: React.MouseEvent<HTMLElement>) => {\n      if (disabled) {\n        event.currentTarget.blur();\n        return;\n      }\n      onClick(event);\n    };\n\n    const Icon = component;\n    const iconSize = useMemo(() => {\n      switch (size) {\n        case \"xxs\":\n        case \"xs\":\n          return 16;\n        case \"small\":\n        case \"medium\":\n        case \"large\":\n          return 20;\n        default:\n          return 24;\n      }\n    }, [size]);\n    const icon = Icon ? <Icon size={iconSize.toString()} role=\"img\" aria-hidden=\"true\" /> : null;\n\n    useIsomorphicLayoutEffect(() => {\n      setIsOpen(open);\n    }, [open, setIsOpen]);\n\n    // Trigger element props, which are only relevant for \"button\" element, but might be needed for other elements e.g. Button\n    const triggerElementProps =\n      TriggerElement === \"button\"\n        ? {\n            ref: mergedRef\n          }\n        : {\n            active: isActive,\n            disabled: disabled,\n            ref: isForwardRef(TriggerElement) ? mergedRef : undefined\n          };\n\n    const triggerElementNode = (\n      <TriggerElement\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MENU_BUTTON, id)}\n        data-vibe={ComponentVibeId.MENU_BUTTON}\n        type=\"button\"\n        className={cx(styles.wrapper, className, getStyle(styles, camelCase(`size-${size}`)), {\n          [styles.active]: isActive,\n          [getStyle(styles, openDialogComponentClassName)]: isOpen && openDialogComponentClassName,\n          [styles.disabled]: disabled,\n          [styles.text]: text\n        })}\n        aria-haspopup=\"true\"\n        aria-expanded={isOpen}\n        aria-controls={ariaControls}\n        aria-label={!text && ariaLabel}\n        onMouseUp={onMouseUp}\n        aria-disabled={disabled}\n        {...triggerElementProps}\n      >\n        {componentPosition === \"start\" && icon}\n        {text && <span className={styles.innerText}>{text}</span>}\n        {componentPosition === \"end\" && icon}\n      </TriggerElement>\n    );\n\n    const dialogNode = (dialogChildren: React.ReactElement) => (\n      <Dialog\n        wrapperClassName={dialogClassName}\n        position={dialogPosition}\n        containerSelector={dialogContainerSelector}\n        startingEdge={startingEdge}\n        animationType=\"expand\"\n        content={content}\n        moveBy={computedDialogOffset}\n        showTrigger={disabled ? [] : [\"click\", \"enter\"]}\n        hideTrigger={hideTrigger}\n        showTriggerIgnoreClass={dialogShowTriggerIgnoreClass}\n        hideTriggerIgnoreClass={dialogHideTriggerIgnoreClass}\n        useDerivedStateFromProps={true}\n        onDialogDidShow={onDialogDidShow}\n        onDialogDidHide={onDialogDidHide}\n        zIndex={zIndex}\n        isOpen={isOpen}\n        hideWhenReferenceHidden={hideWhenReferenceHidden}\n      >\n        {dialogChildren}\n      </Dialog>\n    );\n\n    const tooltipNode = (tooltipChildren: React.ReactElement) => (\n      <Tooltip\n        content={tooltipContent}\n        position={tooltipPosition}\n        showTrigger=\"mouseenter\"\n        hideTrigger={tooltipTriggers}\n        referenceWrapperClassName={tooltipReferenceClassName}\n        hideWhenReferenceHidden={hideWhenReferenceHidden}\n        {...tooltipProps}\n      >\n        {tooltipChildren}\n      </Tooltip>\n    );\n\n    if (showTooltipOnlyOnTriggerElement) {\n      return dialogNode(tooltipNode(triggerElementNode));\n    }\n    return tooltipNode(dialogNode(triggerElementNode));\n  }\n);\n\nexport default MenuButton;\n"],"names":["MOVE_BY","main","secondary","CLOSE_KEYS","MenuButton","forwardRef","_ref","ref","id","className","openDialogComponentClassName","children","_ref$component","component","Menu","_ref$componentPositio","componentPosition","_ref$size","size","_ref$open","open","_ref$onClick","onClick","NOOP","_ref$zIndex","zIndex","_ref$ariaLabel","ariaLabel","closeMenuOnItemClick","_ref$dialogOffset","dialogOffset","_ref$dialogPosition","dialogPosition","dialogClassName","_ref$dialogPaddingSiz","dialogPaddingSize","dialogShowTriggerIgnoreClass","dialogHideTriggerIgnoreClass","_ref$onMenuHide","onMenuHide","_ref$onMenuShow","onMenuShow","_ref$disabled","disabled","text","tooltipContent","tooltipProps","_ref$tooltipTriggers","tooltipTriggers","_ref$tooltipPosition","tooltipPosition","_ref$startingEdge","startingEdge","_ref$removeTabCloseTr","removeTabCloseTrigger","tooltipReferenceClassName","_ref$hideWhenReferenc","hideWhenReferenceHidden","dialogContainerSelector","active","_ref$triggerElement","triggerElement","TriggerElement","showTooltipOnlyOnTriggerElement","dataTestId","_ref$closeDialogOnCon","closeDialogOnContentClick","ariaControls","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","isOpen","setIsOpen","isActive","handleMenuClose","useCallback","focusOnMenuButtonAfterClose","button","current","window","requestAnimationFrame","focus","onMenuDidClose","event","isCloseKey","includes","key","propagate","onDialogDidHide","hideEvent","onDialogDidShow","_useMemo","useMemo","triggers","Set","add","delete","React","Children","toArray","map","child","isValidElement","newProps","type","supportFocusOnMount","focusOnMount","undefined","props","focusItemIndexOnMount","isMenu","onClose","cloneElement","Array","from","_useMemo2","clonedChildren","hideTrigger","content","length","createElement","DialogContentContainer","role","computedDialogOffset","Object","assign","Icon","iconSize","icon","useIsomorphicLayoutEffect","triggerElementProps","isForwardRef","triggerElementNode","getTestId","ComponentDefaultTestId","MENU_BUTTON","ComponentVibeId","cx","styles","wrapper","getStyle","camelCase","concat","_defineProperty","onMouseUp","currentTarget","blur","innerText","dialogNode","dialogChildren","Dialog","wrapperClassName","position","containerSelector","animationType","moveBy","showTrigger","showTriggerIgnoreClass","hideTriggerIgnoreClass","useDerivedStateFromProps","tooltipNode","tooltipChildren","Tooltip","referenceWrapperClassName"],"mappings":"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"}

package/dist/src/components/Modal/Modal/Modal.js

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as r,useRef as a,useState as s,useCallback as i,useMemo as n}from"react";import l from"classnames";import{RemoveScroll as c}from"react-remove-scroll";import m from"react-focus-lock";import{CSSTransition as d}from"react-transition-group";import{getTestId as u}from"../../../tests/testIds.js";import{ComponentDefaultTestId as f,ComponentVibeId as p}from"../../../tests/constants.js";import v from"./Modal.module.scss.js";import y from"../ModalTopActions/ModalTopActions.js";import{getStyle as E}from"../../../helpers/typesciptCssModulesHelper.js";import{camelCase as A}from"es-toolkit";import{ModalProvider as b}from"../context/ModalContext.js";import{keyCodes as h}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{createPortal as j}from"react-dom";import g from"../hooks/usePortalTarget/usePortalTarget.js";import x from"../hooks/useFocusEscapeTargets/useFocusEscapeTargets.js";import M from"../../../hooks/useMergeRef.js";import T from"../../../../components/layer/dist/LayerProvider/LayerProvider.js";var L=m.default||m,P=r((function(r,m){var P,w=r.id,k=r.show,C=r.size,F=void 0===C?"medium":C,O=r.renderHeaderAction,I=r.closeButtonTheme,R=r.closeButtonAriaLabel,z=r.onClose,B=void 0===z?function(){}:z,D=r.autoFocus,H=void 0===D||D,N=r.allowFocusEscapeTo,_=r.onFocusAttempt,V=r.anchorElementRef,K=r.alertModal,S=r.container,Y=void 0===S?document.body:S,q=r.children,G=r.style,J=r.zIndex,Q=r.className,U=r["data-testid"],W=r["aria-labelledby"],X=r["aria-describedby"],Z=g(Y),$=a(null),ee=M(m,$),te=a(null),oe=s(),re=e(oe,2),ae=re[0],se=re[1],ie=s(),ne=e(ie,2),le=ne[0],ce=ne[1],me=i((function(e){W||se(e)}),[W]),de=i((function(e){X||ce(e)}),[X]),ue=n((function(){return{modalId:w,setTitleId:me,setDescriptionId:de,autoFocus:H}}),[w,me,de,H]),fe=i((function(e){k&&!K&&B(e)}),[k,K,B]),pe=i((function(e){e.key===h.ESCAPE&&k&&!K&&B(e)}),[K,B,k]),ve="full-view"===F?"fullView":(null==V?void 0:V.current)?"anchorPop":"centerPop",ye=null===(P=null==V?void 0:V.current)||void 0===P?void 0:P.getBoundingClientRect(),Ee=ye?{"--modal-start-x":"".concat(ye.left+ye.width/2,"px"),"--modal-start-y":"".concat(ye.top+ye.height/2,"px")}:{},Ae=J?{"--monday-modal-z-index":J}:{},be=x(N),he=i((function(e){if(_){var t=_(e);return!0===t||t instanceof HTMLElement&&(t.focus(),!1)}return!be(e)}),[_,be]);return o.createElement(d,{in:k,nodeRef:te,timeout:{enter:250,exit:150},unmountOnExit:!0,classNames:{enter:v.containerEnter,enterActive:v.containerEnterActive,exitActive:v.containerExitActive}},o.createElement(T,{layerRef:te},o.createElement(b,{value:ue},j(o.createElement(L,{returnFocus:!0,autoFocus:H,whiteList:he},o.createElement("div",{ref:te,className:v.container,style:Ae,onKeyDown:pe},o.createElement("div",{"data-testid":u(f.MODAL_OVERLAY,w),className:v.overlay,onClick:fe,"aria-hidden":!0}),o.createElement(c,{forwardProps:!0,ref:ee},o.createElement("div",{className:l(v.modal,v[ve],E(v,A("size-"+F)),t({},v.withHeaderAction,!!O),Q),id:w,"data-testid":U||u(f.MODAL,w),"data-vibe":p.MODAL,role:"dialog","aria-modal":!0,"aria-labelledby":W||ae,"aria-describedby":X||le,style:Object.assign(Object.assign({},G),Ee),tabIndex:-1},q,o.createElement(y,{renderAction:O,theme:I,closeButtonAriaLabel:R,onClose:B}))))),Z))))}));export{P as default};
+import{slicedToArray as e,defineProperty as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as r,useRef as a,useState as s,useCallback as i,useMemo as n}from"react";import l from"classnames";import{RemoveScroll as c}from"react-remove-scroll";import d from"react-focus-lock";import{CSSTransition as m}from"react-transition-group";import{getTestId as u}from"../../../tests/testIds.js";import{ComponentDefaultTestId as f,ComponentVibeId as p}from"../../../tests/constants.js";import v from"./Modal.module.scss.js";import y from"../ModalTopActions/ModalTopActions.js";import{camelCase as E}from"es-toolkit";import{ModalProvider as A}from"../context/ModalContext.js";import{keyCodes as h}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{createPortal as b}from"react-dom";import j from"../hooks/usePortalTarget/usePortalTarget.js";import g from"../hooks/useFocusEscapeTargets/useFocusEscapeTargets.js";import x from"../../../../components/layer/dist/LayerProvider/LayerProvider.js";import{useMergeRef as M}from"../../../../shared/dist/hooks/useMergeRef.js";import{getStyle as T}from"../../../../shared/dist/utils/typesciptCssModulesHelper.js";var L=d.default||d,P=r((function(r,d){var P,w=r.id,k=r.show,C=r.size,F=void 0===C?"medium":C,O=r.renderHeaderAction,I=r.closeButtonTheme,R=r.closeButtonAriaLabel,z=r.onClose,B=void 0===z?function(){}:z,D=r.autoFocus,H=void 0===D||D,N=r.allowFocusEscapeTo,_=r.onFocusAttempt,V=r.anchorElementRef,K=r.alertModal,S=r.container,Y=void 0===S?document.body:S,q=r.children,G=r.style,J=r.zIndex,Q=r.className,U=r["data-testid"],W=r["aria-labelledby"],X=r["aria-describedby"],Z=j(Y),$=a(null),ee=M(d,$),te=a(null),oe=s(),re=e(oe,2),ae=re[0],se=re[1],ie=s(),ne=e(ie,2),le=ne[0],ce=ne[1],de=i((function(e){W||se(e)}),[W]),me=i((function(e){X||ce(e)}),[X]),ue=n((function(){return{modalId:w,setTitleId:de,setDescriptionId:me,autoFocus:H}}),[w,de,me,H]),fe=i((function(e){k&&!K&&B(e)}),[k,K,B]),pe=i((function(e){e.key===h.ESCAPE&&k&&!K&&B(e)}),[K,B,k]),ve="full-view"===F?"fullView":(null==V?void 0:V.current)?"anchorPop":"centerPop",ye=null===(P=null==V?void 0:V.current)||void 0===P?void 0:P.getBoundingClientRect(),Ee=ye?{"--modal-start-x":"".concat(ye.left+ye.width/2,"px"),"--modal-start-y":"".concat(ye.top+ye.height/2,"px")}:{},Ae=J?{"--monday-modal-z-index":J}:{},he=g(N),be=i((function(e){if(_){var t=_(e);return!0===t||t instanceof HTMLElement&&(t.focus(),!1)}return!he(e)}),[_,he]);return o.createElement(m,{in:k,nodeRef:te,timeout:{enter:250,exit:150},unmountOnExit:!0,classNames:{enter:v.containerEnter,enterActive:v.containerEnterActive,exitActive:v.containerExitActive}},o.createElement(x,{layerRef:te},o.createElement(A,{value:ue},b(o.createElement(L,{returnFocus:!0,autoFocus:H,whiteList:be},o.createElement("div",{ref:te,className:v.container,style:Ae,onKeyDown:pe},o.createElement("div",{"data-testid":u(f.MODAL_OVERLAY,w),className:v.overlay,onClick:fe,"aria-hidden":!0}),o.createElement(c,{forwardProps:!0,ref:ee},o.createElement("div",{className:l(v.modal,v[ve],T(v,E("size-"+F)),t({},v.withHeaderAction,!!O),Q),id:w,"data-testid":U||u(f.MODAL,w),"data-vibe":p.MODAL,role:"dialog","aria-modal":!0,"aria-labelledby":W||ae,"aria-describedby":X||le,style:Object.assign(Object.assign({},G),Ee),tabIndex:-1},q,o.createElement(y,{renderAction:O,theme:I,closeButtonAriaLabel:R,onClose:B}))))),Z))))}));export{P as default};
 //# sourceMappingURL=Modal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../../../src/components/Modal/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport FocusLock from \"react-focus-lock\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../../tests/constants\";\nimport styles from \"./Modal.module.scss\";\nimport { type ModalProps } from \"./Modal.types\";\nimport ModalTopActions from \"../ModalTopActions/ModalTopActions\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"es-toolkit\";\nimport { ModalProvider } from \"../context/ModalContext\";\nimport { type ModalProviderValue } from \"../context/ModalContext.types\";\nimport { keyCodes } from \"../../../constants\";\nimport { createPortal } from \"react-dom\";\nimport usePortalTarget from \"../hooks/usePortalTarget/usePortalTarget\";\nimport useFocusEscapeTargets from \"../hooks/useFocusEscapeTargets/useFocusEscapeTargets\";\nimport { LayerProvider } from \"@vibe/layer\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\n\n// @ts-expect-error This is a precaution to support all possible module systems (ESM/CJS)\nconst FocusLockComponent = (FocusLock.default || FocusLock) as typeof FocusLock;\n\nconst Modal = forwardRef(\n  (\n    {\n      id,\n      show,\n      size = \"medium\",\n      renderHeaderAction,\n      closeButtonTheme,\n      closeButtonAriaLabel,\n      onClose = () => {},\n      autoFocus = true,\n      allowFocusEscapeTo,\n      onFocusAttempt,\n      anchorElementRef,\n      alertModal,\n      container = document.body,\n      children,\n      style,\n      zIndex,\n      className,\n      \"data-testid\": dataTestId,\n      \"aria-labelledby\": ariaLabelledby,\n      \"aria-describedby\": ariaDescribedby\n    }: ModalProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const portalTargetElement = usePortalTarget(container);\n\n    const modalRef = useRef<HTMLDivElement>(null);\n    const modalMergedRef = useMergeRef<HTMLDivElement>(ref, modalRef);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const [titleId, setTitleId] = useState<string>();\n    const [descriptionId, setDescriptionId] = useState<string>();\n\n    const setTitleIdCallback = useCallback(\n      (newId: string) => {\n        if (ariaLabelledby) return;\n        setTitleId(newId);\n      },\n      [ariaLabelledby]\n    );\n    const setDescriptionIdCallback = useCallback(\n      (newId: string) => {\n        if (ariaDescribedby) return;\n        setDescriptionId(newId);\n      },\n      [ariaDescribedby]\n    );\n\n    const contextValue = useMemo<ModalProviderValue>(\n      () => ({\n        modalId: id,\n        setTitleId: setTitleIdCallback,\n        setDescriptionId: setDescriptionIdCallback,\n        autoFocus\n      }),\n      [id, setTitleIdCallback, setDescriptionIdCallback, autoFocus]\n    );\n\n    const onBackdropClick = useCallback<React.MouseEventHandler<HTMLDivElement>>(\n      e => {\n        if (!show || alertModal) return;\n        onClose(e);\n      },\n      [show, alertModal, onClose]\n    );\n\n    const onModalKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n      e => {\n        if (e.key !== keyCodes.ESCAPE || !show || alertModal) return;\n        onClose(e);\n      },\n      [alertModal, onClose, show]\n    );\n\n    const animationType = size === \"full-view\" ? \"fullView\" : anchorElementRef?.current ? \"anchorPop\" : \"centerPop\";\n\n    const anchorRect = anchorElementRef?.current?.getBoundingClientRect();\n    const anchorVars = anchorRect\n      ? ({\n          \"--modal-start-x\": `${anchorRect.left + anchorRect.width / 2}px`,\n          \"--modal-start-y\": `${anchorRect.top + anchorRect.height / 2}px`\n        } as React.CSSProperties)\n      : {};\n\n    const zIndexStyle = zIndex ? ({ \"--monday-modal-z-index\": zIndex } as React.CSSProperties) : {};\n\n    const shouldAllowFocusEscape = useFocusEscapeTargets(allowFocusEscapeTo);\n\n    /**\n     * Returning true means that the focus-lock is allowed to manage the element.\n     * Returning false means that the focus-lock would surrender control to the element.\n     */\n    const handleFocusLockWhiteList = useCallback(\n      (nextFocusedElement?: HTMLElement) => {\n        if (onFocusAttempt) {\n          const outcome = onFocusAttempt(nextFocusedElement);\n\n          if (outcome === true) return true;\n\n          if (outcome instanceof HTMLElement) {\n            outcome.focus();\n            return false;\n          }\n\n          return false;\n        }\n\n        return !shouldAllowFocusEscape(nextFocusedElement);\n      },\n      [onFocusAttempt, shouldAllowFocusEscape]\n    );\n\n    return (\n      <CSSTransition\n        in={show}\n        nodeRef={containerRef}\n        timeout={{ enter: 250, exit: 150 }}\n        unmountOnExit\n        classNames={{\n          enter: styles.containerEnter,\n          enterActive: styles.containerEnterActive,\n          exitActive: styles.containerExitActive\n        }}\n      >\n        <LayerProvider layerRef={containerRef}>\n          <ModalProvider value={contextValue}>\n            {createPortal(\n              <FocusLockComponent returnFocus autoFocus={autoFocus} whiteList={handleFocusLockWhiteList}>\n                <div ref={containerRef} className={styles.container} style={zIndexStyle} onKeyDown={onModalKeyDown}>\n                  <div\n                    data-testid={getTestId(ComponentDefaultTestId.MODAL_OVERLAY, id)}\n                    className={styles.overlay}\n                    onClick={onBackdropClick}\n                    aria-hidden\n                  />\n                  <RemoveScroll forwardProps ref={modalMergedRef}>\n                    <div\n                      className={cx(\n                        styles.modal,\n                        styles[animationType],\n                        getStyle(styles, camelCase(\"size-\" + size)),\n                        { [styles.withHeaderAction]: !!renderHeaderAction },\n                        className\n                      )}\n                      id={id}\n                      data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL, id)}\n                      data-vibe={ComponentVibeId.MODAL}\n                      role=\"dialog\"\n                      aria-modal\n                      aria-labelledby={ariaLabelledby || titleId}\n                      aria-describedby={ariaDescribedby || descriptionId}\n                      style={{ ...style, ...anchorVars }}\n                      tabIndex={-1}\n                    >\n                      {children}\n                      <ModalTopActions\n                        renderAction={renderHeaderAction}\n                        theme={closeButtonTheme}\n                        closeButtonAriaLabel={closeButtonAriaLabel}\n                        onClose={onClose}\n                      />\n                    </div>\n                  </RemoveScroll>\n                </div>\n              </FocusLockComponent>,\n              portalTargetElement\n            )}\n          </ModalProvider>\n        </LayerProvider>\n      </CSSTransition>\n    );\n  }\n);\n\nexport default Modal;\n"],"names":["FocusLockComponent","FocusLock","default","Modal","forwardRef","_ref","ref","id","show","_ref$size","size","renderHeaderAction","closeButtonTheme","closeButtonAriaLabel","_ref$onClose","onClose","_ref$autoFocus","autoFocus","allowFocusEscapeTo","onFocusAttempt","anchorElementRef","alertModal","_ref$container","container","document","body","children","style","zIndex","className","dataTestId","ariaLabelledby","ariaDescribedby","portalTargetElement","usePortalTarget","modalRef","useRef","modalMergedRef","useMergeRef","containerRef","_useState","useState","_useState2","_slicedToArray","titleId","setTitleId","_useState3","_useState4","descriptionId","setDescriptionId","setTitleIdCallback","useCallback","newId","setDescriptionIdCallback","contextValue","useMemo","modalId","onBackdropClick","e","onModalKeyDown","key","keyCodes","ESCAPE","animationType","current","anchorRect","_a","getBoundingClientRect","anchorVars","concat","left","width","top","height","zIndexStyle","shouldAllowFocusEscape","useFocusEscapeTargets","handleFocusLockWhiteList","nextFocusedElement","outcome","HTMLElement","focus","React","createElement","CSSTransition","in","nodeRef","timeout","enter","exit","unmountOnExit","classNames","styles","containerEnter","enterActive","containerEnterActive","exitActive","containerExitActive","LayerProvider","layerRef","ModalProvider","value","createPortal","returnFocus","whiteList","onKeyDown","getTestId","ComponentDefaultTestId","MODAL_OVERLAY","overlay","onClick","RemoveScroll","forwardProps","cx","modal","getStyle","camelCase","_defineProperty","withHeaderAction","MODAL","ComponentVibeId","role","Object","assign","tabIndex","ModalTopActions","renderAction","theme"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../../../../src/components/Modal/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport FocusLock from \"react-focus-lock\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../../tests/constants\";\nimport styles from \"./Modal.module.scss\";\nimport { type ModalProps } from \"./Modal.types\";\nimport ModalTopActions from \"../ModalTopActions/ModalTopActions\";\nimport { getStyle, useMergeRef } from \"@vibe/shared\";\nimport { camelCase } from \"es-toolkit\";\nimport { ModalProvider } from \"../context/ModalContext\";\nimport { type ModalProviderValue } from \"../context/ModalContext.types\";\nimport { keyCodes } from \"../../../constants\";\nimport { createPortal } from \"react-dom\";\nimport usePortalTarget from \"../hooks/usePortalTarget/usePortalTarget\";\nimport useFocusEscapeTargets from \"../hooks/useFocusEscapeTargets/useFocusEscapeTargets\";\nimport { LayerProvider } from \"@vibe/layer\";\n\n// @ts-expect-error This is a precaution to support all possible module systems (ESM/CJS)\nconst FocusLockComponent = (FocusLock.default || FocusLock) as typeof FocusLock;\n\nconst Modal = forwardRef(\n  (\n    {\n      id,\n      show,\n      size = \"medium\",\n      renderHeaderAction,\n      closeButtonTheme,\n      closeButtonAriaLabel,\n      onClose = () => {},\n      autoFocus = true,\n      allowFocusEscapeTo,\n      onFocusAttempt,\n      anchorElementRef,\n      alertModal,\n      container = document.body,\n      children,\n      style,\n      zIndex,\n      className,\n      \"data-testid\": dataTestId,\n      \"aria-labelledby\": ariaLabelledby,\n      \"aria-describedby\": ariaDescribedby\n    }: ModalProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const portalTargetElement = usePortalTarget(container);\n\n    const modalRef = useRef<HTMLDivElement>(null);\n    const modalMergedRef = useMergeRef<HTMLDivElement>(ref, modalRef);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const [titleId, setTitleId] = useState<string>();\n    const [descriptionId, setDescriptionId] = useState<string>();\n\n    const setTitleIdCallback = useCallback(\n      (newId: string) => {\n        if (ariaLabelledby) return;\n        setTitleId(newId);\n      },\n      [ariaLabelledby]\n    );\n    const setDescriptionIdCallback = useCallback(\n      (newId: string) => {\n        if (ariaDescribedby) return;\n        setDescriptionId(newId);\n      },\n      [ariaDescribedby]\n    );\n\n    const contextValue = useMemo<ModalProviderValue>(\n      () => ({\n        modalId: id,\n        setTitleId: setTitleIdCallback,\n        setDescriptionId: setDescriptionIdCallback,\n        autoFocus\n      }),\n      [id, setTitleIdCallback, setDescriptionIdCallback, autoFocus]\n    );\n\n    const onBackdropClick = useCallback<React.MouseEventHandler<HTMLDivElement>>(\n      e => {\n        if (!show || alertModal) return;\n        onClose(e);\n      },\n      [show, alertModal, onClose]\n    );\n\n    const onModalKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n      e => {\n        if (e.key !== keyCodes.ESCAPE || !show || alertModal) return;\n        onClose(e);\n      },\n      [alertModal, onClose, show]\n    );\n\n    const animationType = size === \"full-view\" ? \"fullView\" : anchorElementRef?.current ? \"anchorPop\" : \"centerPop\";\n\n    const anchorRect = anchorElementRef?.current?.getBoundingClientRect();\n    const anchorVars = anchorRect\n      ? ({\n          \"--modal-start-x\": `${anchorRect.left + anchorRect.width / 2}px`,\n          \"--modal-start-y\": `${anchorRect.top + anchorRect.height / 2}px`\n        } as React.CSSProperties)\n      : {};\n\n    const zIndexStyle = zIndex ? ({ \"--monday-modal-z-index\": zIndex } as React.CSSProperties) : {};\n\n    const shouldAllowFocusEscape = useFocusEscapeTargets(allowFocusEscapeTo);\n\n    /**\n     * Returning true means that the focus-lock is allowed to manage the element.\n     * Returning false means that the focus-lock would surrender control to the element.\n     */\n    const handleFocusLockWhiteList = useCallback(\n      (nextFocusedElement?: HTMLElement) => {\n        if (onFocusAttempt) {\n          const outcome = onFocusAttempt(nextFocusedElement);\n\n          if (outcome === true) return true;\n\n          if (outcome instanceof HTMLElement) {\n            outcome.focus();\n            return false;\n          }\n\n          return false;\n        }\n\n        return !shouldAllowFocusEscape(nextFocusedElement);\n      },\n      [onFocusAttempt, shouldAllowFocusEscape]\n    );\n\n    return (\n      <CSSTransition\n        in={show}\n        nodeRef={containerRef}\n        timeout={{ enter: 250, exit: 150 }}\n        unmountOnExit\n        classNames={{\n          enter: styles.containerEnter,\n          enterActive: styles.containerEnterActive,\n          exitActive: styles.containerExitActive\n        }}\n      >\n        <LayerProvider layerRef={containerRef}>\n          <ModalProvider value={contextValue}>\n            {createPortal(\n              <FocusLockComponent returnFocus autoFocus={autoFocus} whiteList={handleFocusLockWhiteList}>\n                <div ref={containerRef} className={styles.container} style={zIndexStyle} onKeyDown={onModalKeyDown}>\n                  <div\n                    data-testid={getTestId(ComponentDefaultTestId.MODAL_OVERLAY, id)}\n                    className={styles.overlay}\n                    onClick={onBackdropClick}\n                    aria-hidden\n                  />\n                  <RemoveScroll forwardProps ref={modalMergedRef}>\n                    <div\n                      className={cx(\n                        styles.modal,\n                        styles[animationType],\n                        getStyle(styles, camelCase(\"size-\" + size)),\n                        { [styles.withHeaderAction]: !!renderHeaderAction },\n                        className\n                      )}\n                      id={id}\n                      data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL, id)}\n                      data-vibe={ComponentVibeId.MODAL}\n                      role=\"dialog\"\n                      aria-modal\n                      aria-labelledby={ariaLabelledby || titleId}\n                      aria-describedby={ariaDescribedby || descriptionId}\n                      style={{ ...style, ...anchorVars }}\n                      tabIndex={-1}\n                    >\n                      {children}\n                      <ModalTopActions\n                        renderAction={renderHeaderAction}\n                        theme={closeButtonTheme}\n                        closeButtonAriaLabel={closeButtonAriaLabel}\n                        onClose={onClose}\n                      />\n                    </div>\n                  </RemoveScroll>\n                </div>\n              </FocusLockComponent>,\n              portalTargetElement\n            )}\n          </ModalProvider>\n        </LayerProvider>\n      </CSSTransition>\n    );\n  }\n);\n\nexport default Modal;\n"],"names":["FocusLockComponent","FocusLock","default","Modal","forwardRef","_ref","ref","id","show","_ref$size","size","renderHeaderAction","closeButtonTheme","closeButtonAriaLabel","_ref$onClose","onClose","_ref$autoFocus","autoFocus","allowFocusEscapeTo","onFocusAttempt","anchorElementRef","alertModal","_ref$container","container","document","body","children","style","zIndex","className","dataTestId","ariaLabelledby","ariaDescribedby","portalTargetElement","usePortalTarget","modalRef","useRef","modalMergedRef","useMergeRef","containerRef","_useState","useState","_useState2","_slicedToArray","titleId","setTitleId","_useState3","_useState4","descriptionId","setDescriptionId","setTitleIdCallback","useCallback","newId","setDescriptionIdCallback","contextValue","useMemo","modalId","onBackdropClick","e","onModalKeyDown","key","keyCodes","ESCAPE","animationType","current","anchorRect","_a","getBoundingClientRect","anchorVars","concat","left","width","top","height","zIndexStyle","shouldAllowFocusEscape","useFocusEscapeTargets","handleFocusLockWhiteList","nextFocusedElement","outcome","HTMLElement","focus","React","createElement","CSSTransition","in","nodeRef","timeout","enter","exit","unmountOnExit","classNames","styles","containerEnter","enterActive","containerEnterActive","exitActive","containerExitActive","LayerProvider","layerRef","ModalProvider","value","createPortal","returnFocus","whiteList","onKeyDown","getTestId","ComponentDefaultTestId","MODAL_OVERLAY","overlay","onClick","RemoveScroll","forwardProps","cx","modal","getStyle","camelCase","_defineProperty","withHeaderAction","MODAL","ComponentVibeId","role","Object","assign","tabIndex","ModalTopActions","renderAction","theme"],"mappings":"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"}

package/dist/src/components/MultiStepIndicator/MultiStepIndicator.js

@@ -1,2 +1,2 @@
-import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t from"classnames";import i,{forwardRef as l,useCallback as o,useMemo as s}from"react";import r from"../Divider/Divider.js";import{NOOP as a}from"../../utils/function-utils.js";import n from"./components/StepIndicator/StepIndicator.js";import{getTestId as p}from"../../tests/testIds.js";import{ComponentDefaultTestId as c}from"../../tests/constants.js";import m from"./MultiStepIndicator.module.scss.js";import d from"../../../icons/dist/react/Check.js";var f=l((function(l,f){var u=l.className,v=l.steps,y=void 0===v?[]:v,C=l.type,N=void 0===C?"primary":C,I=l.stepComponentClassName,S=l.dividerComponentClassName,g=l.fulfilledStepIcon,j=void 0===g?d:g,b=l.fulfilledStepIconType,D=void 0===b?"svg":b,T=l.isFulfilledStepDisplayNumber,h=void 0!==T&&T,k=l.onClick,E=void 0===k?a:k,_=l.textPlacement,F=void 0===_?"horizontal":_,x=l.id,P=l["data-testid"],z="vertical"===F?"regular":l.size,O=o((function(l,o){return i.createElement(i.Fragment,{key:"".concat(l.titleText,"_").concat(o)},i.createElement(n,Object.assign({},l,{stepNumber:o+1,type:N,stepComponentClassName:I,fulfilledStepIcon:j,fulfilledStepIconType:D,onClick:E,isFulfilledStepDisplayNumber:h,size:z})),o!==y.length-1&&i.createElement(r,{className:t(m.divider,S,e({},m.compact,"compact"===z))}))}),[E,h,N,I,j,D,S,y.length,z]),w=o((function(e,l){return i.createElement(n,Object.assign({},e,{key:"".concat(e.titleText,"_").concat(l),stepNumber:l+1,type:N,stepComponentClassName:I,fulfilledStepIcon:j,fulfilledStepIconType:D,onClick:E,isFollowedByDivider:l!==y.length-1,stepDividerClassName:t(m.divider,S),isVertical:!0,isFulfilledStepDisplayNumber:h}))}),[E,h,N,I,j,D,S,y.length]),B=s((function(){return"vertical"===F?w:O}),[F,w,O]);return i.createElement("ol",{ref:f,id:x,"data-testid":P||p(c.MULTI_STEP_INDICATOR,x),className:t(m.wrapper,u)},y.map(B))}));export{f as default};
+import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t from"classnames";import i,{forwardRef as l,useCallback as s,useMemo as o}from"react";import r from"../Divider/Divider.js";import a from"./components/StepIndicator/StepIndicator.js";import{getTestId as n}from"../../tests/testIds.js";import{ComponentDefaultTestId as p}from"../../tests/constants.js";import c from"./MultiStepIndicator.module.scss.js";import m from"../../../icons/dist/react/Check.js";import{NOOP as d}from"../../../shared/dist/utils/function-utils.js";var f=l((function(l,f){var u=l.className,v=l.steps,y=void 0===v?[]:v,C=l.type,N=void 0===C?"primary":C,I=l.stepComponentClassName,S=l.dividerComponentClassName,g=l.fulfilledStepIcon,j=void 0===g?m:g,b=l.fulfilledStepIconType,D=void 0===b?"svg":b,T=l.isFulfilledStepDisplayNumber,h=void 0!==T&&T,k=l.onClick,E=void 0===k?d:k,_=l.textPlacement,F=void 0===_?"horizontal":_,x=l.id,P=l["data-testid"],z="vertical"===F?"regular":l.size,O=s((function(l,s){return i.createElement(i.Fragment,{key:"".concat(l.titleText,"_").concat(s)},i.createElement(a,Object.assign({},l,{stepNumber:s+1,type:N,stepComponentClassName:I,fulfilledStepIcon:j,fulfilledStepIconType:D,onClick:E,isFulfilledStepDisplayNumber:h,size:z})),s!==y.length-1&&i.createElement(r,{className:t(c.divider,S,e({},c.compact,"compact"===z))}))}),[E,h,N,I,j,D,S,y.length,z]),w=s((function(e,l){return i.createElement(a,Object.assign({},e,{key:"".concat(e.titleText,"_").concat(l),stepNumber:l+1,type:N,stepComponentClassName:I,fulfilledStepIcon:j,fulfilledStepIconType:D,onClick:E,isFollowedByDivider:l!==y.length-1,stepDividerClassName:t(c.divider,S),isVertical:!0,isFulfilledStepDisplayNumber:h}))}),[E,h,N,I,j,D,S,y.length]),B=o((function(){return"vertical"===F?w:O}),[F,w,O]);return i.createElement("ol",{ref:f,id:x,"data-testid":P||n(p.MULTI_STEP_INDICATOR,x),className:t(c.wrapper,u)},y.map(B))}));export{f as default};
 //# sourceMappingURL=MultiStepIndicator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MultiStepIndicator.js","sources":["../../../../src/components/MultiStepIndicator/MultiStepIndicator.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useMemo } from \"react\";\nimport { Check } from \"@vibe/icons\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport Divider from \"../../components/Divider/Divider\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport StepIndicator from \"./components/StepIndicator/StepIndicator\";\nimport { type MultiStepType, type MultiStepSize, type TextPlacement, type Step } from \"./MultiStep.types\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./MultiStepIndicator.module.scss\";\n\nexport interface MultiStepIndicatorProps extends VibeComponentProps {\n  /**\n   * The list of steps in the multi-step indicator.\n   */\n  steps?: Step[];\n  /**\n   * The visual style of the multi-step indicator.\n   */\n  type?: MultiStepType;\n  /**\n   * Class name applied to each step component.\n   */\n  stepComponentClassName?: string;\n  /**\n   * Class name applied to the divider between steps.\n   */\n  dividerComponentClassName?: string;\n  /**\n   * The icon used for fulfilled steps.\n   */\n  fulfilledStepIcon?: SubIcon;\n  /**\n   * The type of the fulfilled step icon.\n   */\n  fulfilledStepIconType?: \"svg\" | \"font\";\n  /**\n   * If true, displays the step number instead of the fulfilled step icon.\n   */\n  isFulfilledStepDisplayNumber?: boolean;\n  /**\n   * Callback fired when a step is clicked.\n   */\n  onClick?: (stepNumber: number) => void;\n  /**\n   * The placement of the step text.\n   */\n  textPlacement?: TextPlacement;\n  /**\n   * The size of the multi-step indicator.\n   */\n  size?: MultiStepSize;\n}\n\nconst MultiStepIndicator = forwardRef(\n  (\n    {\n      className,\n      steps = [],\n      type = \"primary\",\n      stepComponentClassName,\n      dividerComponentClassName,\n      fulfilledStepIcon = Check,\n      fulfilledStepIconType = \"svg\",\n      isFulfilledStepDisplayNumber = false,\n      onClick = NOOP,\n      textPlacement = \"horizontal\",\n      id,\n      size,\n      \"data-testid\": dataTestId\n    }: MultiStepIndicatorProps,\n    ref: React.ForwardedRef<HTMLOListElement>\n  ) => {\n    const finalSize = textPlacement === \"vertical\" ? \"regular\" : size;\n\n    const renderHorizontalStepIndicator = useCallback(\n      (step: Step, index: number) => {\n        return (\n          <React.Fragment key={`${step.titleText}_${index}`}>\n            <StepIndicator\n              {...step}\n              stepNumber={index + 1}\n              type={type}\n              stepComponentClassName={stepComponentClassName}\n              fulfilledStepIcon={fulfilledStepIcon}\n              fulfilledStepIconType={fulfilledStepIconType}\n              onClick={onClick}\n              isFulfilledStepDisplayNumber={isFulfilledStepDisplayNumber}\n              size={finalSize}\n            />\n            {index !== steps.length - 1 && (\n              <Divider\n                className={cx(styles.divider, dividerComponentClassName, {\n                  [styles.compact]: finalSize === \"compact\"\n                })}\n              />\n            )}\n          </React.Fragment>\n        );\n      },\n      [\n        onClick,\n        isFulfilledStepDisplayNumber,\n        type,\n        stepComponentClassName,\n        fulfilledStepIcon,\n        fulfilledStepIconType,\n        dividerComponentClassName,\n        steps.length,\n        finalSize\n      ]\n    );\n\n    const renderVerticalStepIndicator = useCallback(\n      (step: Step, index: number) => {\n        return (\n          <StepIndicator\n            {...step}\n            key={`${step.titleText}_${index}`}\n            stepNumber={index + 1}\n            type={type}\n            stepComponentClassName={stepComponentClassName}\n            fulfilledStepIcon={fulfilledStepIcon}\n            fulfilledStepIconType={fulfilledStepIconType}\n            onClick={onClick}\n            isFollowedByDivider={index !== steps.length - 1}\n            stepDividerClassName={cx(styles.divider, dividerComponentClassName)}\n            isVertical\n            isFulfilledStepDisplayNumber={isFulfilledStepDisplayNumber}\n          />\n        );\n      },\n      [\n        onClick,\n        isFulfilledStepDisplayNumber,\n        type,\n        stepComponentClassName,\n        fulfilledStepIcon,\n        fulfilledStepIconType,\n        dividerComponentClassName,\n        steps.length\n      ]\n    );\n\n    const stepRenderer = useMemo(\n      () => (textPlacement === \"vertical\" ? renderVerticalStepIndicator : renderHorizontalStepIndicator),\n      [textPlacement, renderVerticalStepIndicator, renderHorizontalStepIndicator]\n    );\n\n    return (\n      <ol\n        ref={ref}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MULTI_STEP_INDICATOR, id)}\n        className={cx(styles.wrapper, className)}\n      >\n        {steps.map(stepRenderer)}\n      </ol>\n    );\n  }\n);\n\nexport default MultiStepIndicator;\n"],"names":["MultiStepIndicator","forwardRef","_ref","ref","className","_ref$steps","steps","_ref$type","type","stepComponentClassName","dividerComponentClassName","_ref$fulfilledStepIco","fulfilledStepIcon","Check","_ref$fulfilledStepIco2","fulfilledStepIconType","_ref$isFulfilledStepD","isFulfilledStepDisplayNumber","_ref$onClick","onClick","NOOP","_ref$textPlacement","textPlacement","id","dataTestId","finalSize","size","renderHorizontalStepIndicator","useCallback","step","index","React","createElement","Fragment","key","concat","titleText","StepIndicator","Object","assign","stepNumber","length","Divider","cx","styles","divider","_defineProperty","compact","renderVerticalStepIndicator","isFollowedByDivider","stepDividerClassName","isVertical","stepRenderer","useMemo","getTestId","ComponentDefaultTestId","MULTI_STEP_INDICATOR","wrapper","map"],"mappings":"6hBAwDMA,IAAAA,EAAqBC,GACzB,SAAAC,EAgBEC,GACE,IAfAC,EAASF,EAATE,UAASC,EAAAH,EACTI,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAAAL,EACVM,KAAAA,OAAO,IAAHD,EAAG,UAASA,EAChBE,EAAsBP,EAAtBO,uBACAC,EAAyBR,EAAzBQ,0BAAyBC,EAAAT,EACzBU,kBAAAA,OAAoBC,IAAHF,EAAGE,EAAKF,EAAAG,EAAAZ,EACzBa,sBAAAA,OAAwB,IAAHD,EAAG,MAAKA,EAAAE,EAAAd,EAC7Be,6BAAAA,OAA+B,IAAHD,GAAQA,EAAAE,EAAAhB,EACpCiB,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAnB,EACdoB,cAAAA,OAAgB,IAAHD,EAAG,aAAYA,EAC5BE,EAAErB,EAAFqB,GAEeC,EAAUtB,EAAzB,eAIIuB,EAA8B,aAAlBH,EAA+B,UAL3CpB,EAAJwB,KAOIC,EAAgCC,GACpC,SAACC,EAAYC,GACX,OACEC,EAAAC,cAACD,EAAME,SAAS,CAAAC,IAAG,GAAAC,OAAKN,EAAKO,UAAS,KAAAD,OAAIL,IACxCC,EAAAC,cAACK,EACKC,OAAAC,OAAA,CAAA,EAAAV,EACJ,CAAAW,WAAYV,EAAQ,EACpBtB,KAAMA,EACNC,uBAAwBA,EACxBG,kBAAmBA,EACnBG,sBAAuBA,EACvBI,QAASA,EACTF,6BAA8BA,EAC9BS,KAAMD,KAEPK,IAAUxB,EAAMmC,OAAS,GACxBV,EAACC,cAAAU,GACCtC,UAAWuC,EAAGC,EAAOC,QAASnC,EAAyBoC,EAAA,CAAA,EACpDF,EAAOG,QAAwB,YAAdtB,MAM7B,GACD,CACEN,EACAF,EACAT,EACAC,EACAG,EACAG,EACAL,EACAJ,EAAMmC,OACNhB,IAIEuB,EAA8BpB,GAClC,SAACC,EAAYC,GACX,OACEC,EAAAC,cAACK,EAAaC,OAAAC,OAAA,CAAA,EACRV,EACJ,CAAAK,IAAG,GAAAC,OAAKN,EAAKO,UAASD,KAAAA,OAAIL,GAC1BU,WAAYV,EAAQ,EACpBtB,KAAMA,EACNC,uBAAwBA,EACxBG,kBAAmBA,EACnBG,sBAAuBA,EACvBI,QAASA,EACT8B,oBAAqBnB,IAAUxB,EAAMmC,OAAS,EAC9CS,qBAAsBP,EAAGC,EAAOC,QAASnC,GACzCyC,cACAlC,6BAA8BA,IAGnC,GACD,CACEE,EACAF,EACAT,EACAC,EACAG,EACAG,EACAL,EACAJ,EAAMmC,SAIJW,EAAeC,GACnB,WAAA,MAAyB,aAAlB/B,EAA+B0B,EAA8BrB,CAA8B,GAClG,CAACL,EAAe0B,EAA6BrB,IAG/C,OACEI,EACEC,cAAA,KAAA,CAAA7B,IAAKA,EACLoB,GAAIA,EACS,cAAAC,GAAc8B,EAAUC,EAAuBC,qBAAsBjC,GAClFnB,UAAWuC,EAAGC,EAAOa,QAASrD,IAE7BE,EAAMoD,IAAIN,GAGjB"}
+{"version":3,"file":"MultiStepIndicator.js","sources":["../../../../src/components/MultiStepIndicator/MultiStepIndicator.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useMemo } from \"react\";\nimport { Check } from \"@vibe/icons\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport Divider from \"../../components/Divider/Divider\";\nimport { NOOP } from \"@vibe/shared\";\nimport StepIndicator from \"./components/StepIndicator/StepIndicator\";\nimport { type MultiStepType, type MultiStepSize, type TextPlacement, type Step } from \"./MultiStep.types\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./MultiStepIndicator.module.scss\";\n\nexport interface MultiStepIndicatorProps extends VibeComponentProps {\n  /**\n   * The list of steps in the multi-step indicator.\n   */\n  steps?: Step[];\n  /**\n   * The visual style of the multi-step indicator.\n   */\n  type?: MultiStepType;\n  /**\n   * Class name applied to each step component.\n   */\n  stepComponentClassName?: string;\n  /**\n   * Class name applied to the divider between steps.\n   */\n  dividerComponentClassName?: string;\n  /**\n   * The icon used for fulfilled steps.\n   */\n  fulfilledStepIcon?: SubIcon;\n  /**\n   * The type of the fulfilled step icon.\n   */\n  fulfilledStepIconType?: \"svg\" | \"font\";\n  /**\n   * If true, displays the step number instead of the fulfilled step icon.\n   */\n  isFulfilledStepDisplayNumber?: boolean;\n  /**\n   * Callback fired when a step is clicked.\n   */\n  onClick?: (stepNumber: number) => void;\n  /**\n   * The placement of the step text.\n   */\n  textPlacement?: TextPlacement;\n  /**\n   * The size of the multi-step indicator.\n   */\n  size?: MultiStepSize;\n}\n\nconst MultiStepIndicator = forwardRef(\n  (\n    {\n      className,\n      steps = [],\n      type = \"primary\",\n      stepComponentClassName,\n      dividerComponentClassName,\n      fulfilledStepIcon = Check,\n      fulfilledStepIconType = \"svg\",\n      isFulfilledStepDisplayNumber = false,\n      onClick = NOOP,\n      textPlacement = \"horizontal\",\n      id,\n      size,\n      \"data-testid\": dataTestId\n    }: MultiStepIndicatorProps,\n    ref: React.ForwardedRef<HTMLOListElement>\n  ) => {\n    const finalSize = textPlacement === \"vertical\" ? \"regular\" : size;\n\n    const renderHorizontalStepIndicator = useCallback(\n      (step: Step, index: number) => {\n        return (\n          <React.Fragment key={`${step.titleText}_${index}`}>\n            <StepIndicator\n              {...step}\n              stepNumber={index + 1}\n              type={type}\n              stepComponentClassName={stepComponentClassName}\n              fulfilledStepIcon={fulfilledStepIcon}\n              fulfilledStepIconType={fulfilledStepIconType}\n              onClick={onClick}\n              isFulfilledStepDisplayNumber={isFulfilledStepDisplayNumber}\n              size={finalSize}\n            />\n            {index !== steps.length - 1 && (\n              <Divider\n                className={cx(styles.divider, dividerComponentClassName, {\n                  [styles.compact]: finalSize === \"compact\"\n                })}\n              />\n            )}\n          </React.Fragment>\n        );\n      },\n      [\n        onClick,\n        isFulfilledStepDisplayNumber,\n        type,\n        stepComponentClassName,\n        fulfilledStepIcon,\n        fulfilledStepIconType,\n        dividerComponentClassName,\n        steps.length,\n        finalSize\n      ]\n    );\n\n    const renderVerticalStepIndicator = useCallback(\n      (step: Step, index: number) => {\n        return (\n          <StepIndicator\n            {...step}\n            key={`${step.titleText}_${index}`}\n            stepNumber={index + 1}\n            type={type}\n            stepComponentClassName={stepComponentClassName}\n            fulfilledStepIcon={fulfilledStepIcon}\n            fulfilledStepIconType={fulfilledStepIconType}\n            onClick={onClick}\n            isFollowedByDivider={index !== steps.length - 1}\n            stepDividerClassName={cx(styles.divider, dividerComponentClassName)}\n            isVertical\n            isFulfilledStepDisplayNumber={isFulfilledStepDisplayNumber}\n          />\n        );\n      },\n      [\n        onClick,\n        isFulfilledStepDisplayNumber,\n        type,\n        stepComponentClassName,\n        fulfilledStepIcon,\n        fulfilledStepIconType,\n        dividerComponentClassName,\n        steps.length\n      ]\n    );\n\n    const stepRenderer = useMemo(\n      () => (textPlacement === \"vertical\" ? renderVerticalStepIndicator : renderHorizontalStepIndicator),\n      [textPlacement, renderVerticalStepIndicator, renderHorizontalStepIndicator]\n    );\n\n    return (\n      <ol\n        ref={ref}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MULTI_STEP_INDICATOR, id)}\n        className={cx(styles.wrapper, className)}\n      >\n        {steps.map(stepRenderer)}\n      </ol>\n    );\n  }\n);\n\nexport default MultiStepIndicator;\n"],"names":["MultiStepIndicator","forwardRef","_ref","ref","className","_ref$steps","steps","_ref$type","type","stepComponentClassName","dividerComponentClassName","_ref$fulfilledStepIco","fulfilledStepIcon","Check","_ref$fulfilledStepIco2","fulfilledStepIconType","_ref$isFulfilledStepD","isFulfilledStepDisplayNumber","_ref$onClick","onClick","NOOP","_ref$textPlacement","textPlacement","id","dataTestId","finalSize","size","renderHorizontalStepIndicator","useCallback","step","index","React","createElement","Fragment","key","concat","titleText","StepIndicator","Object","assign","stepNumber","length","Divider","cx","styles","divider","_defineProperty","compact","renderVerticalStepIndicator","isFollowedByDivider","stepDividerClassName","isVertical","stepRenderer","useMemo","getTestId","ComponentDefaultTestId","MULTI_STEP_INDICATOR","wrapper","map"],"mappings":"4iBAwDMA,IAAAA,EAAqBC,GACzB,SAAAC,EAgBEC,GACE,IAfAC,EAASF,EAATE,UAASC,EAAAH,EACTI,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAAAL,EACVM,KAAAA,OAAO,IAAHD,EAAG,UAASA,EAChBE,EAAsBP,EAAtBO,uBACAC,EAAyBR,EAAzBQ,0BAAyBC,EAAAT,EACzBU,kBAAAA,OAAoBC,IAAHF,EAAGE,EAAKF,EAAAG,EAAAZ,EACzBa,sBAAAA,OAAwB,IAAHD,EAAG,MAAKA,EAAAE,EAAAd,EAC7Be,6BAAAA,OAA+B,IAAHD,GAAQA,EAAAE,EAAAhB,EACpCiB,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAnB,EACdoB,cAAAA,OAAgB,IAAHD,EAAG,aAAYA,EAC5BE,EAAErB,EAAFqB,GAEeC,EAAUtB,EAAzB,eAIIuB,EAA8B,aAAlBH,EAA+B,UAL3CpB,EAAJwB,KAOIC,EAAgCC,GACpC,SAACC,EAAYC,GACX,OACEC,EAAAC,cAACD,EAAME,SAAS,CAAAC,IAAG,GAAAC,OAAKN,EAAKO,UAAS,KAAAD,OAAIL,IACxCC,EAAAC,cAACK,EACKC,OAAAC,OAAA,CAAA,EAAAV,EACJ,CAAAW,WAAYV,EAAQ,EACpBtB,KAAMA,EACNC,uBAAwBA,EACxBG,kBAAmBA,EACnBG,sBAAuBA,EACvBI,QAASA,EACTF,6BAA8BA,EAC9BS,KAAMD,KAEPK,IAAUxB,EAAMmC,OAAS,GACxBV,EAACC,cAAAU,GACCtC,UAAWuC,EAAGC,EAAOC,QAASnC,EAAyBoC,EAAA,CAAA,EACpDF,EAAOG,QAAwB,YAAdtB,MAM7B,GACD,CACEN,EACAF,EACAT,EACAC,EACAG,EACAG,EACAL,EACAJ,EAAMmC,OACNhB,IAIEuB,EAA8BpB,GAClC,SAACC,EAAYC,GACX,OACEC,EAAAC,cAACK,EAAaC,OAAAC,OAAA,CAAA,EACRV,EACJ,CAAAK,IAAG,GAAAC,OAAKN,EAAKO,UAASD,KAAAA,OAAIL,GAC1BU,WAAYV,EAAQ,EACpBtB,KAAMA,EACNC,uBAAwBA,EACxBG,kBAAmBA,EACnBG,sBAAuBA,EACvBI,QAASA,EACT8B,oBAAqBnB,IAAUxB,EAAMmC,OAAS,EAC9CS,qBAAsBP,EAAGC,EAAOC,QAASnC,GACzCyC,cACAlC,6BAA8BA,IAGnC,GACD,CACEE,EACAF,EACAT,EACAC,EACAG,EACAG,EACAL,EACAJ,EAAMmC,SAIJW,EAAeC,GACnB,WAAA,MAAyB,aAAlB/B,EAA+B0B,EAA8BrB,CAA8B,GAClG,CAACL,EAAe0B,EAA6BrB,IAG/C,OACEI,EACEC,cAAA,KAAA,CAAA7B,IAAKA,EACLoB,GAAIA,EACS,cAAAC,GAAc8B,EAAUC,EAAuBC,qBAAsBjC,GAClFnB,UAAWuC,EAAGC,EAAOa,QAASrD,IAE7BE,EAAMoD,IAAIN,GAGjB"}

package/dist/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.js

@@ -1,2 +1,2 @@
-import{slicedToArray as e,toConsumableArray as t,defineProperty as i}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as n}from"es-toolkit";import{getStyle as a}from"../../../../helpers/typesciptCssModulesHelper.js";import{getTestId as o,ComponentDefaultTestId as r}from"../../../../tests/testIds.js";import l from"classnames";import{keyCodes as s}from"../../../../constants/keyCodes.js";import c,{useState as m,useRef as d,useCallback as p,useEffect as u,useMemo as f}from"react";import{SwitchTransition as v,CSSTransition as y}from"react-transition-group";import _ from"../../../../hooks/useEventListener/index.js";import E from"../../../../hooks/useKeyEvent/index.js";import b from"../../../Divider/Divider.js";import{NOOP as x}from"../../../../utils/function-utils.js";import N from"../../../HiddenText/HiddenText.js";import k from"./StepIndicator.module.scss.js";import C from"../../../../../components/clickable/dist/Clickable/Clickable.js";import I from"../../../../../components/icon/dist/Icon/Icon.js";import S from"../../../../../icons/dist/react/Check.js";var j=[s.ENTER,s.SPACE],T=function(e){var t=e.fulfilledStepIcon,i=e.fulfilledStepIconType;return"fulfilled"!==e.status||e.isFulfilledStepDisplayNumber?c.createElement(c.Fragment,null,e.stepNumber):c.createElement(I,{icon:t,className:l(k.numberContainerTextCheckIcon),type:i,ignoreFocusStyle:!0,"aria-hidden":!0})},A=function(s){var I=s.stepComponentClassName,A=s.stepNumber,g=void 0===A?1:A,D=s.status,h=void 0===D?"pending":D,w=s.titleText,F=void 0===w?"Heading text":w,H=s.subtitleText,P=void 0===H?"Subtitle text":H,L=s.type,R=void 0===L?"primary":L,z=s.fulfilledStepIcon,B=void 0===z?S:z,V=s.fulfilledStepIconType,K=void 0===V?"svg":V,M=s.isFulfilledStepDisplayNumber,O=void 0!==M&&M,q=s.onClick,G=void 0===q?x:q,J=s.isFollowedByDivider,Q=void 0!==J&&J,U=s.stepDividerClassName,W=s.isVertical,X=void 0!==W&&W,Y=s.id,Z=s.size,$=void 0===Z?"regular":Z,ee=s["data-testid"],te=m(!1),ie=e(te,2),ne=ie[0],ae=ie[1],oe=d(null),re=d(null),le=d(h),se=p((function(){ae(!0)}),[ae]),ce=p((function(){ae(!1)}),[ae]),me=p((function(){return le.current!==h}),[le,h]),de=p((function(){G&&G(g)}),[G,g]);_({eventName:"animationend",callback:ce,ref:oe}),E({keys:j,callback:de,ref:oe}),u((function(){me()&&se()}),[h,me,se]),u((function(){le.current=h}),[h]);var pe=f((function(){return"Step ".concat(g,": ").concat(F," - ").concat(P,", status: ").concat(h)}),[h,F,g,P]),ue=function(e){return[a(k,n(e||"indicator")),a(k,n("type-".concat(R).concat(e))),a(k,n("status-".concat(h).concat(e))),a(k,n("size-".concat($).concat(e)))]};return c.createElement(C,{tabIndex:-1,elementType:"li",className:l.apply(void 0,t(ue("")).concat([I,i(i(i({},k.withAnimation,ne),k.clickable,G),k.textPlacementVertical,X)])),"aria-label":pe,onClick:de,"data-testid":ee||o(r.STEP_INDICATOR,Y)},c.createElement("div",{className:l.apply(void 0,t(ue("__number-divider-container")))},c.createElement("div",{className:l.apply(void 0,t(ue("__number-container"))),ref:oe,tabIndex:0,role:"button"},c.createElement(v,{mode:"out-in"},c.createElement(y,{key:h,nodeRef:re,classNames:{enter:k.swapEnter,enterActive:k.swapEnterActive,exit:k.swapExit,exitActive:k.swapExitActive},addEndListener:function(e){var t;null===(t=re.current)||void 0===t||t.addEventListener("transitionend",e,!1)}},c.createElement("span",{ref:re,className:l.apply(void 0,t(ue("__number-container__text")))},c.createElement(T,{fulfilledStepIcon:B,fulfilledStepIconType:K,isFulfilledStepDisplayNumber:O,stepNumber:g,status:h}))))),Q&&X&&c.createElement(b,{className:l(k.divider,U)})),c.createElement("div",{className:l.apply(void 0,t(ue("__text-container")))},c.createElement("div",{className:l.apply(void 0,t(ue("__text-container__title")))},c.createElement(N,{text:h})," ",c.createElement("span",{className:l.apply(void 0,t(ue("__text-container__title__text")))},F)),"compact"!==$?c.createElement("span",{className:l.apply(void 0,t(ue("__text-container__subtitle__text")))},P):null))};export{A as default};
+import{slicedToArray as e,toConsumableArray as t,defineProperty as i}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as n}from"es-toolkit";import{getTestId as a,ComponentDefaultTestId as o}from"../../../../tests/testIds.js";import r from"classnames";import{keyCodes as s}from"../../../../constants/keyCodes.js";import l,{useState as c,useRef as d,useCallback as m,useEffect as p,useMemo as u}from"react";import{SwitchTransition as f,CSSTransition as v}from"react-transition-group";import y from"../../../Divider/Divider.js";import _ from"../../../HiddenText/HiddenText.js";import E from"./StepIndicator.module.scss.js";import b from"../../../../../components/clickable/dist/Clickable/Clickable.js";import x from"../../../../../components/icon/dist/Icon/Icon.js";import N from"../../../../../icons/dist/react/Check.js";import{useEventListener as k}from"../../../../../shared/dist/hooks/useEventListener.js";import{useKeyEvent as C}from"../../../../../shared/dist/hooks/useKeyEvent.js";import{NOOP as I}from"../../../../../shared/dist/utils/function-utils.js";import{getStyle as S}from"../../../../../shared/dist/utils/typesciptCssModulesHelper.js";var j=[s.ENTER,s.SPACE],T=function(e){var t=e.fulfilledStepIcon,i=e.fulfilledStepIconType;return"fulfilled"!==e.status||e.isFulfilledStepDisplayNumber?l.createElement(l.Fragment,null,e.stepNumber):l.createElement(x,{icon:t,className:r(E.numberContainerTextCheckIcon),type:i,ignoreFocusStyle:!0,"aria-hidden":!0})},h=function(s){var x=s.stepComponentClassName,h=s.stepNumber,A=void 0===h?1:h,g=s.status,D=void 0===g?"pending":g,w=s.titleText,F=void 0===w?"Heading text":w,H=s.subtitleText,P=void 0===H?"Subtitle text":H,L=s.type,R=void 0===L?"primary":L,z=s.fulfilledStepIcon,B=void 0===z?N:z,V=s.fulfilledStepIconType,K=void 0===V?"svg":V,M=s.isFulfilledStepDisplayNumber,O=void 0!==M&&M,q=s.onClick,G=void 0===q?I:q,J=s.isFollowedByDivider,Q=void 0!==J&&J,U=s.stepDividerClassName,W=s.isVertical,X=void 0!==W&&W,Y=s.id,Z=s.size,$=void 0===Z?"regular":Z,ee=s["data-testid"],te=c(!1),ie=e(te,2),ne=ie[0],ae=ie[1],oe=d(null),re=d(null),se=d(D),le=m((function(){ae(!0)}),[ae]),ce=m((function(){ae(!1)}),[ae]),de=m((function(){return se.current!==D}),[se,D]),me=m((function(){G&&G(A)}),[G,A]);k({eventName:"animationend",callback:ce,ref:oe}),C({keys:j,callback:me,ref:oe}),p((function(){de()&&le()}),[D,de,le]),p((function(){se.current=D}),[D]);var pe=u((function(){return"Step ".concat(A,": ").concat(F," - ").concat(P,", status: ").concat(D)}),[D,F,A,P]),ue=function(e){return[S(E,n(e||"indicator")),S(E,n("type-".concat(R).concat(e))),S(E,n("status-".concat(D).concat(e))),S(E,n("size-".concat($).concat(e)))]};return l.createElement(b,{tabIndex:-1,elementType:"li",className:r.apply(void 0,t(ue("")).concat([x,i(i(i({},E.withAnimation,ne),E.clickable,G),E.textPlacementVertical,X)])),"aria-label":pe,onClick:me,"data-testid":ee||a(o.STEP_INDICATOR,Y)},l.createElement("div",{className:r.apply(void 0,t(ue("__number-divider-container")))},l.createElement("div",{className:r.apply(void 0,t(ue("__number-container"))),ref:oe,tabIndex:0,role:"button"},l.createElement(f,{mode:"out-in"},l.createElement(v,{key:D,nodeRef:re,classNames:{enter:E.swapEnter,enterActive:E.swapEnterActive,exit:E.swapExit,exitActive:E.swapExitActive},addEndListener:function(e){var t;null===(t=re.current)||void 0===t||t.addEventListener("transitionend",e,!1)}},l.createElement("span",{ref:re,className:r.apply(void 0,t(ue("__number-container__text")))},l.createElement(T,{fulfilledStepIcon:B,fulfilledStepIconType:K,isFulfilledStepDisplayNumber:O,stepNumber:A,status:D}))))),Q&&X&&l.createElement(y,{className:r(E.divider,U)})),l.createElement("div",{className:r.apply(void 0,t(ue("__text-container")))},l.createElement("div",{className:r.apply(void 0,t(ue("__text-container__title")))},l.createElement(_,{text:D})," ",l.createElement("span",{className:r.apply(void 0,t(ue("__text-container__title__text")))},F)),"compact"!==$?l.createElement("span",{className:r.apply(void 0,t(ue("__text-container__subtitle__text")))},P):null))};export{h as default};
 //# sourceMappingURL=StepIndicator.js.map

package/dist/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepIndicator.js","sources":["../../../../../../src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.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 { keyCodes } from \"../../../../constants/keyCodes\";\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { CSSTransition, SwitchTransition } from \"react-transition-group\";\nimport useEventListener from \"../../../../hooks/useEventListener\";\nimport useKeyEvent from \"../../../../hooks/useKeyEvent\";\nimport { Icon } from \"@vibe/icon\";\nimport { Check } from \"@vibe/icons\";\nimport Divider from \"../../../../components/Divider/Divider\";\nimport { NOOP } from \"../../../../utils/function-utils\";\nimport HiddenText from \"../../../../components/HiddenText/HiddenText\";\nimport { Clickable } from \"@vibe/clickable\";\nimport { type MultiStepSize, type MultiStepType, type StepStatus } from \"../../MultiStep.types\";\nimport styles from \"./StepIndicator.module.scss\";\nimport classNames from \"classnames\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\n\nconst KEYS = [keyCodes.ENTER, keyCodes.SPACE];\n\nexport interface StepCircleDisplayProps {\n  /**\n   * The status of the step.\n   */\n  status: StepStatus;\n  /**\n   * If true, displays the step number instead of the fulfilled step icon.\n   */\n  isFulfilledStepDisplayNumber: boolean;\n  /**\n   * The icon displayed when the step is fulfilled.\n   */\n  fulfilledStepIcon: SubIcon;\n  /**\n   * The type of icon used.\n   */\n  fulfilledStepIconType: \"svg\" | \"font\";\n  /**\n   * The step number in the sequence.\n   */\n  stepNumber: number;\n}\n\nconst StepCircleDisplay: React.FC<StepCircleDisplayProps> = ({\n  status,\n  isFulfilledStepDisplayNumber,\n  fulfilledStepIcon,\n  fulfilledStepIconType,\n  stepNumber\n}) => {\n  return status === \"fulfilled\" && !isFulfilledStepDisplayNumber ? (\n    <Icon\n      icon={fulfilledStepIcon}\n      className={classNames(styles.numberContainerTextCheckIcon)}\n      type={fulfilledStepIconType}\n      ignoreFocusStyle\n      aria-hidden={true}\n    />\n  ) : (\n    <>{stepNumber}</>\n  );\n};\n\nexport interface StepIndicatorProps extends VibeComponentProps {\n  /**\n   * The status of the step.\n   */\n  status: StepStatus;\n  /**\n   * The main title text for the step.\n   */\n  titleText: string;\n  /**\n   * The subtitle text for the step.\n   */\n  subtitleText?: string;\n  /**\n   * The number of the step in the sequence.\n   */\n  stepNumber?: number;\n  /**\n   * Class name applied to the step component.\n   */\n  stepComponentClassName?: string;\n  /**\n   * The visual style of the step indicator.\n   */\n  type?: MultiStepType;\n  /**\n   * The icon used for a fulfilled step.\n   */\n  fulfilledStepIcon?: SubIcon;\n  /**\n   * The type of icon used.\n   */\n  fulfilledStepIconType?: \"svg\" | \"font\";\n  /**\n   * If true, displays the step number instead of the fulfilled step icon.\n   */\n  isFulfilledStepDisplayNumber?: boolean;\n  /**\n   * Callback fired when the step is clicked.\n   */\n  onClick?: (stepNumber: number) => void;\n  /**\n   * If true, adds a divider after the step.\n   */\n  isFollowedByDivider?: boolean;\n  /**\n   * Class name applied to the step divider.\n   */\n  stepDividerClassName?: string;\n  /**\n   * If true, the step indicator is displayed vertically.\n   */\n  isVertical?: boolean;\n  /**\n   * The size of the step indicator.\n   */\n  size?: MultiStepSize;\n}\n\nconst StepIndicator: React.FC<StepIndicatorProps> = ({\n  stepComponentClassName,\n  stepNumber = 1,\n  status = \"pending\",\n  titleText = \"Heading text\",\n  subtitleText = \"Subtitle text\",\n  type = \"primary\",\n  fulfilledStepIcon = Check,\n  fulfilledStepIconType = \"svg\",\n  isFulfilledStepDisplayNumber = false,\n  onClick = NOOP,\n  isFollowedByDivider = false,\n  stepDividerClassName,\n  isVertical = false,\n  id,\n  size = \"regular\",\n  \"data-testid\": dataTestId\n}: StepIndicatorProps) => {\n  // Animations state\n  const [statusChangeAnimationState, setStatusChangeAnimationState] = useState(false);\n\n  // Refs\n  const componentRef = useRef(null);\n  const nodeRef = useRef<HTMLSpanElement>(null);\n  const prevStatusRef = useRef(status);\n\n  // Callbacks for modifying animation state\n  const enableStatusChangeAnimation = useCallback(() => {\n    setStatusChangeAnimationState(true);\n  }, [setStatusChangeAnimationState]);\n\n  const disableStatusChangeAnimation = useCallback(() => {\n    setStatusChangeAnimationState(false);\n  }, [setStatusChangeAnimationState]);\n\n  const isStatusTransition = useCallback(() => prevStatusRef.current !== status, [prevStatusRef, status]);\n\n  const handleClick = useCallback(() => {\n    if (onClick) onClick(stepNumber);\n  }, [onClick, stepNumber]);\n\n  // Event listeners for removing animation.\n  useEventListener({\n    eventName: \"animationend\",\n    callback: disableStatusChangeAnimation,\n    ref: componentRef\n  });\n\n  useKeyEvent({\n    keys: KEYS,\n    callback: handleClick,\n    ref: componentRef\n  });\n\n  // Effect - triggering animation when necessary.\n  useEffect(() => {\n    if (isStatusTransition()) {\n      enableStatusChangeAnimation();\n    }\n  }, [status, isStatusTransition, enableStatusChangeAnimation]);\n\n  // Effect - updating previous status ref value (for animation) after component update.\n  useEffect(() => {\n    prevStatusRef.current = status;\n  }, [status]);\n\n  const ariaLabel = useMemo(() => {\n    return `Step ${stepNumber}: ${titleText} - ${subtitleText}, status: ${status}`;\n  }, [status, titleText, stepNumber, subtitleText]);\n\n  const getClassNamesWithSuffix = (suffix: string) => {\n    return [\n      getStyle(styles, camelCase(suffix || \"indicator\")),\n      getStyle(styles, camelCase(`type-${type}${suffix}`)),\n      getStyle(styles, camelCase(`status-${status}${suffix}`)),\n      getStyle(styles, camelCase(`size-${size}${suffix}`))\n    ];\n  };\n\n  return (\n    <Clickable\n      tabIndex={-1}\n      elementType=\"li\"\n      className={cx(...getClassNamesWithSuffix(\"\"), stepComponentClassName, {\n        [styles.withAnimation]: statusChangeAnimationState,\n        [styles.clickable]: onClick,\n        [styles.textPlacementVertical]: isVertical\n      })}\n      aria-label={ariaLabel}\n      onClick={handleClick}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.STEP_INDICATOR, id)}\n    >\n      <div className={cx(...getClassNamesWithSuffix(\"__number-divider-container\"))}>\n        <div\n          className={cx(...getClassNamesWithSuffix(\"__number-container\"))}\n          ref={componentRef}\n          tabIndex={0}\n          role=\"button\"\n        >\n          <SwitchTransition mode=\"out-in\">\n            <CSSTransition\n              key={status}\n              nodeRef={nodeRef}\n              classNames={{\n                enter: styles.swapEnter,\n                enterActive: styles.swapEnterActive,\n                exit: styles.swapExit,\n                exitActive: styles.swapExitActive\n              }}\n              addEndListener={done => {\n                nodeRef.current?.addEventListener(\"transitionend\", done, false);\n              }}\n            >\n              <span ref={nodeRef} className={cx(...getClassNamesWithSuffix(\"__number-container__text\"))}>\n                <StepCircleDisplay\n                  fulfilledStepIcon={fulfilledStepIcon}\n                  fulfilledStepIconType={fulfilledStepIconType}\n                  isFulfilledStepDisplayNumber={isFulfilledStepDisplayNumber}\n                  stepNumber={stepNumber}\n                  status={status}\n                />\n              </span>\n            </CSSTransition>\n          </SwitchTransition>\n        </div>\n        {isFollowedByDivider && isVertical && <Divider className={cx(styles.divider, stepDividerClassName)} />}\n      </div>\n      <div className={cx(...getClassNamesWithSuffix(\"__text-container\"))}>\n        <div className={cx(...getClassNamesWithSuffix(\"__text-container__title\"))}>\n          <HiddenText text={status} /> {/* for accessibility */}\n          <span className={cx(...getClassNamesWithSuffix(\"__text-container__title__text\"))}>{titleText}</span>\n        </div>\n        {size !== \"compact\" ? (\n          <span className={cx(...getClassNamesWithSuffix(\"__text-container__subtitle__text\"))}>{subtitleText}</span>\n        ) : null}\n      </div>\n    </Clickable>\n  );\n};\n\nexport default StepIndicator;\n"],"names":["KEYS","keyCodes","ENTER","SPACE","StepCircleDisplay","_ref","fulfilledStepIcon","fulfilledStepIconType","status","isFulfilledStepDisplayNumber","React","stepNumber","createElement","Icon","icon","className","classNames","styles","numberContainerTextCheckIcon","type","ignoreFocusStyle","StepIndicator","_ref2","stepComponentClassName","_ref2$stepNumber","_ref2$status","_ref2$titleText","titleText","_ref2$subtitleText","subtitleText","_ref2$type","_ref2$fulfilledStepIc","Check","_ref2$fulfilledStepIc2","_ref2$isFulfilledStep","_ref2$onClick","onClick","NOOP","_ref2$isFollowedByDiv","isFollowedByDivider","stepDividerClassName","_ref2$isVertical","isVertical","id","_ref2$size","size","dataTestId","_useState","useState","_useState2","_slicedToArray","statusChangeAnimationState","setStatusChangeAnimationState","componentRef","useRef","nodeRef","prevStatusRef","enableStatusChangeAnimation","useCallback","disableStatusChangeAnimation","isStatusTransition","current","handleClick","useEventListener","eventName","callback","ref","useKeyEvent","keys","useEffect","ariaLabel","useMemo","concat","getClassNamesWithSuffix","suffix","getStyle","camelCase","Clickable","tabIndex","elementType","cx","apply","_toConsumableArray","_defineProperty","withAnimation","clickable","textPlacementVertical","getTestId","ComponentDefaultTestId","STEP_INDICATOR","role","SwitchTransition","mode","CSSTransition","key","enter","swapEnter","enterActive","swapEnterActive","exit","swapExit","exitActive","swapExitActive","addEndListener","done","_a","addEventListener","Divider","divider","HiddenText","text"],"mappings":"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"}
+{"version":3,"file":"StepIndicator.js","sources":["../../../../../../src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { getStyle, NOOP } from \"@vibe/shared\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { keyCodes } from \"../../../../constants/keyCodes\";\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { CSSTransition, SwitchTransition } from \"react-transition-group\";\nimport useEventListener from \"../../../../hooks/useEventListener\";\nimport useKeyEvent from \"../../../../hooks/useKeyEvent\";\nimport { Icon } from \"@vibe/icon\";\nimport { Check } from \"@vibe/icons\";\nimport Divider from \"../../../../components/Divider/Divider\";\n\nimport HiddenText from \"../../../../components/HiddenText/HiddenText\";\nimport { Clickable } from \"@vibe/clickable\";\nimport { type MultiStepSize, type MultiStepType, type StepStatus } from \"../../MultiStep.types\";\nimport styles from \"./StepIndicator.module.scss\";\nimport classNames from \"classnames\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\n\nconst KEYS = [keyCodes.ENTER, keyCodes.SPACE];\n\nexport interface StepCircleDisplayProps {\n  /**\n   * The status of the step.\n   */\n  status: StepStatus;\n  /**\n   * If true, displays the step number instead of the fulfilled step icon.\n   */\n  isFulfilledStepDisplayNumber: boolean;\n  /**\n   * The icon displayed when the step is fulfilled.\n   */\n  fulfilledStepIcon: SubIcon;\n  /**\n   * The type of icon used.\n   */\n  fulfilledStepIconType: \"svg\" | \"font\";\n  /**\n   * The step number in the sequence.\n   */\n  stepNumber: number;\n}\n\nconst StepCircleDisplay: React.FC<StepCircleDisplayProps> = ({\n  status,\n  isFulfilledStepDisplayNumber,\n  fulfilledStepIcon,\n  fulfilledStepIconType,\n  stepNumber\n}) => {\n  return status === \"fulfilled\" && !isFulfilledStepDisplayNumber ? (\n    <Icon\n      icon={fulfilledStepIcon}\n      className={classNames(styles.numberContainerTextCheckIcon)}\n      type={fulfilledStepIconType}\n      ignoreFocusStyle\n      aria-hidden={true}\n    />\n  ) : (\n    <>{stepNumber}</>\n  );\n};\n\nexport interface StepIndicatorProps extends VibeComponentProps {\n  /**\n   * The status of the step.\n   */\n  status: StepStatus;\n  /**\n   * The main title text for the step.\n   */\n  titleText: string;\n  /**\n   * The subtitle text for the step.\n   */\n  subtitleText?: string;\n  /**\n   * The number of the step in the sequence.\n   */\n  stepNumber?: number;\n  /**\n   * Class name applied to the step component.\n   */\n  stepComponentClassName?: string;\n  /**\n   * The visual style of the step indicator.\n   */\n  type?: MultiStepType;\n  /**\n   * The icon used for a fulfilled step.\n   */\n  fulfilledStepIcon?: SubIcon;\n  /**\n   * The type of icon used.\n   */\n  fulfilledStepIconType?: \"svg\" | \"font\";\n  /**\n   * If true, displays the step number instead of the fulfilled step icon.\n   */\n  isFulfilledStepDisplayNumber?: boolean;\n  /**\n   * Callback fired when the step is clicked.\n   */\n  onClick?: (stepNumber: number) => void;\n  /**\n   * If true, adds a divider after the step.\n   */\n  isFollowedByDivider?: boolean;\n  /**\n   * Class name applied to the step divider.\n   */\n  stepDividerClassName?: string;\n  /**\n   * If true, the step indicator is displayed vertically.\n   */\n  isVertical?: boolean;\n  /**\n   * The size of the step indicator.\n   */\n  size?: MultiStepSize;\n}\n\nconst StepIndicator: React.FC<StepIndicatorProps> = ({\n  stepComponentClassName,\n  stepNumber = 1,\n  status = \"pending\",\n  titleText = \"Heading text\",\n  subtitleText = \"Subtitle text\",\n  type = \"primary\",\n  fulfilledStepIcon = Check,\n  fulfilledStepIconType = \"svg\",\n  isFulfilledStepDisplayNumber = false,\n  onClick = NOOP,\n  isFollowedByDivider = false,\n  stepDividerClassName,\n  isVertical = false,\n  id,\n  size = \"regular\",\n  \"data-testid\": dataTestId\n}: StepIndicatorProps) => {\n  // Animations state\n  const [statusChangeAnimationState, setStatusChangeAnimationState] = useState(false);\n\n  // Refs\n  const componentRef = useRef(null);\n  const nodeRef = useRef<HTMLSpanElement>(null);\n  const prevStatusRef = useRef(status);\n\n  // Callbacks for modifying animation state\n  const enableStatusChangeAnimation = useCallback(() => {\n    setStatusChangeAnimationState(true);\n  }, [setStatusChangeAnimationState]);\n\n  const disableStatusChangeAnimation = useCallback(() => {\n    setStatusChangeAnimationState(false);\n  }, [setStatusChangeAnimationState]);\n\n  const isStatusTransition = useCallback(() => prevStatusRef.current !== status, [prevStatusRef, status]);\n\n  const handleClick = useCallback(() => {\n    if (onClick) onClick(stepNumber);\n  }, [onClick, stepNumber]);\n\n  // Event listeners for removing animation.\n  useEventListener({\n    eventName: \"animationend\",\n    callback: disableStatusChangeAnimation,\n    ref: componentRef\n  });\n\n  useKeyEvent({\n    keys: KEYS,\n    callback: handleClick,\n    ref: componentRef\n  });\n\n  // Effect - triggering animation when necessary.\n  useEffect(() => {\n    if (isStatusTransition()) {\n      enableStatusChangeAnimation();\n    }\n  }, [status, isStatusTransition, enableStatusChangeAnimation]);\n\n  // Effect - updating previous status ref value (for animation) after component update.\n  useEffect(() => {\n    prevStatusRef.current = status;\n  }, [status]);\n\n  const ariaLabel = useMemo(() => {\n    return `Step ${stepNumber}: ${titleText} - ${subtitleText}, status: ${status}`;\n  }, [status, titleText, stepNumber, subtitleText]);\n\n  const getClassNamesWithSuffix = (suffix: string) => {\n    return [\n      getStyle(styles, camelCase(suffix || \"indicator\")),\n      getStyle(styles, camelCase(`type-${type}${suffix}`)),\n      getStyle(styles, camelCase(`status-${status}${suffix}`)),\n      getStyle(styles, camelCase(`size-${size}${suffix}`))\n    ];\n  };\n\n  return (\n    <Clickable\n      tabIndex={-1}\n      elementType=\"li\"\n      className={cx(...getClassNamesWithSuffix(\"\"), stepComponentClassName, {\n        [styles.withAnimation]: statusChangeAnimationState,\n        [styles.clickable]: onClick,\n        [styles.textPlacementVertical]: isVertical\n      })}\n      aria-label={ariaLabel}\n      onClick={handleClick}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.STEP_INDICATOR, id)}\n    >\n      <div className={cx(...getClassNamesWithSuffix(\"__number-divider-container\"))}>\n        <div\n          className={cx(...getClassNamesWithSuffix(\"__number-container\"))}\n          ref={componentRef}\n          tabIndex={0}\n          role=\"button\"\n        >\n          <SwitchTransition mode=\"out-in\">\n            <CSSTransition\n              key={status}\n              nodeRef={nodeRef}\n              classNames={{\n                enter: styles.swapEnter,\n                enterActive: styles.swapEnterActive,\n                exit: styles.swapExit,\n                exitActive: styles.swapExitActive\n              }}\n              addEndListener={done => {\n                nodeRef.current?.addEventListener(\"transitionend\", done, false);\n              }}\n            >\n              <span ref={nodeRef} className={cx(...getClassNamesWithSuffix(\"__number-container__text\"))}>\n                <StepCircleDisplay\n                  fulfilledStepIcon={fulfilledStepIcon}\n                  fulfilledStepIconType={fulfilledStepIconType}\n                  isFulfilledStepDisplayNumber={isFulfilledStepDisplayNumber}\n                  stepNumber={stepNumber}\n                  status={status}\n                />\n              </span>\n            </CSSTransition>\n          </SwitchTransition>\n        </div>\n        {isFollowedByDivider && isVertical && <Divider className={cx(styles.divider, stepDividerClassName)} />}\n      </div>\n      <div className={cx(...getClassNamesWithSuffix(\"__text-container\"))}>\n        <div className={cx(...getClassNamesWithSuffix(\"__text-container__title\"))}>\n          <HiddenText text={status} /> {/* for accessibility */}\n          <span className={cx(...getClassNamesWithSuffix(\"__text-container__title__text\"))}>{titleText}</span>\n        </div>\n        {size !== \"compact\" ? (\n          <span className={cx(...getClassNamesWithSuffix(\"__text-container__subtitle__text\"))}>{subtitleText}</span>\n        ) : null}\n      </div>\n    </Clickable>\n  );\n};\n\nexport default StepIndicator;\n"],"names":["KEYS","keyCodes","ENTER","SPACE","StepCircleDisplay","_ref","fulfilledStepIcon","fulfilledStepIconType","status","isFulfilledStepDisplayNumber","React","stepNumber","createElement","Icon","icon","className","classNames","styles","numberContainerTextCheckIcon","type","ignoreFocusStyle","StepIndicator","_ref2","stepComponentClassName","_ref2$stepNumber","_ref2$status","_ref2$titleText","titleText","_ref2$subtitleText","subtitleText","_ref2$type","_ref2$fulfilledStepIc","Check","_ref2$fulfilledStepIc2","_ref2$isFulfilledStep","_ref2$onClick","onClick","NOOP","_ref2$isFollowedByDiv","isFollowedByDivider","stepDividerClassName","_ref2$isVertical","isVertical","id","_ref2$size","size","dataTestId","_useState","useState","_useState2","_slicedToArray","statusChangeAnimationState","setStatusChangeAnimationState","componentRef","useRef","nodeRef","prevStatusRef","enableStatusChangeAnimation","useCallback","disableStatusChangeAnimation","isStatusTransition","current","handleClick","useEventListener","eventName","callback","ref","useKeyEvent","keys","useEffect","ariaLabel","useMemo","concat","getClassNamesWithSuffix","suffix","getStyle","camelCase","Clickable","tabIndex","elementType","cx","apply","_toConsumableArray","_defineProperty","withAnimation","clickable","textPlacementVertical","getTestId","ComponentDefaultTestId","STEP_INDICATOR","role","SwitchTransition","mode","CSSTransition","key","enter","swapEnter","enterActive","swapEnterActive","exit","swapExit","exitActive","swapExitActive","addEndListener","done","_a","addEventListener","Divider","divider","HiddenText","text"],"mappings":"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"}

package/dist/src/components/NumberField/NumberField.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../../_virtual/_tslib.js";import a,{forwardRef as n,useRef as t,useMemo as o}from"react";import r from"classnames";import i from"./hooks/useNumberFieldState.js";import l from"./hooks/useSpinButtonHandlers.js";import s from"../FieldLabel/FieldLabel.js";import d from"../InfoText/InfoText.js";import m from"./components/NumberFieldSpinButton/NumberFieldSpinButton.js";import u from"./NumberField.module.scss.js";import c from"../../hooks/useMergeRef.js";import{ComponentVibeId as p}from"../../tests/constants.js";import f from"../../../components/icon/dist/Icon/Icon.js";import b from"../../../components/layout/dist/Flex/Flex.js";import x from"../../../base/dist/BaseInput/BaseInput.js";var h=n((function(n,h){var v=n.className,y=n.value,O=n.onChange,g=n.label,j=n.required,I=n.placeholder,F=n.infoText,B=n.error,N=n.success,C=n.disabled,E=n.readOnly,w=n.min,M=n.max,D=n.step,R=void 0===D?1:D,T=n.size,V=void 0===T?"medium":T,q=n.leftIcon,z=n["aria-label"],A=n.id,L=n["data-testid"],S=n.allowOutOfBounds,k=n.onValidityChange,_=e(n,["className","value","onChange","label","required","placeholder","infoText","error","success","disabled","readOnly","min","max","step","size","leftIcon","aria-label","id","data-testid","allowOutOfBounds","onValidityChange"]),K=t(null),H=c(h,K),U=i({value:y,onChange:O,min:w,max:M,step:R,disabled:C,readOnly:E,allowOutOfBounds:S,onValidityChange:k}),G=U.inputValue,J=U.numericValue,P=U.onChange,Q=U.onKeyDown,W=U.isAtMin,X=U.isAtMax,Y=l({onChange:O,value:J,step:R,min:w,max:M,allowOutOfBounds:S,readOnly:E,inputRef:K}),Z=Y.onIncrement,$=Y.onDecrement,ee=o((function(){return q?a.createElement(f,{icon:q,className:u.leftIcon}):null}),[q]),ae=o((function(){return a.createElement(m,{inputId:A,onIncrement:Z,onDecrement:$,disabled:C||E,size:V,isAtMin:W,isAtMax:X})}),[A,Z,$,C,E,V,W,X]),ne=o((function(){return F&&A?"".concat(A,"-info-text"):void 0}),[F,A]),te=o((function(){return g&&A?"".concat(A,"-label"):void 0}),[g,A]);return a.createElement(b,{direction:"column",align:"stretch",gap:"xs",className:r(u.numberField,v),"data-vibe":p.NUMBER_FIELD},a.createElement(s,{id:te,className:u.label,labelText:g,required:j,labelFor:A}),a.createElement(x,Object.assign({},_,{"data-testid":L,ref:H,id:A,value:G,onChange:P,onKeyDown:Q,placeholder:I,type:"text",inputMode:"numeric",inputRole:"spinbutton","aria-valuenow":J,"aria-valuemin":w,"aria-valuemax":M,"aria-required":j,"aria-label":z||g,"aria-labelledby":te,"aria-describedby":ne,disabled:C,readOnly:E,size:V,error:B,success:N,renderLeft:ee,renderRight:ae})),a.createElement(d,{id:ne,text:F,error:B,success:N,disabled:C,readOnly:E}))}));export{h as default};
+import{__rest as e}from"../../../_virtual/_tslib.js";import a,{forwardRef as t,useRef as n,useMemo as r}from"react";import o from"classnames";import i from"./hooks/useNumberFieldState.js";import l from"./hooks/useSpinButtonHandlers.js";import s from"../FieldLabel/FieldLabel.js";import d from"../InfoText/InfoText.js";import m from"./components/NumberFieldSpinButton/NumberFieldSpinButton.js";import u from"./NumberField.module.scss.js";import{ComponentVibeId as c}from"../../tests/constants.js";import p from"../../../components/icon/dist/Icon/Icon.js";import f from"../../../components/layout/dist/Flex/Flex.js";import b from"../../../base/dist/BaseInput/BaseInput.js";import{useMergeRef as x}from"../../../shared/dist/hooks/useMergeRef.js";var h=t((function(t,h){var v=t.className,y=t.value,O=t.onChange,g=t.label,j=t.required,I=t.placeholder,F=t.infoText,B=t.error,N=t.success,C=t.disabled,E=t.readOnly,w=t.min,M=t.max,D=t.step,R=void 0===D?1:D,T=t.size,V=void 0===T?"medium":T,q=t.leftIcon,z=t["aria-label"],A=t.id,L=t["data-testid"],S=t.allowOutOfBounds,k=t.onValidityChange,_=e(t,["className","value","onChange","label","required","placeholder","infoText","error","success","disabled","readOnly","min","max","step","size","leftIcon","aria-label","id","data-testid","allowOutOfBounds","onValidityChange"]),K=n(null),H=x(h,K),U=i({value:y,onChange:O,min:w,max:M,step:R,disabled:C,readOnly:E,allowOutOfBounds:S,onValidityChange:k}),G=U.inputValue,J=U.numericValue,P=U.onChange,Q=U.onKeyDown,W=U.isAtMin,X=U.isAtMax,Y=l({onChange:O,value:J,step:R,min:w,max:M,allowOutOfBounds:S,readOnly:E,inputRef:K}),Z=Y.onIncrement,$=Y.onDecrement,ee=r((function(){return q?a.createElement(p,{icon:q,className:u.leftIcon}):null}),[q]),ae=r((function(){return a.createElement(m,{inputId:A,onIncrement:Z,onDecrement:$,disabled:C||E,size:V,isAtMin:W,isAtMax:X})}),[A,Z,$,C,E,V,W,X]),te=r((function(){return F&&A?"".concat(A,"-info-text"):void 0}),[F,A]),ne=r((function(){return g&&A?"".concat(A,"-label"):void 0}),[g,A]);return a.createElement(f,{direction:"column",align:"stretch",gap:"xs",className:o(u.numberField,v),"data-vibe":c.NUMBER_FIELD},a.createElement(s,{id:ne,className:u.label,labelText:g,required:j,labelFor:A}),a.createElement(b,Object.assign({},_,{"data-testid":L,ref:H,id:A,value:G,onChange:P,onKeyDown:Q,placeholder:I,type:"text",inputMode:"numeric",inputRole:"spinbutton","aria-valuenow":J,"aria-valuemin":w,"aria-valuemax":M,"aria-required":j,"aria-label":z||g,"aria-labelledby":ne,"aria-describedby":te,disabled:C,readOnly:E,size:V,error:B,success:N,renderLeft:ee,renderRight:ae})),a.createElement(d,{id:te,text:F,error:B,success:N,disabled:C,readOnly:E}))}));export{h as default};
 //# sourceMappingURL=NumberField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NumberField.js","sources":["../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { type NumberFieldProps } from \"./NumberField.types\";\nimport useNumberFieldState from \"./hooks/useNumberFieldState\";\nimport useSpinButtonHandlers from \"./hooks/useSpinButtonHandlers\";\nimport { BaseInput } from \"@vibe/base\";\nimport FieldLabel from \"../FieldLabel/FieldLabel\";\nimport InfoText from \"../InfoText/InfoText\";\nimport { Icon } from \"@vibe/icon\";\nimport NumberFieldSpinButton from \"./components/NumberFieldSpinButton/NumberFieldSpinButton\";\nimport styles from \"./NumberField.module.scss\";\nimport { Flex } from \"@vibe/layout\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst NumberField = forwardRef(\n  (\n    {\n      className,\n      value,\n      onChange,\n      label,\n      required,\n      placeholder,\n      infoText,\n      error,\n      success,\n      disabled,\n      readOnly,\n      min,\n      max,\n      step = 1,\n      size = \"medium\",\n      leftIcon,\n      \"aria-label\": ariaLabel,\n      id,\n      \"data-testid\": dataTestId,\n      allowOutOfBounds,\n      onValidityChange,\n      ...inputProps\n    }: NumberFieldProps,\n    ref: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const mergedRef = useMergeRef<HTMLInputElement>(ref, inputRef);\n\n    const {\n      inputValue,\n      numericValue,\n      onChange: handleChange,\n      onKeyDown,\n      isAtMin,\n      isAtMax\n    } = useNumberFieldState({\n      value,\n      onChange,\n      min,\n      max,\n      step,\n      disabled,\n      readOnly,\n      allowOutOfBounds,\n      onValidityChange\n    });\n\n    const { onIncrement, onDecrement } = useSpinButtonHandlers({\n      onChange,\n      value: numericValue,\n      step,\n      min,\n      max,\n      allowOutOfBounds,\n      readOnly,\n      inputRef\n    });\n\n    const renderedLeftIcon = useMemo(() => {\n      if (!leftIcon) return null;\n      return <Icon icon={leftIcon} className={styles.leftIcon} />;\n    }, [leftIcon]);\n\n    const renderedRightIcon = useMemo(() => {\n      return (\n        <NumberFieldSpinButton\n          inputId={id}\n          onIncrement={onIncrement}\n          onDecrement={onDecrement}\n          disabled={disabled || readOnly}\n          size={size}\n          isAtMin={isAtMin}\n          isAtMax={isAtMax}\n        />\n      );\n    }, [id, onIncrement, onDecrement, disabled, readOnly, size, isAtMin, isAtMax]);\n\n    const infoTextId = useMemo(() => {\n      return infoText && id ? `${id}-info-text` : undefined;\n    }, [infoText, id]);\n\n    const labelId = useMemo(() => {\n      return label && id ? `${id}-label` : undefined;\n    }, [label, id]);\n\n    return (\n      <Flex\n        direction=\"column\"\n        align=\"stretch\"\n        gap=\"xs\"\n        className={cx(styles.numberField, className)}\n        data-vibe={ComponentVibeId.NUMBER_FIELD}\n      >\n        <FieldLabel id={labelId} className={styles.label} labelText={label} required={required} labelFor={id} />\n        <BaseInput\n          {...inputProps}\n          data-testid={dataTestId}\n          ref={mergedRef}\n          id={id}\n          value={inputValue}\n          onChange={handleChange}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder}\n          type=\"text\"\n          inputMode=\"numeric\"\n          inputRole=\"spinbutton\"\n          aria-valuenow={numericValue}\n          aria-valuemin={min}\n          aria-valuemax={max}\n          aria-required={required}\n          aria-label={ariaLabel || label}\n          aria-labelledby={labelId}\n          aria-describedby={infoTextId}\n          disabled={disabled}\n          readOnly={readOnly}\n          size={size}\n          error={error}\n          success={success}\n          renderLeft={renderedLeftIcon}\n          renderRight={renderedRightIcon}\n        />\n        <InfoText\n          id={infoTextId}\n          text={infoText}\n          error={error}\n          success={success}\n          disabled={disabled}\n          readOnly={readOnly}\n        />\n      </Flex>\n    );\n  }\n);\n\nexport default NumberField;\n"],"names":["NumberField","forwardRef","_a","ref","className","value","onChange","label","required","placeholder","infoText","error","success","disabled","readOnly","min","max","_a$step","step","_a$size","size","leftIcon","ariaLabel","id","dataTestId","allowOutOfBounds","onValidityChange","inputProps","__rest","inputRef","useRef","mergedRef","useMergeRef","_useNumberFieldState","useNumberFieldState","inputValue","numericValue","handleChange","onKeyDown","isAtMin","isAtMax","_useSpinButtonHandler","useSpinButtonHandlers","onIncrement","onDecrement","renderedLeftIcon","useMemo","React","createElement","Icon","icon","styles","renderedRightIcon","NumberFieldSpinButton","inputId","infoTextId","concat","undefined","labelId","Flex","direction","align","gap","cx","numberField","ComponentVibeId","NUMBER_FIELD","FieldLabel","labelText","labelFor","BaseInput","Object","assign","type","inputMode","inputRole","renderLeft","renderRight","InfoText","text"],"mappings":"ysBAeMA,IAAAA,EAAcC,GAClB,SACEC,EAwBAC,OAvBEC,EAoBgBF,EApBhBE,UACAC,EAmBgBH,EAnBhBG,MACAC,EAkBgBJ,EAlBhBI,SACAC,EAiBgBL,EAjBhBK,MACAC,EAgBgBN,EAhBhBM,SACAC,EAegBP,EAfhBO,YACAC,EAcgBR,EAdhBQ,SACAC,EAagBT,EAbhBS,MACAC,EAYgBV,EAZhBU,QACAC,EAWgBX,EAXhBW,SACAC,EAUgBZ,EAVhBY,SACAC,EASgBb,EAThBa,IACAC,EAQgBd,EARhBc,IAAGC,EAQaf,EAPhBgB,KAAAA,OAAO,IAAHD,EAAG,EAACA,EAAAE,EAOQjB,EANhBkB,KAAAA,OAAO,IAAHD,EAAG,SAAQA,EACfE,EAKgBnB,EALhBmB,SACcC,EAIEpB,EAJhB,cACAqB,EAGgBrB,EAHhBqB,GACeC,EAECtB,EAFhB,eACAuB,EACgBvB,EADhBuB,iBACAC,EAAgBxB,EAAhBwB,iBACGC,EAtBLC,EAAA1B,EAAA,CAAA,YAAA,QAAA,WAAA,QAAA,WAAA,cAAA,WAAA,QAAA,UAAA,WAAA,WAAA,MAAA,MAAA,OAAA,OAAA,WAAA,aAAA,KAAA,cAAA,mBAAA,qBA0BM2B,EAAWC,EAAyB,MACpCC,EAAYC,EAA8B7B,EAAK0B,GAErDI,EAOIC,EAAoB,CACtB7B,MAAAA,EACAC,SAAAA,EACAS,IAAAA,EACAC,IAAAA,EACAE,KAAAA,EACAL,SAAAA,EACAC,SAAAA,EACAW,iBAAAA,EACAC,iBAAAA,IAfAS,EAAUF,EAAVE,WACAC,EAAYH,EAAZG,aACUC,EAAYJ,EAAtB3B,SACAgC,EAASL,EAATK,UACAC,EAAON,EAAPM,QACAC,EAAOP,EAAPO,QAaFC,EAAqCC,EAAsB,CACzDpC,SAAAA,EACAD,MAAO+B,EACPlB,KAAAA,EACAH,IAAAA,EACAC,IAAAA,EACAS,iBAAAA,EACAX,SAAAA,EACAe,SAAAA,IARMc,EAAWF,EAAXE,YAAaC,EAAWH,EAAXG,YAWfC,GAAmBC,GAAQ,WAC/B,OAAKzB,EACE0B,EAACC,cAAAC,EAAK,CAAAC,KAAM7B,EAAUjB,UAAW+C,EAAO9B,WADzB,IAExB,GAAG,CAACA,IAEE+B,GAAoBN,GAAQ,WAChC,OACEC,EAAAC,cAACK,EAAqB,CACpBC,QAAS/B,EACToB,YAAaA,EACbC,YAAaA,EACb/B,SAAUA,GAAYC,EACtBM,KAAMA,EACNmB,QAASA,EACTC,QAASA,GAGf,GAAG,CAACjB,EAAIoB,EAAaC,EAAa/B,EAAUC,EAAUM,EAAMmB,EAASC,IAE/De,GAAaT,GAAQ,WACzB,OAAOpC,GAAYa,EAAE,GAAAiC,OAAMjC,qBAAiBkC,CAC9C,GAAG,CAAC/C,EAAUa,IAERmC,GAAUZ,GAAQ,WACtB,OAAOvC,GAASgB,EAAE,GAAAiC,OAAMjC,iBAAakC,CACvC,GAAG,CAAClD,EAAOgB,IAEX,OACEwB,EAAAC,cAACW,EAAI,CACHC,UAAU,SACVC,MAAM,UACNC,IAAI,KACJ1D,UAAW2D,EAAGZ,EAAOa,YAAa5D,GACvB,YAAA6D,EAAgBC,cAE3BnB,EAACC,cAAAmB,GAAW5C,GAAImC,GAAStD,UAAW+C,EAAO5C,MAAO6D,UAAW7D,EAAOC,SAAUA,EAAU6D,SAAU9C,IAClGwB,EAAAC,cAACsB,EACKC,OAAAC,OAAA,CAAA,EAAA7C,iBACSH,EACbrB,IAAK4B,EACLR,GAAIA,EACJlB,MAAO8B,EACP7B,SAAU+B,EACVC,UAAWA,EACX7B,YAAaA,EACbgE,KAAK,OACLC,UAAU,UACVC,UAAU,aAAY,gBACPvC,EAAY,gBACZrB,EACA,gBAAAC,kBACAR,EAAQ,aACXc,GAAaf,EACR,kBAAAmD,sBACCH,GAClB1C,SAAUA,EACVC,SAAUA,EACVM,KAAMA,EACNT,MAAOA,EACPC,QAASA,EACTgE,WAAY/B,GACZgC,YAAazB,MAEfL,EAAAC,cAAC8B,EAAQ,CACPvD,GAAIgC,GACJwB,KAAMrE,EACNC,MAAOA,EACPC,QAASA,EACTC,SAAUA,EACVC,SAAUA,IAIlB"}
+{"version":3,"file":"NumberField.js","sources":["../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { type NumberFieldProps } from \"./NumberField.types\";\nimport useNumberFieldState from \"./hooks/useNumberFieldState\";\nimport useSpinButtonHandlers from \"./hooks/useSpinButtonHandlers\";\nimport { BaseInput } from \"@vibe/base\";\nimport FieldLabel from \"../FieldLabel/FieldLabel\";\nimport InfoText from \"../InfoText/InfoText\";\nimport { Icon } from \"@vibe/icon\";\nimport NumberFieldSpinButton from \"./components/NumberFieldSpinButton/NumberFieldSpinButton\";\nimport styles from \"./NumberField.module.scss\";\nimport { Flex } from \"@vibe/layout\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst NumberField = forwardRef(\n  (\n    {\n      className,\n      value,\n      onChange,\n      label,\n      required,\n      placeholder,\n      infoText,\n      error,\n      success,\n      disabled,\n      readOnly,\n      min,\n      max,\n      step = 1,\n      size = \"medium\",\n      leftIcon,\n      \"aria-label\": ariaLabel,\n      id,\n      \"data-testid\": dataTestId,\n      allowOutOfBounds,\n      onValidityChange,\n      ...inputProps\n    }: NumberFieldProps,\n    ref: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const mergedRef = useMergeRef<HTMLInputElement>(ref, inputRef);\n\n    const {\n      inputValue,\n      numericValue,\n      onChange: handleChange,\n      onKeyDown,\n      isAtMin,\n      isAtMax\n    } = useNumberFieldState({\n      value,\n      onChange,\n      min,\n      max,\n      step,\n      disabled,\n      readOnly,\n      allowOutOfBounds,\n      onValidityChange\n    });\n\n    const { onIncrement, onDecrement } = useSpinButtonHandlers({\n      onChange,\n      value: numericValue,\n      step,\n      min,\n      max,\n      allowOutOfBounds,\n      readOnly,\n      inputRef\n    });\n\n    const renderedLeftIcon = useMemo(() => {\n      if (!leftIcon) return null;\n      return <Icon icon={leftIcon} className={styles.leftIcon} />;\n    }, [leftIcon]);\n\n    const renderedRightIcon = useMemo(() => {\n      return (\n        <NumberFieldSpinButton\n          inputId={id}\n          onIncrement={onIncrement}\n          onDecrement={onDecrement}\n          disabled={disabled || readOnly}\n          size={size}\n          isAtMin={isAtMin}\n          isAtMax={isAtMax}\n        />\n      );\n    }, [id, onIncrement, onDecrement, disabled, readOnly, size, isAtMin, isAtMax]);\n\n    const infoTextId = useMemo(() => {\n      return infoText && id ? `${id}-info-text` : undefined;\n    }, [infoText, id]);\n\n    const labelId = useMemo(() => {\n      return label && id ? `${id}-label` : undefined;\n    }, [label, id]);\n\n    return (\n      <Flex\n        direction=\"column\"\n        align=\"stretch\"\n        gap=\"xs\"\n        className={cx(styles.numberField, className)}\n        data-vibe={ComponentVibeId.NUMBER_FIELD}\n      >\n        <FieldLabel id={labelId} className={styles.label} labelText={label} required={required} labelFor={id} />\n        <BaseInput\n          {...inputProps}\n          data-testid={dataTestId}\n          ref={mergedRef}\n          id={id}\n          value={inputValue}\n          onChange={handleChange}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder}\n          type=\"text\"\n          inputMode=\"numeric\"\n          inputRole=\"spinbutton\"\n          aria-valuenow={numericValue}\n          aria-valuemin={min}\n          aria-valuemax={max}\n          aria-required={required}\n          aria-label={ariaLabel || label}\n          aria-labelledby={labelId}\n          aria-describedby={infoTextId}\n          disabled={disabled}\n          readOnly={readOnly}\n          size={size}\n          error={error}\n          success={success}\n          renderLeft={renderedLeftIcon}\n          renderRight={renderedRightIcon}\n        />\n        <InfoText\n          id={infoTextId}\n          text={infoText}\n          error={error}\n          success={success}\n          disabled={disabled}\n          readOnly={readOnly}\n        />\n      </Flex>\n    );\n  }\n);\n\nexport default NumberField;\n"],"names":["NumberField","forwardRef","_a","ref","className","value","onChange","label","required","placeholder","infoText","error","success","disabled","readOnly","min","max","_a$step","step","_a$size","size","leftIcon","ariaLabel","id","dataTestId","allowOutOfBounds","onValidityChange","inputProps","__rest","inputRef","useRef","mergedRef","useMergeRef","_useNumberFieldState","useNumberFieldState","inputValue","numericValue","handleChange","onKeyDown","isAtMin","isAtMax","_useSpinButtonHandler","useSpinButtonHandlers","onIncrement","onDecrement","renderedLeftIcon","useMemo","React","createElement","Icon","icon","styles","renderedRightIcon","NumberFieldSpinButton","inputId","infoTextId","concat","undefined","labelId","Flex","direction","align","gap","cx","numberField","ComponentVibeId","NUMBER_FIELD","FieldLabel","labelText","labelFor","BaseInput","Object","assign","type","inputMode","inputRole","renderLeft","renderRight","InfoText","text"],"mappings":"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"}

package/dist/src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.js

@@ -1,2 +1,2 @@
-import e from"react";import o from"classnames";import{getStyle as t}from"../../../../helpers/typesciptCssModulesHelper.js";import n from"./NumberFieldSpinButton.module.scss.js";import i from"../../../../../components/layout/dist/Flex/Flex.js";import s from"../../../../../components/icon-button/dist/IconButton/IconButton.js";import r from"../../../../../icons/dist/react/DropdownChevronUp.js";import a from"../../../../../icons/dist/react/DropdownChevronDown.js";var c=function(c){var l=c.inputId,m=c.onIncrement,p=c.onDecrement,d=c.disabled,u=c.isAtMin,f=c.isAtMax,b=o(n.spinButton,t(n,c.size)),j=n.icon;return e.createElement(i,{direction:"column",align:"stretch",justify:"center",onMouseDown:function(e){e.preventDefault()}},e.createElement(s,{"aria-label":"Increase",hideTooltip:!0,"aria-controls":l,tabIndex:-1,onClick:m,disabled:d||f,size:null,className:b,iconClassName:j,icon:r}),e.createElement(s,{"aria-label":"Decrease",hideTooltip:!0,"aria-controls":l,tabIndex:-1,onClick:p,disabled:d||u,size:null,className:b,iconClassName:j,icon:a}))};export{c as default};
+import e from"react";import o from"classnames";import t from"./NumberFieldSpinButton.module.scss.js";import n from"../../../../../components/layout/dist/Flex/Flex.js";import i from"../../../../../components/icon-button/dist/IconButton/IconButton.js";import s from"../../../../../icons/dist/react/DropdownChevronUp.js";import r from"../../../../../icons/dist/react/DropdownChevronDown.js";import{getStyle as a}from"../../../../../shared/dist/utils/typesciptCssModulesHelper.js";var c=function(c){var l=c.inputId,m=c.onIncrement,d=c.onDecrement,p=c.disabled,u=c.isAtMin,f=c.isAtMax,b=o(t.spinButton,a(t,c.size)),j=t.icon;return e.createElement(n,{direction:"column",align:"stretch",justify:"center",onMouseDown:function(e){e.preventDefault()}},e.createElement(i,{"aria-label":"Increase",hideTooltip:!0,"aria-controls":l,tabIndex:-1,onClick:m,disabled:p||f,size:null,className:b,iconClassName:j,icon:s}),e.createElement(i,{"aria-label":"Decrease",hideTooltip:!0,"aria-controls":l,tabIndex:-1,onClick:d,disabled:p||u,size:null,className:b,iconClassName:j,icon:r}))};export{c as default};
 //# sourceMappingURL=NumberFieldSpinButton.js.map

package/dist/src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFieldSpinButton.js","sources":["../../../../../../src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { type NumberFieldSpinButtonProps } from \"./NumberFieldSpinButton.types\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { DropdownChevronUp, DropdownChevronDown } from \"@vibe/icons\";\nimport { Flex } from \"@vibe/layout\";\nimport { getStyle } from \"../../../../helpers/typesciptCssModulesHelper\";\nimport styles from \"./NumberFieldSpinButton.module.scss\";\n\nconst NumberFieldSpinButton = ({\n  inputId,\n  onIncrement,\n  onDecrement,\n  disabled,\n  size,\n  isAtMin,\n  isAtMax\n}: NumberFieldSpinButtonProps) => {\n  const iconButtonClassName = cx(styles.spinButton, getStyle(styles, size));\n  const iconClassName = styles.icon;\n\n  const handleMouseDown = (event: React.MouseEvent) => {\n    // to prevent `IconButton`s from stealing focus\n    event.preventDefault();\n  };\n\n  return (\n    <Flex direction=\"column\" align=\"stretch\" justify=\"center\" onMouseDown={handleMouseDown}>\n      <IconButton\n        aria-label=\"Increase\"\n        hideTooltip\n        aria-controls={inputId}\n        tabIndex={-1}\n        onClick={onIncrement}\n        disabled={disabled || isAtMax}\n        size={null}\n        className={iconButtonClassName}\n        iconClassName={iconClassName}\n        icon={DropdownChevronUp}\n      />\n      <IconButton\n        aria-label=\"Decrease\"\n        hideTooltip\n        aria-controls={inputId}\n        tabIndex={-1}\n        onClick={onDecrement}\n        disabled={disabled || isAtMin}\n        size={null}\n        className={iconButtonClassName}\n        iconClassName={iconClassName}\n        icon={DropdownChevronDown}\n      />\n    </Flex>\n  );\n};\n\nexport default NumberFieldSpinButton;\n"],"names":["NumberFieldSpinButton","_ref","inputId","onIncrement","onDecrement","disabled","isAtMin","isAtMax","iconButtonClassName","cx","styles","spinButton","getStyle","size","iconClassName","icon","React","createElement","Flex","direction","align","justify","onMouseDown","event","preventDefault","IconButton","hideTooltip","tabIndex","onClick","className","DropdownChevronUp","DropdownChevronDown"],"mappings":"gdASA,IAAMA,EAAwB,SAAHC,GAQM,IAP/BC,EAAOD,EAAPC,QACAC,EAAWF,EAAXE,YACAC,EAAWH,EAAXG,YACAC,EAAQJ,EAARI,SAEAC,EAAOL,EAAPK,QACAC,EAAON,EAAPM,QAEMC,EAAsBC,EAAGC,EAAOC,WAAYC,EAASF,EAJvDT,EAAJY,OAKMC,EAAgBJ,EAAOK,KAO7B,OACEC,EAACC,cAAAC,GAAKC,UAAU,SAASC,MAAM,UAAUC,QAAQ,SAASC,YANpC,SAACC,GAEvBA,EAAMC,mBAKJR,EAAAC,cAACQ,EACY,CAAA,aAAA,WACXC,+BACexB,EACfyB,UAAW,EACXC,QAASzB,EACTE,SAAUA,GAAYE,EACtBM,KAAM,KACNgB,UAAWrB,EACXM,cAAeA,EACfC,KAAMe,IAERd,EAAAC,cAACQ,EACY,CAAA,aAAA,WACXC,aAAW,EAAA,gBACIxB,EACfyB,UAAW,EACXC,QAASxB,EACTC,SAAUA,GAAYC,EACtBO,KAAM,KACNgB,UAAWrB,EACXM,cAAeA,EACfC,KAAMgB,IAId"}
+{"version":3,"file":"NumberFieldSpinButton.js","sources":["../../../../../../src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { type NumberFieldSpinButtonProps } from \"./NumberFieldSpinButton.types\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { DropdownChevronUp, DropdownChevronDown } from \"@vibe/icons\";\nimport { Flex } from \"@vibe/layout\";\nimport { getStyle } from \"@vibe/shared\";\nimport styles from \"./NumberFieldSpinButton.module.scss\";\n\nconst NumberFieldSpinButton = ({\n  inputId,\n  onIncrement,\n  onDecrement,\n  disabled,\n  size,\n  isAtMin,\n  isAtMax\n}: NumberFieldSpinButtonProps) => {\n  const iconButtonClassName = cx(styles.spinButton, getStyle(styles, size));\n  const iconClassName = styles.icon;\n\n  const handleMouseDown = (event: React.MouseEvent) => {\n    // to prevent `IconButton`s from stealing focus\n    event.preventDefault();\n  };\n\n  return (\n    <Flex direction=\"column\" align=\"stretch\" justify=\"center\" onMouseDown={handleMouseDown}>\n      <IconButton\n        aria-label=\"Increase\"\n        hideTooltip\n        aria-controls={inputId}\n        tabIndex={-1}\n        onClick={onIncrement}\n        disabled={disabled || isAtMax}\n        size={null}\n        className={iconButtonClassName}\n        iconClassName={iconClassName}\n        icon={DropdownChevronUp}\n      />\n      <IconButton\n        aria-label=\"Decrease\"\n        hideTooltip\n        aria-controls={inputId}\n        tabIndex={-1}\n        onClick={onDecrement}\n        disabled={disabled || isAtMin}\n        size={null}\n        className={iconButtonClassName}\n        iconClassName={iconClassName}\n        icon={DropdownChevronDown}\n      />\n    </Flex>\n  );\n};\n\nexport default NumberFieldSpinButton;\n"],"names":["NumberFieldSpinButton","_ref","inputId","onIncrement","onDecrement","disabled","isAtMin","isAtMax","iconButtonClassName","cx","styles","spinButton","getStyle","size","iconClassName","icon","React","createElement","Flex","direction","align","justify","onMouseDown","event","preventDefault","IconButton","hideTooltip","tabIndex","onClick","className","DropdownChevronUp","DropdownChevronDown"],"mappings":"6dASA,IAAMA,EAAwB,SAAHC,GAQM,IAP/BC,EAAOD,EAAPC,QACAC,EAAWF,EAAXE,YACAC,EAAWH,EAAXG,YACAC,EAAQJ,EAARI,SAEAC,EAAOL,EAAPK,QACAC,EAAON,EAAPM,QAEMC,EAAsBC,EAAGC,EAAOC,WAAYC,EAASF,EAJvDT,EAAJY,OAKMC,EAAgBJ,EAAOK,KAO7B,OACEC,EAACC,cAAAC,GAAKC,UAAU,SAASC,MAAM,UAAUC,QAAQ,SAASC,YANpC,SAACC,GAEvBA,EAAMC,mBAKJR,EAAAC,cAACQ,EACY,CAAA,aAAA,WACXC,+BACexB,EACfyB,UAAW,EACXC,QAASzB,EACTE,SAAUA,GAAYE,EACtBM,KAAM,KACNgB,UAAWrB,EACXM,cAAeA,EACfC,KAAMe,IAERd,EAAAC,cAACQ,EACY,CAAA,aAAA,WACXC,aAAW,EAAA,gBACIxB,EACfyB,UAAW,EACXC,QAASxB,EACTC,SAAUA,GAAYC,EACtBO,KAAM,KACNgB,UAAWrB,EACXM,cAAeA,EACfC,KAAMgB,IAId"}