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

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

package/dist/components/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/Input/BaseInput/Input.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"),s=require("react"),B=require("../../ThemeProvider.cjs.js");;/* empty css               */const F=require("../../../utils/copy.cjs.js"),p=require("../../../utils/string.cjs.js"),W=s.forwardRef(({prefix:x,suffix:f,description:o,descriptionPosition:I="top",isDisabled:h,error:n,onChange:_,label:l,name:i,placeholder:P,type:T="text",value:R,autoFocus:g,autoComplete:k,isRequired:m=!1,isReadOnly:y=!1,onSubmit:b,onClear:E,"data-testid":z},O)=>{const N=s.useRef(null),c=s.useRef(null),u=s.useRef(null),r=s.useRef(null),{className:S}=B.useTheme(),D=O||N;s.useEffect(()=>{if(!r.current)return;const t=()=>{var $,q;if(r.current){const a=r.current.offsetWidth||200;r.current.style.setProperty("--container-width",`${a}px`)}if(c.current){const a=c.current.offsetWidth||32;($=r.current)==null||$.style.setProperty("--prefix-width",`${a}px`)}if(u.current){const a=u.current.offsetWidth||32;(q=r.current)==null||q.style.setProperty("--suffix-width",`${a}px`)}};t();const d=new ResizeObserver(t);return r.current&&d.observe(r.current),c.current&&d.observe(c.current),u.current&&d.observe(u.current),()=>{d.disconnect()}},[x,f]);const w=`${i}-input`,j=`${i}-error`,v=`${i}-description`;return e.jsxRuntimeExports.jsxs("div",{className:"proton-Input__container",ref:r,children:[o&&I==="top"&&e.jsxRuntimeExports.jsx("div",{id:v,className:"proton-Input__text","aria-live":"polite",children:o}),e.jsxRuntimeExports.jsxs("div",{className:"proton-Input__container-inner",children:[x&&e.jsxRuntimeExports.jsx("div",{ref:c,className:p.csx("proton-Input__descriptor","proton-Input__prefix"),children:x}),e.jsxRuntimeExports.jsx("input",{id:w,name:i,type:T,value:R,onChange:t=>{_==null||_(t.target.value)},onKeyDown:t=>{switch(t.key){case"Enter":b&&(t.preventDefault(),b(t));break;case"Escape":E&&(t.preventDefault(),E());break}},onCopy:async()=>{var t;return await F.copyTextToClipboard((t=N.current)==null?void 0:t.value)},disabled:h,readOnly:y,required:m,autoFocus:g,autoComplete:k?"on":"off",placeholder:l?void 0:P,"aria-label":l||i,"aria-invalid":!!n,"aria-errormessage":typeof n=="string"?n:j,"aria-required":m,"aria-readonly":y,"aria-describedby":n?j:o?v:void 0,"aria-disabled":h,"data-testid":z,ref:D,className:p.csx("proton-Input",n&&"proton-Input--error",l&&"proton-Input__label-top",S)}),e.jsxRuntimeExports.jsxs("label",{htmlFor:w,className:p.csx("proton-Input__label",R&&"proton-Input__label--filled"),children:[l,m&&e.jsxRuntimeExports.jsx("span",{"aria-hidden":"true",children:" *"})]}),f&&e.jsxRuntimeExports.jsx("div",{ref:u,className:p.csx("proton-Input__descriptor","proton-Input__suffix"),children:f})]}),n?e.jsxRuntimeExports.jsx("div",{role:"alert",className:p.csx("proton-Input__error","proton-Input__text"),id:j,children:n}):o&&I==="bottom"?e.jsxRuntimeExports.jsx("div",{id:v,className:"proton-Input__text","aria-live":"polite",children:o}):null]})});W.displayName="ProtonUIInput";exports.Input=W;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../node_modules/react/jsx-runtime.cjs.js"),s=require("react"),B=require("../../ThemeProvider.cjs.js");;/* empty css               */const F=require("../../../utils/copy.cjs.js"),o=require("../../../utils/string.cjs.js"),W=s.forwardRef(({prefix:l,suffix:d,description:i,descriptionPosition:j="top",isDisabled:v,error:n,onChange:_,label:x,name:u,placeholder:P,type:T="text",value:R,autoFocus:g,autoComplete:k,isRequired:h=!1,isReadOnly:y=!1,onSubmit:b,onClear:E,"data-testid":z},O)=>{const N=s.useRef(null),c=s.useRef(null),p=s.useRef(null),r=s.useRef(null),{className:S}=B.useTheme(),D=O||N;s.useEffect(()=>{if(!r.current)return;const t=()=>{var $,q;if(r.current){const a=r.current.offsetWidth||200;r.current.style.setProperty("--container-width",`${a}px`)}if(c.current){const a=c.current.offsetWidth||32;($=r.current)==null||$.style.setProperty("--prefix-width",`${a}px`)}if(p.current){const a=p.current.offsetWidth||32;(q=r.current)==null||q.style.setProperty("--suffix-width",`${a}px`)}};t();const f=new ResizeObserver(t);return r.current&&f.observe(r.current),c.current&&f.observe(c.current),p.current&&f.observe(p.current),()=>{f.disconnect()}},[l,d]);const w=`${u}-input`,m=`${u}-error`,I=`${u}-description`;return e.jsxRuntimeExports.jsxs("div",{ref:r,children:[i&&j==="top"&&e.jsxRuntimeExports.jsx("div",{id:I,className:"proton-Input__text","aria-live":"polite",children:i}),e.jsxRuntimeExports.jsxs("div",{className:o.csx("proton-Input__container-inner",l&&"proton-Input__has-prefix",d&&"proton-Input__has-suffix"),children:[l&&e.jsxRuntimeExports.jsx("div",{ref:c,className:o.csx("proton-Input__descriptor","proton-Input__prefix"),children:l}),e.jsxRuntimeExports.jsx("input",{id:w,name:u,type:T,value:R,onChange:t=>{_==null||_(t.target.value)},onKeyDown:t=>{switch(t.key){case"Enter":b&&(t.preventDefault(),b(t));break;case"Escape":E&&(t.preventDefault(),E());break}},onCopy:async()=>{var t;return await F.copyTextToClipboard((t=N.current)==null?void 0:t.value)},disabled:v,readOnly:y,required:h,autoFocus:g,autoComplete:k?"on":"off",placeholder:x?void 0:P,"aria-label":x||u,"aria-invalid":!!n,"aria-errormessage":typeof n=="string"?n:m,"aria-required":h,"aria-readonly":y,"aria-describedby":n?m:i?I:void 0,"aria-disabled":v,"data-testid":z,ref:D,className:o.csx("proton-Input",n&&"proton-Input--error",x&&"proton-Input__label-top",S)}),e.jsxRuntimeExports.jsxs("label",{htmlFor:w,className:o.csx("proton-Input__label",R&&"proton-Input__label--filled"),children:[x,h&&e.jsxRuntimeExports.jsx("span",{"aria-hidden":"true",children:" *"})]}),d&&e.jsxRuntimeExports.jsx("div",{ref:p,className:o.csx("proton-Input__descriptor","proton-Input__suffix"),children:d})]}),n?e.jsxRuntimeExports.jsx("div",{role:"alert",className:o.csx("proton-Input__error","proton-Input__text"),id:m,children:n}):i&&j==="bottom"?e.jsxRuntimeExports.jsx("div",{id:I,className:"proton-Input__text","aria-live":"polite",children:i}):null]})});W.displayName="ProtonUIInput";exports.Input=W;
 //# sourceMappingURL=Input.cjs.js.map

package/dist/components/Input/BaseInput/Input.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs.js","sources":["../../../../src/components/Input/BaseInput/Input.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { forwardRef, useEffect, useRef } from \"react\";\r\n\r\nimport { useTheme } from \"../../ThemeProvider\";\r\nimport { csx } from \"../../../utils\";\r\nimport \"./Input.css\";\r\nimport { copyTextToClipboard } from \"../../../utils/copy\";\r\n\r\nexport interface BaseInputProps {\r\n  /**\r\n   * onChange handler for the input\r\n   */\r\n  onChange?: (value: string) => void;\r\n\r\n  /** Whether the input is disabled. */\r\n  isDisabled?: boolean;\r\n\r\n  /** Description text shown above the input. */\r\n  description?: React.ReactNode | string;\r\n\r\n  /**\r\n   * The position of the description text.\r\n   * @default \"top\"\r\n   */\r\n  descriptionPosition?: \"top\" | \"bottom\";\r\n\r\n  /** Error state that changes the input's visual style and displays an error message. */\r\n  error?: React.ReactNode | string;\r\n\r\n  /**\r\n   * Label for the input element.\r\n   * @note When a label is provided, the input will have extra padding, and the label will float above the text input when focused or filled.\r\n   */\r\n  label?: string;\r\n\r\n  /** Test ID for the component. */\r\n  \"data-testid\"?: string;\r\n\r\n  /** Content to display before the input. Typically used for icons. */\r\n  prefix?: React.ReactNode;\r\n\r\n  /** Content to display after the input. Typically used for icons. */\r\n  suffix?: React.ReactNode;\r\n\r\n  /**\r\n   * Should the browser's autocomplete be enabled?\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\r\n   */\r\n  autoComplete?: boolean;\r\n\r\n  /**\r\n   * Should the input be autofocused?\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autofocus\r\n   */\r\n  autoFocus?: boolean;\r\n\r\n  /**\r\n   * The name attribute of the input element.\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/name\r\n   */\r\n  name: string;\r\n\r\n  /**\r\n   * The placeholder text to display when the input is empty.\r\n   * @note label takes precedence over placeholder, if both are provided.\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder\r\n   */\r\n  placeholder?: string;\r\n\r\n  /**\r\n   * The type attribute of the input element.\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/type\r\n   * @default \"text\"\r\n   */\r\n  type?: string;\r\n\r\n  /**\r\n   * The value of the input.\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value\r\n   */\r\n  value?: string;\r\n\r\n  /**\r\n   * Whether the input is required.\r\n   * @default false\r\n   */\r\n  isRequired?: boolean;\r\n\r\n  /**\r\n   * Whether the input is read-only.\r\n   * @default false\r\n   */\r\n  isReadOnly?: boolean;\r\n\r\n  /**\r\n   * Called when the input is submitted (e.g. by pressing Enter).\r\n   */\r\n  onSubmit?: React.FormEventHandler<HTMLInputElement>;\r\n\r\n  /**\r\n   * Called when the input is cleared (e.g. by pressing Escape).\r\n   */\r\n  onClear?: () => void;\r\n}\r\n\r\n/**\r\n * A controlled and customizable input component with support for labels, prefixes, suffixes, and error states.\r\n *\r\n * API:\r\n *  - {@link BaseInputProps}\r\n */\r\nexport const Input = forwardRef<HTMLInputElement, BaseInputProps>(\r\n  (\r\n    {\r\n      prefix,\r\n      suffix,\r\n      description,\r\n      descriptionPosition = \"top\",\r\n      isDisabled,\r\n      error,\r\n      onChange,\r\n      label,\r\n      name,\r\n      placeholder,\r\n      type = \"text\",\r\n      value,\r\n      autoFocus,\r\n      autoComplete,\r\n      isRequired = false,\r\n      isReadOnly = false,\r\n      onSubmit,\r\n      onClear,\r\n      \"data-testid\": testId,\r\n    },\r\n    forwardedRef: React.RefObject<HTMLInputElement>\r\n  ) => {\r\n    const inputRef = useRef<HTMLInputElement>(null);\r\n    const prefixRef = useRef<HTMLDivElement>(null);\r\n    const suffixRef = useRef<HTMLDivElement>(null);\r\n    const containerRef = useRef<HTMLDivElement>(null);\r\n    const { className } = useTheme();\r\n    const ref = forwardedRef || inputRef;\r\n\r\n    // Control dynamic prefix and suffix widths using ResizeObserver\r\n    useEffect(() => {\r\n      if (!containerRef.current) return;\r\n\r\n      const updateSizes = () => {\r\n        if (containerRef.current) {\r\n          const containerWidth = containerRef.current.offsetWidth || 200;\r\n          containerRef.current.style.setProperty(\r\n            \"--container-width\",\r\n            `${containerWidth}px`\r\n          );\r\n        }\r\n\r\n        if (prefixRef.current) {\r\n          const prefixWidth = prefixRef.current.offsetWidth || 32;\r\n          containerRef.current?.style.setProperty(\r\n            \"--prefix-width\",\r\n            `${prefixWidth}px`\r\n          );\r\n        }\r\n\r\n        if (suffixRef.current) {\r\n          const suffixWidth = suffixRef.current.offsetWidth || 32;\r\n          containerRef.current?.style.setProperty(\r\n            \"--suffix-width\",\r\n            `${suffixWidth}px`\r\n          );\r\n        }\r\n      };\r\n\r\n      updateSizes();\r\n\r\n      const resizeObserver = new ResizeObserver(updateSizes);\r\n\r\n      if (containerRef.current) {\r\n        resizeObserver.observe(containerRef.current);\r\n      }\r\n      if (prefixRef.current) {\r\n        resizeObserver.observe(prefixRef.current);\r\n      }\r\n      if (suffixRef.current) {\r\n        resizeObserver.observe(suffixRef.current);\r\n      }\r\n\r\n      return () => {\r\n        resizeObserver.disconnect();\r\n      };\r\n    }, [prefix, suffix]);\r\n\r\n    const inputId = `${name}-input`;\r\n    const errorId = `${name}-error`;\r\n    const descriptionId = `${name}-description`;\r\n\r\n    return (\r\n      <div className=\"proton-Input__container\" ref={containerRef}>\r\n        {description && descriptionPosition === \"top\" && (\r\n          <div\r\n            id={descriptionId}\r\n            className=\"proton-Input__text\"\r\n            aria-live=\"polite\"\r\n          >\r\n            {description}\r\n          </div>\r\n        )}\r\n        <div className=\"proton-Input__container-inner\">\r\n          {prefix && (\r\n            <div\r\n              ref={prefixRef}\r\n              className={csx(\r\n                \"proton-Input__descriptor\",\r\n                \"proton-Input__prefix\"\r\n              )}\r\n            >\r\n              {prefix}\r\n            </div>\r\n          )}\r\n\r\n          <input\r\n            id={inputId}\r\n            name={name}\r\n            type={type}\r\n            value={value}\r\n            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\r\n              onChange?.(e.target.value);\r\n            }}\r\n            onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\r\n              switch (e.key) {\r\n                case \"Enter\":\r\n                  if (onSubmit) {\r\n                    e.preventDefault();\r\n                    onSubmit(e);\r\n                  }\r\n                  break;\r\n                case \"Escape\":\r\n                  if (onClear) {\r\n                    e.preventDefault();\r\n                    onClear();\r\n                  }\r\n                  break;\r\n              }\r\n            }}\r\n            onCopy={async () =>\r\n              await copyTextToClipboard(inputRef.current?.value)\r\n            }\r\n            disabled={isDisabled}\r\n            readOnly={isReadOnly}\r\n            required={isRequired}\r\n            autoFocus={autoFocus}\r\n            autoComplete={autoComplete ? \"on\" : \"off\"}\r\n            placeholder={label ? undefined : placeholder}\r\n            aria-label={label || name}\r\n            aria-invalid={Boolean(error)}\r\n            aria-errormessage={typeof error === \"string\" ? error : errorId}\r\n            aria-required={isRequired}\r\n            aria-readonly={isReadOnly}\r\n            aria-describedby={\r\n              error ? errorId : description ? descriptionId : undefined\r\n            }\r\n            aria-disabled={isDisabled}\r\n            data-testid={testId}\r\n            ref={ref}\r\n            className={csx(\r\n              \"proton-Input\",\r\n              error && \"proton-Input--error\",\r\n              label && \"proton-Input__label-top\",\r\n              className\r\n            )}\r\n          />\r\n\r\n          <label\r\n            htmlFor={inputId}\r\n            className={csx(\r\n              \"proton-Input__label\",\r\n              value && \"proton-Input__label--filled\"\r\n            )}\r\n          >\r\n            {label}\r\n            {isRequired && <span aria-hidden=\"true\"> *</span>}\r\n          </label>\r\n\r\n          {suffix && (\r\n            <div\r\n              ref={suffixRef}\r\n              className={csx(\r\n                \"proton-Input__descriptor\",\r\n                \"proton-Input__suffix\"\r\n              )}\r\n            >\r\n              {suffix}\r\n            </div>\r\n          )}\r\n        </div>\r\n\r\n        {error ? (\r\n          <div\r\n            role=\"alert\"\r\n            className={csx(\"proton-Input__error\", \"proton-Input__text\")}\r\n            id={errorId}\r\n          >\r\n            {error}\r\n          </div>\r\n        ) : description && descriptionPosition === \"bottom\" ? (\r\n          <div\r\n            id={descriptionId}\r\n            className=\"proton-Input__text\"\r\n            aria-live=\"polite\"\r\n          >\r\n            {description}\r\n          </div>\r\n        ) : null}\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nInput.displayName = \"ProtonUIInput\";\r\n"],"names":["Input","forwardRef","prefix","suffix","description","descriptionPosition","isDisabled","error","onChange","label","name","placeholder","type","value","autoFocus","autoComplete","isRequired","isReadOnly","onSubmit","onClear","testId","forwardedRef","inputRef","useRef","prefixRef","suffixRef","containerRef","className","useTheme","ref","useEffect","updateSizes","containerWidth","prefixWidth","_a","suffixWidth","_b","resizeObserver","inputId","errorId","descriptionId","jsxs","jsx","csx","e","copyTextToClipboard"],"mappings":"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"}
+{"version":3,"file":"Input.cjs.js","sources":["../../../../src/components/Input/BaseInput/Input.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { forwardRef, useEffect, useRef } from \"react\";\r\n\r\nimport { useTheme } from \"../../ThemeProvider\";\r\nimport { csx } from \"../../../utils\";\r\nimport \"./Input.css\";\r\nimport { copyTextToClipboard } from \"../../../utils/copy\";\r\n\r\nexport interface BaseInputProps {\r\n  /**\r\n   * onChange handler for the input\r\n   */\r\n  onChange?: (value: string) => void;\r\n\r\n  /** Whether the input is disabled. */\r\n  isDisabled?: boolean;\r\n\r\n  /** Description text shown above the input. */\r\n  description?: React.ReactNode | string;\r\n\r\n  /**\r\n   * The position of the description text.\r\n   * @default \"top\"\r\n   */\r\n  descriptionPosition?: \"top\" | \"bottom\";\r\n\r\n  /** Error state that changes the input's visual style and displays an error message. */\r\n  error?: React.ReactNode | string;\r\n\r\n  /**\r\n   * Label for the input element.\r\n   * @note When a label is provided, the input will have extra padding, and the label will float above the text input when focused or filled.\r\n   */\r\n  label?: string;\r\n\r\n  /** Test ID for the component. */\r\n  \"data-testid\"?: string;\r\n\r\n  /** Content to display before the input. Typically used for icons. */\r\n  prefix?: React.ReactNode;\r\n\r\n  /** Content to display after the input. Typically used for icons. */\r\n  suffix?: React.ReactNode;\r\n\r\n  /**\r\n   * Should the browser's autocomplete be enabled?\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\r\n   */\r\n  autoComplete?: boolean;\r\n\r\n  /**\r\n   * Should the input be autofocused?\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autofocus\r\n   */\r\n  autoFocus?: boolean;\r\n\r\n  /**\r\n   * The name attribute of the input element.\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/name\r\n   */\r\n  name: string;\r\n\r\n  /**\r\n   * The placeholder text to display when the input is empty.\r\n   * @note label takes precedence over placeholder, if both are provided.\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder\r\n   */\r\n  placeholder?: string;\r\n\r\n  /**\r\n   * The type attribute of the input element.\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/type\r\n   * @default \"text\"\r\n   */\r\n  type?: string;\r\n\r\n  /**\r\n   * The value of the input.\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value\r\n   */\r\n  value?: string;\r\n\r\n  /**\r\n   * Whether the input is required.\r\n   * @default false\r\n   */\r\n  isRequired?: boolean;\r\n\r\n  /**\r\n   * Whether the input is read-only.\r\n   * @default false\r\n   */\r\n  isReadOnly?: boolean;\r\n\r\n  /**\r\n   * Called when the input is submitted (e.g. by pressing Enter).\r\n   */\r\n  onSubmit?: React.FormEventHandler<HTMLInputElement>;\r\n\r\n  /**\r\n   * Called when the input is cleared (e.g. by pressing Escape).\r\n   */\r\n  onClear?: () => void;\r\n}\r\n\r\n/**\r\n * A controlled and customizable input component with support for labels, prefixes, suffixes, and error states.\r\n *\r\n * API:\r\n *  - {@link BaseInputProps}\r\n */\r\nexport const Input = forwardRef<HTMLInputElement, BaseInputProps>(\r\n  (\r\n    {\r\n      prefix,\r\n      suffix,\r\n      description,\r\n      descriptionPosition = \"top\",\r\n      isDisabled,\r\n      error,\r\n      onChange,\r\n      label,\r\n      name,\r\n      placeholder,\r\n      type = \"text\",\r\n      value,\r\n      autoFocus,\r\n      autoComplete,\r\n      isRequired = false,\r\n      isReadOnly = false,\r\n      onSubmit,\r\n      onClear,\r\n      \"data-testid\": testId,\r\n    },\r\n    forwardedRef: React.RefObject<HTMLInputElement>\r\n  ) => {\r\n    const inputRef = useRef<HTMLInputElement>(null);\r\n    const prefixRef = useRef<HTMLDivElement>(null);\r\n    const suffixRef = useRef<HTMLDivElement>(null);\r\n    const containerRef = useRef<HTMLDivElement>(null);\r\n    const { className } = useTheme();\r\n    const ref = forwardedRef || inputRef;\r\n\r\n    // Control dynamic prefix and suffix widths using ResizeObserver\r\n    useEffect(() => {\r\n      if (!containerRef.current) return;\r\n\r\n      const updateSizes = () => {\r\n        if (containerRef.current) {\r\n          const containerWidth = containerRef.current.offsetWidth || 200;\r\n          containerRef.current.style.setProperty(\r\n            \"--container-width\",\r\n            `${containerWidth}px`\r\n          );\r\n        }\r\n\r\n        if (prefixRef.current) {\r\n          const prefixWidth = prefixRef.current.offsetWidth || 32;\r\n          containerRef.current?.style.setProperty(\r\n            \"--prefix-width\",\r\n            `${prefixWidth}px`\r\n          );\r\n        }\r\n\r\n        if (suffixRef.current) {\r\n          const suffixWidth = suffixRef.current.offsetWidth || 32;\r\n          containerRef.current?.style.setProperty(\r\n            \"--suffix-width\",\r\n            `${suffixWidth}px`\r\n          );\r\n        }\r\n      };\r\n\r\n      updateSizes();\r\n\r\n      const resizeObserver = new ResizeObserver(updateSizes);\r\n\r\n      if (containerRef.current) {\r\n        resizeObserver.observe(containerRef.current);\r\n      }\r\n      if (prefixRef.current) {\r\n        resizeObserver.observe(prefixRef.current);\r\n      }\r\n      if (suffixRef.current) {\r\n        resizeObserver.observe(suffixRef.current);\r\n      }\r\n\r\n      return () => {\r\n        resizeObserver.disconnect();\r\n      };\r\n    }, [prefix, suffix]);\r\n\r\n    const inputId = `${name}-input`;\r\n    const errorId = `${name}-error`;\r\n    const descriptionId = `${name}-description`;\r\n\r\n    return (\r\n      <div ref={containerRef}>\r\n        {description && descriptionPosition === \"top\" && (\r\n          <div\r\n            id={descriptionId}\r\n            className=\"proton-Input__text\"\r\n            aria-live=\"polite\"\r\n          >\r\n            {description}\r\n          </div>\r\n        )}\r\n        <div className={csx(\r\n          \"proton-Input__container-inner\",\r\n          prefix && \"proton-Input__has-prefix\",\r\n          suffix && \"proton-Input__has-suffix\"\r\n        )}>\r\n          {prefix && (\r\n            <div\r\n              ref={prefixRef}\r\n              className={csx(\r\n                \"proton-Input__descriptor\",\r\n                \"proton-Input__prefix\"\r\n              )}\r\n            >\r\n              {prefix}\r\n            </div>\r\n          )}\r\n\r\n          <input\r\n            id={inputId}\r\n            name={name}\r\n            type={type}\r\n            value={value}\r\n            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\r\n              onChange?.(e.target.value);\r\n            }}\r\n            onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\r\n              switch (e.key) {\r\n                case \"Enter\":\r\n                  if (onSubmit) {\r\n                    e.preventDefault();\r\n                    onSubmit(e);\r\n                  }\r\n                  break;\r\n                case \"Escape\":\r\n                  if (onClear) {\r\n                    e.preventDefault();\r\n                    onClear();\r\n                  }\r\n                  break;\r\n              }\r\n            }}\r\n            onCopy={async () =>\r\n              await copyTextToClipboard(inputRef.current?.value)\r\n            }\r\n            disabled={isDisabled}\r\n            readOnly={isReadOnly}\r\n            required={isRequired}\r\n            autoFocus={autoFocus}\r\n            autoComplete={autoComplete ? \"on\" : \"off\"}\r\n            placeholder={label ? undefined : placeholder}\r\n            aria-label={label || name}\r\n            aria-invalid={Boolean(error)}\r\n            aria-errormessage={typeof error === \"string\" ? error : errorId}\r\n            aria-required={isRequired}\r\n            aria-readonly={isReadOnly}\r\n            aria-describedby={\r\n              error ? errorId : description ? descriptionId : undefined\r\n            }\r\n            aria-disabled={isDisabled}\r\n            data-testid={testId}\r\n            ref={ref}\r\n            className={csx(\r\n              \"proton-Input\",\r\n              error && \"proton-Input--error\",\r\n              label && \"proton-Input__label-top\",\r\n              className\r\n            )}\r\n          />\r\n\r\n          <label\r\n            htmlFor={inputId}\r\n            className={csx(\r\n              \"proton-Input__label\",\r\n              value && \"proton-Input__label--filled\"\r\n            )}\r\n          >\r\n            {label}\r\n            {isRequired && <span aria-hidden=\"true\"> *</span>}\r\n          </label>\r\n\r\n          {suffix && (\r\n            <div\r\n              ref={suffixRef}\r\n              className={csx(\r\n                \"proton-Input__descriptor\",\r\n                \"proton-Input__suffix\"\r\n              )}\r\n            >\r\n              {suffix}\r\n            </div>\r\n          )}\r\n        </div>\r\n\r\n        {error ? (\r\n          <div\r\n            role=\"alert\"\r\n            className={csx(\"proton-Input__error\", \"proton-Input__text\")}\r\n            id={errorId}\r\n          >\r\n            {error}\r\n          </div>\r\n        ) : description && descriptionPosition === \"bottom\" ? (\r\n          <div\r\n            id={descriptionId}\r\n            className=\"proton-Input__text\"\r\n            aria-live=\"polite\"\r\n          >\r\n            {description}\r\n          </div>\r\n        ) : null}\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nInput.displayName = \"ProtonUIInput\";\r\n"],"names":["Input","forwardRef","prefix","suffix","description","descriptionPosition","isDisabled","error","onChange","label","name","placeholder","type","value","autoFocus","autoComplete","isRequired","isReadOnly","onSubmit","onClear","testId","forwardedRef","inputRef","useRef","prefixRef","suffixRef","containerRef","className","useTheme","ref","useEffect","updateSizes","containerWidth","prefixWidth","_a","suffixWidth","_b","resizeObserver","inputId","errorId","descriptionId","jsxs","jsx","csx","e","copyTextToClipboard"],"mappings":"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"}

package/dist/components/Input/BaseInput/Input.es.js

@@ -1,96 +1,100 @@
-import { j as e } from "../../../node_modules/react/jsx-runtime.es.js";
-import { forwardRef as K, useRef as d, useEffect as U } from "react";
+import { j as r } from "../../../node_modules/react/jsx-runtime.es.js";
+import { forwardRef as K, useRef as _, useEffect as U } from "react";
 import { useTheme as g } from "../../ThemeProvider.es.js";
 /* empty css             */
 import { copyTextToClipboard as q } from "../../../utils/copy.es.js";
-import { csx as c } from "../../../utils/string.es.js";
+import { csx as o } from "../../../utils/string.es.js";
 const A = K(
   ({
-    prefix: f,
-    suffix: x,
-    description: o,
+    prefix: u,
+    suffix: l,
+    description: s,
     descriptionPosition: v = "top",
     isDisabled: y,
     error: n,
-    onChange: _,
-    label: l,
-    name: s,
+    onChange: x,
+    label: d,
+    name: i,
     placeholder: k,
     type: z = "text",
     value: b,
     autoFocus: P,
     autoComplete: T,
-    isRequired: m = !1,
+    isRequired: h = !1,
     isReadOnly: j = !1,
     onSubmit: N,
     onClear: w,
     "data-testid": D
   }, O) => {
-    const W = d(null), i = d(null), a = d(null), r = d(null), { className: B } = g(), F = O || W;
+    const W = _(null), a = _(null), p = _(null), e = _(null), { className: B } = g(), F = O || W;
     U(() => {
-      if (!r.current) return;
+      if (!e.current) return;
       const t = () => {
         var R, E;
-        if (r.current) {
-          const p = r.current.offsetWidth || 200;
-          r.current.style.setProperty(
+        if (e.current) {
+          const c = e.current.offsetWidth || 200;
+          e.current.style.setProperty(
             "--container-width",
-            `${p}px`
+            `${c}px`
           );
         }
-        if (i.current) {
-          const p = i.current.offsetWidth || 32;
-          (R = r.current) == null || R.style.setProperty(
+        if (a.current) {
+          const c = a.current.offsetWidth || 32;
+          (R = e.current) == null || R.style.setProperty(
             "--prefix-width",
-            `${p}px`
+            `${c}px`
           );
         }
-        if (a.current) {
-          const p = a.current.offsetWidth || 32;
-          (E = r.current) == null || E.style.setProperty(
+        if (p.current) {
+          const c = p.current.offsetWidth || 32;
+          (E = e.current) == null || E.style.setProperty(
             "--suffix-width",
-            `${p}px`
+            `${c}px`
           );
         }
       };
       t();
-      const u = new ResizeObserver(t);
-      return r.current && u.observe(r.current), i.current && u.observe(i.current), a.current && u.observe(a.current), () => {
-        u.disconnect();
+      const f = new ResizeObserver(t);
+      return e.current && f.observe(e.current), a.current && f.observe(a.current), p.current && f.observe(p.current), () => {
+        f.disconnect();
       };
-    }, [f, x]);
-    const $ = `${s}-input`, I = `${s}-error`, h = `${s}-description`;
-    return /* @__PURE__ */ e.jsxs("div", { className: "proton-Input__container", ref: r, children: [
-      o && v === "top" && /* @__PURE__ */ e.jsx(
+    }, [u, l]);
+    const $ = `${i}-input`, m = `${i}-error`, I = `${i}-description`;
+    return /* @__PURE__ */ r.jsxs("div", { ref: e, children: [
+      s && v === "top" && /* @__PURE__ */ r.jsx(
         "div",
         {
-          id: h,
+          id: I,
           className: "proton-Input__text",
           "aria-live": "polite",
-          children: o
+          children: s
         }
       ),
-      /* @__PURE__ */ e.jsxs("div", { className: "proton-Input__container-inner", children: [
-        f && /* @__PURE__ */ e.jsx(
+      /* @__PURE__ */ r.jsxs("div", { className: o(
+        "proton-Input__container-inner",
+        u && "proton-Input__has-prefix",
+        l && "proton-Input__has-suffix"
+      ), children: [
+        u && /* @__PURE__ */ r.jsx(
           "div",
           {
-            ref: i,
-            className: c(
+            ref: a,
+            className: o(
               "proton-Input__descriptor",
               "proton-Input__prefix"
             ),
-            children: f
+            children: u
           }
         ),
-        /* @__PURE__ */ e.jsx(
+        /* @__PURE__ */ r.jsx(
           "input",
           {
             id: $,
-            name: s,
+            name: i,
             type: z,
             value: b,
             onChange: (t) => {
-              _ == null || _(t.target.value);
+              x == null || x(t.target.value);
             },
             onKeyDown: (t) => {
               switch (t.key) {
@@ -108,68 +112,68 @@ const A = K(
             },
             disabled: y,
             readOnly: j,
-            required: m,
+            required: h,
             autoFocus: P,
             autoComplete: T ? "on" : "off",
-            placeholder: l ? void 0 : k,
-            "aria-label": l || s,
+            placeholder: d ? void 0 : k,
+            "aria-label": d || i,
             "aria-invalid": !!n,
-            "aria-errormessage": typeof n == "string" ? n : I,
-            "aria-required": m,
+            "aria-errormessage": typeof n == "string" ? n : m,
+            "aria-required": h,
             "aria-readonly": j,
-            "aria-describedby": n ? I : o ? h : void 0,
+            "aria-describedby": n ? m : s ? I : void 0,
             "aria-disabled": y,
             "data-testid": D,
             ref: F,
-            className: c(
+            className: o(
               "proton-Input",
               n && "proton-Input--error",
-              l && "proton-Input__label-top",
+              d && "proton-Input__label-top",
               B
             )
           }
         ),
-        /* @__PURE__ */ e.jsxs(
+        /* @__PURE__ */ r.jsxs(
           "label",
           {
             htmlFor: $,
-            className: c(
+            className: o(
               "proton-Input__label",
               b && "proton-Input__label--filled"
             ),
             children: [
-              l,
-              m && /* @__PURE__ */ e.jsx("span", { "aria-hidden": "true", children: " *" })
+              d,
+              h && /* @__PURE__ */ r.jsx("span", { "aria-hidden": "true", children: " *" })
             ]
           }
         ),
-        x && /* @__PURE__ */ e.jsx(
+        l && /* @__PURE__ */ r.jsx(
           "div",
           {
-            ref: a,
-            className: c(
+            ref: p,
+            className: o(
               "proton-Input__descriptor",
               "proton-Input__suffix"
             ),
-            children: x
+            children: l
           }
         )
       ] }),
-      n ? /* @__PURE__ */ e.jsx(
+      n ? /* @__PURE__ */ r.jsx(
         "div",
         {
           role: "alert",
-          className: c("proton-Input__error", "proton-Input__text"),
-          id: I,
+          className: o("proton-Input__error", "proton-Input__text"),
+          id: m,
           children: n
         }
-      ) : o && v === "bottom" ? /* @__PURE__ */ e.jsx(
+      ) : s && v === "bottom" ? /* @__PURE__ */ r.jsx(
         "div",
         {
-          id: h,
+          id: I,
           className: "proton-Input__text",
           "aria-live": "polite",
-          children: o
+          children: s
         }
       ) : null
     ] });