@protonradio/proton-ui 0.11.13 → 0.11.14

package/dist/components/Input/SearchInput/SearchInput.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.es.js","sources":["../../../../src/components/Input/SearchInput/SearchInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport \"./SearchInput.css\";\nimport { csx } from \"../../../utils\";\nimport { Input, type BaseInputProps } from \"../BaseInput/Input\";\n\nexport interface SearchInputProps\n  extends Omit<\n    BaseInputProps,\n    | \"prefix\"\n    | \"suffix\"\n    | \"value\"\n    | \"onChange\"\n    | \"description\"\n    | \"descriptionPosition\"\n    | \"label\"\n  > {\n  /** The initial value of the input. */\n  defaultValue?: string;\n\n  /** Should the clear button be shown when there is text? */\n  isClearable?: boolean;\n\n  /** Called when the input value changes. */\n  onChange?: (value: string) => void;\n\n  /** Called when the clear button is clicked. */\n  onClear?: () => void;\n\n  /** The current value of the input (for controlled usage) */\n  value?: string;\n}\n\n/**\n * A search input component with optional clear functionality and URL parameter sync.\n *\n * API:\n *  - {@link SearchInputProps}\n *  - extends {@link BaseInputProps}\n */\nexport const SearchInput = ({\n  name = \"search\",\n  placeholder = \"Search...\",\n  autoComplete,\n  isClearable = true,\n  isDisabled = false,\n  error,\n  defaultValue,\n  value: controlledValue,\n  \"data-testid\": testId = \"proton-SearchInput\",\n  onChange,\n  onClear,\n}: SearchInputProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [value, setValue] = useState(controlledValue ?? defaultValue ?? \"\");\n\n  // Sync with controlled value if provided\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      setValue(controlledValue);\n    }\n  }, [controlledValue]);\n\n  const handleChange = (newValue: string) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  const handleClear = () => {\n    setValue(\"\");\n    onChange?.(\"\");\n    onClear?.();\n    inputRef.current?.focus();\n  };\n\n  return (\n    <div\n      className=\"proton-SearchInput__wrapper\"\n      data-testid={testId}\n      role=\"search\"\n    >\n      <Input\n        type=\"search\"\n        onChange={handleChange}\n        value={value}\n        name={name}\n        placeholder={placeholder}\n        autoComplete={autoComplete}\n        error={error}\n        ref={inputRef}\n        isDisabled={isDisabled}\n        prefix={\n          <svg\n            aria-hidden=\"true\"\n            width=\"2.8em\"\n            height=\"1.6em\"\n            viewBox=\"0 0 24 24\"\n            onClick={() => inputRef.current?.focus()}\n          >\n            <title>Magnifying Glass</title>\n            <path\n              fill=\"currentColor\"\n              d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-1a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm5.25-.75 4.5 4.5-1.25 1.25-4.5-4.5 1.25-1.25Z\"\n            />\n          </svg>\n        }\n        suffix={\n          isClearable && value.length > 0 ? (\n            <button\n              type=\"button\"\n              className={csx(\n                \"proton-SearchInput__button\",\n                \"proton-Input__descriptor\",\n                \"proton-Input__suffix\"\n              )}\n              data-testid={`${testId}-clear`}\n              onClick={handleClear}\n              aria-label=\"Clear search\"\n            >\n              <svg\n                aria-hidden=\"true\"\n                viewBox=\"0 0 50 50\"\n                width=\"1.6em\"\n                height=\"1.2em\"\n              >\n                <title>Clear</title>\n                <path\n                  fill=\"currentColor\"\n                  d=\"m37.304 11.282l1.414 1.414l-26.022 26.02l-1.414-1.413z\"\n                />\n                <path\n                  fill=\"currentColor\"\n                  d=\"m12.696 11.282l26.022 26.02l-1.414 1.415l-26.022-26.02z\"\n                />\n              </svg>\n            </button>\n          ) : null\n        }\n      />\n    </div>\n  );\n};\n"],"names":["SearchInput","name","placeholder","autoComplete","isClearable","isDisabled","error","defaultValue","controlledValue","testId","onChange","onClear","inputRef","useRef","value","setValue","useState","useEffect","handleChange","newValue","handleClear","_a","jsx","Input","jsxs","csx"],"mappings":";;;;;AAyCO,MAAMA,IAAc,CAAC;AAAA,EAC1B,MAAAC,IAAO;AAAA,EACP,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAOC;AAAA,EACP,eAAeC,IAAS;AAAA,EACxB,UAAAC;AAAA,EACA,SAAAC;AACF,MAAwB;AAChB,QAAAC,IAAWC,EAAyB,IAAI,GACxC,CAACC,GAAOC,CAAQ,IAAIC,EAASR,KAAmBD,KAAgB,EAAE;AAGxE,EAAAU,EAAU,MAAM;AACd,IAAIT,MAAoB,UACtBO,EAASP,CAAe;AAAA,EAC1B,GACC,CAACA,CAAe,CAAC;AAEd,QAAAU,IAAe,CAACC,MAAqB;AACzC,IAAAJ,EAASI,CAAQ,GACjBT,KAAA,QAAAA,EAAWS;AAAA,EAAQ,GAGfC,IAAc,MAAM;;AACxB,IAAAL,EAAS,EAAE,GACXL,KAAA,QAAAA,EAAW,KACDC,KAAA,QAAAA,MACVU,IAAAT,EAAS,YAAT,QAAAS,EAAkB;AAAA,EAAM;AAIxB,SAAAC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAab;AAAA,MACb,MAAK;AAAA,MAEL,UAAAa,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAUL;AAAA,UACV,OAAAJ;AAAA,UACA,MAAAb;AAAA,UACA,aAAAC;AAAA,UACA,cAAAC;AAAA,UACA,OAAAG;AAAA,UACA,KAAKM;AAAA,UACL,YAAAP;AAAA,UACA,QACEmB,gBAAAA,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,OAAM;AAAA,cACN,QAAO;AAAA,cACP,SAAQ;AAAA,cACR,SAAS,MAAM;;AAAA,wBAAAH,IAAAT,EAAS,YAAT,gBAAAS,EAAkB;AAAA;AAAA,cAEjC,UAAA;AAAA,gBAAAC,gBAAAA,EAAAA,IAAC,WAAM,UAAgB,mBAAA,CAAA;AAAA,gBACvBA,gBAAAA,EAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,GAAE;AAAA,kBAAA;AAAA,gBACJ;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,UAEF,QACElB,KAAeU,EAAM,SAAS,IAC5BQ,gBAAAA,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAWG;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cACA,eAAa,GAAGhB,CAAM;AAAA,cACtB,SAASW;AAAA,cACT,cAAW;AAAA,cAEX,UAAAI,gBAAAA,EAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,SAAQ;AAAA,kBACR,OAAM;AAAA,kBACN,QAAO;AAAA,kBAEP,UAAA;AAAA,oBAAAF,gBAAAA,EAAAA,IAAC,WAAM,UAAK,QAAA,CAAA;AAAA,oBACZA,gBAAAA,EAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,GAAE;AAAA,sBAAA;AAAA,oBACJ;AAAA,oBACAA,gBAAAA,EAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,GAAE;AAAA,sBAAA;AAAA,oBACJ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UAAA,IAEA;AAAA,QAAA;AAAA,MAER;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"SearchInput.es.js","sources":["../../../../src/components/Input/SearchInput/SearchInput.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useEffect, useRef, useState } from \"react\";\r\nimport \"./SearchInput.css\";\r\nimport { csx } from \"../../../utils\";\r\nimport { Input, type BaseInputProps } from \"../BaseInput/Input\";\r\n\r\nexport interface SearchInputProps\r\n  extends Omit<\r\n    BaseInputProps,\r\n    | \"prefix\"\r\n    | \"suffix\"\r\n    | \"value\"\r\n    | \"onChange\"\r\n    | \"description\"\r\n    | \"descriptionPosition\"\r\n    | \"label\"\r\n  > {\r\n  /** The initial value of the input. */\r\n  defaultValue?: string;\r\n\r\n  /** Should the clear button be shown when there is text? */\r\n  isClearable?: boolean;\r\n\r\n  /** Called when the input value changes. */\r\n  onChange?: (value: string) => void;\r\n\r\n  /** Called when the clear button is clicked. */\r\n  onClear?: () => void;\r\n\r\n  /** The current value of the input (for controlled usage) */\r\n  value?: string;\r\n}\r\n\r\n/**\r\n * A search input component with optional clear functionality and URL parameter sync.\r\n *\r\n * API:\r\n *  - {@link SearchInputProps}\r\n *  - extends {@link BaseInputProps}\r\n */\r\nexport const SearchInput = ({\r\n  name = \"search\",\r\n  placeholder = \"Search...\",\r\n  autoComplete,\r\n  isClearable = true,\r\n  isDisabled = false,\r\n  error,\r\n  defaultValue,\r\n  value: controlledValue,\r\n  \"data-testid\": testId = \"proton-SearchInput\",\r\n  onChange,\r\n  onClear,\r\n}: SearchInputProps) => {\r\n  const inputRef = useRef<HTMLInputElement>(null);\r\n  const [value, setValue] = useState(controlledValue ?? defaultValue ?? \"\");\r\n\r\n  // Sync with controlled value if provided\r\n  useEffect(() => {\r\n    if (controlledValue !== undefined) {\r\n      setValue(controlledValue);\r\n    }\r\n  }, [controlledValue]);\r\n\r\n  const handleChange = (newValue: string) => {\r\n    setValue(newValue);\r\n    onChange?.(newValue);\r\n  };\r\n\r\n  const handleClear = () => {\r\n    setValue(\"\");\r\n    onChange?.(\"\");\r\n    onClear?.();\r\n    inputRef.current?.focus();\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className=\"proton-SearchInput__wrapper\"\r\n      data-testid={testId}\r\n      role=\"search\"\r\n    >\r\n      <Input\r\n        type=\"search\"\r\n        onChange={handleChange}\r\n        value={value}\r\n        name={name}\r\n        placeholder={placeholder}\r\n        autoComplete={autoComplete}\r\n        error={error}\r\n        ref={inputRef}\r\n        isDisabled={isDisabled}\r\n        prefix={\r\n          <svg\r\n            aria-hidden=\"true\"\r\n            width=\"2.8em\"\r\n            height=\"1.6em\"\r\n            viewBox=\"0 0 24 24\"\r\n            onClick={() => inputRef.current?.focus()}\r\n          >\r\n            <title>Magnifying Glass</title>\r\n            <path\r\n              fill=\"currentColor\"\r\n              d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-1a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm5.25-.75 4.5 4.5-1.25 1.25-4.5-4.5 1.25-1.25Z\"\r\n            />\r\n          </svg>\r\n        }\r\n        suffix={\r\n          isClearable && value.length > 0 ? (\r\n            <button\r\n              type=\"button\"\r\n              className={csx(\r\n                \"proton-SearchInput__button\",\r\n                \"proton-Input__descriptor\",\r\n                \"proton-Input__suffix\"\r\n              )}\r\n              data-testid={`${testId}-clear`}\r\n              onClick={handleClear}\r\n              aria-label=\"Clear search\"\r\n            >\r\n              <svg\r\n                aria-hidden=\"true\"\r\n                viewBox=\"0 0 50 50\"\r\n                width=\"2.2em\"\r\n                height=\"1.2em\"\r\n              >\r\n                <title>Clear</title>\r\n                <path\r\n                  fill=\"currentColor\"\r\n                  d=\"m37.304 11.282l1.414 1.414l-26.022 26.02l-1.414-1.413z\"\r\n                />\r\n                <path\r\n                  fill=\"currentColor\"\r\n                  d=\"m12.696 11.282l26.022 26.02l-1.414 1.415l-26.022-26.02z\"\r\n                />\r\n              </svg>\r\n            </button>\r\n          ) : null\r\n        }\r\n      />\r\n    </div>\r\n  );\r\n};\r\n"],"names":["SearchInput","name","placeholder","autoComplete","isClearable","isDisabled","error","defaultValue","controlledValue","testId","onChange","onClear","inputRef","useRef","value","setValue","useState","useEffect","handleChange","newValue","handleClear","_a","jsx","Input","jsxs","csx"],"mappings":";;;;;AAyCO,MAAMA,IAAc,CAAC;AAAA,EAC1B,MAAAC,IAAO;AAAA,EACP,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAOC;AAAA,EACP,eAAeC,IAAS;AAAA,EACxB,UAAAC;AAAA,EACA,SAAAC;AACF,MAAwB;AAChB,QAAAC,IAAWC,EAAyB,IAAI,GACxC,CAACC,GAAOC,CAAQ,IAAIC,EAASR,KAAmBD,KAAgB,EAAE;AAGxE,EAAAU,EAAU,MAAM;AACd,IAAIT,MAAoB,UACtBO,EAASP,CAAe;AAAA,EAC1B,GACC,CAACA,CAAe,CAAC;AAEd,QAAAU,IAAe,CAACC,MAAqB;AACzC,IAAAJ,EAASI,CAAQ,GACjBT,KAAA,QAAAA,EAAWS;AAAA,EAAQ,GAGfC,IAAc,MAAM;;AACxB,IAAAL,EAAS,EAAE,GACXL,KAAA,QAAAA,EAAW,KACDC,KAAA,QAAAA,MACVU,IAAAT,EAAS,YAAT,QAAAS,EAAkB;AAAA,EAAM;AAIxB,SAAAC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAab;AAAA,MACb,MAAK;AAAA,MAEL,UAAAa,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAUL;AAAA,UACV,OAAAJ;AAAA,UACA,MAAAb;AAAA,UACA,aAAAC;AAAA,UACA,cAAAC;AAAA,UACA,OAAAG;AAAA,UACA,KAAKM;AAAA,UACL,YAAAP;AAAA,UACA,QACEmB,gBAAAA,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,OAAM;AAAA,cACN,QAAO;AAAA,cACP,SAAQ;AAAA,cACR,SAAS,MAAM;;AAAA,wBAAAH,IAAAT,EAAS,YAAT,gBAAAS,EAAkB;AAAA;AAAA,cAEjC,UAAA;AAAA,gBAAAC,gBAAAA,EAAAA,IAAC,WAAM,UAAgB,mBAAA,CAAA;AAAA,gBACvBA,gBAAAA,EAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,GAAE;AAAA,kBAAA;AAAA,gBACJ;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,UAEF,QACElB,KAAeU,EAAM,SAAS,IAC5BQ,gBAAAA,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAWG;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cACA,eAAa,GAAGhB,CAAM;AAAA,cACtB,SAASW;AAAA,cACT,cAAW;AAAA,cAEX,UAAAI,gBAAAA,EAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,SAAQ;AAAA,kBACR,OAAM;AAAA,kBACN,QAAO;AAAA,kBAEP,UAAA;AAAA,oBAAAF,gBAAAA,EAAAA,IAAC,WAAM,UAAK,QAAA,CAAA;AAAA,oBACZA,gBAAAA,EAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,GAAE;AAAA,sBAAA;AAAA,oBACJ;AAAA,oBACAA,gBAAAA,EAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,GAAE;AAAA,sBAAA;AAAA,oBACJ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UAAA,IAEA;AAAA,QAAA;AAAA,MAER;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"PopoverMenu.cjs.js","sources":["../../../src/components/Menu/PopoverMenu.tsx"],"sourcesContent":["import { DropdownMenu as RadixDropdownMenu } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\n\nexport interface PopoverMenuProps {\n  /** The trigger component */\n  trigger: React.ReactNode;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is open */\n  isOpen: boolean;\n\n  /** Callback when the menu is opened or closed */\n  onOpenChange: (open: boolean) => void;\n\n  /** The key of the selected item */\n  selectedKey: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange: (key: string) => void;\n\n  /** The keys of the disabled items */\n  disabledKeys: string[];\n\n  /** The title of the menu */\n  title: string;\n}\n\n/**\n * A component that displays a popover menu.\n *\n * API:\n *  - {@link PopoverMenuProps}\n */\nexport function PopoverMenu({\n  trigger,\n  items,\n  isOpen,\n  onOpenChange,\n  selectedKey,\n  onSelectionChange,\n  disabledKeys,\n  title,\n}: PopoverMenuProps) {\n  const { className: themeClass, style: themeStyle } = useTheme();\n\n  function renderMenuItem(props) {\n    const { item, className, style, disabledKeys, onClose } = props;\n\n    if (item.children && item.children.length > 0) {\n      return (\n        <RadixDropdownMenu.Sub key={item.key}>\n          <RadixDropdownMenu.SubTrigger\n            className={csx(\n              \"proton-Menu__item\",\n              \"proton-MenuTrigger__menu-item\"\n            )}\n          >\n            {item.label}\n            <svg\n              className=\"proton-MenuTrigger__chevron\"\n              viewBox=\"0 0 256 256\"\n              width={16}\n              height={12}\n            >\n              <path\n                fill=\"currentColor\"\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\"\n              />\n            </svg>\n          </RadixDropdownMenu.SubTrigger>\n\n          <RadixDropdownMenu.SubContent\n            sideOffset={8}\n            data-has-submenu=\"true\"\n            className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\")}\n          >\n            {item.children.map((child) =>\n              renderMenuItem({\n                item: child,\n                className,\n                style,\n                disabledKeys,\n                onClose,\n              })\n            )}\n          </RadixDropdownMenu.SubContent>\n        </RadixDropdownMenu.Sub>\n      );\n    } else {\n      return (\n        <RadixDropdownMenu.Item\n          className={csx(\"proton-Menu__item\", \"proton-MenuTrigger__menu-item\")}\n          key={item.key}\n          aria-selected={selectedKey === item.key}\n          disabled={disabledKeys?.includes(item.key)}\n          onSelect={() => {\n            item.onAction?.(item.key);\n            onSelectionChange?.(item.key);\n            onClose?.();\n          }}\n        >\n          <span\n            className=\"proton-MenuTrigger__label\"\n            style={{ gridArea: \"label\" }}\n          >\n            {item.label}\n          </span>\n          {item.description && (\n            <span\n              className=\"proton-MenuTrigger__description\"\n              style={{ gridArea: \"desc\" }}\n            >\n              {item.description}\n            </span>\n          )}\n        </RadixDropdownMenu.Item>\n      );\n    }\n  }\n\n  return (\n    <RadixDropdownMenu.Root open={isOpen} onOpenChange={onOpenChange}>\n      <RadixDropdownMenu.Trigger asChild>{trigger}</RadixDropdownMenu.Trigger>\n      <RadixDropdownMenu.Portal>\n        <RadixDropdownMenu.Content\n          className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\", themeClass)}\n          style={themeStyle as React.CSSProperties}\n        >\n          {title && (\n            <RadixDropdownMenu.Label className=\"proton-MenuTrigger__menu-header\">\n              {title}\n            </RadixDropdownMenu.Label>\n          )}\n          {items.map((item) =>\n            renderMenuItem({\n              item,\n              className: themeClass,\n              style: themeStyle as React.CSSProperties,\n              disabledKeys,\n              onClose: () => onOpenChange?.(false),\n            })\n          )}\n        </RadixDropdownMenu.Content>\n      </RadixDropdownMenu.Portal>\n    </RadixDropdownMenu.Root>\n  );\n}\n"],"names":["PopoverMenu","trigger","items","isOpen","onOpenChange","selectedKey","onSelectionChange","disabledKeys","title","themeClass","themeStyle","useTheme","renderMenuItem","props","item","className","style","onClose","jsxs","RadixDropdownMenu","csx","jsx","child","_a"],"mappings":"iPAuCO,SAASA,EAAY,CAC1B,QAAAC,EACA,MAAAC,EACA,OAAAC,EACA,aAAAC,EACA,YAAAC,EACA,kBAAAC,EACA,aAAAC,EACA,MAAAC,CACF,EAAqB,CACnB,KAAM,CAAE,UAAWC,EAAY,MAAOC,CAAA,EAAeC,EAAAA,WAErD,SAASC,EAAeC,EAAO,CAC7B,KAAM,CAAE,KAAAC,EAAM,UAAAC,EAAW,MAAAC,EAAO,aAAAT,EAAc,QAAAU,CAAY,EAAAJ,EAE1D,OAAIC,EAAK,UAAYA,EAAK,SAAS,OAAS,EAExCI,yBAACC,EAAAA,aAAkB,IAAlB,CACC,SAAA,CAAAD,EAAA,kBAAA,KAACC,EAAAA,aAAkB,WAAlB,CACC,UAAWC,EAAA,IACT,oBACA,+BACF,EAEC,SAAA,CAAKN,EAAA,MACNO,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,8BACV,QAAQ,cACR,MAAO,GACP,OAAQ,GAER,SAAAA,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,wGAAA,CACJ,CAAA,CACF,CAAA,CAAA,CACF,EAEAA,EAAA,kBAAA,IAACF,EAAAA,aAAkB,WAAlB,CACC,WAAY,EACZ,mBAAiB,OACjB,UAAWC,EAAAA,IAAI,cAAe,0BAA0B,EAEvD,WAAK,SAAS,IAAKE,GAClBV,EAAe,CACb,KAAMU,EACN,UAAAP,EACA,MAAAC,EACA,aAAAT,EACA,QAAAU,CAAA,CACD,CACH,CAAA,CACF,CAAA,GAnC0BH,EAAK,GAoCjC,EAIAI,EAAA,kBAAA,KAACC,EAAAA,aAAkB,KAAlB,CACC,UAAWC,EAAAA,IAAI,oBAAqB,+BAA+B,EAEnE,gBAAef,IAAgBS,EAAK,IACpC,SAAUP,GAAAA,YAAAA,EAAc,SAASO,EAAK,KACtC,SAAU,IAAM,QACTS,EAAAT,EAAA,WAAA,MAAAS,EAAA,KAAAT,EAAWA,EAAK,KACrBR,GAAA,MAAAA,EAAoBQ,EAAK,KACfG,GAAA,MAAAA,GACZ,EAEA,SAAA,CAAAI,EAAA,kBAAA,IAAC,OAAA,CACC,UAAU,4BACV,MAAO,CAAE,SAAU,OAAQ,EAE1B,SAAKP,EAAA,KAAA,CACR,EACCA,EAAK,aACJO,EAAA,kBAAA,IAAC,OAAA,CACC,UAAU,kCACV,MAAO,CAAE,SAAU,MAAO,EAEzB,SAAKP,EAAA,WAAA,CACR,CAAA,CAAA,EArBGA,EAAK,GAAA,CA0BlB,CAEA,gCACGK,EAAAA,aAAkB,KAAlB,CAAuB,KAAMhB,EAAQ,aAAAC,EACpC,SAAA,CAAAiB,EAAA,kBAAA,IAACF,EAAkB,aAAA,QAAlB,CAA0B,QAAO,GAAE,SAAQlB,EAAA,EAC5CoB,EAAAA,kBAAAA,IAACF,EAAkB,aAAA,OAAlB,CACC,SAAAD,EAAA,kBAAA,KAACC,EAAAA,aAAkB,QAAlB,CACC,UAAWC,EAAA,IAAI,cAAe,2BAA4BX,CAAU,EACpE,MAAOC,EAEN,SAAA,CAAAF,2BACEW,EAAAA,aAAkB,MAAlB,CAAwB,UAAU,kCAChC,SACHX,EAAA,EAEDN,EAAM,IAAKY,GACVF,EAAe,CACb,KAAAE,EACA,UAAWL,EACX,MAAOC,EACP,aAAAH,EACA,QAAS,IAAMH,GAAA,YAAAA,EAAe,GAAK,CACpC,CACH,CAAA,CAAA,CAAA,EAEJ,CACF,CAAA,CAAA,CAEJ"}
+{"version":3,"file":"PopoverMenu.cjs.js","sources":["../../../src/components/Menu/PopoverMenu.tsx"],"sourcesContent":["import { DropdownMenu as RadixDropdownMenu } from \"radix-ui\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\nimport { csx } from \"../../utils/string\";\r\nimport { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\r\n\r\nexport interface PopoverMenuProps {\r\n  /** The trigger component */\r\n  trigger: React.ReactNode;\r\n\r\n  /** Array of menu actions/items to display\r\n   * - type {@link ActionMenuAction}[]\r\n   */\r\n  items: ActionMenuAction[];\r\n\r\n  /** Whether the menu is open */\r\n  isOpen: boolean;\r\n\r\n  /** Callback when the menu is opened or closed */\r\n  onOpenChange: (open: boolean) => void;\r\n\r\n  /** The key of the selected item */\r\n  selectedKey: string;\r\n\r\n  /** Callback when the selection changes */\r\n  onSelectionChange: (key: string) => void;\r\n\r\n  /** The keys of the disabled items */\r\n  disabledKeys: string[];\r\n\r\n  /** The title of the menu */\r\n  title: string;\r\n}\r\n\r\n/**\r\n * A component that displays a popover menu.\r\n *\r\n * API:\r\n *  - {@link PopoverMenuProps}\r\n */\r\nexport function PopoverMenu({\r\n  trigger,\r\n  items,\r\n  isOpen,\r\n  onOpenChange,\r\n  selectedKey,\r\n  onSelectionChange,\r\n  disabledKeys,\r\n  title,\r\n}: PopoverMenuProps) {\r\n  const { className: themeClass, style: themeStyle } = useTheme();\r\n\r\n  function renderMenuItem(props) {\r\n    const { item, className, style, disabledKeys, onClose } = props;\r\n\r\n    if (item.children && item.children.length > 0) {\r\n      return (\r\n        <RadixDropdownMenu.Sub key={item.key}>\r\n          <RadixDropdownMenu.SubTrigger\r\n            className={csx(\r\n              \"proton-Menu__item\",\r\n              \"proton-MenuTrigger__menu-item\"\r\n            )}\r\n          >\r\n            {item.label}\r\n            <svg\r\n              className=\"proton-MenuTrigger__chevron\"\r\n              viewBox=\"0 0 256 256\"\r\n              width={16}\r\n              height={12}\r\n            >\r\n              <path\r\n                fill=\"currentColor\"\r\n                d=\"m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17\"\r\n              />\r\n            </svg>\r\n          </RadixDropdownMenu.SubTrigger>\r\n\r\n          <RadixDropdownMenu.SubContent\r\n            sideOffset={8}\r\n            data-has-submenu=\"true\"\r\n            className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\")}\r\n          >\r\n            {item.children.map((child) =>\r\n              renderMenuItem({\r\n                item: child,\r\n                className,\r\n                style,\r\n                disabledKeys,\r\n                onClose,\r\n              })\r\n            )}\r\n          </RadixDropdownMenu.SubContent>\r\n        </RadixDropdownMenu.Sub>\r\n      );\r\n    } else {\r\n      return (\r\n        <RadixDropdownMenu.Item\r\n          className={csx(\"proton-Menu__item\", \"proton-MenuTrigger__menu-item\")}\r\n          key={item.key}\r\n          aria-selected={selectedKey === item.key}\r\n          disabled={disabledKeys?.includes(item.key)}\r\n          onSelect={() => {\r\n            item.onAction?.(item.key);\r\n            onSelectionChange?.(item.key);\r\n            onClose?.();\r\n          }}\r\n        >\r\n          <span\r\n            className=\"proton-MenuTrigger__label\"\r\n            style={{ gridArea: \"label\" }}\r\n          >\r\n            {item.label}\r\n          </span>\r\n          {item.description && (\r\n            <span\r\n              className=\"proton-MenuTrigger__description\"\r\n              style={{ gridArea: \"desc\" }}\r\n            >\r\n              {item.description}\r\n            </span>\r\n          )}\r\n        </RadixDropdownMenu.Item>\r\n      );\r\n    }\r\n  }\r\n\r\n  return (\r\n    <RadixDropdownMenu.Root open={isOpen} onOpenChange={onOpenChange}>\r\n      <RadixDropdownMenu.Trigger asChild>{trigger}</RadixDropdownMenu.Trigger>\r\n      <RadixDropdownMenu.Portal>\r\n        <RadixDropdownMenu.Content\r\n          className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\", themeClass)}\r\n          style={themeStyle as React.CSSProperties}\r\n        >\r\n          {title && (\r\n            <RadixDropdownMenu.Label className=\"proton-MenuTrigger__menu-header\">\r\n              {title}\r\n            </RadixDropdownMenu.Label>\r\n          )}\r\n          {items.map((item) =>\r\n            renderMenuItem({\r\n              item,\r\n              className: themeClass,\r\n              style: themeStyle as React.CSSProperties,\r\n              disabledKeys,\r\n              onClose: () => onOpenChange?.(false),\r\n            })\r\n          )}\r\n        </RadixDropdownMenu.Content>\r\n      </RadixDropdownMenu.Portal>\r\n    </RadixDropdownMenu.Root>\r\n  );\r\n}\r\n"],"names":["PopoverMenu","trigger","items","isOpen","onOpenChange","selectedKey","onSelectionChange","disabledKeys","title","themeClass","themeStyle","useTheme","renderMenuItem","props","item","className","style","onClose","jsxs","RadixDropdownMenu","csx","jsx","child","_a"],"mappings":"iPAuCO,SAASA,EAAY,CAC1B,QAAAC,EACA,MAAAC,EACA,OAAAC,EACA,aAAAC,EACA,YAAAC,EACA,kBAAAC,EACA,aAAAC,EACA,MAAAC,CACF,EAAqB,CACnB,KAAM,CAAE,UAAWC,EAAY,MAAOC,CAAA,EAAeC,EAAAA,WAErD,SAASC,EAAeC,EAAO,CAC7B,KAAM,CAAE,KAAAC,EAAM,UAAAC,EAAW,MAAAC,EAAO,aAAAT,EAAc,QAAAU,CAAY,EAAAJ,EAE1D,OAAIC,EAAK,UAAYA,EAAK,SAAS,OAAS,EAExCI,yBAACC,EAAAA,aAAkB,IAAlB,CACC,SAAA,CAAAD,EAAA,kBAAA,KAACC,EAAAA,aAAkB,WAAlB,CACC,UAAWC,EAAA,IACT,oBACA,+BACF,EAEC,SAAA,CAAKN,EAAA,MACNO,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,8BACV,QAAQ,cACR,MAAO,GACP,OAAQ,GAER,SAAAA,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,wGAAA,CACJ,CAAA,CACF,CAAA,CAAA,CACF,EAEAA,EAAA,kBAAA,IAACF,EAAAA,aAAkB,WAAlB,CACC,WAAY,EACZ,mBAAiB,OACjB,UAAWC,EAAAA,IAAI,cAAe,0BAA0B,EAEvD,WAAK,SAAS,IAAKE,GAClBV,EAAe,CACb,KAAMU,EACN,UAAAP,EACA,MAAAC,EACA,aAAAT,EACA,QAAAU,CAAA,CACD,CACH,CAAA,CACF,CAAA,GAnC0BH,EAAK,GAoCjC,EAIAI,EAAA,kBAAA,KAACC,EAAAA,aAAkB,KAAlB,CACC,UAAWC,EAAAA,IAAI,oBAAqB,+BAA+B,EAEnE,gBAAef,IAAgBS,EAAK,IACpC,SAAUP,GAAAA,YAAAA,EAAc,SAASO,EAAK,KACtC,SAAU,IAAM,QACTS,EAAAT,EAAA,WAAA,MAAAS,EAAA,KAAAT,EAAWA,EAAK,KACrBR,GAAA,MAAAA,EAAoBQ,EAAK,KACfG,GAAA,MAAAA,GACZ,EAEA,SAAA,CAAAI,EAAA,kBAAA,IAAC,OAAA,CACC,UAAU,4BACV,MAAO,CAAE,SAAU,OAAQ,EAE1B,SAAKP,EAAA,KAAA,CACR,EACCA,EAAK,aACJO,EAAA,kBAAA,IAAC,OAAA,CACC,UAAU,kCACV,MAAO,CAAE,SAAU,MAAO,EAEzB,SAAKP,EAAA,WAAA,CACR,CAAA,CAAA,EArBGA,EAAK,GAAA,CA0BlB,CAEA,gCACGK,EAAAA,aAAkB,KAAlB,CAAuB,KAAMhB,EAAQ,aAAAC,EACpC,SAAA,CAAAiB,EAAA,kBAAA,IAACF,EAAkB,aAAA,QAAlB,CAA0B,QAAO,GAAE,SAAQlB,EAAA,EAC5CoB,EAAAA,kBAAAA,IAACF,EAAkB,aAAA,OAAlB,CACC,SAAAD,EAAA,kBAAA,KAACC,EAAAA,aAAkB,QAAlB,CACC,UAAWC,EAAA,IAAI,cAAe,2BAA4BX,CAAU,EACpE,MAAOC,EAEN,SAAA,CAAAF,2BACEW,EAAAA,aAAkB,MAAlB,CAAwB,UAAU,kCAChC,SACHX,EAAA,EAEDN,EAAM,IAAKY,GACVF,EAAe,CACb,KAAAE,EACA,UAAWL,EACX,MAAOC,EACP,aAAAH,EACA,QAAS,IAAMH,GAAA,YAAAA,EAAe,GAAK,CACpC,CACH,CAAA,CAAA,CAAA,EAEJ,CACF,CAAA,CAAA,CAEJ"}

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

@@ -1 +1 @@
-{"version":3,"file":"PopoverMenu.es.js","sources":["../../../src/components/Menu/PopoverMenu.tsx"],"sourcesContent":["import { DropdownMenu as RadixDropdownMenu } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\n\nexport interface PopoverMenuProps {\n  /** The trigger component */\n  trigger: React.ReactNode;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is open */\n  isOpen: boolean;\n\n  /** Callback when the menu is opened or closed */\n  onOpenChange: (open: boolean) => void;\n\n  /** The key of the selected item */\n  selectedKey: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange: (key: string) => void;\n\n  /** The keys of the disabled items */\n  disabledKeys: string[];\n\n  /** The title of the menu */\n  title: string;\n}\n\n/**\n * A component that displays a popover menu.\n *\n * API:\n *  - {@link PopoverMenuProps}\n */\nexport function PopoverMenu({\n  trigger,\n  items,\n  isOpen,\n  onOpenChange,\n  selectedKey,\n  onSelectionChange,\n  disabledKeys,\n  title,\n}: PopoverMenuProps) {\n  const { className: themeClass, style: themeStyle } = useTheme();\n\n  function renderMenuItem(props) {\n    const { item, className, style, disabledKeys, onClose } = props;\n\n    if (item.children && item.children.length > 0) {\n      return (\n        <RadixDropdownMenu.Sub key={item.key}>\n          <RadixDropdownMenu.SubTrigger\n            className={csx(\n              \"proton-Menu__item\",\n              \"proton-MenuTrigger__menu-item\"\n            )}\n          >\n            {item.label}\n            <svg\n              className=\"proton-MenuTrigger__chevron\"\n              viewBox=\"0 0 256 256\"\n              width={16}\n              height={12}\n            >\n              <path\n                fill=\"currentColor\"\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\"\n              />\n            </svg>\n          </RadixDropdownMenu.SubTrigger>\n\n          <RadixDropdownMenu.SubContent\n            sideOffset={8}\n            data-has-submenu=\"true\"\n            className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\")}\n          >\n            {item.children.map((child) =>\n              renderMenuItem({\n                item: child,\n                className,\n                style,\n                disabledKeys,\n                onClose,\n              })\n            )}\n          </RadixDropdownMenu.SubContent>\n        </RadixDropdownMenu.Sub>\n      );\n    } else {\n      return (\n        <RadixDropdownMenu.Item\n          className={csx(\"proton-Menu__item\", \"proton-MenuTrigger__menu-item\")}\n          key={item.key}\n          aria-selected={selectedKey === item.key}\n          disabled={disabledKeys?.includes(item.key)}\n          onSelect={() => {\n            item.onAction?.(item.key);\n            onSelectionChange?.(item.key);\n            onClose?.();\n          }}\n        >\n          <span\n            className=\"proton-MenuTrigger__label\"\n            style={{ gridArea: \"label\" }}\n          >\n            {item.label}\n          </span>\n          {item.description && (\n            <span\n              className=\"proton-MenuTrigger__description\"\n              style={{ gridArea: \"desc\" }}\n            >\n              {item.description}\n            </span>\n          )}\n        </RadixDropdownMenu.Item>\n      );\n    }\n  }\n\n  return (\n    <RadixDropdownMenu.Root open={isOpen} onOpenChange={onOpenChange}>\n      <RadixDropdownMenu.Trigger asChild>{trigger}</RadixDropdownMenu.Trigger>\n      <RadixDropdownMenu.Portal>\n        <RadixDropdownMenu.Content\n          className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\", themeClass)}\n          style={themeStyle as React.CSSProperties}\n        >\n          {title && (\n            <RadixDropdownMenu.Label className=\"proton-MenuTrigger__menu-header\">\n              {title}\n            </RadixDropdownMenu.Label>\n          )}\n          {items.map((item) =>\n            renderMenuItem({\n              item,\n              className: themeClass,\n              style: themeStyle as React.CSSProperties,\n              disabledKeys,\n              onClose: () => onOpenChange?.(false),\n            })\n          )}\n        </RadixDropdownMenu.Content>\n      </RadixDropdownMenu.Portal>\n    </RadixDropdownMenu.Root>\n  );\n}\n"],"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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"}
+{"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/Modal/Modal.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"),E=require("../../node_modules/@react-aria/button/dist/useButton.cjs.js"),q=require("../../node_modules/@react-aria/dialog/dist/useDialog.cjs.js"),m=require("../../node_modules/@react-aria/focus/dist/FocusScope.cjs.js"),v=require("@react-aria/utils"),S=require("../../node_modules/@react-aria/overlays/dist/usePreventScroll.cjs.js"),_=require("../../node_modules/@react-aria/overlays/dist/useModalOverlay.cjs.js"),j=require("react"),b=require("../../node_modules/@react-stately/overlays/dist/useOverlayTriggerState.cjs.js"),h=require("../../hooks/useIsClosing.cjs.js"),f=require("../Button/Button.cjs.js");;/* empty css               */const y=require("../ScreenOverlay/ScreenOverlay.cjs.js"),B=require("../../hooks/useBreakpoint.cjs.js"),C=require("../../constants/breakpoint.cjs.js"),O=require("../../utils/string.cjs.js"),M=({children:s})=>e.jsxRuntimeExports.jsx("h2",{className:"proton-Modal__title",children:s}),R=({children:s})=>e.jsxRuntimeExports.jsx("h3",{className:"proton-Modal__subtitle",children:s}),g=({children:s})=>e.jsxRuntimeExports.jsx("div",{className:"proton-Modal__body",children:s}),P=s=>e.jsxRuntimeExports.jsx("div",{className:"proton-Modal__action",children:e.jsxRuntimeExports.jsx(f.Button,{...s})}),N=({children:s})=>e.jsxRuntimeExports.jsx(m.FocusScope,{autoFocus:!0,children:e.jsxRuntimeExports.jsx("div",{className:"proton-Modal__actions",children:s})}),F=({title:s,subtitle:o,body:r,onClose:n,children:c,isClosing:d,"data-testid":x})=>{const t=j.useRef(null),u=b.useOverlayTriggerState({isOpen:!0,onOpenChange:n}),{modalProps:p}=_.useModalOverlay({isDismissable:!1},u,t),{dialogProps:i}=q.useDialog({role:"dialog"},t);S.usePreventScroll();const l=j.useRef(null),{buttonProps:a}=E.useButton({onPress:n,"aria-label":"Close"},l);return e.jsxRuntimeExports.jsx(m.FocusScope,{contain:!0,restoreFocus:!0,autoFocus:!0,children:e.jsxRuntimeExports.jsxs("div",{"data-testid":x,className:O.csx("proton-Modal",d&&"proton-Modal--closing"),...v.mergeProps(p,i),ref:t,children:[e.jsxRuntimeExports.jsx("button",{name:"Close",className:"proton-Modal__close-button",...a,ref:l,children:"×"}),s&&e.jsxRuntimeExports.jsx(M,{children:s}),o&&e.jsxRuntimeExports.jsx(R,{children:o}),r&&e.jsxRuntimeExports.jsx(g,{children:r}),e.jsxRuntimeExports.jsx("div",{className:"proton-Modal__content",children:c})]})})},T=({isOpen:s,onClose:o,title:r,subtitle:n,body:c,children:d,isOverlay:x=!0,"data-testid":t})=>{const u=j.useRef(null),{isClosing:p,handleClose:i}=h.useIsClosing({onClose:o,overlayRef:u}),l=B.useBreakpoint(C.BREAKPOINTS.MEDIUM);if(!s)return null;const a=e.jsxRuntimeExports.jsx(F,{isOpen:s,title:r,subtitle:n,body:c,onClose:i,isClosing:p,"data-testid":t,children:d});return x||l?e.jsxRuntimeExports.jsx(y.ScreenOverlay,{fadeIn:!0,ref:u,onClose:i,children:a}):a},A=Object.assign(T,{Title:M,Subtitle:R,Body:g,Action:P,Actions:N});exports.Modal=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../node_modules/react/jsx-runtime.cjs.js"),E=require("../../node_modules/@react-aria/button/dist/useButton.cjs.js"),q=require("../../node_modules/@react-aria/dialog/dist/useDialog.cjs.js"),m=require("../../node_modules/@react-aria/focus/dist/FocusScope.cjs.js"),v=require("@react-aria/utils"),S=require("../../node_modules/@react-aria/overlays/dist/usePreventScroll.cjs.js"),_=require("../../node_modules/@react-aria/overlays/dist/useModalOverlay.cjs.js"),j=require("react"),h=require("../../node_modules/@react-stately/overlays/dist/useOverlayTriggerState.cjs.js"),b=require("../../hooks/useIsClosing.cjs.js"),f=require("../Button/Button.cjs.js");;/* empty css               */const B=require("../ScreenOverlay/ScreenOverlay.cjs.js"),y=require("../../hooks/useBreakpoint.cjs.js"),C=require("../../constants/breakpoint.cjs.js"),O=require("../../utils/string.cjs.js"),M=({children:s})=>e.jsxRuntimeExports.jsx("h2",{className:"proton-Modal__title",children:s}),R=({children:s})=>e.jsxRuntimeExports.jsx("h3",{className:"proton-Modal__subtitle",children:s}),g=({children:s})=>e.jsxRuntimeExports.jsx("div",{className:"proton-Modal__body",children:s}),P=s=>e.jsxRuntimeExports.jsx("div",{className:"proton-Modal__action",children:e.jsxRuntimeExports.jsx(f.Button,{...s})}),N=({children:s})=>e.jsxRuntimeExports.jsx(m.FocusScope,{autoFocus:!0,children:e.jsxRuntimeExports.jsx("div",{className:"proton-Modal__actions",children:s})}),F=({title:s,subtitle:o,body:r,onClose:n,children:c,isClosing:d,"data-testid":x})=>{const t=j.useRef(null),u=h.useOverlayTriggerState({isOpen:!0,onOpenChange:n}),{modalProps:p}=_.useModalOverlay({isDismissable:!1},u,t),{dialogProps:i}=q.useDialog({role:"dialog"},t);S.usePreventScroll();const l=j.useRef(null),{buttonProps:a}=E.useButton({onPress:n,"aria-label":"Close"},l);return e.jsxRuntimeExports.jsx(m.FocusScope,{contain:!0,restoreFocus:!0,autoFocus:!0,children:e.jsxRuntimeExports.jsxs("div",{"data-testid":x,className:O.csx("proton-Modal",d&&"proton-Modal--closing"),...v.mergeProps(p,i),ref:t,children:[e.jsxRuntimeExports.jsx("button",{name:"Close",className:"proton-Modal__close-button",...a,ref:l,children:"×"}),s&&e.jsxRuntimeExports.jsx(M,{children:s}),o&&e.jsxRuntimeExports.jsx(R,{children:o}),r&&e.jsxRuntimeExports.jsx(g,{children:r}),e.jsxRuntimeExports.jsx("div",{className:"proton-Modal__content",children:c})]})})},T=({isOpen:s,onClose:o,title:r,subtitle:n,body:c,children:d,isOverlay:x=!0,"data-testid":t})=>{const u=j.useRef(null),{isClosing:p,handleClose:i}=b.useIsClosing({onClose:o,overlayRef:u}),l=y.useBreakpoint(C.BREAKPOINTS.MEDIUM);if(!s)return null;const a=e.jsxRuntimeExports.jsx(F,{isOpen:s,title:r,subtitle:n,body:c,onClose:i,isClosing:p,"data-testid":t,children:d});return x||l?e.jsxRuntimeExports.jsx(B.ScreenOverlay,{fadeIn:!0,ref:u,onClose:i,children:a}):a},A=Object.assign(T,{Title:M,Subtitle:R,Body:g,Action:P,Actions:N});exports.Modal=A;
 //# sourceMappingURL=Modal.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport { useButton } from \"@react-aria/button\";\nimport { useDialog } from \"@react-aria/dialog\";\nimport { FocusScope } from \"@react-aria/focus\";\nimport { useModalOverlay, usePreventScroll } from \"@react-aria/overlays\";\nimport { mergeProps } from \"@react-aria/utils\";\nimport { useRef } from \"react\";\nimport { useOverlayTriggerState } from \"@react-stately/overlays\";\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks\";\nimport { useIsClosing } from \"../../hooks/useIsClosing\";\nimport { csx } from \"../../utils\";\nimport { Button, ButtonProps } from \"../Button/Button\";\nimport \"./Modal.css\";\nimport { ScreenOverlay } from \"../ScreenOverlay/ScreenOverlay\";\n\nconst ModalTitle = ({ children }: { children: React.ReactNode }) => {\n  return <h2 className=\"proton-Modal__title\">{children}</h2>;\n};\n\nconst ModalSubtitle = ({ children }: { children: React.ReactNode }) => {\n  return <h3 className=\"proton-Modal__subtitle\">{children}</h3>;\n};\n\nconst ModalBody = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"proton-Modal__body\">{children}</div>;\n};\n\nconst ModalAction = (buttonProps: ButtonProps) => {\n  return (\n    <div className=\"proton-Modal__action\">\n      <Button {...buttonProps} />\n    </div>\n  );\n};\n\nconst ModalActions = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <FocusScope autoFocus>\n      <div className=\"proton-Modal__actions\">{children}</div>\n    </FocusScope>\n  );\n};\n\nconst ModalContent = ({\n  title,\n  subtitle,\n  body,\n  onClose,\n  children,\n  isClosing,\n  \"data-testid\": dataTestId,\n}: ModalProps & {\n  isClosing: boolean;\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const state = useOverlayTriggerState({ isOpen: true, onOpenChange: onClose });\n  const { modalProps } = useModalOverlay(\n    {\n      isDismissable: false, //handle dismiss behavior in useIsClosing\n    },\n    state,\n    ref\n  );\n\n  const { dialogProps } = useDialog({ role: \"dialog\" }, ref);\n  usePreventScroll();\n\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const { buttonProps: closeButtonProps } = useButton(\n    {\n      onPress: onClose,\n      \"aria-label\": \"Close\",\n    },\n    closeButtonRef\n  );\n\n  return (\n    <FocusScope contain restoreFocus autoFocus>\n      <div\n        data-testid={dataTestId}\n        className={csx(\"proton-Modal\", isClosing && \"proton-Modal--closing\")}\n        {...mergeProps(modalProps, dialogProps)}\n        ref={ref}\n      >\n        <button\n          name=\"Close\"\n          className=\"proton-Modal__close-button\"\n          {...closeButtonProps}\n          ref={closeButtonRef}\n        >\n          ×\n        </button>\n        {title && <ModalTitle>{title}</ModalTitle>}\n        {subtitle && <ModalSubtitle>{subtitle}</ModalSubtitle>}\n        {body && <ModalBody>{body}</ModalBody>}\n        <div className=\"proton-Modal__content\">{children}</div>\n      </div>\n    </FocusScope>\n  );\n};\n\nexport interface ModalProps {\n  /**\n   * Optional body text content for the modal\n   * */\n  body?: string;\n  /**\n   * Content to render inside the modal\n   * */\n  children: React.ReactNode;\n  /**\n   * data-testid for the modal\n   * */\n  \"data-testid\"?: string;\n  /**\n   * Controls the visibility of the modal\n   * */\n  isOpen: boolean;\n  /**\n   * Whether to show the modal with an overlay background.\n   * @default true\n   * */\n  isOverlay?: boolean;\n  /**\n   * Callback function when modal is closed\n   * */\n  onClose?: () => void;\n  /**\n   * Optional subtitle text below the modal title\n   * */\n  subtitle?: string;\n  /**\n   * Optional title text for the modal header\n   * */\n  title?: string;\n}\n\n/**\n * Modal component with overlay support and responsive behavior.\n *\n * API:\n *  - {@link ModalProps}\n */\nconst ModalWrapper = ({\n  isOpen,\n  onClose,\n  title,\n  subtitle,\n  body,\n  children,\n  isOverlay = true,\n  \"data-testid\": dataTestId,\n}: ModalProps) => {\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const { isClosing, handleClose } = useIsClosing({\n    onClose,\n    overlayRef,\n  });\n  const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\n\n  if (!isOpen) return null;\n\n  const modalContent = (\n    <ModalContent\n      isOpen={isOpen}\n      title={title}\n      subtitle={subtitle}\n      body={body}\n      onClose={handleClose}\n      isClosing={isClosing}\n      data-testid={dataTestId}\n    >\n      {children}\n    </ModalContent>\n  );\n\n  return isOverlay || isMobile ? (\n    <ScreenOverlay fadeIn ref={overlayRef} onClose={handleClose}>\n      {modalContent}\n    </ScreenOverlay>\n  ) : (\n    modalContent\n  );\n};\n\nexport const Modal = Object.assign(ModalWrapper, {\n  /**\n   * Renders a h2 styled title\n   * */\n  Title: ModalTitle,\n  /**\n   * Renders a h3 styled subtitle\n   * */\n  Subtitle: ModalSubtitle,\n  /**\n   * Renders a div styled body\n   * */\n  Body: ModalBody,\n  /**\n   * Renders a Proton Button action\n   * - @prop buttonProps {@link ButtonProps}\n   * */\n  Action: ModalAction,\n  /**\n   * Renders a group of Proton Buttons\n   * */\n  Actions: ModalActions,\n});\n"],"names":["ModalTitle","children","jsx","ModalSubtitle","ModalBody","ModalAction","buttonProps","Button","ModalActions","FocusScope","ModalContent","title","subtitle","body","onClose","isClosing","dataTestId","ref","useRef","state","useOverlayTriggerState","modalProps","useModalOverlay","dialogProps","useDialog","usePreventScroll","closeButtonRef","closeButtonProps","useButton","jsxs","csx","mergeProps","ModalWrapper","isOpen","isOverlay","overlayRef","handleClose","useIsClosing","isMobile","useBreakpoint","BREAKPOINTS","modalContent","ScreenOverlay","Modal"],"mappings":"u8BAiBMA,EAAa,CAAC,CAAE,SAAAC,KACZC,EAAAA,kBAAAA,IAAA,KAAA,CAAG,UAAU,sBAAuB,SAAAD,CAAS,CAAA,EAGjDE,EAAgB,CAAC,CAAE,SAAAF,KACfC,EAAAA,kBAAAA,IAAA,KAAA,CAAG,UAAU,yBAA0B,SAAAD,CAAS,CAAA,EAGpDG,EAAY,CAAC,CAAE,SAAAH,KACXC,EAAAA,kBAAAA,IAAA,MAAA,CAAI,UAAU,qBAAsB,SAAAD,CAAS,CAAA,EAGjDI,EAAeC,GAEjBJ,wBAAC,OAAI,UAAU,uBACb,iCAACK,EAAQ,OAAA,CAAA,GAAGD,CAAa,CAAA,CAC3B,CAAA,EAIEE,EAAe,CAAC,CAAE,SAAAP,KAEpBC,EAAA,kBAAA,IAACO,cAAW,UAAS,GACnB,iCAAC,MAAI,CAAA,UAAU,wBAAyB,SAAAR,CAAS,CAAA,CACnD,CAAA,EAIES,EAAe,CAAC,CACpB,MAAAC,EACA,SAAAC,EACA,KAAAC,EACA,QAAAC,EACA,SAAAb,EACA,UAAAc,EACA,cAAeC,CACjB,IAEM,CACE,MAAAC,EAAMC,SAAuB,IAAI,EACjCC,EAAQC,EAAAA,uBAAuB,CAAE,OAAQ,GAAM,aAAcN,EAAS,EACtE,CAAE,WAAAO,GAAeC,EAAA,gBACrB,CACE,cAAe,EACjB,EACAH,EACAF,CAAA,EAGI,CAAE,YAAAM,GAAgBC,EAAA,UAAU,CAAE,KAAM,QAAA,EAAYP,CAAG,EACxCQ,EAAAA,mBAEX,MAAAC,EAAiBR,SAA0B,IAAI,EAC/C,CAAE,YAAaS,CAAA,EAAqBC,EAAA,UACxC,CACE,QAASd,EACT,aAAc,OAChB,EACAY,CAAA,EAGF,+BACGjB,EAAAA,WAAW,CAAA,QAAO,GAAC,aAAY,GAAC,UAAS,GACxC,SAAAoB,EAAA,kBAAA,KAAC,MAAA,CACC,cAAab,EACb,UAAWc,EAAA,IAAI,eAAgBf,GAAa,uBAAuB,EAClE,GAAGgB,EAAW,WAAAV,EAAYE,CAAW,EACtC,IAAAN,EAEA,SAAA,CAAAf,EAAA,kBAAA,IAAC,SAAA,CACC,KAAK,QACL,UAAU,6BACT,GAAGyB,EACJ,IAAKD,EACN,SAAA,GAAA,CAED,EACCf,GAAUT,EAAAA,kBAAAA,IAAAF,EAAA,CAAY,SAAMW,CAAA,CAAA,EAC5BC,GAAaV,EAAAA,kBAAAA,IAAAC,EAAA,CAAe,SAASS,CAAA,CAAA,EACrCC,GAASX,EAAAA,kBAAAA,IAAAE,EAAA,CAAW,SAAKS,CAAA,CAAA,EACzBX,EAAAA,kBAAAA,IAAA,MAAA,CAAI,UAAU,wBAAyB,SAAAD,CAAS,CAAA,CAAA,CAAA,CAErD,CAAA,CAAA,CAEJ,EA4CM+B,EAAe,CAAC,CACpB,OAAAC,EACA,QAAAnB,EACA,MAAAH,EACA,SAAAC,EACA,KAAAC,EACA,SAAAZ,EACA,UAAAiC,EAAY,GACZ,cAAelB,CACjB,IAAkB,CACV,MAAAmB,EAAajB,SAAuB,IAAI,EACxC,CAAE,UAAAH,EAAW,YAAAqB,CAAY,EAAIC,eAAa,CAC9C,QAAAvB,EACA,WAAAqB,CAAA,CACD,EACKG,EAAWC,EAAAA,cAAcC,EAAA,YAAY,MAAM,EAE7C,GAAA,CAACP,EAAe,OAAA,KAEpB,MAAMQ,EACJvC,EAAA,kBAAA,IAACQ,EAAA,CACC,OAAAuB,EACA,MAAAtB,EACA,SAAAC,EACA,KAAAC,EACA,QAASuB,EACT,UAAArB,EACA,cAAaC,EAEZ,SAAAf,CAAA,CAAA,EAIE,OAAAiC,GAAaI,EAClBpC,EAAAA,kBAAAA,IAACwC,EAAAA,cAAc,CAAA,OAAM,GAAC,IAAKP,EAAY,QAASC,EAC7C,SAAAK,CAAA,CACH,EAEAA,CAEJ,EAEaE,EAAQ,OAAO,OAAOX,EAAc,CAI/C,MAAOhC,EAIP,SAAUG,EAIV,KAAMC,EAKN,OAAQC,EAIR,QAASG,CACX,CAAC"}
+{"version":3,"file":"Modal.cjs.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useButton } from \"@react-aria/button\";\r\nimport { useDialog } from \"@react-aria/dialog\";\r\nimport { FocusScope } from \"@react-aria/focus\";\r\nimport { useModalOverlay, usePreventScroll } from \"@react-aria/overlays\";\r\nimport { mergeProps } from \"@react-aria/utils\";\r\nimport { useRef } from \"react\";\r\nimport { useOverlayTriggerState } from \"@react-stately/overlays\";\r\nimport { BREAKPOINTS } from \"../../constants\";\r\nimport { useBreakpoint } from \"../../hooks\";\r\nimport { useIsClosing } from \"../../hooks/useIsClosing\";\r\nimport { csx } from \"../../utils\";\r\nimport { Button, ButtonProps } from \"../Button/Button\";\r\nimport \"./Modal.css\";\r\nimport { ScreenOverlay } from \"../ScreenOverlay/ScreenOverlay\";\r\n\r\nconst ModalTitle = ({ children }: { children: React.ReactNode }) => {\r\n  return <h2 className=\"proton-Modal__title\">{children}</h2>;\r\n};\r\n\r\nconst ModalSubtitle = ({ children }: { children: React.ReactNode }) => {\r\n  return <h3 className=\"proton-Modal__subtitle\">{children}</h3>;\r\n};\r\n\r\nconst ModalBody = ({ children }: { children: React.ReactNode }) => {\r\n  return <div className=\"proton-Modal__body\">{children}</div>;\r\n};\r\n\r\nconst ModalAction = (buttonProps: ButtonProps) => {\r\n  return (\r\n    <div className=\"proton-Modal__action\">\r\n      <Button {...buttonProps} />\r\n    </div>\r\n  );\r\n};\r\n\r\nconst ModalActions = ({ children }: { children: React.ReactNode }) => {\r\n  return (\r\n    <FocusScope autoFocus>\r\n      <div className=\"proton-Modal__actions\">{children}</div>\r\n    </FocusScope>\r\n  );\r\n};\r\n\r\nconst ModalContent = ({\r\n  title,\r\n  subtitle,\r\n  body,\r\n  onClose,\r\n  children,\r\n  isClosing,\r\n  \"data-testid\": dataTestId,\r\n}: ModalProps & {\r\n  isClosing: boolean;\r\n}) => {\r\n  const ref = useRef<HTMLDivElement>(null);\r\n  const state = useOverlayTriggerState({ isOpen: true, onOpenChange: onClose });\r\n  const { modalProps } = useModalOverlay(\r\n    {\r\n      isDismissable: false, //handle dismiss behavior in useIsClosing\r\n    },\r\n    state,\r\n    ref\r\n  );\r\n\r\n  const { dialogProps } = useDialog({ role: \"dialog\" }, ref);\r\n  usePreventScroll();\r\n\r\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\r\n  const { buttonProps: closeButtonProps } = useButton(\r\n    {\r\n      onPress: onClose,\r\n      \"aria-label\": \"Close\",\r\n    },\r\n    closeButtonRef\r\n  );\r\n\r\n  return (\r\n    <FocusScope contain restoreFocus autoFocus>\r\n      <div\r\n        data-testid={dataTestId}\r\n        className={csx(\"proton-Modal\", isClosing && \"proton-Modal--closing\")}\r\n        {...mergeProps(modalProps, dialogProps)}\r\n        ref={ref}\r\n      >\r\n        <button\r\n          name=\"Close\"\r\n          className=\"proton-Modal__close-button\"\r\n          {...closeButtonProps}\r\n          ref={closeButtonRef}\r\n        >\r\n          ×\r\n        </button>\r\n        {title && <ModalTitle>{title}</ModalTitle>}\r\n        {subtitle && <ModalSubtitle>{subtitle}</ModalSubtitle>}\r\n        {body && <ModalBody>{body}</ModalBody>}\r\n        <div className=\"proton-Modal__content\">{children}</div>\r\n      </div>\r\n    </FocusScope>\r\n  );\r\n};\r\n\r\nexport interface ModalProps {\r\n  /**\r\n   * Optional body text content for the modal\r\n   * */\r\n  body?: string;\r\n  /**\r\n   * Content to render inside the modal\r\n   * */\r\n  children: React.ReactNode;\r\n  /**\r\n   * data-testid for the modal\r\n   * */\r\n  \"data-testid\"?: string;\r\n  /**\r\n   * Controls the visibility of the modal\r\n   * */\r\n  isOpen: boolean;\r\n  /**\r\n   * Whether to show the modal with an overlay background.\r\n   * @default true\r\n   * */\r\n  isOverlay?: boolean;\r\n  /**\r\n   * Callback function when modal is closed\r\n   * */\r\n  onClose?: () => void;\r\n  /**\r\n   * Optional subtitle text below the modal title\r\n   * */\r\n  subtitle?: string;\r\n  /**\r\n   * Optional title text for the modal header\r\n   * */\r\n  title?: string;\r\n}\r\n\r\n/**\r\n * Modal component with overlay support and responsive behavior.\r\n *\r\n * API:\r\n *  - {@link ModalProps}\r\n */\r\nconst ModalWrapper = ({\r\n  isOpen,\r\n  onClose,\r\n  title,\r\n  subtitle,\r\n  body,\r\n  children,\r\n  isOverlay = true,\r\n  \"data-testid\": dataTestId,\r\n}: ModalProps) => {\r\n  const overlayRef = useRef<HTMLDivElement>(null);\r\n  const { isClosing, handleClose } = useIsClosing({\r\n    onClose,\r\n    overlayRef,\r\n  });\r\n  const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\r\n\r\n  if (!isOpen) return null;\r\n\r\n  const modalContent = (\r\n    <ModalContent\r\n      isOpen={isOpen}\r\n      title={title}\r\n      subtitle={subtitle}\r\n      body={body}\r\n      onClose={handleClose}\r\n      isClosing={isClosing}\r\n      data-testid={dataTestId}\r\n    >\r\n      {children}\r\n    </ModalContent>\r\n  );\r\n\r\n  return isOverlay || isMobile ? (\r\n    <ScreenOverlay fadeIn ref={overlayRef} onClose={handleClose}>\r\n      {modalContent}\r\n    </ScreenOverlay>\r\n  ) : (\r\n    modalContent\r\n  );\r\n};\r\n\r\nexport const Modal = Object.assign(ModalWrapper, {\r\n  /**\r\n   * Renders a h2 styled title\r\n   * */\r\n  Title: ModalTitle,\r\n  /**\r\n   * Renders a h3 styled subtitle\r\n   * */\r\n  Subtitle: ModalSubtitle,\r\n  /**\r\n   * Renders a div styled body\r\n   * */\r\n  Body: ModalBody,\r\n  /**\r\n   * Renders a Proton Button action\r\n   * - @prop buttonProps {@link ButtonProps}\r\n   * */\r\n  Action: ModalAction,\r\n  /**\r\n   * Renders a group of Proton Buttons\r\n   * */\r\n  Actions: ModalActions,\r\n});\r\n"],"names":["ModalTitle","children","jsx","ModalSubtitle","ModalBody","ModalAction","buttonProps","Button","ModalActions","FocusScope","ModalContent","title","subtitle","body","onClose","isClosing","dataTestId","ref","useRef","state","useOverlayTriggerState","modalProps","useModalOverlay","dialogProps","useDialog","usePreventScroll","closeButtonRef","closeButtonProps","useButton","jsxs","csx","mergeProps","ModalWrapper","isOpen","isOverlay","overlayRef","handleClose","useIsClosing","isMobile","useBreakpoint","BREAKPOINTS","modalContent","ScreenOverlay","Modal"],"mappings":"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"}

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

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

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\";\n\nimport { Popover as RadixPopover } from \"radix-ui\";\nimport React, { CSSProperties } from \"react\";\nimport \"./Popover.css\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\n\nexport type PopoverSide = \"top\" | \"right\" | \"bottom\" | \"left\";\nexport type PopoverAlign = \"start\" | \"center\" | \"end\";\n\nexport interface PopoverProps {\n  /**\n   * The trigger element for the popover.\n   */\n  trigger: React.ReactNode;\n  /**\n   * The content of the popover.\n   */\n  children: React.ReactNode;\n  /**\n   * Constrain the width of the popover to the width of the trigger.\n   */\n  constrainWidth?: boolean;\n  /**\n   * Control open state (controlled mode).\n   */\n  open?: boolean;\n  /**\n   * Default open state (uncontrolled mode).\n   */\n  defaultOpen?: boolean;\n  /**\n   * Callback when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Popover side placement\n   * {@link PopoverSide}\n   */\n  side?: PopoverSide;\n  /**\n   * Popover alignment\n   * {@link PopoverAlign}\n   */\n  align?: PopoverAlign;\n  /**\n   * Show an arrow pointing to the trigger.\n   */\n  arrow?: boolean;\n  /**\n   * Test id for the popover content.\n   */\n  \"data-testid\"?: string;\n}\n\n/**\n * A popover component that handles positioning and supports controlled and uncontrolled modes.\n *\n * A popover displays interactive content in context with a trigger element.\n * A tooltip displays a description of an element on hover or focus.\n *\n * API:\n *  - {@link PopoverProps}\n */\nexport function Popover({\n  trigger,\n  children,\n  open,\n  defaultOpen,\n  onOpenChange,\n  side = \"top\",\n  align = \"center\",\n  arrow = false,\n  constrainWidth = false,\n  \"data-testid\": testId,\n}: PopoverProps) {\n  const { className: themeClass, style: themeStyle } = useTheme();\n\n  return (\n    <RadixPopover.Root\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n    >\n      <RadixPopover.Trigger asChild>\n        <div>{trigger}</div>\n      </RadixPopover.Trigger>\n\n      <RadixPopover.Portal>\n        <RadixPopover.Content\n          side={side}\n          sideOffset={2}\n          align={align}\n          style={themeStyle as CSSProperties}\n          className={csx(\n            \"proton-Popover\",\n            constrainWidth && \"proton-Popover__constrained\",\n            themeClass\n          )}\n          data-testid={testId}\n        >\n          {arrow && <RadixPopover.Arrow className=\"arrow\" />}\n          {children}\n        </RadixPopover.Content>\n      </RadixPopover.Portal>\n    </RadixPopover.Root>\n  );\n}\n\nPopover.displayName = \"Popover\";\n"],"names":["Popover","trigger","children","open","defaultOpen","onOpenChange","side","align","arrow","constrainWidth","testId","themeClass","themeStyle","useTheme","jsxs","RadixPopover","jsx","csx"],"mappings":"uRAiEO,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,CAEAF,EAAQ,YAAc"}
+{"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   */\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\r\nPopover.displayName = \"Popover\";\r\n"],"names":["Popover","trigger","children","open","defaultOpen","onOpenChange","side","align","arrow","constrainWidth","testId","themeClass","themeStyle","useTheme","jsxs","RadixPopover","jsx","csx"],"mappings":"uRAiEO,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,CAEAF,EAAQ,YAAc"}

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\";\n\nimport { Popover as RadixPopover } from \"radix-ui\";\nimport React, { CSSProperties } from \"react\";\nimport \"./Popover.css\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\n\nexport type PopoverSide = \"top\" | \"right\" | \"bottom\" | \"left\";\nexport type PopoverAlign = \"start\" | \"center\" | \"end\";\n\nexport interface PopoverProps {\n  /**\n   * The trigger element for the popover.\n   */\n  trigger: React.ReactNode;\n  /**\n   * The content of the popover.\n   */\n  children: React.ReactNode;\n  /**\n   * Constrain the width of the popover to the width of the trigger.\n   */\n  constrainWidth?: boolean;\n  /**\n   * Control open state (controlled mode).\n   */\n  open?: boolean;\n  /**\n   * Default open state (uncontrolled mode).\n   */\n  defaultOpen?: boolean;\n  /**\n   * Callback when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Popover side placement\n   * {@link PopoverSide}\n   */\n  side?: PopoverSide;\n  /**\n   * Popover alignment\n   * {@link PopoverAlign}\n   */\n  align?: PopoverAlign;\n  /**\n   * Show an arrow pointing to the trigger.\n   */\n  arrow?: boolean;\n  /**\n   * Test id for the popover content.\n   */\n  \"data-testid\"?: string;\n}\n\n/**\n * A popover component that handles positioning and supports controlled and uncontrolled modes.\n *\n * A popover displays interactive content in context with a trigger element.\n * A tooltip displays a description of an element on hover or focus.\n *\n * API:\n *  - {@link PopoverProps}\n */\nexport function Popover({\n  trigger,\n  children,\n  open,\n  defaultOpen,\n  onOpenChange,\n  side = \"top\",\n  align = \"center\",\n  arrow = false,\n  constrainWidth = false,\n  \"data-testid\": testId,\n}: PopoverProps) {\n  const { className: themeClass, style: themeStyle } = useTheme();\n\n  return (\n    <RadixPopover.Root\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n    >\n      <RadixPopover.Trigger asChild>\n        <div>{trigger}</div>\n      </RadixPopover.Trigger>\n\n      <RadixPopover.Portal>\n        <RadixPopover.Content\n          side={side}\n          sideOffset={2}\n          align={align}\n          style={themeStyle as CSSProperties}\n          className={csx(\n            \"proton-Popover\",\n            constrainWidth && \"proton-Popover__constrained\",\n            themeClass\n          )}\n          data-testid={testId}\n        >\n          {arrow && <RadixPopover.Arrow className=\"arrow\" />}\n          {children}\n        </RadixPopover.Content>\n      </RadixPopover.Portal>\n    </RadixPopover.Root>\n  );\n}\n\nPopover.displayName = \"Popover\";\n"],"names":["Popover","trigger","children","open","defaultOpen","onOpenChange","side","align","arrow","constrainWidth","testId","themeClass","themeStyle","useTheme","jsxs","RadixPopover","jsx","csx"],"mappings":";;;;;AAiEO,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;AAEAF,EAAQ,cAAc;"}
+{"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   */\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\r\nPopover.displayName = \"Popover\";\r\n"],"names":["Popover","trigger","children","open","defaultOpen","onOpenChange","side","align","arrow","constrainWidth","testId","themeClass","themeStyle","useTheme","jsxs","RadixPopover","jsx","csx"],"mappings":";;;;;AAiEO,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;AAEAF,EAAQ,cAAc;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScreenOverlay.cjs.js","sources":["../../../src/components/ScreenOverlay/ScreenOverlay.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect } from \"react\";\nimport \"./ScreenOverlay.css\";\nimport { csx } from \"../../utils\";\nimport { Portal } from \"radix-ui\";\nimport { useTheme, ThemeProvider } from \"../ThemeProvider\";\n\ninterface ScreenOverlayProps {\n  /**\n   * Children to render inside the overlay.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Whether to fade in the overlay.\n   */\n  fadeIn?: boolean;\n\n  /**\n   * Callback function to handle events (click or ESC key).\n   */\n  onClose?: () => void;\n\n  /**\n   * Ref to the overlay element.\n   */\n  ref?: React.RefObject<HTMLDivElement>;\n}\n\n/**\n * Base Overlay component for creating modal-like backgrounds.\n *\n * API:\n *  - {@link ScreenOverlayProps}\n */\nexport const ScreenOverlay = forwardRef<HTMLDivElement, ScreenOverlayProps>(\n  ({ fadeIn = false, onClose, children }, ref) => {\n    const { theme, palette } = useTheme();\n\n    useEffect(() => {\n      if (!onClose) return;\n\n      const handleEscKey = (event: KeyboardEvent) => {\n        if (event.key === \"Escape\") onClose();\n      };\n\n      document.addEventListener(\"keydown\", handleEscKey);\n      return () => {\n        document.removeEventListener(\"keydown\", handleEscKey);\n      };\n    }, [onClose]);\n\n    return (\n      <Portal.Root>\n        <ThemeProvider theme={theme} palette={palette}>\n          <div\n            ref={ref}\n            id=\"background\"\n            aria-label=\"Background overlay\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            data-testid=\"screen-overlay\"\n            className={csx(\n              \"proton-ScreenOverlay__background\",\n              \"proton-ScreenOverlay__z-index\",\n              fadeIn && \"proton-ScreenOverlay__fade-in\"\n            )}\n            onClick={(event: React.MouseEvent) => {\n              if (!onClose) return;\n\n              // Only trigger onClose if the click was directly on the background element\n              if (event.target === event.currentTarget) {\n                onClose();\n              }\n            }}\n          >\n            {children}\n          </div>\n        </ThemeProvider>\n      </Portal.Root>\n    );\n  }\n);\n\nScreenOverlay.displayName = \"ProtonUIScreenOverlay\";\n"],"names":["ScreenOverlay","forwardRef","fadeIn","onClose","children","ref","theme","palette","useTheme","useEffect","handleEscKey","event","Portal","jsx","ThemeProvider","csx"],"mappings":"gTAoCaA,EAAgBC,EAAA,WAC3B,CAAC,CAAE,OAAAC,EAAS,GAAO,QAAAC,EAAS,SAAAC,CAAA,EAAYC,IAAQ,CAC9C,KAAM,CAAE,MAAAC,EAAO,QAAAC,CAAQ,EAAIC,EAAS,SAAA,EAEpCC,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAI,CAACN,EAAS,OAER,MAAAO,EAAgBC,GAAyB,CACzCA,EAAM,MAAQ,UAAkBR,EAAA,CAAA,EAG7B,gBAAA,iBAAiB,UAAWO,CAAY,EAC1C,IAAM,CACF,SAAA,oBAAoB,UAAWA,CAAY,CAAA,CACtD,EACC,CAACP,CAAO,CAAC,0BAGTS,EAAAA,OAAO,KAAP,CACC,SAACC,wBAAAC,EAAAA,cAAA,CAAc,MAAAR,EAAc,QAAAC,EAC3B,SAAAM,EAAA,kBAAA,IAAC,MAAA,CACC,IAAAR,EACA,GAAG,aACH,aAAW,qBACX,KAAK,SACL,aAAW,OACX,cAAY,iBACZ,UAAWU,EAAA,IACT,mCACA,gCACAb,GAAU,+BACZ,EACA,QAAUS,GAA4B,CAC/BR,GAGDQ,EAAM,SAAWA,EAAM,eACjBR,GAEZ,EAEC,SAAAC,CAAA,CAAA,CAEL,CAAA,CACF,CAAA,CAEJ,CACF,EAEAJ,EAAc,YAAc"}
+{"version":3,"file":"ScreenOverlay.cjs.js","sources":["../../../src/components/ScreenOverlay/ScreenOverlay.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { forwardRef, useEffect } from \"react\";\r\nimport \"./ScreenOverlay.css\";\r\nimport { csx } from \"../../utils\";\r\nimport { Portal } from \"radix-ui\";\r\nimport { useTheme, ThemeProvider } from \"../ThemeProvider\";\r\n\r\ninterface ScreenOverlayProps {\r\n  /**\r\n   * Children to render inside the overlay.\r\n   */\r\n  children?: React.ReactNode;\r\n\r\n  /**\r\n   * Whether to fade in the overlay.\r\n   */\r\n  fadeIn?: boolean;\r\n\r\n  /**\r\n   * Callback function to handle events (click or ESC key).\r\n   */\r\n  onClose?: () => void;\r\n\r\n  /**\r\n   * Ref to the overlay element.\r\n   */\r\n  ref?: React.RefObject<HTMLDivElement>;\r\n}\r\n\r\n/**\r\n * Base Overlay component for creating modal-like backgrounds.\r\n *\r\n * API:\r\n *  - {@link ScreenOverlayProps}\r\n */\r\nexport const ScreenOverlay = forwardRef<HTMLDivElement, ScreenOverlayProps>(\r\n  ({ fadeIn = false, onClose, children }, ref) => {\r\n    const { theme, palette } = useTheme();\r\n\r\n    useEffect(() => {\r\n      if (!onClose) return;\r\n\r\n      const handleEscKey = (event: KeyboardEvent) => {\r\n        if (event.key === \"Escape\") onClose();\r\n      };\r\n\r\n      document.addEventListener(\"keydown\", handleEscKey);\r\n      return () => {\r\n        document.removeEventListener(\"keydown\", handleEscKey);\r\n      };\r\n    }, [onClose]);\r\n\r\n    return (\r\n      <Portal.Root>\r\n        <ThemeProvider theme={theme} palette={palette}>\r\n          <div\r\n            ref={ref}\r\n            id=\"background\"\r\n            aria-label=\"Background overlay\"\r\n            role=\"dialog\"\r\n            aria-modal=\"true\"\r\n            data-testid=\"screen-overlay\"\r\n            className={csx(\r\n              \"proton-ScreenOverlay__background\",\r\n              \"proton-ScreenOverlay__z-index\",\r\n              fadeIn && \"proton-ScreenOverlay__fade-in\"\r\n            )}\r\n            onClick={(event: React.MouseEvent) => {\r\n              if (!onClose) return;\r\n\r\n              // Only trigger onClose if the click was directly on the background element\r\n              if (event.target === event.currentTarget) {\r\n                onClose();\r\n              }\r\n            }}\r\n          >\r\n            {children}\r\n          </div>\r\n        </ThemeProvider>\r\n      </Portal.Root>\r\n    );\r\n  }\r\n);\r\n\r\nScreenOverlay.displayName = \"ProtonUIScreenOverlay\";\r\n"],"names":["ScreenOverlay","forwardRef","fadeIn","onClose","children","ref","theme","palette","useTheme","useEffect","handleEscKey","event","Portal","jsx","ThemeProvider","csx"],"mappings":"gTAoCaA,EAAgBC,EAAA,WAC3B,CAAC,CAAE,OAAAC,EAAS,GAAO,QAAAC,EAAS,SAAAC,CAAA,EAAYC,IAAQ,CAC9C,KAAM,CAAE,MAAAC,EAAO,QAAAC,CAAQ,EAAIC,EAAS,SAAA,EAEpCC,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAI,CAACN,EAAS,OAER,MAAAO,EAAgBC,GAAyB,CACzCA,EAAM,MAAQ,UAAkBR,EAAA,CAAA,EAG7B,gBAAA,iBAAiB,UAAWO,CAAY,EAC1C,IAAM,CACF,SAAA,oBAAoB,UAAWA,CAAY,CAAA,CACtD,EACC,CAACP,CAAO,CAAC,0BAGTS,EAAAA,OAAO,KAAP,CACC,SAACC,wBAAAC,EAAAA,cAAA,CAAc,MAAAR,EAAc,QAAAC,EAC3B,SAAAM,EAAA,kBAAA,IAAC,MAAA,CACC,IAAAR,EACA,GAAG,aACH,aAAW,qBACX,KAAK,SACL,aAAW,OACX,cAAY,iBACZ,UAAWU,EAAA,IACT,mCACA,gCACAb,GAAU,+BACZ,EACA,QAAUS,GAA4B,CAC/BR,GAGDQ,EAAM,SAAWA,EAAM,eACjBR,GAEZ,EAEC,SAAAC,CAAA,CAAA,CAEL,CAAA,CACF,CAAA,CAEJ,CACF,EAEAJ,EAAc,YAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScreenOverlay.es.js","sources":["../../../src/components/ScreenOverlay/ScreenOverlay.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect } from \"react\";\nimport \"./ScreenOverlay.css\";\nimport { csx } from \"../../utils\";\nimport { Portal } from \"radix-ui\";\nimport { useTheme, ThemeProvider } from \"../ThemeProvider\";\n\ninterface ScreenOverlayProps {\n  /**\n   * Children to render inside the overlay.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Whether to fade in the overlay.\n   */\n  fadeIn?: boolean;\n\n  /**\n   * Callback function to handle events (click or ESC key).\n   */\n  onClose?: () => void;\n\n  /**\n   * Ref to the overlay element.\n   */\n  ref?: React.RefObject<HTMLDivElement>;\n}\n\n/**\n * Base Overlay component for creating modal-like backgrounds.\n *\n * API:\n *  - {@link ScreenOverlayProps}\n */\nexport const ScreenOverlay = forwardRef<HTMLDivElement, ScreenOverlayProps>(\n  ({ fadeIn = false, onClose, children }, ref) => {\n    const { theme, palette } = useTheme();\n\n    useEffect(() => {\n      if (!onClose) return;\n\n      const handleEscKey = (event: KeyboardEvent) => {\n        if (event.key === \"Escape\") onClose();\n      };\n\n      document.addEventListener(\"keydown\", handleEscKey);\n      return () => {\n        document.removeEventListener(\"keydown\", handleEscKey);\n      };\n    }, [onClose]);\n\n    return (\n      <Portal.Root>\n        <ThemeProvider theme={theme} palette={palette}>\n          <div\n            ref={ref}\n            id=\"background\"\n            aria-label=\"Background overlay\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            data-testid=\"screen-overlay\"\n            className={csx(\n              \"proton-ScreenOverlay__background\",\n              \"proton-ScreenOverlay__z-index\",\n              fadeIn && \"proton-ScreenOverlay__fade-in\"\n            )}\n            onClick={(event: React.MouseEvent) => {\n              if (!onClose) return;\n\n              // Only trigger onClose if the click was directly on the background element\n              if (event.target === event.currentTarget) {\n                onClose();\n              }\n            }}\n          >\n            {children}\n          </div>\n        </ThemeProvider>\n      </Portal.Root>\n    );\n  }\n);\n\nScreenOverlay.displayName = \"ProtonUIScreenOverlay\";\n"],"names":["ScreenOverlay","forwardRef","fadeIn","onClose","children","ref","theme","palette","useTheme","useEffect","handleEscKey","event","Portal","jsx","ThemeProvider","csx"],"mappings":";;;;;;AAoCO,MAAMA,IAAgBC;AAAA,EAC3B,CAAC,EAAE,QAAAC,IAAS,IAAO,SAAAC,GAAS,UAAAC,EAAA,GAAYC,MAAQ;AAC9C,UAAM,EAAE,OAAAC,GAAO,SAAAC,EAAQ,IAAIC,EAAS;AAEpC,WAAAC,EAAU,MAAM;AACd,UAAI,CAACN,EAAS;AAER,YAAAO,IAAe,CAACC,MAAyB;AACzC,QAAAA,EAAM,QAAQ,YAAkBR,EAAA;AAAA,MAAA;AAG7B,sBAAA,iBAAiB,WAAWO,CAAY,GAC1C,MAAM;AACF,iBAAA,oBAAoB,WAAWA,CAAY;AAAA,MAAA;AAAA,IACtD,GACC,CAACP,CAAO,CAAC,yBAGTS,EAAO,MAAP,EACC,UAACC,gBAAAA,MAAAC,GAAA,EAAc,OAAAR,GAAc,SAAAC,GAC3B,UAAAM,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,IAAG;AAAA,QACH,cAAW;AAAA,QACX,MAAK;AAAA,QACL,cAAW;AAAA,QACX,eAAY;AAAA,QACZ,WAAWU;AAAA,UACT;AAAA,UACA;AAAA,UACAb,KAAU;AAAA,QACZ;AAAA,QACA,SAAS,CAACS,MAA4B;AACpC,UAAKR,KAGDQ,EAAM,WAAWA,EAAM,iBACjBR;QAEZ;AAAA,QAEC,UAAAC;AAAA,MAAA;AAAA,IAAA,EAEL,CAAA,EACF,CAAA;AAAA,EAEJ;AACF;AAEAJ,EAAc,cAAc;"}
+{"version":3,"file":"ScreenOverlay.es.js","sources":["../../../src/components/ScreenOverlay/ScreenOverlay.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { forwardRef, useEffect } from \"react\";\r\nimport \"./ScreenOverlay.css\";\r\nimport { csx } from \"../../utils\";\r\nimport { Portal } from \"radix-ui\";\r\nimport { useTheme, ThemeProvider } from \"../ThemeProvider\";\r\n\r\ninterface ScreenOverlayProps {\r\n  /**\r\n   * Children to render inside the overlay.\r\n   */\r\n  children?: React.ReactNode;\r\n\r\n  /**\r\n   * Whether to fade in the overlay.\r\n   */\r\n  fadeIn?: boolean;\r\n\r\n  /**\r\n   * Callback function to handle events (click or ESC key).\r\n   */\r\n  onClose?: () => void;\r\n\r\n  /**\r\n   * Ref to the overlay element.\r\n   */\r\n  ref?: React.RefObject<HTMLDivElement>;\r\n}\r\n\r\n/**\r\n * Base Overlay component for creating modal-like backgrounds.\r\n *\r\n * API:\r\n *  - {@link ScreenOverlayProps}\r\n */\r\nexport const ScreenOverlay = forwardRef<HTMLDivElement, ScreenOverlayProps>(\r\n  ({ fadeIn = false, onClose, children }, ref) => {\r\n    const { theme, palette } = useTheme();\r\n\r\n    useEffect(() => {\r\n      if (!onClose) return;\r\n\r\n      const handleEscKey = (event: KeyboardEvent) => {\r\n        if (event.key === \"Escape\") onClose();\r\n      };\r\n\r\n      document.addEventListener(\"keydown\", handleEscKey);\r\n      return () => {\r\n        document.removeEventListener(\"keydown\", handleEscKey);\r\n      };\r\n    }, [onClose]);\r\n\r\n    return (\r\n      <Portal.Root>\r\n        <ThemeProvider theme={theme} palette={palette}>\r\n          <div\r\n            ref={ref}\r\n            id=\"background\"\r\n            aria-label=\"Background overlay\"\r\n            role=\"dialog\"\r\n            aria-modal=\"true\"\r\n            data-testid=\"screen-overlay\"\r\n            className={csx(\r\n              \"proton-ScreenOverlay__background\",\r\n              \"proton-ScreenOverlay__z-index\",\r\n              fadeIn && \"proton-ScreenOverlay__fade-in\"\r\n            )}\r\n            onClick={(event: React.MouseEvent) => {\r\n              if (!onClose) return;\r\n\r\n              // Only trigger onClose if the click was directly on the background element\r\n              if (event.target === event.currentTarget) {\r\n                onClose();\r\n              }\r\n            }}\r\n          >\r\n            {children}\r\n          </div>\r\n        </ThemeProvider>\r\n      </Portal.Root>\r\n    );\r\n  }\r\n);\r\n\r\nScreenOverlay.displayName = \"ProtonUIScreenOverlay\";\r\n"],"names":["ScreenOverlay","forwardRef","fadeIn","onClose","children","ref","theme","palette","useTheme","useEffect","handleEscKey","event","Portal","jsx","ThemeProvider","csx"],"mappings":";;;;;;AAoCO,MAAMA,IAAgBC;AAAA,EAC3B,CAAC,EAAE,QAAAC,IAAS,IAAO,SAAAC,GAAS,UAAAC,EAAA,GAAYC,MAAQ;AAC9C,UAAM,EAAE,OAAAC,GAAO,SAAAC,EAAQ,IAAIC,EAAS;AAEpC,WAAAC,EAAU,MAAM;AACd,UAAI,CAACN,EAAS;AAER,YAAAO,IAAe,CAACC,MAAyB;AACzC,QAAAA,EAAM,QAAQ,YAAkBR,EAAA;AAAA,MAAA;AAG7B,sBAAA,iBAAiB,WAAWO,CAAY,GAC1C,MAAM;AACF,iBAAA,oBAAoB,WAAWA,CAAY;AAAA,MAAA;AAAA,IACtD,GACC,CAACP,CAAO,CAAC,yBAGTS,EAAO,MAAP,EACC,UAACC,gBAAAA,MAAAC,GAAA,EAAc,OAAAR,GAAc,SAAAC,GAC3B,UAAAM,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,IAAG;AAAA,QACH,cAAW;AAAA,QACX,MAAK;AAAA,QACL,cAAW;AAAA,QACX,eAAY;AAAA,QACZ,WAAWU;AAAA,UACT;AAAA,UACA;AAAA,UACAb,KAAU;AAAA,QACZ;AAAA,QACA,SAAS,CAACS,MAA4B;AACpC,UAAKR,KAGDQ,EAAM,WAAWA,EAAM,iBACjBR;QAEZ;AAAA,QAEC,UAAAC;AAAA,MAAA;AAAA,IAAA,EAEL,CAAA,EACF,CAAA;AAAA,EAEJ;AACF;AAEAJ,EAAc,cAAc;"}

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\";\n\nimport {\n  forwardRef,\n  ReactNode,\n  RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { Select as RadixSelect } from \"radix-ui\";\n\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { csx } from \"../../utils\";\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\n\nimport \"./Select.css\";\nimport \"../Menu/Menu.css\";\nimport { useTheme } from \"../ThemeProvider\";\n\ninterface SelectButtonProps {\n  disabled?: boolean;\n  isOpen?: boolean;\n  children?: ReactNode;\n  onClick?: () => void;\n  isRounded?: boolean;\n}\n\nconst SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(\n  (\n    { disabled, isOpen, children, onClick, isRounded, ...props },\n    ref: RefObject<HTMLButtonElement>\n  ) => {\n    return (\n      <button\n        {...props}\n        ref={ref}\n        disabled={disabled}\n        onClick={onClick}\n        className={csx(\n          \"proton-Select__trigger\",\n          disabled && \"proton-Select__trigger--disabled\",\n          !isOpen && \"proton-Select__trigger--closed\",\n          isOpen && \"proton-Select__trigger--opened\",\n          isRounded && \"proton-Select__trigger--rounded\"\n        )}\n      >\n        {children}\n      </button>\n    );\n  }\n);\nSelectButton.displayName = \"ProtonUISelectButton\";\n\nexport interface SelectItem {\n  /** The label to display for the item */\n  label: string;\n\n  /** The key of the item */\n  key: string;\n\n  /** The URL to navigate to when the item is clicked, turns item into an a tag */\n  to?: string;\n}\n\nexport interface SelectProps {\n  /** Array of keys that should be disabled\n   * @example [\"Thing 1\", \"Thing 2\"]\n   */\n  disabledKeys?: string[];\n\n  /** The key of the default selected item */\n  defaultSelectedKey?: string;\n\n  /** Test ID for the select */\n  \"data-testid\"?: string;\n\n  /** Whether the select is disabled */\n  isDisabled?: boolean;\n\n  /** Array of items to display\n   * @example [{ key: \"thing-1\", label: \"Thing 1\" }, { key: \"thing-2\", label: \"Thing 2\" }]\n   * @see {@link SelectItem}\n   */\n  items: SelectItem[];\n\n  /** Whether the select button is rounded\n   * @default false\n   */\n  isRounded?: boolean;\n\n  /** Label to display above the select\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#text\n   */\n  label?: string;\n\n  /** The name of the select field */\n  name: string;\n\n  /** Callback fired when the menu closes */\n  onClose?: () => void;\n\n  /** Callback fired when the menu opens */\n  onOpen?: () => void;\n\n  /** Callback fired when selection changes */\n  onSelectionChange?: (key: string) => void;\n\n  /** Currently selected key */\n  selectedKey?: string;\n}\n\n/**\n * A dropdown select menu that opens a popover on desktop and an action menu on mobile.\n * Supports controlled and uncontrolled modes.\n *\n * API:\n *  - {@link SelectProps}\n */\nexport function Select({\n  label,\n  name,\n  isDisabled,\n  disabledKeys,\n  selectedKey,\n  onSelectionChange,\n  defaultSelectedKey,\n  onOpen,   \n  onClose,\n  items,\n  isRounded = false,\n  \"data-testid\": testId,\n}: SelectProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [internalSelectedKey, setInternalSelectedKey] = useState(\n    selectedKey || defaultSelectedKey || \"\"\n  );\n  const { className: themeClass, style: themeStyle } = useTheme();\n  const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const hiddenInputRef = useRef<HTMLInputElement>(null);\n\n  // Handle controlled vs uncontrolled state\n  const currentSelectedKey =\n    selectedKey !== undefined ? selectedKey : internalSelectedKey;\n  const selectedItem = items.find((item) => item.key === currentSelectedKey);\n\n  const handleValueChange = (value: string) => {\n    if (selectedKey === undefined) {\n      setInternalSelectedKey(value);\n    }\n    onSelectionChange?.(value);\n\n    // Update hidden input for form submission\n    if (hiddenInputRef.current) {\n      hiddenInputRef.current.value = value;\n      hiddenInputRef.current.dispatchEvent(\n        new Event(\"change\", { bubbles: true })\n      );\n    }\n  };\n\n  const handleOpenChange = (open: boolean) => {\n    setIsOpen(open);\n    if (open) {\n      onOpen?.();\n    } else {\n      onClose?.();\n    }\n  };\n\n  // Update internal state when controlled selectedKey changes\n  useEffect(() => {\n    if (selectedKey !== undefined) {\n      setInternalSelectedKey(selectedKey);\n    }\n  }, [selectedKey]);\n\n  const actionItems: ActionMenuAction[] = items.map((item) => ({\n    key: item.key,\n    label: item.label,\n    to: item.to,\n    onAction: () => {\n      handleValueChange(item.key);\n      setIsOpen(false);\n    },\n  }));\n\n  if (isMobile) {\n    return (\n      <div\n        className=\"proton-Select\"\n        aria-label={label || name}\n        aria-disabled={isDisabled}\n      >\n        {label && (\n          <div className=\"proton-Select__label\" data-testid=\"select-label\">\n            {label}\n          </div>\n        )}\n\n        {/* Hidden input for form submission */}\n        <input\n          ref={hiddenInputRef}\n          type=\"hidden\"\n          name={name}\n          value={currentSelectedKey}\n          data-testid=\"hidden-select-container\"\n        />\n\n        <SelectButton\n          isOpen={isOpen}\n          isRounded={isRounded}\n          ref={triggerRef}\n          disabled={isDisabled}\n          data-testid={testId}\n          onClick={() => setIsOpen(true)}\n        >\n          <div className=\"proton-Select__value\">\n            {selectedItem ? selectedItem.label : \"Select an option\"}\n          </div>\n          <div\n            className={csx(\n              \"proton-Select__trigger_icon\",\n              isOpen && \"proton-Select__trigger_icon--flipped\"\n            )}\n            aria-hidden=\"true\"\n          >\n            <svg id=\"caret-down\" viewBox=\"0 0 512 512\">\n              <title>{isOpen ? \"caret down\" : \"caret up\"}</title>\n              <path\n                fill=\"currentColor\"\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\"\n              />\n            </svg>\n          </div>\n        </SelectButton>\n\n        <ActionMenu\n          isOpen={isOpen}\n          onClose={() => setIsOpen(false)}\n          actions={actionItems}\n          selectedKeys={[currentSelectedKey]}\n          disabledKeys={disabledKeys}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className=\"proton-Select\"\n      aria-label={label || name}\n      aria-disabled={isDisabled}\n    >\n      {label && (\n        <div className=\"proton-Select__label\" data-testid=\"select-label\">\n          {label}\n        </div>\n      )}\n\n      {/* Hidden input for form submission */}\n      <input\n        ref={hiddenInputRef}\n        type=\"hidden\"\n        name={name}\n        value={currentSelectedKey}\n        data-testid=\"hidden-select-container\"\n      />\n\n      <RadixSelect.Root\n        value={currentSelectedKey}\n        onValueChange={handleValueChange}\n        onOpenChange={handleOpenChange}\n        disabled={isDisabled}\n      >\n        <RadixSelect.Trigger asChild>\n          <SelectButton\n            isRounded={isRounded}\n            isOpen={isOpen}\n            ref={triggerRef}\n            disabled={isDisabled}\n            data-testid={testId}\n          >\n            <RadixSelect.Value\n              className=\"proton-Select__value\"\n              placeholder=\"Select an option\"\n            >\n              {selectedItem ? selectedItem.label : \"Select an option\"}\n            </RadixSelect.Value>\n            <RadixSelect.Icon asChild>\n              <div\n                className={csx(\n                  \"proton-Select__trigger_icon\",\n                  isOpen && \"proton-Select__trigger_icon--flipped\"\n                )}\n                aria-hidden=\"true\"\n              >\n                <svg id=\"caret-down\" viewBox=\"0 0 512 512\">\n                  <title>{isOpen ? \"caret down\" : \"caret up\"}</title>\n                  <path\n                    fill=\"currentColor\"\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\"\n                  />\n                </svg>\n              </div>\n            </RadixSelect.Icon>\n          </SelectButton>\n        </RadixSelect.Trigger>\n\n        <RadixSelect.Portal>\n          <RadixSelect.Content\n            className={csx(\n              \"proton-Menu\",\n              \"proton-MenuTrigger__menu\",\n              themeClass\n            )}\n            style={themeStyle as React.CSSProperties}\n            position=\"popper\"\n          >\n            <RadixSelect.Viewport>\n              {items.map((item) => (\n                <RadixSelect.Item\n                  key={item.key}\n                  value={item.key}\n                  disabled={disabledKeys?.includes(item.key)}\n                  className=\"proton-Menu__item\"\n                >\n                  <RadixSelect.ItemText>{item.label}</RadixSelect.ItemText>\n                </RadixSelect.Item>\n              ))}\n            </RadixSelect.Viewport>\n          </RadixSelect.Content>\n        </RadixSelect.Portal>\n      </RadixSelect.Root>\n    </div>\n  );\n}\n\nSelect.displayName = \"ProtonUISelect\";\n"],"names":["SelectButton","forwardRef","disabled","isOpen","children","onClick","isRounded","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":"sdA6BMA,EAAeC,EAAA,WACnB,CACE,CAAE,SAAAC,EAAU,OAAAC,EAAQ,SAAAC,EAAU,QAAAC,EAAS,UAAAC,EAAW,GAAGC,CAAM,EAC3DC,IAGEC,EAAA,kBAAA,IAAC,SAAA,CACE,GAAGF,EACJ,IAAAC,EACA,SAAAN,EACA,QAAAG,EACA,UAAWK,EAAA,IACT,yBACAR,GAAY,mCACZ,CAACC,GAAU,iCACXA,GAAU,iCACVG,GAAa,iCACf,EAEC,SAAAF,CAAA,CAAA,CAIT,EACAJ,EAAa,YAAc,uBAmEpB,SAASW,EAAO,CACrB,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,aAAAC,EACA,YAAAC,EACA,kBAAAC,EACA,mBAAAC,EACA,OAAAC,EACA,QAAAC,EACA,MAAAC,EACA,UAAAf,EAAY,GACZ,cAAegB,CACjB,EAAgB,CACd,KAAM,CAACnB,EAAQoB,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,KAAC7C,EAAA,CACC,OAAAG,EACA,UAAAG,EACA,IAAK2B,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,8BACAP,GAAU,sCACZ,EACA,cAAY,OAEZ,SAAC0C,EAAAA,kBAAAA,KAAA,MAAA,CAAI,GAAG,aAAa,QAAQ,cAC3B,SAAA,CAACpC,EAAA,kBAAA,IAAA,QAAA,CAAO,SAASN,EAAA,aAAe,WAAW,EAC3CM,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,0KAAA,CACJ,CAAA,EACF,CAAA,CACF,CAAA,CAAA,CACF,EAEAA,EAAA,kBAAA,IAACqC,EAAA,WAAA,CACC,OAAA3C,EACA,QAAS,IAAMoB,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,KAAC7C,EAAA,CACC,UAAAM,EACA,OAAAH,EACA,IAAK8B,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,8BACAP,GAAU,sCACZ,EACA,cAAY,OAEZ,SAAC0C,EAAAA,kBAAAA,KAAA,MAAA,CAAI,GAAG,aAAa,QAAQ,cAC3B,SAAA,CAACpC,EAAA,kBAAA,IAAA,QAAA,CAAO,SAASN,EAAA,aAAe,WAAW,EAC3CM,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"}
+{"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  isRounded?: boolean;\r\n}\r\n\r\nconst SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(\r\n  (\r\n    { disabled, isOpen, children, onClick, isRounded, ...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          isRounded && \"proton-Select__trigger--rounded\"\r\n        )}\r\n      >\r\n        {children}\r\n      </button>\r\n    );\r\n  }\r\n);\r\nSelectButton.displayName = \"ProtonUISelectButton\";\r\n\r\nexport interface SelectItem {\r\n  /** The label to display for the item */\r\n  label: string;\r\n\r\n  /** The key of the item */\r\n  key: string;\r\n\r\n  /** The URL to navigate to when the item is clicked, turns item into an a tag */\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   * @see {@link SelectItem}\r\n   */\r\n  items: SelectItem[];\r\n\r\n  /** Whether the select button is rounded\r\n   * @default false\r\n   */\r\n  isRounded?: boolean;\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  isRounded = false,\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          isRounded={isRounded}\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            isRounded={isRounded}\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","isRounded","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":"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"}