@mattermost/compass-ui 0.1.0-alpha.20 → 0.1.0-alpha.22

package/dist/components/menu-item/MenuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.cjs","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport type { DataAttributes } from '@/utils/props';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Optional secondary label. */\n  secondaryLabel?: ReactNode;\n  /** Where the secondary label appears. Default: 'below'. */\n  secondaryLabelPosition?: 'inline' | 'below';\n  /** Custom content for the leading slot. When omitted, shows placeholder icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n  leadingVisual?: ReactNode;\n  /** Show the leading visual slot. Default: true. */\n  leadingElement?: boolean;\n  /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n  trailingVisual?: ReactNode;\n  /** Show the trailing visual slot. Default: false. */\n  trailingElement?: boolean;\n  /** Emoji character for custom status, shown inline after the label. */\n  customStatusEmoji?: string;\n  /** Show \"NEW\" label tag. */\n  tag?: boolean;\n  /** Text of the `tag`. Default: \"NEW\". */\n  tagLabel?: ReactNode;\n  /** Inline mention count badge. */\n  mentionCount?: number;\n  /** Destructive (danger) styling. */\n  destructive?: boolean;\n  /** Highlight row (e.g. submenu parent while child menu is open). */\n  active?: boolean;\n}\n\n/**\n * Props a host menu (`Combobox`, `Select`) can set itself on a row: ARIA and\n * selection state, keyboard / pointer handling, and the values it reads from the\n * option object (`label`, `secondaryLabel`, `leadingVisual`, `disabled`). They\n * can't be overridden through `menuItemProps`. This is the full set; each host\n * sets only some of the handlers (`Combobox` uses `onClick`, `Select` uses\n * `onPointerUp`) and passes the other one through. `autoFocus` is excluded too:\n * the host keeps focus on its input / trigger, and a row that grabs focus on\n * mount would take it away.\n */\nexport type MenuItemOwnedProps =\n  | 'id'\n  | 'role'\n  | 'aria-selected'\n  | 'autoFocus'\n  | 'label'\n  | 'secondaryLabel'\n  | 'leadingVisual'\n  | 'leadingElement'\n  | 'trailingElement'\n  | 'disabled'\n  | 'active'\n  | 'children'\n  | 'onClick'\n  | 'onMouseDown'\n  | 'onMouseEnter'\n  | 'onPointerUp';\n\n/**\n * Every `MenuItem` prop a host menu doesn't own (`secondaryLabelPosition`,\n * `trailingVisual`, `tag`, `mentionCount`, `destructive`, `className`, …), so\n * props added to `MenuItem` reach `Combobox` / `Select` rows automatically.\n * `Owned` is the set the host sets itself (default: all of `MenuItemOwnedProps`);\n * a host narrows it so the handlers it doesn't supply can still be passed.\n */\nexport type MenuItemPassthroughProps<\n  Owned extends keyof MenuItemProps = MenuItemOwnedProps,\n> = Partial<Omit<MenuItemProps, Owned>> & DataAttributes;\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(function MenuItem(\n  {\n    label,\n    secondaryLabel,\n    secondaryLabelPosition = 'below',\n    leadingVisual,\n    leadingElement = true,\n    trailingVisual,\n    trailingElement = false,\n    customStatusEmoji,\n    tag = false,\n    tagLabel = 'NEW',\n    mentionCount,\n    destructive = false,\n    active = false,\n    className = '',\n    disabled,\n    type = 'button',\n    ...rest\n  },\n  ref,\n) {\n  const rootClass = [\n    styles['menu-item'],\n    destructive ? styles['menu-item--destructive'] : '',\n    active ? styles['menu-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      ref={ref}\n      className={rootClass}\n      type={type}\n      disabled={disabled}\n      {...rest}\n    >\n      <div className={styles['menu-item__content']}>\n        {leadingElement && (\n          <div className={styles['menu-item__left']}>\n            <span className={styles['menu-item__leading-visual']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {leadingVisual ?? (\n                  <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n                )}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n        <div className={styles['menu-item__middle']}>\n          <div className={styles['menu-item__top-row']}>\n            <span className={styles['menu-item__label']}>{label}</span>\n            {secondaryLabel && secondaryLabelPosition === 'inline' && (\n              <span className={styles['menu-item__secondary-label-inline']}>\n                {secondaryLabel}\n              </span>\n            )}\n            {customStatusEmoji && (\n              <span className={styles['menu-item__custom-status']} aria-hidden>\n                {customStatusEmoji}\n              </span>\n            )}\n            {tag && <Tag label={tagLabel} />}\n            {mentionCount != null && mentionCount > 0 && (\n              <MentionBadge\n                count={mentionCount}\n                location=\"menu-item\"\n                size=\"small\"\n              />\n            )}\n          </div>\n          {secondaryLabel && secondaryLabelPosition === 'below' && (\n            <div className={styles['menu-item__bottom-row']}>\n              <span className={styles['menu-item__secondary-label-below']}>\n                {secondaryLabel}\n              </span>\n            </div>\n          )}\n        </div>\n        {trailingElement && (\n          <div className={styles['menu-item__right']}>\n            <span\n              className={[\n                styles['menu-item__trailing-visual'],\n                !trailingVisual\n                  ? styles['menu-item__trailing-visual--check']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n});\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","tagLabel","mentionCount","destructive","active","className","disabled","type","rest","ref","rootClass","styles","jsx","jsxs","IconSlotContext","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"qbAkFMA,EAAWC,EAAAA,WAA6C,SAC5D,CACE,MAAAC,EACA,eAAAC,EACA,uBAAAC,EAAyB,QACzB,cAAAC,EACA,eAAAC,EAAiB,GACjB,eAAAC,EACA,gBAAAC,EAAkB,GAClB,kBAAAC,EACA,IAAAC,EAAM,GACN,SAAAC,EAAW,MACX,aAAAC,EACA,YAAAC,EAAc,GACd,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,SAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAY,CAChBC,EAAAA,QAAO,WAAW,EAClBR,EAAcQ,EAAAA,QAAO,wBAAwB,EAAI,GACjDP,EAASO,EAAAA,QAAO,mBAAmB,EAAI,GACvCN,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEO,EAAAA,IAAC,SAAA,CACC,IAAAH,EACA,UAAWC,EACX,KAAAH,EACA,SAAAD,EACC,GAAGE,EAEJ,SAAAK,EAAAA,KAAC,MAAA,CAAI,UAAWF,UAAO,oBAAoB,EACxC,SAAA,CAAAf,GACCgB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,iBAAiB,EACtC,SAAAC,EAAAA,IAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,2BAA2B,EAAG,cAAW,GAC/D,eAACG,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,YACCF,EAAAA,IAACG,UAAA,CAAK,MAAOH,MAACI,IAAyB,EAAI,KAAK,KAAK,CAAA,CAEzD,EACF,EACF,EAEFH,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,mBAAmB,EACxC,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACzC,SAAA,CAAAC,MAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,kBAAkB,EAAI,SAAAnB,EAAM,EACnDC,GAAkBC,IAA2B,UAC5CkB,EAAAA,IAAC,QAAK,UAAWD,EAAAA,QAAO,mCAAmC,EACxD,SAAAlB,CAAA,CACH,EAEDM,SACE,OAAA,CAAK,UAAWY,EAAAA,QAAO,0BAA0B,EAAG,cAAW,GAC7D,SAAAZ,CAAA,CACH,EAEDC,GAAOY,EAAAA,IAACK,EAAAA,QAAA,CAAI,MAAOhB,CAAA,CAAU,EAC7BC,GAAgB,MAAQA,EAAe,GACtCU,EAAAA,IAACM,EAAAA,QAAA,CACC,MAAOhB,EACP,SAAS,YACT,KAAK,OAAA,CAAA,CACP,EAEJ,EACCT,GAAkBC,IAA2B,SAC5CkB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,uBAAuB,EAC5C,SAAAC,MAAC,QAAK,UAAWD,EAAAA,QAAO,kCAAkC,EACvD,WACH,CAAA,CACF,CAAA,EAEJ,EACCb,GACCc,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,kBAAkB,EACvC,SAAAC,EAAAA,IAAC,OAAA,CACC,UAAW,CACTD,EAAAA,QAAO,4BAA4B,EAClCd,EAEG,GADAc,UAAO,mCAAmC,CAC1C,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,eAACG,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,SAAAjB,GAAkBe,EAAAA,IAACG,EAAAA,SAAK,MAAOH,MAACO,IAAU,EAAI,KAAK,KAAK,CAAA,CAC3D,CAAA,CAAA,CACF,CACF,CAAA,CAAA,CAEJ,CAAA,CAAA,CAGN,CAAC,EAED7B,EAAS,YAAc"}
+{"version":3,"file":"MenuItem.cjs","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport type { DataAttributes } from '@/utils/props';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Optional secondary label. */\n  secondaryLabel?: ReactNode;\n  /** Where the secondary label appears. Default: 'below'. */\n  secondaryLabelPosition?: 'inline' | 'below';\n  /**\n   * Custom content for the leading slot. When omitted, shows placeholder icon.\n   * When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides\n   * the correct size via context. A 24px avatar (User Avatar or Team Avatar)\n   * fills the same slot as that icon, so the label stays on the same line.\n   */\n  leadingVisual?: ReactNode;\n  /** Show the leading visual slot. Default: true. */\n  leadingElement?: boolean;\n  /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n  trailingVisual?: ReactNode;\n  /** Show the trailing visual slot. Default: false. */\n  trailingElement?: boolean;\n  /** Emoji character for custom status, shown inline after the label. */\n  customStatusEmoji?: string;\n  /** Show \"NEW\" label tag. */\n  tag?: boolean;\n  /** Text of the `tag`. Default: \"NEW\". */\n  tagLabel?: ReactNode;\n  /** Inline mention count badge. */\n  mentionCount?: number;\n  /** Destructive (danger) styling. */\n  destructive?: boolean;\n  /** Highlight row (e.g. submenu parent while child menu is open). */\n  active?: boolean;\n}\n\n/**\n * Props a host menu (`Combobox`, `Select`) can set itself on a row: ARIA and\n * selection state, keyboard / pointer handling, and the values it reads from the\n * option object (`label`, `secondaryLabel`, `leadingVisual`, `disabled`). They\n * can't be overridden through `menuItemProps`. This is the full set; each host\n * sets only some of the handlers (`Combobox` uses `onClick`, `Select` uses\n * `onPointerUp`) and passes the other one through. `autoFocus` is excluded too:\n * the host keeps focus on its input / trigger, and a row that grabs focus on\n * mount would take it away.\n */\nexport type MenuItemOwnedProps =\n  | 'id'\n  | 'role'\n  | 'aria-selected'\n  | 'autoFocus'\n  | 'label'\n  | 'secondaryLabel'\n  | 'leadingVisual'\n  | 'leadingElement'\n  | 'trailingElement'\n  | 'disabled'\n  | 'active'\n  | 'children'\n  | 'onClick'\n  | 'onMouseDown'\n  | 'onMouseEnter'\n  | 'onPointerUp';\n\n/**\n * Every `MenuItem` prop a host menu doesn't own (`secondaryLabelPosition`,\n * `trailingVisual`, `tag`, `mentionCount`, `destructive`, `className`, …), so\n * props added to `MenuItem` reach `Combobox` / `Select` rows automatically.\n * `Owned` is the set the host sets itself (default: all of `MenuItemOwnedProps`);\n * a host narrows it so the handlers it doesn't supply can still be passed.\n */\nexport type MenuItemPassthroughProps<\n  Owned extends keyof MenuItemProps = MenuItemOwnedProps,\n> = Partial<Omit<MenuItemProps, Owned>> & DataAttributes;\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(function MenuItem(\n  {\n    label,\n    secondaryLabel,\n    secondaryLabelPosition = 'below',\n    leadingVisual,\n    leadingElement = true,\n    trailingVisual,\n    trailingElement = false,\n    customStatusEmoji,\n    tag = false,\n    tagLabel = 'NEW',\n    mentionCount,\n    destructive = false,\n    active = false,\n    className = '',\n    disabled,\n    type = 'button',\n    ...rest\n  },\n  ref,\n) {\n  const rootClass = [\n    styles['menu-item'],\n    destructive ? styles['menu-item--destructive'] : '',\n    active ? styles['menu-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      ref={ref}\n      className={rootClass}\n      type={type}\n      disabled={disabled}\n      {...rest}\n    >\n      <div className={styles['menu-item__content']}>\n        {leadingElement && (\n          <div className={styles['menu-item__left']}>\n            <span className={styles['menu-item__leading-visual']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {leadingVisual ?? (\n                  <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n                )}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n        <div className={styles['menu-item__middle']}>\n          <div className={styles['menu-item__top-row']}>\n            <span className={styles['menu-item__label']}>{label}</span>\n            {secondaryLabel && secondaryLabelPosition === 'inline' && (\n              <span className={styles['menu-item__secondary-label-inline']}>\n                {secondaryLabel}\n              </span>\n            )}\n            {customStatusEmoji && (\n              <span className={styles['menu-item__custom-status']} aria-hidden>\n                {customStatusEmoji}\n              </span>\n            )}\n            {tag && <Tag label={tagLabel} />}\n            {mentionCount != null && mentionCount > 0 && (\n              <MentionBadge\n                count={mentionCount}\n                location=\"menu-item\"\n                size=\"small\"\n              />\n            )}\n          </div>\n          {secondaryLabel && secondaryLabelPosition === 'below' && (\n            <div className={styles['menu-item__bottom-row']}>\n              <span className={styles['menu-item__secondary-label-below']}>\n                {secondaryLabel}\n              </span>\n            </div>\n          )}\n        </div>\n        {trailingElement && (\n          <div className={styles['menu-item__right']}>\n            <span\n              className={[\n                styles['menu-item__trailing-visual'],\n                !trailingVisual\n                  ? styles['menu-item__trailing-visual--check']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n});\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","tagLabel","mentionCount","destructive","active","className","disabled","type","rest","ref","rootClass","styles","jsx","jsxs","IconSlotContext","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"qbAuFMA,EAAWC,EAAAA,WAA6C,SAC5D,CACE,MAAAC,EACA,eAAAC,EACA,uBAAAC,EAAyB,QACzB,cAAAC,EACA,eAAAC,EAAiB,GACjB,eAAAC,EACA,gBAAAC,EAAkB,GAClB,kBAAAC,EACA,IAAAC,EAAM,GACN,SAAAC,EAAW,MACX,aAAAC,EACA,YAAAC,EAAc,GACd,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,SAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAY,CAChBC,EAAAA,QAAO,WAAW,EAClBR,EAAcQ,EAAAA,QAAO,wBAAwB,EAAI,GACjDP,EAASO,EAAAA,QAAO,mBAAmB,EAAI,GACvCN,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEO,EAAAA,IAAC,SAAA,CACC,IAAAH,EACA,UAAWC,EACX,KAAAH,EACA,SAAAD,EACC,GAAGE,EAEJ,SAAAK,EAAAA,KAAC,MAAA,CAAI,UAAWF,UAAO,oBAAoB,EACxC,SAAA,CAAAf,GACCgB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,iBAAiB,EACtC,SAAAC,EAAAA,IAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,2BAA2B,EAAG,cAAW,GAC/D,eAACG,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,YACCF,EAAAA,IAACG,UAAA,CAAK,MAAOH,MAACI,IAAyB,EAAI,KAAK,KAAK,CAAA,CAEzD,EACF,EACF,EAEFH,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,mBAAmB,EACxC,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACzC,SAAA,CAAAC,MAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,kBAAkB,EAAI,SAAAnB,EAAM,EACnDC,GAAkBC,IAA2B,UAC5CkB,EAAAA,IAAC,QAAK,UAAWD,EAAAA,QAAO,mCAAmC,EACxD,SAAAlB,CAAA,CACH,EAEDM,SACE,OAAA,CAAK,UAAWY,EAAAA,QAAO,0BAA0B,EAAG,cAAW,GAC7D,SAAAZ,CAAA,CACH,EAEDC,GAAOY,EAAAA,IAACK,EAAAA,QAAA,CAAI,MAAOhB,CAAA,CAAU,EAC7BC,GAAgB,MAAQA,EAAe,GACtCU,EAAAA,IAACM,EAAAA,QAAA,CACC,MAAOhB,EACP,SAAS,YACT,KAAK,OAAA,CAAA,CACP,EAEJ,EACCT,GAAkBC,IAA2B,SAC5CkB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,uBAAuB,EAC5C,SAAAC,MAAC,QAAK,UAAWD,EAAAA,QAAO,kCAAkC,EACvD,WACH,CAAA,CACF,CAAA,EAEJ,EACCb,GACCc,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,kBAAkB,EACvC,SAAAC,EAAAA,IAAC,OAAA,CACC,UAAW,CACTD,EAAAA,QAAO,4BAA4B,EAClCd,EAEG,GADAc,UAAO,mCAAmC,CAC1C,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,eAACG,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,SAAAjB,GAAkBe,EAAAA,IAACG,EAAAA,SAAK,MAAOH,MAACO,IAAU,EAAI,KAAK,KAAK,CAAA,CAC3D,CAAA,CAAA,CACF,CACF,CAAA,CAAA,CAEJ,CAAA,CAAA,CAGN,CAAC,EAED7B,EAAS,YAAc"}

package/dist/components/menu-item/MenuItem.css

@@ -1 +1 @@
-._menu-item_1ilsv_2{display:flex;flex-direction:column;align-items:flex-start;padding:var(--spacing-xxs) var(--spacing-l);background-color:var(--center-channel-bg);border:none;width:100%;text-align:left;cursor:pointer;font-family:var(--font-family-body);color:var(--center-channel-color);transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._menu-item_1ilsv_2:focus-visible{outline:none;background-color:var(--center-channel-bg);box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._menu-item_1ilsv_2:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._menu-item_1ilsv_2:active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._menu-item--active_1ilsv_27:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._menu-item--active_1ilsv_27:not(:disabled) ._menu-item__leading-visual_1ilsv_30,._menu-item--active_1ilsv_27:not(:disabled) ._menu-item__trailing-visual_1ilsv_31{color:rgba(var(--center-channel-color-rgb),.72)}._menu-item--active_1ilsv_27:hover:not(:disabled){background-color:rgba(var(--button-bg-rgb),.12)}._menu-item--active_1ilsv_27:focus-visible:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._menu-item_1ilsv_2:disabled{cursor:not-allowed}._menu-item_1ilsv_2:disabled ._menu-item__content_1ilsv_44{opacity:.4}._menu-item__content_1ilsv_44{display:flex;gap:var(--spacing-xxs);align-items:flex-start;width:100%}._menu-item__left_1ilsv_53{display:flex;align-items:center;flex-shrink:0}._menu-item__leading-visual_1ilsv_30,._menu-item__trailing-visual_1ilsv_31{display:flex;align-items:center;padding:var(--spacing-xxxs);flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._menu-item__trailing-visual--check_1ilsv_65{color:var(--button-bg)}._menu-item__middle_1ilsv_68{align-self:stretch;flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:var(--spacing-xxxs);align-items:flex-start;justify-content:center;padding-top:var(--spacing-xxxxs);padding-bottom:var(--spacing-xxxxs)}._menu-item__top-row_1ilsv_80{display:flex;gap:var(--spacing-xs);align-items:center;padding-inline:var(--spacing-xxxs);width:100%;flex-shrink:0}._menu-item__label_1ilsv_88{font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-regular);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}._menu-item__secondary-label-inline_1ilsv_97{font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);opacity:.75;white-space:nowrap;flex-shrink:0}._menu-item__bottom-row_1ilsv_105{display:flex;align-items:center;padding:0 var(--spacing-xxxs) var(--spacing-xxxxs);width:100%;flex-shrink:0}._menu-item__secondary-label-below_1ilsv_112{display:flex;align-items:center;font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);opacity:.75;flex:1 0 0;min-width:0;text-align:left}._menu-item__custom-status_1ilsv_123{display:flex;align-items:center;font-size:var(--font-size-200);line-height:1;flex-shrink:0;opacity:.8;-webkit-user-select:none;user-select:none}._menu-item__right_1ilsv_132{align-self:stretch;display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}._menu-item--destructive_1ilsv_139,._menu-item--destructive_1ilsv_139 ._menu-item__leading-visual_1ilsv_30,._menu-item--destructive_1ilsv_139 ._menu-item__trailing-visual_1ilsv_31{color:var(--error-text, var(--color-danger))}._menu-item--destructive_1ilsv_139:hover:not(:disabled){background-color:var(--error-text, var(--color-danger));color:var(--button-color)}._menu-item--destructive_1ilsv_139:hover:not(:disabled) ._menu-item__leading-visual_1ilsv_30,._menu-item--destructive_1ilsv_139:hover:not(:disabled) ._menu-item__trailing-visual_1ilsv_31{color:inherit}._menu-item--destructive_1ilsv_139:active:not(:disabled){background:linear-gradient(0deg,rgba(var(--button-color-rgb),.1),rgba(var(--button-color-rgb),.1)),var(--error-text, var(--color-danger));color:var(--button-color)}._menu-item--destructive_1ilsv_139:active:not(:disabled) ._menu-item__leading-visual_1ilsv_30,._menu-item--destructive_1ilsv_139:active:not(:disabled) ._menu-item__trailing-visual_1ilsv_31{color:inherit}._menu-item--destructive_1ilsv_139:focus-visible{background-color:var(--error-text, var(--color-danger));box-shadow:inset 0 0 0 2px rgba(var(--button-color-rgb),.6);color:var(--button-color)}._menu-item--destructive_1ilsv_139:focus-visible ._menu-item__leading-visual_1ilsv_30,._menu-item--destructive_1ilsv_139:focus-visible ._menu-item__trailing-visual_1ilsv_31{color:inherit}
+._menu-item_1nie0_2{display:flex;flex-direction:column;align-items:flex-start;padding:var(--spacing-xxs) var(--spacing-l);background-color:var(--center-channel-bg);border:none;width:100%;text-align:left;cursor:pointer;font-family:var(--font-family-body);color:var(--center-channel-color);transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._menu-item_1nie0_2:focus-visible{outline:none;background-color:var(--center-channel-bg);box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._menu-item_1nie0_2:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._menu-item_1nie0_2:active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._menu-item--active_1nie0_27:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._menu-item--active_1nie0_27:not(:disabled) ._menu-item__leading-visual_1nie0_30,._menu-item--active_1nie0_27:not(:disabled) ._menu-item__trailing-visual_1nie0_31{color:rgba(var(--center-channel-color-rgb),.72)}._menu-item--active_1nie0_27:hover:not(:disabled){background-color:rgba(var(--button-bg-rgb),.12)}._menu-item--active_1nie0_27:focus-visible:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._menu-item_1nie0_2:disabled{cursor:not-allowed}._menu-item_1nie0_2:disabled ._menu-item__content_1nie0_44{opacity:.4}._menu-item__content_1nie0_44{display:flex;gap:var(--spacing-xxs);align-items:flex-start;width:100%}._menu-item__left_1nie0_53{display:flex;align-items:center;flex-shrink:0}._menu-item__leading-visual_1nie0_30,._menu-item__trailing-visual_1nie0_31{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._menu-item__leading-visual_1nie0_30{box-sizing:border-box;min-width:calc(var(--icon-size-16) + var(--spacing-xxxs) * 2);min-height:calc(var(--icon-size-16) + var(--spacing-xxxs) * 2)}._menu-item__trailing-visual_1nie0_31{padding:var(--spacing-xxxs)}._menu-item__trailing-visual_1nie0_31 kbd{padding:0;background:transparent;font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.72)}._menu-item__trailing-visual_1nie0_31 kbd+kbd{margin-inline-start:var(--spacing-xxxs)}._menu-item__trailing-visual--check_1nie0_82{color:var(--button-bg)}._menu-item__middle_1nie0_85{align-self:stretch;flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:var(--menu-item-label-gap, var(--spacing-xxxs));align-items:flex-start;justify-content:center;padding-top:var(--spacing-xxxxs);padding-bottom:var(--spacing-xxxxs)}._menu-item__top-row_1nie0_97{display:flex;gap:var(--spacing-xs);align-items:center;padding-inline:var(--spacing-xxxs);width:100%;flex-shrink:0}._menu-item__label_1nie0_105{font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-regular);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}._menu-item__secondary-label-inline_1nie0_114{font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);opacity:.75;white-space:nowrap;flex-shrink:0}._menu-item__bottom-row_1nie0_122{display:flex;align-items:center;padding:0 var(--spacing-xxxs) var(--spacing-xxxxs);width:100%;flex-shrink:0}._menu-item__secondary-label-below_1nie0_129{display:flex;align-items:center;font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);opacity:.75;flex:1 0 0;min-width:0;text-align:left}._menu-item__custom-status_1nie0_140{display:flex;align-items:center;font-size:var(--font-size-200);line-height:1;flex-shrink:0;opacity:.8;-webkit-user-select:none;user-select:none}._menu-item__right_1nie0_149{align-self:center;display:flex;align-items:center;justify-content:flex-end;flex-shrink:0;height:var(--spacing-xxl)}._menu-item--destructive_1nie0_157,._menu-item--destructive_1nie0_157 ._menu-item__leading-visual_1nie0_30,._menu-item--destructive_1nie0_157 ._menu-item__trailing-visual_1nie0_31,._menu-item--destructive_1nie0_157 ._menu-item__trailing-visual_1nie0_31 kbd{color:var(--error-text, var(--color-danger))}._menu-item--destructive_1nie0_157:hover:not(:disabled){background-color:var(--error-text, var(--color-danger));color:var(--button-color)}._menu-item--destructive_1nie0_157:hover:not(:disabled) ._menu-item__leading-visual_1nie0_30,._menu-item--destructive_1nie0_157:hover:not(:disabled) ._menu-item__trailing-visual_1nie0_31,._menu-item--destructive_1nie0_157:hover:not(:disabled) ._menu-item__trailing-visual_1nie0_31 kbd{color:inherit}._menu-item--destructive_1nie0_157:active:not(:disabled){background:linear-gradient(0deg,rgba(var(--button-color-rgb),.1),rgba(var(--button-color-rgb),.1)),var(--error-text, var(--color-danger));color:var(--button-color)}._menu-item--destructive_1nie0_157:active:not(:disabled) ._menu-item__leading-visual_1nie0_30,._menu-item--destructive_1nie0_157:active:not(:disabled) ._menu-item__trailing-visual_1nie0_31,._menu-item--destructive_1nie0_157:active:not(:disabled) ._menu-item__trailing-visual_1nie0_31 kbd{color:inherit}._menu-item--destructive_1nie0_157:focus-visible{background-color:var(--error-text, var(--color-danger));box-shadow:inset 0 0 0 2px rgba(var(--button-color-rgb),.6);color:var(--button-color)}._menu-item--destructive_1nie0_157:focus-visible ._menu-item__leading-visual_1nie0_30,._menu-item--destructive_1nie0_157:focus-visible ._menu-item__trailing-visual_1nie0_31,._menu-item--destructive_1nie0_157:focus-visible ._menu-item__trailing-visual_1nie0_31 kbd{color:inherit}

package/dist/components/menu-item/MenuItem.d.ts

@@ -7,7 +7,12 @@ export interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     secondaryLabel?: ReactNode;
     /** Where the secondary label appears. Default: 'below'. */
     secondaryLabelPosition?: 'inline' | 'below';
-    /** Custom content for the leading slot. When omitted, shows placeholder icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */
+    /**
+     * Custom content for the leading slot. When omitted, shows placeholder icon.
+     * When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides
+     * the correct size via context. A 24px avatar (User Avatar or Team Avatar)
+     * fills the same slot as that icon, so the label stays on the same line.
+     */
     leadingVisual?: ReactNode;
     /** Show the leading visual slot. Default: true. */
     leadingElement?: boolean;

package/dist/components/menu-item/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/menu-item/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAO9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAGpD,MAAM,WAAW,aAAc,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC5E,4EAA4E;IAC5E,KAAK,EAAE,SAAS,CAAC;IACjB,gCAAgC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,2DAA2D;IAC3D,sBAAsB,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5C,6LAA6L;IAC7L,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kNAAkN;IAClN,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,qDAAqD;IACrD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,yCAAyC;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,kBAAkB,GAC1B,IAAI,GACJ,MAAM,GACN,eAAe,GACf,WAAW,GACX,OAAO,GACP,gBAAgB,GAChB,eAAe,GACf,gBAAgB,GAChB,iBAAiB,GACjB,UAAU,GACV,QAAQ,GACR,UAAU,GACV,SAAS,GACT,aAAa,GACb,cAAc,GACd,aAAa,CAAC;AAElB;;;;;;GAMG;AACH,MAAM,MAAM,wBAAwB,CAClC,KAAK,SAAS,MAAM,aAAa,GAAG,kBAAkB,IACpD,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,GAAG,cAAc,CAAC;AAEzD;;;GAGG;AACH,QAAA,MAAM,QAAQ,6GAsGZ,CAAC;AAIH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/menu-item/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAO9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAGpD,MAAM,WAAW,aAAc,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC5E,4EAA4E;IAC5E,KAAK,EAAE,SAAS,CAAC;IACjB,gCAAgC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,2DAA2D;IAC3D,sBAAsB,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5C;;;;;OAKG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kNAAkN;IAClN,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,qDAAqD;IACrD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,yCAAyC;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,kBAAkB,GAC1B,IAAI,GACJ,MAAM,GACN,eAAe,GACf,WAAW,GACX,OAAO,GACP,gBAAgB,GAChB,eAAe,GACf,gBAAgB,GAChB,iBAAiB,GACjB,UAAU,GACV,QAAQ,GACR,UAAU,GACV,SAAS,GACT,aAAa,GACb,cAAc,GACd,aAAa,CAAC;AAElB;;;;;;GAMG;AACH,MAAM,MAAM,wBAAwB,CAClC,KAAK,SAAS,MAAM,aAAa,GAAG,kBAAkB,IACpD,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,GAAG,cAAc,CAAC;AAEzD;;;GAGG;AACH,QAAA,MAAM,QAAQ,6GAsGZ,CAAC;AAIH,eAAe,QAAQ,CAAC"}

package/dist/components/menu-item/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport type { DataAttributes } from '@/utils/props';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Optional secondary label. */\n  secondaryLabel?: ReactNode;\n  /** Where the secondary label appears. Default: 'below'. */\n  secondaryLabelPosition?: 'inline' | 'below';\n  /** Custom content for the leading slot. When omitted, shows placeholder icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n  leadingVisual?: ReactNode;\n  /** Show the leading visual slot. Default: true. */\n  leadingElement?: boolean;\n  /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n  trailingVisual?: ReactNode;\n  /** Show the trailing visual slot. Default: false. */\n  trailingElement?: boolean;\n  /** Emoji character for custom status, shown inline after the label. */\n  customStatusEmoji?: string;\n  /** Show \"NEW\" label tag. */\n  tag?: boolean;\n  /** Text of the `tag`. Default: \"NEW\". */\n  tagLabel?: ReactNode;\n  /** Inline mention count badge. */\n  mentionCount?: number;\n  /** Destructive (danger) styling. */\n  destructive?: boolean;\n  /** Highlight row (e.g. submenu parent while child menu is open). */\n  active?: boolean;\n}\n\n/**\n * Props a host menu (`Combobox`, `Select`) can set itself on a row: ARIA and\n * selection state, keyboard / pointer handling, and the values it reads from the\n * option object (`label`, `secondaryLabel`, `leadingVisual`, `disabled`). They\n * can't be overridden through `menuItemProps`. This is the full set; each host\n * sets only some of the handlers (`Combobox` uses `onClick`, `Select` uses\n * `onPointerUp`) and passes the other one through. `autoFocus` is excluded too:\n * the host keeps focus on its input / trigger, and a row that grabs focus on\n * mount would take it away.\n */\nexport type MenuItemOwnedProps =\n  | 'id'\n  | 'role'\n  | 'aria-selected'\n  | 'autoFocus'\n  | 'label'\n  | 'secondaryLabel'\n  | 'leadingVisual'\n  | 'leadingElement'\n  | 'trailingElement'\n  | 'disabled'\n  | 'active'\n  | 'children'\n  | 'onClick'\n  | 'onMouseDown'\n  | 'onMouseEnter'\n  | 'onPointerUp';\n\n/**\n * Every `MenuItem` prop a host menu doesn't own (`secondaryLabelPosition`,\n * `trailingVisual`, `tag`, `mentionCount`, `destructive`, `className`, …), so\n * props added to `MenuItem` reach `Combobox` / `Select` rows automatically.\n * `Owned` is the set the host sets itself (default: all of `MenuItemOwnedProps`);\n * a host narrows it so the handlers it doesn't supply can still be passed.\n */\nexport type MenuItemPassthroughProps<\n  Owned extends keyof MenuItemProps = MenuItemOwnedProps,\n> = Partial<Omit<MenuItemProps, Owned>> & DataAttributes;\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(function MenuItem(\n  {\n    label,\n    secondaryLabel,\n    secondaryLabelPosition = 'below',\n    leadingVisual,\n    leadingElement = true,\n    trailingVisual,\n    trailingElement = false,\n    customStatusEmoji,\n    tag = false,\n    tagLabel = 'NEW',\n    mentionCount,\n    destructive = false,\n    active = false,\n    className = '',\n    disabled,\n    type = 'button',\n    ...rest\n  },\n  ref,\n) {\n  const rootClass = [\n    styles['menu-item'],\n    destructive ? styles['menu-item--destructive'] : '',\n    active ? styles['menu-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      ref={ref}\n      className={rootClass}\n      type={type}\n      disabled={disabled}\n      {...rest}\n    >\n      <div className={styles['menu-item__content']}>\n        {leadingElement && (\n          <div className={styles['menu-item__left']}>\n            <span className={styles['menu-item__leading-visual']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {leadingVisual ?? (\n                  <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n                )}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n        <div className={styles['menu-item__middle']}>\n          <div className={styles['menu-item__top-row']}>\n            <span className={styles['menu-item__label']}>{label}</span>\n            {secondaryLabel && secondaryLabelPosition === 'inline' && (\n              <span className={styles['menu-item__secondary-label-inline']}>\n                {secondaryLabel}\n              </span>\n            )}\n            {customStatusEmoji && (\n              <span className={styles['menu-item__custom-status']} aria-hidden>\n                {customStatusEmoji}\n              </span>\n            )}\n            {tag && <Tag label={tagLabel} />}\n            {mentionCount != null && mentionCount > 0 && (\n              <MentionBadge\n                count={mentionCount}\n                location=\"menu-item\"\n                size=\"small\"\n              />\n            )}\n          </div>\n          {secondaryLabel && secondaryLabelPosition === 'below' && (\n            <div className={styles['menu-item__bottom-row']}>\n              <span className={styles['menu-item__secondary-label-below']}>\n                {secondaryLabel}\n              </span>\n            </div>\n          )}\n        </div>\n        {trailingElement && (\n          <div className={styles['menu-item__right']}>\n            <span\n              className={[\n                styles['menu-item__trailing-visual'],\n                !trailingVisual\n                  ? styles['menu-item__trailing-visual--check']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n});\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","tagLabel","mentionCount","destructive","active","className","disabled","type","rest","ref","rootClass","styles","jsx","jsxs","IconSlotContext","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":";;;;;;;;AAkFA,MAAMA,IAAWC,EAA6C,SAC5D;AAAA,EACE,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,wBAAAC,IAAyB;AAAA,EACzB,eAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,mBAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,UAAAC,IAAW;AAAA,EACX,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAY;AAAA,IAChBC,EAAO,WAAW;AAAA,IAClBR,IAAcQ,EAAO,wBAAwB,IAAI;AAAA,IACjDP,IAASO,EAAO,mBAAmB,IAAI;AAAA,IACvCN;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,WAAWC;AAAA,MACX,MAAAH;AAAA,MACA,UAAAD;AAAA,MACC,GAAGE;AAAA,MAEJ,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAWF,EAAO,oBAAoB,GACxC,UAAA;AAAA,QAAAf,KACC,gBAAAgB,EAAC,OAAA,EAAI,WAAWD,EAAO,iBAAiB,GACtC,UAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWD,EAAO,2BAA2B,GAAG,eAAW,IAC/D,4BAACG,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,KAAA,GACtC,eACC,gBAAAF,EAACG,GAAA,EAAK,OAAO,gBAAAH,EAACI,KAAyB,GAAI,MAAK,MAAK,EAAA,CAEzD,GACF,GACF;AAAA,QAEF,gBAAAH,EAAC,OAAA,EAAI,WAAWF,EAAO,mBAAmB,GACxC,UAAA;AAAA,UAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,oBAAoB,GACzC,UAAA;AAAA,YAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWD,EAAO,kBAAkB,GAAI,UAAAnB,GAAM;AAAA,YACnDC,KAAkBC,MAA2B,YAC5C,gBAAAkB,EAAC,UAAK,WAAWD,EAAO,mCAAmC,GACxD,UAAAlB,EAAA,CACH;AAAA,YAEDM,uBACE,QAAA,EAAK,WAAWY,EAAO,0BAA0B,GAAG,eAAW,IAC7D,UAAAZ,EAAA,CACH;AAAA,YAEDC,KAAO,gBAAAY,EAACK,GAAA,EAAI,OAAOhB,EAAA,CAAU;AAAA,YAC7BC,KAAgB,QAAQA,IAAe,KACtC,gBAAAU;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,OAAOhB;AAAA,gBACP,UAAS;AAAA,gBACT,MAAK;AAAA,cAAA;AAAA,YAAA;AAAA,UACP,GAEJ;AAAA,UACCT,KAAkBC,MAA2B,WAC5C,gBAAAkB,EAAC,OAAA,EAAI,WAAWD,EAAO,uBAAuB,GAC5C,UAAA,gBAAAC,EAAC,UAAK,WAAWD,EAAO,kCAAkC,GACvD,aACH,EAAA,CACF;AAAA,QAAA,GAEJ;AAAA,QACCb,KACC,gBAAAc,EAAC,OAAA,EAAI,WAAWD,EAAO,kBAAkB,GACvC,UAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACTD,EAAO,4BAA4B;AAAA,cAClCd,IAEG,KADAc,EAAO,mCAAmC;AAAA,YAC1C,EAEH,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,YAEX,4BAACG,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAM,KAAA,GACtC,UAAAjB,KAAkB,gBAAAe,EAACG,KAAK,OAAO,gBAAAH,EAACO,KAAU,GAAI,MAAK,MAAK,EAAA,CAC3D;AAAA,UAAA;AAAA,QAAA,EACF,CACF;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AAED7B,EAAS,cAAc;"}
+{"version":3,"file":"MenuItem.js","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport type { DataAttributes } from '@/utils/props';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Optional secondary label. */\n  secondaryLabel?: ReactNode;\n  /** Where the secondary label appears. Default: 'below'. */\n  secondaryLabelPosition?: 'inline' | 'below';\n  /**\n   * Custom content for the leading slot. When omitted, shows placeholder icon.\n   * When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides\n   * the correct size via context. A 24px avatar (User Avatar or Team Avatar)\n   * fills the same slot as that icon, so the label stays on the same line.\n   */\n  leadingVisual?: ReactNode;\n  /** Show the leading visual slot. Default: true. */\n  leadingElement?: boolean;\n  /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n  trailingVisual?: ReactNode;\n  /** Show the trailing visual slot. Default: false. */\n  trailingElement?: boolean;\n  /** Emoji character for custom status, shown inline after the label. */\n  customStatusEmoji?: string;\n  /** Show \"NEW\" label tag. */\n  tag?: boolean;\n  /** Text of the `tag`. Default: \"NEW\". */\n  tagLabel?: ReactNode;\n  /** Inline mention count badge. */\n  mentionCount?: number;\n  /** Destructive (danger) styling. */\n  destructive?: boolean;\n  /** Highlight row (e.g. submenu parent while child menu is open). */\n  active?: boolean;\n}\n\n/**\n * Props a host menu (`Combobox`, `Select`) can set itself on a row: ARIA and\n * selection state, keyboard / pointer handling, and the values it reads from the\n * option object (`label`, `secondaryLabel`, `leadingVisual`, `disabled`). They\n * can't be overridden through `menuItemProps`. This is the full set; each host\n * sets only some of the handlers (`Combobox` uses `onClick`, `Select` uses\n * `onPointerUp`) and passes the other one through. `autoFocus` is excluded too:\n * the host keeps focus on its input / trigger, and a row that grabs focus on\n * mount would take it away.\n */\nexport type MenuItemOwnedProps =\n  | 'id'\n  | 'role'\n  | 'aria-selected'\n  | 'autoFocus'\n  | 'label'\n  | 'secondaryLabel'\n  | 'leadingVisual'\n  | 'leadingElement'\n  | 'trailingElement'\n  | 'disabled'\n  | 'active'\n  | 'children'\n  | 'onClick'\n  | 'onMouseDown'\n  | 'onMouseEnter'\n  | 'onPointerUp';\n\n/**\n * Every `MenuItem` prop a host menu doesn't own (`secondaryLabelPosition`,\n * `trailingVisual`, `tag`, `mentionCount`, `destructive`, `className`, …), so\n * props added to `MenuItem` reach `Combobox` / `Select` rows automatically.\n * `Owned` is the set the host sets itself (default: all of `MenuItemOwnedProps`);\n * a host narrows it so the handlers it doesn't supply can still be passed.\n */\nexport type MenuItemPassthroughProps<\n  Owned extends keyof MenuItemProps = MenuItemOwnedProps,\n> = Partial<Omit<MenuItemProps, Owned>> & DataAttributes;\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(function MenuItem(\n  {\n    label,\n    secondaryLabel,\n    secondaryLabelPosition = 'below',\n    leadingVisual,\n    leadingElement = true,\n    trailingVisual,\n    trailingElement = false,\n    customStatusEmoji,\n    tag = false,\n    tagLabel = 'NEW',\n    mentionCount,\n    destructive = false,\n    active = false,\n    className = '',\n    disabled,\n    type = 'button',\n    ...rest\n  },\n  ref,\n) {\n  const rootClass = [\n    styles['menu-item'],\n    destructive ? styles['menu-item--destructive'] : '',\n    active ? styles['menu-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      ref={ref}\n      className={rootClass}\n      type={type}\n      disabled={disabled}\n      {...rest}\n    >\n      <div className={styles['menu-item__content']}>\n        {leadingElement && (\n          <div className={styles['menu-item__left']}>\n            <span className={styles['menu-item__leading-visual']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {leadingVisual ?? (\n                  <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n                )}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n        <div className={styles['menu-item__middle']}>\n          <div className={styles['menu-item__top-row']}>\n            <span className={styles['menu-item__label']}>{label}</span>\n            {secondaryLabel && secondaryLabelPosition === 'inline' && (\n              <span className={styles['menu-item__secondary-label-inline']}>\n                {secondaryLabel}\n              </span>\n            )}\n            {customStatusEmoji && (\n              <span className={styles['menu-item__custom-status']} aria-hidden>\n                {customStatusEmoji}\n              </span>\n            )}\n            {tag && <Tag label={tagLabel} />}\n            {mentionCount != null && mentionCount > 0 && (\n              <MentionBadge\n                count={mentionCount}\n                location=\"menu-item\"\n                size=\"small\"\n              />\n            )}\n          </div>\n          {secondaryLabel && secondaryLabelPosition === 'below' && (\n            <div className={styles['menu-item__bottom-row']}>\n              <span className={styles['menu-item__secondary-label-below']}>\n                {secondaryLabel}\n              </span>\n            </div>\n          )}\n        </div>\n        {trailingElement && (\n          <div className={styles['menu-item__right']}>\n            <span\n              className={[\n                styles['menu-item__trailing-visual'],\n                !trailingVisual\n                  ? styles['menu-item__trailing-visual--check']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n});\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","tagLabel","mentionCount","destructive","active","className","disabled","type","rest","ref","rootClass","styles","jsx","jsxs","IconSlotContext","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"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"}

package/dist/components/menu-item/MenuItem.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MenuItem.css');const e={"menu-item":"_menu-item_1ilsv_2","menu-item--active":"_menu-item--active_1ilsv_27","menu-item__leading-visual":"_menu-item__leading-visual_1ilsv_30","menu-item__trailing-visual":"_menu-item__trailing-visual_1ilsv_31","menu-item__content":"_menu-item__content_1ilsv_44","menu-item__left":"_menu-item__left_1ilsv_53","menu-item__trailing-visual--check":"_menu-item__trailing-visual--check_1ilsv_65","menu-item__middle":"_menu-item__middle_1ilsv_68","menu-item__top-row":"_menu-item__top-row_1ilsv_80","menu-item__label":"_menu-item__label_1ilsv_88","menu-item__secondary-label-inline":"_menu-item__secondary-label-inline_1ilsv_97","menu-item__bottom-row":"_menu-item__bottom-row_1ilsv_105","menu-item__secondary-label-below":"_menu-item__secondary-label-below_1ilsv_112","menu-item__custom-status":"_menu-item__custom-status_1ilsv_123","menu-item__right":"_menu-item__right_1ilsv_132","menu-item--destructive":"_menu-item--destructive_1ilsv_139"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MenuItem.css');const e={"menu-item":"_menu-item_1nie0_2","menu-item--active":"_menu-item--active_1nie0_27","menu-item__leading-visual":"_menu-item__leading-visual_1nie0_30","menu-item__trailing-visual":"_menu-item__trailing-visual_1nie0_31","menu-item__content":"_menu-item__content_1nie0_44","menu-item__left":"_menu-item__left_1nie0_53","menu-item__trailing-visual--check":"_menu-item__trailing-visual--check_1nie0_82","menu-item__middle":"_menu-item__middle_1nie0_85","menu-item__top-row":"_menu-item__top-row_1nie0_97","menu-item__label":"_menu-item__label_1nie0_105","menu-item__secondary-label-inline":"_menu-item__secondary-label-inline_1nie0_114","menu-item__bottom-row":"_menu-item__bottom-row_1nie0_122","menu-item__secondary-label-below":"_menu-item__secondary-label-below_1nie0_129","menu-item__custom-status":"_menu-item__custom-status_1nie0_140","menu-item__right":"_menu-item__right_1nie0_149","menu-item--destructive":"_menu-item--destructive_1nie0_157"};exports.default=e;
 //# sourceMappingURL=MenuItem.module.scss.cjs.map

package/dist/components/menu-item/MenuItem.module.scss.js

@@ -1,22 +1,22 @@
-import './MenuItem.css';const _ = {
-  "menu-item": "_menu-item_1ilsv_2",
-  "menu-item--active": "_menu-item--active_1ilsv_27",
-  "menu-item__leading-visual": "_menu-item__leading-visual_1ilsv_30",
-  "menu-item__trailing-visual": "_menu-item__trailing-visual_1ilsv_31",
-  "menu-item__content": "_menu-item__content_1ilsv_44",
-  "menu-item__left": "_menu-item__left_1ilsv_53",
-  "menu-item__trailing-visual--check": "_menu-item__trailing-visual--check_1ilsv_65",
-  "menu-item__middle": "_menu-item__middle_1ilsv_68",
-  "menu-item__top-row": "_menu-item__top-row_1ilsv_80",
-  "menu-item__label": "_menu-item__label_1ilsv_88",
-  "menu-item__secondary-label-inline": "_menu-item__secondary-label-inline_1ilsv_97",
-  "menu-item__bottom-row": "_menu-item__bottom-row_1ilsv_105",
-  "menu-item__secondary-label-below": "_menu-item__secondary-label-below_1ilsv_112",
-  "menu-item__custom-status": "_menu-item__custom-status_1ilsv_123",
-  "menu-item__right": "_menu-item__right_1ilsv_132",
-  "menu-item--destructive": "_menu-item--destructive_1ilsv_139"
+import './MenuItem.css';const e = {
+  "menu-item": "_menu-item_1nie0_2",
+  "menu-item--active": "_menu-item--active_1nie0_27",
+  "menu-item__leading-visual": "_menu-item__leading-visual_1nie0_30",
+  "menu-item__trailing-visual": "_menu-item__trailing-visual_1nie0_31",
+  "menu-item__content": "_menu-item__content_1nie0_44",
+  "menu-item__left": "_menu-item__left_1nie0_53",
+  "menu-item__trailing-visual--check": "_menu-item__trailing-visual--check_1nie0_82",
+  "menu-item__middle": "_menu-item__middle_1nie0_85",
+  "menu-item__top-row": "_menu-item__top-row_1nie0_97",
+  "menu-item__label": "_menu-item__label_1nie0_105",
+  "menu-item__secondary-label-inline": "_menu-item__secondary-label-inline_1nie0_114",
+  "menu-item__bottom-row": "_menu-item__bottom-row_1nie0_122",
+  "menu-item__secondary-label-below": "_menu-item__secondary-label-below_1nie0_129",
+  "menu-item__custom-status": "_menu-item__custom-status_1nie0_140",
+  "menu-item__right": "_menu-item__right_1nie0_149",
+  "menu-item--destructive": "_menu-item--destructive_1nie0_157"
 };
 export {
-  _ as default
+  e as default
 };
 //# sourceMappingURL=MenuItem.module.scss.js.map

package/dist/components/modal/Modal.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),a=require("react"),A=require("../../hooks/use-modal-focus.cjs"),D=require("../../hooks/use-popover-transition.cjs"),G=require("../scrollbar/Scrollbar.cjs"),J=require("../modal-footer/ModalFooter.cjs"),Q=require("../modal-header/ModalHeader.cjs"),U=require("../../utils/string.cjs"),e=require("./Modal.module.scss.cjs");function V({className:r="",style:n,size:i="small",title:s,subtitle:l,subtitlePlacement:c="below",hideTitle:u=!1,showBackButton:t=!1,onBack:d,backLabel:x,backButtonProps:y,onClose:m,closeLabel:I,closeButtonProps:R,headerDivider:g=!0,headerAction:F,headerSlot:N,bodyPadding:_="default",scrollable:b=!0,children:w,footer:v,footerLeading:j,footerType:f="2-actions",footerDivider:B=!0,closeOnEscape:P=!0,manageFocus:S=!0,initialFocusRef:k,active:p,transition:M,visible:z,...C}){const q=a.useRef(null);A.useModalFocus(q,{initialFocusRef:k,closeOnEscape:P,manageFocus:S,onClose:m,active:p});const h=a.useId(),H=e.default[`modal--size-${U.toKebab(i)}`],K=[e.default["modal__body-inner"],_==="menu"&&e.default["modal__body-inner--menu"],_==="none"&&e.default["modal__body-inner--none"],!b&&e.default["modal__body-inner--fill"]].filter(Boolean).join(" "),O=o.jsx("div",{className:K,children:w}),T=[e.default.modal__scroll,!b&&e.default["modal__scroll--fill"]].filter(Boolean).join(" "),$=v!=null||j!=null||f==="spacer-small"||f==="spacer-large";return o.jsxs("div",{...C,ref:q,tabIndex:-1,className:[e.default.modal,H,M&&e.default["modal--transition"],M&&z&&e.default["modal--visible"],r].filter(Boolean).join(" "),style:n,role:"dialog","aria-modal":"true","aria-labelledby":h,children:[o.jsx(Q.default,{title:s,titleId:h,subtitle:l,subtitlePlacement:c,hideTitle:u,showBackButton:t,onBack:d,backLabel:x,backButtonProps:y,onClose:m,closeLabel:I,closeButtonProps:R,divider:g,headerAction:F,headerSlot:N}),o.jsx("div",{className:e.default.modal__body,children:o.jsx(G.default,{className:T,children:O})}),$&&o.jsx(J.default,{type:f,divider:B,leading:j,children:v})]})}function W({open:r,onExited:n,...i}){const s=r!==void 0,{mounted:l,visible:c}=D.usePopoverTransition(r??!0),u=a.useRef(l),t=a.useRef(n);return t.current=n,a.useEffect(()=>{var d;u.current&&!l&&s&&((d=t.current)==null||d.call(t)),u.current=l},[l,s]),s&&!l?null:o.jsx(V,{...i,active:r??!0,transition:s,visible:c})}exports.default=W;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),j=require("react"),$=require("../../hooks/use-modal-focus.cjs"),A=require("../../hooks/use-popover-transition.cjs"),D=require("../scrollbar/Scrollbar.cjs"),G=require("../modal-footer/ModalFooter.cjs"),J=require("../modal-header/ModalHeader.cjs"),Q=require("../../utils/string.cjs"),U=require("../../utils/useOnExited.cjs"),e=require("./Modal.module.scss.cjs");function V({className:o="",style:a,size:r="small",title:s,subtitle:t,subtitlePlacement:n="below",hideTitle:x=!1,showBackButton:q=!1,onBack:M,backLabel:h,backButtonProps:y,onClose:u,closeLabel:I,closeButtonProps:g,headerDivider:F=!0,headerAction:N,headerSlot:R,bodyPadding:i="default",scrollable:c=!0,children:B,footer:f,footerLeading:m,footerType:d="2-actions",footerDivider:O=!0,closeOnEscape:P=!0,manageFocus:S=!0,initialFocusRef:k,active:p,transition:_,visible:w,...z}){const b=j.useRef(null);$.useModalFocus(b,{initialFocusRef:k,closeOnEscape:P,manageFocus:S,onClose:u,active:p});const v=j.useId(),C=e.default[`modal--size-${Q.toKebab(r)}`],E=[e.default["modal__body-inner"],i==="menu"&&e.default["modal__body-inner--menu"],i==="none"&&e.default["modal__body-inner--none"],!c&&e.default["modal__body-inner--fill"]].filter(Boolean).join(" "),H=l.jsx("div",{className:E,children:B}),K=[e.default.modal__scroll,!c&&e.default["modal__scroll--fill"]].filter(Boolean).join(" "),T=f!=null||m!=null||d==="spacer-small"||d==="spacer-large";return l.jsxs("div",{...z,ref:b,tabIndex:-1,className:[e.default.modal,C,_&&e.default["modal--transition"],_&&w&&e.default["modal--visible"],o].filter(Boolean).join(" "),style:a,role:"dialog","aria-modal":"true","aria-labelledby":v,children:[l.jsx(J.default,{title:s,titleId:v,subtitle:t,subtitlePlacement:n,hideTitle:x,showBackButton:q,onBack:M,backLabel:h,backButtonProps:y,onClose:u,closeLabel:I,closeButtonProps:g,divider:F,headerAction:N,headerSlot:R}),l.jsx("div",{className:e.default.modal__body,children:l.jsx(D.default,{className:K,children:H})}),T&&l.jsx(G.default,{type:d,divider:O,leading:m,children:f})]})}function W({open:o,onExited:a,...r}){const s=o!==void 0,{mounted:t,visible:n}=A.usePopoverTransition(o??!0);return U.useOnExited(t,a,s),s&&!t?null:l.jsx(V,{...r,active:o??!0,transition:s,visible:n})}exports.default=W;
 //# sourceMappingURL=Modal.cjs.map

package/dist/components/modal/Modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import type {\n  CSSProperties,\n  HTMLAttributes,\n  ReactNode,\n  RefObject,\n} from 'react';\nimport { useEffect, useId, useRef } from 'react';\nimport { useModalFocus } from '@/hooks/use-modal-focus';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport ModalFooter from '@/components/modal-footer/ModalFooter';\nimport type { ModalFooterType } from '@/components/modal-footer/ModalFooter';\nimport ModalHeader from '@/components/modal-header/ModalHeader';\nimport type { ModalSubtitlePlacement } from '@/components/modal-header/ModalHeader';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './Modal.module.scss';\n\nexport type ModalSize = 'small' | 'medium' | 'large';\n\n/**\n * Body inset. `menu` is for MenuItem lists — 8px vertical / 16px horizontal so\n * row labels align with the 32px header/footer margins. `none` removes inset\n * for host-owned full-bleed layouts (e.g. settings sidebars).\n */\nexport type ModalBodyPadding = 'default' | 'menu' | 'none';\n\nexport type { ModalFooterType, ModalSubtitlePlacement };\n\nexport interface ModalProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'children' | 'style'\n> {\n  /** Extra class on the dialog root (size + chrome classes still apply). */\n  className?: string;\n  /** Inline style on the dialog root — prefer `className` for layout overrides. */\n  style?: CSSProperties;\n  /** Width variant. Figma: Size — Small 600px, Medium 704px, Large 832px. */\n  size?: ModalSize;\n  /** Modal heading text. Required for a11y; use `hideTitle` for close-only chrome. */\n  title: ReactNode;\n  /** Optional secondary line — placement via `subtitlePlacement`. */\n  subtitle?: ReactNode;\n  /**\n   * Where the subtitle sits. Figma Modal Header: Below | Beside.\n   * Default: `below`.\n   */\n  subtitlePlacement?: ModalSubtitlePlacement;\n  /** Visually hide the title (close-only header); title remains for `aria-labelledby`. */\n  hideTitle?: boolean;\n  /** When true, shows a back-arrow button before the title. */\n  showBackButton?: boolean;\n  /** Called when the back button is clicked. */\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Go back\". */\n  backLabel?: string;\n  /** Extra attributes for the back button (e.g. `data-testid`). */\n  backButtonProps?: BuiltInButtonProps;\n  /** Called when the × close button is clicked. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Extra attributes for the close button (e.g. `data-testid`). */\n  closeButtonProps?: BuiltInButtonProps;\n  /** Show divider between header and body. Default: true. */\n  headerDivider?: boolean;\n  /** Optional control before close (Button, search field, …). */\n  headerAction?: ReactNode;\n  /**\n   * Full-width slot rendered below the title row and above the header divider.\n   * Accepts any ReactNode — SearchInput, Tabs, a custom toolbar, etc.\n   */\n  headerSlot?: ReactNode;\n  /**\n   * Body inset. Default is 32px horizontal / 28px vertical. Use `menu` for\n   * MenuItem lists. Use `none` when the host owns padding.\n   */\n  bodyPadding?: ModalBodyPadding;\n  /**\n   * When false, the body fills the dialog height so host panes can manage\n   * their own scroll regions (settings-style layouts). Default true sizes the\n   * body to its content. Overflow always uses Scrollbar (default track width).\n   */\n  scrollable?: boolean;\n  /** Body content. */\n  children: ReactNode;\n  /** Footer slot — typically Buttons. Wrapped in `ModalFooter`. */\n  footer?: ReactNode;\n  /** Left footer slot (pagination status, PaginationDots, …). */\n  footerLeading?: ReactNode;\n  /** Footer layout. Figma Modal Footer Type. Default: `2-actions`. */\n  footerType?: ModalFooterType;\n  /** Show divider between body and footer. Default: true. */\n  footerDivider?: boolean;\n  /**\n   * Close on Escape via a document listener while mounted. Escapes already\n   * handled by an inner widget (`defaultPrevented`) are ignored. Default: true.\n   */\n  closeOnEscape?: boolean;\n  /**\n   * Initial focus, Tab trap and focus restore. Set false when the host owns\n   * focus (e.g. a floating-ui `FloatingFocusManager`); pair with\n   * `closeOnEscape={false}` when the host also handles Escape. Initial focus\n   * and restore use the value at mount; the Tab trap follows later updates.\n   * Default: true.\n   */\n  manageFocus?: boolean;\n  /**\n   * Element to focus when the modal mounts (e.g. the first form field).\n   * Default: the dialog root.\n   */\n  initialFocusRef?: RefObject<HTMLElement | null>;\n  /**\n   * Controlled visibility with the Compass enter/exit transition (fade + drop from the top + subtle scale 98%→100%,\n   * reverse on close, `--duration-quick`); the modal unmounts after the exit,\n   * and focus is restored then. Omit to keep the mount-controlled behavior\n   * (always rendered, no transition). The host still owns the state.\n   */\n  open?: boolean;\n  /** Called after the exit transition finishes and the modal unmounts (only when `open` is controlled). */\n  onExited?: () => void;\n}\n\ninterface ModalPanelState {\n  active: boolean;\n  transition: boolean;\n  visible: boolean;\n}\n\nfunction ModalPanel({\n  className = '',\n  style,\n  size = 'small',\n  title,\n  subtitle,\n  subtitlePlacement = 'below',\n  hideTitle = false,\n  showBackButton = false,\n  onBack,\n  backLabel,\n  backButtonProps,\n  onClose,\n  closeLabel,\n  closeButtonProps,\n  headerDivider = true,\n  headerAction,\n  headerSlot,\n  bodyPadding = 'default',\n  scrollable = true,\n  children,\n  footer,\n  footerLeading,\n  footerType = '2-actions',\n  footerDivider = true,\n  closeOnEscape = true,\n  manageFocus = true,\n  initialFocusRef,\n  active,\n  transition,\n  visible,\n  ...rest\n}: ModalProps & ModalPanelState) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  useModalFocus(rootRef, {\n    initialFocusRef,\n    closeOnEscape,\n    manageFocus,\n    onClose,\n    active,\n  });\n  const titleId = useId();\n  const sizeClass = styles[`modal--size-${toKebab(size)}`];\n  const bodyInnerClass = [\n    styles['modal__body-inner'],\n    bodyPadding === 'menu' && styles['modal__body-inner--menu'],\n    bodyPadding === 'none' && styles['modal__body-inner--none'],\n    !scrollable && styles['modal__body-inner--fill'],\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const bodyInner = <div className={bodyInnerClass}>{children}</div>;\n  const scrollClass = [\n    styles['modal__scroll'],\n    !scrollable && styles['modal__scroll--fill'],\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const showFooter =\n    footer != null ||\n    footerLeading != null ||\n    footerType === 'spacer-small' ||\n    footerType === 'spacer-large';\n\n  return (\n    <div\n      {...rest}\n      ref={rootRef}\n      tabIndex={-1}\n      className={[\n        styles.modal,\n        sizeClass,\n        transition && styles['modal--transition'],\n        transition && visible && styles['modal--visible'],\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={style}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={titleId}\n    >\n      <ModalHeader\n        title={title}\n        titleId={titleId}\n        subtitle={subtitle}\n        subtitlePlacement={subtitlePlacement}\n        hideTitle={hideTitle}\n        showBackButton={showBackButton}\n        onBack={onBack}\n        backLabel={backLabel}\n        backButtonProps={backButtonProps}\n        onClose={onClose}\n        closeLabel={closeLabel}\n        closeButtonProps={closeButtonProps}\n        divider={headerDivider}\n        headerAction={headerAction}\n        headerSlot={headerSlot}\n      />\n\n      <div className={styles['modal__body']}>\n        <Scrollbar className={scrollClass}>{bodyInner}</Scrollbar>\n      </div>\n\n      {showFooter && (\n        <ModalFooter\n          type={footerType}\n          divider={footerDivider}\n          leading={footerLeading}\n        >\n          {footer}\n        </ModalFooter>\n      )}\n    </div>\n  );\n}\n\n/**\n * Modal dialog shell — composes ModalHeader, scrollable body, and ModalFooter.\n * Owns dialog-level focus and keyboard behavior: initial focus, Tab trap,\n * Escape, and focus restore on unmount. Host owns portal, overlay/backdrop,\n * scroll lock, stacking, and open state. Mount-controlled by default; pass\n * `open` for the enter/exit transition.\n */\nexport default function Modal({ open, onExited, ...props }: ModalProps) {\n  const controlled = open !== undefined;\n  const { mounted, visible } = usePopoverTransition(open ?? true);\n  const wasMounted = useRef(mounted);\n  const onExitedRef = useRef(onExited);\n  onExitedRef.current = onExited;\n\n  useEffect(() => {\n    if (wasMounted.current && !mounted && controlled) {\n      onExitedRef.current?.();\n    }\n    wasMounted.current = mounted;\n  }, [mounted, controlled]);\n\n  if (controlled && !mounted) return null;\n\n  return (\n    <ModalPanel\n      {...props}\n      active={open ?? true}\n      transition={controlled}\n      visible={visible}\n    />\n  );\n}\n"],"names":["ModalPanel","className","style","size","title","subtitle","subtitlePlacement","hideTitle","showBackButton","onBack","backLabel","backButtonProps","onClose","closeLabel","closeButtonProps","headerDivider","headerAction","headerSlot","bodyPadding","scrollable","children","footer","footerLeading","footerType","footerDivider","closeOnEscape","manageFocus","initialFocusRef","active","transition","visible","rest","rootRef","useRef","useModalFocus","titleId","useId","sizeClass","styles","toKebab","bodyInnerClass","bodyInner","jsx","scrollClass","showFooter","jsxs","ModalHeader","Scrollbar","ModalFooter","Modal","open","onExited","props","controlled","mounted","usePopoverTransition","wasMounted","onExitedRef","useEffect","_a"],"mappings":"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"}
+{"version":3,"file":"Modal.cjs","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import type {\n  CSSProperties,\n  HTMLAttributes,\n  ReactNode,\n  RefObject,\n} from 'react';\nimport { useId, useRef } from 'react';\nimport { useModalFocus } from '@/hooks/use-modal-focus';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport ModalFooter from '@/components/modal-footer/ModalFooter';\nimport type { ModalFooterType } from '@/components/modal-footer/ModalFooter';\nimport ModalHeader from '@/components/modal-header/ModalHeader';\nimport type { ModalSubtitlePlacement } from '@/components/modal-header/ModalHeader';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport { useOnExited } from '@/utils/useOnExited';\nimport styles from './Modal.module.scss';\n\nexport type ModalSize = 'small' | 'medium' | 'large';\n\n/**\n * Body inset. `menu` is for MenuItem lists — 8px vertical / 16px horizontal so\n * row labels align with the 32px header/footer margins. `none` removes inset\n * for host-owned full-bleed layouts (e.g. settings sidebars).\n */\nexport type ModalBodyPadding = 'default' | 'menu' | 'none';\n\nexport type { ModalFooterType, ModalSubtitlePlacement };\n\nexport interface ModalProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'children' | 'style'\n> {\n  /** Extra class on the dialog root (size + chrome classes still apply). */\n  className?: string;\n  /** Inline style on the dialog root — prefer `className` for layout overrides. */\n  style?: CSSProperties;\n  /** Width variant. Figma: Size — Small 600px, Medium 704px, Large 832px. */\n  size?: ModalSize;\n  /** Modal heading text. Required for a11y; use `hideTitle` for close-only chrome. */\n  title: ReactNode;\n  /** Optional secondary line — placement via `subtitlePlacement`. */\n  subtitle?: ReactNode;\n  /**\n   * Where the subtitle sits. Figma Modal Header: Below | Beside.\n   * Default: `below`.\n   */\n  subtitlePlacement?: ModalSubtitlePlacement;\n  /** Visually hide the title (close-only header); title remains for `aria-labelledby`. */\n  hideTitle?: boolean;\n  /** When true, shows a back-arrow button before the title. */\n  showBackButton?: boolean;\n  /** Called when the back button is clicked. */\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Go back\". */\n  backLabel?: string;\n  /** Extra attributes for the back button (e.g. `data-testid`). */\n  backButtonProps?: BuiltInButtonProps;\n  /** Called when the × close button is clicked. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Extra attributes for the close button (e.g. `data-testid`). */\n  closeButtonProps?: BuiltInButtonProps;\n  /** Show divider between header and body. Default: true. */\n  headerDivider?: boolean;\n  /** Optional control before close (Button, search field, …). */\n  headerAction?: ReactNode;\n  /**\n   * Full-width slot rendered below the title row and above the header divider.\n   * Accepts any ReactNode — SearchInput, Tabs, a custom toolbar, etc.\n   */\n  headerSlot?: ReactNode;\n  /**\n   * Body inset. Default is 32px horizontal / 28px vertical. Use `menu` for\n   * MenuItem lists. Use `none` when the host owns padding.\n   */\n  bodyPadding?: ModalBodyPadding;\n  /**\n   * When false, the body fills the dialog height so host panes can manage\n   * their own scroll regions (settings-style layouts). Default true sizes the\n   * body to its content. Overflow always uses Scrollbar (default track width).\n   */\n  scrollable?: boolean;\n  /** Body content. */\n  children: ReactNode;\n  /** Footer slot — typically Buttons. Wrapped in `ModalFooter`. */\n  footer?: ReactNode;\n  /** Left footer slot (pagination status, PaginationDots, …). */\n  footerLeading?: ReactNode;\n  /** Footer layout. Figma Modal Footer Type. Default: `2-actions`. */\n  footerType?: ModalFooterType;\n  /** Show divider between body and footer. Default: true. */\n  footerDivider?: boolean;\n  /**\n   * Close on Escape via a document listener while mounted. Escapes already\n   * handled by an inner widget (`defaultPrevented`) are ignored. Default: true.\n   */\n  closeOnEscape?: boolean;\n  /**\n   * Initial focus, Tab trap and focus restore. Set false when the host owns\n   * focus (e.g. a floating-ui `FloatingFocusManager`); pair with\n   * `closeOnEscape={false}` when the host also handles Escape. Initial focus\n   * and restore use the value at mount; the Tab trap follows later updates.\n   * Default: true.\n   */\n  manageFocus?: boolean;\n  /**\n   * Element to focus when the modal mounts (e.g. the first form field).\n   * Default: the dialog root.\n   */\n  initialFocusRef?: RefObject<HTMLElement | null>;\n  /**\n   * Controlled visibility with the Compass enter/exit transition (fade + drop from the top + subtle scale 98%→100%,\n   * reverse on close, `--duration-quick`); the modal unmounts after the exit,\n   * and focus is restored then. Omit to keep the mount-controlled behavior\n   * (always rendered, no transition). The host still owns the state.\n   */\n  open?: boolean;\n  /** Called after the exit transition finishes and the modal unmounts (only when `open` is controlled). */\n  onExited?: () => void;\n}\n\ninterface ModalPanelState {\n  active: boolean;\n  transition: boolean;\n  visible: boolean;\n}\n\nfunction ModalPanel({\n  className = '',\n  style,\n  size = 'small',\n  title,\n  subtitle,\n  subtitlePlacement = 'below',\n  hideTitle = false,\n  showBackButton = false,\n  onBack,\n  backLabel,\n  backButtonProps,\n  onClose,\n  closeLabel,\n  closeButtonProps,\n  headerDivider = true,\n  headerAction,\n  headerSlot,\n  bodyPadding = 'default',\n  scrollable = true,\n  children,\n  footer,\n  footerLeading,\n  footerType = '2-actions',\n  footerDivider = true,\n  closeOnEscape = true,\n  manageFocus = true,\n  initialFocusRef,\n  active,\n  transition,\n  visible,\n  ...rest\n}: ModalProps & ModalPanelState) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  useModalFocus(rootRef, {\n    initialFocusRef,\n    closeOnEscape,\n    manageFocus,\n    onClose,\n    active,\n  });\n  const titleId = useId();\n  const sizeClass = styles[`modal--size-${toKebab(size)}`];\n  const bodyInnerClass = [\n    styles['modal__body-inner'],\n    bodyPadding === 'menu' && styles['modal__body-inner--menu'],\n    bodyPadding === 'none' && styles['modal__body-inner--none'],\n    !scrollable && styles['modal__body-inner--fill'],\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const bodyInner = <div className={bodyInnerClass}>{children}</div>;\n  const scrollClass = [\n    styles['modal__scroll'],\n    !scrollable && styles['modal__scroll--fill'],\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const showFooter =\n    footer != null ||\n    footerLeading != null ||\n    footerType === 'spacer-small' ||\n    footerType === 'spacer-large';\n\n  return (\n    <div\n      {...rest}\n      ref={rootRef}\n      tabIndex={-1}\n      className={[\n        styles.modal,\n        sizeClass,\n        transition && styles['modal--transition'],\n        transition && visible && styles['modal--visible'],\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={style}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={titleId}\n    >\n      <ModalHeader\n        title={title}\n        titleId={titleId}\n        subtitle={subtitle}\n        subtitlePlacement={subtitlePlacement}\n        hideTitle={hideTitle}\n        showBackButton={showBackButton}\n        onBack={onBack}\n        backLabel={backLabel}\n        backButtonProps={backButtonProps}\n        onClose={onClose}\n        closeLabel={closeLabel}\n        closeButtonProps={closeButtonProps}\n        divider={headerDivider}\n        headerAction={headerAction}\n        headerSlot={headerSlot}\n      />\n\n      <div className={styles['modal__body']}>\n        <Scrollbar className={scrollClass}>{bodyInner}</Scrollbar>\n      </div>\n\n      {showFooter && (\n        <ModalFooter\n          type={footerType}\n          divider={footerDivider}\n          leading={footerLeading}\n        >\n          {footer}\n        </ModalFooter>\n      )}\n    </div>\n  );\n}\n\n/**\n * Modal dialog shell — composes ModalHeader, scrollable body, and ModalFooter.\n * Owns dialog-level focus and keyboard behavior: initial focus, Tab trap,\n * Escape, and focus restore on unmount. Host owns portal, overlay/backdrop,\n * scroll lock, stacking, and open state. Mount-controlled by default; pass\n * `open` for the enter/exit transition.\n */\nexport default function Modal({ open, onExited, ...props }: ModalProps) {\n  const controlled = open !== undefined;\n  const { mounted, visible } = usePopoverTransition(open ?? true);\n  useOnExited(mounted, onExited, controlled);\n\n  if (controlled && !mounted) return null;\n\n  return (\n    <ModalPanel\n      {...props}\n      active={open ?? true}\n      transition={controlled}\n      visible={visible}\n    />\n  );\n}\n"],"names":["ModalPanel","className","style","size","title","subtitle","subtitlePlacement","hideTitle","showBackButton","onBack","backLabel","backButtonProps","onClose","closeLabel","closeButtonProps","headerDivider","headerAction","headerSlot","bodyPadding","scrollable","children","footer","footerLeading","footerType","footerDivider","closeOnEscape","manageFocus","initialFocusRef","active","transition","visible","rest","rootRef","useRef","useModalFocus","titleId","useId","sizeClass","styles","toKebab","bodyInnerClass","bodyInner","jsx","scrollClass","showFooter","jsxs","ModalHeader","Scrollbar","ModalFooter","Modal","open","onExited","props","controlled","mounted","usePopoverTransition","useOnExited"],"mappings":"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"}

package/dist/components/modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,SAAS,EACT,SAAS,EACV,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAE5E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AACnF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIxD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErD;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3D,YAAY,EAAE,eAAe,EAAE,sBAAsB,EAAE,CAAC;AAExD,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,cAAc,CAAC,cAAc,CAAC,EAC9B,OAAO,GAAG,UAAU,GAAG,OAAO,CAC/B;IACC,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oFAAoF;IACpF,KAAK,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAC3C,wFAAwF;IACxF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;IACtC,2DAA2D;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,iEAAiE;IACjE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,oEAAoE;IACpE,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,2DAA2D;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAChD;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yGAAyG;IACzG,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA+HD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,kDAwBrE"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,SAAS,EACT,SAAS,EACV,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAE5E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AACnF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAKxD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErD;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3D,YAAY,EAAE,eAAe,EAAE,sBAAsB,EAAE,CAAC;AAExD,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,cAAc,CAAC,cAAc,CAAC,EAC9B,OAAO,GAAG,UAAU,GAAG,OAAO,CAC/B;IACC,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oFAAoF;IACpF,KAAK,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAC3C,wFAAwF;IACxF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;IACtC,2DAA2D;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,iEAAiE;IACjE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,oEAAoE;IACpE,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,2DAA2D;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAChD;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yGAAyG;IACzG,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA+HD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,kDAerE"}

package/dist/components/modal/Modal.js

@@ -1,126 +1,124 @@
-import { jsx as n, jsxs as G } from "react/jsx-runtime";
-import { useRef as u, useEffect as J, useId as O } from "react";
-import { useModalFocus as Q } from "../../hooks/use-modal-focus.js";
-import { usePopoverTransition as U } from "../../hooks/use-popover-transition.js";
-import V from "../scrollbar/Scrollbar.js";
-import W from "../modal-footer/ModalFooter.js";
-import X from "../modal-header/ModalHeader.js";
-import { toKebab as Y } from "../../utils/string.js";
+import { jsx as l, jsxs as q } from "react/jsx-runtime";
+import { useRef as A, useId as D } from "react";
+import { useModalFocus as G } from "../../hooks/use-modal-focus.js";
+import { usePopoverTransition as J } from "../../hooks/use-popover-transition.js";
+import Q from "../scrollbar/Scrollbar.js";
+import U from "../modal-footer/ModalFooter.js";
+import V from "../modal-header/ModalHeader.js";
+import { toKebab as W } from "../../utils/string.js";
+import { useOnExited as X } from "../../utils/useOnExited.js";
 import o from "./Modal.module.scss.js";
-function Z({
-  className: a = "",
-  style: t,
-  size: d = "small",
+function Y({
+  className: e = "",
+  style: n,
+  size: i = "small",
   title: r,
-  subtitle: l,
-  subtitlePlacement: m = "below",
-  hideTitle: s = !1,
-  showBackButton: e = !1,
-  onBack: i,
+  subtitle: a,
+  subtitlePlacement: t = "below",
+  hideTitle: v = !1,
+  showBackButton: y = !1,
+  onBack: h,
   backLabel: j,
-  backButtonProps: I,
-  onClose: f,
-  closeLabel: N,
-  closeButtonProps: w,
-  headerDivider: B = !0,
-  headerAction: F,
-  headerSlot: x,
-  bodyPadding: b = "default",
-  scrollable: _ = !0,
-  children: z,
-  footer: p,
-  footerLeading: v,
-  footerType: c = "2-actions",
-  footerDivider: C = !0,
-  closeOnEscape: g = !0,
-  manageFocus: H = !0,
-  initialFocusRef: K,
-  active: P,
-  transition: y,
-  visible: R,
-  ...S
+  backButtonProps: x,
+  onClose: d,
+  closeLabel: I,
+  closeButtonProps: M,
+  headerDivider: N = !0,
+  headerAction: B,
+  headerSlot: F,
+  bodyPadding: m = "default",
+  scrollable: c = !0,
+  children: w,
+  footer: u,
+  footerLeading: f,
+  footerType: s = "2-actions",
+  footerDivider: z = !0,
+  closeOnEscape: C = !0,
+  manageFocus: R = !0,
+  initialFocusRef: g,
+  active: E,
+  transition: b,
+  visible: H,
+  ...K
 }) {
-  const M = u(null);
-  Q(M, {
-    initialFocusRef: K,
-    closeOnEscape: g,
-    manageFocus: H,
-    onClose: f,
-    active: P
+  const _ = A(null);
+  G(_, {
+    initialFocusRef: g,
+    closeOnEscape: C,
+    manageFocus: R,
+    onClose: d,
+    active: E
   });
-  const h = O(), $ = o[`modal--size-${Y(d)}`], k = [
+  const p = D(), O = o[`modal--size-${W(i)}`], P = [
     o["modal__body-inner"],
-    b === "menu" && o["modal__body-inner--menu"],
-    b === "none" && o["modal__body-inner--none"],
-    !_ && o["modal__body-inner--fill"]
-  ].filter(Boolean).join(" "), q = /* @__PURE__ */ n("div", { className: k, children: z }), A = [
+    m === "menu" && o["modal__body-inner--menu"],
+    m === "none" && o["modal__body-inner--none"],
+    !c && o["modal__body-inner--fill"]
+  ].filter(Boolean).join(" "), S = /* @__PURE__ */ l("div", { className: P, children: w }), $ = [
     o.modal__scroll,
-    !_ && o["modal__scroll--fill"]
-  ].filter(Boolean).join(" "), D = p != null || v != null || c === "spacer-small" || c === "spacer-large";
-  return /* @__PURE__ */ G(
+    !c && o["modal__scroll--fill"]
+  ].filter(Boolean).join(" "), k = u != null || f != null || s === "spacer-small" || s === "spacer-large";
+  return /* @__PURE__ */ q(
     "div",
     {
-      ...S,
-      ref: M,
+      ...K,
+      ref: _,
       tabIndex: -1,
       className: [
         o.modal,
-        $,
-        y && o["modal--transition"],
-        y && R && o["modal--visible"],
-        a
+        O,
+        b && o["modal--transition"],
+        b && H && o["modal--visible"],
+        e
       ].filter(Boolean).join(" "),
-      style: t,
+      style: n,
       role: "dialog",
       "aria-modal": "true",
-      "aria-labelledby": h,
+      "aria-labelledby": p,
       children: [
-        /* @__PURE__ */ n(
-          X,
+        /* @__PURE__ */ l(
+          V,
           {
             title: r,
-            titleId: h,
-            subtitle: l,
-            subtitlePlacement: m,
-            hideTitle: s,
-            showBackButton: e,
-            onBack: i,
+            titleId: p,
+            subtitle: a,
+            subtitlePlacement: t,
+            hideTitle: v,
+            showBackButton: y,
+            onBack: h,
             backLabel: j,
-            backButtonProps: I,
-            onClose: f,
-            closeLabel: N,
-            closeButtonProps: w,
-            divider: B,
-            headerAction: F,
-            headerSlot: x
+            backButtonProps: x,
+            onClose: d,
+            closeLabel: I,
+            closeButtonProps: M,
+            divider: N,
+            headerAction: B,
+            headerSlot: F
           }
         ),
-        /* @__PURE__ */ n("div", { className: o.modal__body, children: /* @__PURE__ */ n(V, { className: A, children: q }) }),
-        D && /* @__PURE__ */ n(
-          W,
+        /* @__PURE__ */ l("div", { className: o.modal__body, children: /* @__PURE__ */ l(Q, { className: $, children: S }) }),
+        k && /* @__PURE__ */ l(
+          U,
           {
-            type: c,
-            divider: C,
-            leading: v,
-            children: p
+            type: s,
+            divider: z,
+            leading: f,
+            children: u
           }
         )
       ]
     }
   );
 }
-function to({ open: a, onExited: t, ...d }) {
-  const r = a !== void 0, { mounted: l, visible: m } = U(a ?? !0), s = u(l), e = u(t);
-  return e.current = t, J(() => {
-    var i;
-    s.current && !l && r && ((i = e.current) == null || i.call(e)), s.current = l;
-  }, [l, r]), r && !l ? null : /* @__PURE__ */ n(
-    Z,
+function to({ open: e, onExited: n, ...i }) {
+  const r = e !== void 0, { mounted: a, visible: t } = J(e ?? !0);
+  return X(a, n, r), r && !a ? null : /* @__PURE__ */ l(
+    Y,
     {
-      ...d,
-      active: a ?? !0,
+      ...i,
+      active: e ?? !0,
       transition: r,
-      visible: m
+      visible: t
     }
   );
 }