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

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

@@ -1,116 +1,122 @@
 import { j as r } from "../../node_modules/react/jsx-runtime.es.js";
-import { Header as $ } from "../../node_modules/react-aria-components/dist/Header.es.js";
-import { Menu as p, MenuSection as g, SubmenuTrigger as j, MenuItem as _ } from "../../node_modules/react-aria-components/dist/Menu.es.js";
-import { Popover as b } from "../../node_modules/react-aria-components/dist/Popover.es.js";
-import { Text as x } from "../../node_modules/react-aria-components/dist/Text.es.js";
-import { useTheme as M } from "../ThemeProvider.es.js";
-import { csx as a } from "../../utils/string.es.js";
-function B({
-  items: o,
-  isOpen: e,
-  setIsOpen: n,
-  onSelectionChange: m,
-  selectedKey: t,
-  disabledKeys: c,
-  title: l,
-  triggerRef: i
+import { DropdownMenu as s } from "radix-ui";
+import { useTheme as b } from "../ThemeProvider.es.js";
+import { csx as o } from "../../utils/string.es.js";
+function v({
+  trigger: _,
+  items: h,
+  isOpen: x,
+  onOpenChange: t,
+  selectedKey: g,
+  onSelectionChange: a,
+  disabledKeys: j,
+  title: c
 }) {
-  const { className: s, style: u } = M();
-  return /* @__PURE__ */ r.jsx(
-    b,
-    {
-      className: a("proton-Popover", s),
-      style: u,
-      triggerRef: i,
-      isOpen: e,
-      onOpenChange: n,
-      children: /* @__PURE__ */ r.jsx(
-        p,
+  const { className: u, style: d } = b();
+  function p(m) {
+    const { item: e, className: M, style: y, disabledKeys: l, onClose: i } = m;
+    return e.children && e.children.length > 0 ? /* @__PURE__ */ r.jsxs(s.Sub, { children: [
+      /* @__PURE__ */ r.jsxs(
+        s.SubTrigger,
         {
-          items: o,
-          className: a("proton-ListBox", "proton-MenuTrigger__menu"),
-          selectionMode: "single",
-          onSelectionChange: m,
-          selectedKeys: /* @__PURE__ */ new Set([t]),
-          disabledKeys: c,
-          onClose: () => n(!1),
-          autoFocus: !0,
-          children: /* @__PURE__ */ r.jsxs(g, { children: [
-            l && /* @__PURE__ */ r.jsx($, { className: "proton-MenuTrigger__menu-header", children: l }),
-            o.map((h) => f({
-              item: h,
-              className: s,
-              style: u,
-              disabledKeys: c,
-              onClose: () => n(!1)
-            }))
-          ] })
+          className: o(
+            "proton-Menu__item",
+            "proton-MenuTrigger__menu-item"
+          ),
+          children: [
+            e.label,
+            /* @__PURE__ */ r.jsx(
+              "svg",
+              {
+                className: "proton-MenuTrigger__chevron",
+                viewBox: "0 0 256 256",
+                width: 16,
+                height: 12,
+                children: /* @__PURE__ */ r.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"
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ r.jsx(
+        s.SubContent,
+        {
+          sideOffset: 8,
+          "data-has-submenu": "true",
+          className: o("proton-Menu", "proton-MenuTrigger__menu"),
+          children: e.children.map(
+            (n) => p({
+              item: n,
+              className: M,
+              style: y,
+              disabledKeys: l,
+              onClose: i
+            })
+          )
         }
       )
-    }
-  );
-}
-function f(o) {
-  var i;
-  const { item: e, className: n, style: m, disabledKeys: t, onClose: c } = o;
-  let l = ((i = e.label) == null ? void 0 : i.toString()) || "";
-  return e.children ? /* @__PURE__ */ r.jsxs(j, { children: [
-    /* @__PURE__ */ r.jsx(d, { textValue: l, children: e.label }),
-    /* @__PURE__ */ r.jsx(b, { className: a("proton-Popover", n), style: m, children: /* @__PURE__ */ r.jsx(
-      p,
+    ] }, e.key) : /* @__PURE__ */ r.jsxs(
+      s.Item,
       {
-        items: e.children,
-        className: "proton-ListBox proton-MenuTrigger__menu",
-        disabledKeys: t,
-        onClose: c,
-        children: (s) => f({
-          ...o,
-          item: s
-        })
+        className: o("proton-Menu__item", "proton-MenuTrigger__menu-item"),
+        "aria-selected": g === e.key,
+        disabled: l == null ? void 0 : l.includes(e.key),
+        onSelect: () => {
+          var n;
+          (n = e.onAction) == null || n.call(e, e.key), a == null || a(e.key), i == null || i();
+        },
+        children: [
+          /* @__PURE__ */ r.jsx(
+            "span",
+            {
+              className: "proton-MenuTrigger__label",
+              style: { gridArea: "label" },
+              children: e.label
+            }
+          ),
+          e.description && /* @__PURE__ */ r.jsx(
+            "span",
+            {
+              className: "proton-MenuTrigger__description",
+              style: { gridArea: "desc" },
+              children: e.description
+            }
+          )
+        ]
+      },
+      e.key
+    );
+  }
+  return /* @__PURE__ */ r.jsxs(s.Root, { open: x, onOpenChange: t, children: [
+    /* @__PURE__ */ r.jsx(s.Trigger, { asChild: !0, children: _ }),
+    /* @__PURE__ */ r.jsx(s.Portal, { children: /* @__PURE__ */ r.jsxs(
+      s.Content,
+      {
+        className: o("proton-Menu", "proton-MenuTrigger__menu", u),
+        style: d,
+        children: [
+          c && /* @__PURE__ */ r.jsx(s.Label, { className: "proton-MenuTrigger__menu-header", children: c }),
+          h.map(
+            (m) => p({
+              item: m,
+              className: u,
+              style: d,
+              disabledKeys: j,
+              onClose: () => t == null ? void 0 : t(!1)
+            })
+          )
+        ]
       }
     ) })
-  ] }, e.key) : /* @__PURE__ */ r.jsxs(
-    d,
-    {
-      textValue: l,
-      onAction: () => {
-        var s;
-        (s = e.onAction) == null || s.call(e, e.key), c == null || c();
-      },
-      isDisabled: t == null ? void 0 : t.includes(e.key),
-      id: e.key,
-      children: [
-        /* @__PURE__ */ r.jsx(x, { slot: "label", children: e.label }),
-        /* @__PURE__ */ r.jsx(x, { slot: "description", children: e.description })
-      ]
-    },
-    e.key
-  );
-}
-function d(o) {
-  return /* @__PURE__ */ r.jsx(
-    _,
-    {
-      ...o,
-      className: ({ isFocused: e, isOpen: n }) => a(
-        "proton-ListBox__item proton-MenuTrigger__menu-item",
-        e && "focused",
-        n && "open"
-      ),
-      children: ({ hasSubmenu: e }) => /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-        o.children,
-        e && /* @__PURE__ */ r.jsx("svg", { className: "proton-MenuTrigger__chevron", viewBox: "0 0 256 256", children: /* @__PURE__ */ r.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"
-          }
-        ) })
-      ] })
-    }
-  );
+  ] });
 }
 export {
-  B as PopoverMenu
+  v as PopoverMenu
 };
 //# sourceMappingURL=PopoverMenu.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PopoverMenu.es.js","sources":["../../../src/components/Menu/PopoverMenu.tsx"],"sourcesContent":["import {\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":"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"}
+{"version":3,"file":"PopoverMenu.es.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":"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"}

package/dist/components/Popover/Popover.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../node_modules/react/jsx-runtime.cjs.js"),c=require("react"),m=require("../../node_modules/@react-aria/overlays/dist/useOverlayTrigger.cjs.js"),j=require("../../node_modules/@react-aria/overlays/dist/DismissButton.cjs.js"),P=require("../../node_modules/@react-aria/overlays/dist/usePopover.cjs.js"),y=require("../../node_modules/@react-aria/overlays/dist/Overlay.cjs.js"),R=require("../../node_modules/@react-aria/button/dist/useButton.cjs.js"),f=require("../../node_modules/@react-stately/overlays/dist/useOverlayTriggerState.cjs.js"),q=require("../ThemeProvider.cjs.js");;/* empty css                 */const T=require("../../utils/string.cjs.js");function h(o){const r=c.useRef(null),t=f.useOverlayTriggerState(o||{}),{triggerProps:i,overlayProps:s}=m.useOverlayTrigger({type:"dialog"},t,r),{buttonProps:n}=R.useButton(i,r);return{buttonProps:n,overlayProps:s,buttonRef:r,state:t}}function p({children:o,state:r,arrow:t=!1,offset:i,...s}){const n=c.useRef(null),{popoverRef:u=n}=s,{className:x,style:d}=q.useTheme();let{popoverProps:a,underlayProps:v,arrowProps:g,placement:l}=P.usePopover({...s,offset:i,popoverRef:u},r);return e.jsxRuntimeExports.jsxs(y.Overlay,{children:[e.jsxRuntimeExports.jsx("div",{...v,style:{position:"fixed",inset:0}}),e.jsxRuntimeExports.jsxs("div",{...a,ref:u,className:T.csx("proton-Popover",x),style:{...a.style,...d},"data-testid":s["data-testid"]||void 0,"data-placement":l,"data-entering":!0,children:[e.jsxRuntimeExports.jsx(j.DismissButton,{onDismiss:r.close}),t&&e.jsxRuntimeExports.jsxs("svg",{...g,className:"arrow","data-placement":l,viewBox:"0 0 12 12",children:[e.jsxRuntimeExports.jsx("title",{children:"arrow"}),e.jsxRuntimeExports.jsx("path",{d:"M0 0 L6 6 L12 0"})]}),o]})]})}exports.Popover=p;exports.default=p;exports.usePopoverTrigger=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../node_modules/react/jsx-runtime.cjs.js"),r=require("radix-ui");;/* empty css                 */const m=require("../ThemeProvider.cjs.js"),j=require("../../utils/string.cjs.js");function v({trigger:s,children:t,open:o,defaultOpen:i,onOpenChange:n,side:x="top",align:a="center",arrow:c=!1,constrainWidth:l=!1,"data-testid":p}){const{className:u,style:d}=m.useTheme();return e.jsxRuntimeExports.jsxs(r.Popover.Root,{open:o,defaultOpen:i,onOpenChange:n,children:[e.jsxRuntimeExports.jsx(r.Popover.Trigger,{asChild:!0,children:e.jsxRuntimeExports.jsx("div",{children:s})}),e.jsxRuntimeExports.jsx(r.Popover.Portal,{children:e.jsxRuntimeExports.jsxs(r.Popover.Content,{side:x,sideOffset:2,align:a,style:d,className:j.csx("proton-Popover",l&&"proton-Popover__constrained",u),"data-testid":p,children:[c&&e.jsxRuntimeExports.jsx(r.Popover.Arrow,{className:"arrow"}),t]})})]})}exports.Popover=v;
 //# sourceMappingURL=Popover.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.cjs.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useRef } from \"react\";\r\nimport type { AriaPopoverProps } from \"@react-aria/overlays\";\r\nimport { DismissButton, Overlay, usePopover } from \"@react-aria/overlays\";\r\nimport { useButton } from \"@react-aria/button\";\r\nimport { useOverlayTrigger } from \"@react-aria/overlays\";\r\nimport {\r\n  OverlayTriggerProps,\r\n  useOverlayTriggerState,\r\n  type OverlayTriggerState,\r\n} from \"@react-stately/overlays\";\r\nimport { csx } from \"../../utils\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\n\r\nimport \"./Popover.css\";\r\n\r\n/**\r\n * Hook for creating a popover trigger. This hook manages the state and events for the popover\r\n * and popover trigger. For examples see Popover.stories.tsx.\r\n *\r\n * API:\r\n *  - {@link OverlayTriggerProps}\r\n *\r\n * @example\r\n * ```tsx\r\n * let { buttonProps, overlayProps, buttonRef, state } = usePopoverTrigger();\r\n *\r\n * return (\r\n *   <div>\r\n *     <button {...buttonProps} ref={buttonRef}>\r\n *       Trigger\r\n *     </button>\r\n *\r\n *     {state.isOpen && (\r\n *       <Popover\r\n *         state={state}\r\n *         triggerRef={buttonRef}\r\n *         arrow={props.arrow}\r\n *         offset={props.offset}\r\n *         placement={props.placement}\r\n *       >\r\n *         <Dialog {...overlayProps} title=\"Popover\">\r\n *           Here is some popover content\r\n *         </Dialog>\r\n *       </Popover>\r\n *     )}\r\n *   </div>\r\n * );\r\n * ```\r\n */\r\nexport function usePopoverTrigger(props?: OverlayTriggerProps) {\r\n  const triggerRef = useRef<HTMLButtonElement>(null);\r\n\r\n  const state = useOverlayTriggerState(props || {});\r\n  const { triggerProps, overlayProps } = useOverlayTrigger(\r\n    { type: \"dialog\" },\r\n    state,\r\n    triggerRef\r\n  );\r\n  const { buttonProps } = useButton(triggerProps, triggerRef);\r\n\r\n  return { buttonProps, overlayProps, buttonRef: triggerRef, state };\r\n}\r\n\r\ninterface PopoverProps extends Omit<AriaPopoverProps, \"popoverRef\"> {\r\n  /**\r\n   * Whether to show an arrow on the popover.\r\n   */\r\n  arrow?: boolean;\r\n  /**\r\n   * Content to display within the popover.\r\n   */\r\n  children: React.ReactNode;\r\n  /**\r\n   * Can optionally forward the ref to the popover.\r\n   */\r\n  popoverRef?: React.RefObject<HTMLDivElement>;\r\n  /**\r\n   * The `isOpen` state of the popover and the methods to toggle it.\r\n   * - type {@link OverlayTriggerState}\r\n   */\r\n  state: OverlayTriggerState;\r\n}\r\n\r\n/**\r\n * Popover is an unstyled popover component that handles positioning. It should be used\r\n * with the Dialog component to provide a styled popover.\r\n *\r\n * A popover displays interactive content in context with a trigger element.\r\n * A tooltip displays a description of an element on hover or focus.\r\n *\r\n * @see {@link usePopoverTrigger} for a complete usage example\r\n *\r\n * API:\r\n *  - {@link PopoverProps}\r\n *  - extends {@link AriaPopoverProps}\r\n */\r\nexport function Popover({\r\n  children,\r\n  state,\r\n  arrow = false,\r\n  offset,\r\n  ...props\r\n}: PopoverProps) {\r\n  const ref = useRef<HTMLDivElement>(null);\r\n  const { popoverRef = ref } = props;\r\n  const { className, style } = useTheme();\r\n\r\n  let { popoverProps, underlayProps, arrowProps, placement } = usePopover(\r\n    {\r\n      ...props,\r\n      offset,\r\n      popoverRef,\r\n    },\r\n    state\r\n  );\r\n\r\n  return (\r\n    <Overlay>\r\n      <div {...underlayProps} style={{ position: \"fixed\", inset: 0 }} />\r\n      <div\r\n        {...popoverProps}\r\n        ref={popoverRef}\r\n        className={csx(\"proton-Popover\", className)}\r\n        style={{ ...popoverProps.style, ...style }}\r\n        data-testid={props[\"data-testid\"] || undefined}\r\n        data-placement={placement}\r\n        data-entering={true}\r\n      >\r\n        <DismissButton onDismiss={state.close} />\r\n        {arrow && (\r\n          <svg\r\n            {...arrowProps}\r\n            className=\"arrow\"\r\n            data-placement={placement}\r\n            viewBox=\"0 0 12 12\"\r\n          >\r\n            <title>arrow</title>\r\n            <path d=\"M0 0 L6 6 L12 0\" />\r\n          </svg>\r\n        )}\r\n        {children}\r\n      </div>\r\n    </Overlay>\r\n  );\r\n}\r\n\r\nexport default Popover;\r\n"],"names":["usePopoverTrigger","props","triggerRef","useRef","state","useOverlayTriggerState","triggerProps","overlayProps","useOverlayTrigger","buttonProps","useButton","Popover","children","arrow","offset","ref","popoverRef","className","style","useTheme","popoverProps","underlayProps","arrowProps","placement","usePopover","Overlay","jsx","jsxs","csx","DismissButton"],"mappings":"2wBAmDO,SAASA,EAAkBC,EAA6B,CACvD,MAAAC,EAAaC,SAA0B,IAAI,EAE3CC,EAAQC,EAAAA,uBAAuBJ,GAAS,CAAE,CAAA,EAC1C,CAAE,aAAAK,EAAc,aAAAC,CAAA,EAAiBC,EAAA,kBACrC,CAAE,KAAM,QAAS,EACjBJ,EACAF,CAAA,EAEI,CAAE,YAAAO,CAAgB,EAAAC,EAAA,UAAUJ,EAAcJ,CAAU,EAE1D,MAAO,CAAE,YAAAO,EAAa,aAAAF,EAAc,UAAWL,EAAY,MAAAE,CAAM,CACnE,CAmCO,SAASO,EAAQ,CACtB,SAAAC,EACA,MAAAR,EACA,MAAAS,EAAQ,GACR,OAAAC,EACA,GAAGb,CACL,EAAiB,CACT,MAAAc,EAAMZ,SAAuB,IAAI,EACjC,CAAE,WAAAa,EAAaD,CAAQ,EAAAd,EACvB,CAAE,UAAAgB,EAAW,MAAAC,CAAM,EAAIC,EAAS,SAAA,EAEtC,GAAI,CAAE,aAAAC,EAAc,cAAAC,EAAe,WAAAC,EAAY,UAAAC,CAAc,EAAAC,EAAA,WAC3D,CACE,GAAGvB,EACH,OAAAa,EACA,WAAAE,CACF,EACAZ,CAAA,EAGF,gCACGqB,UACC,CAAA,SAAA,CAACC,EAAAA,kBAAAA,IAAA,MAAA,CAAK,GAAGL,EAAe,MAAO,CAAE,SAAU,QAAS,MAAO,CAAA,EAAK,EAChEM,EAAA,kBAAA,KAAC,MAAA,CACE,GAAGP,EACJ,IAAKJ,EACL,UAAWY,EAAAA,IAAI,iBAAkBX,CAAS,EAC1C,MAAO,CAAE,GAAGG,EAAa,MAAO,GAAGF,CAAM,EACzC,cAAajB,EAAM,aAAa,GAAK,OACrC,iBAAgBsB,EAChB,gBAAe,GAEf,SAAA,CAACG,EAAAA,kBAAAA,IAAAG,EAAAA,cAAA,CAAc,UAAWzB,EAAM,KAAO,CAAA,EACtCS,GACCc,EAAA,kBAAA,KAAC,MAAA,CACE,GAAGL,EACJ,UAAU,QACV,iBAAgBC,EAChB,QAAQ,YAER,SAAA,CAAAG,EAAAA,kBAAAA,IAAC,SAAM,SAAK,OAAA,CAAA,EACZA,EAAAA,kBAAAA,IAAC,OAAK,CAAA,EAAE,iBAAkB,CAAA,CAAA,CAAA,CAC5B,EAEDd,CAAA,CAAA,CACH,CACF,CAAA,CAAA,CAEJ"}
+{"version":3,"file":"Popover.cjs.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Popover as RadixPopover } from \"radix-ui\";\r\nimport React, { CSSProperties } from \"react\";\r\nimport \"./Popover.css\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\nimport { csx } from \"../../utils/string\";\r\n\r\nexport type PopoverSide = \"top\" | \"right\" | \"bottom\" | \"left\";\r\nexport type PopoverAlign = \"start\" | \"center\" | \"end\";\r\n\r\nexport interface PopoverProps {\r\n  /**\r\n   * The trigger element for the popover.\r\n   * @warning Do NOT pass a <button> element here. Use a span, div, or other non-button element.\r\n   * If a button is passed, an error will be thrown.\r\n   */\r\n  trigger: React.ReactNode;\r\n  /**\r\n   * The content of the popover.\r\n   */\r\n  children: React.ReactNode;\r\n  /**\r\n   * Constrain the width of the popover to the width of the trigger.\r\n   */\r\n  constrainWidth?: boolean;\r\n  /**\r\n   * Control open state (controlled mode).\r\n   */\r\n  open?: boolean;\r\n  /**\r\n   * Default open state (uncontrolled mode).\r\n   */\r\n  defaultOpen?: boolean;\r\n  /**\r\n   * Callback when open state changes.\r\n   */\r\n  onOpenChange?: (open: boolean) => void;\r\n  /**\r\n   * Popover side placement\r\n   * {@link PopoverSide}\r\n   */\r\n  side?: PopoverSide;\r\n  /**\r\n   * Popover alignment\r\n   * {@link PopoverAlign}\r\n   */\r\n  align?: PopoverAlign;\r\n  /**\r\n   * Show an arrow pointing to the trigger.\r\n   */\r\n  arrow?: boolean;\r\n  /**\r\n   * Test id for the popover content.\r\n   */\r\n  \"data-testid\"?: string;\r\n}\r\n\r\n/**\r\n * A popover component that handles positioning and supports controlled and uncontrolled modes.\r\n *\r\n * A popover displays interactive content in context with a trigger element.\r\n * A tooltip displays a description of an element on hover or focus.\r\n *\r\n * API:\r\n *  - {@link PopoverProps}\r\n */\r\nexport function Popover({\r\n  trigger,\r\n  children,\r\n  open,\r\n  defaultOpen,\r\n  onOpenChange,\r\n  side = \"top\",\r\n  align = \"center\",\r\n  arrow = false,\r\n  constrainWidth = false,\r\n  \"data-testid\": testId,\r\n}: PopoverProps) {\r\n  const { className: themeClass, style: themeStyle } = useTheme();\r\n\r\n  return (\r\n    <RadixPopover.Root\r\n      open={open}\r\n      defaultOpen={defaultOpen}\r\n      onOpenChange={onOpenChange}\r\n    >\r\n      <RadixPopover.Trigger asChild>\r\n        <div>{trigger}</div>\r\n      </RadixPopover.Trigger>\r\n\r\n      <RadixPopover.Portal>\r\n        <RadixPopover.Content\r\n          side={side}\r\n          sideOffset={2}\r\n          align={align}\r\n          style={themeStyle as CSSProperties}\r\n          className={csx(\r\n            \"proton-Popover\",\r\n            constrainWidth && \"proton-Popover__constrained\",\r\n            themeClass\r\n          )}\r\n          data-testid={testId}\r\n        >\r\n          {arrow && <RadixPopover.Arrow className=\"arrow\" />}\r\n          {children}\r\n        </RadixPopover.Content>\r\n      </RadixPopover.Portal>\r\n    </RadixPopover.Root>\r\n  );\r\n}\r\n"],"names":["Popover","trigger","children","open","defaultOpen","onOpenChange","side","align","arrow","constrainWidth","testId","themeClass","themeStyle","useTheme","jsxs","RadixPopover","jsx","csx"],"mappings":"uRAmEO,SAASA,EAAQ,CACtB,QAAAC,EACA,SAAAC,EACA,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,KAAAC,EAAO,MACP,MAAAC,EAAQ,SACR,MAAAC,EAAQ,GACR,eAAAC,EAAiB,GACjB,cAAeC,CACjB,EAAiB,CACf,KAAM,CAAE,UAAWC,EAAY,MAAOC,CAAA,EAAeC,EAAAA,WAGnD,OAAAC,EAAA,kBAAA,KAACC,EAAAA,QAAa,KAAb,CACC,KAAAZ,EACA,YAAAC,EACA,aAAAC,EAEA,SAAA,CAACW,EAAAA,kBAAAA,IAAAD,EAAAA,QAAa,QAAb,CAAqB,QAAO,GAC3B,SAACC,EAAA,kBAAA,IAAA,MAAA,CAAK,WAAQ,CAChB,CAAA,EAEAA,EAAAA,kBAAAA,IAACD,EAAa,QAAA,OAAb,CACC,SAAAD,EAAA,kBAAA,KAACC,EAAAA,QAAa,QAAb,CACC,KAAAT,EACA,WAAY,EACZ,MAAAC,EACA,MAAOK,EACP,UAAWK,EAAA,IACT,iBACAR,GAAkB,8BAClBE,CACF,EACA,cAAaD,EAEZ,SAAA,CAAAF,GAAUQ,EAAA,kBAAA,IAAAD,EAAA,QAAa,MAAb,CAAmB,UAAU,QAAQ,EAC/Cb,CAAA,CAAA,CAAA,EAEL,CAAA,CAAA,CAAA,CAGN"}

package/dist/components/Popover/Popover.es.js

@@ -1,74 +1,53 @@
 import { j as e } from "../../node_modules/react/jsx-runtime.es.js";
-import { useRef as f } from "react";
-import { useOverlayTrigger as x } from "../../node_modules/@react-aria/overlays/dist/useOverlayTrigger.es.js";
-import { DismissButton as $ } from "../../node_modules/@react-aria/overlays/dist/DismissButton.es.js";
-import { usePopover as v } from "../../node_modules/@react-aria/overlays/dist/usePopover.es.js";
-import { Overlay as b } from "../../node_modules/@react-aria/overlays/dist/Overlay.es.js";
-import { useButton as g } from "../../node_modules/@react-aria/button/dist/useButton.es.js";
-import { useOverlayTriggerState as y } from "../../node_modules/@react-stately/overlays/dist/useOverlayTriggerState.es.js";
-import { useTheme as P } from "../ThemeProvider.es.js";
+import { Popover as o } from "radix-ui";
 /* empty css               */
-import { csx as j } from "../../utils/string.es.js";
-function S(s) {
-  const r = f(null), t = y(s || {}), { triggerProps: a, overlayProps: o } = x(
-    { type: "dialog" },
-    t,
-    r
-  ), { buttonProps: i } = g(a, r);
-  return { buttonProps: i, overlayProps: o, buttonRef: r, state: t };
-}
-function k({
+import { useTheme as f } from "../ThemeProvider.es.js";
+import { csx as h } from "../../utils/string.es.js";
+function C({
+  trigger: r,
   children: s,
-  state: r,
-  arrow: t = !1,
-  offset: a,
-  ...o
+  open: t,
+  defaultOpen: a,
+  onOpenChange: i,
+  side: n = "top",
+  align: l = "center",
+  arrow: m = !1,
+  constrainWidth: p = !1,
+  "data-testid": c
 }) {
-  const i = f(null), { popoverRef: p = i } = o, { className: m, style: d } = P();
-  let { popoverProps: n, underlayProps: l, arrowProps: u, placement: c } = v(
+  const { className: d, style: x } = f();
+  return /* @__PURE__ */ e.jsxs(
+    o.Root,
     {
-      ...o,
-      offset: a,
-      popoverRef: p
-    },
-    r
+      open: t,
+      defaultOpen: a,
+      onOpenChange: i,
+      children: [
+        /* @__PURE__ */ e.jsx(o.Trigger, { asChild: !0, children: /* @__PURE__ */ e.jsx("div", { children: r }) }),
+        /* @__PURE__ */ e.jsx(o.Portal, { children: /* @__PURE__ */ e.jsxs(
+          o.Content,
+          {
+            side: n,
+            sideOffset: 2,
+            align: l,
+            style: x,
+            className: h(
+              "proton-Popover",
+              p && "proton-Popover__constrained",
+              d
+            ),
+            "data-testid": c,
+            children: [
+              m && /* @__PURE__ */ e.jsx(o.Arrow, { className: "arrow" }),
+              s
+            ]
+          }
+        ) })
+      ]
+    }
   );
-  return /* @__PURE__ */ e.jsxs(b, { children: [
-    /* @__PURE__ */ e.jsx("div", { ...l, style: { position: "fixed", inset: 0 } }),
-    /* @__PURE__ */ e.jsxs(
-      "div",
-      {
-        ...n,
-        ref: p,
-        className: j("proton-Popover", m),
-        style: { ...n.style, ...d },
-        "data-testid": o["data-testid"] || void 0,
-        "data-placement": c,
-        "data-entering": !0,
-        children: [
-          /* @__PURE__ */ e.jsx($, { onDismiss: r.close }),
-          t && /* @__PURE__ */ e.jsxs(
-            "svg",
-            {
-              ...u,
-              className: "arrow",
-              "data-placement": c,
-              viewBox: "0 0 12 12",
-              children: [
-                /* @__PURE__ */ e.jsx("title", { children: "arrow" }),
-                /* @__PURE__ */ e.jsx("path", { d: "M0 0 L6 6 L12 0" })
-              ]
-            }
-          ),
-          s
-        ]
-      }
-    )
-  ] });
 }
 export {
-  k as Popover,
-  k as default,
-  S as usePopoverTrigger
+  C as Popover
 };
 //# sourceMappingURL=Popover.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.es.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useRef } from \"react\";\r\nimport type { AriaPopoverProps } from \"@react-aria/overlays\";\r\nimport { DismissButton, Overlay, usePopover } from \"@react-aria/overlays\";\r\nimport { useButton } from \"@react-aria/button\";\r\nimport { useOverlayTrigger } from \"@react-aria/overlays\";\r\nimport {\r\n  OverlayTriggerProps,\r\n  useOverlayTriggerState,\r\n  type OverlayTriggerState,\r\n} from \"@react-stately/overlays\";\r\nimport { csx } from \"../../utils\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\n\r\nimport \"./Popover.css\";\r\n\r\n/**\r\n * Hook for creating a popover trigger. This hook manages the state and events for the popover\r\n * and popover trigger. For examples see Popover.stories.tsx.\r\n *\r\n * API:\r\n *  - {@link OverlayTriggerProps}\r\n *\r\n * @example\r\n * ```tsx\r\n * let { buttonProps, overlayProps, buttonRef, state } = usePopoverTrigger();\r\n *\r\n * return (\r\n *   <div>\r\n *     <button {...buttonProps} ref={buttonRef}>\r\n *       Trigger\r\n *     </button>\r\n *\r\n *     {state.isOpen && (\r\n *       <Popover\r\n *         state={state}\r\n *         triggerRef={buttonRef}\r\n *         arrow={props.arrow}\r\n *         offset={props.offset}\r\n *         placement={props.placement}\r\n *       >\r\n *         <Dialog {...overlayProps} title=\"Popover\">\r\n *           Here is some popover content\r\n *         </Dialog>\r\n *       </Popover>\r\n *     )}\r\n *   </div>\r\n * );\r\n * ```\r\n */\r\nexport function usePopoverTrigger(props?: OverlayTriggerProps) {\r\n  const triggerRef = useRef<HTMLButtonElement>(null);\r\n\r\n  const state = useOverlayTriggerState(props || {});\r\n  const { triggerProps, overlayProps } = useOverlayTrigger(\r\n    { type: \"dialog\" },\r\n    state,\r\n    triggerRef\r\n  );\r\n  const { buttonProps } = useButton(triggerProps, triggerRef);\r\n\r\n  return { buttonProps, overlayProps, buttonRef: triggerRef, state };\r\n}\r\n\r\ninterface PopoverProps extends Omit<AriaPopoverProps, \"popoverRef\"> {\r\n  /**\r\n   * Whether to show an arrow on the popover.\r\n   */\r\n  arrow?: boolean;\r\n  /**\r\n   * Content to display within the popover.\r\n   */\r\n  children: React.ReactNode;\r\n  /**\r\n   * Can optionally forward the ref to the popover.\r\n   */\r\n  popoverRef?: React.RefObject<HTMLDivElement>;\r\n  /**\r\n   * The `isOpen` state of the popover and the methods to toggle it.\r\n   * - type {@link OverlayTriggerState}\r\n   */\r\n  state: OverlayTriggerState;\r\n}\r\n\r\n/**\r\n * Popover is an unstyled popover component that handles positioning. It should be used\r\n * with the Dialog component to provide a styled popover.\r\n *\r\n * A popover displays interactive content in context with a trigger element.\r\n * A tooltip displays a description of an element on hover or focus.\r\n *\r\n * @see {@link usePopoverTrigger} for a complete usage example\r\n *\r\n * API:\r\n *  - {@link PopoverProps}\r\n *  - extends {@link AriaPopoverProps}\r\n */\r\nexport function Popover({\r\n  children,\r\n  state,\r\n  arrow = false,\r\n  offset,\r\n  ...props\r\n}: PopoverProps) {\r\n  const ref = useRef<HTMLDivElement>(null);\r\n  const { popoverRef = ref } = props;\r\n  const { className, style } = useTheme();\r\n\r\n  let { popoverProps, underlayProps, arrowProps, placement } = usePopover(\r\n    {\r\n      ...props,\r\n      offset,\r\n      popoverRef,\r\n    },\r\n    state\r\n  );\r\n\r\n  return (\r\n    <Overlay>\r\n      <div {...underlayProps} style={{ position: \"fixed\", inset: 0 }} />\r\n      <div\r\n        {...popoverProps}\r\n        ref={popoverRef}\r\n        className={csx(\"proton-Popover\", className)}\r\n        style={{ ...popoverProps.style, ...style }}\r\n        data-testid={props[\"data-testid\"] || undefined}\r\n        data-placement={placement}\r\n        data-entering={true}\r\n      >\r\n        <DismissButton onDismiss={state.close} />\r\n        {arrow && (\r\n          <svg\r\n            {...arrowProps}\r\n            className=\"arrow\"\r\n            data-placement={placement}\r\n            viewBox=\"0 0 12 12\"\r\n          >\r\n            <title>arrow</title>\r\n            <path d=\"M0 0 L6 6 L12 0\" />\r\n          </svg>\r\n        )}\r\n        {children}\r\n      </div>\r\n    </Overlay>\r\n  );\r\n}\r\n\r\nexport default Popover;\r\n"],"names":["usePopoverTrigger","props","triggerRef","useRef","state","useOverlayTriggerState","triggerProps","overlayProps","useOverlayTrigger","buttonProps","useButton","Popover","children","arrow","offset","ref","popoverRef","className","style","useTheme","popoverProps","underlayProps","arrowProps","placement","usePopover","Overlay","jsx","jsxs","csx","DismissButton"],"mappings":";;;;;;;;;;;AAmDO,SAASA,EAAkBC,GAA6B;AACvD,QAAAC,IAAaC,EAA0B,IAAI,GAE3CC,IAAQC,EAAuBJ,KAAS,CAAE,CAAA,GAC1C,EAAE,cAAAK,GAAc,cAAAC,EAAA,IAAiBC;AAAAA,IACrC,EAAE,MAAM,SAAS;AAAA,IACjBJ;AAAA,IACAF;AAAA,EAAA,GAEI,EAAE,aAAAO,EAAgB,IAAAC,EAAUJ,GAAcJ,CAAU;AAE1D,SAAO,EAAE,aAAAO,GAAa,cAAAF,GAAc,WAAWL,GAAY,OAAAE,EAAM;AACnE;AAmCO,SAASO,EAAQ;AAAA,EACtB,UAAAC;AAAA,EACA,OAAAR;AAAA,EACA,OAAAS,IAAQ;AAAA,EACR,QAAAC;AAAA,EACA,GAAGb;AACL,GAAiB;AACT,QAAAc,IAAMZ,EAAuB,IAAI,GACjC,EAAE,YAAAa,IAAaD,EAAQ,IAAAd,GACvB,EAAE,WAAAgB,GAAW,OAAAC,EAAM,IAAIC,EAAS;AAEtC,MAAI,EAAE,cAAAC,GAAc,eAAAC,GAAe,YAAAC,GAAY,WAAAC,EAAc,IAAAC;AAAAA,IAC3D;AAAA,MACE,GAAGvB;AAAA,MACH,QAAAa;AAAA,MACA,YAAAE;AAAA,IACF;AAAA,IACAZ;AAAA,EAAA;AAGF,gCACGqB,GACC,EAAA,UAAA;AAAA,IAACC,gBAAAA,EAAAA,IAAA,OAAA,EAAK,GAAGL,GAAe,OAAO,EAAE,UAAU,SAAS,OAAO,EAAA,GAAK;AAAA,IAChEM,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGP;AAAA,QACJ,KAAKJ;AAAA,QACL,WAAWY,EAAI,kBAAkBX,CAAS;AAAA,QAC1C,OAAO,EAAE,GAAGG,EAAa,OAAO,GAAGF,EAAM;AAAA,QACzC,eAAajB,EAAM,aAAa,KAAK;AAAA,QACrC,kBAAgBsB;AAAA,QAChB,iBAAe;AAAA,QAEf,UAAA;AAAA,UAACG,gBAAAA,EAAAA,IAAAG,GAAA,EAAc,WAAWzB,EAAM,MAAO,CAAA;AAAA,UACtCS,KACCc,gBAAAA,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAGL;AAAA,cACJ,WAAU;AAAA,cACV,kBAAgBC;AAAA,cAChB,SAAQ;AAAA,cAER,UAAA;AAAA,gBAAAG,gBAAAA,EAAAA,IAAC,WAAM,UAAK,QAAA,CAAA;AAAA,gBACZA,gBAAAA,EAAAA,IAAC,QAAK,EAAA,GAAE,kBAAkB,CAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAC5B;AAAA,UAEDd;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Popover.es.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Popover as RadixPopover } from \"radix-ui\";\r\nimport React, { CSSProperties } from \"react\";\r\nimport \"./Popover.css\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\nimport { csx } from \"../../utils/string\";\r\n\r\nexport type PopoverSide = \"top\" | \"right\" | \"bottom\" | \"left\";\r\nexport type PopoverAlign = \"start\" | \"center\" | \"end\";\r\n\r\nexport interface PopoverProps {\r\n  /**\r\n   * The trigger element for the popover.\r\n   * @warning Do NOT pass a <button> element here. Use a span, div, or other non-button element.\r\n   * If a button is passed, an error will be thrown.\r\n   */\r\n  trigger: React.ReactNode;\r\n  /**\r\n   * The content of the popover.\r\n   */\r\n  children: React.ReactNode;\r\n  /**\r\n   * Constrain the width of the popover to the width of the trigger.\r\n   */\r\n  constrainWidth?: boolean;\r\n  /**\r\n   * Control open state (controlled mode).\r\n   */\r\n  open?: boolean;\r\n  /**\r\n   * Default open state (uncontrolled mode).\r\n   */\r\n  defaultOpen?: boolean;\r\n  /**\r\n   * Callback when open state changes.\r\n   */\r\n  onOpenChange?: (open: boolean) => void;\r\n  /**\r\n   * Popover side placement\r\n   * {@link PopoverSide}\r\n   */\r\n  side?: PopoverSide;\r\n  /**\r\n   * Popover alignment\r\n   * {@link PopoverAlign}\r\n   */\r\n  align?: PopoverAlign;\r\n  /**\r\n   * Show an arrow pointing to the trigger.\r\n   */\r\n  arrow?: boolean;\r\n  /**\r\n   * Test id for the popover content.\r\n   */\r\n  \"data-testid\"?: string;\r\n}\r\n\r\n/**\r\n * A popover component that handles positioning and supports controlled and uncontrolled modes.\r\n *\r\n * A popover displays interactive content in context with a trigger element.\r\n * A tooltip displays a description of an element on hover or focus.\r\n *\r\n * API:\r\n *  - {@link PopoverProps}\r\n */\r\nexport function Popover({\r\n  trigger,\r\n  children,\r\n  open,\r\n  defaultOpen,\r\n  onOpenChange,\r\n  side = \"top\",\r\n  align = \"center\",\r\n  arrow = false,\r\n  constrainWidth = false,\r\n  \"data-testid\": testId,\r\n}: PopoverProps) {\r\n  const { className: themeClass, style: themeStyle } = useTheme();\r\n\r\n  return (\r\n    <RadixPopover.Root\r\n      open={open}\r\n      defaultOpen={defaultOpen}\r\n      onOpenChange={onOpenChange}\r\n    >\r\n      <RadixPopover.Trigger asChild>\r\n        <div>{trigger}</div>\r\n      </RadixPopover.Trigger>\r\n\r\n      <RadixPopover.Portal>\r\n        <RadixPopover.Content\r\n          side={side}\r\n          sideOffset={2}\r\n          align={align}\r\n          style={themeStyle as CSSProperties}\r\n          className={csx(\r\n            \"proton-Popover\",\r\n            constrainWidth && \"proton-Popover__constrained\",\r\n            themeClass\r\n          )}\r\n          data-testid={testId}\r\n        >\r\n          {arrow && <RadixPopover.Arrow className=\"arrow\" />}\r\n          {children}\r\n        </RadixPopover.Content>\r\n      </RadixPopover.Portal>\r\n    </RadixPopover.Root>\r\n  );\r\n}\r\n"],"names":["Popover","trigger","children","open","defaultOpen","onOpenChange","side","align","arrow","constrainWidth","testId","themeClass","themeStyle","useTheme","jsxs","RadixPopover","jsx","csx"],"mappings":";;;;;AAmEO,SAASA,EAAQ;AAAA,EACtB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,OAAAC,IAAQ;AAAA,EACR,gBAAAC,IAAiB;AAAA,EACjB,eAAeC;AACjB,GAAiB;AACf,QAAM,EAAE,WAAWC,GAAY,OAAOC,EAAA,IAAeC;AAGnD,SAAAC,gBAAAA,EAAA;AAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,MAAAZ;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MAEA,UAAA;AAAA,QAACW,gBAAAA,EAAAA,IAAAD,EAAa,SAAb,EAAqB,SAAO,IAC3B,UAACC,gBAAAA,EAAA,IAAA,OAAA,EAAK,aAAQ,EAChB,CAAA;AAAA,QAEAA,gBAAAA,EAAAA,IAACD,EAAa,QAAb,EACC,UAAAD,gBAAAA,EAAA;AAAA,UAACC,EAAa;AAAA,UAAb;AAAA,YACC,MAAAT;AAAA,YACA,YAAY;AAAA,YACZ,OAAAC;AAAA,YACA,OAAOK;AAAA,YACP,WAAWK;AAAA,cACT;AAAA,cACAR,KAAkB;AAAA,cAClBE;AAAA,YACF;AAAA,YACA,eAAaD;AAAA,YAEZ,UAAA;AAAA,cAAAF,KAAUQ,gBAAAA,EAAA,IAAAD,EAAa,OAAb,EAAmB,WAAU,SAAQ;AAAA,cAC/Cb;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Select/Select.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"),l=require("react"),P=require("../../node_modules/@react-aria/select/dist/useSelect.cjs.js"),B=require("../../node_modules/@react-aria/select/dist/HiddenSelect.cjs.js"),O=require("../../node_modules/@react-aria/button/dist/useButton.cjs.js"),N=require("../../node_modules/@react-stately/select/dist/useSelectState.cjs.js"),I=require("../../node_modules/@react-stately/collections/dist/Item.cjs.js"),k=require("../../hooks/useBreakpoint.cjs.js"),M=require("../ActionMenu/ActionMenu.cjs.js"),w=require("../ListBox/ListBox.cjs.js"),A=require("../Popover/Popover.cjs.js");;/* empty css                */const S=require("../../utils/string.cjs.js"),L=require("../../constants/breakpoint.cjs.js"),R=l.forwardRef((s,n)=>{let{buttonProps:i}=O.useButton({...s,isDisabled:s.disabled},n);return e.jsxRuntimeExports.jsx("button",{...i,ref:n,className:S.csx("proton-Select__trigger",s.disabled&&"proton-Select__trigger--disabled",!s.isOpen&&"proton-Select__trigger--closed",s.isOpen&&"proton-Select__trigger--opened"),children:s.children})});R.displayName="ProtonUISelectButton";function g({label:s,name:n,isDisabled:i,disabledKeys:a,selectedKey:h,onSelectionChange:E,defaultSelectedKey:_,onOpen:u,onClose:d,items:x,"data-testid":p}){const j={label:s,isDisabled:i,disabledKeys:a,selectedKey:h,defaultSelectedKey:_,onSelectionChange:E,onOpenChange:r=>{r?u==null||u():d==null||d()},"data-testid":p,children:x.map(r=>e.jsxRuntimeExports.jsx(I.Item,{textValue:r.label,children:r.label},r.key))},t=N.useSelectState(j),f=k.useBreakpoint(L.BREAKPOINTS.MEDIUM),o=l.useRef(null),c=l.useRef(null),{labelProps:m,triggerProps:v,valueProps:b,menuProps:q}=P.useSelect({...j,label:s||n},t,o);l.useEffect(()=>{t.isOpen&&c.current&&o.current&&!c.current.style.minWidth&&(c.current.style.minWidth=`${o.current.offsetWidth}px`)},[t.isOpen]);const y=x.map(r=>({key:r.key,label:r.label,to:r.to,onAction:()=>{t.setSelectedKey(r.key),t.close()}}));return e.jsxRuntimeExports.jsxs("div",{className:"proton-Select","aria-label":s||n,"aria-disabled":i,children:[s?e.jsxRuntimeExports.jsx("div",{...m,className:"proton-Select__label","data-testid":"select-label",children:s}):e.jsxRuntimeExports.jsx("div",{...m}),e.jsxRuntimeExports.jsx(B.HiddenSelect,{isDisabled:i,state:t,triggerRef:o,label:s||n,name:n,"data-testid":"hidden-select-container"}),e.jsxRuntimeExports.jsxs(R,{...v,isOpen:t.isOpen,ref:o,disabled:i,"data-testid":p,children:[e.jsxRuntimeExports.jsx("div",{...b,className:"proton-Select__value",children:t.selectedItem?t.selectedItem.rendered:"Select an option"}),e.jsxRuntimeExports.jsx("div",{className:S.csx("proton-Select__trigger_icon",t.isOpen&&"proton-Select__trigger_icon--flipped"),"aria-hidden":"true",children:e.jsxRuntimeExports.jsxs("svg",{id:"caret-down",viewBox:"0 0 512 512",children:[e.jsxRuntimeExports.jsx("title",{children:t.isOpen?"caret down":"caret up"}),e.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"})]})})]}),t.isOpen&&e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:f?e.jsxRuntimeExports.jsx(M.ActionMenu,{isOpen:t.isOpen,onClose:()=>t.close(),actions:y,selectedKeys:[t.selectedKey.toString()],disabledKeys:a}):e.jsxRuntimeExports.jsx("div",{className:"proton-Select__popover",children:e.jsxRuntimeExports.jsx(A.Popover,{state:t,triggerRef:o,popoverRef:c,placement:"bottom start","data-testid":"select-popover",children:e.jsxRuntimeExports.jsx(w.ListBox,{...q,state:t})})})})]})}g.displayName="ProtonUISelect";exports.Select=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../node_modules/react/jsx-runtime.cjs.js"),a=require("react"),n=require("radix-ui"),B=require("../../hooks/useBreakpoint.cjs.js"),T=require("../ActionMenu/ActionMenu.cjs.js");;/* empty css                */;/* empty css                    */const P=require("../ThemeProvider.cjs.js"),m=require("../../utils/string.cjs.js"),A=require("../../constants/breakpoint.cjs.js"),E=a.forwardRef(({disabled:r,isOpen:i,children:c,onClick:l,...s},x)=>e.jsxRuntimeExports.jsx("button",{...s,ref:x,disabled:r,onClick:l,className:m.csx("proton-Select__trigger",r&&"proton-Select__trigger--disabled",!i&&"proton-Select__trigger--closed",i&&"proton-Select__trigger--opened"),children:c}));E.displayName="ProtonUISelectButton";function N({label:r,name:i,isDisabled:c,disabledKeys:l,selectedKey:s,onSelectionChange:x,defaultSelectedKey:b,onOpen:h,onClose:R,items:S,"data-testid":_}){const[o,p]=a.useState(!1),[k,g]=a.useState(s||b||""),{className:I,style:M}=P.useTheme(),q=B.useBreakpoint(A.BREAKPOINTS.MEDIUM),f=a.useRef(null),u=a.useRef(null),d=s!==void 0?s:k,j=S.find(t=>t.key===d),v=t=>{s===void 0&&g(t),x==null||x(t),u.current&&(u.current.value=t,u.current.dispatchEvent(new Event("change",{bubbles:!0})))},w=t=>{p(t),t?h==null||h():R==null||R()};a.useEffect(()=>{s!==void 0&&g(s)},[s]);const y=S.map(t=>({key:t.key,label:t.label,to:t.to,onAction:()=>{v(t.key),p(!1)}}));return q?e.jsxRuntimeExports.jsxs("div",{className:"proton-Select","aria-label":r||i,"aria-disabled":c,children:[r&&e.jsxRuntimeExports.jsx("div",{className:"proton-Select__label","data-testid":"select-label",children:r}),e.jsxRuntimeExports.jsx("input",{ref:u,type:"hidden",name:i,value:d,"data-testid":"hidden-select-container"}),e.jsxRuntimeExports.jsxs(E,{isOpen:o,ref:f,disabled:c,"data-testid":_,onClick:()=>p(!0),children:[e.jsxRuntimeExports.jsx("div",{className:"proton-Select__value",children:j?j.label:"Select an option"}),e.jsxRuntimeExports.jsx("div",{className:m.csx("proton-Select__trigger_icon",o&&"proton-Select__trigger_icon--flipped"),"aria-hidden":"true",children:e.jsxRuntimeExports.jsxs("svg",{id:"caret-down",viewBox:"0 0 512 512",children:[e.jsxRuntimeExports.jsx("title",{children:o?"caret down":"caret up"}),e.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"})]})})]}),e.jsxRuntimeExports.jsx(T.ActionMenu,{isOpen:o,onClose:()=>p(!1),actions:y,selectedKeys:[d],disabledKeys:l})]}):e.jsxRuntimeExports.jsxs("div",{className:"proton-Select","aria-label":r||i,"aria-disabled":c,children:[r&&e.jsxRuntimeExports.jsx("div",{className:"proton-Select__label","data-testid":"select-label",children:r}),e.jsxRuntimeExports.jsx("input",{ref:u,type:"hidden",name:i,value:d,"data-testid":"hidden-select-container"}),e.jsxRuntimeExports.jsxs(n.Select.Root,{value:d,onValueChange:v,onOpenChange:w,disabled:c,children:[e.jsxRuntimeExports.jsx(n.Select.Trigger,{asChild:!0,children:e.jsxRuntimeExports.jsxs(E,{isOpen:o,ref:f,disabled:c,"data-testid":_,children:[e.jsxRuntimeExports.jsx(n.Select.Value,{className:"proton-Select__value",placeholder:"Select an option",children:j?j.label:"Select an option"}),e.jsxRuntimeExports.jsx(n.Select.Icon,{asChild:!0,children:e.jsxRuntimeExports.jsx("div",{className:m.csx("proton-Select__trigger_icon",o&&"proton-Select__trigger_icon--flipped"),"aria-hidden":"true",children:e.jsxRuntimeExports.jsxs("svg",{id:"caret-down",viewBox:"0 0 512 512",children:[e.jsxRuntimeExports.jsx("title",{children:o?"caret down":"caret up"}),e.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"})]})})})]})}),e.jsxRuntimeExports.jsx(n.Select.Portal,{children:e.jsxRuntimeExports.jsx(n.Select.Content,{className:m.csx("proton-Menu","proton-MenuTrigger__menu",I),style:M,position:"popper",children:e.jsxRuntimeExports.jsx(n.Select.Viewport,{children:S.map(t=>e.jsxRuntimeExports.jsx(n.Select.Item,{value:t.key,disabled:l==null?void 0:l.includes(t.key),className:"proton-Menu__item",children:e.jsxRuntimeExports.jsx(n.Select.ItemText,{children:t.label})},t.key))})})})]})]})}N.displayName="ProtonUISelect";exports.Select=N;
 //# sourceMappingURL=Select.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { forwardRef, ReactNode, RefObject, useEffect, useRef } from \"react\";\r\nimport { HiddenSelect, useSelect } from \"@react-aria/select\";\r\nimport { useButton } from \"@react-aria/button\";\r\nimport { useSelectState } from \"@react-stately/select\";\r\nimport { Item } from \"@react-stately/collections\";\r\n\r\nimport { BREAKPOINTS } from \"../../constants\";\r\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\r\nimport { csx } from \"../../utils\";\r\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\r\nimport { ListBox } from \"../ListBox/ListBox\";\r\nimport { Popover } from \"../Popover/Popover\";\r\n\r\nimport \"./Select.css\";\r\n\r\ninterface SelectButtonProps {\r\n  disabled?: boolean;\r\n  isOpen?: boolean;\r\n  children?: ReactNode;\r\n}\r\n\r\nconst SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(\r\n  (props, ref: RefObject<HTMLButtonElement>) => {\r\n    let { buttonProps } = useButton(\r\n      {\r\n        ...props,\r\n        isDisabled: props.disabled,\r\n      },\r\n      ref\r\n    );\r\n\r\n    return (\r\n      <button\r\n        {...buttonProps}\r\n        ref={ref}\r\n        className={csx(\r\n          \"proton-Select__trigger\",\r\n          props.disabled && \"proton-Select__trigger--disabled\",\r\n          !props.isOpen && \"proton-Select__trigger--closed\",\r\n          props.isOpen && \"proton-Select__trigger--opened\"\r\n        )}\r\n      >\r\n        {props.children}\r\n      </button>\r\n    );\r\n  }\r\n);\r\nSelectButton.displayName = \"ProtonUISelectButton\";\r\n\r\ninterface SelectItem {\r\n  label: string;\r\n  key: string;\r\n  to?: string;\r\n}\r\n\r\nexport interface SelectProps {\r\n  /** Array of keys that should be disabled\r\n   * @example [\"Thing 1\", \"Thing 2\"]\r\n   */\r\n  disabledKeys?: string[];\r\n\r\n  /** The key of the default selected item */\r\n  defaultSelectedKey?: string;\r\n\r\n  /** Test ID for the select */\r\n  \"data-testid\"?: string;\r\n\r\n  /** Whether the select is disabled */\r\n  isDisabled?: boolean;\r\n\r\n  /** Array of items to display\r\n   * @example [{ key: \"thing-1\", label: \"Thing 1\" }, { key: \"thing-2\", label: \"Thing 2\" }]\r\n   */\r\n  items: SelectItem[];\r\n\r\n  /** Label to display above the select\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#text\r\n   */\r\n  label?: string;\r\n\r\n  /** The name of the select field */\r\n  name: string;\r\n\r\n  /** Callback fired when the menu closes */\r\n  onClose?: () => void;\r\n\r\n  /** Callback fired when the menu opens */\r\n  onOpen?: () => void;\r\n\r\n  /** Callback fired when selection changes */\r\n  onSelectionChange?: (key: string) => void;\r\n\r\n  /** Currently selected key */\r\n  selectedKey?: string;\r\n}\r\n\r\n/**\r\n * A dropdown select menu that opens a popover on desktop and an action menu on mobile.\r\n * Supports controlled and uncontrolled modes.\r\n *\r\n * API:\r\n *  - {@link SelectProps}\r\n */\r\nexport function Select({\r\n  label,\r\n  name,\r\n  isDisabled,\r\n  disabledKeys,\r\n  selectedKey,\r\n  onSelectionChange,\r\n  defaultSelectedKey,\r\n  onOpen,\r\n  onClose,\r\n  items,\r\n  \"data-testid\": testId,\r\n}: SelectProps) {\r\n  const selectProps = {\r\n    label,\r\n    isDisabled,\r\n    disabledKeys,\r\n    selectedKey,\r\n    defaultSelectedKey,\r\n    onSelectionChange,\r\n    onOpenChange: (isOpen: boolean) => {\r\n      if (isOpen) {\r\n        onOpen?.();\r\n      } else {\r\n        onClose?.();\r\n      }\r\n    },\r\n    \"data-testid\": testId,\r\n    children: items.map((item) => (\r\n      <Item key={item.key} textValue={item.label}>\r\n        {item.label}\r\n      </Item>\r\n    )),\r\n  };\r\n\r\n  const state = useSelectState(selectProps);\r\n  const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\r\n  const triggerRef = useRef<HTMLButtonElement>(null);\r\n  const popoverRef = useRef<HTMLDivElement>(null);\r\n  const { labelProps, triggerProps, valueProps, menuProps } = useSelect(\r\n    { ...selectProps, label: label || name },\r\n    state,\r\n    triggerRef\r\n  );\r\n\r\n  useEffect(() => {\r\n    if (\r\n      state.isOpen &&\r\n      popoverRef.current &&\r\n      triggerRef.current &&\r\n      !popoverRef.current.style.minWidth\r\n    ) {\r\n      // Adjust the popover width to be at least the width of the trigger\r\n      popoverRef.current.style.minWidth = `${triggerRef.current.offsetWidth}px`;\r\n    }\r\n  }, [state.isOpen]);\r\n\r\n  const actionItems: ActionMenuAction[] = items.map((item) => ({\r\n    key: item.key,\r\n    label: item.label,\r\n    to: item.to,\r\n    onAction: () => {\r\n      state.setSelectedKey(item.key);\r\n      state.close();\r\n    },\r\n  }));\r\n\r\n  return (\r\n    <div\r\n      className=\"proton-Select\"\r\n      aria-label={label || name}\r\n      aria-disabled={isDisabled}\r\n    >\r\n      {label ? (\r\n        <div\r\n          {...labelProps}\r\n          className=\"proton-Select__label\"\r\n          data-testid=\"select-label\"\r\n        >\r\n          {label}\r\n        </div>\r\n      ) : (\r\n        // If no label is provided, render an invisible label for a11y\r\n        <div {...labelProps} />\r\n      )}\r\n\r\n      <HiddenSelect\r\n        isDisabled={isDisabled}\r\n        state={state}\r\n        triggerRef={triggerRef}\r\n        label={label || name}\r\n        name={name}\r\n        data-testid=\"hidden-select-container\"\r\n      />\r\n\r\n      <SelectButton\r\n        {...triggerProps}\r\n        isOpen={state.isOpen}\r\n        ref={triggerRef}\r\n        disabled={isDisabled}\r\n        data-testid={testId}\r\n      >\r\n        <div {...valueProps} className=\"proton-Select__value\">\r\n          {state.selectedItem\r\n            ? state.selectedItem.rendered\r\n            : \"Select an option\"}\r\n        </div>\r\n        <div\r\n          className={csx(\r\n            \"proton-Select__trigger_icon\",\r\n            state.isOpen && \"proton-Select__trigger_icon--flipped\"\r\n          )}\r\n          aria-hidden=\"true\"\r\n        >\r\n          <svg id=\"caret-down\" viewBox=\"0 0 512 512\">\r\n            <title>{state.isOpen ? \"caret down\" : \"caret up\"}</title>\r\n            <path\r\n              fill=\"currentColor\"\r\n              d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"\r\n            />\r\n          </svg>\r\n        </div>\r\n      </SelectButton>\r\n\r\n      {state.isOpen && (\r\n        <>\r\n          {!isMobile ? (\r\n            <div className=\"proton-Select__popover\">\r\n              <Popover\r\n                state={state}\r\n                triggerRef={triggerRef}\r\n                popoverRef={popoverRef}\r\n                placement=\"bottom start\"\r\n                data-testid=\"select-popover\"\r\n              >\r\n                <ListBox {...menuProps} state={state} />\r\n              </Popover>\r\n            </div>\r\n          ) : (\r\n            <ActionMenu\r\n              isOpen={state.isOpen}\r\n              onClose={() => state.close()}\r\n              actions={actionItems}\r\n              selectedKeys={[state.selectedKey.toString()]}\r\n              disabledKeys={disabledKeys}\r\n            />\r\n          )}\r\n        </>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nSelect.displayName = \"ProtonUISelect\";\r\n"],"names":["SelectButton","forwardRef","props","ref","buttonProps","useButton","jsx","csx","Select","label","name","isDisabled","disabledKeys","selectedKey","onSelectionChange","defaultSelectedKey","onOpen","onClose","items","testId","selectProps","isOpen","item","Item","state","useSelectState","isMobile","useBreakpoint","BREAKPOINTS","triggerRef","useRef","popoverRef","labelProps","triggerProps","valueProps","menuProps","useSelect","useEffect","actionItems","jsxs","HiddenSelect","Fragment","ActionMenu","Popover","ListBox"],"mappings":"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"}
+{"version":3,"file":"Select.cjs.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {\r\n  forwardRef,\r\n  ReactNode,\r\n  RefObject,\r\n  useEffect,\r\n  useRef,\r\n  useState,\r\n} from \"react\";\r\nimport { Select as RadixSelect } from \"radix-ui\";\r\n\r\nimport { BREAKPOINTS } from \"../../constants\";\r\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\r\nimport { csx } from \"../../utils\";\r\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\r\n\r\nimport \"./Select.css\";\r\nimport \"../Menu/Menu.css\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\n\r\ninterface SelectButtonProps {\r\n  disabled?: boolean;\r\n  isOpen?: boolean;\r\n  children?: ReactNode;\r\n  onClick?: () => void;\r\n}\r\n\r\nconst SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(\r\n  (\r\n    { disabled, isOpen, children, onClick, ...props },\r\n    ref: RefObject<HTMLButtonElement>\r\n  ) => {\r\n    return (\r\n      <button\r\n        {...props}\r\n        ref={ref}\r\n        disabled={disabled}\r\n        onClick={onClick}\r\n        className={csx(\r\n          \"proton-Select__trigger\",\r\n          disabled && \"proton-Select__trigger--disabled\",\r\n          !isOpen && \"proton-Select__trigger--closed\",\r\n          isOpen && \"proton-Select__trigger--opened\"\r\n        )}\r\n      >\r\n        {children}\r\n      </button>\r\n    );\r\n  }\r\n);\r\nSelectButton.displayName = \"ProtonUISelectButton\";\r\n\r\ninterface SelectItem {\r\n  label: string;\r\n  key: string;\r\n  to?: string;\r\n}\r\n\r\nexport interface SelectProps {\r\n  /** Array of keys that should be disabled\r\n   * @example [\"Thing 1\", \"Thing 2\"]\r\n   */\r\n  disabledKeys?: string[];\r\n\r\n  /** The key of the default selected item */\r\n  defaultSelectedKey?: string;\r\n\r\n  /** Test ID for the select */\r\n  \"data-testid\"?: string;\r\n\r\n  /** Whether the select is disabled */\r\n  isDisabled?: boolean;\r\n\r\n  /** Array of items to display\r\n   * @example [{ key: \"thing-1\", label: \"Thing 1\" }, { key: \"thing-2\", label: \"Thing 2\" }]\r\n   */\r\n  items: SelectItem[];\r\n\r\n  /** Label to display above the select\r\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#text\r\n   */\r\n  label?: string;\r\n\r\n  /** The name of the select field */\r\n  name: string;\r\n\r\n  /** Callback fired when the menu closes */\r\n  onClose?: () => void;\r\n\r\n  /** Callback fired when the menu opens */\r\n  onOpen?: () => void;\r\n\r\n  /** Callback fired when selection changes */\r\n  onSelectionChange?: (key: string) => void;\r\n\r\n  /** Currently selected key */\r\n  selectedKey?: string;\r\n}\r\n\r\n/**\r\n * A dropdown select menu that opens a popover on desktop and an action menu on mobile.\r\n * Supports controlled and uncontrolled modes.\r\n *\r\n * API:\r\n *  - {@link SelectProps}\r\n */\r\nexport function Select({\r\n  label,\r\n  name,\r\n  isDisabled,\r\n  disabledKeys,\r\n  selectedKey,\r\n  onSelectionChange,\r\n  defaultSelectedKey,\r\n  onOpen,\r\n  onClose,\r\n  items,\r\n  \"data-testid\": testId,\r\n}: SelectProps) {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n  const [internalSelectedKey, setInternalSelectedKey] = useState(\r\n    selectedKey || defaultSelectedKey || \"\"\r\n  );\r\n  const { className: themeClass, style: themeStyle } = useTheme();\r\n  const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\r\n  const triggerRef = useRef<HTMLButtonElement>(null);\r\n  const hiddenInputRef = useRef<HTMLInputElement>(null);\r\n\r\n  // Handle controlled vs uncontrolled state\r\n  const currentSelectedKey =\r\n    selectedKey !== undefined ? selectedKey : internalSelectedKey;\r\n  const selectedItem = items.find((item) => item.key === currentSelectedKey);\r\n\r\n  const handleValueChange = (value: string) => {\r\n    if (selectedKey === undefined) {\r\n      setInternalSelectedKey(value);\r\n    }\r\n    onSelectionChange?.(value);\r\n\r\n    // Update hidden input for form submission\r\n    if (hiddenInputRef.current) {\r\n      hiddenInputRef.current.value = value;\r\n      hiddenInputRef.current.dispatchEvent(\r\n        new Event(\"change\", { bubbles: true })\r\n      );\r\n    }\r\n  };\r\n\r\n  const handleOpenChange = (open: boolean) => {\r\n    setIsOpen(open);\r\n    if (open) {\r\n      onOpen?.();\r\n    } else {\r\n      onClose?.();\r\n    }\r\n  };\r\n\r\n  // Update internal state when controlled selectedKey changes\r\n  useEffect(() => {\r\n    if (selectedKey !== undefined) {\r\n      setInternalSelectedKey(selectedKey);\r\n    }\r\n  }, [selectedKey]);\r\n\r\n  const actionItems: ActionMenuAction[] = items.map((item) => ({\r\n    key: item.key,\r\n    label: item.label,\r\n    to: item.to,\r\n    onAction: () => {\r\n      handleValueChange(item.key);\r\n      setIsOpen(false);\r\n    },\r\n  }));\r\n\r\n  if (isMobile) {\r\n    return (\r\n      <div\r\n        className=\"proton-Select\"\r\n        aria-label={label || name}\r\n        aria-disabled={isDisabled}\r\n      >\r\n        {label && (\r\n          <div className=\"proton-Select__label\" data-testid=\"select-label\">\r\n            {label}\r\n          </div>\r\n        )}\r\n\r\n        {/* Hidden input for form submission */}\r\n        <input\r\n          ref={hiddenInputRef}\r\n          type=\"hidden\"\r\n          name={name}\r\n          value={currentSelectedKey}\r\n          data-testid=\"hidden-select-container\"\r\n        />\r\n\r\n        <SelectButton\r\n          isOpen={isOpen}\r\n          ref={triggerRef}\r\n          disabled={isDisabled}\r\n          data-testid={testId}\r\n          onClick={() => setIsOpen(true)}\r\n        >\r\n          <div className=\"proton-Select__value\">\r\n            {selectedItem ? selectedItem.label : \"Select an option\"}\r\n          </div>\r\n          <div\r\n            className={csx(\r\n              \"proton-Select__trigger_icon\",\r\n              isOpen && \"proton-Select__trigger_icon--flipped\"\r\n            )}\r\n            aria-hidden=\"true\"\r\n          >\r\n            <svg id=\"caret-down\" viewBox=\"0 0 512 512\">\r\n              <title>{isOpen ? \"caret down\" : \"caret up\"}</title>\r\n              <path\r\n                fill=\"currentColor\"\r\n                d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"\r\n              />\r\n            </svg>\r\n          </div>\r\n        </SelectButton>\r\n\r\n        <ActionMenu\r\n          isOpen={isOpen}\r\n          onClose={() => setIsOpen(false)}\r\n          actions={actionItems}\r\n          selectedKeys={[currentSelectedKey]}\r\n          disabledKeys={disabledKeys}\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className=\"proton-Select\"\r\n      aria-label={label || name}\r\n      aria-disabled={isDisabled}\r\n    >\r\n      {label && (\r\n        <div className=\"proton-Select__label\" data-testid=\"select-label\">\r\n          {label}\r\n        </div>\r\n      )}\r\n\r\n      {/* Hidden input for form submission */}\r\n      <input\r\n        ref={hiddenInputRef}\r\n        type=\"hidden\"\r\n        name={name}\r\n        value={currentSelectedKey}\r\n        data-testid=\"hidden-select-container\"\r\n      />\r\n\r\n      <RadixSelect.Root\r\n        value={currentSelectedKey}\r\n        onValueChange={handleValueChange}\r\n        onOpenChange={handleOpenChange}\r\n        disabled={isDisabled}\r\n      >\r\n        <RadixSelect.Trigger asChild>\r\n          <SelectButton\r\n            isOpen={isOpen}\r\n            ref={triggerRef}\r\n            disabled={isDisabled}\r\n            data-testid={testId}\r\n          >\r\n            <RadixSelect.Value\r\n              className=\"proton-Select__value\"\r\n              placeholder=\"Select an option\"\r\n            >\r\n              {selectedItem ? selectedItem.label : \"Select an option\"}\r\n            </RadixSelect.Value>\r\n            <RadixSelect.Icon asChild>\r\n              <div\r\n                className={csx(\r\n                  \"proton-Select__trigger_icon\",\r\n                  isOpen && \"proton-Select__trigger_icon--flipped\"\r\n                )}\r\n                aria-hidden=\"true\"\r\n              >\r\n                <svg id=\"caret-down\" viewBox=\"0 0 512 512\">\r\n                  <title>{isOpen ? \"caret down\" : \"caret up\"}</title>\r\n                  <path\r\n                    fill=\"currentColor\"\r\n                    d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n            </RadixSelect.Icon>\r\n          </SelectButton>\r\n        </RadixSelect.Trigger>\r\n\r\n        <RadixSelect.Portal>\r\n          <RadixSelect.Content\r\n            className={csx(\r\n              \"proton-Menu\",\r\n              \"proton-MenuTrigger__menu\",\r\n              themeClass\r\n            )}\r\n            style={themeStyle as React.CSSProperties}\r\n            position=\"popper\"\r\n          >\r\n            <RadixSelect.Viewport>\r\n              {items.map((item) => (\r\n                <RadixSelect.Item\r\n                  key={item.key}\r\n                  value={item.key}\r\n                  disabled={disabledKeys?.includes(item.key)}\r\n                  className=\"proton-Menu__item\"\r\n                >\r\n                  <RadixSelect.ItemText>{item.label}</RadixSelect.ItemText>\r\n                </RadixSelect.Item>\r\n              ))}\r\n            </RadixSelect.Viewport>\r\n          </RadixSelect.Content>\r\n        </RadixSelect.Portal>\r\n      </RadixSelect.Root>\r\n    </div>\r\n  );\r\n}\r\n\r\nSelect.displayName = \"ProtonUISelect\";\r\n"],"names":["SelectButton","forwardRef","disabled","isOpen","children","onClick","props","ref","jsx","csx","Select","label","name","isDisabled","disabledKeys","selectedKey","onSelectionChange","defaultSelectedKey","onOpen","onClose","items","testId","setIsOpen","useState","internalSelectedKey","setInternalSelectedKey","themeClass","themeStyle","useTheme","isMobile","useBreakpoint","BREAKPOINTS","triggerRef","useRef","hiddenInputRef","currentSelectedKey","selectedItem","item","handleValueChange","value","handleOpenChange","open","useEffect","actionItems","jsxs","ActionMenu","RadixSelect"],"mappings":"sdA4BMA,EAAeC,EAAA,WACnB,CACE,CAAE,SAAAC,EAAU,OAAAC,EAAQ,SAAAC,EAAU,QAAAC,EAAS,GAAGC,CAAM,EAChDC,IAGEC,EAAA,kBAAA,IAAC,SAAA,CACE,GAAGF,EACJ,IAAAC,EACA,SAAAL,EACA,QAAAG,EACA,UAAWI,EAAA,IACT,yBACAP,GAAY,mCACZ,CAACC,GAAU,iCACXA,GAAU,gCACZ,EAEC,SAAAC,CAAA,CAAA,CAIT,EACAJ,EAAa,YAAc,uBAwDpB,SAASU,EAAO,CACrB,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,aAAAC,EACA,YAAAC,EACA,kBAAAC,EACA,mBAAAC,EACA,OAAAC,EACA,QAAAC,EACA,MAAAC,EACA,cAAeC,CACjB,EAAgB,CACd,KAAM,CAAClB,EAAQmB,CAAS,EAAIC,WAAS,EAAK,EACpC,CAACC,EAAqBC,CAAsB,EAAIF,EAAA,SACpDR,GAAeE,GAAsB,EAAA,EAEjC,CAAE,UAAWS,EAAY,MAAOC,CAAA,EAAeC,EAAAA,WAC/CC,EAAWC,EAAAA,cAAcC,EAAA,YAAY,MAAM,EAC3CC,EAAaC,SAA0B,IAAI,EAC3CC,EAAiBD,SAAyB,IAAI,EAG9CE,EACJpB,IAAgB,OAAYA,EAAcS,EACtCY,EAAehB,EAAM,KAAMiB,GAASA,EAAK,MAAQF,CAAkB,EAEnEG,EAAqBC,GAAkB,CACvCxB,IAAgB,QAClBU,EAAuBc,CAAK,EAE9BvB,GAAA,MAAAA,EAAoBuB,GAGhBL,EAAe,UACjBA,EAAe,QAAQ,MAAQK,EAC/BL,EAAe,QAAQ,cACrB,IAAI,MAAM,SAAU,CAAE,QAAS,GAAM,CAAA,EAEzC,EAGIM,EAAoBC,GAAkB,CAC1CnB,EAAUmB,CAAI,EACVA,EACOvB,GAAA,MAAAA,IAECC,GAAA,MAAAA,GACZ,EAIFuB,EAAAA,UAAU,IAAM,CACV3B,IAAgB,QAClBU,EAAuBV,CAAW,CACpC,EACC,CAACA,CAAW,CAAC,EAEhB,MAAM4B,EAAkCvB,EAAM,IAAKiB,IAAU,CAC3D,IAAKA,EAAK,IACV,MAAOA,EAAK,MACZ,GAAIA,EAAK,GACT,SAAU,IAAM,CACdC,EAAkBD,EAAK,GAAG,EAC1Bf,EAAU,EAAK,CACjB,CACA,EAAA,EAEF,OAAIO,EAEAe,EAAA,kBAAA,KAAC,MAAA,CACC,UAAU,gBACV,aAAYjC,GAASC,EACrB,gBAAeC,EAEd,SAAA,CAAAF,2BACE,MAAI,CAAA,UAAU,uBAAuB,cAAY,eAC/C,SACHA,EAAA,EAIFH,EAAA,kBAAA,IAAC,QAAA,CACC,IAAK0B,EACL,KAAK,SACL,KAAAtB,EACA,MAAOuB,EACP,cAAY,yBAAA,CACd,EAEAS,EAAA,kBAAA,KAAC5C,EAAA,CACC,OAAAG,EACA,IAAK6B,EACL,SAAUnB,EACV,cAAaQ,EACb,QAAS,IAAMC,EAAU,EAAI,EAE7B,SAAA,CAAAd,wBAAC,OAAI,UAAU,uBACZ,SAAe4B,EAAAA,EAAa,MAAQ,mBACvC,EACA5B,EAAA,kBAAA,IAAC,MAAA,CACC,UAAWC,EAAA,IACT,8BACAN,GAAU,sCACZ,EACA,cAAY,OAEZ,SAACyC,EAAAA,kBAAAA,KAAA,MAAA,CAAI,GAAG,aAAa,QAAQ,cAC3B,SAAA,CAACpC,EAAA,kBAAA,IAAA,QAAA,CAAO,SAASL,EAAA,aAAe,WAAW,EAC3CK,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,0KAAA,CACJ,CAAA,EACF,CAAA,CACF,CAAA,CAAA,CACF,EAEAA,EAAA,kBAAA,IAACqC,EAAA,WAAA,CACC,OAAA1C,EACA,QAAS,IAAMmB,EAAU,EAAK,EAC9B,QAASqB,EACT,aAAc,CAACR,CAAkB,EACjC,aAAArB,CAAA,CACF,CAAA,CAAA,CAAA,EAMJ8B,EAAA,kBAAA,KAAC,MAAA,CACC,UAAU,gBACV,aAAYjC,GAASC,EACrB,gBAAeC,EAEd,SAAA,CAAAF,2BACE,MAAI,CAAA,UAAU,uBAAuB,cAAY,eAC/C,SACHA,EAAA,EAIFH,EAAA,kBAAA,IAAC,QAAA,CACC,IAAK0B,EACL,KAAK,SACL,KAAAtB,EACA,MAAOuB,EACP,cAAY,yBAAA,CACd,EAEAS,EAAA,kBAAA,KAACE,EAAAA,OAAY,KAAZ,CACC,MAAOX,EACP,cAAeG,EACf,aAAcE,EACd,SAAU3B,EAEV,SAAA,CAAAL,EAAA,kBAAA,IAACsC,EAAY,OAAA,QAAZ,CAAoB,QAAO,GAC1B,SAAAF,EAAA,kBAAA,KAAC5C,EAAA,CACC,OAAAG,EACA,IAAK6B,EACL,SAAUnB,EACV,cAAaQ,EAEb,SAAA,CAAAb,EAAA,kBAAA,IAACsC,EAAAA,OAAY,MAAZ,CACC,UAAU,uBACV,YAAY,mBAEX,SAAAV,EAAeA,EAAa,MAAQ,kBAAA,CACvC,EACC5B,EAAA,kBAAA,IAAAsC,EAAA,OAAY,KAAZ,CAAiB,QAAO,GACvB,SAAAtC,EAAA,kBAAA,IAAC,MAAA,CACC,UAAWC,EAAA,IACT,8BACAN,GAAU,sCACZ,EACA,cAAY,OAEZ,SAACyC,EAAAA,kBAAAA,KAAA,MAAA,CAAI,GAAG,aAAa,QAAQ,cAC3B,SAAA,CAACpC,EAAA,kBAAA,IAAA,QAAA,CAAO,SAASL,EAAA,aAAe,WAAW,EAC3CK,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,0KAAA,CACJ,CAAA,EACF,CAAA,CAAA,EAEJ,CAAA,CAAA,CAAA,EAEJ,EAEAA,EAAAA,kBAAAA,IAACsC,EAAY,OAAA,OAAZ,CACC,SAAAtC,EAAA,kBAAA,IAACsC,EAAAA,OAAY,QAAZ,CACC,UAAWrC,EAAA,IACT,cACA,2BACAiB,CACF,EACA,MAAOC,EACP,SAAS,SAET,iCAACmB,EAAY,OAAA,SAAZ,CACE,SAAM1B,EAAA,IAAKiB,GACV7B,EAAA,kBAAA,IAACsC,EAAAA,OAAY,KAAZ,CAEC,MAAOT,EAAK,IACZ,SAAUvB,GAAA,YAAAA,EAAc,SAASuB,EAAK,KACtC,UAAU,oBAEV,SAAC7B,EAAA,kBAAA,IAAAsC,SAAY,SAAZ,CAAsB,WAAK,MAAM,CAAA,EAL7BT,EAAK,GAOb,CAAA,EACH,CAAA,CAAA,EAEJ,CAAA,CAAA,CACF,CAAA,CAAA,CAAA,CAGN,CAEA3B,EAAO,YAAc"}