@protonradio/proton-ui 0.12.14 → 0.13.1

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

@@ -1,103 +1,103 @@
-import { j as c } from "../../../node_modules/react/jsx-runtime.es.js";
-import { forwardRef as g, useState as k, useRef as w, useEffect as O, Fragment as K } from "react";
+import { jsxs as T, jsx as l } from "react/jsx-runtime";
+import { forwardRef as k, useState as w, useRef as K, useEffect as y, Fragment as A } from "react";
 /* empty css                */
-import { csx as A } from "../../../utils/string.es.js";
-const T = (s) => /^[0-9]+$/.test(s), y = (s, e) => {
-  const n = s.replace(/\D/g, "").split("").slice(0, e);
-  return Array.from({ length: e }, (j, p) => n[p] || "");
-}, B = g(
+import { csx as B } from "../../../utils/string.es.js";
+const I = (s) => /^[0-9]+$/.test(s), $ = (s, c) => {
+  const u = s.replace(/\D/g, "").split("").slice(0, c);
+  return Array.from({ length: c }, (v, e) => u[e] || "");
+}, F = k(
   ({
     length: s = 6,
-    isError: e = !1,
-    errorMessage: n,
-    isDisabled: j = !1,
-    onChange: p,
-    onComplete: l,
-    showSeparator: I = !0,
-    value: f,
-    defaultValue: $,
-    "data-testid": v = "otp-input"
-  }, D) => {
+    isError: c = !1,
+    errorMessage: u,
+    isDisabled: v = !1,
+    onChange: e,
+    onComplete: m,
+    showSeparator: D = !0,
+    value: n,
+    defaultValue: N,
+    "data-testid": P = "otp-input"
+  }, b) => {
     s = s > 0 ? s : 0;
-    const [o, P] = k(
-      () => y(f ?? $ ?? "", s)
-    ), u = w([]);
-    u.current = u.current.slice(0, s), O(() => {
-      f !== void 0 && P(y(f, s));
-    }, [f, s]), O(() => {
+    const [o, O] = w(
+      () => $(n ?? N ?? "", s)
+    ), p = K([]);
+    p.current = p.current.slice(0, s), y(() => {
+      n !== void 0 && O($(n, s));
+    }, [n, s]), y(() => {
       var a;
-      (a = u.current[0]) == null || a.focus();
+      (a = p.current[0]) == null || a.focus();
     }, []);
-    const d = (a) => {
+    const f = (a) => {
       var t;
-      (t = u.current[a]) == null || t.focus();
-    }, m = (a) => {
-      P(a);
+      (t = p.current[a]) == null || t.focus();
+    }, d = (a) => {
+      O(a);
       const t = a.join("");
-      p == null || p(t), t.length === s && (l == null || l(t));
-    }, N = (a, t) => {
+      e == null || e(t), t.length === s && (m == null || m(t));
+    }, j = (a, t) => {
       const i = a.target.value;
-      if (T(i)) {
+      if (I(i)) {
         const r = [...o];
-        r[t] = i, m(r), t < s - 1 && d(t + 1);
+        r[t] = i, d(r), t < s - 1 && f(t + 1);
       } else if (i === "" && o[t]) {
         const r = [...o];
-        r[t] = "", m(r), t > 0 && d(t - 1);
+        r[t] = "", d(r), t > 0 && f(t - 1);
       } else
         a.target.value = o[t] || "";
-    }, b = (a, t) => {
+    }, R = (a, t) => {
       if (a.key === "Backspace" && !o[t] && t > 0) {
         const i = t - 1, r = [...o];
-        r[i] = "", m(r), d(i);
+        r[i] = "", d(r), f(i);
       }
-    }, R = (a, t) => {
+    }, U = (a, t) => {
       a.preventDefault();
       const i = a.clipboardData.getData("text").trim();
-      if (!T(i)) return;
-      const r = s - t, _ = i.slice(0, r).split(""), U = [
+      if (!I(i)) return;
+      const r = s - t, _ = i.slice(0, r).split(""), g = [
         ...o.slice(0, t),
         ..._,
         ...o.slice(t + _.length)
       ];
-      m(U), setTimeout(() => {
-        d(Math.min(t + _.length, s - 1));
+      d(g), setTimeout(() => {
+        f(Math.min(t + _.length, s - 1));
       }, 0);
     };
-    return /* @__PURE__ */ c.jsxs(
+    return /* @__PURE__ */ T(
       "div",
       {
-        ref: D,
+        ref: b,
         role: "group",
         "aria-label": "One-time password",
-        "data-testid": v,
+        "data-testid": P,
         children: [
-          e && n && /* @__PURE__ */ c.jsx("div", { className: "proton-OTPInput__error", children: n }),
-          /* @__PURE__ */ c.jsx("div", { className: "proton-OTPInput__digits", children: o.map((a, t) => /* @__PURE__ */ c.jsxs(K, { children: [
-            I && s % 2 === 0 && t === s / 2 && /* @__PURE__ */ c.jsx("span", { className: "proton-OTPInput__separator", "aria-hidden": "true", children: "-" }),
-            /* @__PURE__ */ c.jsx(
+          c && u && /* @__PURE__ */ l("div", { className: "proton-OTPInput__error", children: u }),
+          /* @__PURE__ */ l("div", { className: "proton-OTPInput__digits", children: o.map((a, t) => /* @__PURE__ */ T(A, { children: [
+            D && s % 2 === 0 && t === s / 2 && /* @__PURE__ */ l("span", { className: "proton-OTPInput__separator", "aria-hidden": "true", children: "-" }),
+            /* @__PURE__ */ l(
               "input",
               {
                 ref: (i) => {
-                  u.current[t] = i;
+                  p.current[t] = i;
                 },
                 id: `digit-${t + 1}`,
-                "data-testid": `${v}-digit-${t + 1}`,
+                "data-testid": `${P}-digit-${t + 1}`,
                 type: "text",
                 inputMode: "numeric",
                 pattern: "[0-9]*",
                 autoComplete: "one-time-code",
                 maxLength: 1,
                 value: a,
-                disabled: j,
-                onChange: (i) => N(i, t),
-                onKeyUp: (i) => b(i, t),
-                onPaste: (i) => R(i, t),
-                className: A(
+                disabled: v,
+                onChange: (i) => j(i, t),
+                onKeyUp: (i) => R(i, t),
+                onPaste: (i) => U(i, t),
+                className: B(
                   "proton-OTPInput__digit",
-                  e && "proton-OTPInput__digit--error"
+                  c && "proton-OTPInput__digit--error"
                 ),
                 "aria-label": `Digit ${t + 1} of ${s}`,
-                "aria-invalid": e
+                "aria-invalid": c
               }
             )
           ] }, t)) })
@@ -106,8 +106,8 @@ const T = (s) => /^[0-9]+$/.test(s), y = (s, e) => {
     );
   }
 );
-B.displayName = "ProtonUIOTPInput";
+F.displayName = "ProtonUIOTPInput";
 export {
-  B as OTPInput
+  F as OTPInput
 };
 //# sourceMappingURL=OTPInput.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"OTPInput.es.js","sources":["../../../../src/components/Input/OTPInput/OTPInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect, useRef, useState, Fragment } from \"react\";\nimport type { ClipboardEvent, KeyboardEvent, ChangeEvent } from \"react\";\n\nimport { csx } from \"../../../utils\";\nimport \"./OTPInput.css\";\n\nconst isValidEntry = (key: string) => /^[0-9]+$/.test(key);\n\nconst stringToValues = (s: string, length: number): string[] => {\n  const digits = s.replace(/\\D/g, \"\").split(\"\").slice(0, length);\n  return Array.from({ length }, (_, i) => digits[i] || \"\");\n};\n\nexport interface OTPInputProps {\n  /** Test ID for digit inputs \n   * @important The test id is applied to each digit as: \n   * ```\n   * ${dataTestId}-digit-${index + 1}\n   * ```\n  */\n  \"data-testid\"?: string;\n  /** Default value when uncontrolled. */\n  defaultValue?: string;\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n  /** Whether the input is in an error state. */\n  isError?: boolean;\n  /** Error message to display when the input is in an error state. */\n  errorMessage?: string;\n  /** Number of digit inputs to render.\n   * @default 6\n   */\n  length?: number;\n  /** Called when the value changes. */\n  onChange?: (value: string) => void;\n  /** Called when all digits are filled. */\n  onComplete?: (value: string) => void;\n  /** Whether to show a separator dash in the middle (when length is even).\n   * @default true\n   */\n  showSeparator?: boolean;\n  /** Current value (controlled mode). */\n  value?: string;\n}\n\n/**\n * Numeric OTP number input with individual digit cells. Supports paste, keyboard navigation, and auto-focus.\n *\n * API:\n *  - {@link OTPInputProps}\n */\nexport const OTPInput = forwardRef<HTMLDivElement, OTPInputProps>(\n  (\n    {\n      length = 6,\n      isError = false,\n      errorMessage,\n      isDisabled = false,\n      onChange,\n      onComplete,\n      showSeparator = true,\n      value: controlledValue,\n      defaultValue,\n      \"data-testid\": dataTestId = \"otp-input\",\n    },\n    ref,\n  ) => {\n    length = length > 0 ? length : 0;\n    const [values, setValues] = useState<string[]>(() =>\n      stringToValues(controlledValue ?? defaultValue ?? \"\", length),\n    );\n    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n    inputRefs.current = inputRefs.current.slice(0, length);\n\n    useEffect(() => {\n      if (controlledValue !== undefined) {\n        setValues(stringToValues(controlledValue, length));\n      }\n    }, [controlledValue, length]);\n\n    useEffect(() => {\n      inputRefs.current[0]?.focus();\n    }, []);\n\n    const focusOnInput = (index: number) => {\n      inputRefs.current[index]?.focus();\n    };\n\n    const updateValues = (next: string[]) => {\n      setValues(next);\n      const joined = next.join(\"\");\n      onChange?.(joined);\n      if (joined.length === length) {\n        onComplete?.(joined);\n      }\n    };\n\n    const handleChange = (\n      event: ChangeEvent<HTMLInputElement>,\n      index: number,\n    ) => {\n      const val = event.target.value;\n\n      if (isValidEntry(val)) {\n        const updated = [...values];\n        updated[index] = val;\n        updateValues(updated);\n        if (index < length - 1) focusOnInput(index + 1);\n      } else if (val === \"\" && values[index]) {\n        const updated = [...values];\n        updated[index] = \"\";\n        updateValues(updated);\n        if (index > 0) focusOnInput(index - 1);\n      } else {\n        event.target.value = values[index] || \"\";\n      }\n    };\n\n    const handleKeyUp = (\n      event: KeyboardEvent<HTMLInputElement>,\n      index: number,\n    ) => {\n      if (event.key === \"Backspace\" && !values[index] && index > 0) {\n        const prevIndex = index - 1;\n        const updated = [...values];\n        updated[prevIndex] = \"\";\n        updateValues(updated);\n        focusOnInput(prevIndex);\n      }\n    };\n\n    const handlePaste = (\n      event: ClipboardEvent<HTMLInputElement>,\n      currentIndex: number,\n    ) => {\n      event.preventDefault();\n      const pasted = event.clipboardData.getData(\"text\").trim();\n      if (!isValidEntry(pasted)) return;\n\n      const remaining = length - currentIndex;\n      const chars = pasted.slice(0, remaining).split(\"\");\n      const updated = [\n        ...values.slice(0, currentIndex),\n        ...chars,\n        ...values.slice(currentIndex + chars.length),\n      ];\n      updateValues(updated);\n      setTimeout(() => {\n        focusOnInput(Math.min(currentIndex + chars.length, length - 1));\n      }, 0);\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label=\"One-time password\"\n        data-testid={dataTestId}\n      >\n        {isError && errorMessage && (\n          <div className=\"proton-OTPInput__error\">{errorMessage}</div>\n        )}\n\n        <div className=\"proton-OTPInput__digits\">\n          {values.map((value, index) => (\n            <Fragment key={index}>\n              {showSeparator && length % 2 === 0 && index === length / 2 && (\n                <span className=\"proton-OTPInput__separator\" aria-hidden=\"true\">\n                  -\n                </span>\n              )}\n              <input\n                ref={(el) => {\n                  inputRefs.current[index] = el;\n                }}\n                id={`digit-${index + 1}`}\n                data-testid={`${dataTestId}-digit-${index + 1}`}\n                type=\"text\"\n                inputMode=\"numeric\"\n                pattern=\"[0-9]*\"\n                autoComplete=\"one-time-code\"\n                maxLength={1}\n                value={value}\n                disabled={isDisabled}\n                onChange={(e) => handleChange(e, index)}\n                onKeyUp={(e) => handleKeyUp(e, index)}\n                onPaste={(e) => handlePaste(e, index)}\n                className={csx(\n                  \"proton-OTPInput__digit\",\n                  isError && \"proton-OTPInput__digit--error\",\n                )}\n                aria-label={`Digit ${index + 1} of ${length}`}\n                aria-invalid={isError}\n              />\n            </Fragment>\n          ))}\n        </div>\n      </div>\n    );\n  },\n);\n\nOTPInput.displayName = \"ProtonUIOTPInput\";\n"],"names":["isValidEntry","key","stringToValues","length","digits","_","i","OTPInput","forwardRef","isError","errorMessage","isDisabled","onChange","onComplete","showSeparator","controlledValue","defaultValue","dataTestId","ref","values","setValues","useState","inputRefs","useRef","useEffect","_a","focusOnInput","index","updateValues","next","joined","handleChange","event","val","updated","handleKeyUp","prevIndex","handlePaste","currentIndex","pasted","remaining","chars","jsxs","jsx","value","Fragment","el","e","csx"],"mappings":"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"}
+{"version":3,"file":"OTPInput.es.js","sources":["../../../../src/components/Input/OTPInput/OTPInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect, useRef, useState, Fragment } from \"react\";\nimport type { ClipboardEvent, KeyboardEvent, ChangeEvent } from \"react\";\n\nimport { csx } from \"../../../utils\";\nimport \"./OTPInput.css\";\n\nconst isValidEntry = (key: string) => /^[0-9]+$/.test(key);\n\nconst stringToValues = (s: string, length: number): string[] => {\n  const digits = s.replace(/\\D/g, \"\").split(\"\").slice(0, length);\n  return Array.from({ length }, (_, i) => digits[i] || \"\");\n};\n\nexport interface OTPInputProps {\n  /** Test ID for digit inputs \n   * @important The test id is applied to each digit as: \n   * ```\n   * ${dataTestId}-digit-${index + 1}\n   * ```\n  */\n  \"data-testid\"?: string;\n  /** Default value when uncontrolled. */\n  defaultValue?: string;\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n  /** Whether the input is in an error state. */\n  isError?: boolean;\n  /** Error message to display when the input is in an error state. */\n  errorMessage?: string;\n  /** Number of digit inputs to render.\n   * @default 6\n   */\n  length?: number;\n  /** Called when the value changes. */\n  onChange?: (value: string) => void;\n  /** Called when all digits are filled. */\n  onComplete?: (value: string) => void;\n  /** Whether to show a separator dash in the middle (when length is even).\n   * @default true\n   */\n  showSeparator?: boolean;\n  /** Current value (controlled mode). */\n  value?: string;\n}\n\n/**\n * Numeric OTP number input with individual digit cells. Supports paste, keyboard navigation, and auto-focus.\n *\n * API:\n *  - {@link OTPInputProps}\n */\nexport const OTPInput = forwardRef<HTMLDivElement, OTPInputProps>(\n  (\n    {\n      length = 6,\n      isError = false,\n      errorMessage,\n      isDisabled = false,\n      onChange,\n      onComplete,\n      showSeparator = true,\n      value: controlledValue,\n      defaultValue,\n      \"data-testid\": dataTestId = \"otp-input\",\n    },\n    ref,\n  ) => {\n    length = length > 0 ? length : 0;\n    const [values, setValues] = useState<string[]>(() =>\n      stringToValues(controlledValue ?? defaultValue ?? \"\", length),\n    );\n    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n    inputRefs.current = inputRefs.current.slice(0, length);\n\n    useEffect(() => {\n      if (controlledValue !== undefined) {\n        setValues(stringToValues(controlledValue, length));\n      }\n    }, [controlledValue, length]);\n\n    useEffect(() => {\n      inputRefs.current[0]?.focus();\n    }, []);\n\n    const focusOnInput = (index: number) => {\n      inputRefs.current[index]?.focus();\n    };\n\n    const updateValues = (next: string[]) => {\n      setValues(next);\n      const joined = next.join(\"\");\n      onChange?.(joined);\n      if (joined.length === length) {\n        onComplete?.(joined);\n      }\n    };\n\n    const handleChange = (\n      event: ChangeEvent<HTMLInputElement>,\n      index: number,\n    ) => {\n      const val = event.target.value;\n\n      if (isValidEntry(val)) {\n        const updated = [...values];\n        updated[index] = val;\n        updateValues(updated);\n        if (index < length - 1) focusOnInput(index + 1);\n      } else if (val === \"\" && values[index]) {\n        const updated = [...values];\n        updated[index] = \"\";\n        updateValues(updated);\n        if (index > 0) focusOnInput(index - 1);\n      } else {\n        event.target.value = values[index] || \"\";\n      }\n    };\n\n    const handleKeyUp = (\n      event: KeyboardEvent<HTMLInputElement>,\n      index: number,\n    ) => {\n      if (event.key === \"Backspace\" && !values[index] && index > 0) {\n        const prevIndex = index - 1;\n        const updated = [...values];\n        updated[prevIndex] = \"\";\n        updateValues(updated);\n        focusOnInput(prevIndex);\n      }\n    };\n\n    const handlePaste = (\n      event: ClipboardEvent<HTMLInputElement>,\n      currentIndex: number,\n    ) => {\n      event.preventDefault();\n      const pasted = event.clipboardData.getData(\"text\").trim();\n      if (!isValidEntry(pasted)) return;\n\n      const remaining = length - currentIndex;\n      const chars = pasted.slice(0, remaining).split(\"\");\n      const updated = [\n        ...values.slice(0, currentIndex),\n        ...chars,\n        ...values.slice(currentIndex + chars.length),\n      ];\n      updateValues(updated);\n      setTimeout(() => {\n        focusOnInput(Math.min(currentIndex + chars.length, length - 1));\n      }, 0);\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label=\"One-time password\"\n        data-testid={dataTestId}\n      >\n        {isError && errorMessage && (\n          <div className=\"proton-OTPInput__error\">{errorMessage}</div>\n        )}\n\n        <div className=\"proton-OTPInput__digits\">\n          {values.map((value, index) => (\n            <Fragment key={index}>\n              {showSeparator && length % 2 === 0 && index === length / 2 && (\n                <span className=\"proton-OTPInput__separator\" aria-hidden=\"true\">\n                  -\n                </span>\n              )}\n              <input\n                ref={(el) => {\n                  inputRefs.current[index] = el;\n                }}\n                id={`digit-${index + 1}`}\n                data-testid={`${dataTestId}-digit-${index + 1}`}\n                type=\"text\"\n                inputMode=\"numeric\"\n                pattern=\"[0-9]*\"\n                autoComplete=\"one-time-code\"\n                maxLength={1}\n                value={value}\n                disabled={isDisabled}\n                onChange={(e) => handleChange(e, index)}\n                onKeyUp={(e) => handleKeyUp(e, index)}\n                onPaste={(e) => handlePaste(e, index)}\n                className={csx(\n                  \"proton-OTPInput__digit\",\n                  isError && \"proton-OTPInput__digit--error\",\n                )}\n                aria-label={`Digit ${index + 1} of ${length}`}\n                aria-invalid={isError}\n              />\n            </Fragment>\n          ))}\n        </div>\n      </div>\n    );\n  },\n);\n\nOTPInput.displayName = \"ProtonUIOTPInput\";\n"],"names":["isValidEntry","key","stringToValues","length","digits","_","i","OTPInput","forwardRef","isError","errorMessage","isDisabled","onChange","onComplete","showSeparator","controlledValue","defaultValue","dataTestId","ref","values","setValues","useState","inputRefs","useRef","useEffect","_a","focusOnInput","index","updateValues","next","joined","handleChange","event","val","updated","handleKeyUp","prevIndex","handlePaste","currentIndex","pasted","remaining","chars","jsxs","jsx","value","Fragment","el","e","csx"],"mappings":"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"}

package/dist/components/Input/SearchInput/SearchInput.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../node_modules/react/jsx-runtime.cjs.js"),c=require("react");;/* empty css                     */const E=require("../BaseInput/Input.cjs.js"),v=require("../../../utils/string.cjs.js"),S=({name:p="search",placeholder:a="Search...",autoComplete:o,isClearable:d=!0,isDisabled:h=!1,error:j,defaultValue:m,value:s,"data-testid":x="proton-SearchInput",onChange:r,onClear:i})=>{const u=c.useRef(null),[l,n]=c.useState(s??m??"");c.useEffect(()=>{s!==void 0&&n(s)},[s]);const f=e=>{n(e),r==null||r(e)},R=()=>{var e;n(""),r==null||r(""),i==null||i(),(e=u.current)==null||e.focus()};return t.jsxRuntimeExports.jsx("div",{className:"proton-SearchInput__wrapper","data-testid":x,role:"search",children:t.jsxRuntimeExports.jsx(E.Input,{type:"search",onChange:f,value:l,name:p,placeholder:a,autoComplete:o,error:j,ref:u,isDisabled:h,prefix:t.jsxRuntimeExports.jsxs("svg",{"aria-hidden":"true",width:"2.8em",height:"1.6em",viewBox:"0 0 24 24",onClick:()=>{var e;return(e=u.current)==null?void 0:e.focus()},children:[t.jsxRuntimeExports.jsx("title",{children:"Magnifying Glass"}),t.jsxRuntimeExports.jsx("path",{fill:"currentColor",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"})]}),suffix:d&&l.length>0?t.jsxRuntimeExports.jsx("button",{type:"button",className:v.csx("proton-SearchInput__button","proton-Input__descriptor","proton-Input__suffix"),"data-testid":`${x}-clear`,onClick:R,"aria-label":"Clear search",children:t.jsxRuntimeExports.jsxs("svg",{"aria-hidden":"true",viewBox:"0 0 50 50",width:"2.2em",height:"1.2em",children:[t.jsxRuntimeExports.jsx("title",{children:"Clear"}),t.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"m37.304 11.282l1.414 1.414l-26.022 26.02l-1.414-1.413z"}),t.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"m12.696 11.282l26.022 26.02l-1.414 1.415l-26.022-26.02z"})]})}):null})})};exports.SearchInput=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react");;/* empty css                     */const S=require("../BaseInput/Input.cjs.js"),I=require("../../../utils/string.cjs.js"),_=({name:p="search",placeholder:d="Search...",autoComplete:h,isClearable:o=!0,isDisabled:f=!1,error:x,defaultValue:j,value:s,"data-testid":a="proton-SearchInput",onChange:r,onClear:i})=>{const c=l.useRef(null),[n,u]=l.useState(s??j??"");l.useEffect(()=>{s!==void 0&&u(s)},[s]);const m=e=>{u(e),r==null||r(e)},v=()=>{var e;u(""),r==null||r(""),i==null||i(),(e=c.current)==null||e.focus()};return t.jsx("div",{className:"proton-SearchInput__wrapper","data-testid":a,role:"search",children:t.jsx(S.Input,{type:"search",onChange:m,value:n,name:p,placeholder:d,autoComplete:h,error:x,ref:c,isDisabled:f,prefix:t.jsxs("svg",{"aria-hidden":"true",width:"2.8em",height:"1.6em",viewBox:"0 0 24 24",onClick:()=>{var e;return(e=c.current)==null?void 0:e.focus()},children:[t.jsx("title",{children:"Magnifying Glass"}),t.jsx("path",{fill:"currentColor",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"})]}),suffix:o&&n.length>0?t.jsx("button",{type:"button",className:I.csx("proton-SearchInput__button","proton-Input__descriptor","proton-Input__suffix"),"data-testid":`${a}-clear`,onClick:v,"aria-label":"Clear search",children:t.jsxs("svg",{"aria-hidden":"true",viewBox:"0 0 50 50",width:"2.2em",height:"1.2em",children:[t.jsx("title",{children:"Clear"}),t.jsx("path",{fill:"currentColor",d:"m37.304 11.282l1.414 1.414l-26.022 26.02l-1.414-1.413z"}),t.jsx("path",{fill:"currentColor",d:"m12.696 11.282l26.022 26.02l-1.414 1.415l-26.022-26.02z"})]})}):null})})};exports.SearchInput=_;
 //# sourceMappingURL=SearchInput.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.cjs.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 { Search as SearchIcon } from \"../../Icon\";\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\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=\"2.2em\"\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":"gSA0CaA,EAAc,CAAC,CAC1B,KAAAC,EAAO,SACP,YAAAC,EAAc,YACd,aAAAC,EACA,YAAAC,EAAc,GACd,WAAAC,EAAa,GACb,MAAAC,EACA,aAAAC,EACA,MAAOC,EACP,cAAeC,EAAS,qBACxB,SAAAC,EACA,QAAAC,CACF,IAAwB,CACtB,MAAMC,EAAWC,EAAAA,OAAyB,IAAI,EACxC,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAASR,GAAmBD,GAAgB,EAAE,EAGxEU,EAAAA,UAAU,IAAM,CACVT,IAAoB,QACtBO,EAASP,CAAe,CAE5B,EAAG,CAACA,CAAe,CAAC,EAEpB,MAAMU,EAAgBC,GAAqB,CACzCJ,EAASI,CAAQ,EACjBT,GAAA,MAAAA,EAAWS,EACb,EAEMC,EAAc,IAAM,OACxBL,EAAS,EAAE,EACXL,GAAA,MAAAA,EAAW,IACXC,GAAA,MAAAA,KACAU,EAAAT,EAAS,UAAT,MAAAS,EAAkB,OACpB,EAEA,OACEC,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAU,8BACV,cAAab,EACb,KAAK,SAEL,SAAAa,EAAAA,kBAAAA,IAACC,EAAAA,MAAA,CACC,KAAK,SACL,SAAUL,EACV,MAAAJ,EACA,KAAAb,EACA,YAAAC,EACA,aAAAC,EACA,MAAAG,EACA,IAAKM,EACL,WAAAP,EACA,OACEmB,EAAAA,kBAAAA,KAAC,MAAA,CACC,cAAY,OACZ,MAAM,QACN,OAAO,QACP,QAAQ,YACR,QAAS,IAAA,OAAM,OAAAH,EAAAT,EAAS,UAAT,YAAAS,EAAkB,SAEjC,SAAA,CAAAC,EAAAA,kBAAAA,IAAC,SAAM,SAAA,kBAAA,CAAgB,EACvBA,EAAAA,kBAAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,4HAAA,CAAA,CACJ,CAAA,CAAA,EAGJ,OACElB,GAAeU,EAAM,OAAS,EAC5BQ,EAAAA,kBAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAWG,EAAAA,IACT,6BACA,2BACA,sBAAA,EAEF,cAAa,GAAGhB,CAAM,SACtB,QAASW,EACT,aAAW,eAEX,SAAAI,EAAAA,kBAAAA,KAAC,MAAA,CACC,cAAY,OACZ,QAAQ,YACR,MAAM,QACN,OAAO,QAEP,SAAA,CAAAF,EAAAA,kBAAAA,IAAC,SAAM,SAAA,OAAA,CAAK,EACZA,EAAAA,kBAAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,wDAAA,CAAA,EAEJA,EAAAA,kBAAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,yDAAA,CAAA,CACJ,CAAA,CAAA,CACF,CAAA,EAEA,IAAA,CAAA,CAER,CAAA,CAGN"}
+{"version":3,"file":"SearchInput.cjs.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 { Search as SearchIcon } from \"../../Icon\";\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\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=\"2.2em\"\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":"mQA0CaA,EAAc,CAAC,CAC1B,KAAAC,EAAO,SACP,YAAAC,EAAc,YACd,aAAAC,EACA,YAAAC,EAAc,GACd,WAAAC,EAAa,GACb,MAAAC,EACA,aAAAC,EACA,MAAOC,EACP,cAAeC,EAAS,qBACxB,SAAAC,EACA,QAAAC,CACF,IAAwB,CACtB,MAAMC,EAAWC,EAAAA,OAAyB,IAAI,EACxC,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAASR,GAAmBD,GAAgB,EAAE,EAGxEU,EAAAA,UAAU,IAAM,CACVT,IAAoB,QACtBO,EAASP,CAAe,CAE5B,EAAG,CAACA,CAAe,CAAC,EAEpB,MAAMU,EAAgBC,GAAqB,CACzCJ,EAASI,CAAQ,EACjBT,GAAA,MAAAA,EAAWS,EACb,EAEMC,EAAc,IAAM,OACxBL,EAAS,EAAE,EACXL,GAAA,MAAAA,EAAW,IACXC,GAAA,MAAAA,KACAU,EAAAT,EAAS,UAAT,MAAAS,EAAkB,OACpB,EAEA,OACEC,EAAAA,IAAC,MAAA,CACC,UAAU,8BACV,cAAab,EACb,KAAK,SAEL,SAAAa,EAAAA,IAACC,EAAAA,MAAA,CACC,KAAK,SACL,SAAUL,EACV,MAAAJ,EACA,KAAAb,EACA,YAAAC,EACA,aAAAC,EACA,MAAAG,EACA,IAAKM,EACL,WAAAP,EACA,OACEmB,EAAAA,KAAC,MAAA,CACC,cAAY,OACZ,MAAM,QACN,OAAO,QACP,QAAQ,YACR,QAAS,IAAA,OAAM,OAAAH,EAAAT,EAAS,UAAT,YAAAS,EAAkB,SAEjC,SAAA,CAAAC,EAAAA,IAAC,SAAM,SAAA,kBAAA,CAAgB,EACvBA,EAAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,4HAAA,CAAA,CACJ,CAAA,CAAA,EAGJ,OACElB,GAAeU,EAAM,OAAS,EAC5BQ,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAWG,EAAAA,IACT,6BACA,2BACA,sBAAA,EAEF,cAAa,GAAGhB,CAAM,SACtB,QAASW,EACT,aAAW,eAEX,SAAAI,EAAAA,KAAC,MAAA,CACC,cAAY,OACZ,QAAQ,YACR,MAAM,QACN,OAAO,QAEP,SAAA,CAAAF,EAAAA,IAAC,SAAM,SAAA,OAAA,CAAK,EACZA,EAAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,wDAAA,CAAA,EAEJA,EAAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,yDAAA,CAAA,CACJ,CAAA,CAAA,CACF,CAAA,EAEA,IAAA,CAAA,CAER,CAAA,CAGN"}

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

@@ -1,50 +1,50 @@
-import { j as t } from "../../../node_modules/react/jsx-runtime.es.js";
-import { useRef as v, useState as _, useEffect as I } from "react";
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import { useRef as I, useState as S, useEffect as b } from "react";
 /* empty css                   */
-import { Input as S } from "../BaseInput/Input.es.js";
-import { csx as b } from "../../../utils/string.es.js";
-const z = ({
-  name: u = "search",
-  placeholder: o = "Search...",
-  autoComplete: d,
-  isClearable: f = !0,
-  isDisabled: h = !1,
-  error: n,
-  defaultValue: m,
-  value: s,
+import { Input as w } from "../BaseInput/Input.es.js";
+import { csx as y } from "../../../utils/string.es.js";
+const M = ({
+  name: o = "search",
+  placeholder: d = "Search...",
+  autoComplete: f,
+  isClearable: h = !0,
+  isDisabled: n = !1,
+  error: m,
+  defaultValue: x,
+  value: i,
   "data-testid": a = "proton-SearchInput",
   onChange: e,
-  onClear: i
+  onClear: s
 }) => {
-  const c = v(null), [p, l] = _(s ?? m ?? "");
-  I(() => {
-    s !== void 0 && l(s);
-  }, [s]);
-  const x = (r) => {
-    l(r), e == null || e(r);
-  }, j = () => {
-    var r;
-    l(""), e == null || e(""), i == null || i(), (r = c.current) == null || r.focus();
+  const c = I(null), [p, l] = S(i ?? x ?? "");
+  b(() => {
+    i !== void 0 && l(i);
+  }, [i]);
+  const v = (t) => {
+    l(t), e == null || e(t);
+  }, _ = () => {
+    var t;
+    l(""), e == null || e(""), s == null || s(), (t = c.current) == null || t.focus();
   };
-  return /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ r(
     "div",
     {
       className: "proton-SearchInput__wrapper",
       "data-testid": a,
       role: "search",
-      children: /* @__PURE__ */ t.jsx(
-        S,
+      children: /* @__PURE__ */ r(
+        w,
         {
           type: "search",
-          onChange: x,
+          onChange: v,
           value: p,
-          name: u,
-          placeholder: o,
-          autoComplete: d,
-          error: n,
+          name: o,
+          placeholder: d,
+          autoComplete: f,
+          error: m,
           ref: c,
-          isDisabled: h,
-          prefix: /* @__PURE__ */ t.jsxs(
+          isDisabled: n,
+          prefix: /* @__PURE__ */ u(
             "svg",
             {
               "aria-hidden": "true",
@@ -52,12 +52,12 @@ const z = ({
               height: "1.6em",
               viewBox: "0 0 24 24",
               onClick: () => {
-                var r;
-                return (r = c.current) == null ? void 0 : r.focus();
+                var t;
+                return (t = c.current) == null ? void 0 : t.focus();
               },
               children: [
-                /* @__PURE__ */ t.jsx("title", { children: "Magnifying Glass" }),
-                /* @__PURE__ */ t.jsx(
+                /* @__PURE__ */ r("title", { children: "Magnifying Glass" }),
+                /* @__PURE__ */ r(
                   "path",
                   {
                     fill: "currentColor",
@@ -67,19 +67,19 @@ const z = ({
               ]
             }
           ),
-          suffix: f && p.length > 0 ? /* @__PURE__ */ t.jsx(
+          suffix: h && p.length > 0 ? /* @__PURE__ */ r(
             "button",
             {
               type: "button",
-              className: b(
+              className: y(
                 "proton-SearchInput__button",
                 "proton-Input__descriptor",
                 "proton-Input__suffix"
               ),
               "data-testid": `${a}-clear`,
-              onClick: j,
+              onClick: _,
               "aria-label": "Clear search",
-              children: /* @__PURE__ */ t.jsxs(
+              children: /* @__PURE__ */ u(
                 "svg",
                 {
                   "aria-hidden": "true",
@@ -87,15 +87,15 @@ const z = ({
                   width: "2.2em",
                   height: "1.2em",
                   children: [
-                    /* @__PURE__ */ t.jsx("title", { children: "Clear" }),
-                    /* @__PURE__ */ t.jsx(
+                    /* @__PURE__ */ r("title", { children: "Clear" }),
+                    /* @__PURE__ */ r(
                       "path",
                       {
                         fill: "currentColor",
                         d: "m37.304 11.282l1.414 1.414l-26.022 26.02l-1.414-1.413z"
                       }
                     ),
-                    /* @__PURE__ */ t.jsx(
+                    /* @__PURE__ */ r(
                       "path",
                       {
                         fill: "currentColor",
@@ -113,6 +113,6 @@ const z = ({
   );
 };
 export {
-  z as SearchInput
+  M as SearchInput
 };
 //# sourceMappingURL=SearchInput.es.js.map

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 { Search as SearchIcon } from \"../../Icon\";\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\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=\"2.2em\"\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":";;;;;AA0CO,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;AACtB,QAAMC,IAAWC,EAAyB,IAAI,GACxC,CAACC,GAAOC,CAAQ,IAAIC,EAASR,KAAmBD,KAAgB,EAAE;AAGxE,EAAAU,EAAU,MAAM;AACd,IAAIT,MAAoB,UACtBO,EAASP,CAAe;AAAA,EAE5B,GAAG,CAACA,CAAe,CAAC;AAEpB,QAAMU,IAAe,CAACC,MAAqB;AACzC,IAAAJ,EAASI,CAAQ,GACjBT,KAAA,QAAAA,EAAWS;AAAA,EACb,GAEMC,IAAc,MAAM;;AACxB,IAAAL,EAAS,EAAE,GACXL,KAAA,QAAAA,EAAW,KACXC,KAAA,QAAAA,MACAU,IAAAT,EAAS,YAAT,QAAAS,EAAkB;AAAA,EACpB;AAEA,SACEC,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAab;AAAA,MACb,MAAK;AAAA,MAEL,UAAAa,gBAAAA,EAAAA;AAAAA,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,EAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,OAAM;AAAA,cACN,QAAO;AAAA,cACP,SAAQ;AAAA,cACR,SAAS,MAAA;;AAAM,wBAAAH,IAAAT,EAAS,YAAT,gBAAAS,EAAkB;AAAA;AAAA,cAEjC,UAAA;AAAA,gBAAAC,gBAAAA,EAAAA,IAAC,WAAM,UAAA,mBAAA,CAAgB;AAAA,gBACvBA,gBAAAA,EAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,GAAE;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACJ;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ,QACElB,KAAeU,EAAM,SAAS,IAC5BQ,gBAAAA,EAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAWG;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cAEF,eAAa,GAAGhB,CAAM;AAAA,cACtB,SAASW;AAAA,cACT,cAAW;AAAA,cAEX,UAAAI,gBAAAA,EAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,SAAQ;AAAA,kBACR,OAAM;AAAA,kBACN,QAAO;AAAA,kBAEP,UAAA;AAAA,oBAAAF,gBAAAA,EAAAA,IAAC,WAAM,UAAA,QAAA,CAAK;AAAA,oBACZA,gBAAAA,EAAAA;AAAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,GAAE;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAEJA,gBAAAA,EAAAA;AAAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,GAAE;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACJ;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA,IAEA;AAAA,QAAA;AAAA,MAAA;AAAA,IAER;AAAA,EAAA;AAGN;"}
+{"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 { Search as SearchIcon } from \"../../Icon\";\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\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=\"2.2em\"\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":";;;;;AA0CO,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;AACtB,QAAMC,IAAWC,EAAyB,IAAI,GACxC,CAACC,GAAOC,CAAQ,IAAIC,EAASR,KAAmBD,KAAgB,EAAE;AAGxE,EAAAU,EAAU,MAAM;AACd,IAAIT,MAAoB,UACtBO,EAASP,CAAe;AAAA,EAE5B,GAAG,CAACA,CAAe,CAAC;AAEpB,QAAMU,IAAe,CAACC,MAAqB;AACzC,IAAAJ,EAASI,CAAQ,GACjBT,KAAA,QAAAA,EAAWS;AAAA,EACb,GAEMC,IAAc,MAAM;;AACxB,IAAAL,EAAS,EAAE,GACXL,KAAA,QAAAA,EAAW,KACXC,KAAA,QAAAA,MACAU,IAAAT,EAAS,YAAT,QAAAS,EAAkB;AAAA,EACpB;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAab;AAAA,MACb,MAAK;AAAA,MAEL,UAAA,gBAAAa;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,QACE,gBAAAmB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,OAAM;AAAA,cACN,QAAO;AAAA,cACP,SAAQ;AAAA,cACR,SAAS,MAAA;;AAAM,wBAAAH,IAAAT,EAAS,YAAT,gBAAAS,EAAkB;AAAA;AAAA,cAEjC,UAAA;AAAA,gBAAA,gBAAAC,EAAC,WAAM,UAAA,mBAAA,CAAgB;AAAA,gBACvB,gBAAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,GAAE;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACJ;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ,QACElB,KAAeU,EAAM,SAAS,IAC5B,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAWG;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cAEF,eAAa,GAAGhB,CAAM;AAAA,cACtB,SAASW;AAAA,cACT,cAAW;AAAA,cAEX,UAAA,gBAAAI;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,SAAQ;AAAA,kBACR,OAAM;AAAA,kBACN,QAAO;AAAA,kBAEP,UAAA;AAAA,oBAAA,gBAAAF,EAAC,WAAM,UAAA,QAAA,CAAK;AAAA,oBACZ,gBAAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,GAAE;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAEJ,gBAAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,GAAE;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACJ;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA,IAEA;AAAA,QAAA;AAAA,MAAA;AAAA,IAER;AAAA,EAAA;AAGN;"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../node_modules/react/jsx-runtime.cjs.js"),o=require("react"),b=require("../../hooks/useBreakpoint.cjs.js"),O=require("../ActionMenu/ActionMenu.cjs.js"),k=require("./PopoverMenu.cjs.js");;/* empty css                     */;/* empty css              */const y=require("../Icon/IconComponents/Ellipsis.cjs.js"),A=require("../../constants/breakpoint.cjs.js");function f({renderTrigger:a,size:q=24,title:c,items:p,disabled:g,onClose:s,triggerTestId:R="MenuTrigger-Trigger",menuTestId:d,onSelectionChange:i,selectedKey:u,disabledKeys:x}){const E=b.useBreakpoint(A.BREAKPOINTS.SMALL),[e,n]=o.useState(!1),T=o.useRef(null),l=o.useMemo(()=>p.map(r=>({...r,id:r.key})),[p]),m=r=>{i==null||i(r),n(!1)},M=a?a({isOpen:e,disabled:g,setIsOpen:n}):t.jsxRuntimeExports.jsx("button",{"data-testid":R,disabled:g,className:"proton-MenuTrigger__button",ref:T,onClick:()=>n(!e),type:"button","aria-label":"Open menu","aria-expanded":e,children:t.jsxRuntimeExports.jsx(y.Ellipsis,{size:q})});return E?t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[M,e&&t.jsxRuntimeExports.jsx(O.ActionMenu,{actions:l,title:c,isOpen:e,onClose:()=>{n(!1),s==null||s()},showCancel:!0,"data-testid":d,selectionMode:"single",onSelectionChange:r=>{const j=Array.from(r)[0];j&&m(j)},selectedKeys:u?[u]:void 0,disabledKeys:x})]}):t.jsxRuntimeExports.jsx(k.PopoverMenu,{trigger:M,items:l,isOpen:e,onOpenChange:n,selectedKey:u,onSelectionChange:m,disabledKeys:x,title:c})}f.displayName="ProtonUIMenuTrigger";exports.MenuTrigger=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("react"),k=require("../../hooks/useBreakpoint.cjs.js"),y=require("../ActionMenu/ActionMenu.cjs.js"),A=require("./PopoverMenu.cjs.js");;/* empty css                     */;/* empty css              */const P=require("../Icon/IconComponents/Ellipsis.cjs.js"),R=require("../../constants/breakpoint.cjs.js");function q({renderTrigger:a,size:x=24,title:c,items:g,disabled:p,onClose:i,triggerTestId:j="MenuTrigger-Trigger",menuTestId:T,onSelectionChange:s,selectedKey:u,disabledKeys:l}){const b=k.useBreakpoint(R.BREAKPOINTS.SMALL),[e,n]=o.useState(!1),O=o.useRef(null),M=o.useMemo(()=>g.map(r=>({...r,id:r.key})),[g]),f=r=>{s==null||s(r),n(!1)},m=a?a({isOpen:e,disabled:p,setIsOpen:n}):t.jsx("button",{"data-testid":j,disabled:p,className:"proton-MenuTrigger__button",ref:O,onClick:()=>n(!e),type:"button","aria-label":"Open menu","aria-expanded":e,children:t.jsx(P.Ellipsis,{size:x})});return b?t.jsxs(t.Fragment,{children:[m,e&&t.jsx(y.ActionMenu,{actions:M,title:c,isOpen:e,onClose:()=>{n(!1),i==null||i()},showCancel:!0,"data-testid":T,selectionMode:"single",onSelectionChange:r=>{const d=Array.from(r)[0];d&&f(d)},selectedKeys:u?[u]:void 0,disabledKeys:l})]}):t.jsx(A.PopoverMenu,{trigger:m,items:M,isOpen:e,onOpenChange:n,selectedKey:u,onSelectionChange:f,disabledKeys:l,title:c})}q.displayName="ProtonUIMenuTrigger";exports.MenuTrigger=q;
 //# 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 { Ellipsis as EllipsisIcon } from \"../Icon\";\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 device capabilities (touch detection and 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      aria-label=\"Open menu\"\n      aria-expanded={isOpen}\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\nMenuTrigger.displayName = \"ProtonUIMenuTrigger\";\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":"ycAqEO,SAASA,EAAY,CAC1B,cAAAC,EACA,KAAAC,EAAO,GACP,MAAAC,EACA,MAAAC,EACA,SAAAC,EACA,QAAAC,EACA,cAAAC,EAAgB,sBAChB,WAAAC,EACA,kBAAAC,EACA,YAAAC,EACA,aAAAC,CACF,EAAc,CACZ,MAAMC,EAAWC,EAAAA,cAAcC,EAAAA,YAAY,KAAK,EAC1C,CAACC,EAAQC,CAAS,EAAIC,EAAAA,SAAS,EAAK,EACpCC,EAAaC,EAAAA,OAA0B,IAAI,EAE3CC,EAAYC,EAAAA,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,CACjB,EAEMS,EAAgBxB,EACpBA,EAAc,CACZ,OAAAc,EACA,SAAAV,EACA,UAAAW,CAAA,CACD,EAEDU,EAAAA,kBAAAA,IAAC,SAAA,CACC,cAAanB,EACb,SAAAF,EACA,UAAU,6BACV,IAAKa,EACL,QAAS,IAAMF,EAAU,CAACD,CAAM,EAChC,KAAK,SACL,aAAW,YACX,gBAAeA,EAEf,SAAAW,EAAAA,kBAAAA,IAACC,YAAa,KAAAzB,CAAA,CAAY,CAAA,CAAA,EAI9B,OAAIU,EAEAgB,EAAAA,kBAAAA,KAAAC,6BAAA,CACG,SAAA,CAAAJ,EACAV,GACCW,EAAAA,kBAAAA,IAACI,EAAAA,WAAA,CACC,QAASV,EACT,MAAAjB,EACA,OAAAY,EACA,QAAS,IAAM,CACbC,EAAU,EAAK,EACfV,GAAA,MAAAA,GACF,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,CAAA,CACF,EAEJ,EAKFe,EAAAA,kBAAAA,IAACO,EAAAA,YAAA,CACC,QAASR,EACT,MAAOL,EACP,OAAAL,EACA,aAAcC,EACd,YAAAN,EACA,kBAAmBa,EACnB,aAAAZ,EACA,MAAAR,CAAA,CAAA,CAGN,CAEAH,EAAY,YAAc"}
+{"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 { Ellipsis as EllipsisIcon } from \"../Icon\";\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 device capabilities (touch detection and 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      aria-label=\"Open menu\"\n      aria-expanded={isOpen}\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\nMenuTrigger.displayName = \"ProtonUIMenuTrigger\";\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":"+aAqEO,SAASA,EAAY,CAC1B,cAAAC,EACA,KAAAC,EAAO,GACP,MAAAC,EACA,MAAAC,EACA,SAAAC,EACA,QAAAC,EACA,cAAAC,EAAgB,sBAChB,WAAAC,EACA,kBAAAC,EACA,YAAAC,EACA,aAAAC,CACF,EAAc,CACZ,MAAMC,EAAWC,EAAAA,cAAcC,EAAAA,YAAY,KAAK,EAC1C,CAACC,EAAQC,CAAS,EAAIC,EAAAA,SAAS,EAAK,EACpCC,EAAaC,EAAAA,OAA0B,IAAI,EAE3CC,EAAYC,EAAAA,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,CACjB,EAEMS,EAAgBxB,EACpBA,EAAc,CACZ,OAAAc,EACA,SAAAV,EACA,UAAAW,CAAA,CACD,EAEDU,EAAAA,IAAC,SAAA,CACC,cAAanB,EACb,SAAAF,EACA,UAAU,6BACV,IAAKa,EACL,QAAS,IAAMF,EAAU,CAACD,CAAM,EAChC,KAAK,SACL,aAAW,YACX,gBAAeA,EAEf,SAAAW,EAAAA,IAACC,YAAa,KAAAzB,CAAA,CAAY,CAAA,CAAA,EAI9B,OAAIU,EAEAgB,EAAAA,KAAAC,WAAA,CACG,SAAA,CAAAJ,EACAV,GACCW,EAAAA,IAACI,EAAAA,WAAA,CACC,QAASV,EACT,MAAAjB,EACA,OAAAY,EACA,QAAS,IAAM,CACbC,EAAU,EAAK,EACfV,GAAA,MAAAA,GACF,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,CAAA,CACF,EAEJ,EAKFe,EAAAA,IAACO,EAAAA,YAAA,CACC,QAASR,EACT,MAAOL,EACP,OAAAL,EACA,aAAcC,EACd,YAAAN,EACA,kBAAmBa,EACnB,aAAAZ,EACA,MAAAR,CAAA,CAAA,CAGN,CAEAH,EAAY,YAAc"}