@protonradio/proton-ui 0.11.34 → 0.12.1

package/dist/components/Menu/MenuTrigger.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../node_modules/react/jsx-runtime.cjs.js"),o=require("react"),b=require("../../hooks/useBreakpoint.cjs.js"),O=require("../ActionMenu/ActionMenu.cjs.js"),k=require("./PopoverMenu.cjs.js");;/* empty css                     */;/* empty css              */const y=require("../Icon/IconComponents/Ellipsis.cjs.js"),A=require("../../constants/breakpoint.cjs.js");function f({renderTrigger:a,size:R=24,title:c,items:p,disabled:g,onClose:s,triggerTestId:d="MenuTrigger-Trigger",menuTestId:q,onSelectionChange:i,selectedKey:u,disabledKeys:x}){const E=b.useBreakpoint(A.BREAKPOINTS.SMALL),[e,n]=o.useState(!1),T=o.useRef(null),l=o.useMemo(()=>p.map(t=>({...t,id:t.key})),[p]),m=t=>{i==null||i(t),n(!1)},M=a?a({isOpen:e,disabled:g,setIsOpen:n}):r.jsxRuntimeExports.jsx("button",{"data-testid":d,disabled:g,className:"proton-MenuTrigger__button",ref:T,onClick:()=>n(!e),type:"button","aria-label":"Open menu","aria-expanded":e,children:r.jsxRuntimeExports.jsx(y.Ellipsis,{size:R})});return E?r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[M,e&&r.jsxRuntimeExports.jsx(O.ActionMenu,{actions:l,title:c,isOpen:e,onClose:()=>{n(!1),s==null||s()},showCancel:!0,"data-testid":q,selectionMode:"single",onSelectionChange:t=>{const j=Array.from(t)[0];j&&m(j)},selectedKeys:u?[u]:void 0,disabledKeys:x})]}):r.jsxRuntimeExports.jsx(k.PopoverMenu,{trigger:M,items:l,isOpen:e,onOpenChange:n,selectedKey:u,onSelectionChange:m,disabledKeys:x,title:c})}f.displayName="ProtonUIMenuTrigger";exports.MenuTrigger=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../node_modules/react/jsx-runtime.cjs.js"),o=require("react"),b=require("../../hooks/useBreakpoint.cjs.js"),O=require("../ActionMenu/ActionMenu.cjs.js"),k=require("./PopoverMenu.cjs.js");;/* empty css                     */;/* empty css              */const y=require("../Icon/IconComponents/Ellipsis.cjs.js"),A=require("../../constants/breakpoint.cjs.js");function f({renderTrigger:a,size:q=24,title:c,items:p,disabled:g,onClose:s,triggerTestId:R="MenuTrigger-Trigger",menuTestId:d,onSelectionChange:i,selectedKey:u,disabledKeys:x}){const E=b.useBreakpoint(A.BREAKPOINTS.SMALL),[e,n]=o.useState(!1),T=o.useRef(null),l=o.useMemo(()=>p.map(r=>({...r,id:r.key})),[p]),m=r=>{i==null||i(r),n(!1)},M=a?a({isOpen:e,disabled:g,setIsOpen:n}):t.jsxRuntimeExports.jsx("button",{"data-testid":R,disabled:g,className:"proton-MenuTrigger__button",ref:T,onClick:()=>n(!e),type:"button","aria-label":"Open menu","aria-expanded":e,children:t.jsxRuntimeExports.jsx(y.Ellipsis,{size:q})});return E?t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[M,e&&t.jsxRuntimeExports.jsx(O.ActionMenu,{actions:l,title:c,isOpen:e,onClose:()=>{n(!1),s==null||s()},showCancel:!0,"data-testid":d,selectionMode:"single",onSelectionChange:r=>{const j=Array.from(r)[0];j&&m(j)},selectedKeys:u?[u]:void 0,disabledKeys:x})]}):t.jsxRuntimeExports.jsx(k.PopoverMenu,{trigger:M,items:l,isOpen:e,onOpenChange:n,selectedKey:u,onSelectionChange:m,disabledKeys:x,title:c})}f.displayName="ProtonUIMenuTrigger";exports.MenuTrigger=f;
 //# sourceMappingURL=MenuTrigger.cjs.js.map

package/dist/components/Menu/MenuTrigger.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuTrigger.cjs.js","sources":["../../../src/components/Menu/MenuTrigger.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode, useMemo, useRef, useState } from \"react\";\n\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { Ellipsis as EllipsisIcon } from \"../Icon\";\nimport { PopoverMenu } from \"./PopoverMenu\";\n\nimport \"./MenuTrigger.css\";\nimport \"./Menu.css\";\n\nexport interface MenuTriggerProps {\n  disabled?: boolean;\n  isOpen?: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n}\n\nexport interface MenuProps {\n  /** Custom trigger component. If not provided, defaults to ellipsis icon.\n   * - @prop triggerProps {@link TriggerProps}\n   */\n  renderTrigger?: (triggerProps: MenuTriggerProps) => ReactNode;\n\n  /** Size of the trigger icon\n   * @default 24\n   */\n  size?: number;\n\n  /** Title of the parent menu */\n  title?: string;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /** Callback when the menu closes */\n  onClose?: () => void;\n\n  /** Test ID for the trigger button */\n  triggerTestId?: string;\n\n  /** Test ID for the menu */\n  menuTestId?: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange?: (key: string) => void;\n\n  /** The key of the selected item */\n  selectedKey?: string;\n\n  /** The keys of the disabled items */\n  disabledKeys?: string[];\n}\n\n/**\n * An uncontrolled component that displays either a popover menu or an action menu\n * depending on device capabilities (touch detection and screen size) when the menu trigger is pressed.\n *\n * API:\n *  - {@link MenuProps}\n */\nexport function MenuTrigger({\n  renderTrigger,\n  size = 24,\n  title,\n  items,\n  disabled,\n  onClose,\n  triggerTestId = \"MenuTrigger-Trigger\",\n  menuTestId,\n  onSelectionChange,\n  selectedKey,\n  disabledKeys,\n}: MenuProps) {\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n  const [isOpen, setIsOpen] = useState(false);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  const menuItems = useMemo(\n    () => items.map((item) => ({ ...item, id: item.key })),\n    [items],\n  );\n\n  const handleSelectionChange = (key: string) => {\n    onSelectionChange?.(key);\n    setIsOpen(false);\n  };\n\n  const triggerButton = renderTrigger ? (\n    renderTrigger({\n      isOpen,\n      disabled,\n      setIsOpen,\n    })\n  ) : (\n    <button\n      data-testid={triggerTestId}\n      disabled={disabled}\n      className=\"proton-MenuTrigger__button\"\n      ref={triggerRef}\n      onClick={() => setIsOpen(!isOpen)}\n      type=\"button\"\n      aria-label=\"Open menu\"\n      aria-expanded={isOpen}\n    >\n      <EllipsisIcon size={size} />\n    </button>\n  );\n\n  if (isMobile) {\n    return (\n      <>\n        {triggerButton}\n        {isOpen && (\n          <ActionMenu\n            actions={menuItems}\n            title={title}\n            isOpen={isOpen}\n            onClose={() => {\n              setIsOpen(false);\n              onClose?.();\n            }}\n            showCancel\n            data-testid={menuTestId}\n            selectionMode=\"single\"\n            onSelectionChange={(keys) => {\n              const nextKey = Array.from(keys)[0];\n              if (nextKey) handleSelectionChange(nextKey as string);\n            }}\n            selectedKeys={selectedKey ? [selectedKey] : undefined}\n            disabledKeys={disabledKeys}\n          />\n        )}\n      </>\n    );\n  }\n\n  return (\n    <PopoverMenu\n      trigger={triggerButton}\n      items={menuItems}\n      isOpen={isOpen}\n      onOpenChange={setIsOpen}\n      selectedKey={selectedKey}\n      onSelectionChange={handleSelectionChange}\n      disabledKeys={disabledKeys}\n      title={title}\n    />\n  );\n}\n\nMenuTrigger.displayName = \"ProtonUIMenuTrigger\";\n"],"names":["MenuTrigger","renderTrigger","size","title","items","disabled","onClose","triggerTestId","menuTestId","onSelectionChange","selectedKey","disabledKeys","isMobile","useBreakpoint","BREAKPOINTS","isOpen","setIsOpen","useState","triggerRef","useRef","menuItems","useMemo","item","handleSelectionChange","key","triggerButton","jsx","EllipsisIcon","jsxs","Fragment","ActionMenu","keys","nextKey","PopoverMenu"],"mappings":"ycAqEO,SAASA,EAAY,CAC1B,cAAAC,EACA,KAAAC,EAAO,GACP,MAAAC,EACA,MAAAC,EACA,SAAAC,EACA,QAAAC,EACA,cAAAC,EAAgB,sBAChB,WAAAC,EACA,kBAAAC,EACA,YAAAC,EACA,aAAAC,CACF,EAAc,CACN,MAAAC,EAAWC,EAAAA,cAAcC,EAAA,YAAY,KAAK,EAC1C,CAACC,EAAQC,CAAS,EAAIC,WAAS,EAAK,EACpCC,EAAaC,SAA0B,IAAI,EAE3CC,EAAYC,EAAA,QAChB,IAAMjB,EAAM,IAAKkB,IAAU,CAAE,GAAGA,EAAM,GAAIA,EAAK,GAAA,EAAM,EACrD,CAAClB,CAAK,CAAA,EAGFmB,EAAyBC,GAAgB,CAC7Cf,GAAA,MAAAA,EAAoBe,GACpBR,EAAU,EAAK,CAAA,EAGXS,EAAgBxB,EACpBA,EAAc,CACZ,OAAAc,EACA,SAAAV,EACA,UAAAW,CACD,CAAA,EAEDU,EAAA,kBAAA,IAAC,SAAA,CACC,cAAanB,EACb,SAAAF,EACA,UAAU,6BACV,IAAKa,EACL,QAAS,IAAMF,EAAU,CAACD,CAAM,EAChC,KAAK,SACL,aAAW,YACX,gBAAeA,EAEf,SAAAW,EAAA,kBAAA,IAACC,YAAa,KAAAzB,CAAY,CAAA,CAAA,CAAA,EAI9B,OAAIU,EAGGgB,EAAA,kBAAA,KAAAC,6BAAA,CAAA,SAAA,CAAAJ,EACAV,GACCW,EAAA,kBAAA,IAACI,EAAA,WAAA,CACC,QAASV,EACT,MAAAjB,EACA,OAAAY,EACA,QAAS,IAAM,CACbC,EAAU,EAAK,EACLV,GAAA,MAAAA,GACZ,EACA,WAAU,GACV,cAAaE,EACb,cAAc,SACd,kBAAoBuB,GAAS,CAC3B,MAAMC,EAAU,MAAM,KAAKD,CAAI,EAAE,CAAC,EAC9BC,KAA+BA,CAAiB,CACtD,EACA,aAActB,EAAc,CAACA,CAAW,EAAI,OAC5C,aAAAC,CAAA,CACF,CAEJ,CAAA,CAAA,EAKFe,EAAA,kBAAA,IAACO,EAAA,YAAA,CACC,QAASR,EACT,MAAOL,EACP,OAAAL,EACA,aAAcC,EACd,YAAAN,EACA,kBAAmBa,EACnB,aAAAZ,EACA,MAAAR,CAAA,CAAA,CAGN,CAEAH,EAAY,YAAc"}
+{"version":3,"file":"MenuTrigger.cjs.js","sources":["../../../src/components/Menu/MenuTrigger.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode, useMemo, useRef, useState } from \"react\";\n\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { Ellipsis as EllipsisIcon } from \"../Icon\";\nimport { PopoverMenu } from \"./PopoverMenu\";\n\nimport \"./MenuTrigger.css\";\nimport \"./Menu.css\";\n\nexport interface MenuTriggerProps {\n  disabled?: boolean;\n  isOpen?: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n}\n\nexport interface MenuProps {\n  /** Custom trigger component. If not provided, defaults to ellipsis icon.\n   * - @prop triggerProps {@link TriggerProps}\n   */\n  renderTrigger?: (triggerProps: MenuTriggerProps) => ReactNode;\n\n  /** Size of the trigger icon\n   * @default 24\n   */\n  size?: number;\n\n  /** Title of the parent menu */\n  title?: string;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /** Callback when the menu closes */\n  onClose?: () => void;\n\n  /** Test ID for the trigger button */\n  triggerTestId?: string;\n\n  /** Test ID for the menu */\n  menuTestId?: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange?: (key: string) => void;\n\n  /** The key of the selected item */\n  selectedKey?: string;\n\n  /** The keys of the disabled items */\n  disabledKeys?: string[];\n}\n\n/**\n * An uncontrolled component that displays either a popover menu or an action menu\n * depending on device capabilities (touch detection and screen size) when the menu trigger is pressed.\n *\n * API:\n *  - {@link MenuProps}\n */\nexport function MenuTrigger({\n  renderTrigger,\n  size = 24,\n  title,\n  items,\n  disabled,\n  onClose,\n  triggerTestId = \"MenuTrigger-Trigger\",\n  menuTestId,\n  onSelectionChange,\n  selectedKey,\n  disabledKeys,\n}: MenuProps) {\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n  const [isOpen, setIsOpen] = useState(false);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  const menuItems = useMemo(\n    () => items.map((item) => ({ ...item, id: item.key })),\n    [items],\n  );\n\n  const handleSelectionChange = (key: string) => {\n    onSelectionChange?.(key);\n    setIsOpen(false);\n  };\n\n  const triggerButton = renderTrigger ? (\n    renderTrigger({\n      isOpen,\n      disabled,\n      setIsOpen,\n    })\n  ) : (\n    <button\n      data-testid={triggerTestId}\n      disabled={disabled}\n      className=\"proton-MenuTrigger__button\"\n      ref={triggerRef}\n      onClick={() => setIsOpen(!isOpen)}\n      type=\"button\"\n      aria-label=\"Open menu\"\n      aria-expanded={isOpen}\n    >\n      <EllipsisIcon size={size} />\n    </button>\n  );\n\n  if (isMobile) {\n    return (\n      <>\n        {triggerButton}\n        {isOpen && (\n          <ActionMenu\n            actions={menuItems}\n            title={title}\n            isOpen={isOpen}\n            onClose={() => {\n              setIsOpen(false);\n              onClose?.();\n            }}\n            showCancel\n            data-testid={menuTestId}\n            selectionMode=\"single\"\n            onSelectionChange={(keys) => {\n              const nextKey = Array.from(keys)[0];\n              if (nextKey) handleSelectionChange(nextKey as string);\n            }}\n            selectedKeys={selectedKey ? [selectedKey] : undefined}\n            disabledKeys={disabledKeys}\n          />\n        )}\n      </>\n    );\n  }\n\n  return (\n    <PopoverMenu\n      trigger={triggerButton}\n      items={menuItems}\n      isOpen={isOpen}\n      onOpenChange={setIsOpen}\n      selectedKey={selectedKey}\n      onSelectionChange={handleSelectionChange}\n      disabledKeys={disabledKeys}\n      title={title}\n    />\n  );\n}\n\nMenuTrigger.displayName = \"ProtonUIMenuTrigger\";\n"],"names":["MenuTrigger","renderTrigger","size","title","items","disabled","onClose","triggerTestId","menuTestId","onSelectionChange","selectedKey","disabledKeys","isMobile","useBreakpoint","BREAKPOINTS","isOpen","setIsOpen","useState","triggerRef","useRef","menuItems","useMemo","item","handleSelectionChange","key","triggerButton","jsx","EllipsisIcon","jsxs","Fragment","ActionMenu","keys","nextKey","PopoverMenu"],"mappings":"ycAqEO,SAASA,EAAY,CAC1B,cAAAC,EACA,KAAAC,EAAO,GACP,MAAAC,EACA,MAAAC,EACA,SAAAC,EACA,QAAAC,EACA,cAAAC,EAAgB,sBAChB,WAAAC,EACA,kBAAAC,EACA,YAAAC,EACA,aAAAC,CACF,EAAc,CACZ,MAAMC,EAAWC,EAAAA,cAAcC,EAAAA,YAAY,KAAK,EAC1C,CAACC,EAAQC,CAAS,EAAIC,EAAAA,SAAS,EAAK,EACpCC,EAAaC,EAAAA,OAA0B,IAAI,EAE3CC,EAAYC,EAAAA,QAChB,IAAMjB,EAAM,IAAKkB,IAAU,CAAE,GAAGA,EAAM,GAAIA,EAAK,GAAA,EAAM,EACrD,CAAClB,CAAK,CAAA,EAGFmB,EAAyBC,GAAgB,CAC7Cf,GAAA,MAAAA,EAAoBe,GACpBR,EAAU,EAAK,CACjB,EAEMS,EAAgBxB,EACpBA,EAAc,CACZ,OAAAc,EACA,SAAAV,EACA,UAAAW,CAAA,CACD,EAEDU,EAAAA,kBAAAA,IAAC,SAAA,CACC,cAAanB,EACb,SAAAF,EACA,UAAU,6BACV,IAAKa,EACL,QAAS,IAAMF,EAAU,CAACD,CAAM,EAChC,KAAK,SACL,aAAW,YACX,gBAAeA,EAEf,SAAAW,EAAAA,kBAAAA,IAACC,YAAa,KAAAzB,CAAA,CAAY,CAAA,CAAA,EAI9B,OAAIU,EAEAgB,EAAAA,kBAAAA,KAAAC,6BAAA,CACG,SAAA,CAAAJ,EACAV,GACCW,EAAAA,kBAAAA,IAACI,EAAAA,WAAA,CACC,QAASV,EACT,MAAAjB,EACA,OAAAY,EACA,QAAS,IAAM,CACbC,EAAU,EAAK,EACfV,GAAA,MAAAA,GACF,EACA,WAAU,GACV,cAAaE,EACb,cAAc,SACd,kBAAoBuB,GAAS,CAC3B,MAAMC,EAAU,MAAM,KAAKD,CAAI,EAAE,CAAC,EAC9BC,KAA+BA,CAAiB,CACtD,EACA,aAActB,EAAc,CAACA,CAAW,EAAI,OAC5C,aAAAC,CAAA,CAAA,CACF,EAEJ,EAKFe,EAAAA,kBAAAA,IAACO,EAAAA,YAAA,CACC,QAASR,EACT,MAAOL,EACP,OAAAL,EACA,aAAcC,EACd,YAAAN,EACA,kBAAmBa,EACnB,aAAAZ,EACA,MAAAR,CAAA,CAAA,CAGN,CAEAH,EAAY,YAAc"}

package/dist/components/Menu/MenuTrigger.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuTrigger.es.js","sources":["../../../src/components/Menu/MenuTrigger.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode, useMemo, useRef, useState } from \"react\";\n\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { Ellipsis as EllipsisIcon } from \"../Icon\";\nimport { PopoverMenu } from \"./PopoverMenu\";\n\nimport \"./MenuTrigger.css\";\nimport \"./Menu.css\";\n\nexport interface MenuTriggerProps {\n  disabled?: boolean;\n  isOpen?: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n}\n\nexport interface MenuProps {\n  /** Custom trigger component. If not provided, defaults to ellipsis icon.\n   * - @prop triggerProps {@link TriggerProps}\n   */\n  renderTrigger?: (triggerProps: MenuTriggerProps) => ReactNode;\n\n  /** Size of the trigger icon\n   * @default 24\n   */\n  size?: number;\n\n  /** Title of the parent menu */\n  title?: string;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /** Callback when the menu closes */\n  onClose?: () => void;\n\n  /** Test ID for the trigger button */\n  triggerTestId?: string;\n\n  /** Test ID for the menu */\n  menuTestId?: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange?: (key: string) => void;\n\n  /** The key of the selected item */\n  selectedKey?: string;\n\n  /** The keys of the disabled items */\n  disabledKeys?: string[];\n}\n\n/**\n * An uncontrolled component that displays either a popover menu or an action menu\n * depending on device capabilities (touch detection and screen size) when the menu trigger is pressed.\n *\n * API:\n *  - {@link MenuProps}\n */\nexport function MenuTrigger({\n  renderTrigger,\n  size = 24,\n  title,\n  items,\n  disabled,\n  onClose,\n  triggerTestId = \"MenuTrigger-Trigger\",\n  menuTestId,\n  onSelectionChange,\n  selectedKey,\n  disabledKeys,\n}: MenuProps) {\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n  const [isOpen, setIsOpen] = useState(false);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  const menuItems = useMemo(\n    () => items.map((item) => ({ ...item, id: item.key })),\n    [items],\n  );\n\n  const handleSelectionChange = (key: string) => {\n    onSelectionChange?.(key);\n    setIsOpen(false);\n  };\n\n  const triggerButton = renderTrigger ? (\n    renderTrigger({\n      isOpen,\n      disabled,\n      setIsOpen,\n    })\n  ) : (\n    <button\n      data-testid={triggerTestId}\n      disabled={disabled}\n      className=\"proton-MenuTrigger__button\"\n      ref={triggerRef}\n      onClick={() => setIsOpen(!isOpen)}\n      type=\"button\"\n      aria-label=\"Open menu\"\n      aria-expanded={isOpen}\n    >\n      <EllipsisIcon size={size} />\n    </button>\n  );\n\n  if (isMobile) {\n    return (\n      <>\n        {triggerButton}\n        {isOpen && (\n          <ActionMenu\n            actions={menuItems}\n            title={title}\n            isOpen={isOpen}\n            onClose={() => {\n              setIsOpen(false);\n              onClose?.();\n            }}\n            showCancel\n            data-testid={menuTestId}\n            selectionMode=\"single\"\n            onSelectionChange={(keys) => {\n              const nextKey = Array.from(keys)[0];\n              if (nextKey) handleSelectionChange(nextKey as string);\n            }}\n            selectedKeys={selectedKey ? [selectedKey] : undefined}\n            disabledKeys={disabledKeys}\n          />\n        )}\n      </>\n    );\n  }\n\n  return (\n    <PopoverMenu\n      trigger={triggerButton}\n      items={menuItems}\n      isOpen={isOpen}\n      onOpenChange={setIsOpen}\n      selectedKey={selectedKey}\n      onSelectionChange={handleSelectionChange}\n      disabledKeys={disabledKeys}\n      title={title}\n    />\n  );\n}\n\nMenuTrigger.displayName = \"ProtonUIMenuTrigger\";\n"],"names":["MenuTrigger","renderTrigger","size","title","items","disabled","onClose","triggerTestId","menuTestId","onSelectionChange","selectedKey","disabledKeys","isMobile","useBreakpoint","BREAKPOINTS","isOpen","setIsOpen","useState","triggerRef","useRef","menuItems","useMemo","item","handleSelectionChange","key","triggerButton","jsx","EllipsisIcon","jsxs","Fragment","ActionMenu","keys","nextKey","PopoverMenu"],"mappings":";;;;;;;;;AAqEO,SAASA,EAAY;AAAA,EAC1B,eAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,YAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AACF,GAAc;AACN,QAAAC,IAAWC,EAAcC,EAAY,KAAK,GAC1C,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpCC,IAAaC,EAA0B,IAAI,GAE3CC,IAAYC;AAAA,IAChB,MAAMjB,EAAM,IAAI,CAACkB,OAAU,EAAE,GAAGA,GAAM,IAAIA,EAAK,IAAA,EAAM;AAAA,IACrD,CAAClB,CAAK;AAAA,EAAA,GAGFmB,IAAwB,CAACC,MAAgB;AAC7C,IAAAf,KAAA,QAAAA,EAAoBe,IACpBR,EAAU,EAAK;AAAA,EAAA,GAGXS,IAAgBxB,IACpBA,EAAc;AAAA,IACZ,QAAAc;AAAA,IACA,UAAAV;AAAA,IACA,WAAAW;AAAA,EACD,CAAA,IAEDU,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAanB;AAAA,MACb,UAAAF;AAAA,MACA,WAAU;AAAA,MACV,KAAKa;AAAA,MACL,SAAS,MAAMF,EAAU,CAACD,CAAM;AAAA,MAChC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,iBAAeA;AAAA,MAEf,UAAAW,gBAAAA,EAAA,IAACC,KAAa,MAAAzB,EAAY,CAAA;AAAA,IAAA;AAAA,EAAA;AAI9B,SAAIU,IAGGgB,gBAAAA,EAAA,KAAAC,YAAA,EAAA,UAAA;AAAA,IAAAJ;AAAA,IACAV,KACCW,gBAAAA,EAAA;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,SAASV;AAAA,QACT,OAAAjB;AAAA,QACA,QAAAY;AAAA,QACA,SAAS,MAAM;AACb,UAAAC,EAAU,EAAK,GACLV,KAAA,QAAAA;AAAA,QACZ;AAAA,QACA,YAAU;AAAA,QACV,eAAaE;AAAA,QACb,eAAc;AAAA,QACd,mBAAmB,CAACuB,MAAS;AAC3B,gBAAMC,IAAU,MAAM,KAAKD,CAAI,EAAE,CAAC;AAC9B,UAAAC,OAA+BA,CAAiB;AAAA,QACtD;AAAA,QACA,cAActB,IAAc,CAACA,CAAW,IAAI;AAAA,QAC5C,cAAAC;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,EAAA,CAAA,IAKFe,gBAAAA,EAAA;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,SAASR;AAAA,MACT,OAAOL;AAAA,MACP,QAAAL;AAAA,MACA,cAAcC;AAAA,MACd,aAAAN;AAAA,MACA,mBAAmBa;AAAA,MACnB,cAAAZ;AAAA,MACA,OAAAR;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAH,EAAY,cAAc;"}
+{"version":3,"file":"MenuTrigger.es.js","sources":["../../../src/components/Menu/MenuTrigger.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode, useMemo, useRef, useState } from \"react\";\n\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { Ellipsis as EllipsisIcon } from \"../Icon\";\nimport { PopoverMenu } from \"./PopoverMenu\";\n\nimport \"./MenuTrigger.css\";\nimport \"./Menu.css\";\n\nexport interface MenuTriggerProps {\n  disabled?: boolean;\n  isOpen?: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n}\n\nexport interface MenuProps {\n  /** Custom trigger component. If not provided, defaults to ellipsis icon.\n   * - @prop triggerProps {@link TriggerProps}\n   */\n  renderTrigger?: (triggerProps: MenuTriggerProps) => ReactNode;\n\n  /** Size of the trigger icon\n   * @default 24\n   */\n  size?: number;\n\n  /** Title of the parent menu */\n  title?: string;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /** Callback when the menu closes */\n  onClose?: () => void;\n\n  /** Test ID for the trigger button */\n  triggerTestId?: string;\n\n  /** Test ID for the menu */\n  menuTestId?: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange?: (key: string) => void;\n\n  /** The key of the selected item */\n  selectedKey?: string;\n\n  /** The keys of the disabled items */\n  disabledKeys?: string[];\n}\n\n/**\n * An uncontrolled component that displays either a popover menu or an action menu\n * depending on device capabilities (touch detection and screen size) when the menu trigger is pressed.\n *\n * API:\n *  - {@link MenuProps}\n */\nexport function MenuTrigger({\n  renderTrigger,\n  size = 24,\n  title,\n  items,\n  disabled,\n  onClose,\n  triggerTestId = \"MenuTrigger-Trigger\",\n  menuTestId,\n  onSelectionChange,\n  selectedKey,\n  disabledKeys,\n}: MenuProps) {\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n  const [isOpen, setIsOpen] = useState(false);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  const menuItems = useMemo(\n    () => items.map((item) => ({ ...item, id: item.key })),\n    [items],\n  );\n\n  const handleSelectionChange = (key: string) => {\n    onSelectionChange?.(key);\n    setIsOpen(false);\n  };\n\n  const triggerButton = renderTrigger ? (\n    renderTrigger({\n      isOpen,\n      disabled,\n      setIsOpen,\n    })\n  ) : (\n    <button\n      data-testid={triggerTestId}\n      disabled={disabled}\n      className=\"proton-MenuTrigger__button\"\n      ref={triggerRef}\n      onClick={() => setIsOpen(!isOpen)}\n      type=\"button\"\n      aria-label=\"Open menu\"\n      aria-expanded={isOpen}\n    >\n      <EllipsisIcon size={size} />\n    </button>\n  );\n\n  if (isMobile) {\n    return (\n      <>\n        {triggerButton}\n        {isOpen && (\n          <ActionMenu\n            actions={menuItems}\n            title={title}\n            isOpen={isOpen}\n            onClose={() => {\n              setIsOpen(false);\n              onClose?.();\n            }}\n            showCancel\n            data-testid={menuTestId}\n            selectionMode=\"single\"\n            onSelectionChange={(keys) => {\n              const nextKey = Array.from(keys)[0];\n              if (nextKey) handleSelectionChange(nextKey as string);\n            }}\n            selectedKeys={selectedKey ? [selectedKey] : undefined}\n            disabledKeys={disabledKeys}\n          />\n        )}\n      </>\n    );\n  }\n\n  return (\n    <PopoverMenu\n      trigger={triggerButton}\n      items={menuItems}\n      isOpen={isOpen}\n      onOpenChange={setIsOpen}\n      selectedKey={selectedKey}\n      onSelectionChange={handleSelectionChange}\n      disabledKeys={disabledKeys}\n      title={title}\n    />\n  );\n}\n\nMenuTrigger.displayName = \"ProtonUIMenuTrigger\";\n"],"names":["MenuTrigger","renderTrigger","size","title","items","disabled","onClose","triggerTestId","menuTestId","onSelectionChange","selectedKey","disabledKeys","isMobile","useBreakpoint","BREAKPOINTS","isOpen","setIsOpen","useState","triggerRef","useRef","menuItems","useMemo","item","handleSelectionChange","key","triggerButton","jsx","EllipsisIcon","jsxs","Fragment","ActionMenu","keys","nextKey","PopoverMenu"],"mappings":";;;;;;;;;AAqEO,SAASA,EAAY;AAAA,EAC1B,eAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,YAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AACF,GAAc;AACZ,QAAMC,IAAWC,EAAcC,EAAY,KAAK,GAC1C,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpCC,IAAaC,EAA0B,IAAI,GAE3CC,IAAYC;AAAA,IAChB,MAAMjB,EAAM,IAAI,CAACkB,OAAU,EAAE,GAAGA,GAAM,IAAIA,EAAK,IAAA,EAAM;AAAA,IACrD,CAAClB,CAAK;AAAA,EAAA,GAGFmB,IAAwB,CAACC,MAAgB;AAC7C,IAAAf,KAAA,QAAAA,EAAoBe,IACpBR,EAAU,EAAK;AAAA,EACjB,GAEMS,IAAgBxB,IACpBA,EAAc;AAAA,IACZ,QAAAc;AAAA,IACA,UAAAV;AAAA,IACA,WAAAW;AAAA,EAAA,CACD,IAEDU,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAanB;AAAA,MACb,UAAAF;AAAA,MACA,WAAU;AAAA,MACV,KAAKa;AAAA,MACL,SAAS,MAAMF,EAAU,CAACD,CAAM;AAAA,MAChC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,iBAAeA;AAAA,MAEf,UAAAW,gBAAAA,EAAAA,IAACC,KAAa,MAAAzB,EAAA,CAAY;AAAA,IAAA;AAAA,EAAA;AAI9B,SAAIU,IAEAgB,gBAAAA,EAAAA,KAAAC,YAAA,EACG,UAAA;AAAA,IAAAJ;AAAA,IACAV,KACCW,gBAAAA,EAAAA;AAAAA,MAACI;AAAA,MAAA;AAAA,QACC,SAASV;AAAA,QACT,OAAAjB;AAAA,QACA,QAAAY;AAAA,QACA,SAAS,MAAM;AACb,UAAAC,EAAU,EAAK,GACfV,KAAA,QAAAA;AAAA,QACF;AAAA,QACA,YAAU;AAAA,QACV,eAAaE;AAAA,QACb,eAAc;AAAA,QACd,mBAAmB,CAACuB,MAAS;AAC3B,gBAAMC,IAAU,MAAM,KAAKD,CAAI,EAAE,CAAC;AAClC,UAAIC,OAA+BA,CAAiB;AAAA,QACtD;AAAA,QACA,cAActB,IAAc,CAACA,CAAW,IAAI;AAAA,QAC5C,cAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAEJ,IAKFe,gBAAAA,EAAAA;AAAAA,IAACO;AAAA,IAAA;AAAA,MACC,SAASR;AAAA,MACT,OAAOL;AAAA,MACP,QAAAL;AAAA,MACA,cAAcC;AAAA,MACd,aAAAN;AAAA,MACA,mBAAmBa;AAAA,MACnB,cAAAZ;AAAA,MACA,OAAAR;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAH,EAAY,cAAc;"}

package/dist/components/Menu/PopoverMenu.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../node_modules/react/jsx-runtime.cjs.js"),s=require("radix-ui"),b=require("../ThemeProvider.cjs.js"),u=require("../../utils/string.cjs.js"),E=require("../Icon/IconComponents/ChevronRight.cjs.js");function p({trigger:j,items:M,isOpen:h,onOpenChange:n,selectedKey:_,onSelectionChange:l,disabledKeys:g,title:c}){const{className:m,style:x}=b.useTheme();function a(d){const{item:e,className:y,style:R,disabledKeys:t,onClose:o}=d;return e.children&&e.children.length>0?r.jsxRuntimeExports.jsxs(s.DropdownMenu.Sub,{children:[r.jsxRuntimeExports.jsxs(s.DropdownMenu.SubTrigger,{className:u.csx("proton-Menu__item","proton-MenuTrigger__menu-item"),children:[e.label,r.jsxRuntimeExports.jsx("span",{className:"proton-MenuTrigger__chevron","aria-hidden":"true",children:r.jsxRuntimeExports.jsx(E.ChevronRight,{size:12})})]}),r.jsxRuntimeExports.jsx(s.DropdownMenu.SubContent,{sideOffset:8,"data-has-submenu":"true",className:u.csx("proton-Menu","proton-MenuTrigger__menu"),children:e.children.map(i=>a({item:i,className:y,style:R,disabledKeys:t,onClose:o}))})]},e.key):r.jsxRuntimeExports.jsxs(s.DropdownMenu.Item,{className:u.csx("proton-Menu__item","proton-MenuTrigger__menu-item"),"aria-selected":_===e.key,disabled:t==null?void 0:t.includes(e.key),onSelect:()=>{var i;(i=e.onAction)==null||i.call(e,e.key),l==null||l(e.key),o==null||o()},children:[r.jsxRuntimeExports.jsx("span",{className:"proton-MenuTrigger__label",style:{gridArea:"label"},children:e.label}),e.description&&r.jsxRuntimeExports.jsx("span",{className:"proton-MenuTrigger__description",style:{gridArea:"desc"},children:e.description})]},e.key)}return r.jsxRuntimeExports.jsxs(s.DropdownMenu.Root,{open:h,onOpenChange:n,children:[r.jsxRuntimeExports.jsx(s.DropdownMenu.Trigger,{asChild:!0,children:j}),r.jsxRuntimeExports.jsx(s.DropdownMenu.Portal,{children:r.jsxRuntimeExports.jsxs(s.DropdownMenu.Content,{className:u.csx("proton-Menu","proton-MenuTrigger__menu",m),style:x,children:[c&&r.jsxRuntimeExports.jsx(s.DropdownMenu.Label,{className:"proton-MenuTrigger__menu-header",children:c}),M.map(d=>a({item:d,className:m,style:x,disabledKeys:g,onClose:()=>n==null?void 0:n(!1)}))]})})]})}p.displayName="ProtonUIPopoverMenu";exports.PopoverMenu=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../node_modules/react/jsx-runtime.cjs.js"),s=require("radix-ui"),R=require("../ThemeProvider.cjs.js"),u=require("../../utils/string.cjs.js"),y=require("../Icon/IconComponents/ChevronRight.cjs.js");function a({trigger:j,items:M,isOpen:h,onOpenChange:n,selectedKey:_="",onSelectionChange:l,disabledKeys:g=[],title:x=""}){const{className:c,style:p}=R.useTheme();function m(d){const{item:e,disabledKeys:t,onClose:o}=d;return e.children&&e.children.length>0?r.jsxRuntimeExports.jsxs(s.DropdownMenu.Sub,{children:[r.jsxRuntimeExports.jsxs(s.DropdownMenu.SubTrigger,{className:u.csx("proton-Menu__item","proton-MenuTrigger__menu-item"),children:[e.label,r.jsxRuntimeExports.jsx("span",{className:"proton-MenuTrigger__chevron","aria-hidden":"true",children:r.jsxRuntimeExports.jsx(y.ChevronRight,{size:12})})]}),r.jsxRuntimeExports.jsx(s.DropdownMenu.Portal,{children:r.jsxRuntimeExports.jsx(s.DropdownMenu.SubContent,{sideOffset:8,"data-has-submenu":"true",className:u.csx("proton-Menu","proton-MenuTrigger__menu",c),style:p,children:e.children.map(i=>m({item:i,disabledKeys:t,onClose:o}))})})]},e.key):r.jsxRuntimeExports.jsxs(s.DropdownMenu.Item,{className:u.csx("proton-Menu__item","proton-MenuTrigger__menu-item"),"aria-selected":_===e.key,disabled:t==null?void 0:t.includes(e.key),onSelect:()=>{var i;(i=e.onAction)==null||i.call(e,e.key),l==null||l(e.key),o==null||o()},children:[r.jsxRuntimeExports.jsx("span",{className:"proton-MenuTrigger__label",style:{gridArea:"label"},children:e.label}),e.description&&r.jsxRuntimeExports.jsx("span",{className:"proton-MenuTrigger__description",style:{gridArea:"desc"},children:e.description})]},e.key)}return r.jsxRuntimeExports.jsxs(s.DropdownMenu.Root,{open:h,onOpenChange:n,children:[r.jsxRuntimeExports.jsx(s.DropdownMenu.Trigger,{asChild:!0,children:j}),r.jsxRuntimeExports.jsx(s.DropdownMenu.Portal,{children:r.jsxRuntimeExports.jsxs(s.DropdownMenu.Content,{className:u.csx("proton-Menu","proton-MenuTrigger__menu",c),style:p,children:[x&&r.jsxRuntimeExports.jsx(s.DropdownMenu.Label,{className:"proton-MenuTrigger__menu-header",children:x}),M.map(d=>m({item:d,disabledKeys:g,onClose:()=>n==null?void 0:n(!1)}))]})})]})}a.displayName="ProtonUIPopoverMenu";exports.PopoverMenu=a;
 //# sourceMappingURL=PopoverMenu.cjs.js.map

package/dist/components/Menu/PopoverMenu.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverMenu.cjs.js","sources":["../../../src/components/Menu/PopoverMenu.tsx"],"sourcesContent":["import { DropdownMenu as RadixDropdownMenu } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { ChevronRight as ChevronRightIcon } from \"../Icon\";\n\nexport interface PopoverMenuProps {\n  /** The trigger component */\n  trigger: React.ReactNode;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is open */\n  isOpen: boolean;\n\n  /** Callback when the menu is opened or closed */\n  onOpenChange: (open: boolean) => void;\n\n  /** The key of the selected item */\n  selectedKey: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange: (key: string) => void;\n\n  /** The keys of the disabled items */\n  disabledKeys: string[];\n\n  /** The title of the menu */\n  title: string;\n}\n\n/**\n * A component that displays a popover menu.\n *\n * API:\n *  - {@link PopoverMenuProps}\n */\nexport function PopoverMenu({\n  trigger,\n  items,\n  isOpen,\n  onOpenChange,\n  selectedKey,\n  onSelectionChange,\n  disabledKeys,\n  title,\n}: PopoverMenuProps) {\n  const { className: themeClass, style: themeStyle } = useTheme();\n\n  function renderMenuItem(props) {\n    const { item, className, style, disabledKeys, onClose } = props;\n\n    if (item.children && item.children.length > 0) {\n      return (\n        <RadixDropdownMenu.Sub key={item.key}>\n          <RadixDropdownMenu.SubTrigger\n            className={csx(\n              \"proton-Menu__item\",\n              \"proton-MenuTrigger__menu-item\",\n            )}\n          >\n            {item.label}\n            <span className=\"proton-MenuTrigger__chevron\" aria-hidden=\"true\">\n              <ChevronRightIcon size={12} />\n            </span>\n          </RadixDropdownMenu.SubTrigger>\n\n          <RadixDropdownMenu.SubContent\n            sideOffset={8}\n            data-has-submenu=\"true\"\n            className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\")}\n          >\n            {item.children.map((child) =>\n              renderMenuItem({\n                item: child,\n                className,\n                style,\n                disabledKeys,\n                onClose,\n              }),\n            )}\n          </RadixDropdownMenu.SubContent>\n        </RadixDropdownMenu.Sub>\n      );\n    } else {\n      return (\n        <RadixDropdownMenu.Item\n          className={csx(\"proton-Menu__item\", \"proton-MenuTrigger__menu-item\")}\n          key={item.key}\n          aria-selected={selectedKey === item.key}\n          disabled={disabledKeys?.includes(item.key)}\n          onSelect={() => {\n            item.onAction?.(item.key);\n            onSelectionChange?.(item.key);\n            onClose?.();\n          }}\n        >\n          <span\n            className=\"proton-MenuTrigger__label\"\n            style={{ gridArea: \"label\" }}\n          >\n            {item.label}\n          </span>\n          {item.description && (\n            <span\n              className=\"proton-MenuTrigger__description\"\n              style={{ gridArea: \"desc\" }}\n            >\n              {item.description}\n            </span>\n          )}\n        </RadixDropdownMenu.Item>\n      );\n    }\n  }\n\n  return (\n    <RadixDropdownMenu.Root open={isOpen} onOpenChange={onOpenChange}>\n      <RadixDropdownMenu.Trigger asChild>{trigger}</RadixDropdownMenu.Trigger>\n      <RadixDropdownMenu.Portal>\n        <RadixDropdownMenu.Content\n          className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\", themeClass)}\n          style={themeStyle as React.CSSProperties}\n        >\n          {title && (\n            <RadixDropdownMenu.Label className=\"proton-MenuTrigger__menu-header\">\n              {title}\n            </RadixDropdownMenu.Label>\n          )}\n          {items.map((item) =>\n            renderMenuItem({\n              item,\n              className: themeClass,\n              style: themeStyle as React.CSSProperties,\n              disabledKeys,\n              onClose: () => onOpenChange?.(false),\n            }),\n          )}\n        </RadixDropdownMenu.Content>\n      </RadixDropdownMenu.Portal>\n    </RadixDropdownMenu.Root>\n  );\n}\n\nPopoverMenu.displayName = \"ProtonUIPopoverMenu\";\n"],"names":["PopoverMenu","trigger","items","isOpen","onOpenChange","selectedKey","onSelectionChange","disabledKeys","title","themeClass","themeStyle","useTheme","renderMenuItem","props","item","className","style","onClose","jsxs","RadixDropdownMenu","csx","jsx","ChevronRightIcon","child","_a"],"mappings":"ySAwCO,SAASA,EAAY,CAC1B,QAAAC,EACA,MAAAC,EACA,OAAAC,EACA,aAAAC,EACA,YAAAC,EACA,kBAAAC,EACA,aAAAC,EACA,MAAAC,CACF,EAAqB,CACnB,KAAM,CAAE,UAAWC,EAAY,MAAOC,CAAA,EAAeC,EAAAA,WAErD,SAASC,EAAeC,EAAO,CAC7B,KAAM,CAAE,KAAAC,EAAM,UAAAC,EAAW,MAAAC,EAAO,aAAAT,EAAc,QAAAU,CAAY,EAAAJ,EAE1D,OAAIC,EAAK,UAAYA,EAAK,SAAS,OAAS,EAExCI,yBAACC,EAAAA,aAAkB,IAAlB,CACC,SAAA,CAAAD,EAAA,kBAAA,KAACC,EAAAA,aAAkB,WAAlB,CACC,UAAWC,EAAA,IACT,oBACA,+BACF,EAEC,SAAA,CAAKN,EAAA,MACNO,EAAAA,kBAAAA,IAAC,OAAK,CAAA,UAAU,8BAA8B,cAAY,OACxD,SAACA,EAAAA,kBAAAA,IAAAC,EAAAA,aAAA,CAAiB,KAAM,EAAA,CAAI,CAC9B,CAAA,CAAA,CAAA,CACF,EAEAD,EAAA,kBAAA,IAACF,EAAAA,aAAkB,WAAlB,CACC,WAAY,EACZ,mBAAiB,OACjB,UAAWC,EAAAA,IAAI,cAAe,0BAA0B,EAEvD,WAAK,SAAS,IAAKG,GAClBX,EAAe,CACb,KAAMW,EACN,UAAAR,EACA,MAAAC,EACA,aAAAT,EACA,QAAAU,CAAA,CACD,CACH,CAAA,CACF,CAAA,GA3B0BH,EAAK,GA4BjC,EAIAI,EAAA,kBAAA,KAACC,EAAAA,aAAkB,KAAlB,CACC,UAAWC,EAAAA,IAAI,oBAAqB,+BAA+B,EAEnE,gBAAef,IAAgBS,EAAK,IACpC,SAAUP,GAAAA,YAAAA,EAAc,SAASO,EAAK,KACtC,SAAU,IAAM,QACTU,EAAAV,EAAA,WAAA,MAAAU,EAAA,KAAAV,EAAWA,EAAK,KACrBR,GAAA,MAAAA,EAAoBQ,EAAK,KACfG,GAAA,MAAAA,GACZ,EAEA,SAAA,CAAAI,EAAA,kBAAA,IAAC,OAAA,CACC,UAAU,4BACV,MAAO,CAAE,SAAU,OAAQ,EAE1B,SAAKP,EAAA,KAAA,CACR,EACCA,EAAK,aACJO,EAAA,kBAAA,IAAC,OAAA,CACC,UAAU,kCACV,MAAO,CAAE,SAAU,MAAO,EAEzB,SAAKP,EAAA,WAAA,CACR,CAAA,CAAA,EArBGA,EAAK,GAAA,CA0BlB,CAEA,gCACGK,EAAAA,aAAkB,KAAlB,CAAuB,KAAMhB,EAAQ,aAAAC,EACpC,SAAA,CAAAiB,EAAA,kBAAA,IAACF,EAAkB,aAAA,QAAlB,CAA0B,QAAO,GAAE,SAAQlB,EAAA,EAC5CoB,EAAAA,kBAAAA,IAACF,EAAkB,aAAA,OAAlB,CACC,SAAAD,EAAA,kBAAA,KAACC,EAAAA,aAAkB,QAAlB,CACC,UAAWC,EAAA,IAAI,cAAe,2BAA4BX,CAAU,EACpE,MAAOC,EAEN,SAAA,CAAAF,2BACEW,EAAAA,aAAkB,MAAlB,CAAwB,UAAU,kCAChC,SACHX,EAAA,EAEDN,EAAM,IAAKY,GACVF,EAAe,CACb,KAAAE,EACA,UAAWL,EACX,MAAOC,EACP,aAAAH,EACA,QAAS,IAAMH,GAAA,YAAAA,EAAe,GAAK,CACpC,CACH,CAAA,CAAA,CAAA,EAEJ,CACF,CAAA,CAAA,CAEJ,CAEAJ,EAAY,YAAc"}
+{"version":3,"file":"PopoverMenu.cjs.js","sources":["../../../src/components/Menu/PopoverMenu.tsx"],"sourcesContent":["import { DropdownMenu as RadixDropdownMenu } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { ChevronRight as ChevronRightIcon } from \"../Icon\";\n\nimport type { CSSProperties, ReactNode } from \"react\";\n\ntype MenuItemRenderArgs = {\n  item: ActionMenuAction;\n  className: string | undefined;\n  style: CSSProperties | undefined;\n  disabledKeys: string[];\n  onClose: (() => void) | undefined;\n};\n\nexport interface PopoverMenuProps {\n  /** The trigger component */\n  trigger: ReactNode;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is open */\n  isOpen: boolean;\n\n  /** Callback when the menu is opened or closed */\n  onOpenChange: (open: boolean) => void;\n\n  /** The key of the selected item */\n  selectedKey?: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange: (key: string) => void;\n\n  /** The keys of the disabled items */\n  disabledKeys?: string[];\n\n  /** The title of the menu */\n  title?: string;\n}\n\n/**\n * A component that displays a popover menu.\n *\n * API:\n *  - {@link PopoverMenuProps}\n */\nexport function PopoverMenu({\n  trigger,\n  items,\n  isOpen,\n  onOpenChange,\n  selectedKey = \"\",\n  onSelectionChange,\n  disabledKeys = [],\n  title = \"\",\n}: PopoverMenuProps) {\n  const { className: themeClass, style: themeStyle } = useTheme();\n\n  function renderMenuItem(props: MenuItemRenderArgs) {\n    const { item, className, style, disabledKeys, onClose } = props;\n\n    if (item.children && item.children.length > 0) {\n      return (\n        <RadixDropdownMenu.Sub key={item.key}>\n          <RadixDropdownMenu.SubTrigger\n            className={csx(\n              \"proton-Menu__item\",\n              \"proton-MenuTrigger__menu-item\",\n            )}\n          >\n            {item.label}\n            <span className=\"proton-MenuTrigger__chevron\" aria-hidden=\"true\">\n              <ChevronRightIcon size={12} />\n            </span>\n          </RadixDropdownMenu.SubTrigger>\n\n          <RadixDropdownMenu.Portal>\n            <RadixDropdownMenu.SubContent\n              sideOffset={8}\n              data-has-submenu=\"true\"\n              className={csx(\n                \"proton-Menu\",\n                \"proton-MenuTrigger__menu\",\n                themeClass,\n              )}\n              style={themeStyle as CSSProperties}\n            >\n              {item.children.map((child: ActionMenuAction) =>\n                renderMenuItem({\n                  item: child,\n                  className,\n                  style,\n                  disabledKeys,\n                  onClose,\n                }),\n              )}\n            </RadixDropdownMenu.SubContent>\n          </RadixDropdownMenu.Portal>\n        </RadixDropdownMenu.Sub>\n      );\n    } else {\n      return (\n        <RadixDropdownMenu.Item\n          className={csx(\"proton-Menu__item\", \"proton-MenuTrigger__menu-item\")}\n          key={item.key}\n          aria-selected={selectedKey === item.key}\n          disabled={disabledKeys?.includes(item.key)}\n          onSelect={() => {\n            item.onAction?.(item.key);\n            onSelectionChange?.(item.key);\n            onClose?.();\n          }}\n        >\n          <span\n            className=\"proton-MenuTrigger__label\"\n            style={{ gridArea: \"label\" }}\n          >\n            {item.label}\n          </span>\n          {item.description && (\n            <span\n              className=\"proton-MenuTrigger__description\"\n              style={{ gridArea: \"desc\" }}\n            >\n              {item.description}\n            </span>\n          )}\n        </RadixDropdownMenu.Item>\n      );\n    }\n  }\n\n  return (\n    <RadixDropdownMenu.Root open={isOpen} onOpenChange={onOpenChange}>\n      <RadixDropdownMenu.Trigger asChild>{trigger}</RadixDropdownMenu.Trigger>\n      <RadixDropdownMenu.Portal>\n        <RadixDropdownMenu.Content\n          className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\", themeClass)}\n          style={themeStyle as CSSProperties}\n        >\n          {title && (\n            <RadixDropdownMenu.Label className=\"proton-MenuTrigger__menu-header\">\n              {title}\n            </RadixDropdownMenu.Label>\n          )}\n          {items.map((item) =>\n            renderMenuItem({\n              item,\n              className: themeClass,\n              style: themeStyle as CSSProperties,\n              disabledKeys,\n              onClose: () => onOpenChange?.(false),\n            }),\n          )}\n        </RadixDropdownMenu.Content>\n      </RadixDropdownMenu.Portal>\n    </RadixDropdownMenu.Root>\n  );\n}\n\nPopoverMenu.displayName = \"ProtonUIPopoverMenu\";\n"],"names":["PopoverMenu","trigger","items","isOpen","onOpenChange","selectedKey","onSelectionChange","disabledKeys","title","themeClass","themeStyle","useTheme","renderMenuItem","props","item","onClose","jsxs","RadixDropdownMenu","csx","jsx","ChevronRightIcon","child","_a"],"mappings":"ySAkDO,SAASA,EAAY,CAC1B,QAAAC,EACA,MAAAC,EACA,OAAAC,EACA,aAAAC,EACA,YAAAC,EAAc,GACd,kBAAAC,EACA,aAAAC,EAAe,CAAA,EACf,MAAAC,EAAQ,EACV,EAAqB,CACnB,KAAM,CAAE,UAAWC,EAAY,MAAOC,CAAA,EAAeC,EAAAA,SAAA,EAErD,SAASC,EAAeC,EAA2B,CACjD,KAAM,CAAE,KAAAC,EAAwB,aAAAP,EAAc,QAAAQ,GAAYF,EAE1D,OAAIC,EAAK,UAAYA,EAAK,SAAS,OAAS,EAExCE,yBAACC,EAAAA,aAAkB,IAAlB,CACC,SAAA,CAAAD,EAAAA,kBAAAA,KAACC,EAAAA,aAAkB,WAAlB,CACC,UAAWC,EAAAA,IACT,oBACA,+BAAA,EAGD,SAAA,CAAAJ,EAAK,MACNK,EAAAA,kBAAAA,IAAC,OAAA,CAAK,UAAU,8BAA8B,cAAY,OACxD,SAAAA,EAAAA,kBAAAA,IAACC,EAAAA,aAAA,CAAiB,KAAM,EAAA,CAAI,CAAA,CAC9B,CAAA,CAAA,CAAA,EAGFD,EAAAA,kBAAAA,IAACF,EAAAA,aAAkB,OAAlB,CACC,SAAAE,EAAAA,kBAAAA,IAACF,EAAAA,aAAkB,WAAlB,CACC,WAAY,EACZ,mBAAiB,OACjB,UAAWC,EAAAA,IACT,cACA,2BACAT,CAAA,EAEF,MAAOC,EAEN,WAAK,SAAS,IAAKW,GAClBT,EAAe,CACb,KAAMS,EAGN,aAAAd,EACA,QAAAQ,CAAA,CACD,CAAA,CACH,CAAA,CACF,CACF,CAAA,CAAA,EAlC0BD,EAAK,GAmCjC,EAIAE,EAAAA,kBAAAA,KAACC,EAAAA,aAAkB,KAAlB,CACC,UAAWC,EAAAA,IAAI,oBAAqB,+BAA+B,EAEnE,gBAAeb,IAAgBS,EAAK,IACpC,SAAUP,GAAAA,YAAAA,EAAc,SAASO,EAAK,KACtC,SAAU,IAAM,QACdQ,EAAAR,EAAK,WAAL,MAAAQ,EAAA,KAAAR,EAAgBA,EAAK,KACrBR,GAAA,MAAAA,EAAoBQ,EAAK,KACzBC,GAAA,MAAAA,GACF,EAEA,SAAA,CAAAI,EAAAA,kBAAAA,IAAC,OAAA,CACC,UAAU,4BACV,MAAO,CAAE,SAAU,OAAA,EAElB,SAAAL,EAAK,KAAA,CAAA,EAEPA,EAAK,aACJK,EAAAA,kBAAAA,IAAC,OAAA,CACC,UAAU,kCACV,MAAO,CAAE,SAAU,MAAA,EAElB,SAAAL,EAAK,WAAA,CAAA,CACR,CAAA,EArBGA,EAAK,GAAA,CA0BlB,CAEA,gCACGG,EAAAA,aAAkB,KAAlB,CAAuB,KAAMd,EAAQ,aAAAC,EACpC,SAAA,CAAAe,EAAAA,kBAAAA,IAACF,EAAAA,aAAkB,QAAlB,CAA0B,QAAO,GAAE,SAAAhB,EAAQ,EAC5CkB,EAAAA,kBAAAA,IAACF,EAAAA,aAAkB,OAAlB,CACC,SAAAD,EAAAA,kBAAAA,KAACC,EAAAA,aAAkB,QAAlB,CACC,UAAWC,EAAAA,IAAI,cAAe,2BAA4BT,CAAU,EACpE,MAAOC,EAEN,SAAA,CAAAF,2BACES,EAAAA,aAAkB,MAAlB,CAAwB,UAAU,kCAChC,SAAAT,EACH,EAEDN,EAAM,IAAKY,GACVF,EAAe,CACb,KAAAE,EAGA,aAAAP,EACA,QAAS,IAAMH,GAAA,YAAAA,EAAe,GAAK,CACpC,CAAA,CACH,CAAA,CAAA,CACF,CACF,CAAA,EACF,CAEJ,CAEAJ,EAAY,YAAc"}

package/dist/components/Menu/PopoverMenu.es.js

@@ -1,61 +1,64 @@
 import { j as r } from "../../node_modules/react/jsx-runtime.es.js";
 import { DropdownMenu as s } from "radix-ui";
-import { useTheme as N } from "../ThemeProvider.es.js";
-import { csx as o } from "../../utils/string.es.js";
-import { ChevronRight as b } from "../Icon/IconComponents/ChevronRight.es.js";
-function f({
+import { useTheme as g } from "../ThemeProvider.es.js";
+import { csx as l } from "../../utils/string.es.js";
+import { ChevronRight as y } from "../Icon/IconComponents/ChevronRight.es.js";
+function b({
   trigger: _,
   items: h,
   isOpen: x,
   onOpenChange: t,
-  selectedKey: M,
+  selectedKey: j = "",
   onSelectionChange: a,
-  disabledKeys: g,
-  title: u
+  disabledKeys: M = [],
+  title: d = ""
 }) {
-  const { className: c, style: d } = N();
+  const { className: u, style: c } = g();
   function p(m) {
-    const { item: e, className: j, style: y, disabledKeys: n, onClose: i } = m;
+    const { item: e, disabledKeys: n, onClose: i } = m;
     return e.children && e.children.length > 0 ? /* @__PURE__ */ r.jsxs(s.Sub, { children: [
       /* @__PURE__ */ r.jsxs(
         s.SubTrigger,
         {
-          className: o(
+          className: l(
             "proton-Menu__item",
             "proton-MenuTrigger__menu-item"
           ),
           children: [
             e.label,
-            /* @__PURE__ */ r.jsx("span", { className: "proton-MenuTrigger__chevron", "aria-hidden": "true", children: /* @__PURE__ */ r.jsx(b, { size: 12 }) })
+            /* @__PURE__ */ r.jsx("span", { className: "proton-MenuTrigger__chevron", "aria-hidden": "true", children: /* @__PURE__ */ r.jsx(y, { size: 12 }) })
           ]
         }
       ),
-      /* @__PURE__ */ r.jsx(
+      /* @__PURE__ */ r.jsx(s.Portal, { children: /* @__PURE__ */ r.jsx(
         s.SubContent,
         {
           sideOffset: 8,
           "data-has-submenu": "true",
-          className: o("proton-Menu", "proton-MenuTrigger__menu"),
+          className: l(
+            "proton-Menu",
+            "proton-MenuTrigger__menu",
+            u
+          ),
+          style: c,
           children: e.children.map(
-            (l) => p({
-              item: l,
-              className: j,
-              style: y,
+            (o) => p({
+              item: o,
               disabledKeys: n,
               onClose: i
             })
           )
         }
-      )
+      ) })
     ] }, e.key) : /* @__PURE__ */ r.jsxs(
       s.Item,
       {
-        className: o("proton-Menu__item", "proton-MenuTrigger__menu-item"),
-        "aria-selected": M === e.key,
+        className: l("proton-Menu__item", "proton-MenuTrigger__menu-item"),
+        "aria-selected": j === e.key,
         disabled: n == null ? void 0 : n.includes(e.key),
         onSelect: () => {
-          var l;
-          (l = e.onAction) == null || l.call(e, e.key), a == null || a(e.key), i == null || i();
+          var o;
+          (o = e.onAction) == null || o.call(e, e.key), a == null || a(e.key), i == null || i();
         },
         children: [
           /* @__PURE__ */ r.jsx(
@@ -84,16 +87,14 @@ function f({
     /* @__PURE__ */ r.jsx(s.Portal, { children: /* @__PURE__ */ r.jsxs(
       s.Content,
       {
-        className: o("proton-Menu", "proton-MenuTrigger__menu", c),
-        style: d,
+        className: l("proton-Menu", "proton-MenuTrigger__menu", u),
+        style: c,
         children: [
-          u && /* @__PURE__ */ r.jsx(s.Label, { className: "proton-MenuTrigger__menu-header", children: u }),
+          d && /* @__PURE__ */ r.jsx(s.Label, { className: "proton-MenuTrigger__menu-header", children: d }),
           h.map(
             (m) => p({
               item: m,
-              className: c,
-              style: d,
-              disabledKeys: g,
+              disabledKeys: M,
               onClose: () => t == null ? void 0 : t(!1)
             })
           )
@@ -102,8 +103,8 @@ function f({
     ) })
   ] });
 }
-f.displayName = "ProtonUIPopoverMenu";
+b.displayName = "ProtonUIPopoverMenu";
 export {
-  f as PopoverMenu
+  b as PopoverMenu
 };
 //# sourceMappingURL=PopoverMenu.es.js.map

package/dist/components/Menu/PopoverMenu.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverMenu.es.js","sources":["../../../src/components/Menu/PopoverMenu.tsx"],"sourcesContent":["import { DropdownMenu as RadixDropdownMenu } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { ChevronRight as ChevronRightIcon } from \"../Icon\";\n\nexport interface PopoverMenuProps {\n  /** The trigger component */\n  trigger: React.ReactNode;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is open */\n  isOpen: boolean;\n\n  /** Callback when the menu is opened or closed */\n  onOpenChange: (open: boolean) => void;\n\n  /** The key of the selected item */\n  selectedKey: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange: (key: string) => void;\n\n  /** The keys of the disabled items */\n  disabledKeys: string[];\n\n  /** The title of the menu */\n  title: string;\n}\n\n/**\n * A component that displays a popover menu.\n *\n * API:\n *  - {@link PopoverMenuProps}\n */\nexport function PopoverMenu({\n  trigger,\n  items,\n  isOpen,\n  onOpenChange,\n  selectedKey,\n  onSelectionChange,\n  disabledKeys,\n  title,\n}: PopoverMenuProps) {\n  const { className: themeClass, style: themeStyle } = useTheme();\n\n  function renderMenuItem(props) {\n    const { item, className, style, disabledKeys, onClose } = props;\n\n    if (item.children && item.children.length > 0) {\n      return (\n        <RadixDropdownMenu.Sub key={item.key}>\n          <RadixDropdownMenu.SubTrigger\n            className={csx(\n              \"proton-Menu__item\",\n              \"proton-MenuTrigger__menu-item\",\n            )}\n          >\n            {item.label}\n            <span className=\"proton-MenuTrigger__chevron\" aria-hidden=\"true\">\n              <ChevronRightIcon size={12} />\n            </span>\n          </RadixDropdownMenu.SubTrigger>\n\n          <RadixDropdownMenu.SubContent\n            sideOffset={8}\n            data-has-submenu=\"true\"\n            className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\")}\n          >\n            {item.children.map((child) =>\n              renderMenuItem({\n                item: child,\n                className,\n                style,\n                disabledKeys,\n                onClose,\n              }),\n            )}\n          </RadixDropdownMenu.SubContent>\n        </RadixDropdownMenu.Sub>\n      );\n    } else {\n      return (\n        <RadixDropdownMenu.Item\n          className={csx(\"proton-Menu__item\", \"proton-MenuTrigger__menu-item\")}\n          key={item.key}\n          aria-selected={selectedKey === item.key}\n          disabled={disabledKeys?.includes(item.key)}\n          onSelect={() => {\n            item.onAction?.(item.key);\n            onSelectionChange?.(item.key);\n            onClose?.();\n          }}\n        >\n          <span\n            className=\"proton-MenuTrigger__label\"\n            style={{ gridArea: \"label\" }}\n          >\n            {item.label}\n          </span>\n          {item.description && (\n            <span\n              className=\"proton-MenuTrigger__description\"\n              style={{ gridArea: \"desc\" }}\n            >\n              {item.description}\n            </span>\n          )}\n        </RadixDropdownMenu.Item>\n      );\n    }\n  }\n\n  return (\n    <RadixDropdownMenu.Root open={isOpen} onOpenChange={onOpenChange}>\n      <RadixDropdownMenu.Trigger asChild>{trigger}</RadixDropdownMenu.Trigger>\n      <RadixDropdownMenu.Portal>\n        <RadixDropdownMenu.Content\n          className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\", themeClass)}\n          style={themeStyle as React.CSSProperties}\n        >\n          {title && (\n            <RadixDropdownMenu.Label className=\"proton-MenuTrigger__menu-header\">\n              {title}\n            </RadixDropdownMenu.Label>\n          )}\n          {items.map((item) =>\n            renderMenuItem({\n              item,\n              className: themeClass,\n              style: themeStyle as React.CSSProperties,\n              disabledKeys,\n              onClose: () => onOpenChange?.(false),\n            }),\n          )}\n        </RadixDropdownMenu.Content>\n      </RadixDropdownMenu.Portal>\n    </RadixDropdownMenu.Root>\n  );\n}\n\nPopoverMenu.displayName = \"ProtonUIPopoverMenu\";\n"],"names":["PopoverMenu","trigger","items","isOpen","onOpenChange","selectedKey","onSelectionChange","disabledKeys","title","themeClass","themeStyle","useTheme","renderMenuItem","props","item","className","style","onClose","jsxs","RadixDropdownMenu","csx","jsx","ChevronRightIcon","child","_a"],"mappings":"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"}
+{"version":3,"file":"PopoverMenu.es.js","sources":["../../../src/components/Menu/PopoverMenu.tsx"],"sourcesContent":["import { DropdownMenu as RadixDropdownMenu } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { ChevronRight as ChevronRightIcon } from \"../Icon\";\n\nimport type { CSSProperties, ReactNode } from \"react\";\n\ntype MenuItemRenderArgs = {\n  item: ActionMenuAction;\n  className: string | undefined;\n  style: CSSProperties | undefined;\n  disabledKeys: string[];\n  onClose: (() => void) | undefined;\n};\n\nexport interface PopoverMenuProps {\n  /** The trigger component */\n  trigger: ReactNode;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is open */\n  isOpen: boolean;\n\n  /** Callback when the menu is opened or closed */\n  onOpenChange: (open: boolean) => void;\n\n  /** The key of the selected item */\n  selectedKey?: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange: (key: string) => void;\n\n  /** The keys of the disabled items */\n  disabledKeys?: string[];\n\n  /** The title of the menu */\n  title?: string;\n}\n\n/**\n * A component that displays a popover menu.\n *\n * API:\n *  - {@link PopoverMenuProps}\n */\nexport function PopoverMenu({\n  trigger,\n  items,\n  isOpen,\n  onOpenChange,\n  selectedKey = \"\",\n  onSelectionChange,\n  disabledKeys = [],\n  title = \"\",\n}: PopoverMenuProps) {\n  const { className: themeClass, style: themeStyle } = useTheme();\n\n  function renderMenuItem(props: MenuItemRenderArgs) {\n    const { item, className, style, disabledKeys, onClose } = props;\n\n    if (item.children && item.children.length > 0) {\n      return (\n        <RadixDropdownMenu.Sub key={item.key}>\n          <RadixDropdownMenu.SubTrigger\n            className={csx(\n              \"proton-Menu__item\",\n              \"proton-MenuTrigger__menu-item\",\n            )}\n          >\n            {item.label}\n            <span className=\"proton-MenuTrigger__chevron\" aria-hidden=\"true\">\n              <ChevronRightIcon size={12} />\n            </span>\n          </RadixDropdownMenu.SubTrigger>\n\n          <RadixDropdownMenu.Portal>\n            <RadixDropdownMenu.SubContent\n              sideOffset={8}\n              data-has-submenu=\"true\"\n              className={csx(\n                \"proton-Menu\",\n                \"proton-MenuTrigger__menu\",\n                themeClass,\n              )}\n              style={themeStyle as CSSProperties}\n            >\n              {item.children.map((child: ActionMenuAction) =>\n                renderMenuItem({\n                  item: child,\n                  className,\n                  style,\n                  disabledKeys,\n                  onClose,\n                }),\n              )}\n            </RadixDropdownMenu.SubContent>\n          </RadixDropdownMenu.Portal>\n        </RadixDropdownMenu.Sub>\n      );\n    } else {\n      return (\n        <RadixDropdownMenu.Item\n          className={csx(\"proton-Menu__item\", \"proton-MenuTrigger__menu-item\")}\n          key={item.key}\n          aria-selected={selectedKey === item.key}\n          disabled={disabledKeys?.includes(item.key)}\n          onSelect={() => {\n            item.onAction?.(item.key);\n            onSelectionChange?.(item.key);\n            onClose?.();\n          }}\n        >\n          <span\n            className=\"proton-MenuTrigger__label\"\n            style={{ gridArea: \"label\" }}\n          >\n            {item.label}\n          </span>\n          {item.description && (\n            <span\n              className=\"proton-MenuTrigger__description\"\n              style={{ gridArea: \"desc\" }}\n            >\n              {item.description}\n            </span>\n          )}\n        </RadixDropdownMenu.Item>\n      );\n    }\n  }\n\n  return (\n    <RadixDropdownMenu.Root open={isOpen} onOpenChange={onOpenChange}>\n      <RadixDropdownMenu.Trigger asChild>{trigger}</RadixDropdownMenu.Trigger>\n      <RadixDropdownMenu.Portal>\n        <RadixDropdownMenu.Content\n          className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\", themeClass)}\n          style={themeStyle as CSSProperties}\n        >\n          {title && (\n            <RadixDropdownMenu.Label className=\"proton-MenuTrigger__menu-header\">\n              {title}\n            </RadixDropdownMenu.Label>\n          )}\n          {items.map((item) =>\n            renderMenuItem({\n              item,\n              className: themeClass,\n              style: themeStyle as CSSProperties,\n              disabledKeys,\n              onClose: () => onOpenChange?.(false),\n            }),\n          )}\n        </RadixDropdownMenu.Content>\n      </RadixDropdownMenu.Portal>\n    </RadixDropdownMenu.Root>\n  );\n}\n\nPopoverMenu.displayName = \"ProtonUIPopoverMenu\";\n"],"names":["PopoverMenu","trigger","items","isOpen","onOpenChange","selectedKey","onSelectionChange","disabledKeys","title","themeClass","themeStyle","useTheme","renderMenuItem","props","item","onClose","jsxs","RadixDropdownMenu","csx","jsx","ChevronRightIcon","child","_a"],"mappings":"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"}

package/dist/components/Modal/Modal.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../node_modules/react/jsx-runtime.cjs.js"),R=require("react"),E=require("../../hooks/useIsClosing.cjs.js"),_=require("../Button/Button.cjs.js");;/* empty css               */const b=require("../ScreenOverlay/ScreenOverlay.cjs.js"),C=require("../../hooks/useBreakpoint.cjs.js"),g=require("../../constants/breakpoint.cjs.js"),h=require("../../utils/string.cjs.js"),d=({children:t})=>o.jsxRuntimeExports.jsx("h2",{className:"proton-Modal__title",children:t}),x=({children:t})=>o.jsxRuntimeExports.jsx("h3",{className:"proton-Modal__subtitle",children:t}),j=({children:t})=>o.jsxRuntimeExports.jsx("div",{className:"proton-Modal__body",children:t}),q=t=>o.jsxRuntimeExports.jsx("div",{className:"proton-Modal__action",children:o.jsxRuntimeExports.jsx(_.Button,{...t})}),v=({children:t})=>o.jsxRuntimeExports.jsx("div",{className:"proton-Modal__actions",children:t}),N=({title:t,subtitle:s,body:e,onClose:n,children:r,isClosing:i,"data-testid":a})=>o.jsxRuntimeExports.jsxs("div",{"data-testid":a,className:h.csx("proton-Modal",i&&"proton-Modal--closing"),"aria-modal":"true",role:"dialog",tabIndex:-1,children:[o.jsxRuntimeExports.jsx("button",{name:"Close",className:"proton-Modal__close-button",onClick:n,"aria-label":"Close",children:"×"}),t&&o.jsxRuntimeExports.jsx(d,{children:t}),s&&o.jsxRuntimeExports.jsx(x,{children:s}),e&&o.jsxRuntimeExports.jsx(j,{children:e}),o.jsxRuntimeExports.jsx("div",{className:"proton-Modal__content",children:r})]}),B=({isOpen:t,onClose:s,title:e,subtitle:n,body:r,children:i,isOverlay:a=!0,"data-testid":p})=>{const l=R.useRef(null),{isClosing:m,handleClose:c}=E.useIsClosing({onClose:s,overlayRef:l}),M=C.useBreakpoint(g.BREAKPOINTS.MEDIUM);if(!t)return null;const u=o.jsxRuntimeExports.jsx(N,{isOpen:t,title:e,subtitle:n,body:r,onClose:c,isClosing:m,"data-testid":p,children:i});return a||M?o.jsxRuntimeExports.jsx(b.ScreenOverlay,{fadeIn:!0,ref:l,onClose:c,children:u}):u},y=Object.assign(B,{Title:d,Subtitle:x,Body:j,Action:q,Actions:v});exports.Modal=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../node_modules/react/jsx-runtime.cjs.js"),M=require("react"),R=require("../../hooks/useIsClosing.cjs.js"),E=require("../Button/Button.cjs.js");;/* empty css               */const _=require("../ScreenOverlay/ScreenOverlay.cjs.js");;/* empty css                              */const C=require("../../utils/string.cjs.js"),x=({children:t})=>o.jsxRuntimeExports.jsx("h2",{className:"proton-Modal__title",children:t}),j=({children:t})=>o.jsxRuntimeExports.jsx("h3",{className:"proton-Modal__subtitle",children:t}),m=({children:t})=>o.jsxRuntimeExports.jsx("div",{className:"proton-Modal__body",children:t}),b=t=>o.jsxRuntimeExports.jsx("div",{className:"proton-Modal__action",children:o.jsxRuntimeExports.jsx(E.Button,{...t})}),g=({children:t})=>o.jsxRuntimeExports.jsx("div",{className:"proton-Modal__actions",children:t}),h=({title:t,subtitle:s,body:e,onClose:n,children:r,isClosing:l,isOpen:a,"data-testid":i})=>o.jsxRuntimeExports.jsxs("div",{"data-testid":i,"data-disable-document-scroll":a,className:C.csx("proton-Modal","proton-Elevation--glass",l&&"proton-Modal--closing"),"aria-modal":"true",role:"dialog",tabIndex:-1,children:[o.jsxRuntimeExports.jsx("button",{name:"Close",className:"proton-Modal__close-button",onClick:n,"aria-label":"Close",children:"×"}),t&&o.jsxRuntimeExports.jsx(x,{children:t}),s&&o.jsxRuntimeExports.jsx(j,{children:s}),e&&o.jsxRuntimeExports.jsx(m,{children:e}),o.jsxRuntimeExports.jsx("div",{className:"proton-Modal__content",children:r})]}),v=({isOpen:t,onClose:s,title:e,subtitle:n,body:r,children:l,isOverlay:a=!0,"data-testid":i})=>{const d=M.useRef(null),{isClosing:p,handleClose:c}=R.useIsClosing({onClose:s,overlayRef:d});if(!t)return null;const u=o.jsxRuntimeExports.jsx(h,{isOpen:t,title:e,subtitle:n,body:r,onClose:c,isClosing:p,"data-testid":i,children:l});return a?o.jsxRuntimeExports.jsx(_.ScreenOverlay,{fadeIn:!0,ref:d,onClose:c,children:u}):u},q=Object.assign(v,{Title:x,Subtitle:j,Body:m,Action:b,Actions:g});exports.Modal=q;
 //# sourceMappingURL=Modal.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks\";\nimport { useIsClosing } from \"../../hooks/useIsClosing\";\nimport { csx } from \"../../utils\";\nimport { Button, ButtonProps } from \"../Button/Button\";\nimport \"./Modal.css\";\nimport { ScreenOverlay } from \"../ScreenOverlay/ScreenOverlay\";\n\nconst ModalTitle = ({ children }: { children: React.ReactNode }) => {\n  return <h2 className=\"proton-Modal__title\">{children}</h2>;\n};\n\nconst ModalSubtitle = ({ children }: { children: React.ReactNode }) => {\n  return <h3 className=\"proton-Modal__subtitle\">{children}</h3>;\n};\n\nconst ModalBody = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"proton-Modal__body\">{children}</div>;\n};\n\nconst ModalAction = (buttonProps: ButtonProps) => {\n  return (\n    <div className=\"proton-Modal__action\">\n      <Button {...buttonProps} />\n    </div>\n  );\n};\n\nconst ModalActions = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"proton-Modal__actions\">{children}</div>;\n};\n\nconst ModalContent = ({\n  title,\n  subtitle,\n  body,\n  onClose,\n  children,\n  isClosing,\n  \"data-testid\": dataTestId,\n}: ModalProps & {\n  isClosing: boolean;\n}) => {\n  return (\n    <div\n      data-testid={dataTestId}\n      className={csx(\"proton-Modal\", isClosing && \"proton-Modal--closing\")}\n      aria-modal=\"true\"\n      role=\"dialog\"\n      tabIndex={-1}\n    >\n      <button\n        name=\"Close\"\n        className=\"proton-Modal__close-button\"\n        onClick={onClose}\n        aria-label=\"Close\"\n      >\n        ×\n      </button>\n      {title && <ModalTitle>{title}</ModalTitle>}\n      {subtitle && <ModalSubtitle>{subtitle}</ModalSubtitle>}\n      {body && <ModalBody>{body}</ModalBody>}\n      <div className=\"proton-Modal__content\">{children}</div>\n    </div>\n  );\n};\n\nexport interface ModalProps {\n  /**\n   * Optional body text content for the modal\n   * */\n  body?: string;\n  /**\n   * Content to render inside the modal\n   * */\n  children: React.ReactNode;\n  /**\n   * data-testid for the modal\n   * */\n  \"data-testid\"?: string;\n  /**\n   * Controls the visibility of the modal\n   * */\n  isOpen: boolean;\n  /**\n   * Whether to show the modal with an overlay background.\n   * @default true\n   * */\n  isOverlay?: boolean;\n  /**\n   * Callback function when modal is closed\n   * */\n  onClose?: () => void;\n  /**\n   * Optional subtitle text below the modal title\n   * */\n  subtitle?: string;\n  /**\n   * Optional title text for the modal header\n   * */\n  title?: string;\n}\n\n/**\n * Modal component with overlay support and responsive behavior.\n *\n * API:\n *  - {@link ModalProps}\n */\nconst ModalWrapper = ({\n  isOpen,\n  onClose,\n  title,\n  subtitle,\n  body,\n  children,\n  isOverlay = true,\n  \"data-testid\": dataTestId,\n}: ModalProps) => {\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const { isClosing, handleClose } = useIsClosing({\n    onClose,\n    overlayRef,\n  });\n  const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\n\n  if (!isOpen) return null;\n\n  const modalContent = (\n    <ModalContent\n      isOpen={isOpen}\n      title={title}\n      subtitle={subtitle}\n      body={body}\n      onClose={handleClose}\n      isClosing={isClosing}\n      data-testid={dataTestId}\n    >\n      {children}\n    </ModalContent>\n  );\n\n  return isOverlay || isMobile ? (\n    <ScreenOverlay fadeIn ref={overlayRef} onClose={handleClose}>\n      {modalContent}\n    </ScreenOverlay>\n  ) : (\n    modalContent\n  );\n};\n\nexport const Modal = Object.assign(ModalWrapper, {\n  /**\n   * Renders a h2 styled title\n   * */\n  Title: ModalTitle,\n  /**\n   * Renders a h3 styled subtitle\n   * */\n  Subtitle: ModalSubtitle,\n  /**\n   * Renders a div styled body\n   * */\n  Body: ModalBody,\n  /**\n   * Renders a Proton Button action\n   * - @prop buttonProps {@link ButtonProps}\n   * */\n  Action: ModalAction,\n  /**\n   * Renders a group of Proton Buttons\n   * */\n  Actions: ModalActions,\n});\n"],"names":["ModalTitle","children","jsx","ModalSubtitle","ModalBody","ModalAction","buttonProps","Button","ModalActions","ModalContent","title","subtitle","body","onClose","isClosing","dataTestId","jsxs","csx","ModalWrapper","isOpen","isOverlay","overlayRef","useRef","handleClose","useIsClosing","isMobile","useBreakpoint","BREAKPOINTS","modalContent","ScreenOverlay","Modal"],"mappings":"+cAWMA,EAAa,CAAC,CAAE,SAAAC,KACZC,EAAAA,kBAAAA,IAAA,KAAA,CAAG,UAAU,sBAAuB,SAAAD,CAAS,CAAA,EAGjDE,EAAgB,CAAC,CAAE,SAAAF,KACfC,EAAAA,kBAAAA,IAAA,KAAA,CAAG,UAAU,yBAA0B,SAAAD,CAAS,CAAA,EAGpDG,EAAY,CAAC,CAAE,SAAAH,KACXC,EAAAA,kBAAAA,IAAA,MAAA,CAAI,UAAU,qBAAsB,SAAAD,CAAS,CAAA,EAGjDI,EAAeC,GAEjBJ,wBAAC,OAAI,UAAU,uBACb,iCAACK,EAAQ,OAAA,CAAA,GAAGD,CAAa,CAAA,CAC3B,CAAA,EAIEE,EAAe,CAAC,CAAE,SAAAP,KACdC,EAAAA,kBAAAA,IAAA,MAAA,CAAI,UAAU,wBAAyB,SAAAD,CAAS,CAAA,EAGpDQ,EAAe,CAAC,CACpB,MAAAC,EACA,SAAAC,EACA,KAAAC,EACA,QAAAC,EACA,SAAAZ,EACA,UAAAa,EACA,cAAeC,CACjB,IAIIC,EAAA,kBAAA,KAAC,MAAA,CACC,cAAaD,EACb,UAAWE,EAAA,IAAI,eAAgBH,GAAa,uBAAuB,EACnE,aAAW,OACX,KAAK,SACL,SAAU,GAEV,SAAA,CAAAZ,EAAA,kBAAA,IAAC,SAAA,CACC,KAAK,QACL,UAAU,6BACV,QAASW,EACT,aAAW,QACZ,SAAA,GAAA,CAED,EACCH,GAAUR,EAAAA,kBAAAA,IAAAF,EAAA,CAAY,SAAMU,CAAA,CAAA,EAC5BC,GAAaT,EAAAA,kBAAAA,IAAAC,EAAA,CAAe,SAASQ,CAAA,CAAA,EACrCC,GAASV,EAAAA,kBAAAA,IAAAE,EAAA,CAAW,SAAKQ,CAAA,CAAA,EACzBV,EAAAA,kBAAAA,IAAA,MAAA,CAAI,UAAU,wBAAyB,SAAAD,CAAS,CAAA,CAAA,CAAA,CAAA,EA+CjDiB,EAAe,CAAC,CACpB,OAAAC,EACA,QAAAN,EACA,MAAAH,EACA,SAAAC,EACA,KAAAC,EACA,SAAAX,EACA,UAAAmB,EAAY,GACZ,cAAeL,CACjB,IAAkB,CACV,MAAAM,EAAaC,SAAuB,IAAI,EACxC,CAAE,UAAAR,EAAW,YAAAS,CAAY,EAAIC,eAAa,CAC9C,QAAAX,EACA,WAAAQ,CAAA,CACD,EACKI,EAAWC,EAAAA,cAAcC,EAAA,YAAY,MAAM,EAE7C,GAAA,CAACR,EAAe,OAAA,KAEpB,MAAMS,EACJ1B,EAAA,kBAAA,IAACO,EAAA,CACC,OAAAU,EACA,MAAAT,EACA,SAAAC,EACA,KAAAC,EACA,QAASW,EACT,UAAAT,EACA,cAAaC,EAEZ,SAAAd,CAAA,CAAA,EAIE,OAAAmB,GAAaK,EAClBvB,EAAAA,kBAAAA,IAAC2B,EAAAA,cAAc,CAAA,OAAM,GAAC,IAAKR,EAAY,QAASE,EAC7C,SAAAK,CAAA,CACH,EAEAA,CAEJ,EAEaE,EAAQ,OAAO,OAAOZ,EAAc,CAI/C,MAAOlB,EAIP,SAAUG,EAIV,KAAMC,EAKN,OAAQC,EAIR,QAASG,CACX,CAAC"}
+{"version":3,"file":"Modal.cjs.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport { useIsClosing } from \"../../hooks/useIsClosing\";\nimport { csx } from \"../../utils\";\nimport { Button, ButtonProps } from \"../Button/Button\";\nimport \"./Modal.css\";\nimport { ScreenOverlay } from \"../ScreenOverlay/ScreenOverlay\";\nimport \"../Elevation/Elevation.css\";\n\nconst ModalTitle = ({ children }: { children: React.ReactNode }) => {\n  return <h2 className=\"proton-Modal__title\">{children}</h2>;\n};\n\nconst ModalSubtitle = ({ children }: { children: React.ReactNode }) => {\n  return <h3 className=\"proton-Modal__subtitle\">{children}</h3>;\n};\n\nconst ModalBody = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"proton-Modal__body\">{children}</div>;\n};\n\nconst ModalAction = (buttonProps: ButtonProps) => {\n  return (\n    <div className=\"proton-Modal__action\">\n      <Button {...buttonProps} />\n    </div>\n  );\n};\n\nconst ModalActions = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"proton-Modal__actions\">{children}</div>;\n};\n\nconst ModalContent = ({\n  title,\n  subtitle,\n  body,\n  onClose,\n  children,\n  isClosing,\n  isOpen,\n  \"data-testid\": dataTestId,\n}: ModalProps & {\n  isClosing: boolean;\n}) => {\n  return (\n    <div\n      data-testid={dataTestId}\n      data-disable-document-scroll={isOpen}\n      className={csx(\n        \"proton-Modal\",\n        \"proton-Elevation--glass\",\n        isClosing && \"proton-Modal--closing\",\n      )}\n      aria-modal=\"true\"\n      role=\"dialog\"\n      tabIndex={-1}\n    >\n      <button\n        name=\"Close\"\n        className=\"proton-Modal__close-button\"\n        onClick={onClose}\n        aria-label=\"Close\"\n      >\n        ×\n      </button>\n      {title && <ModalTitle>{title}</ModalTitle>}\n      {subtitle && <ModalSubtitle>{subtitle}</ModalSubtitle>}\n      {body && <ModalBody>{body}</ModalBody>}\n      <div className=\"proton-Modal__content\">{children}</div>\n    </div>\n  );\n};\n\nexport interface ModalProps {\n  /**\n   * Optional body text content for the modal\n   * */\n  body?: string;\n  /**\n   * Content to render inside the modal\n   * */\n  children: React.ReactNode;\n  /**\n   * data-testid for the modal\n   * */\n  \"data-testid\"?: string;\n  /**\n   * Controls the visibility of the modal\n   * */\n  isOpen: boolean;\n  /**\n   * Whether to show the modal with an overlay background.\n   * @default true\n   * */\n  isOverlay?: boolean;\n  /**\n   * Callback function when modal is closed\n   * */\n  onClose?: () => void;\n  /**\n   * Optional subtitle text below the modal title\n   * */\n  subtitle?: string;\n  /**\n   * Optional title text for the modal header\n   * */\n  title?: string;\n}\n\n/**\n * Modal component with overlay support and responsive behavior.\n *\n * API:\n *  - {@link ModalProps}\n */\nconst ModalWrapper = ({\n  isOpen,\n  onClose,\n  title,\n  subtitle,\n  body,\n  children,\n  isOverlay = true,\n  \"data-testid\": dataTestId,\n}: ModalProps) => {\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const { isClosing, handleClose } = useIsClosing({\n    onClose,\n    overlayRef,\n  });\n\n  if (!isOpen) return null;\n\n  const modalContent = (\n    <ModalContent\n      isOpen={isOpen}\n      title={title}\n      subtitle={subtitle}\n      body={body}\n      onClose={handleClose}\n      isClosing={isClosing}\n      data-testid={dataTestId}\n    >\n      {children}\n    </ModalContent>\n  );\n\n  return isOverlay ? (\n    <ScreenOverlay fadeIn ref={overlayRef} onClose={handleClose}>\n      {modalContent}\n    </ScreenOverlay>\n  ) : (\n    modalContent\n  );\n};\n\nexport const Modal = Object.assign(ModalWrapper, {\n  /**\n   * Renders a h2 styled title\n   * */\n  Title: ModalTitle,\n  /**\n   * Renders a h3 styled subtitle\n   * */\n  Subtitle: ModalSubtitle,\n  /**\n   * Renders a div styled body\n   * */\n  Body: ModalBody,\n  /**\n   * Renders a Proton Button action\n   * - @prop buttonProps {@link ButtonProps}\n   * */\n  Action: ModalAction,\n  /**\n   * Renders a group of Proton Buttons\n   * */\n  Actions: ModalActions,\n});\n"],"names":["ModalTitle","children","jsx","ModalSubtitle","ModalBody","ModalAction","buttonProps","Button","ModalActions","ModalContent","title","subtitle","body","onClose","isClosing","isOpen","dataTestId","jsxs","csx","ModalWrapper","isOverlay","overlayRef","useRef","handleClose","useIsClosing","modalContent","ScreenOverlay","Modal"],"mappings":"qaAUMA,EAAa,CAAC,CAAE,SAAAC,KACbC,EAAAA,kBAAAA,IAAC,KAAA,CAAG,UAAU,sBAAuB,SAAAD,CAAA,CAAS,EAGjDE,EAAgB,CAAC,CAAE,SAAAF,KAChBC,EAAAA,kBAAAA,IAAC,KAAA,CAAG,UAAU,yBAA0B,SAAAD,CAAA,CAAS,EAGpDG,EAAY,CAAC,CAAE,SAAAH,KACZC,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,qBAAsB,SAAAD,CAAA,CAAS,EAGjDI,EAAeC,GAEjBJ,wBAAC,OAAI,UAAU,uBACb,iCAACK,SAAA,CAAQ,GAAGD,EAAa,CAAA,CAC3B,EAIEE,EAAe,CAAC,CAAE,SAAAP,KACfC,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,wBAAyB,SAAAD,CAAA,CAAS,EAGpDQ,EAAe,CAAC,CACpB,MAAAC,EACA,SAAAC,EACA,KAAAC,EACA,QAAAC,EACA,SAAAZ,EACA,UAAAa,EACA,OAAAC,EACA,cAAeC,CACjB,IAIIC,EAAAA,kBAAAA,KAAC,MAAA,CACC,cAAaD,EACb,+BAA8BD,EAC9B,UAAWG,EAAAA,IACT,eACA,0BACAJ,GAAa,uBAAA,EAEf,aAAW,OACX,KAAK,SACL,SAAU,GAEV,SAAA,CAAAZ,EAAAA,kBAAAA,IAAC,SAAA,CACC,KAAK,QACL,UAAU,6BACV,QAASW,EACT,aAAW,QACZ,SAAA,GAAA,CAAA,EAGAH,GAASR,EAAAA,kBAAAA,IAACF,EAAA,CAAY,SAAAU,CAAA,CAAM,EAC5BC,GAAYT,EAAAA,kBAAAA,IAACC,EAAA,CAAe,SAAAQ,CAAA,CAAS,EACrCC,GAAQV,EAAAA,kBAAAA,IAACE,EAAA,CAAW,SAAAQ,CAAA,CAAK,EAC1BV,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,wBAAyB,SAAAD,CAAA,CAAS,CAAA,CAAA,CAAA,EA+CjDkB,EAAe,CAAC,CACpB,OAAAJ,EACA,QAAAF,EACA,MAAAH,EACA,SAAAC,EACA,KAAAC,EACA,SAAAX,EACA,UAAAmB,EAAY,GACZ,cAAeJ,CACjB,IAAkB,CAChB,MAAMK,EAAaC,EAAAA,OAAuB,IAAI,EACxC,CAAE,UAAAR,EAAW,YAAAS,CAAA,EAAgBC,eAAa,CAC9C,QAAAX,EACA,WAAAQ,CAAA,CACD,EAED,GAAI,CAACN,EAAQ,OAAO,KAEpB,MAAMU,EACJvB,EAAAA,kBAAAA,IAACO,EAAA,CACC,OAAAM,EACA,MAAAL,EACA,SAAAC,EACA,KAAAC,EACA,QAASW,EACT,UAAAT,EACA,cAAaE,EAEZ,SAAAf,CAAA,CAAA,EAIL,OAAOmB,EACLlB,EAAAA,kBAAAA,IAACwB,EAAAA,cAAA,CAAc,OAAM,GAAC,IAAKL,EAAY,QAASE,EAC7C,SAAAE,CAAA,CACH,EAEAA,CAEJ,EAEaE,EAAQ,OAAO,OAAOR,EAAc,CAI/C,MAAOnB,EAIP,SAAUG,EAIV,KAAMC,EAKN,OAAQC,EAIR,QAASG,CACX,CAAC"}

package/dist/components/Modal/Modal.es.js

@@ -1,25 +1,30 @@
 import { j as t } from "../../node_modules/react/jsx-runtime.es.js";
-import { useRef as _ } from "react";
-import { useIsClosing as f } from "../../hooks/useIsClosing.es.js";
-import { Button as h } from "../Button/Button.es.js";
+import { useRef as M } from "react";
+import { useIsClosing as _ } from "../../hooks/useIsClosing.es.js";
+import { Button as f } from "../Button/Button.es.js";
 /* empty css             */
-import { ScreenOverlay as C } from "../ScreenOverlay/ScreenOverlay.es.js";
-import { useBreakpoint as N } from "../../hooks/useBreakpoint.es.js";
-import { BREAKPOINTS as b } from "../../constants/breakpoint.es.js";
-import { csx as v } from "../../utils/string.es.js";
-const m = ({ children: o }) => /* @__PURE__ */ t.jsx("h2", { className: "proton-Modal__title", children: o }), p = ({ children: o }) => /* @__PURE__ */ t.jsx("h3", { className: "proton-Modal__subtitle", children: o }), u = ({ children: o }) => /* @__PURE__ */ t.jsx("div", { className: "proton-Modal__body", children: o }), g = (o) => /* @__PURE__ */ t.jsx("div", { className: "proton-Modal__action", children: /* @__PURE__ */ t.jsx(h, { ...o }) }), A = ({ children: o }) => /* @__PURE__ */ t.jsx("div", { className: "proton-Modal__actions", children: o }), B = ({
+import { ScreenOverlay as h } from "../ScreenOverlay/ScreenOverlay.es.js";
+/* empty css                            */
+import { csx as C } from "../../utils/string.es.js";
+const u = ({ children: o }) => /* @__PURE__ */ t.jsx("h2", { className: "proton-Modal__title", children: o }), p = ({ children: o }) => /* @__PURE__ */ t.jsx("h3", { className: "proton-Modal__subtitle", children: o }), x = ({ children: o }) => /* @__PURE__ */ t.jsx("div", { className: "proton-Modal__body", children: o }), b = (o) => /* @__PURE__ */ t.jsx("div", { className: "proton-Modal__action", children: /* @__PURE__ */ t.jsx(f, { ...o }) }), v = ({ children: o }) => /* @__PURE__ */ t.jsx("div", { className: "proton-Modal__actions", children: o }), N = ({
   title: o,
   subtitle: s,
   body: n,
-  onClose: e,
-  children: r,
-  isClosing: a,
-  "data-testid": l
+  onClose: a,
+  children: e,
+  isClosing: l,
+  isOpen: r,
+  "data-testid": d
 }) => /* @__PURE__ */ t.jsxs(
   "div",
   {
-    "data-testid": l,
-    className: v("proton-Modal", a && "proton-Modal--closing"),
+    "data-testid": d,
+    "data-disable-document-scroll": r,
+    className: C(
+      "proton-Modal",
+      "proton-Elevation--glass",
+      l && "proton-Modal--closing"
+    ),
     "aria-modal": "true",
     role: "dialog",
     tabIndex: -1,
@@ -29,51 +34,51 @@ const m = ({ children: o }) => /* @__PURE__ */ t.jsx("h2", { className: "proton-
         {
           name: "Close",
           className: "proton-Modal__close-button",
-          onClick: e,
+          onClick: a,
           "aria-label": "Close",
           children: "×"
         }
       ),
-      o && /* @__PURE__ */ t.jsx(m, { children: o }),
+      o && /* @__PURE__ */ t.jsx(u, { children: o }),
       s && /* @__PURE__ */ t.jsx(p, { children: s }),
-      n && /* @__PURE__ */ t.jsx(u, { children: n }),
-      /* @__PURE__ */ t.jsx("div", { className: "proton-Modal__content", children: r })
+      n && /* @__PURE__ */ t.jsx(x, { children: n }),
+      /* @__PURE__ */ t.jsx("div", { className: "proton-Modal__content", children: e })
     ]
   }
-), I = ({
+), g = ({
   isOpen: o,
   onClose: s,
   title: n,
-  subtitle: e,
-  body: r,
-  children: a,
-  isOverlay: l = !0,
-  "data-testid": M
+  subtitle: a,
+  body: e,
+  children: l,
+  isOverlay: r = !0,
+  "data-testid": d
 }) => {
-  const i = _(null), { isClosing: x, handleClose: d } = f({
+  const i = M(null), { isClosing: j, handleClose: c } = _({
     onClose: s,
     overlayRef: i
-  }), j = N(b.MEDIUM);
+  });
   if (!o) return null;
-  const c = /* @__PURE__ */ t.jsx(
-    B,
+  const m = /* @__PURE__ */ t.jsx(
+    N,
     {
       isOpen: o,
       title: n,
-      subtitle: e,
-      body: r,
-      onClose: d,
-      isClosing: x,
-      "data-testid": M,
-      children: a
+      subtitle: a,
+      body: e,
+      onClose: c,
+      isClosing: j,
+      "data-testid": d,
+      children: l
     }
   );
-  return l || j ? /* @__PURE__ */ t.jsx(C, { fadeIn: !0, ref: i, onClose: d, children: c }) : c;
-}, P = Object.assign(I, {
+  return r ? /* @__PURE__ */ t.jsx(h, { fadeIn: !0, ref: i, onClose: c, children: m }) : m;
+}, k = Object.assign(g, {
   /**
    * Renders a h2 styled title
    * */
-  Title: m,
+  Title: u,
   /**
    * Renders a h3 styled subtitle
    * */
@@ -81,18 +86,18 @@ const m = ({ children: o }) => /* @__PURE__ */ t.jsx("h2", { className: "proton-
   /**
    * Renders a div styled body
    * */
-  Body: u,
+  Body: x,
   /**
    * Renders a Proton Button action
    * - @prop buttonProps {@link ButtonProps}
    * */
-  Action: g,
+  Action: b,
   /**
    * Renders a group of Proton Buttons
    * */
-  Actions: A
+  Actions: v
 });
 export {
-  P as Modal
+  k as Modal
 };
 //# sourceMappingURL=Modal.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.es.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks\";\nimport { useIsClosing } from \"../../hooks/useIsClosing\";\nimport { csx } from \"../../utils\";\nimport { Button, ButtonProps } from \"../Button/Button\";\nimport \"./Modal.css\";\nimport { ScreenOverlay } from \"../ScreenOverlay/ScreenOverlay\";\n\nconst ModalTitle = ({ children }: { children: React.ReactNode }) => {\n  return <h2 className=\"proton-Modal__title\">{children}</h2>;\n};\n\nconst ModalSubtitle = ({ children }: { children: React.ReactNode }) => {\n  return <h3 className=\"proton-Modal__subtitle\">{children}</h3>;\n};\n\nconst ModalBody = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"proton-Modal__body\">{children}</div>;\n};\n\nconst ModalAction = (buttonProps: ButtonProps) => {\n  return (\n    <div className=\"proton-Modal__action\">\n      <Button {...buttonProps} />\n    </div>\n  );\n};\n\nconst ModalActions = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"proton-Modal__actions\">{children}</div>;\n};\n\nconst ModalContent = ({\n  title,\n  subtitle,\n  body,\n  onClose,\n  children,\n  isClosing,\n  \"data-testid\": dataTestId,\n}: ModalProps & {\n  isClosing: boolean;\n}) => {\n  return (\n    <div\n      data-testid={dataTestId}\n      className={csx(\"proton-Modal\", isClosing && \"proton-Modal--closing\")}\n      aria-modal=\"true\"\n      role=\"dialog\"\n      tabIndex={-1}\n    >\n      <button\n        name=\"Close\"\n        className=\"proton-Modal__close-button\"\n        onClick={onClose}\n        aria-label=\"Close\"\n      >\n        ×\n      </button>\n      {title && <ModalTitle>{title}</ModalTitle>}\n      {subtitle && <ModalSubtitle>{subtitle}</ModalSubtitle>}\n      {body && <ModalBody>{body}</ModalBody>}\n      <div className=\"proton-Modal__content\">{children}</div>\n    </div>\n  );\n};\n\nexport interface ModalProps {\n  /**\n   * Optional body text content for the modal\n   * */\n  body?: string;\n  /**\n   * Content to render inside the modal\n   * */\n  children: React.ReactNode;\n  /**\n   * data-testid for the modal\n   * */\n  \"data-testid\"?: string;\n  /**\n   * Controls the visibility of the modal\n   * */\n  isOpen: boolean;\n  /**\n   * Whether to show the modal with an overlay background.\n   * @default true\n   * */\n  isOverlay?: boolean;\n  /**\n   * Callback function when modal is closed\n   * */\n  onClose?: () => void;\n  /**\n   * Optional subtitle text below the modal title\n   * */\n  subtitle?: string;\n  /**\n   * Optional title text for the modal header\n   * */\n  title?: string;\n}\n\n/**\n * Modal component with overlay support and responsive behavior.\n *\n * API:\n *  - {@link ModalProps}\n */\nconst ModalWrapper = ({\n  isOpen,\n  onClose,\n  title,\n  subtitle,\n  body,\n  children,\n  isOverlay = true,\n  \"data-testid\": dataTestId,\n}: ModalProps) => {\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const { isClosing, handleClose } = useIsClosing({\n    onClose,\n    overlayRef,\n  });\n  const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\n\n  if (!isOpen) return null;\n\n  const modalContent = (\n    <ModalContent\n      isOpen={isOpen}\n      title={title}\n      subtitle={subtitle}\n      body={body}\n      onClose={handleClose}\n      isClosing={isClosing}\n      data-testid={dataTestId}\n    >\n      {children}\n    </ModalContent>\n  );\n\n  return isOverlay || isMobile ? (\n    <ScreenOverlay fadeIn ref={overlayRef} onClose={handleClose}>\n      {modalContent}\n    </ScreenOverlay>\n  ) : (\n    modalContent\n  );\n};\n\nexport const Modal = Object.assign(ModalWrapper, {\n  /**\n   * Renders a h2 styled title\n   * */\n  Title: ModalTitle,\n  /**\n   * Renders a h3 styled subtitle\n   * */\n  Subtitle: ModalSubtitle,\n  /**\n   * Renders a div styled body\n   * */\n  Body: ModalBody,\n  /**\n   * Renders a Proton Button action\n   * - @prop buttonProps {@link ButtonProps}\n   * */\n  Action: ModalAction,\n  /**\n   * Renders a group of Proton Buttons\n   * */\n  Actions: ModalActions,\n});\n"],"names":["ModalTitle","children","jsx","ModalSubtitle","ModalBody","ModalAction","buttonProps","Button","ModalActions","ModalContent","title","subtitle","body","onClose","isClosing","dataTestId","jsxs","csx","ModalWrapper","isOpen","isOverlay","overlayRef","useRef","handleClose","useIsClosing","isMobile","useBreakpoint","BREAKPOINTS","modalContent","ScreenOverlay","Modal"],"mappings":"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"}
+{"version":3,"file":"Modal.es.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport { useIsClosing } from \"../../hooks/useIsClosing\";\nimport { csx } from \"../../utils\";\nimport { Button, ButtonProps } from \"../Button/Button\";\nimport \"./Modal.css\";\nimport { ScreenOverlay } from \"../ScreenOverlay/ScreenOverlay\";\nimport \"../Elevation/Elevation.css\";\n\nconst ModalTitle = ({ children }: { children: React.ReactNode }) => {\n  return <h2 className=\"proton-Modal__title\">{children}</h2>;\n};\n\nconst ModalSubtitle = ({ children }: { children: React.ReactNode }) => {\n  return <h3 className=\"proton-Modal__subtitle\">{children}</h3>;\n};\n\nconst ModalBody = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"proton-Modal__body\">{children}</div>;\n};\n\nconst ModalAction = (buttonProps: ButtonProps) => {\n  return (\n    <div className=\"proton-Modal__action\">\n      <Button {...buttonProps} />\n    </div>\n  );\n};\n\nconst ModalActions = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"proton-Modal__actions\">{children}</div>;\n};\n\nconst ModalContent = ({\n  title,\n  subtitle,\n  body,\n  onClose,\n  children,\n  isClosing,\n  isOpen,\n  \"data-testid\": dataTestId,\n}: ModalProps & {\n  isClosing: boolean;\n}) => {\n  return (\n    <div\n      data-testid={dataTestId}\n      data-disable-document-scroll={isOpen}\n      className={csx(\n        \"proton-Modal\",\n        \"proton-Elevation--glass\",\n        isClosing && \"proton-Modal--closing\",\n      )}\n      aria-modal=\"true\"\n      role=\"dialog\"\n      tabIndex={-1}\n    >\n      <button\n        name=\"Close\"\n        className=\"proton-Modal__close-button\"\n        onClick={onClose}\n        aria-label=\"Close\"\n      >\n        ×\n      </button>\n      {title && <ModalTitle>{title}</ModalTitle>}\n      {subtitle && <ModalSubtitle>{subtitle}</ModalSubtitle>}\n      {body && <ModalBody>{body}</ModalBody>}\n      <div className=\"proton-Modal__content\">{children}</div>\n    </div>\n  );\n};\n\nexport interface ModalProps {\n  /**\n   * Optional body text content for the modal\n   * */\n  body?: string;\n  /**\n   * Content to render inside the modal\n   * */\n  children: React.ReactNode;\n  /**\n   * data-testid for the modal\n   * */\n  \"data-testid\"?: string;\n  /**\n   * Controls the visibility of the modal\n   * */\n  isOpen: boolean;\n  /**\n   * Whether to show the modal with an overlay background.\n   * @default true\n   * */\n  isOverlay?: boolean;\n  /**\n   * Callback function when modal is closed\n   * */\n  onClose?: () => void;\n  /**\n   * Optional subtitle text below the modal title\n   * */\n  subtitle?: string;\n  /**\n   * Optional title text for the modal header\n   * */\n  title?: string;\n}\n\n/**\n * Modal component with overlay support and responsive behavior.\n *\n * API:\n *  - {@link ModalProps}\n */\nconst ModalWrapper = ({\n  isOpen,\n  onClose,\n  title,\n  subtitle,\n  body,\n  children,\n  isOverlay = true,\n  \"data-testid\": dataTestId,\n}: ModalProps) => {\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const { isClosing, handleClose } = useIsClosing({\n    onClose,\n    overlayRef,\n  });\n\n  if (!isOpen) return null;\n\n  const modalContent = (\n    <ModalContent\n      isOpen={isOpen}\n      title={title}\n      subtitle={subtitle}\n      body={body}\n      onClose={handleClose}\n      isClosing={isClosing}\n      data-testid={dataTestId}\n    >\n      {children}\n    </ModalContent>\n  );\n\n  return isOverlay ? (\n    <ScreenOverlay fadeIn ref={overlayRef} onClose={handleClose}>\n      {modalContent}\n    </ScreenOverlay>\n  ) : (\n    modalContent\n  );\n};\n\nexport const Modal = Object.assign(ModalWrapper, {\n  /**\n   * Renders a h2 styled title\n   * */\n  Title: ModalTitle,\n  /**\n   * Renders a h3 styled subtitle\n   * */\n  Subtitle: ModalSubtitle,\n  /**\n   * Renders a div styled body\n   * */\n  Body: ModalBody,\n  /**\n   * Renders a Proton Button action\n   * - @prop buttonProps {@link ButtonProps}\n   * */\n  Action: ModalAction,\n  /**\n   * Renders a group of Proton Buttons\n   * */\n  Actions: ModalActions,\n});\n"],"names":["ModalTitle","children","jsx","ModalSubtitle","ModalBody","ModalAction","buttonProps","Button","ModalActions","ModalContent","title","subtitle","body","onClose","isClosing","isOpen","dataTestId","jsxs","csx","ModalWrapper","isOverlay","overlayRef","useRef","handleClose","useIsClosing","modalContent","ScreenOverlay","Modal"],"mappings":"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"}

package/dist/components/Overlay/Overlay.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../node_modules/react/jsx-runtime.cjs.js"),o=require("react");;/* empty css                 */const i=require("../../utils/string.cjs.js"),t=o.forwardRef(({children:s,arrow:r},n)=>e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx("div",{ref:n,className:i.csx("proton-Overlay","proton-Overlay__content"),children:s}),r&&e.jsxRuntimeExports.jsx("span",{className:"proton-Overlay-arrow",children:r})]}));t.displayName="ProtonUIOverlay";exports.Overlay=t;
+//# sourceMappingURL=Overlay.cjs.js.map

package/dist/components/Overlay/Overlay.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.cjs.js","sources":["../../../src/components/Overlay/Overlay.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, ReactNode } from \"react\";\n\nimport \"./Overlay.css\";\nimport { csx } from \"../../utils/string\";\n\nexport interface OverlayProps {\n  children?: ReactNode;\n  /**\n   * Optional arrow element.\n   */\n  arrow?: ReactNode;\n}\n\n/**\n * Applies a floating background to the content.\n * Intended use in overlay containers such as modals, tooltips, or popovers.\n *\n * API:\n *  - {@link OverlayProps}\n */\nexport const Overlay = forwardRef<HTMLDivElement, OverlayProps>(\n  ({ children, arrow }, ref) => {\n    return (\n      <>\n        <div\n          ref={ref}\n          className={csx(\n            \"proton-Overlay\",\n            \"proton-Overlay__content\",\n          )}\n        >\n          {children}\n        </div>\n        {arrow && <span className=\"proton-Overlay-arrow\">{arrow}</span>}\n      </>\n    );\n  },\n);\n\nOverlay.displayName = \"ProtonUIOverlay\";\n"],"names":["Overlay","forwardRef","children","arrow","ref","jsxs","Fragment","jsx","csx"],"mappings":"+OAsBaA,EAAUC,EAAAA,WACrB,CAAC,CAAE,SAAAC,EAAU,MAAAC,CAAA,EAASC,IAElBC,EAAAA,kBAAAA,KAAAC,6BAAA,CACE,SAAA,CAAAC,EAAAA,kBAAAA,IAAC,MAAA,CACC,IAAAH,EACA,UAAWI,EAAAA,IACT,iBACA,yBAAA,EAGD,SAAAN,CAAA,CAAA,EAEFC,GAASI,EAAAA,kBAAAA,IAAC,OAAA,CAAK,UAAU,uBAAwB,SAAAJ,CAAA,CAAM,CAAA,EAC1D,CAGN,EAEAH,EAAQ,YAAc"}

package/dist/components/Overlay/Overlay.es.js

@@ -0,0 +1,25 @@
+import { j as r } from "../../node_modules/react/jsx-runtime.es.js";
+import { forwardRef as a } from "react";
+/* empty css               */
+import { csx as s } from "../../utils/string.es.js";
+const n = a(
+  ({ children: e, arrow: o }, t) => /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    /* @__PURE__ */ r.jsx(
+      "div",
+      {
+        ref: t,
+        className: s(
+          "proton-Overlay",
+          "proton-Overlay__content"
+        ),
+        children: e
+      }
+    ),
+    o && /* @__PURE__ */ r.jsx("span", { className: "proton-Overlay-arrow", children: o })
+  ] })
+);
+n.displayName = "ProtonUIOverlay";
+export {
+  n as Overlay
+};
+//# sourceMappingURL=Overlay.es.js.map

package/dist/components/Overlay/Overlay.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.es.js","sources":["../../../src/components/Overlay/Overlay.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, ReactNode } from \"react\";\n\nimport \"./Overlay.css\";\nimport { csx } from \"../../utils/string\";\n\nexport interface OverlayProps {\n  children?: ReactNode;\n  /**\n   * Optional arrow element.\n   */\n  arrow?: ReactNode;\n}\n\n/**\n * Applies a floating background to the content.\n * Intended use in overlay containers such as modals, tooltips, or popovers.\n *\n * API:\n *  - {@link OverlayProps}\n */\nexport const Overlay = forwardRef<HTMLDivElement, OverlayProps>(\n  ({ children, arrow }, ref) => {\n    return (\n      <>\n        <div\n          ref={ref}\n          className={csx(\n            \"proton-Overlay\",\n            \"proton-Overlay__content\",\n          )}\n        >\n          {children}\n        </div>\n        {arrow && <span className=\"proton-Overlay-arrow\">{arrow}</span>}\n      </>\n    );\n  },\n);\n\nOverlay.displayName = \"ProtonUIOverlay\";\n"],"names":["Overlay","forwardRef","children","arrow","ref","jsxs","Fragment","jsx","csx"],"mappings":";;;;AAsBO,MAAMA,IAAUC;AAAA,EACrB,CAAC,EAAE,UAAAC,GAAU,OAAAC,EAAA,GAASC,MAElBC,gBAAAA,EAAAA,KAAAC,YAAA,EACE,UAAA;AAAA,IAAAC,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAH;AAAA,QACA,WAAWI;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAGD,UAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,IAEFC,KAASI,gBAAAA,EAAAA,IAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAJ,EAAA,CAAM;AAAA,EAAA,GAC1D;AAGN;AAEAH,EAAQ,cAAc;"}