@protonradio/proton-ui 0.11.5-beta.2 → 0.11.6

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

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

package/dist/components/ButtonWithSelect/ButtonWithSelect.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../node_modules/react/jsx-runtime.cjs.js"),S=require("react"),o=require("../Button/Button.cjs.js"),E=require("../Icon/Icon.cjs.js"),T=require("../Menu/MenuTrigger.cjs.js");;/* empty css                          */const u=44;function c({items:e,defaultValue:s,children:l,onSelectionChange:d,disabledKeys:a,selectedKey:g,icon:j,variant:i,fullWidth:r,onPress:h,...n}){const m=r?u/2:0;return t.jsxRuntimeExports.jsxs("div",{className:"proton-ButtonWithSelect",children:[t.jsxRuntimeExports.jsx("div",{className:"proton-ButtonWithSelect__button",style:{"--proton-button-text-shift":`${m}px`,"--flex":r?1:0},children:t.jsxRuntimeExports.jsx(o.Button,{...n,onPress:h,icon:j,fullWidth:r,variant:i,"data-testid":"ButtonWithSelect-Button",children:l})}),t.jsxRuntimeExports.jsx(T.MenuTrigger,{items:e,disabled:n.isDisabled,disabledKeys:a,onSelectionChange:d,selectedKey:g,renderTrigger:({triggerRef:p,isOpen:B,setIsOpen:R})=>t.jsxRuntimeExports.jsx(x,{...n,variant:i,ref:p,onPress:()=>R(!B)})})]})}c.displayName="ProtonUIButtonWithSelect";const x=S.forwardRef((e,s)=>t.jsxRuntimeExports.jsx("div",{className:"proton-ButtonWithSelect__trigger",style:{"--trigger-width":`${u}px`},children:t.jsxRuntimeExports.jsx(o.Button,{...e,"data-testid":"ButtonWithSelect-Trigger",ref:s,children:t.jsxRuntimeExports.jsx("div",{className:"proton-ButtonWithSelect__trigger-content",children:t.jsxRuntimeExports.jsx(E.Icon,{id:"chevron-down",size:16})})})}));x.displayName="ProtonUIButtonWithSelectTrigger";exports.ButtonWithSelect=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../node_modules/react/jsx-runtime.cjs.js"),R=require("react"),o=require("../Button/Button.cjs.js"),S=require("../Icon/Icon.cjs.js"),E=require("../Menu/MenuTrigger.cjs.js");;/* empty css                          */const u=44;function c({items:e,defaultValue:s,children:l,onSelectionChange:d,disabledKeys:a,selectedKey:g,icon:j,variant:i,fullWidth:r,onPress:h,...n}){const m=r?u/2:0;return t.jsxRuntimeExports.jsxs("div",{className:"proton-ButtonWithSelect",children:[t.jsxRuntimeExports.jsx("div",{className:"proton-ButtonWithSelect__button",style:{"--proton-button-text-shift":`${m}px`,"--flex":r?1:0},children:t.jsxRuntimeExports.jsx(o.Button,{...n,onPress:h,icon:j,fullWidth:r,variant:i,"data-testid":"ButtonWithSelect-Button",children:l})}),t.jsxRuntimeExports.jsx(E.MenuTrigger,{items:e,disabled:n.isDisabled,disabledKeys:a,onSelectionChange:d,selectedKey:g,renderTrigger:({isOpen:p,setIsOpen:B})=>t.jsxRuntimeExports.jsx(x,{...n,variant:i,onPress:()=>B(!p)})})]})}c.displayName="ProtonUIButtonWithSelect";const x=R.forwardRef((e,s)=>t.jsxRuntimeExports.jsx("div",{className:"proton-ButtonWithSelect__trigger",style:{"--trigger-width":`${u}px`},children:t.jsxRuntimeExports.jsx(o.Button,{...e,"data-testid":"ButtonWithSelect-Trigger",ref:s,children:t.jsxRuntimeExports.jsx("div",{className:"proton-ButtonWithSelect__trigger-content",children:t.jsxRuntimeExports.jsx(S.Icon,{id:"chevron-down",size:16})})})}));x.displayName="ProtonUIButtonWithSelectTrigger";exports.ButtonWithSelect=c;
 //# sourceMappingURL=ButtonWithSelect.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonWithSelect.cjs.js","sources":["../../../src/components/ButtonWithSelect/ButtonWithSelect.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { Button, type ButtonProps } from \"../Button/Button\";\r\nimport { Icon } from \"../Icon/Icon\";\r\nimport { MenuTrigger } from \"../Menu/MenuTrigger\";\r\nimport type { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\r\n\r\nimport \"./ButtonWithSelect.css\";\r\n\r\nconst FIXED_TRIGGER_WIDTH = 44;\r\n\r\ninterface ButtonWithSelectProps extends ButtonProps {\r\n  /**\r\n   * The default value of the select menu.\r\n   */\r\n  defaultValue?: string;\r\n  /**\r\n   * The keys of the disabled items.\r\n   */\r\n  disabledKeys?: string[];\r\n  /**\r\n   * The items to display in the select menu.\r\n   * - type {@link ActionMenuAction}\r\n   */\r\n  items: ActionMenuAction[];\r\n  /**\r\n   * The callback function to call when the selection changes.\r\n   */\r\n  onSelectionChange?: (key: string) => void;\r\n  /**\r\n   * The key of the selected item.\r\n   */\r\n  selectedKey?: string;\r\n}\r\n\r\n/**\r\n * A button with a select menu.\r\n *\r\n * API:\r\n *  - {@link ButtonWithSelectProps}\r\n *  - extends {@link ButtonProps}\r\n */\r\nexport function ButtonWithSelect({\r\n  items,\r\n  defaultValue,\r\n  children,\r\n  onSelectionChange,\r\n  disabledKeys,\r\n  selectedKey,\r\n  icon,\r\n  variant,\r\n  fullWidth,\r\n  onPress,\r\n  ...buttonProps\r\n}: ButtonWithSelectProps) {\r\n  const textShift = fullWidth ? FIXED_TRIGGER_WIDTH / 2 : 0;\r\n\r\n  return (\r\n    <div className=\"proton-ButtonWithSelect\">\r\n      <div\r\n        className=\"proton-ButtonWithSelect__button\"\r\n        style={\r\n          {\r\n            \"--proton-button-text-shift\": `${textShift}px`,\r\n            \"--flex\": fullWidth ? 1 : 0,\r\n          } as React.CSSProperties\r\n        }\r\n      >\r\n        <Button\r\n          {...buttonProps}\r\n          onPress={onPress}\r\n          icon={icon}\r\n          fullWidth={fullWidth}\r\n          variant={variant}\r\n          data-testid=\"ButtonWithSelect-Button\"\r\n        >\r\n          {children}\r\n        </Button>\r\n      </div>\r\n\r\n      <MenuTrigger\r\n        items={items}\r\n        disabled={buttonProps.isDisabled}\r\n        disabledKeys={disabledKeys}\r\n        onSelectionChange={onSelectionChange}\r\n        selectedKey={selectedKey}\r\n        renderTrigger={({ triggerRef, isOpen, setIsOpen }) => {\r\n          return (\r\n            <TriggerButton\r\n              {...buttonProps}\r\n              variant={variant}\r\n              ref={triggerRef}\r\n              onPress={() => setIsOpen(!isOpen)}\r\n            />\r\n          );\r\n        }}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nButtonWithSelect.displayName = \"ProtonUIButtonWithSelect\";\r\n\r\nconst TriggerButton = React.forwardRef<\r\n  HTMLButtonElement | HTMLAnchorElement,\r\n  ButtonProps\r\n>((props, ref) => {\r\n  return (\r\n    <div\r\n      className=\"proton-ButtonWithSelect__trigger\"\r\n      style={\r\n        {\r\n          \"--trigger-width\": `${FIXED_TRIGGER_WIDTH}px`,\r\n        } as React.CSSProperties\r\n      }\r\n    >\r\n      <Button {...props} data-testid=\"ButtonWithSelect-Trigger\" ref={ref}>\r\n        <div className=\"proton-ButtonWithSelect__trigger-content\">\r\n          <Icon id=\"chevron-down\" size={16} />\r\n        </div>\r\n      </Button>\r\n    </div>\r\n  );\r\n});\r\n\r\nTriggerButton.displayName = \"ProtonUIButtonWithSelectTrigger\";\r\n"],"names":["FIXED_TRIGGER_WIDTH","ButtonWithSelect","items","defaultValue","children","onSelectionChange","disabledKeys","selectedKey","icon","variant","fullWidth","onPress","buttonProps","textShift","jsxs","jsx","Button","MenuTrigger","triggerRef","isOpen","setIsOpen","TriggerButton","React","props","ref","Icon"],"mappings":"yTAQA,MAAMA,EAAsB,GAiCrB,SAASC,EAAiB,CAC/B,MAAAC,EACA,aAAAC,EACA,SAAAC,EACA,kBAAAC,EACA,aAAAC,EACA,YAAAC,EACA,KAAAC,EACA,QAAAC,EACA,UAAAC,EACA,QAAAC,EACA,GAAGC,CACL,EAA0B,CAClB,MAAAC,EAAYH,EAAYV,EAAsB,EAAI,EAGtD,OAAAc,EAAA,kBAAA,KAAC,MAAI,CAAA,UAAU,0BACb,SAAA,CAAAC,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,kCACV,MACE,CACE,6BAA8B,GAAGF,CAAS,KAC1C,SAAUH,EAAY,EAAI,CAC5B,EAGF,SAAAK,EAAA,kBAAA,IAACC,EAAA,OAAA,CACE,GAAGJ,EACJ,QAAAD,EACA,KAAAH,EACA,UAAAE,EACA,QAAAD,EACA,cAAY,0BAEX,SAAAL,CAAA,CACH,CAAA,CACF,EAEAW,EAAA,kBAAA,IAACE,EAAA,YAAA,CACC,MAAAf,EACA,SAAUU,EAAY,WACtB,aAAAN,EACA,kBAAAD,EACA,YAAAE,EACA,cAAe,CAAC,CAAE,WAAAW,EAAY,OAAAC,EAAQ,UAAAC,KAElCL,EAAA,kBAAA,IAACM,EAAA,CACE,GAAGT,EACJ,QAAAH,EACA,IAAKS,EACL,QAAS,IAAME,EAAU,CAACD,CAAM,CAAA,CAAA,CAGtC,CACF,CACF,CAAA,CAAA,CAEJ,CAEAlB,EAAiB,YAAc,2BAE/B,MAAMoB,EAAgBC,EAAM,WAG1B,CAACC,EAAOC,IAENT,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,mCACV,MACE,CACE,kBAAmB,GAAGf,CAAmB,IAC3C,EAGF,iCAACgB,SAAQ,CAAA,GAAGO,EAAO,cAAY,2BAA2B,IAAAC,EACxD,SAACT,EAAAA,kBAAAA,IAAA,MAAA,CAAI,UAAU,2CACb,iCAACU,EAAAA,KAAK,CAAA,GAAG,eAAe,KAAM,GAAI,EACpC,CACF,CAAA,CAAA,CAAA,CAGL,EAEDJ,EAAc,YAAc"}
+{"version":3,"file":"ButtonWithSelect.cjs.js","sources":["../../../src/components/ButtonWithSelect/ButtonWithSelect.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { Button, type ButtonProps } from \"../Button/Button\";\r\nimport { Icon } from \"../Icon/Icon\";\r\nimport { MenuTrigger } from \"../Menu/MenuTrigger\";\r\nimport type { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\r\n\r\nimport \"./ButtonWithSelect.css\";\r\n\r\nconst FIXED_TRIGGER_WIDTH = 44;\r\n\r\ninterface ButtonWithSelectProps extends ButtonProps {\r\n  /**\r\n   * The default value of the select menu.\r\n   */\r\n  defaultValue?: string;\r\n  /**\r\n   * The keys of the disabled items.\r\n   */\r\n  disabledKeys?: string[];\r\n  /**\r\n   * The items to display in the select menu.\r\n   * - type {@link ActionMenuAction}\r\n   */\r\n  items: ActionMenuAction[];\r\n  /**\r\n   * The callback function to call when the selection changes.\r\n   */\r\n  onSelectionChange?: (key: string) => void;\r\n  /**\r\n   * The key of the selected item.\r\n   */\r\n  selectedKey?: string;\r\n}\r\n\r\n/**\r\n * A button with a select menu.\r\n *\r\n * API:\r\n *  - {@link ButtonWithSelectProps}\r\n *  - extends {@link ButtonProps}\r\n */\r\nexport function ButtonWithSelect({\r\n  items,\r\n  defaultValue,\r\n  children,\r\n  onSelectionChange,\r\n  disabledKeys,\r\n  selectedKey,\r\n  icon,\r\n  variant,\r\n  fullWidth,\r\n  onPress,\r\n  ...buttonProps\r\n}: ButtonWithSelectProps) {\r\n  const textShift = fullWidth ? FIXED_TRIGGER_WIDTH / 2 : 0;\r\n\r\n  return (\r\n    <div className=\"proton-ButtonWithSelect\">\r\n      <div\r\n        className=\"proton-ButtonWithSelect__button\"\r\n        style={\r\n          {\r\n            \"--proton-button-text-shift\": `${textShift}px`,\r\n            \"--flex\": fullWidth ? 1 : 0,\r\n          } as React.CSSProperties\r\n        }\r\n      >\r\n        <Button\r\n          {...buttonProps}\r\n          onPress={onPress}\r\n          icon={icon}\r\n          fullWidth={fullWidth}\r\n          variant={variant}\r\n          data-testid=\"ButtonWithSelect-Button\"\r\n        >\r\n          {children}\r\n        </Button>\r\n      </div>\r\n\r\n      <MenuTrigger\r\n        items={items}\r\n        disabled={buttonProps.isDisabled}\r\n        disabledKeys={disabledKeys}\r\n        onSelectionChange={onSelectionChange}\r\n        selectedKey={selectedKey}\r\n        renderTrigger={({ isOpen, setIsOpen }) => {\r\n          return (\r\n            <TriggerButton\r\n              {...buttonProps}\r\n              variant={variant}\r\n              onPress={() => setIsOpen(!isOpen)}\r\n            />\r\n          );\r\n        }}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nButtonWithSelect.displayName = \"ProtonUIButtonWithSelect\";\r\n\r\nconst TriggerButton = React.forwardRef<\r\n  HTMLButtonElement | HTMLAnchorElement,\r\n  ButtonProps\r\n>((props, ref) => {\r\n  return (\r\n    <div\r\n      className=\"proton-ButtonWithSelect__trigger\"\r\n      style={\r\n        {\r\n          \"--trigger-width\": `${FIXED_TRIGGER_WIDTH}px`,\r\n        } as React.CSSProperties\r\n      }\r\n    >\r\n      <Button {...props} data-testid=\"ButtonWithSelect-Trigger\" ref={ref}>\r\n        <div className=\"proton-ButtonWithSelect__trigger-content\">\r\n          <Icon id=\"chevron-down\" size={16} />\r\n        </div>\r\n      </Button>\r\n    </div>\r\n  );\r\n});\r\n\r\nTriggerButton.displayName = \"ProtonUIButtonWithSelectTrigger\";\r\n"],"names":["FIXED_TRIGGER_WIDTH","ButtonWithSelect","items","defaultValue","children","onSelectionChange","disabledKeys","selectedKey","icon","variant","fullWidth","onPress","buttonProps","textShift","jsxs","jsx","Button","MenuTrigger","isOpen","setIsOpen","TriggerButton","React","props","ref","Icon"],"mappings":"yTAQA,MAAMA,EAAsB,GAiCrB,SAASC,EAAiB,CAC/B,MAAAC,EACA,aAAAC,EACA,SAAAC,EACA,kBAAAC,EACA,aAAAC,EACA,YAAAC,EACA,KAAAC,EACA,QAAAC,EACA,UAAAC,EACA,QAAAC,EACA,GAAGC,CACL,EAA0B,CAClB,MAAAC,EAAYH,EAAYV,EAAsB,EAAI,EAGtD,OAAAc,EAAA,kBAAA,KAAC,MAAI,CAAA,UAAU,0BACb,SAAA,CAAAC,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,kCACV,MACE,CACE,6BAA8B,GAAGF,CAAS,KAC1C,SAAUH,EAAY,EAAI,CAC5B,EAGF,SAAAK,EAAA,kBAAA,IAACC,EAAA,OAAA,CACE,GAAGJ,EACJ,QAAAD,EACA,KAAAH,EACA,UAAAE,EACA,QAAAD,EACA,cAAY,0BAEX,SAAAL,CAAA,CACH,CAAA,CACF,EAEAW,EAAA,kBAAA,IAACE,EAAA,YAAA,CACC,MAAAf,EACA,SAAUU,EAAY,WACtB,aAAAN,EACA,kBAAAD,EACA,YAAAE,EACA,cAAe,CAAC,CAAE,OAAAW,EAAQ,UAAAC,KAEtBJ,EAAA,kBAAA,IAACK,EAAA,CACE,GAAGR,EACJ,QAAAH,EACA,QAAS,IAAMU,EAAU,CAACD,CAAM,CAAA,CAAA,CAGtC,CACF,CACF,CAAA,CAAA,CAEJ,CAEAjB,EAAiB,YAAc,2BAE/B,MAAMmB,EAAgBC,EAAM,WAG1B,CAACC,EAAOC,IAENR,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,mCACV,MACE,CACE,kBAAmB,GAAGf,CAAmB,IAC3C,EAGF,iCAACgB,SAAQ,CAAA,GAAGM,EAAO,cAAY,2BAA2B,IAAAC,EACxD,SAACR,EAAAA,kBAAAA,IAAA,MAAA,CAAI,UAAU,2CACb,iCAACS,EAAAA,KAAK,CAAA,GAAG,eAAe,KAAM,GAAI,EACpC,CACF,CAAA,CAAA,CAAA,CAGL,EAEDJ,EAAc,YAAc"}

package/dist/components/ButtonWithSelect/ButtonWithSelect.es.js

@@ -2,10 +2,10 @@ import { j as t } from "../../node_modules/react/jsx-runtime.es.js";
 import j from "react";
 import { Button as s } from "../Button/Button.es.js";
 import { Icon as S } from "../Icon/Icon.es.js";
-import { MenuTrigger as W } from "../Menu/MenuTrigger.es.js";
+import { MenuTrigger as f } from "../Menu/MenuTrigger.es.js";
 /* empty css                        */
 const c = 44;
-function _({
+function W({
   items: e,
   defaultValue: i,
   children: l,
@@ -43,27 +43,26 @@ function _({
       }
     ),
     /* @__PURE__ */ t.jsx(
-      W,
+      f,
       {
         items: e,
         disabled: o.isDisabled,
         disabledKeys: m,
         onSelectionChange: a,
         selectedKey: u,
-        renderTrigger: ({ triggerRef: p, isOpen: B, setIsOpen: f }) => /* @__PURE__ */ t.jsx(
+        renderTrigger: ({ isOpen: p, setIsOpen: B }) => /* @__PURE__ */ t.jsx(
           d,
           {
             ...o,
             variant: n,
-            ref: p,
-            onPress: () => f(!B)
+            onPress: () => B(!p)
           }
         )
       }
     )
   ] });
 }
-_.displayName = "ProtonUIButtonWithSelect";
+W.displayName = "ProtonUIButtonWithSelect";
 const d = j.forwardRef((e, i) => /* @__PURE__ */ t.jsx(
   "div",
   {
@@ -76,6 +75,6 @@ const d = j.forwardRef((e, i) => /* @__PURE__ */ t.jsx(
 ));
 d.displayName = "ProtonUIButtonWithSelectTrigger";
 export {
-  _ as ButtonWithSelect
+  W as ButtonWithSelect
 };
 //# sourceMappingURL=ButtonWithSelect.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonWithSelect.es.js","sources":["../../../src/components/ButtonWithSelect/ButtonWithSelect.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { Button, type ButtonProps } from \"../Button/Button\";\r\nimport { Icon } from \"../Icon/Icon\";\r\nimport { MenuTrigger } from \"../Menu/MenuTrigger\";\r\nimport type { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\r\n\r\nimport \"./ButtonWithSelect.css\";\r\n\r\nconst FIXED_TRIGGER_WIDTH = 44;\r\n\r\ninterface ButtonWithSelectProps extends ButtonProps {\r\n  /**\r\n   * The default value of the select menu.\r\n   */\r\n  defaultValue?: string;\r\n  /**\r\n   * The keys of the disabled items.\r\n   */\r\n  disabledKeys?: string[];\r\n  /**\r\n   * The items to display in the select menu.\r\n   * - type {@link ActionMenuAction}\r\n   */\r\n  items: ActionMenuAction[];\r\n  /**\r\n   * The callback function to call when the selection changes.\r\n   */\r\n  onSelectionChange?: (key: string) => void;\r\n  /**\r\n   * The key of the selected item.\r\n   */\r\n  selectedKey?: string;\r\n}\r\n\r\n/**\r\n * A button with a select menu.\r\n *\r\n * API:\r\n *  - {@link ButtonWithSelectProps}\r\n *  - extends {@link ButtonProps}\r\n */\r\nexport function ButtonWithSelect({\r\n  items,\r\n  defaultValue,\r\n  children,\r\n  onSelectionChange,\r\n  disabledKeys,\r\n  selectedKey,\r\n  icon,\r\n  variant,\r\n  fullWidth,\r\n  onPress,\r\n  ...buttonProps\r\n}: ButtonWithSelectProps) {\r\n  const textShift = fullWidth ? FIXED_TRIGGER_WIDTH / 2 : 0;\r\n\r\n  return (\r\n    <div className=\"proton-ButtonWithSelect\">\r\n      <div\r\n        className=\"proton-ButtonWithSelect__button\"\r\n        style={\r\n          {\r\n            \"--proton-button-text-shift\": `${textShift}px`,\r\n            \"--flex\": fullWidth ? 1 : 0,\r\n          } as React.CSSProperties\r\n        }\r\n      >\r\n        <Button\r\n          {...buttonProps}\r\n          onPress={onPress}\r\n          icon={icon}\r\n          fullWidth={fullWidth}\r\n          variant={variant}\r\n          data-testid=\"ButtonWithSelect-Button\"\r\n        >\r\n          {children}\r\n        </Button>\r\n      </div>\r\n\r\n      <MenuTrigger\r\n        items={items}\r\n        disabled={buttonProps.isDisabled}\r\n        disabledKeys={disabledKeys}\r\n        onSelectionChange={onSelectionChange}\r\n        selectedKey={selectedKey}\r\n        renderTrigger={({ triggerRef, isOpen, setIsOpen }) => {\r\n          return (\r\n            <TriggerButton\r\n              {...buttonProps}\r\n              variant={variant}\r\n              ref={triggerRef}\r\n              onPress={() => setIsOpen(!isOpen)}\r\n            />\r\n          );\r\n        }}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nButtonWithSelect.displayName = \"ProtonUIButtonWithSelect\";\r\n\r\nconst TriggerButton = React.forwardRef<\r\n  HTMLButtonElement | HTMLAnchorElement,\r\n  ButtonProps\r\n>((props, ref) => {\r\n  return (\r\n    <div\r\n      className=\"proton-ButtonWithSelect__trigger\"\r\n      style={\r\n        {\r\n          \"--trigger-width\": `${FIXED_TRIGGER_WIDTH}px`,\r\n        } as React.CSSProperties\r\n      }\r\n    >\r\n      <Button {...props} data-testid=\"ButtonWithSelect-Trigger\" ref={ref}>\r\n        <div className=\"proton-ButtonWithSelect__trigger-content\">\r\n          <Icon id=\"chevron-down\" size={16} />\r\n        </div>\r\n      </Button>\r\n    </div>\r\n  );\r\n});\r\n\r\nTriggerButton.displayName = \"ProtonUIButtonWithSelectTrigger\";\r\n"],"names":["FIXED_TRIGGER_WIDTH","ButtonWithSelect","items","defaultValue","children","onSelectionChange","disabledKeys","selectedKey","icon","variant","fullWidth","onPress","buttonProps","textShift","jsxs","jsx","Button","MenuTrigger","triggerRef","isOpen","setIsOpen","TriggerButton","React","props","ref","Icon"],"mappings":";;;;;;AAQA,MAAMA,IAAsB;AAiCrB,SAASC,EAAiB;AAAA,EAC/B,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,GAA0B;AAClB,QAAAC,IAAYH,IAAYV,IAAsB,IAAI;AAGtD,SAAAc,gBAAAA,EAAA,KAAC,OAAI,EAAA,WAAU,2BACb,UAAA;AAAA,IAAAC,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OACE;AAAA,UACE,8BAA8B,GAAGF,CAAS;AAAA,UAC1C,UAAUH,IAAY,IAAI;AAAA,QAC5B;AAAA,QAGF,UAAAK,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACE,GAAGJ;AAAA,YACJ,SAAAD;AAAA,YACA,MAAAH;AAAA,YACA,WAAAE;AAAA,YACA,SAAAD;AAAA,YACA,eAAY;AAAA,YAEX,UAAAL;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IACF;AAAA,IAEAW,gBAAAA,EAAA;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,OAAAf;AAAA,QACA,UAAUU,EAAY;AAAA,QACtB,cAAAN;AAAA,QACA,mBAAAD;AAAA,QACA,aAAAE;AAAA,QACA,eAAe,CAAC,EAAE,YAAAW,GAAY,QAAAC,GAAQ,WAAAC,QAElCL,gBAAAA,EAAA;AAAA,UAACM;AAAA,UAAA;AAAA,YACE,GAAGT;AAAA,YACJ,SAAAH;AAAA,YACA,KAAKS;AAAA,YACL,SAAS,MAAME,EAAU,CAACD,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MAGtC;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;AAEAlB,EAAiB,cAAc;AAE/B,MAAMoB,IAAgBC,EAAM,WAG1B,CAACC,GAAOC,MAENT,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,OACE;AAAA,MACE,mBAAmB,GAAGf,CAAmB;AAAA,IAC3C;AAAA,IAGF,gCAACgB,GAAQ,EAAA,GAAGO,GAAO,eAAY,4BAA2B,KAAAC,GACxD,UAACT,gBAAAA,EAAAA,IAAA,OAAA,EAAI,WAAU,4CACb,gCAACU,GAAK,EAAA,IAAG,gBAAe,MAAM,IAAI,GACpC,EACF,CAAA;AAAA,EAAA;AAAA,CAGL;AAEDJ,EAAc,cAAc;"}
+{"version":3,"file":"ButtonWithSelect.es.js","sources":["../../../src/components/ButtonWithSelect/ButtonWithSelect.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { Button, type ButtonProps } from \"../Button/Button\";\r\nimport { Icon } from \"../Icon/Icon\";\r\nimport { MenuTrigger } from \"../Menu/MenuTrigger\";\r\nimport type { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\r\n\r\nimport \"./ButtonWithSelect.css\";\r\n\r\nconst FIXED_TRIGGER_WIDTH = 44;\r\n\r\ninterface ButtonWithSelectProps extends ButtonProps {\r\n  /**\r\n   * The default value of the select menu.\r\n   */\r\n  defaultValue?: string;\r\n  /**\r\n   * The keys of the disabled items.\r\n   */\r\n  disabledKeys?: string[];\r\n  /**\r\n   * The items to display in the select menu.\r\n   * - type {@link ActionMenuAction}\r\n   */\r\n  items: ActionMenuAction[];\r\n  /**\r\n   * The callback function to call when the selection changes.\r\n   */\r\n  onSelectionChange?: (key: string) => void;\r\n  /**\r\n   * The key of the selected item.\r\n   */\r\n  selectedKey?: string;\r\n}\r\n\r\n/**\r\n * A button with a select menu.\r\n *\r\n * API:\r\n *  - {@link ButtonWithSelectProps}\r\n *  - extends {@link ButtonProps}\r\n */\r\nexport function ButtonWithSelect({\r\n  items,\r\n  defaultValue,\r\n  children,\r\n  onSelectionChange,\r\n  disabledKeys,\r\n  selectedKey,\r\n  icon,\r\n  variant,\r\n  fullWidth,\r\n  onPress,\r\n  ...buttonProps\r\n}: ButtonWithSelectProps) {\r\n  const textShift = fullWidth ? FIXED_TRIGGER_WIDTH / 2 : 0;\r\n\r\n  return (\r\n    <div className=\"proton-ButtonWithSelect\">\r\n      <div\r\n        className=\"proton-ButtonWithSelect__button\"\r\n        style={\r\n          {\r\n            \"--proton-button-text-shift\": `${textShift}px`,\r\n            \"--flex\": fullWidth ? 1 : 0,\r\n          } as React.CSSProperties\r\n        }\r\n      >\r\n        <Button\r\n          {...buttonProps}\r\n          onPress={onPress}\r\n          icon={icon}\r\n          fullWidth={fullWidth}\r\n          variant={variant}\r\n          data-testid=\"ButtonWithSelect-Button\"\r\n        >\r\n          {children}\r\n        </Button>\r\n      </div>\r\n\r\n      <MenuTrigger\r\n        items={items}\r\n        disabled={buttonProps.isDisabled}\r\n        disabledKeys={disabledKeys}\r\n        onSelectionChange={onSelectionChange}\r\n        selectedKey={selectedKey}\r\n        renderTrigger={({ isOpen, setIsOpen }) => {\r\n          return (\r\n            <TriggerButton\r\n              {...buttonProps}\r\n              variant={variant}\r\n              onPress={() => setIsOpen(!isOpen)}\r\n            />\r\n          );\r\n        }}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nButtonWithSelect.displayName = \"ProtonUIButtonWithSelect\";\r\n\r\nconst TriggerButton = React.forwardRef<\r\n  HTMLButtonElement | HTMLAnchorElement,\r\n  ButtonProps\r\n>((props, ref) => {\r\n  return (\r\n    <div\r\n      className=\"proton-ButtonWithSelect__trigger\"\r\n      style={\r\n        {\r\n          \"--trigger-width\": `${FIXED_TRIGGER_WIDTH}px`,\r\n        } as React.CSSProperties\r\n      }\r\n    >\r\n      <Button {...props} data-testid=\"ButtonWithSelect-Trigger\" ref={ref}>\r\n        <div className=\"proton-ButtonWithSelect__trigger-content\">\r\n          <Icon id=\"chevron-down\" size={16} />\r\n        </div>\r\n      </Button>\r\n    </div>\r\n  );\r\n});\r\n\r\nTriggerButton.displayName = \"ProtonUIButtonWithSelectTrigger\";\r\n"],"names":["FIXED_TRIGGER_WIDTH","ButtonWithSelect","items","defaultValue","children","onSelectionChange","disabledKeys","selectedKey","icon","variant","fullWidth","onPress","buttonProps","textShift","jsxs","jsx","Button","MenuTrigger","isOpen","setIsOpen","TriggerButton","React","props","ref","Icon"],"mappings":";;;;;;AAQA,MAAMA,IAAsB;AAiCrB,SAASC,EAAiB;AAAA,EAC/B,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,GAA0B;AAClB,QAAAC,IAAYH,IAAYV,IAAsB,IAAI;AAGtD,SAAAc,gBAAAA,EAAA,KAAC,OAAI,EAAA,WAAU,2BACb,UAAA;AAAA,IAAAC,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OACE;AAAA,UACE,8BAA8B,GAAGF,CAAS;AAAA,UAC1C,UAAUH,IAAY,IAAI;AAAA,QAC5B;AAAA,QAGF,UAAAK,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACE,GAAGJ;AAAA,YACJ,SAAAD;AAAA,YACA,MAAAH;AAAA,YACA,WAAAE;AAAA,YACA,SAAAD;AAAA,YACA,eAAY;AAAA,YAEX,UAAAL;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IACF;AAAA,IAEAW,gBAAAA,EAAA;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,OAAAf;AAAA,QACA,UAAUU,EAAY;AAAA,QACtB,cAAAN;AAAA,QACA,mBAAAD;AAAA,QACA,aAAAE;AAAA,QACA,eAAe,CAAC,EAAE,QAAAW,GAAQ,WAAAC,QAEtBJ,gBAAAA,EAAA;AAAA,UAACK;AAAA,UAAA;AAAA,YACE,GAAGR;AAAA,YACJ,SAAAH;AAAA,YACA,SAAS,MAAMU,EAAU,CAACD,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MAGtC;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;AAEAjB,EAAiB,cAAc;AAE/B,MAAMmB,IAAgBC,EAAM,WAG1B,CAACC,GAAOC,MAENR,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,OACE;AAAA,MACE,mBAAmB,GAAGf,CAAmB;AAAA,IAC3C;AAAA,IAGF,gCAACgB,GAAQ,EAAA,GAAGM,GAAO,eAAY,4BAA2B,KAAAC,GACxD,UAACR,gBAAAA,EAAAA,IAAA,OAAA,EAAI,WAAU,4CACb,gCAACS,GAAK,EAAA,IAAG,gBAAe,MAAM,IAAI,GACpC,EACF,CAAA;AAAA,EAAA;AAAA,CAGL;AAEDJ,EAAc,cAAc;"}

package/dist/components/Menu/MenuTrigger.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"),g=require("react"),v=require("../../node_modules/react-aria-components/dist/Button.cjs.js"),B=require("../../hooks/useBreakpoint.cjs.js"),P=require("../ActionMenu/ActionMenu.cjs.js");;/* empty css                     */const b=require("../../node_modules/@react-aria/menu/dist/useMenuTrigger.cjs.js"),A=require("../../node_modules/@react-stately/menu/dist/useMenuTriggerState.cjs.js"),O=require("./PopoverMenu.cjs.js"),k=require("../../utils/string.cjs.js"),I=require("../../constants/breakpoint.cjs.js");function w({renderTrigger:r,size:T=24,title:x,items:p,disabled:a,onClose:s,triggerTestId:d="MenuTrigger-Trigger",menuTestId:q,onSelectionChange:u,selectedKey:o,disabledKeys:m}){const M=g.useMemo(()=>p.map(i=>({...i,id:i.key})),[p]),j=B.useBreakpoint(I.BREAKPOINTS.SMALL),f=A.useMenuTriggerState({}),{isOpen:t,setOpen:c}=f,n=g.useRef(null),{menuTriggerProps:E,menuProps:z}=b.useMenuTrigger({},f,n);function l(i){const R=Array.from(i)[0];R&&(u==null||u(R))}const h=e.jsxRuntimeExports.jsx(v.Button,{...E,"data-testid":d,isDisabled:a,className:k.csx("proton-MenuTrigger__button"),ref:n,children:e.jsxRuntimeExports.jsx(y,{size:T})}),S=r?r({isOpen:t,setIsOpen:c,disabled:a,triggerRef:n}):h;return g.useEffect(()=>()=>{t&&(s==null||s())},[t,s]),e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[S,t&&j&&e.jsxRuntimeExports.jsx(P.ActionMenu,{actions:M,title:x,isOpen:t,onClose:()=>c(!1),showCancel:!0,"data-testid":q,selectionMode:"single",onSelectionChange:l,selectedKeys:o?[o]:void 0,disabledKeys:m}),t&&!j&&e.jsxRuntimeExports.jsx(O.PopoverMenu,{isOpen:t,setIsOpen:c,items:M,selectedKey:o,disabledKeys:m,title:x,onSelectionChange:l,triggerRef:n})]})}const y=({size:r})=>e.jsxRuntimeExports.jsx("svg",{viewBox:"0 0 24 24",width:r,height:r,children:e.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"M4 14c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"})});exports.MenuTrigger=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../node_modules/react/jsx-runtime.cjs.js"),c=require("react"),q=require("../../hooks/useBreakpoint.cjs.js"),b=require("../ActionMenu/ActionMenu.cjs.js"),v=require("./PopoverMenu.cjs.js");;/* empty css                     */;/* empty css              */const T=require("../../constants/breakpoint.cjs.js");function k({renderTrigger:r,size:R=24,title:x,items:a,disabled:p,onClose:i,triggerTestId:f="MenuTrigger-Trigger",menuTestId:d,onSelectionChange:o,selectedKey:u,disabledKeys:g}){const E=q.useBreakpoint(T.BREAKPOINTS.SMALL),[s,n]=c.useState(!1),h=c.useRef(null),m=c.useMemo(()=>a.map(t=>({...t,id:t.key})),[a]),j=t=>{o==null||o(t),n(!1)},l=r?r({isOpen:s,disabled:p,setIsOpen:n}):e.jsxRuntimeExports.jsx("button",{"data-testid":f,disabled:p,className:"proton-MenuTrigger__button",ref:h,onClick:()=>n(!s),type:"button",children:e.jsxRuntimeExports.jsx(A,{size:R})});return E?e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[l,s&&e.jsxRuntimeExports.jsx(b.ActionMenu,{actions:m,title:x,isOpen:s,onClose:()=>{n(!1),i==null||i()},showCancel:!0,"data-testid":d,selectionMode:"single",onSelectionChange:t=>{const M=Array.from(t)[0];M&&j(M)},selectedKeys:u?[u]:void 0,disabledKeys:g})]}):e.jsxRuntimeExports.jsx(v.PopoverMenu,{trigger:l,items:m,isOpen:s,onOpenChange:n,selectedKey:u,onSelectionChange:j,disabledKeys:g,title:x})}const A=({size:r})=>e.jsxRuntimeExports.jsx("svg",{viewBox:"0 0 24 24",width:r,height:r,children:e.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"M4 14c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"})});exports.MenuTrigger=k;
 //# 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\";\r\n\r\nimport { ReactNode, useEffect, useMemo, useRef } from \"react\";\r\n\r\nimport { Button as AriaButton, Selection } from \"react-aria-components\";\r\nimport { BREAKPOINTS } from \"../../constants\";\r\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\r\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\r\n\r\nimport { csx } from \"../../utils\";\r\n\r\nimport \"./MenuTrigger.css\";\r\n\r\nimport { useMenuTrigger } from \"@react-aria/menu\";\r\nimport { useMenuTriggerState } from \"@react-stately/menu\";\r\nimport { PopoverMenu } from \"./PopoverMenu\";\r\n\r\ninterface TriggerProps {\r\n  disabled?: boolean;\r\n  isOpen?: boolean;\r\n  setIsOpen?: (isOpen: boolean) => void;\r\n  triggerRef: React.RefObject<HTMLButtonElement>;\r\n}\r\n\r\nexport interface MenuProps {\r\n  /** Custom trigger component. If not provided, defaults to ellipsis icon.\r\n   * - @prop triggerProps {@link TriggerProps}\r\n   */\r\n  renderTrigger?: (triggerProps: TriggerProps) => ReactNode;\r\n\r\n  /** Size of the trigger icon\r\n   * @default 24\r\n   */\r\n  size?: number;\r\n\r\n  /** Title of the parent menu */\r\n  title?: string;\r\n\r\n  /** Array of menu actions/items to display\r\n   * - type {@link ActionMenuAction}[]\r\n   */\r\n  items: ActionMenuAction[];\r\n\r\n  /** Whether the menu is disabled\r\n   * @default false\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /** Callback when menu closes */\r\n  onClose?: () => void;\r\n\r\n  /** Test ID for the trigger component */\r\n  triggerTestId?: string;\r\n\r\n  /** Test ID for the menu */\r\n  menuTestId?: string;\r\n\r\n  /** Callback when a menu item is selected */\r\n  onSelectionChange?: (key: string) => void;\r\n\r\n  /** The key of the selected item */\r\n  selectedKey?: string;\r\n\r\n  /** The keys of the disabled items */\r\n  disabledKeys?: string[];\r\n}\r\n\r\n/**\r\n * A component that displays either a popover menu or an action menu\r\n * depending on the screen size when the menu trigger is pressed.\r\n *\r\n * API:\r\n *  - {@link MenuProps}\r\n */\r\nexport function MenuTrigger({\r\n  renderTrigger,\r\n  size = 24,\r\n  title,\r\n  items,\r\n  disabled,\r\n  onClose,\r\n  triggerTestId = \"MenuTrigger-Trigger\",\r\n  menuTestId,\r\n  onSelectionChange,\r\n  selectedKey,\r\n  disabledKeys,\r\n}: MenuProps) {\r\n  const menuItems = useMemo(\r\n    () => items.map((item) => ({ ...item, id: item.key })),\r\n    [items]\r\n  );\r\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\r\n\r\n  const menuState = useMenuTriggerState({});\r\n  const { isOpen, setOpen: setIsOpen } = menuState;\r\n  const triggerRef = useRef(null);\r\n  const { menuTriggerProps, menuProps } = useMenuTrigger<ActionMenuAction>(\r\n    {},\r\n    menuState,\r\n    triggerRef\r\n  );\r\n\r\n  function handleSingleSelectionChange(key: Selection) {\r\n    const nextKey = Array.from(key)[0];\r\n    if (nextKey) {\r\n      onSelectionChange?.(nextKey as string);\r\n    }\r\n  }\r\n\r\n  const defaultTrigger = (\r\n    <AriaButton\r\n      {...menuTriggerProps}\r\n      data-testid={triggerTestId}\r\n      isDisabled={disabled}\r\n      className={csx(\"proton-MenuTrigger__button\")}\r\n      ref={triggerRef}\r\n    >\r\n      <EllipsisIcon size={size} />\r\n    </AriaButton>\r\n  );\r\n\r\n  const TriggerComponent = renderTrigger\r\n    ? renderTrigger({\r\n        isOpen,\r\n        setIsOpen,\r\n        disabled,\r\n        triggerRef,\r\n      })\r\n    : defaultTrigger;\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      if (isOpen) {\r\n        onClose?.();\r\n      }\r\n    };\r\n  }, [isOpen, onClose]);\r\n\r\n  return (\r\n    <>\r\n      {TriggerComponent}\r\n\r\n      {isOpen && isMobile && (\r\n        <ActionMenu\r\n          actions={menuItems}\r\n          title={title}\r\n          isOpen={isOpen}\r\n          onClose={() => setIsOpen(false)}\r\n          showCancel\r\n          data-testid={menuTestId}\r\n          selectionMode=\"single\"\r\n          onSelectionChange={handleSingleSelectionChange}\r\n          selectedKeys={selectedKey ? [selectedKey] : undefined}\r\n          disabledKeys={disabledKeys}\r\n        />\r\n      )}\r\n\r\n      {isOpen && !isMobile && (\r\n        <PopoverMenu\r\n          isOpen={isOpen}\r\n          setIsOpen={setIsOpen}\r\n          items={menuItems}\r\n          selectedKey={selectedKey}\r\n          disabledKeys={disabledKeys}\r\n          title={title}\r\n          onSelectionChange={handleSingleSelectionChange}\r\n          triggerRef={triggerRef}\r\n        />\r\n      )}\r\n    </>\r\n  );\r\n}\r\n\r\nconst EllipsisIcon = ({ size }: { size: number }) => (\r\n  <svg viewBox=\"0 0 24 24\" width={size} height={size}>\r\n    <path\r\n      fill=\"currentColor\"\r\n      d=\"M4 14c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\r\n    />\r\n  </svg>\r\n);\r\n"],"names":["MenuTrigger","renderTrigger","size","title","items","disabled","onClose","triggerTestId","menuTestId","onSelectionChange","selectedKey","disabledKeys","menuItems","useMemo","item","isMobile","useBreakpoint","BREAKPOINTS","menuState","useMenuTriggerState","isOpen","setIsOpen","triggerRef","useRef","menuTriggerProps","menuProps","useMenuTrigger","handleSingleSelectionChange","key","nextKey","defaultTrigger","jsx","AriaButton","csx","EllipsisIcon","TriggerComponent","useEffect","jsxs","Fragment","ActionMenu","PopoverMenu"],"mappings":"woBA0EO,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,EAAYC,EAAA,QAChB,IAAMT,EAAM,IAAKU,IAAU,CAAE,GAAGA,EAAM,GAAIA,EAAK,GAAA,EAAM,EACrD,CAACV,CAAK,CAAA,EAEFW,EAAWC,EAAAA,cAAcC,EAAA,YAAY,KAAK,EAE1CC,EAAYC,sBAAoB,CAAA,CAAE,EAClC,CAAE,OAAAC,EAAQ,QAASC,CAAA,EAAcH,EACjCI,EAAaC,SAAO,IAAI,EACxB,CAAE,iBAAAC,EAAkB,UAAAC,CAAA,EAAcC,EAAA,eACtC,CAAC,EACDR,EACAI,CAAA,EAGF,SAASK,EAA4BC,EAAgB,CACnD,MAAMC,EAAU,MAAM,KAAKD,CAAG,EAAE,CAAC,EAC7BC,IACFpB,GAAA,MAAAA,EAAoBoB,GAExB,CAEA,MAAMC,EACJC,EAAA,kBAAA,IAACC,EAAA,OAAA,CACE,GAAGR,EACJ,cAAajB,EACb,WAAYF,EACZ,UAAW4B,MAAI,4BAA4B,EAC3C,IAAKX,EAEL,SAAAS,EAAA,kBAAA,IAACG,GAAa,KAAAhC,CAAY,CAAA,CAAA,CAAA,EAIxBiC,EAAmBlC,EACrBA,EAAc,CACZ,OAAAmB,EACA,UAAAC,EACA,SAAAhB,EACA,WAAAiB,CACD,CAAA,EACDQ,EAEJM,OAAAA,EAAAA,UAAU,IACD,IAAM,CACPhB,IACQd,GAAA,MAAAA,IACZ,EAED,CAACc,EAAQd,CAAO,CAAC,EAIf+B,EAAA,kBAAA,KAAAC,6BAAA,CAAA,SAAA,CAAAH,EAEAf,GAAUL,GACTgB,EAAA,kBAAA,IAACQ,EAAA,WAAA,CACC,QAAS3B,EACT,MAAAT,EACA,OAAAiB,EACA,QAAS,IAAMC,EAAU,EAAK,EAC9B,WAAU,GACV,cAAab,EACb,cAAc,SACd,kBAAmBmB,EACnB,aAAcjB,EAAc,CAACA,CAAW,EAAI,OAC5C,aAAAC,CAAA,CACF,EAGDS,GAAU,CAACL,GACVgB,EAAA,kBAAA,IAACS,EAAA,YAAA,CACC,OAAApB,EACA,UAAAC,EACA,MAAOT,EACP,YAAAF,EACA,aAAAC,EACA,MAAAR,EACA,kBAAmBwB,EACnB,WAAAL,CAAA,CACF,CAEJ,CAAA,CAAA,CAEJ,CAEA,MAAMY,EAAe,CAAC,CAAE,KAAAhC,CACtB,IAAA6B,EAAA,kBAAA,IAAC,MAAI,CAAA,QAAQ,YAAY,MAAO7B,EAAM,OAAQA,EAC5C,SAAA6B,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,mJAAA,CACJ,EACF"}
+{"version":3,"file":"MenuTrigger.cjs.js","sources":["../../../src/components/Menu/MenuTrigger.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { ReactNode, useMemo, useRef, useState } from \"react\";\r\nimport { BREAKPOINTS } from \"../../constants\";\r\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\r\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\r\nimport { PopoverMenu } from \"./PopoverMenu\";\r\nimport \"./MenuTrigger.css\";\r\nimport \"./Menu.css\";\r\n\r\nexport interface MenuTriggerProps {\r\n  disabled?: boolean;\r\n  isOpen?: boolean;\r\n  setIsOpen: (isOpen: boolean) => void;\r\n}\r\n\r\nexport interface MenuProps {\r\n  /** Custom trigger component. If not provided, defaults to ellipsis icon.\r\n   * - @prop triggerProps {@link TriggerProps}\r\n   */\r\n  renderTrigger?: (triggerProps: MenuTriggerProps) => ReactNode;\r\n\r\n  /** Size of the trigger icon\r\n   * @default 24\r\n   */\r\n  size?: number;\r\n\r\n  /** Title of the parent menu */\r\n  title?: string;\r\n\r\n  /** Array of menu actions/items to display\r\n   * - type {@link ActionMenuAction}[]\r\n   */\r\n  items: ActionMenuAction[];\r\n\r\n  /** Whether the menu is disabled\r\n   * @default false\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /** Callback when the menu is closed */\r\n  onClose?: () => void;\r\n\r\n  /** Test ID for the trigger button */\r\n  triggerTestId?: string;\r\n\r\n  /** Test ID for the menu */\r\n  menuTestId?: string;\r\n\r\n  /** Callback when the selection changes */\r\n  onSelectionChange?: (key: string) => void;\r\n\r\n  /** The key of the selected item */\r\n  selectedKey?: string;\r\n\r\n  /** The keys of the disabled items */\r\n  disabledKeys?: string[];\r\n}\r\n\r\n/**\r\n * An uncontrolled component that displays either a popover menu or an action menu\r\n * depending on the screen size when the menu trigger is pressed.\r\n *\r\n * API:\r\n *  - {@link MenuProps}\r\n */\r\nexport function MenuTrigger({\r\n  renderTrigger,\r\n  size = 24,\r\n  title,\r\n  items,\r\n  disabled,\r\n  onClose,\r\n  triggerTestId = \"MenuTrigger-Trigger\",\r\n  menuTestId,\r\n  onSelectionChange,\r\n  selectedKey,\r\n  disabledKeys,\r\n}: MenuProps) {\r\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\r\n  const [isOpen, setIsOpen] = useState(false);\r\n  const triggerRef = useRef<HTMLButtonElement>(null);\r\n\r\n  const menuItems = useMemo(\r\n    () => items.map((item) => ({ ...item, id: item.key })),\r\n    [items]\r\n  );\r\n\r\n  const handleSelectionChange = (key: string) => {\r\n    onSelectionChange?.(key);\r\n    setIsOpen(false);\r\n  };\r\n\r\n  const triggerButton = renderTrigger ? (\r\n    renderTrigger({\r\n      isOpen,\r\n      disabled,\r\n      setIsOpen,\r\n    })\r\n  ) : (\r\n    <button\r\n      data-testid={triggerTestId}\r\n      disabled={disabled}\r\n      className=\"proton-MenuTrigger__button\"\r\n      ref={triggerRef}\r\n      onClick={() => setIsOpen(!isOpen)}\r\n      type=\"button\"\r\n    >\r\n      <EllipsisIcon size={size} />\r\n    </button>\r\n  );\r\n\r\n  if (isMobile) {\r\n    return (\r\n      <>\r\n        {triggerButton}\r\n        {isOpen && (\r\n          <ActionMenu\r\n            actions={menuItems}\r\n            title={title}\r\n            isOpen={isOpen}\r\n            onClose={() => {\r\n              setIsOpen(false);\r\n              onClose?.();\r\n            }}\r\n            showCancel\r\n            data-testid={menuTestId}\r\n            selectionMode=\"single\"\r\n            onSelectionChange={(keys) => {\r\n              const nextKey = Array.from(keys)[0];\r\n              if (nextKey) handleSelectionChange(nextKey as string);\r\n            }}\r\n            selectedKeys={selectedKey ? [selectedKey] : undefined}\r\n            disabledKeys={disabledKeys}\r\n          />\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <PopoverMenu\r\n      trigger={triggerButton}\r\n      items={menuItems}\r\n      isOpen={isOpen}\r\n      onOpenChange={setIsOpen}\r\n      selectedKey={selectedKey}\r\n      onSelectionChange={handleSelectionChange}\r\n      disabledKeys={disabledKeys}\r\n      title={title}\r\n    />\r\n  );\r\n}\r\n\r\nconst EllipsisIcon = ({ size }: { size: number }) => (\r\n  <svg viewBox=\"0 0 24 24\" width={size} height={size}>\r\n    <path\r\n      fill=\"currentColor\"\r\n      d=\"M4 14c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\r\n    />\r\n  </svg>\r\n);\r\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":"qZAkEO,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,SAEL,SAAAW,EAAA,kBAAA,IAACC,GAAa,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,CAEA,MAAMwB,EAAe,CAAC,CAAE,KAAAzB,CACtB,IAAAwB,EAAA,kBAAA,IAAC,MAAI,CAAA,QAAQ,YAAY,MAAOxB,EAAM,OAAQA,EAC5C,SAAAwB,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,mJAAA,CACJ,EACF"}

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

@@ -1,90 +1,82 @@
-import { j as e } from "../../node_modules/react/jsx-runtime.es.js";
-import { useMemo as A, useRef as B, useEffect as E } from "react";
-import { Button as I } from "../../node_modules/react-aria-components/dist/Button.es.js";
+import { j as t } from "../../node_modules/react/jsx-runtime.es.js";
+import { useState as A, useRef as B, useMemo as I } from "react";
 import { useBreakpoint as O } from "../../hooks/useBreakpoint.es.js";
-import { ActionMenu as P } from "../ActionMenu/ActionMenu.es.js";
+import { ActionMenu as R } from "../ActionMenu/ActionMenu.es.js";
+import { PopoverMenu as T } from "./PopoverMenu.es.js";
 /* empty css                   */
-import { useMenuTrigger as R } from "../../node_modules/@react-aria/menu/dist/useMenuTrigger.es.js";
-import { useMenuTriggerState as S } from "../../node_modules/@react-stately/menu/dist/useMenuTriggerState.es.js";
-import { PopoverMenu as w } from "./PopoverMenu.es.js";
-import { csx as k } from "../../utils/string.es.js";
-import { BREAKPOINTS as z } from "../../constants/breakpoint.es.js";
-function V({
-  renderTrigger: t,
-  size: j = 24,
-  title: p,
+/* empty css            */
+import { BREAKPOINTS as k } from "../../constants/breakpoint.es.js";
+function _({
+  renderTrigger: e,
+  size: M = 24,
+  title: c,
   items: u,
-  disabled: f,
-  onClose: o,
-  triggerTestId: T = "MenuTrigger-Trigger",
-  menuTestId: $,
-  onSelectionChange: n,
-  selectedKey: c,
+  disabled: p,
+  onClose: n,
+  triggerTestId: h = "MenuTrigger-Trigger",
+  menuTestId: j,
+  onSelectionChange: i,
+  selectedKey: m,
   disabledKeys: a
 }) {
-  const g = A(
-    () => u.map((i) => ({ ...i, id: i.key })),
+  const d = O(k.SMALL), [o, s] = A(!1), v = B(null), f = I(
+    () => u.map((r) => ({ ...r, id: r.key })),
     [u]
-  ), d = O(z.SMALL), x = S({}), { isOpen: r, setOpen: m } = x, s = B(null), { menuTriggerProps: h, menuProps: N } = R(
-    {},
-    x,
-    s
-  );
-  function M(i) {
-    const l = Array.from(i)[0];
-    l && (n == null || n(l));
-  }
-  const b = /* @__PURE__ */ e.jsx(
-    I,
+  ), g = (r) => {
+    i == null || i(r), s(!1);
+  }, l = e ? e({
+    isOpen: o,
+    disabled: p,
+    setIsOpen: s
+  }) : /* @__PURE__ */ t.jsx(
+    "button",
     {
-      ...h,
-      "data-testid": T,
-      isDisabled: f,
-      className: k("proton-MenuTrigger__button"),
-      ref: s,
-      children: /* @__PURE__ */ e.jsx(L, { size: j })
+      "data-testid": h,
+      disabled: p,
+      className: "proton-MenuTrigger__button",
+      ref: v,
+      onClick: () => s(!o),
+      type: "button",
+      children: /* @__PURE__ */ t.jsx(w, { size: M })
     }
-  ), v = t ? t({
-    isOpen: r,
-    setIsOpen: m,
-    disabled: f,
-    triggerRef: s
-  }) : b;
-  return E(() => () => {
-    r && (o == null || o());
-  }, [r, o]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    v,
-    r && d && /* @__PURE__ */ e.jsx(
-      P,
+  );
+  return d ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    l,
+    o && /* @__PURE__ */ t.jsx(
+      R,
       {
-        actions: g,
-        title: p,
-        isOpen: r,
-        onClose: () => m(!1),
+        actions: f,
+        title: c,
+        isOpen: o,
+        onClose: () => {
+          s(!1), n == null || n();
+        },
         showCancel: !0,
-        "data-testid": $,
+        "data-testid": j,
         selectionMode: "single",
-        onSelectionChange: M,
-        selectedKeys: c ? [c] : void 0,
+        onSelectionChange: (r) => {
+          const x = Array.from(r)[0];
+          x && g(x);
+        },
+        selectedKeys: m ? [m] : void 0,
         disabledKeys: a
       }
-    ),
-    r && !d && /* @__PURE__ */ e.jsx(
-      w,
-      {
-        isOpen: r,
-        setIsOpen: m,
-        items: g,
-        selectedKey: c,
-        disabledKeys: a,
-        title: p,
-        onSelectionChange: M,
-        triggerRef: s
-      }
     )
-  ] });
+  ] }) : /* @__PURE__ */ t.jsx(
+    T,
+    {
+      trigger: l,
+      items: f,
+      isOpen: o,
+      onOpenChange: s,
+      selectedKey: m,
+      onSelectionChange: g,
+      disabledKeys: a,
+      title: c
+    }
+  );
 }
-const L = ({ size: t }) => /* @__PURE__ */ e.jsx("svg", { viewBox: "0 0 24 24", width: t, height: t, children: /* @__PURE__ */ e.jsx(
+const w = ({ size: e }) => /* @__PURE__ */ t.jsx("svg", { viewBox: "0 0 24 24", width: e, height: e, children: /* @__PURE__ */ t.jsx(
   "path",
   {
     fill: "currentColor",
@@ -92,6 +84,6 @@ const L = ({ size: t }) => /* @__PURE__ */ e.jsx("svg", { viewBox: "0 0 24 24",
   }
 ) });
 export {
-  V as MenuTrigger
+  _ as MenuTrigger
 };
 //# sourceMappingURL=MenuTrigger.es.js.map

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\";\r\n\r\nimport { ReactNode, useEffect, useMemo, useRef } from \"react\";\r\n\r\nimport { Button as AriaButton, Selection } from \"react-aria-components\";\r\nimport { BREAKPOINTS } from \"../../constants\";\r\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\r\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\r\n\r\nimport { csx } from \"../../utils\";\r\n\r\nimport \"./MenuTrigger.css\";\r\n\r\nimport { useMenuTrigger } from \"@react-aria/menu\";\r\nimport { useMenuTriggerState } from \"@react-stately/menu\";\r\nimport { PopoverMenu } from \"./PopoverMenu\";\r\n\r\ninterface TriggerProps {\r\n  disabled?: boolean;\r\n  isOpen?: boolean;\r\n  setIsOpen?: (isOpen: boolean) => void;\r\n  triggerRef: React.RefObject<HTMLButtonElement>;\r\n}\r\n\r\nexport interface MenuProps {\r\n  /** Custom trigger component. If not provided, defaults to ellipsis icon.\r\n   * - @prop triggerProps {@link TriggerProps}\r\n   */\r\n  renderTrigger?: (triggerProps: TriggerProps) => ReactNode;\r\n\r\n  /** Size of the trigger icon\r\n   * @default 24\r\n   */\r\n  size?: number;\r\n\r\n  /** Title of the parent menu */\r\n  title?: string;\r\n\r\n  /** Array of menu actions/items to display\r\n   * - type {@link ActionMenuAction}[]\r\n   */\r\n  items: ActionMenuAction[];\r\n\r\n  /** Whether the menu is disabled\r\n   * @default false\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /** Callback when menu closes */\r\n  onClose?: () => void;\r\n\r\n  /** Test ID for the trigger component */\r\n  triggerTestId?: string;\r\n\r\n  /** Test ID for the menu */\r\n  menuTestId?: string;\r\n\r\n  /** Callback when a menu item is selected */\r\n  onSelectionChange?: (key: string) => void;\r\n\r\n  /** The key of the selected item */\r\n  selectedKey?: string;\r\n\r\n  /** The keys of the disabled items */\r\n  disabledKeys?: string[];\r\n}\r\n\r\n/**\r\n * A component that displays either a popover menu or an action menu\r\n * depending on the screen size when the menu trigger is pressed.\r\n *\r\n * API:\r\n *  - {@link MenuProps}\r\n */\r\nexport function MenuTrigger({\r\n  renderTrigger,\r\n  size = 24,\r\n  title,\r\n  items,\r\n  disabled,\r\n  onClose,\r\n  triggerTestId = \"MenuTrigger-Trigger\",\r\n  menuTestId,\r\n  onSelectionChange,\r\n  selectedKey,\r\n  disabledKeys,\r\n}: MenuProps) {\r\n  const menuItems = useMemo(\r\n    () => items.map((item) => ({ ...item, id: item.key })),\r\n    [items]\r\n  );\r\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\r\n\r\n  const menuState = useMenuTriggerState({});\r\n  const { isOpen, setOpen: setIsOpen } = menuState;\r\n  const triggerRef = useRef(null);\r\n  const { menuTriggerProps, menuProps } = useMenuTrigger<ActionMenuAction>(\r\n    {},\r\n    menuState,\r\n    triggerRef\r\n  );\r\n\r\n  function handleSingleSelectionChange(key: Selection) {\r\n    const nextKey = Array.from(key)[0];\r\n    if (nextKey) {\r\n      onSelectionChange?.(nextKey as string);\r\n    }\r\n  }\r\n\r\n  const defaultTrigger = (\r\n    <AriaButton\r\n      {...menuTriggerProps}\r\n      data-testid={triggerTestId}\r\n      isDisabled={disabled}\r\n      className={csx(\"proton-MenuTrigger__button\")}\r\n      ref={triggerRef}\r\n    >\r\n      <EllipsisIcon size={size} />\r\n    </AriaButton>\r\n  );\r\n\r\n  const TriggerComponent = renderTrigger\r\n    ? renderTrigger({\r\n        isOpen,\r\n        setIsOpen,\r\n        disabled,\r\n        triggerRef,\r\n      })\r\n    : defaultTrigger;\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      if (isOpen) {\r\n        onClose?.();\r\n      }\r\n    };\r\n  }, [isOpen, onClose]);\r\n\r\n  return (\r\n    <>\r\n      {TriggerComponent}\r\n\r\n      {isOpen && isMobile && (\r\n        <ActionMenu\r\n          actions={menuItems}\r\n          title={title}\r\n          isOpen={isOpen}\r\n          onClose={() => setIsOpen(false)}\r\n          showCancel\r\n          data-testid={menuTestId}\r\n          selectionMode=\"single\"\r\n          onSelectionChange={handleSingleSelectionChange}\r\n          selectedKeys={selectedKey ? [selectedKey] : undefined}\r\n          disabledKeys={disabledKeys}\r\n        />\r\n      )}\r\n\r\n      {isOpen && !isMobile && (\r\n        <PopoverMenu\r\n          isOpen={isOpen}\r\n          setIsOpen={setIsOpen}\r\n          items={menuItems}\r\n          selectedKey={selectedKey}\r\n          disabledKeys={disabledKeys}\r\n          title={title}\r\n          onSelectionChange={handleSingleSelectionChange}\r\n          triggerRef={triggerRef}\r\n        />\r\n      )}\r\n    </>\r\n  );\r\n}\r\n\r\nconst EllipsisIcon = ({ size }: { size: number }) => (\r\n  <svg viewBox=\"0 0 24 24\" width={size} height={size}>\r\n    <path\r\n      fill=\"currentColor\"\r\n      d=\"M4 14c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\r\n    />\r\n  </svg>\r\n);\r\n"],"names":["MenuTrigger","renderTrigger","size","title","items","disabled","onClose","triggerTestId","menuTestId","onSelectionChange","selectedKey","disabledKeys","menuItems","useMemo","item","isMobile","useBreakpoint","BREAKPOINTS","menuState","useMenuTriggerState","isOpen","setIsOpen","triggerRef","useRef","menuTriggerProps","menuProps","useMenuTrigger","handleSingleSelectionChange","key","nextKey","defaultTrigger","jsx","AriaButton","csx","EllipsisIcon","TriggerComponent","useEffect","jsxs","Fragment","ActionMenu","PopoverMenu"],"mappings":";;;;;;;;;;;AA0EO,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,IAAYC;AAAA,IAChB,MAAMT,EAAM,IAAI,CAACU,OAAU,EAAE,GAAGA,GAAM,IAAIA,EAAK,IAAA,EAAM;AAAA,IACrD,CAACV,CAAK;AAAA,EAAA,GAEFW,IAAWC,EAAcC,EAAY,KAAK,GAE1CC,IAAYC,EAAoB,CAAA,CAAE,GAClC,EAAE,QAAAC,GAAQ,SAASC,EAAA,IAAcH,GACjCI,IAAaC,EAAO,IAAI,GACxB,EAAE,kBAAAC,GAAkB,WAAAC,EAAA,IAAcC;AAAAA,IACtC,CAAC;AAAA,IACDR;AAAA,IACAI;AAAA,EAAA;AAGF,WAASK,EAA4BC,GAAgB;AACnD,UAAMC,IAAU,MAAM,KAAKD,CAAG,EAAE,CAAC;AACjC,IAAIC,MACFpB,KAAA,QAAAA,EAAoBoB;AAAA,EAExB;AAEA,QAAMC,IACJC,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACE,GAAGR;AAAA,MACJ,eAAajB;AAAA,MACb,YAAYF;AAAA,MACZ,WAAW4B,EAAI,4BAA4B;AAAA,MAC3C,KAAKX;AAAA,MAEL,UAAAS,gBAAAA,EAAA,IAACG,KAAa,MAAAhC,EAAY,CAAA;AAAA,IAAA;AAAA,EAAA,GAIxBiC,IAAmBlC,IACrBA,EAAc;AAAA,IACZ,QAAAmB;AAAA,IACA,WAAAC;AAAA,IACA,UAAAhB;AAAA,IACA,YAAAiB;AAAA,EACD,CAAA,IACDQ;AAEJ,SAAAM,EAAU,MACD,MAAM;AACX,IAAIhB,MACQd,KAAA,QAAAA;AAAA,EACZ,GAED,CAACc,GAAQd,CAAO,CAAC,GAIf+B,gBAAAA,EAAA,KAAAC,YAAA,EAAA,UAAA;AAAA,IAAAH;AAAA,IAEAf,KAAUL,KACTgB,gBAAAA,EAAA;AAAA,MAACQ;AAAA,MAAA;AAAA,QACC,SAAS3B;AAAA,QACT,OAAAT;AAAA,QACA,QAAAiB;AAAA,QACA,SAAS,MAAMC,EAAU,EAAK;AAAA,QAC9B,YAAU;AAAA,QACV,eAAab;AAAA,QACb,eAAc;AAAA,QACd,mBAAmBmB;AAAA,QACnB,cAAcjB,IAAc,CAACA,CAAW,IAAI;AAAA,QAC5C,cAAAC;AAAA,MAAA;AAAA,IACF;AAAA,IAGDS,KAAU,CAACL,KACVgB,gBAAAA,EAAA;AAAA,MAACS;AAAA,MAAA;AAAA,QACC,QAAApB;AAAA,QACA,WAAAC;AAAA,QACA,OAAOT;AAAA,QACP,aAAAF;AAAA,QACA,cAAAC;AAAA,QACA,OAAAR;AAAA,QACA,mBAAmBwB;AAAA,QACnB,YAAAL;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,EAAA,CAAA;AAEJ;AAEA,MAAMY,IAAe,CAAC,EAAE,MAAAhC,EACtB,MAAA6B,gBAAAA,EAAA,IAAC,OAAI,EAAA,SAAQ,aAAY,OAAO7B,GAAM,QAAQA,GAC5C,UAAA6B,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,GAAE;AAAA,EAAA;AACJ,GACF;"}
+{"version":3,"file":"MenuTrigger.es.js","sources":["../../../src/components/Menu/MenuTrigger.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { ReactNode, useMemo, useRef, useState } from \"react\";\r\nimport { BREAKPOINTS } from \"../../constants\";\r\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\r\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\r\nimport { PopoverMenu } from \"./PopoverMenu\";\r\nimport \"./MenuTrigger.css\";\r\nimport \"./Menu.css\";\r\n\r\nexport interface MenuTriggerProps {\r\n  disabled?: boolean;\r\n  isOpen?: boolean;\r\n  setIsOpen: (isOpen: boolean) => void;\r\n}\r\n\r\nexport interface MenuProps {\r\n  /** Custom trigger component. If not provided, defaults to ellipsis icon.\r\n   * - @prop triggerProps {@link TriggerProps}\r\n   */\r\n  renderTrigger?: (triggerProps: MenuTriggerProps) => ReactNode;\r\n\r\n  /** Size of the trigger icon\r\n   * @default 24\r\n   */\r\n  size?: number;\r\n\r\n  /** Title of the parent menu */\r\n  title?: string;\r\n\r\n  /** Array of menu actions/items to display\r\n   * - type {@link ActionMenuAction}[]\r\n   */\r\n  items: ActionMenuAction[];\r\n\r\n  /** Whether the menu is disabled\r\n   * @default false\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /** Callback when the menu is closed */\r\n  onClose?: () => void;\r\n\r\n  /** Test ID for the trigger button */\r\n  triggerTestId?: string;\r\n\r\n  /** Test ID for the menu */\r\n  menuTestId?: string;\r\n\r\n  /** Callback when the selection changes */\r\n  onSelectionChange?: (key: string) => void;\r\n\r\n  /** The key of the selected item */\r\n  selectedKey?: string;\r\n\r\n  /** The keys of the disabled items */\r\n  disabledKeys?: string[];\r\n}\r\n\r\n/**\r\n * An uncontrolled component that displays either a popover menu or an action menu\r\n * depending on the screen size when the menu trigger is pressed.\r\n *\r\n * API:\r\n *  - {@link MenuProps}\r\n */\r\nexport function MenuTrigger({\r\n  renderTrigger,\r\n  size = 24,\r\n  title,\r\n  items,\r\n  disabled,\r\n  onClose,\r\n  triggerTestId = \"MenuTrigger-Trigger\",\r\n  menuTestId,\r\n  onSelectionChange,\r\n  selectedKey,\r\n  disabledKeys,\r\n}: MenuProps) {\r\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\r\n  const [isOpen, setIsOpen] = useState(false);\r\n  const triggerRef = useRef<HTMLButtonElement>(null);\r\n\r\n  const menuItems = useMemo(\r\n    () => items.map((item) => ({ ...item, id: item.key })),\r\n    [items]\r\n  );\r\n\r\n  const handleSelectionChange = (key: string) => {\r\n    onSelectionChange?.(key);\r\n    setIsOpen(false);\r\n  };\r\n\r\n  const triggerButton = renderTrigger ? (\r\n    renderTrigger({\r\n      isOpen,\r\n      disabled,\r\n      setIsOpen,\r\n    })\r\n  ) : (\r\n    <button\r\n      data-testid={triggerTestId}\r\n      disabled={disabled}\r\n      className=\"proton-MenuTrigger__button\"\r\n      ref={triggerRef}\r\n      onClick={() => setIsOpen(!isOpen)}\r\n      type=\"button\"\r\n    >\r\n      <EllipsisIcon size={size} />\r\n    </button>\r\n  );\r\n\r\n  if (isMobile) {\r\n    return (\r\n      <>\r\n        {triggerButton}\r\n        {isOpen && (\r\n          <ActionMenu\r\n            actions={menuItems}\r\n            title={title}\r\n            isOpen={isOpen}\r\n            onClose={() => {\r\n              setIsOpen(false);\r\n              onClose?.();\r\n            }}\r\n            showCancel\r\n            data-testid={menuTestId}\r\n            selectionMode=\"single\"\r\n            onSelectionChange={(keys) => {\r\n              const nextKey = Array.from(keys)[0];\r\n              if (nextKey) handleSelectionChange(nextKey as string);\r\n            }}\r\n            selectedKeys={selectedKey ? [selectedKey] : undefined}\r\n            disabledKeys={disabledKeys}\r\n          />\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <PopoverMenu\r\n      trigger={triggerButton}\r\n      items={menuItems}\r\n      isOpen={isOpen}\r\n      onOpenChange={setIsOpen}\r\n      selectedKey={selectedKey}\r\n      onSelectionChange={handleSelectionChange}\r\n      disabledKeys={disabledKeys}\r\n      title={title}\r\n    />\r\n  );\r\n}\r\n\r\nconst EllipsisIcon = ({ size }: { size: number }) => (\r\n  <svg viewBox=\"0 0 24 24\" width={size} height={size}>\r\n    <path\r\n      fill=\"currentColor\"\r\n      d=\"M4 14c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\r\n    />\r\n  </svg>\r\n);\r\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":";;;;;;;;AAkEO,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,MAEL,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;AAEA,MAAMwB,IAAe,CAAC,EAAE,MAAAzB,EACtB,MAAAwB,gBAAAA,EAAA,IAAC,OAAI,EAAA,SAAQ,aAAY,OAAOxB,GAAM,QAAQA,GAC5C,UAAAwB,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,GAAE;AAAA,EAAA;AACJ,GACF;"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../node_modules/react/jsx-runtime.cjs.js"),R=require("../../node_modules/react-aria-components/dist/Header.cjs.js"),x=require("../../node_modules/react-aria-components/dist/Menu.cjs.js"),d=require("../../node_modules/react-aria-components/dist/Popover.cjs.js"),p=require("../../node_modules/react-aria-components/dist/Text.cjs.js"),E=require("../ThemeProvider.cjs.js"),c=require("../../utils/string.cjs.js");function M({items:n,isOpen:e,setIsOpen:r,onSelectionChange:m,selectedKey:i,disabledKeys:t,title:u,triggerRef:l}){const{className:o,style:a}=E.useTheme();return s.jsxRuntimeExports.jsx(d.Popover,{className:c.csx("proton-Popover",o),style:a,triggerRef:l,isOpen:e,onOpenChange:r,children:s.jsxRuntimeExports.jsx(x.Menu,{items:n,className:c.csx("proton-ListBox","proton-MenuTrigger__menu"),selectionMode:"single",onSelectionChange:m,selectedKeys:new Set([i]),disabledKeys:t,onClose:()=>r(!1),autoFocus:!0,children:s.jsxRuntimeExports.jsxs(x.MenuSection,{children:[u&&s.jsxRuntimeExports.jsx(R.Header,{className:"proton-MenuTrigger__menu-header",children:u}),n.map(g=>h({item:g,className:o,style:a,disabledKeys:t,onClose:()=>r(!1)}))]})})})}function h(n){var l;const{item:e,className:r,style:m,disabledKeys:i,onClose:t}=n;let u=((l=e.label)==null?void 0:l.toString())||"";return e.children?s.jsxRuntimeExports.jsxs(x.SubmenuTrigger,{children:[s.jsxRuntimeExports.jsx(j,{textValue:u,children:e.label}),s.jsxRuntimeExports.jsx(d.Popover,{className:c.csx("proton-Popover",r),style:m,children:s.jsxRuntimeExports.jsx(x.Menu,{items:e.children,className:"proton-ListBox proton-MenuTrigger__menu",disabledKeys:i,onClose:t,children:o=>h({...n,item:o})})})]},e.key):s.jsxRuntimeExports.jsxs(j,{textValue:u,onAction:()=>{var o;(o=e.onAction)==null||o.call(e,e.key),t==null||t()},isDisabled:i==null?void 0:i.includes(e.key),id:e.key,children:[s.jsxRuntimeExports.jsx(p.Text,{slot:"label",children:e.label}),s.jsxRuntimeExports.jsx(p.Text,{slot:"description",children:e.description})]},e.key)}function j(n){return s.jsxRuntimeExports.jsx(x.MenuItem,{...n,className:({isFocused:e,isOpen:r})=>c.csx("proton-ListBox__item proton-MenuTrigger__menu-item",e&&"focused",r&&"open"),children:({hasSubmenu:e})=>s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[n.children,e&&s.jsxRuntimeExports.jsx("svg",{className:"proton-MenuTrigger__chevron",viewBox:"0 0 256 256",children:s.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17"})})]})})}exports.PopoverMenu=M;
+"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");function b({trigger:p,items:j,isOpen:M,onOpenChange:n,selectedKey:_,onSelectionChange:l,disabledKeys:g,title:c}){const{className:x,style:m}=R.useTheme();function a(d){const{item:e,className:h,style:y,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("svg",{className:"proton-MenuTrigger__chevron",viewBox:"0 0 256 256",width:16,height:12,children:r.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17"})})]}),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:h,style:y,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:M,onOpenChange:n,children:[r.jsxRuntimeExports.jsx(s.DropdownMenu.Trigger,{asChild:!0,children:p}),r.jsxRuntimeExports.jsx(s.DropdownMenu.Portal,{children:r.jsxRuntimeExports.jsxs(s.DropdownMenu.Content,{className:u.csx("proton-Menu","proton-MenuTrigger__menu",x),style:m,children:[c&&r.jsxRuntimeExports.jsx(s.DropdownMenu.Label,{className:"proton-MenuTrigger__menu-header",children:c}),j.map(d=>a({item:d,className:x,style:m,disabledKeys:g,onClose:()=>n==null?void 0:n(!1)}))]})})]})}exports.PopoverMenu=b;
 //# 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 {\r\n  Menu as AriaMenu,\r\n  Header as AriaMenuHeader,\r\n  MenuItem as AriaMenuItem,\r\n  MenuItemProps as AriaMenuItemProps,\r\n  Popover as AriaPopover,\r\n  SubmenuTrigger as AriaSubmenuTrigger,\r\n  MenuSection,\r\n  Selection,\r\n  Text,\r\n} from \"react-aria-components\";\r\n\r\nimport { csx } from \"../../utils\";\r\nimport { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\n\r\ninterface PopoverMenuProps {\r\n  /** The keys of the disabled items */\r\n  disabledKeys?: string[];\r\n\r\n  /** Whether the menu is open */\r\n  isOpen: boolean;\r\n\r\n  /** Array of menu actions/items to display\r\n   * - type {@link ActionMenuAction}[]\r\n   */\r\n  items: ActionMenuAction[];\r\n\r\n  /** Callback when a menu item is selected\r\n   * - @prop keys {@link Selection}\r\n   */\r\n  onSelectionChange?: (keys: Selection) => void;\r\n\r\n  /** Callback when the menu is opened or closed */\r\n  setIsOpen: (isOpen: boolean) => void;\r\n\r\n  /** The key of the selected item */\r\n  selectedKey?: string;\r\n\r\n  /** Title of the parent menu */\r\n  title?: string;\r\n\r\n  /** Reference to the trigger button */\r\n  triggerRef: React.RefObject<HTMLButtonElement>;\r\n}\r\n\r\n/**\r\n * A popover menu component that displays a list of items.\r\n *\r\n * API:\r\n *  - {@link PopoverMenuProps}\r\n */\r\nexport function PopoverMenu({\r\n  items,\r\n  isOpen,\r\n  setIsOpen,\r\n  onSelectionChange,\r\n  selectedKey,\r\n  disabledKeys,\r\n  title,\r\n  triggerRef,\r\n}: PopoverMenuProps) {\r\n  const { className: themeClass, style: themeStyle } = useTheme();\r\n\r\n  return (\r\n    <AriaPopover\r\n      className={csx(\"proton-Popover\", themeClass)}\r\n      style={themeStyle as React.CSSProperties}\r\n      triggerRef={triggerRef}\r\n      isOpen={isOpen}\r\n      onOpenChange={setIsOpen}\r\n    >\r\n      <AriaMenu\r\n        items={items}\r\n        className={csx(\"proton-ListBox\", \"proton-MenuTrigger__menu\")}\r\n        selectionMode=\"single\"\r\n        onSelectionChange={onSelectionChange}\r\n        selectedKeys={new Set([selectedKey])}\r\n        disabledKeys={disabledKeys}\r\n        onClose={() => setIsOpen(false)}\r\n        autoFocus\r\n      >\r\n        <MenuSection>\r\n          {title && (\r\n            <AriaMenuHeader className=\"proton-MenuTrigger__menu-header\">\r\n              {title}\r\n            </AriaMenuHeader>\r\n          )}\r\n\r\n          {items.map((item) => {\r\n            return renderSubmenu({\r\n              item,\r\n              className: themeClass,\r\n              style: themeStyle as React.CSSProperties,\r\n              disabledKeys,\r\n              onClose: () => setIsOpen(false),\r\n            });\r\n          })}\r\n        </MenuSection>\r\n      </AriaMenu>\r\n    </AriaPopover>\r\n  );\r\n}\r\n\r\nfunction renderSubmenu(props: {\r\n  item: ActionMenuAction;\r\n  className: string;\r\n  style: React.CSSProperties;\r\n  disabledKeys?: string[];\r\n  onClose?: () => void;\r\n}) {\r\n  const { item, className, style, disabledKeys, onClose } = props;\r\n  let textValue = item.label?.toString() || \"\";\r\n  if (item.children) {\r\n    return (\r\n      <AriaSubmenuTrigger key={item.key}>\r\n        <MenuItem textValue={textValue}>{item.label}</MenuItem>\r\n        <AriaPopover className={csx(\"proton-Popover\", className)} style={style}>\r\n          <AriaMenu\r\n            items={item.children}\r\n            className=\"proton-ListBox proton-MenuTrigger__menu\"\r\n            disabledKeys={disabledKeys}\r\n            onClose={onClose}\r\n          >\r\n            {(child) =>\r\n              renderSubmenu({\r\n                ...props,\r\n                item: child as ActionMenuAction,\r\n              })\r\n            }\r\n          </AriaMenu>\r\n        </AriaPopover>\r\n      </AriaSubmenuTrigger>\r\n    );\r\n  } else {\r\n    return (\r\n      <MenuItem\r\n        textValue={textValue}\r\n        onAction={() => {\r\n          item.onAction?.(item.key);\r\n          onClose?.();\r\n        }}\r\n        key={item.key}\r\n        isDisabled={disabledKeys?.includes(item.key)}\r\n        id={item.key}\r\n      >\r\n        <Text slot=\"label\">{item.label}</Text>\r\n        <Text slot=\"description\">{item.description}</Text>\r\n      </MenuItem>\r\n    );\r\n  }\r\n}\r\n\r\nfunction MenuItem(props: AriaMenuItemProps) {\r\n  return (\r\n    <AriaMenuItem\r\n      {...props}\r\n      className={({ isFocused, isOpen }) =>\r\n        csx(\r\n          \"proton-ListBox__item proton-MenuTrigger__menu-item\",\r\n          isFocused && \"focused\",\r\n          isOpen && \"open\"\r\n        )\r\n      }\r\n    >\r\n      {({ hasSubmenu }) => (\r\n        <>\r\n          {props.children}\r\n          {hasSubmenu && (\r\n            <svg className=\"proton-MenuTrigger__chevron\" viewBox=\"0 0 256 256\">\r\n              <path\r\n                fill=\"currentColor\"\r\n                d=\"m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17\"\r\n              />\r\n            </svg>\r\n          )}\r\n        </>\r\n      )}\r\n    </AriaMenuItem>\r\n  );\r\n}\r\n"],"names":["PopoverMenu","items","isOpen","setIsOpen","onSelectionChange","selectedKey","disabledKeys","title","triggerRef","themeClass","themeStyle","useTheme","jsx","AriaPopover","csx","AriaMenu","MenuSection","AriaMenuHeader","item","renderSubmenu","props","className","style","onClose","textValue","_a","AriaSubmenuTrigger","MenuItem","child","jsxs","Text","AriaMenuItem","isFocused","hasSubmenu","Fragment"],"mappings":"4fAoDO,SAASA,EAAY,CAC1B,MAAAC,EACA,OAAAC,EACA,UAAAC,EACA,kBAAAC,EACA,YAAAC,EACA,aAAAC,EACA,MAAAC,EACA,WAAAC,CACF,EAAqB,CACnB,KAAM,CAAE,UAAWC,EAAY,MAAOC,CAAA,EAAeC,EAAAA,WAGnD,OAAAC,EAAA,kBAAA,IAACC,EAAA,QAAA,CACC,UAAWC,EAAAA,IAAI,iBAAkBL,CAAU,EAC3C,MAAOC,EACP,WAAAF,EACA,OAAAN,EACA,aAAcC,EAEd,SAAAS,EAAA,kBAAA,IAACG,EAAA,KAAA,CACC,MAAAd,EACA,UAAWa,EAAAA,IAAI,iBAAkB,0BAA0B,EAC3D,cAAc,SACd,kBAAAV,EACA,aAAc,IAAI,IAAI,CAACC,CAAW,CAAC,EACnC,aAAAC,EACA,QAAS,IAAMH,EAAU,EAAK,EAC9B,UAAS,GAET,kCAACa,cACE,CAAA,SAAA,CAAAT,GACEK,EAAA,kBAAA,IAAAK,SAAA,CAAe,UAAU,kCACvB,SACHV,EAAA,EAGDN,EAAM,IAAKiB,GACHC,EAAc,CACnB,KAAAD,EACA,UAAWT,EACX,MAAOC,EACP,aAAAJ,EACA,QAAS,IAAMH,EAAU,EAAK,CAAA,CAC/B,CACF,CAAA,EACH,CAAA,CACF,CAAA,CAAA,CAGN,CAEA,SAASgB,EAAcC,EAMpB,OACD,KAAM,CAAE,KAAAF,EAAM,UAAAG,EAAW,MAAAC,EAAO,aAAAhB,EAAc,QAAAiB,CAAY,EAAAH,EAC1D,IAAII,IAAYC,EAAAP,EAAK,QAAL,YAAAO,EAAY,aAAc,GAC1C,OAAIP,EAAK,kCAEJQ,iBACC,CAAA,SAAA,CAACd,EAAA,kBAAA,IAAAe,EAAA,CAAS,UAAAH,EAAuB,SAAAN,EAAK,MAAM,0BAC3CL,EAAAA,QAAY,CAAA,UAAWC,MAAI,iBAAkBO,CAAS,EAAG,MAAAC,EACxD,SAAAV,EAAA,kBAAA,IAACG,EAAA,KAAA,CACC,MAAOG,EAAK,SACZ,UAAU,0CACV,aAAAZ,EACA,QAAAiB,EAEC,SAACK,GACAT,EAAc,CACZ,GAAGC,EACH,KAAMQ,CAAA,CACP,CAAA,CAAA,EAGP,CAAA,GAhBuBV,EAAK,GAiB9B,EAIAW,EAAA,kBAAA,KAACF,EAAA,CACC,UAAAH,EACA,SAAU,IAAM,QACTC,EAAAP,EAAA,WAAA,MAAAO,EAAA,KAAAP,EAAWA,EAAK,KACXK,GAAA,MAAAA,GACZ,EAEA,WAAYjB,GAAA,YAAAA,EAAc,SAASY,EAAK,KACxC,GAAIA,EAAK,IAET,SAAA,CAAAN,EAAA,kBAAA,IAACkB,EAAK,KAAA,CAAA,KAAK,QAAS,SAAAZ,EAAK,MAAM,EAC9BN,EAAA,kBAAA,IAAAkB,EAAA,KAAA,CAAK,KAAK,cAAe,WAAK,YAAY,CAAA,CAAA,EALtCZ,EAAK,GAAA,CASlB,CAEA,SAASS,EAASP,EAA0B,CAExC,OAAAR,EAAA,kBAAA,IAACmB,EAAA,SAAA,CACE,GAAGX,EACJ,UAAW,CAAC,CAAE,UAAAY,EAAW,OAAA9B,CACvB,IAAAY,EAAA,IACE,qDACAkB,GAAa,UACb9B,GAAU,MACZ,EAGD,SAAC,CAAA,CAAE,WAAA+B,CAAW,IAEVJ,EAAAA,kBAAAA,KAAAK,EAAAA,kBAAAA,SAAA,CAAA,SAAA,CAAMd,EAAA,SACNa,GACErB,EAAAA,kBAAAA,IAAA,MAAA,CAAI,UAAU,8BAA8B,QAAQ,cACnD,SAAAA,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,wGAAA,CAAA,EAEN,CAAA,EAEJ,CAAA,CAAA,CAIR"}
+{"version":3,"file":"PopoverMenu.cjs.js","sources":["../../../src/components/Menu/PopoverMenu.tsx"],"sourcesContent":["import { DropdownMenu as RadixDropdownMenu } from \"radix-ui\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\nimport { csx } from \"../../utils/string\";\r\nimport { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\r\n\r\nexport interface PopoverMenuProps {\r\n  /** The trigger component */\r\n  trigger: React.ReactNode;\r\n\r\n  /** Array of menu actions/items to display\r\n   * - type {@link ActionMenuAction}[]\r\n   */\r\n  items: ActionMenuAction[];\r\n\r\n  /** Whether the menu is open */\r\n  isOpen: boolean;\r\n\r\n  /** Callback when the menu is opened or closed */\r\n  onOpenChange: (open: boolean) => void;\r\n\r\n  /** The key of the selected item */\r\n  selectedKey: string;\r\n\r\n  /** Callback when the selection changes */\r\n  onSelectionChange: (key: string) => void;\r\n\r\n  /** The keys of the disabled items */\r\n  disabledKeys: string[];\r\n\r\n  /** The title of the menu */\r\n  title: string;\r\n}\r\n\r\n/**\r\n * A component that displays a popover menu.\r\n *\r\n * API:\r\n *  - {@link PopoverMenuProps}\r\n */\r\nexport function PopoverMenu({\r\n  trigger,\r\n  items,\r\n  isOpen,\r\n  onOpenChange,\r\n  selectedKey,\r\n  onSelectionChange,\r\n  disabledKeys,\r\n  title,\r\n}: PopoverMenuProps) {\r\n  const { className: themeClass, style: themeStyle } = useTheme();\r\n\r\n  function renderMenuItem(props) {\r\n    const { item, className, style, disabledKeys, onClose } = props;\r\n\r\n    if (item.children && item.children.length > 0) {\r\n      return (\r\n        <RadixDropdownMenu.Sub key={item.key}>\r\n          <RadixDropdownMenu.SubTrigger\r\n            className={csx(\r\n              \"proton-Menu__item\",\r\n              \"proton-MenuTrigger__menu-item\"\r\n            )}\r\n          >\r\n            {item.label}\r\n            <svg\r\n              className=\"proton-MenuTrigger__chevron\"\r\n              viewBox=\"0 0 256 256\"\r\n              width={16}\r\n              height={12}\r\n            >\r\n              <path\r\n                fill=\"currentColor\"\r\n                d=\"m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17\"\r\n              />\r\n            </svg>\r\n          </RadixDropdownMenu.SubTrigger>\r\n\r\n          <RadixDropdownMenu.SubContent\r\n            sideOffset={8}\r\n            data-has-submenu=\"true\"\r\n            className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\")}\r\n          >\r\n            {item.children.map((child) =>\r\n              renderMenuItem({\r\n                item: child,\r\n                className,\r\n                style,\r\n                disabledKeys,\r\n                onClose,\r\n              })\r\n            )}\r\n          </RadixDropdownMenu.SubContent>\r\n        </RadixDropdownMenu.Sub>\r\n      );\r\n    } else {\r\n      return (\r\n        <RadixDropdownMenu.Item\r\n          className={csx(\"proton-Menu__item\", \"proton-MenuTrigger__menu-item\")}\r\n          key={item.key}\r\n          aria-selected={selectedKey === item.key}\r\n          disabled={disabledKeys?.includes(item.key)}\r\n          onSelect={() => {\r\n            item.onAction?.(item.key);\r\n            onSelectionChange?.(item.key);\r\n            onClose?.();\r\n          }}\r\n        >\r\n          <span\r\n            className=\"proton-MenuTrigger__label\"\r\n            style={{ gridArea: \"label\" }}\r\n          >\r\n            {item.label}\r\n          </span>\r\n          {item.description && (\r\n            <span\r\n              className=\"proton-MenuTrigger__description\"\r\n              style={{ gridArea: \"desc\" }}\r\n            >\r\n              {item.description}\r\n            </span>\r\n          )}\r\n        </RadixDropdownMenu.Item>\r\n      );\r\n    }\r\n  }\r\n\r\n  return (\r\n    <RadixDropdownMenu.Root open={isOpen} onOpenChange={onOpenChange}>\r\n      <RadixDropdownMenu.Trigger asChild>{trigger}</RadixDropdownMenu.Trigger>\r\n      <RadixDropdownMenu.Portal>\r\n        <RadixDropdownMenu.Content\r\n          className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\", themeClass)}\r\n          style={themeStyle as React.CSSProperties}\r\n        >\r\n          {title && (\r\n            <RadixDropdownMenu.Label className=\"proton-MenuTrigger__menu-header\">\r\n              {title}\r\n            </RadixDropdownMenu.Label>\r\n          )}\r\n          {items.map((item) =>\r\n            renderMenuItem({\r\n              item,\r\n              className: themeClass,\r\n              style: themeStyle as React.CSSProperties,\r\n              disabledKeys,\r\n              onClose: () => onOpenChange?.(false),\r\n            })\r\n          )}\r\n        </RadixDropdownMenu.Content>\r\n      </RadixDropdownMenu.Portal>\r\n    </RadixDropdownMenu.Root>\r\n  );\r\n}\r\n"],"names":["PopoverMenu","trigger","items","isOpen","onOpenChange","selectedKey","onSelectionChange","disabledKeys","title","themeClass","themeStyle","useTheme","renderMenuItem","props","item","className","style","onClose","jsxs","RadixDropdownMenu","csx","jsx","child","_a"],"mappings":"iPAuCO,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,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,8BACV,QAAQ,cACR,MAAO,GACP,OAAQ,GAER,SAAAA,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,wGAAA,CACJ,CAAA,CACF,CAAA,CAAA,CACF,EAEAA,EAAA,kBAAA,IAACF,EAAAA,aAAkB,WAAlB,CACC,WAAY,EACZ,mBAAiB,OACjB,UAAWC,EAAAA,IAAI,cAAe,0BAA0B,EAEvD,WAAK,SAAS,IAAKE,GAClBV,EAAe,CACb,KAAMU,EACN,UAAAP,EACA,MAAAC,EACA,aAAAT,EACA,QAAAU,CAAA,CACD,CACH,CAAA,CACF,CAAA,GAnC0BH,EAAK,GAoCjC,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,QACTS,EAAAT,EAAA,WAAA,MAAAS,EAAA,KAAAT,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"}