@protonradio/proton-ui 0.11.10-beta.3 → 0.11.11

package/dist/components/ActionMenu/ActionMenu.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../node_modules/react/jsx-runtime.cjs.js"),r=require("react"),L=require("../../node_modules/@react-aria/menu/dist/useMenu.cjs.js"),O=require("../../node_modules/@react-aria/menu/dist/useMenuItem.cjs.js"),W=require("../../node_modules/@react-stately/tree/dist/useTreeState.cjs.js"),U=require("../../node_modules/@react-stately/collections/dist/Item.cjs.js"),V=require("../../hooks/useIsClosing.cjs.js"),D=require("../../hooks/useLockBodyScroll.cjs.js"),G=require("../Button/Button.cjs.js"),J=require("../ScreenOverlay/ScreenOverlay.cjs.js");;/* empty css                    */const C=require("../Icon/Icon.cjs.js"),Q=require("../../utils/string.cjs.js"),w=require("../../utils/navigation.cjs.js"),X=({isOpen:u,selectionMode:i="single",selectedKeys:d,defaultSelectedKeys:l,disabledKeys:n,children:c,showCancel:h=!0,cancelButtonText:p="Cancel",actions:R,title:y,onSelectionChange:E,onClose:m,"data-testid":P})=>{D.useLockBodyScroll(u);const[$,_]=r.useState(0),[a,g]=r.useState([]),[j,M]=r.useState({title:y,actions:R,key:null,previousKey:null}),x=j.actions||[],f=r.useRef(null),S=r.useRef(null),b=r.useRef(null),A=r.useRef(!1),{isClosing:B,handleClose:H}=V.useIsClosing({onClose:m,overlayRef:b}),I=x&&x.length>0,q=()=>{_(0),H()},k=W.useTreeState({items:x,children:x.map(t=>r.createElement(U.Item,{...t,key:t.key,textValue:t.key},t.label)),defaultSelectedKeys:l?new Set(l):void 0,selectedKeys:d?new Set(d):void 0,onSelectionChange:E,selectionMode:i,disabledKeys:n}),{menuProps:F}=L.useMenu({autoFocus:!0,shouldFocusWrap:!0,onAction:t=>{var o;const s=x.find(v=>v.key===t);if(!s){console.error(`Action with key ${t} not found`);return}(o=s==null?void 0:s.children)!=null&&o.length&&T(t)},onClose:()=>{if(A.current){A.current=!1;return}m==null||m()},disabledKeys:n,onSelectionChange:E,selectionMode:i,selectedKeys:d,defaultSelectedKeys:l,"aria-label":"Action Menu"},k,S);function T(t){const s=x.find(o=>o.key===t);if(!s){console.error(`Action with key ${t} not found`);return}g(o=>[...o,j]),M(o=>({title:s.label,actions:s.children,key:s.key,previousKey:o.key})),A.current=!0}function z(){if(a.length>0){const t=a[a.length-1];M(t),g(a.slice(0,-1))}}const N=c||I||h;return r.useEffect(()=>{u&&requestAnimationFrame(()=>{f.current&&_(f.current.scrollHeight)})},[u,f.current,a,N]),u?e.jsxRuntimeExports.jsx(J.ScreenOverlay,{fadeIn:!0,ref:b,onClose:q,children:e.jsxRuntimeExports.jsx("div",{className:"proton-ActionMenu__background-wrapper",style:{opacity:B?0:1},children:e.jsxRuntimeExports.jsx("div",{"data-testid":P||"ActionMenu-wrapper",className:"proton-ActionMenu__wrapper",children:e.jsxRuntimeExports.jsx("div",{className:"proton-ActionMenu__card","data-testid":"ActionMenu-content",style:{height:`${$}px`},children:e.jsxRuntimeExports.jsx("div",{ref:S,children:e.jsxRuntimeExports.jsxs("div",{...F,ref:f,children:[j.title&&e.jsxRuntimeExports.jsxs("div",{className:"proton-ActionMenu__title",children:[a.length>0&&e.jsxRuntimeExports.jsx("div",{style:{position:"absolute",left:0},children:e.jsxRuntimeExports.jsx("button",{onClick:z,children:e.jsxRuntimeExports.jsx(C.Icon,{id:"chevron-left",size:16})})}),j.title]}),N?e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[c&&e.jsxRuntimeExports.jsx("div",{className:"proton-ActionMenu__content",children:typeof c=="function"?c({close:q}):c}),I&&e.jsxRuntimeExports.jsx("div",{className:Q.csx("proton-ActionMenu__list",i==="none"&&"proton-ActionMenu__list--disabled"),children:Array.from(k.collection).map((t,s)=>{var v;const o=j.actions[s];return e.jsxRuntimeExports.jsx(Y,{item:t,state:k,isSubmenu:!!((v=o.children)!=null&&v.length)},t.key)})}),h&&e.jsxRuntimeExports.jsx("div",{className:"proton-ActionMenu__cancel-button",tabIndex:-1,children:e.jsxRuntimeExports.jsx(G.Button,{"data-testid":"ActionMenuItem-cancel",onPress:m,fullWidth:!0,variant:"secondary",children:p})})]}):null]})})})})})}):null},Y=({state:u,item:i,isSubmenu:d})=>{const l=r.useRef(null),{props:n}=i,{menuItemProps:c}=O.useMenuItem({key:i.key},u,l),h=n.to?"a":"div",p=n.to&&w.isUrlExternal(n.to),R=n.to?{href:n.to,target:p?"_blank":void 0,rel:p?"noopener noreferrer":void 0,onClick:y=>{p||!n.to||w.handleInternalNavigation(y,n.to)}}:{};return r.createElement(h,{...c,...R,key:i.key,className:"proton-ActionMenu__item","aria-label":`ActionMenu-Item-${i.key}`,ref:l},e.jsxRuntimeExports.jsxs("div",{className:"proton-ActionMenu__item-content",children:[e.jsxRuntimeExports.jsx("div",{className:"proton-ActionMenu__item-label",children:i.rendered}),n.description&&e.jsxRuntimeExports.jsx("div",{className:"proton-ActionMenu__description",children:n.description})]}),d&&e.jsxRuntimeExports.jsx(C.Icon,{id:"chevron-right",size:16}))};exports.ActionMenu=X;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../../node_modules/react/jsx-runtime.cjs.js"),s=require("react"),H=require("../../hooks/useIsClosing.cjs.js"),P=require("../../hooks/useLockBodyScroll.cjs.js"),G=require("../Button/Button.cjs.js"),L=require("../ScreenOverlay/ScreenOverlay.cjs.js"),i=require("radix-ui"),N=require("../Icon/Icon.cjs.js");;/* empty css                    */const D=require("../../utils/navigation.cjs.js"),T=({isOpen:e,actions:a=[],children:o,showCancel:l=!0,cancelButtonText:m="Cancel",selectionMode:E="single",selectedKeys:x,disabledKeys:h=[],onSelectionChange:p,onClose:f,title:j,"data-testid":r})=>{var $;P.useLockBodyScroll(e);const[u,c]=s.useState(0),[t,d]=s.useState([]),[A,_]=s.useState({title:j,actions:a,key:null,previousKey:null}),b=s.useRef(null),C=s.useRef(null),S=s.useRef(null),{isClosing:M,handleClose:g}=H.useIsClosing({onClose:f,overlayRef:S}),v=A.actions||[],w=v&&v.length>0,I=o||w||l,q=t.length>0;function B(R){const y=v.find(k=>k.key===R);if(!y){console.error(`Action with key ${R} not found`);return}d(k=>[...k,A]),_(k=>({title:y.label,actions:y.children,key:y.key,previousKey:k.key}))}function F(){if(t.length>0){const R=t[t.length-1];_(R),d(t.slice(0,-1))}}return s.useEffect(()=>{e&&requestAnimationFrame(()=>{b.current&&c(b.current.scrollHeight+12)})},[e,t,I]),s.useEffect(()=>{(!e||M)&&c(0)},[e,M]),!e&&!M?null:n.jsxRuntimeExports.jsx(L.ScreenOverlay,{fadeIn:!0,ref:S,children:n.jsxRuntimeExports.jsxs(i.DropdownMenu.Root,{modal:!0,open:e,onOpenChange:R=>{R||g()},children:[n.jsxRuntimeExports.jsx(i.DropdownMenu.Trigger,{asChild:!0,children:n.jsxRuntimeExports.jsx("div",{children:""})}),n.jsxRuntimeExports.jsx("div",{className:"proton-ActionMenu__background-wrapper",style:{opacity:M?0:1},children:n.jsxRuntimeExports.jsx("div",{"data-testid":r||"ActionMenu-wrapper",className:"proton-ActionMenu__wrapper",children:n.jsxRuntimeExports.jsx("div",{className:"proton-ActionMenu__card","data-testid":"ActionMenu-content",style:{height:`${u}px`},children:n.jsxRuntimeExports.jsx("div",{ref:C,className:"proton-ActionMenu__menu",children:n.jsxRuntimeExports.jsx(i.DropdownMenu.Content,{loop:!0,sideOffset:8,ref:b,children:I&&n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[o&&n.jsxRuntimeExports.jsx("div",{className:"proton-ActionMenu__content",children:typeof o=="function"?o({close:g}):o}),w&&n.jsxRuntimeExports.jsx(z,{actions:v,selectionMode:E,selectedKeys:x,onSelectionChange:p,disabledKeys:h,handleSubmenuOpen:B,title:A.title,isInSubmenu:q,handleBack:F,previousMenuTitle:($=t[t.length-1])==null?void 0:$.title}),l&&n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsx(i.DropdownMenu.Separator,{}),n.jsxRuntimeExports.jsx(i.DropdownMenu.Item,{className:"proton-ActionMenu__cancel-button",children:n.jsxRuntimeExports.jsx(G.Button,{"data-testid":"ActionMenuItem-cancel",onPress:g,fullWidth:!0,variant:"secondary",children:m})})]})]})})})})})})]})})},z=({actions:e,selectionMode:a,selectedKeys:o=[],onSelectionChange:l,disabledKeys:m=[],handleSubmenuOpen:E,title:x,isInSubmenu:h=!1,handleBack:p,previousMenuTitle:f})=>{const j=()=>n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[h&&p&&n.jsxRuntimeExports.jsxs("div",{className:"proton-ActionMenu__back-button-container",children:[n.jsxRuntimeExports.jsx(i.DropdownMenu.Item,{className:"proton-ActionMenu__back-button",onSelect:r=>{r.preventDefault(),p()},"aria-label":`Go back to ${f||"previous menu"}`,children:n.jsxRuntimeExports.jsx(N.Icon,{id:"chevron-left",size:16,"aria-hidden":"true"})}),n.jsxRuntimeExports.jsx("div",{className:"proton-ActionMenu__title",role:"banner","aria-label":h?`Submenu: ${x}`:`Menu: ${x}`,children:n.jsxRuntimeExports.jsx("span",{children:x})}),n.jsxRuntimeExports.jsx(i.DropdownMenu.Separator,{})]}),e.map((r,u)=>{var t;const c=e[u];return n.jsxRuntimeExports.jsx(U,{item:r,isSubmenu:!!((t=c.children)!=null&&t.length),selectionMode:a,onSelectionChange:l,selectedKeys:o,disabledKeys:m,handleSubmenuOpen:E},r.key)})]});return n.jsxRuntimeExports.jsx("div",{"aria-disabled":a==="none",className:"proton-ActionMenu__list",role:"menu","aria-label":x?`${h?"Submenu":"Menu"}: ${x}`:"Action menu","aria-orientation":"vertical",children:a==="single"?n.jsxRuntimeExports.jsx(i.DropdownMenu.RadioGroup,{value:(o==null?void 0:o[0])||"",onValueChange:r=>{var c;const u=e.find(t=>t.key===r);(c=u==null?void 0:u.children)!=null&&c.length||l&&l(new Set([r]))},children:n.jsxRuntimeExports.jsx(j,{})}):n.jsxRuntimeExports.jsx(i.DropdownMenu.Group,{children:n.jsxRuntimeExports.jsx(j,{})})})},U=({item:e,isSubmenu:a,selectionMode:o,onSelectionChange:l,selectedKeys:m=[],disabledKeys:E=[],handleSubmenuOpen:x})=>{const h=s.useRef(null),p=e.to&&D.isUrlExternal(e.to),f=E.includes(e.key),j=m.includes(e.key),r={className:"proton-ActionMenu__item","aria-label":e.label?`${e.label}${e.description?`, ${e.description}`:""}`:`ActionMenu-Item-${e.key}`,role:"menuitem",disabled:f,ref:h},u=t=>{var d;if((d=e==null?void 0:e.children)!=null&&d.length){t.preventDefault(),x(e.key);return}e.onAction&&e.onAction(e.key)},c=n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsxs("div",{className:"proton-ActionMenu__item-content",children:[n.jsxRuntimeExports.jsx("div",{className:"proton-ActionMenu__item-label",children:e.label}),e.description&&n.jsxRuntimeExports.jsx("div",{className:"proton-ActionMenu__description",children:e.description})]}),a&&n.jsxRuntimeExports.jsx(N.Icon,{id:"chevron-right",size:16,"aria-hidden":"true"})]});return e.to?s.createElement(i.DropdownMenu.Item,{...r,key:e.key,asChild:!0},n.jsxRuntimeExports.jsx("a",{"aria-label":e.label?`${e.label}${e.description?`, ${e.description}`:""}`:`ActionMenu-Item-${e.key}`,"aria-disabled":f,"aria-checked":j,"aria-expanded":a?!1:void 0,href:e.to,target:p?"_blank":void 0,rel:p?"noopener noreferrer":void 0,onClick:t=>{p||!e.to||D.handleInternalNavigation(t,e.to)},children:c})):o==="multiple"?s.createElement(i.DropdownMenu.CheckboxItem,{...r,key:e.key,checked:j,onSelect:u,onCheckedChange:t=>{if(!l)return;const d=new Set(m);t?d.add(e.key):d.delete(e.key),l(d)}},c):s.createElement(i.DropdownMenu.RadioItem,{...r,value:e.key,key:e.key,"aria-checked":j,"aria-expanded":a?!1:void 0,onSelect:u},c)};exports.ActionMenu=T;
 //# sourceMappingURL=ActionMenu.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ActionMenu.cjs.js","sources":["../../../src/components/ActionMenu/ActionMenu.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { ReactNode, useEffect, useRef, useState } from \"react\";\r\nimport { useMenu, useMenuItem } from \"@react-aria/menu\";\r\nimport { TreeState, useTreeState } from \"@react-stately/tree\";\r\nimport { Item } from \"@react-stately/collections\";\r\nimport type { Node, Selection } from \"@react-types/shared\";\r\n\r\nimport { useIsClosing } from \"../../hooks/useIsClosing\";\r\nimport { useLockBodyScroll } from \"../../hooks/useLockBodyScroll\";\r\nimport { csx, handleInternalNavigation, isUrlExternal } from \"../../utils\";\r\nimport { Button } from \"../Button/Button\";\r\nimport { ScreenOverlay } from \"../ScreenOverlay/ScreenOverlay\";\r\n\r\nimport \"./ActionMenu.css\";\r\nimport { Icon } from \"../Icon/Icon\";\r\n\r\nexport interface ActionMenuAction {\r\n  key: string;\r\n  label?: ReactNode;\r\n  description?: ReactNode;\r\n  to?: string;\r\n  onAction?: (key: string) => void;\r\n  children?: ActionMenuAction[];\r\n}\r\n\r\nexport interface ActionMenuProps {\r\n  /** The actions of the menu\r\n   * - type {@link ActionMenuAction}[]\r\n   */\r\n  actions?: ActionMenuAction[];\r\n\r\n  /** The text of the cancel button */\r\n  cancelButtonText?: string;\r\n\r\n  /** The children of the menu */\r\n  children?: ReactNode | ((props: { close: () => void }) => ReactNode);\r\n\r\n  /** The test id of the menu */\r\n  \"data-testid\"?: string;\r\n\r\n  /** The keys of the default selected items */\r\n  defaultSelectedKeys?: string[];\r\n\r\n  /** The keys of the disabled items */\r\n  disabledKeys?: string[];\r\n\r\n  /** Whether the menu is open\r\n   * @default false\r\n   */\r\n  isOpen: boolean;\r\n\r\n  /** The callback function to close the menu */\r\n  onClose?: () => void;\r\n\r\n  /** The callback function to change the selection\r\n   * - type {@link Selection}\r\n   */\r\n  onSelectionChange?: (keys: Selection) => void;\r\n\r\n  /** The selection mode of the menu\r\n   * @default \"single\"\r\n   */\r\n  selectionMode?: \"single\" | \"multiple\" | \"none\";\r\n\r\n  /** The keys of the selected items */\r\n  selectedKeys?: string[];\r\n\r\n  /** Whether to show the cancel button */\r\n  showCancel?: boolean;\r\n\r\n  /** The title of the menu */\r\n  title?: string;\r\n}\r\n\r\ntype ActionStack = {\r\n  title: ReactNode | null;\r\n  actions: ActionMenuAction[];\r\n  key: string | null;\r\n  previousKey: string | null;\r\n};\r\n\r\n/**\r\n * ActionMenu to display a menu of actions.\r\n * Renders a list of actions as a focusable menu, or non-focusable children.\r\n *\r\n * API:\r\n *  - {@link ActionMenuProps}\r\n */\r\nexport const ActionMenu = ({\r\n  isOpen,\r\n  selectionMode = \"single\",\r\n  selectedKeys,\r\n  defaultSelectedKeys,\r\n  disabledKeys,\r\n  children,\r\n  showCancel = true,\r\n  cancelButtonText = \"Cancel\",\r\n  actions,\r\n  title,\r\n  onSelectionChange,\r\n  onClose,\r\n  \"data-testid\": testId,\r\n}: ActionMenuProps) => {\r\n  useLockBodyScroll(isOpen);\r\n  const [contentHeight, setContentHeight] = useState<number>(0);\r\n  const [stackHistory, setStackHistory] = useState<ActionStack[]>([]);\r\n  const [currentActionStack, setCurrentActionStack] = useState<ActionStack>({\r\n    title,\r\n    actions,\r\n    key: null,\r\n    previousKey: null,\r\n  });\r\n  const currentActions = currentActionStack.actions || [];\r\n\r\n  const contentRef = useRef<HTMLDivElement>(null);\r\n  const menuRef = useRef<HTMLDivElement>(null);\r\n  const overlayRef = useRef<HTMLDivElement>(null);\r\n  const justNavigatedToSubmenuRef = useRef(false);\r\n  const { isClosing, handleClose } = useIsClosing({\r\n    onClose,\r\n    overlayRef,\r\n  });\r\n\r\n  const hasActions = currentActions && currentActions.length > 0;\r\n\r\n  const handleOverlayClose = () => {\r\n    setContentHeight(0);\r\n    handleClose();\r\n  };\r\n\r\n  const state = useTreeState({\r\n    items: currentActions,\r\n    children: currentActions.map((action) => (\r\n      <Item {...action} key={action.key} textValue={action.key}>\r\n        {action.label}\r\n      </Item>\r\n    )),\r\n    defaultSelectedKeys: defaultSelectedKeys\r\n      ? new Set(defaultSelectedKeys)\r\n      : undefined,\r\n    selectedKeys: selectedKeys ? new Set(selectedKeys) : undefined,\r\n    onSelectionChange,\r\n    selectionMode,\r\n    disabledKeys,\r\n  });\r\n\r\n  const { menuProps } = useMenu(\r\n    {\r\n      autoFocus: true,\r\n      shouldFocusWrap: true,\r\n      onAction: (key) => {\r\n        const action = currentActions.find((action) => action.key === key);\r\n        if (!action) {\r\n          console.error(`Action with key ${key} not found`);\r\n          return;\r\n        }\r\n\r\n        // the action's onAction is called in ActionMenuItem, so we don't need to call it again\r\n\r\n        if (action?.children?.length) {\r\n          handleSubmenuOpen(key as string);\r\n        }\r\n      },\r\n      onClose: () => {\r\n        if (justNavigatedToSubmenuRef.current) {\r\n          justNavigatedToSubmenuRef.current = false;\r\n          return;\r\n        }\r\n        onClose?.();\r\n      },\r\n      disabledKeys,\r\n      onSelectionChange,\r\n      selectionMode,\r\n      selectedKeys,\r\n      defaultSelectedKeys,\r\n      \"aria-label\": \"Action Menu\",\r\n    },\r\n    state,\r\n    menuRef\r\n  );\r\n\r\n  function handleSubmenuOpen(key: string) {\r\n    const action = currentActions.find((action) => action.key === key);\r\n    if (!action) {\r\n      console.error(`Action with key ${key} not found`);\r\n      return;\r\n    }\r\n\r\n    setStackHistory((prevStackHistory) => [\r\n      ...prevStackHistory,\r\n      currentActionStack,\r\n    ]);\r\n    setCurrentActionStack((prevStack) => ({\r\n      title: action.label,\r\n      actions: action.children,\r\n      key: action.key,\r\n      previousKey: prevStack.key,\r\n    }));\r\n    justNavigatedToSubmenuRef.current = true;\r\n  }\r\n\r\n  function handleBack() {\r\n    if (stackHistory.length > 0) {\r\n      const previousStack = stackHistory[stackHistory.length - 1];\r\n      setCurrentActionStack(previousStack);\r\n      setStackHistory(stackHistory.slice(0, -1));\r\n    }\r\n  }\r\n\r\n  const hasContent = children || hasActions || showCancel;\r\n\r\n  // We need to re-measure the open menu's content height when stack history changes\r\n  useEffect(() => {\r\n    if (!isOpen) return;\r\n\r\n    requestAnimationFrame(() => {\r\n      if (contentRef.current) {\r\n        setContentHeight(contentRef.current.scrollHeight);\r\n      }\r\n    });\r\n  }, [isOpen, contentRef.current, stackHistory, hasContent]);\r\n\r\n  if (!isOpen) return null;\r\n\r\n  return (\r\n    <ScreenOverlay fadeIn ref={overlayRef} onClose={handleOverlayClose}>\r\n      <div\r\n        className=\"proton-ActionMenu__background-wrapper\"\r\n        style={{\r\n          opacity: isClosing ? 0 : 1,\r\n        }}\r\n      >\r\n        <div\r\n          data-testid={testId || \"ActionMenu-wrapper\"}\r\n          className=\"proton-ActionMenu__wrapper\"\r\n        >\r\n          <div\r\n            className=\"proton-ActionMenu__card\"\r\n            data-testid=\"ActionMenu-content\"\r\n            style={{ height: `${contentHeight}px` }}\r\n          >\r\n            <div ref={menuRef}>\r\n              <div {...menuProps} ref={contentRef}>\r\n                {currentActionStack.title && (\r\n                  <div className=\"proton-ActionMenu__title\">\r\n                    {stackHistory.length > 0 && (\r\n                      <div style={{ position: \"absolute\", left: 0 }}>\r\n                        <button onClick={handleBack}>\r\n                          <Icon id=\"chevron-left\" size={16} />\r\n                        </button>\r\n                      </div>\r\n                    )}\r\n                    {currentActionStack.title}\r\n                  </div>\r\n                )}\r\n                {hasContent ? (\r\n                  <>\r\n                    {children && (\r\n                      <div className=\"proton-ActionMenu__content\">\r\n                        {typeof children === \"function\"\r\n                          ? children({ close: handleOverlayClose })\r\n                          : children}\r\n                      </div>\r\n                    )}\r\n\r\n                    {hasActions && (\r\n                      <div\r\n                        className={csx(\r\n                          \"proton-ActionMenu__list\",\r\n                          selectionMode === \"none\" &&\r\n                            \"proton-ActionMenu__list--disabled\"\r\n                        )}\r\n                      >\r\n                        {Array.from(state.collection).map((item, i) => {\r\n                          const itemProps = currentActionStack.actions[i];\r\n\r\n                          return (\r\n                            <ActionMenuItem\r\n                              key={item.key}\r\n                              item={item}\r\n                              state={state}\r\n                              isSubmenu={!!itemProps.children?.length}\r\n                            />\r\n                          );\r\n                        })}\r\n                      </div>\r\n                    )}\r\n\r\n                    {showCancel && (\r\n                      <div\r\n                        className=\"proton-ActionMenu__cancel-button\"\r\n                        tabIndex={-1}\r\n                      >\r\n                        <Button\r\n                          data-testid=\"ActionMenuItem-cancel\"\r\n                          onPress={onClose}\r\n                          fullWidth\r\n                          variant=\"secondary\"\r\n                        >\r\n                          {cancelButtonText}\r\n                        </Button>\r\n                      </div>\r\n                    )}\r\n                  </>\r\n                ) : null}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ScreenOverlay>\r\n  );\r\n};\r\n\r\ninterface ActionMenuItemProps {\r\n  to?: string;\r\n  state: TreeState<ActionMenuAction>;\r\n  item: Node<ActionMenuAction>;\r\n  isSubmenu?: boolean;\r\n}\r\n\r\nconst ActionMenuItem = ({ state, item, isSubmenu }: ActionMenuItemProps) => {\r\n  const ref = useRef(null);\r\n  const { props } = item;\r\n  const { menuItemProps } = useMenuItem({ key: item.key }, state, ref);\r\n  const Component = props.to ? \"a\" : \"div\";\r\n  const isExternal = props.to && isUrlExternal(props.to);\r\n\r\n  const anchorProps = props.to\r\n    ? {\r\n        href: props.to,\r\n        target: isExternal ? \"_blank\" : undefined,\r\n        rel: isExternal ? \"noopener noreferrer\" : undefined,\r\n        onClick: (e: React.MouseEvent<HTMLAnchorElement | HTMLDivElement>) => {\r\n          if (isExternal || !props.to) {\r\n            return;\r\n          }\r\n\r\n          handleInternalNavigation(\r\n            e as React.MouseEvent<HTMLAnchorElement>,\r\n            props.to\r\n          );\r\n        },\r\n      }\r\n    : {};\r\n\r\n  return (\r\n    <Component\r\n      {...menuItemProps}\r\n      {...anchorProps}\r\n      key={item.key}\r\n      className=\"proton-ActionMenu__item\"\r\n      aria-label={`ActionMenu-Item-${item.key}`}\r\n      ref={ref}\r\n    >\r\n      <div className=\"proton-ActionMenu__item-content\">\r\n        <div className=\"proton-ActionMenu__item-label\">{item.rendered}</div>\r\n        {props.description && (\r\n          <div className=\"proton-ActionMenu__description\">\r\n            {props.description}\r\n          </div>\r\n        )}\r\n      </div>\r\n      {isSubmenu && <Icon id=\"chevron-right\" size={16} />}\r\n    </Component>\r\n  );\r\n};\r\n"],"names":["ActionMenu","isOpen","selectionMode","selectedKeys","defaultSelectedKeys","disabledKeys","children","showCancel","cancelButtonText","actions","title","onSelectionChange","onClose","testId","useLockBodyScroll","contentHeight","setContentHeight","useState","stackHistory","setStackHistory","currentActionStack","setCurrentActionStack","currentActions","contentRef","useRef","menuRef","overlayRef","justNavigatedToSubmenuRef","isClosing","handleClose","useIsClosing","hasActions","handleOverlayClose","state","useTreeState","action","Item","menuProps","useMenu","key","_a","handleSubmenuOpen","prevStackHistory","prevStack","handleBack","previousStack","hasContent","useEffect","ScreenOverlay","jsx","jsxs","Icon","Fragment","csx","item","i","itemProps","ActionMenuItem","Button","isSubmenu","ref","props","menuItemProps","useMenuItem","Component","isExternal","isUrlExternal","anchorProps","e","handleInternalNavigation","createElement"],"mappings":"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"}
+{"version":3,"file":"ActionMenu.cjs.js","sources":["../../../src/components/ActionMenu/ActionMenu.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { ReactNode, useEffect, useRef, useState } from \"react\";\r\nimport type { Selection } from \"@react-types/shared\";\r\n\r\nimport { useIsClosing } from \"../../hooks/useIsClosing\";\r\nimport { useLockBodyScroll } from \"../../hooks/useLockBodyScroll\";\r\nimport { handleInternalNavigation, isUrlExternal } from \"../../utils\";\r\n\r\nimport { Button } from \"../Button/Button\";\r\nimport { ScreenOverlay } from \"../ScreenOverlay/ScreenOverlay\";\r\nimport { DropdownMenu } from \"radix-ui\";\r\nimport { Icon } from \"../Icon/Icon\";\r\n\r\nimport \"./ActionMenu.css\";\r\n\r\nexport interface ActionMenuAction {\r\n  key: string;\r\n  label?: ReactNode;\r\n  description?: ReactNode;\r\n  to?: string;\r\n  onAction?: (key: string) => void;\r\n  children?: ActionMenuAction[];\r\n}\r\n\r\nexport type ActionMenuSelectionMode = \"single\" | \"multiple\" | \"none\";\r\n\r\nexport interface ActionMenuProps {\r\n  /** The actions of the menu\r\n   * - type {@link ActionMenuAction}[]\r\n   */\r\n  actions?: ActionMenuAction[];\r\n\r\n  /** The text of the cancel button */\r\n  cancelButtonText?: string;\r\n\r\n  /** The children of the menu */\r\n  children?: ReactNode | ((props: { close: () => void }) => ReactNode);\r\n\r\n  /** The test id of the menu */\r\n  \"data-testid\"?: string;\r\n\r\n  /** The keys of the disabled items\r\n   * @default []\r\n   */\r\n  disabledKeys?: string[];\r\n\r\n  /** Whether the menu is open\r\n   * @default false\r\n   */\r\n  isOpen: boolean;\r\n\r\n  /** The callback function to close the menu */\r\n  onClose?: () => void;\r\n\r\n  /** The callback function to change the selection\r\n   * - type {@link Selection}\r\n   */\r\n  onSelectionChange?: (keys: Selection) => void;\r\n\r\n  /** The selection mode of the menu\r\n   * @default \"single\"\r\n   */\r\n  selectionMode?: ActionMenuSelectionMode;\r\n\r\n  /** The keys of the selected items */\r\n  selectedKeys?: string[];\r\n\r\n  /** Whether to show the cancel button */\r\n  showCancel?: boolean;\r\n\r\n  /** The title of the menu */\r\n  title?: string;\r\n}\r\n\r\ntype ActionStack = {\r\n  title: ReactNode | null;\r\n  actions: ActionMenuAction[];\r\n  key: string | null;\r\n  previousKey: string | null;\r\n};\r\n\r\n/**\r\n * A controlled ActionMenu to display a menu of actions.\r\n * Renders a list of actions as a focusable menu, or non-focusable children.\r\n *\r\n * API:\r\n *  - {@link ActionMenuProps}\r\n */\r\nexport const ActionMenu = ({\r\n  isOpen,\r\n  actions = [],\r\n  children,\r\n  showCancel = true,\r\n  cancelButtonText = \"Cancel\",\r\n  selectionMode = \"single\",\r\n  selectedKeys,\r\n  disabledKeys = [],\r\n  onSelectionChange,\r\n  onClose,\r\n  title,\r\n  \"data-testid\": testId,\r\n}: ActionMenuProps) => {\r\n  useLockBodyScroll(isOpen);\r\n  const [contentHeight, setContentHeight] = useState<number>(0);\r\n  const [stackHistory, setStackHistory] = useState<ActionStack[]>([]);\r\n  const [currentActionStack, setCurrentActionStack] = useState<ActionStack>({\r\n    title,\r\n    actions,\r\n    key: null,\r\n    previousKey: null,\r\n  });\r\n  const contentRef = useRef<HTMLDivElement>(null);\r\n  const menuRef = useRef<HTMLDivElement>(null);\r\n  const overlayRef = useRef<HTMLDivElement>(null);\r\n  const { isClosing, handleClose } = useIsClosing({ onClose, overlayRef });\r\n\r\n  const currentActions = currentActionStack.actions || [];\r\n  const hasActions = currentActions && currentActions.length > 0;\r\n  const hasContent = children || hasActions || showCancel;\r\n  const isInSubmenu = stackHistory.length > 0;\r\n\r\n  function handleSubmenuOpen(key: string) {\r\n    const action = currentActions.find((action) => action.key === key);\r\n    if (!action) {\r\n      console.error(`Action with key ${key} not found`);\r\n      return;\r\n    }\r\n\r\n    setStackHistory((prevStackHistory) => [\r\n      ...prevStackHistory,\r\n      currentActionStack,\r\n    ]);\r\n    setCurrentActionStack((prevStack) => ({\r\n      title: action.label,\r\n      actions: action.children,\r\n      key: action.key,\r\n      previousKey: prevStack.key,\r\n    }));\r\n  }\r\n\r\n  function handleBack() {\r\n    if (stackHistory.length > 0) {\r\n      const previousStack = stackHistory[stackHistory.length - 1];\r\n      setCurrentActionStack(previousStack);\r\n      setStackHistory(stackHistory.slice(0, -1));\r\n    }\r\n  }\r\n\r\n  // Re-measure the open menu's content height when stack history changes\r\n  useEffect(() => {\r\n    if (!isOpen) return;\r\n\r\n    requestAnimationFrame(() => {\r\n      if (contentRef.current) {\r\n        setContentHeight(contentRef.current.scrollHeight + 12);\r\n      }\r\n    });\r\n  }, [isOpen, stackHistory, hasContent]);\r\n\r\n  // Reset content height when menu closes or is closing\r\n  useEffect(() => {\r\n    if (!isOpen || isClosing) {\r\n      setContentHeight(0);\r\n    }\r\n  }, [isOpen, isClosing]);\r\n\r\n  if (!isOpen && !isClosing) return null;\r\n\r\n  return (\r\n    <ScreenOverlay fadeIn ref={overlayRef}>\r\n      <DropdownMenu.Root\r\n        modal\r\n        open={isOpen}\r\n        onOpenChange={(open) => {\r\n          if (!open) handleClose();\r\n        }}\r\n      >\r\n        <DropdownMenu.Trigger asChild>\r\n          {/* No visible trigger, menu is controlled by isOpen */}\r\n          <div>{\"\"}</div>\r\n        </DropdownMenu.Trigger>\r\n\r\n        <div\r\n          className=\"proton-ActionMenu__background-wrapper\"\r\n          style={{ opacity: isClosing ? 0 : 1 }}\r\n        >\r\n          <div\r\n            data-testid={testId || \"ActionMenu-wrapper\"}\r\n            className=\"proton-ActionMenu__wrapper\"\r\n          >\r\n            <div\r\n              className=\"proton-ActionMenu__card\"\r\n              data-testid=\"ActionMenu-content\"\r\n              style={{ height: `${contentHeight}px` }}\r\n            >\r\n              <div ref={menuRef} className=\"proton-ActionMenu__menu\">\r\n                <DropdownMenu.Content loop sideOffset={8} ref={contentRef}>\r\n                  {hasContent && (\r\n                    <>\r\n                      {children && (\r\n                        <div className=\"proton-ActionMenu__content\">\r\n                          {typeof children === \"function\"\r\n                            ? children({ close: handleClose })\r\n                            : children}\r\n                        </div>\r\n                      )}\r\n\r\n                      {hasActions && (\r\n                        <ActionMenuList\r\n                          actions={currentActions}\r\n                          selectionMode={selectionMode}\r\n                          selectedKeys={selectedKeys}\r\n                          onSelectionChange={onSelectionChange}\r\n                          disabledKeys={disabledKeys}\r\n                          handleSubmenuOpen={handleSubmenuOpen}\r\n                          title={currentActionStack.title}\r\n                          isInSubmenu={isInSubmenu}\r\n                          handleBack={handleBack}\r\n                          previousMenuTitle={\r\n                            stackHistory[stackHistory.length - 1]?.title\r\n                          }\r\n                        />\r\n                      )}\r\n\r\n                      {showCancel && (\r\n                        <>\r\n                          <DropdownMenu.Separator />\r\n                          <DropdownMenu.Item className=\"proton-ActionMenu__cancel-button\">\r\n                            <Button\r\n                              data-testid=\"ActionMenuItem-cancel\"\r\n                              onPress={handleClose}\r\n                              fullWidth\r\n                              variant=\"secondary\"\r\n                            >\r\n                              {cancelButtonText}\r\n                            </Button>\r\n                          </DropdownMenu.Item>\r\n                        </>\r\n                      )}\r\n                    </>\r\n                  )}\r\n                </DropdownMenu.Content>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </DropdownMenu.Root>\r\n    </ScreenOverlay>\r\n  );\r\n};\r\n\r\ninterface ActionMenuListProps {\r\n  actions: ActionMenuAction[];\r\n  selectionMode: ActionMenuSelectionMode;\r\n  selectedKeys?: string[];\r\n  onSelectionChange?: (keys: Selection) => void;\r\n  disabledKeys?: string[];\r\n  handleSubmenuOpen: (key: string) => void;\r\n  title?: ReactNode;\r\n  isInSubmenu?: boolean;\r\n  handleBack?: () => void;\r\n  previousMenuTitle?: ReactNode;\r\n}\r\n\r\nconst ActionMenuList = ({\r\n  actions,\r\n  selectionMode,\r\n  selectedKeys = [],\r\n  onSelectionChange,\r\n  disabledKeys = [],\r\n  handleSubmenuOpen,\r\n  title,\r\n  isInSubmenu = false,\r\n  handleBack,\r\n  previousMenuTitle,\r\n}: ActionMenuListProps) => {\r\n  const ActionMenuItemMap = () => (\r\n    <>\r\n      {isInSubmenu && handleBack && (\r\n        <div className=\"proton-ActionMenu__back-button-container\">\r\n          <DropdownMenu.Item\r\n            className=\"proton-ActionMenu__back-button\"\r\n            onSelect={(event) => {\r\n              event.preventDefault();\r\n              handleBack();\r\n            }}\r\n            aria-label={`Go back to ${previousMenuTitle || \"previous menu\"}`}\r\n          >\r\n            <Icon id=\"chevron-left\" size={16} aria-hidden=\"true\" />\r\n          </DropdownMenu.Item>\r\n          <div\r\n            className=\"proton-ActionMenu__title\"\r\n            role=\"banner\"\r\n            aria-label={isInSubmenu ? `Submenu: ${title}` : `Menu: ${title}`}\r\n          >\r\n            <span>{title}</span>\r\n          </div>\r\n          <DropdownMenu.Separator />\r\n        </div>\r\n      )}\r\n\r\n      {actions.map((action, i) => {\r\n        const itemProps = actions[i];\r\n        return (\r\n          <ActionMenuItem\r\n            key={action.key}\r\n            item={action}\r\n            isSubmenu={Boolean(itemProps.children?.length)}\r\n            selectionMode={selectionMode}\r\n            onSelectionChange={onSelectionChange}\r\n            selectedKeys={selectedKeys}\r\n            disabledKeys={disabledKeys}\r\n            handleSubmenuOpen={handleSubmenuOpen}\r\n          />\r\n        );\r\n      })}\r\n    </>\r\n  );\r\n\r\n  return (\r\n    <div\r\n      aria-disabled={selectionMode === \"none\"}\r\n      className=\"proton-ActionMenu__list\"\r\n      role=\"menu\"\r\n      aria-label={\r\n        title ? `${isInSubmenu ? \"Submenu\" : \"Menu\"}: ${title}` : \"Action menu\"\r\n      }\r\n      aria-orientation=\"vertical\"\r\n    >\r\n      {selectionMode === \"single\" ? (\r\n        <DropdownMenu.RadioGroup\r\n          value={selectedKeys?.[0] || \"\"}\r\n          onValueChange={(value) => {\r\n            // Check if this is a submenu item - if so, don't trigger selection change\r\n            const action = actions.find((action) => action.key === value);\r\n            if (action?.children?.length) {\r\n              return;\r\n            }\r\n\r\n            if (onSelectionChange) {\r\n              onSelectionChange(new Set([value]));\r\n            }\r\n          }}\r\n        >\r\n          <ActionMenuItemMap />\r\n        </DropdownMenu.RadioGroup>\r\n      ) : (\r\n        <DropdownMenu.Group>\r\n          <ActionMenuItemMap />\r\n        </DropdownMenu.Group>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\ninterface ActionMenuItemProps {\r\n  to?: string;\r\n  item: ActionMenuAction;\r\n  isSubmenu?: boolean;\r\n  selectionMode: ActionMenuSelectionMode;\r\n  onSelectionChange?: (keys: Selection) => void;\r\n  selectedKeys?: string[];\r\n  disabledKeys?: string[];\r\n  handleSubmenuOpen: (key: string) => void;\r\n}\r\n\r\nconst ActionMenuItem = ({\r\n  item,\r\n  isSubmenu,\r\n  selectionMode,\r\n  onSelectionChange,\r\n  selectedKeys = [],\r\n  disabledKeys = [],\r\n  handleSubmenuOpen,\r\n}: ActionMenuItemProps) => {\r\n  const ref = useRef(null);\r\n  const isExternal = item.to && isUrlExternal(item.to);\r\n  const isDisabled = disabledKeys.includes(item.key);\r\n  const isSelected = selectedKeys.includes(item.key);\r\n\r\n  const radixItemProps = {\r\n    className: \"proton-ActionMenu__item\",\r\n    \"aria-label\": item.label\r\n      ? `${item.label}${item.description ? `, ${item.description}` : \"\"}`\r\n      : `ActionMenu-Item-${item.key}`,\r\n    role: \"menuitem\",\r\n    disabled: isDisabled,\r\n    ref,\r\n  };\r\n\r\n  const onSelect = (event: Event) => {\r\n    if (item?.children?.length) {\r\n      event.preventDefault();\r\n      handleSubmenuOpen(item.key);\r\n      return;\r\n    }\r\n    if (item.onAction) {\r\n      item.onAction(item.key);\r\n    }\r\n  };\r\n\r\n  const content = (\r\n    <>\r\n      <div className=\"proton-ActionMenu__item-content\">\r\n        <div className=\"proton-ActionMenu__item-label\">{item.label}</div>\r\n        {item.description && (\r\n          <div className=\"proton-ActionMenu__description\">\r\n            {item.description}\r\n          </div>\r\n        )}\r\n      </div>\r\n      {isSubmenu && <Icon id=\"chevron-right\" size={16} aria-hidden=\"true\" />}\r\n    </>\r\n  );\r\n\r\n  if (item.to) {\r\n    return (\r\n      <DropdownMenu.Item {...radixItemProps} key={item.key} asChild>\r\n        <a\r\n          aria-label={\r\n            item.label\r\n              ? `${item.label}${item.description ? `, ${item.description}` : \"\"}`\r\n              : `ActionMenu-Item-${item.key}`\r\n          }\r\n          aria-disabled={isDisabled}\r\n          aria-checked={isSelected}\r\n          aria-expanded={isSubmenu ? false : undefined}\r\n          href={item.to}\r\n          target={isExternal ? \"_blank\" : undefined}\r\n          rel={isExternal ? \"noopener noreferrer\" : undefined}\r\n          onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {\r\n            if (isExternal || !item.to) {\r\n              return;\r\n            }\r\n            handleInternalNavigation(e, item.to);\r\n          }}\r\n        >\r\n          {content}\r\n        </a>\r\n      </DropdownMenu.Item>\r\n    );\r\n  }\r\n\r\n  if (selectionMode === \"multiple\") {\r\n    return (\r\n      <DropdownMenu.CheckboxItem\r\n        {...radixItemProps}\r\n        key={item.key}\r\n        checked={isSelected}\r\n        onSelect={onSelect}\r\n        onCheckedChange={(checked: boolean) => {\r\n          if (!onSelectionChange) return;\r\n\r\n          const currentKeys = new Set(selectedKeys);\r\n          if (checked) {\r\n            currentKeys.add(item.key);\r\n          } else {\r\n            currentKeys.delete(item.key);\r\n          }\r\n          onSelectionChange(currentKeys);\r\n        }}\r\n      >\r\n        {content}\r\n      </DropdownMenu.CheckboxItem>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <DropdownMenu.RadioItem\r\n      {...radixItemProps}\r\n      value={item.key}\r\n      key={item.key}\r\n      aria-checked={isSelected}\r\n      aria-expanded={isSubmenu ? false : undefined}\r\n      onSelect={onSelect}\r\n    >\r\n      {content}\r\n    </DropdownMenu.RadioItem>\r\n  );\r\n};\r\n"],"names":["ActionMenu","isOpen","actions","children","showCancel","cancelButtonText","selectionMode","selectedKeys","disabledKeys","onSelectionChange","onClose","title","testId","useLockBodyScroll","contentHeight","setContentHeight","useState","stackHistory","setStackHistory","currentActionStack","setCurrentActionStack","contentRef","useRef","menuRef","overlayRef","isClosing","handleClose","useIsClosing","currentActions","hasActions","hasContent","isInSubmenu","handleSubmenuOpen","key","action","prevStackHistory","prevStack","handleBack","previousStack","useEffect","jsx","ScreenOverlay","jsxs","DropdownMenu","open","Fragment","ActionMenuList","_a","Button","previousMenuTitle","ActionMenuItemMap","event","Icon","i","itemProps","ActionMenuItem","value","item","isSubmenu","ref","isExternal","isUrlExternal","isDisabled","isSelected","radixItemProps","onSelect","content","createElement","e","handleInternalNavigation","checked","currentKeys"],"mappings":"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"}

package/dist/components/ActionMenu/ActionMenu.es.js

@@ -1,210 +1,277 @@
-import { j as t } from "../../node_modules/react/jsx-runtime.es.js";
-import { useState as M, useRef as h, createElement as E, useEffect as L } from "react";
-import { useMenu as U } from "../../node_modules/@react-aria/menu/dist/useMenu.es.js";
-import { useMenuItem as V } from "../../node_modules/@react-aria/menu/dist/useMenuItem.es.js";
-import { useTreeState as D } from "../../node_modules/@react-stately/tree/dist/useTreeState.es.js";
-import { Item as G } from "../../node_modules/@react-stately/collections/dist/Item.es.js";
-import { useIsClosing as J } from "../../hooks/useIsClosing.es.js";
-import { useLockBodyScroll as O } from "../../hooks/useLockBodyScroll.es.js";
-import { Button as Q } from "../Button/Button.es.js";
-import { ScreenOverlay as X } from "../ScreenOverlay/ScreenOverlay.es.js";
-/* empty css                  */
+import { j as e } from "../../node_modules/react/jsx-runtime.es.js";
+import { useState as $, useRef as b, useEffect as F, createElement as I } from "react";
+import { useIsClosing as z } from "../../hooks/useIsClosing.es.js";
+import { useLockBodyScroll as L } from "../../hooks/useLockBodyScroll.es.js";
+import { Button as T } from "../Button/Button.es.js";
+import { ScreenOverlay as q } from "../ScreenOverlay/ScreenOverlay.es.js";
+import { DropdownMenu as i } from "radix-ui";
 import { Icon as H } from "../Icon/Icon.es.js";
-import { csx as Y } from "../../utils/string.es.js";
-import { isUrlExternal as Z, handleInternalNavigation as K } from "../../utils/navigation.es.js";
-const ht = ({
-  isOpen: c,
-  selectionMode: i = "single",
-  selectedKeys: d,
-  defaultSelectedKeys: a,
-  disabledKeys: n,
-  children: s,
-  showCancel: x = !0,
-  cancelButtonText: f = "Cancel",
-  actions: y,
-  title: k,
-  onSelectionChange: g,
-  onClose: m,
-  "data-testid": P
+/* empty css                  */
+import { isUrlExternal as U, handleInternalNavigation as V } from "../../utils/navigation.es.js";
+const on = ({
+  isOpen: n,
+  actions: s = [],
+  children: o,
+  showCancel: l = !0,
+  cancelButtonText: x = "Cancel",
+  selectionMode: m = "single",
+  selectedKeys: u,
+  disabledKeys: f = [],
+  onSelectionChange: p,
+  onClose: k,
+  title: h,
+  "data-testid": r
 }) => {
-  O(c);
-  const [F, b] = M(0), [l, $] = M([]), [p, N] = M({
-    title: k,
-    actions: y,
+  var E;
+  L(n);
+  const [a, c] = $(0), [t, d] = $([]), [g, C] = $({
+    title: h,
+    actions: s,
     key: null,
     previousKey: null
-  }), u = p.actions || [], v = h(null), I = h(null), S = h(null), _ = h(!1), { isClosing: B, handleClose: z } = J({
-    onClose: m,
-    overlayRef: S
-  }), w = u && u.length > 0, R = () => {
-    b(0), z();
-  }, j = D({
-    items: u,
-    children: u.map((e) => /* @__PURE__ */ E(G, { ...e, key: e.key, textValue: e.key }, e.label)),
-    defaultSelectedKeys: a ? new Set(a) : void 0,
-    selectedKeys: d ? new Set(d) : void 0,
-    onSelectionChange: g,
-    selectionMode: i,
-    disabledKeys: n
-  }), { menuProps: T } = U(
-    {
-      autoFocus: !0,
-      shouldFocusWrap: !0,
-      onAction: (e) => {
-        var r;
-        const o = u.find((A) => A.key === e);
-        if (!o) {
-          console.error(`Action with key ${e} not found`);
-          return;
-        }
-        (r = o == null ? void 0 : o.children) != null && r.length && W(e);
-      },
-      onClose: () => {
-        if (_.current) {
-          _.current = !1;
-          return;
-        }
-        m == null || m();
-      },
-      disabledKeys: n,
-      onSelectionChange: g,
-      selectionMode: i,
-      selectedKeys: d,
-      defaultSelectedKeys: a,
-      "aria-label": "Action Menu"
-    },
-    j,
-    I
-  );
-  function W(e) {
-    const o = u.find((r) => r.key === e);
-    if (!o) {
-      console.error(`Action with key ${e} not found`);
+  }), M = b(null), D = b(null), S = b(null), { isClosing: v, handleClose: N } = z({ onClose: k, overlayRef: S }), y = g.actions || [], R = y && y.length > 0, w = o || R || l, B = t.length > 0;
+  function G(j) {
+    const _ = y.find((A) => A.key === j);
+    if (!_) {
+      console.error(`Action with key ${j} not found`);
       return;
     }
-    $((r) => [
-      ...r,
-      p
-    ]), N((r) => ({
-      title: o.label,
-      actions: o.children,
-      key: o.key,
-      previousKey: r.key
-    })), _.current = !0;
+    d((A) => [
+      ...A,
+      g
+    ]), C((A) => ({
+      title: _.label,
+      actions: _.children,
+      key: _.key,
+      previousKey: A.key
+    }));
   }
-  function q() {
-    if (l.length > 0) {
-      const e = l[l.length - 1];
-      N(e), $(l.slice(0, -1));
+  function P() {
+    if (t.length > 0) {
+      const j = t[t.length - 1];
+      C(j), d(t.slice(0, -1));
     }
   }
-  const C = s || w || x;
-  return L(() => {
-    c && requestAnimationFrame(() => {
-      v.current && b(v.current.scrollHeight);
+  return F(() => {
+    n && requestAnimationFrame(() => {
+      M.current && c(M.current.scrollHeight + 12);
     });
-  }, [c, v.current, l, C]), c ? /* @__PURE__ */ t.jsx(X, { fadeIn: !0, ref: S, onClose: R, children: /* @__PURE__ */ t.jsx(
-    "div",
+  }, [n, t, w]), F(() => {
+    (!n || v) && c(0);
+  }, [n, v]), !n && !v ? null : /* @__PURE__ */ e.jsx(q, { fadeIn: !0, ref: S, children: /* @__PURE__ */ e.jsxs(
+    i.Root,
     {
-      className: "proton-ActionMenu__background-wrapper",
-      style: {
-        opacity: B ? 0 : 1
+      modal: !0,
+      open: n,
+      onOpenChange: (j) => {
+        j || N();
       },
-      children: /* @__PURE__ */ t.jsx(
-        "div",
-        {
-          "data-testid": P || "ActionMenu-wrapper",
-          className: "proton-ActionMenu__wrapper",
-          children: /* @__PURE__ */ t.jsx(
-            "div",
-            {
-              className: "proton-ActionMenu__card",
-              "data-testid": "ActionMenu-content",
-              style: { height: `${F}px` },
-              children: /* @__PURE__ */ t.jsx("div", { ref: I, children: /* @__PURE__ */ t.jsxs("div", { ...T, ref: v, children: [
-                p.title && /* @__PURE__ */ t.jsxs("div", { className: "proton-ActionMenu__title", children: [
-                  l.length > 0 && /* @__PURE__ */ t.jsx("div", { style: { position: "absolute", left: 0 }, children: /* @__PURE__ */ t.jsx("button", { onClick: q, children: /* @__PURE__ */ t.jsx(H, { id: "chevron-left", size: 16 }) }) }),
-                  p.title
-                ] }),
-                C ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-                  s && /* @__PURE__ */ t.jsx("div", { className: "proton-ActionMenu__content", children: typeof s == "function" ? s({ close: R }) : s }),
-                  w && /* @__PURE__ */ t.jsx(
-                    "div",
-                    {
-                      className: Y(
-                        "proton-ActionMenu__list",
-                        i === "none" && "proton-ActionMenu__list--disabled"
-                      ),
-                      children: Array.from(j.collection).map((e, o) => {
-                        var A;
-                        const r = p.actions[o];
-                        return /* @__PURE__ */ t.jsx(
-                          tt,
-                          {
-                            item: e,
-                            state: j,
-                            isSubmenu: !!((A = r.children) != null && A.length)
-                          },
-                          e.key
-                        );
-                      })
-                    }
-                  ),
-                  x && /* @__PURE__ */ t.jsx(
-                    "div",
-                    {
-                      className: "proton-ActionMenu__cancel-button",
-                      tabIndex: -1,
-                      children: /* @__PURE__ */ t.jsx(
-                        Q,
+      children: [
+        /* @__PURE__ */ e.jsx(i.Trigger, { asChild: !0, children: /* @__PURE__ */ e.jsx("div", { children: "" }) }),
+        /* @__PURE__ */ e.jsx(
+          "div",
+          {
+            className: "proton-ActionMenu__background-wrapper",
+            style: { opacity: v ? 0 : 1 },
+            children: /* @__PURE__ */ e.jsx(
+              "div",
+              {
+                "data-testid": r || "ActionMenu-wrapper",
+                className: "proton-ActionMenu__wrapper",
+                children: /* @__PURE__ */ e.jsx(
+                  "div",
+                  {
+                    className: "proton-ActionMenu__card",
+                    "data-testid": "ActionMenu-content",
+                    style: { height: `${a}px` },
+                    children: /* @__PURE__ */ e.jsx("div", { ref: D, className: "proton-ActionMenu__menu", children: /* @__PURE__ */ e.jsx(i.Content, { loop: !0, sideOffset: 8, ref: M, children: w && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                      o && /* @__PURE__ */ e.jsx("div", { className: "proton-ActionMenu__content", children: typeof o == "function" ? o({ close: N }) : o }),
+                      R && /* @__PURE__ */ e.jsx(
+                        W,
                         {
-                          "data-testid": "ActionMenuItem-cancel",
-                          onPress: m,
-                          fullWidth: !0,
-                          variant: "secondary",
-                          children: f
+                          actions: y,
+                          selectionMode: m,
+                          selectedKeys: u,
+                          onSelectionChange: p,
+                          disabledKeys: f,
+                          handleSubmenuOpen: G,
+                          title: g.title,
+                          isInSubmenu: B,
+                          handleBack: P,
+                          previousMenuTitle: (E = t[t.length - 1]) == null ? void 0 : E.title
                         }
-                      )
-                    }
-                  )
-                ] }) : null
-              ] }) })
-            }
-          )
-        }
-      )
+                      ),
+                      l && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                        /* @__PURE__ */ e.jsx(i.Separator, {}),
+                        /* @__PURE__ */ e.jsx(i.Item, { className: "proton-ActionMenu__cancel-button", children: /* @__PURE__ */ e.jsx(
+                          T,
+                          {
+                            "data-testid": "ActionMenuItem-cancel",
+                            onPress: N,
+                            fullWidth: !0,
+                            variant: "secondary",
+                            children: x
+                          }
+                        ) })
+                      ] })
+                    ] }) }) })
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
     }
-  ) }) : null;
-}, tt = ({ state: c, item: i, isSubmenu: d }) => {
-  const a = h(null), { props: n } = i, { menuItemProps: s } = V({ key: i.key }, c, a), x = n.to ? "a" : "div", f = n.to && Z(n.to), y = n.to ? {
-    href: n.to,
-    target: f ? "_blank" : void 0,
-    rel: f ? "noopener noreferrer" : void 0,
-    onClick: (k) => {
-      f || !n.to || K(
-        k,
-        n.to
+  ) });
+}, W = ({
+  actions: n,
+  selectionMode: s,
+  selectedKeys: o = [],
+  onSelectionChange: l,
+  disabledKeys: x = [],
+  handleSubmenuOpen: m,
+  title: u,
+  isInSubmenu: f = !1,
+  handleBack: p,
+  previousMenuTitle: k
+}) => {
+  const h = () => /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    f && p && /* @__PURE__ */ e.jsxs("div", { className: "proton-ActionMenu__back-button-container", children: [
+      /* @__PURE__ */ e.jsx(
+        i.Item,
+        {
+          className: "proton-ActionMenu__back-button",
+          onSelect: (r) => {
+            r.preventDefault(), p();
+          },
+          "aria-label": `Go back to ${k || "previous menu"}`,
+          children: /* @__PURE__ */ e.jsx(H, { id: "chevron-left", size: 16, "aria-hidden": "true" })
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        "div",
+        {
+          className: "proton-ActionMenu__title",
+          role: "banner",
+          "aria-label": f ? `Submenu: ${u}` : `Menu: ${u}`,
+          children: /* @__PURE__ */ e.jsx("span", { children: u })
+        }
+      ),
+      /* @__PURE__ */ e.jsx(i.Separator, {})
+    ] }),
+    n.map((r, a) => {
+      var t;
+      const c = n[a];
+      return /* @__PURE__ */ e.jsx(
+        J,
+        {
+          item: r,
+          isSubmenu: !!((t = c.children) != null && t.length),
+          selectionMode: s,
+          onSelectionChange: l,
+          selectedKeys: o,
+          disabledKeys: x,
+          handleSubmenuOpen: m
+        },
+        r.key
       );
+    })
+  ] });
+  return /* @__PURE__ */ e.jsx(
+    "div",
+    {
+      "aria-disabled": s === "none",
+      className: "proton-ActionMenu__list",
+      role: "menu",
+      "aria-label": u ? `${f ? "Submenu" : "Menu"}: ${u}` : "Action menu",
+      "aria-orientation": "vertical",
+      children: s === "single" ? /* @__PURE__ */ e.jsx(
+        i.RadioGroup,
+        {
+          value: (o == null ? void 0 : o[0]) || "",
+          onValueChange: (r) => {
+            var c;
+            const a = n.find((t) => t.key === r);
+            (c = a == null ? void 0 : a.children) != null && c.length || l && l(/* @__PURE__ */ new Set([r]));
+          },
+          children: /* @__PURE__ */ e.jsx(h, {})
+        }
+      ) : /* @__PURE__ */ e.jsx(i.Group, { children: /* @__PURE__ */ e.jsx(h, {}) })
     }
-  } : {};
-  return /* @__PURE__ */ E(
-    x,
+  );
+}, J = ({
+  item: n,
+  isSubmenu: s,
+  selectionMode: o,
+  onSelectionChange: l,
+  selectedKeys: x = [],
+  disabledKeys: m = [],
+  handleSubmenuOpen: u
+}) => {
+  const f = b(null), p = n.to && U(n.to), k = m.includes(n.key), h = x.includes(n.key), r = {
+    className: "proton-ActionMenu__item",
+    "aria-label": n.label ? `${n.label}${n.description ? `, ${n.description}` : ""}` : `ActionMenu-Item-${n.key}`,
+    role: "menuitem",
+    disabled: k,
+    ref: f
+  }, a = (t) => {
+    var d;
+    if ((d = n == null ? void 0 : n.children) != null && d.length) {
+      t.preventDefault(), u(n.key);
+      return;
+    }
+    n.onAction && n.onAction(n.key);
+  }, c = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "proton-ActionMenu__item-content", children: [
+      /* @__PURE__ */ e.jsx("div", { className: "proton-ActionMenu__item-label", children: n.label }),
+      n.description && /* @__PURE__ */ e.jsx("div", { className: "proton-ActionMenu__description", children: n.description })
+    ] }),
+    s && /* @__PURE__ */ e.jsx(H, { id: "chevron-right", size: 16, "aria-hidden": "true" })
+  ] });
+  return n.to ? /* @__PURE__ */ I(i.Item, { ...r, key: n.key, asChild: !0 }, /* @__PURE__ */ e.jsx(
+    "a",
+    {
+      "aria-label": n.label ? `${n.label}${n.description ? `, ${n.description}` : ""}` : `ActionMenu-Item-${n.key}`,
+      "aria-disabled": k,
+      "aria-checked": h,
+      "aria-expanded": s ? !1 : void 0,
+      href: n.to,
+      target: p ? "_blank" : void 0,
+      rel: p ? "noopener noreferrer" : void 0,
+      onClick: (t) => {
+        p || !n.to || V(t, n.to);
+      },
+      children: c
+    }
+  )) : o === "multiple" ? /* @__PURE__ */ I(
+    i.CheckboxItem,
     {
-      ...s,
-      ...y,
-      key: i.key,
-      className: "proton-ActionMenu__item",
-      "aria-label": `ActionMenu-Item-${i.key}`,
-      ref: a
+      ...r,
+      key: n.key,
+      checked: h,
+      onSelect: a,
+      onCheckedChange: (t) => {
+        if (!l) return;
+        const d = new Set(x);
+        t ? d.add(n.key) : d.delete(n.key), l(d);
+      }
     },
-    /* @__PURE__ */ t.jsxs("div", { className: "proton-ActionMenu__item-content", children: [
-      /* @__PURE__ */ t.jsx("div", { className: "proton-ActionMenu__item-label", children: i.rendered }),
-      n.description && /* @__PURE__ */ t.jsx("div", { className: "proton-ActionMenu__description", children: n.description })
-    ] }),
-    d && /* @__PURE__ */ t.jsx(H, { id: "chevron-right", size: 16 })
+    c
+  ) : /* @__PURE__ */ I(
+    i.RadioItem,
+    {
+      ...r,
+      value: n.key,
+      key: n.key,
+      "aria-checked": h,
+      "aria-expanded": s ? !1 : void 0,
+      onSelect: a
+    },
+    c
   );
 };
 export {
-  ht as ActionMenu
+  on as ActionMenu
 };
 //# sourceMappingURL=ActionMenu.es.js.map