se-design 1.0.75 → 1.0.76-dev2

package/dist/index45.js

@@ -1,195 +1,148 @@
-import t, { useState as m, useRef as h, useCallback as f, useEffect as x } from "react";
+import e, { useState as S, useRef as k, useCallback as P, useEffect as Y } from "react";
 /* empty css         */
-import g from "./index218.js";
-import { Icon as T } from "./index5.js";
-import { useStableId as E } from "./index192.js";
-import { getA11yNameAttributes as ce } from "./index71.js";
-import { useCombobox as se } from "./index201.js";
-function c() {
-  return c = Object.assign ? Object.assign.bind() : function(s) {
+import { Icon as x } from "./index6.js";
+import { useStableId as Z } from "./index199.js";
+import { getA11yNameAttributes as L } from "./index78.js";
+import "./index72.js";
+import { useCombobox as ee } from "./index68.js";
+function u() {
+  return u = Object.assign ? Object.assign.bind() : function(o) {
     for (var i = 1; i < arguments.length; i++) {
-      var r = arguments[i];
-      for (var l in r) ({}).hasOwnProperty.call(r, l) && (s[l] = r[l]);
+      var t = arguments[i];
+      for (var a in t) ({}).hasOwnProperty.call(t, a) && (o[a] = t[a]);
     }
-    return s;
-  }, c.apply(null, arguments);
+    return o;
+  }, u.apply(null, arguments);
 }
-const fe = ({
-  onCountrycodeChange: s,
-  onNumberChange: i,
-  error: r,
-  errorMessage: l,
-  value: u,
-  label: C,
-  automationId: d = "",
-  ariaLabel: A,
-  ariaLabelledBy: L,
-  ariaDescribedBy: z,
-  disabled: a = !1
+const re = /* @__PURE__ */ e.memo(({
+  value: o,
+  onChange: i,
+  disabled: t = !1,
+  maxLength: a,
+  tag: B = "input",
+  error: r = !1,
+  errorMessage: R,
+  label: p,
+  placeholder: j,
+  suggestions: c = [],
+  onSelect: N,
+  renderOption: d,
+  optionClassName: A,
+  automationId: F = "",
+  ariaLabel: b,
+  ariaLabelledBy: O,
+  ariaDescribedBy: V,
+  ..._
 }) => {
-  const [v, P] = m(u?.countryCode || g[0].dial_code), [n, y] = m(!1), [w, $] = m(g), [G, k] = m(""), [Q, R] = m(""), U = h(null), F = h(null), O = h(null), p = h(!1), B = E(d, "phone-label"), K = E(d, "phone-listbox"), W = E(d, "phone-input"), V = E(d, "phone-error"), b = g.find((e) => e.dial_code === v), j = f(() => {
-    y(!1), k(""), $(g);
-  }, []), N = f((e) => {
-    e && (P(e), s(e)), j();
-  }, [s, j]), X = f((e) => {
-    p.current = !0, N(e.dial_code);
+  const [s, v] = S([...c]), [E, f] = S(!1), H = k(null), $ = k(null), g = Z(void 0, "autocomplete"), z = `${g}-input`, D = `${g}-listbox`, C = `${g}-label`, y = `${g}-error`, w = P((l) => {
+    f(!1), N?.(l);
   }, [N]), {
-    containerProps: q,
-    inputProps: Y,
-    listboxProps: Z,
-    getOptionProps: ee,
-    highlightedIndex: te,
-    setHighlightedIndex: H
-  } = se({
-    items: w,
-    isOpen: n,
-    onOpenChange: y,
-    onSelect: X,
-    listboxId: K
-  }), ne = (e) => {
-    const o = e.target.value;
-    k(o), H(-1);
-    const S = g.filter((_) => _.name.toLowerCase().includes(o.toLowerCase()) || _.dial_code.toLowerCase().includes(o.toLowerCase()) || _.code.toLowerCase().includes(o.toLowerCase()));
-    $(S);
-  }, I = h(n);
-  x(() => {
-    let e = null;
-    return I.current && !n && p.current && (e = requestAnimationFrame(() => {
-      F.current?.focus();
-    })), I.current && !n && (p.current = !1), I.current = n, () => {
-      e !== null && cancelAnimationFrame(e);
-    };
-  }, [n]), x(() => {
-    u && (P(u.countryCode), R(u.number));
-  }, [u]), x(() => {
-    let e = null;
-    return n && (e = requestAnimationFrame(() => {
-      O.current?.focus();
-    })), () => {
-      e !== null && cancelAnimationFrame(e);
-    };
-  }, [n]);
-  const oe = (e) => {
-    const o = e.replace(/\D/g, "");
-    R(o), i(o);
-  }, D = f(() => {
-    a || y((e) => !e);
-  }, [a]), re = f((e) => {
-    if (!a)
-      switch (e.key) {
-        case "Enter":
-        case " ":
-          e.preventDefault(), D();
-          break;
-        case "ArrowDown":
-          e.preventDefault(), n || y(!0);
-          break;
+    containerProps: M,
+    inputProps: q,
+    listboxProps: G,
+    getOptionProps: J,
+    highlightedIndex: K,
+    setHighlightedIndex: h
+  } = ee({
+    items: s,
+    isOpen: E,
+    onOpenChange: f,
+    onSelect: w,
+    listboxId: D
+  }), Q = P((l) => {
+    const n = l.target.value;
+    if (h(-1), i(n), !d)
+      if (n === "")
+        v([...c]);
+      else {
+        const I = c?.filter((m) => typeof m == "object" && m?.label?.toLowerCase().includes(n?.toLowerCase() ?? ""));
+        v([...I]);
       }
-  }, [a, n, D]), J = L || (!A && C ? B : void 0), M = L ? void 0 : A || (C ? void 0 : "Phone number"), ae = ce({
-    ariaLabelledBy: J,
-    ariaLabel: M,
-    ariaDescribedBy: r ? V : z
+  }, [i, c, d, h]);
+  Y(() => {
+    v([...c]);
+  }, [c]);
+  const T = () => {
+    f(!0);
+  }, U = () => {
+    s.length > 0 && f(!0);
+  }, W = () => {
+    i(""), h(-1), $.current?.focus();
+  }, X = L({
+    ariaLabelledBy: p && !b ? C : O,
+    ariaLabel: b,
+    ariaDescribedBy: r ? y : V
   });
-  return /* @__PURE__ */ t.createElement("div", c({
-    className: "phone-input-container-se-design-main-container",
-    "data-automation-id": d
-  }, q, {
-    onKeyDownCapture: (e) => {
-      e.key === "Escape" && n && (p.current = !0), q.onKeyDownCapture(e);
+  return /* @__PURE__ */ e.createElement("div", u({
+    className: "main-container-autocomplete-se-design",
+    ref: H,
+    "data-automation-id": F
+  }, M), p && /* @__PURE__ */ e.createElement("span", {
+    id: C,
+    className: `label-container ${t ? "label-container-disabled" : ""}`
+  }, p), /* @__PURE__ */ e.createElement("div", {
+    className: "input-container-wrapper"
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: "input-wrapper",
+    style: {
+      pointerEvents: t ? "none" : "auto"
     }
-  }), C && /* @__PURE__ */ t.createElement("div", {
-    id: B,
-    className: "label-container"
-  }, C), /* @__PURE__ */ t.createElement("div", {
-    role: "group",
-    "aria-label": M,
-    "aria-labelledby": J,
-    className: `phone-input-container-se-design-main ${r ? "error" : ""}`,
-    ref: U
-  }, /* @__PURE__ */ t.createElement("div", {
-    className: "phone-input-container-se-design"
-  }, /* @__PURE__ */ t.createElement("button", {
-    ref: F,
-    type: "button",
-    className: `phone-input-container-se-design-country-code focus-outline rounded ${a ? "cursor-not-allowed opacity-60" : ""}`,
-    onClick: D,
-    onKeyDown: re,
-    "aria-haspopup": "listbox",
-    "aria-expanded": n,
-    "aria-controls": n ? K : void 0,
-    "aria-label": `Select country code. Current: ${b?.name} ${b?.dial_code}`,
-    disabled: a,
-    "data-automation-id": "country-code-selector"
-  }, /* @__PURE__ */ t.createElement("img", {
-    src: `https://flagcdn.com/${b?.code.toLowerCase()}.svg`,
-    alt: "",
-    "aria-hidden": "true",
-    width: "16"
-  }), /* @__PURE__ */ t.createElement("span", null, b?.dial_code), /* @__PURE__ */ t.createElement(T, {
+  }, /* @__PURE__ */ e.createElement(B, {
+    ref: $,
+    id: z,
+    value: o,
+    onChange: Q,
+    onClick: T,
+    onFocus: U,
+    ...q,
+    disabled: t,
+    className: `${r ? "input-container-error" : "input-container-default"} ${t ? "input-container-disabled" : ""} ${s.length > 0 || o ? "with-icon" : ""} ${s.length > 0 && o ? "with-icons" : ""}`,
+    maxLength: a,
+    placeholder: j,
+    "aria-invalid": r || void 0,
+    ...X,
+    ..._
+  }), o && /* @__PURE__ */ e.createElement(x, {
+    name: "close",
+    className: "input-icon-close",
+    size: 15,
+    onClick: W,
+    stroke: t ? "var(--color-gray-600)" : "",
+    ariaLabel: "Clear input"
+  }), s.length > 0 && /* @__PURE__ */ e.createElement(x, {
     name: "chevron",
-    className: n ? "rotate-180" : "",
+    rotation: E ? "180" : "0",
+    className: "input-icon-chevron",
+    stroke: t ? "var(--color-gray-600)" : "",
     "aria-hidden": "true"
-  })), /* @__PURE__ */ t.createElement("span", {
-    className: "divider",
-    "aria-hidden": "true"
-  }), /* @__PURE__ */ t.createElement("input", c({
-    id: W,
-    type: "tel",
-    placeholder: "Enter phone number",
-    className: `phone-input-container-se-design-phone-number-input ${a ? "disabled" : ""}`,
-    onChange: (e) => oe(e.target.value),
-    value: Q,
-    pattern: "[0-9]*",
-    disabled: a,
-    "aria-invalid": r || void 0
-  }, ae, {
-    "data-automation-id": "phone-number-input-field"
-  }))), n && /* @__PURE__ */ t.createElement("div", c({}, Z, {
-    className: "phone-input-container-se-design-country-code-list",
-    "aria-label": "Select country",
-    "data-automation-id": "country-code-list"
-  }), /* @__PURE__ */ t.createElement("div", {
-    className: "search-input-wrapper"
-  }, /* @__PURE__ */ t.createElement(T, {
-    name: "search",
-    className: "search-icon",
-    "aria-hidden": "true"
-  }), /* @__PURE__ */ t.createElement("input", c({
-    ref: O
-  }, Y, {
-    type: "text",
-    placeholder: "Search countries",
-    className: "phone-input-container-se-design-country-code-list-item-input",
-    onChange: ne,
-    value: G,
-    "aria-label": "Search countries",
-    "data-automation-id": "country-code-search-input"
-  }))), w.length > 0 ? w.map((e, o) => {
-    const S = ee(o, e.dial_code === v);
-    return /* @__PURE__ */ t.createElement("div", c({
-      key: e.code
-    }, S, {
-      className: `phone-input-container-se-design-country-code-list-item ${te === o ? "highlighted" : ""} ${e.dial_code === v ? "selected" : ""}`,
-      onClick: () => {
-        p.current = !0, N(e.dial_code);
-      },
-      onMouseEnter: () => H(o)
-    }), /* @__PURE__ */ t.createElement("img", {
-      src: `https://flagcdn.com/${e.code.toLowerCase()}.svg`,
-      alt: "",
-      "aria-hidden": "true",
-      width: "16"
-    }), /* @__PURE__ */ t.createElement("span", null, e.name), /* @__PURE__ */ t.createElement("span", null, "(", e.dial_code, ")"));
-  }) : /* @__PURE__ */ t.createElement("div", {
-    className: "phone-input-container-se-design-country-code-list-item-no-results",
-    role: "status"
-  }, "No results found"))), r && /* @__PURE__ */ t.createElement("div", {
-    id: V,
+  })), E && s.length > 0 && /* @__PURE__ */ e.createElement("div", u({}, G, {
+    "aria-label": p || b || "Suggestions",
+    className: "suggestions-list",
+    "data-automation-id": "autocomplete-suggestions-list"
+  }), s.map((l, n) => {
+    const I = J(n, !1), m = K === n;
+    return /* @__PURE__ */ e.createElement("div", u({
+      key: n
+    }, I, {
+      className: `${A || "suggestion-item"} ${m ? "suggestion-item-highlighted" : ""}`,
+      onClick: () => w(l),
+      onMouseEnter: () => h(n),
+      "data-automation-id": `autocomplete-suggestion-item-${n}`
+    }), d ? d(l, {
+      isHighlighted: m,
+      index: n
+    }) : l.label);
+  }))), (r || a) && /* @__PURE__ */ e.createElement("div", {
+    className: `${r ? "error-and-max-word" : "max-word-container"} ${t ? "disabled" : ""}`
+  }, r && /* @__PURE__ */ e.createElement("div", {
+    id: y,
     className: "error-message",
     role: "alert"
-  }, l));
-};
+  }, R), a && /* @__PURE__ */ e.createElement("div", {
+    className: "max-word"
+  }, o.length, "/", a)));
+});
 export {
-  fe as PhoneInput
+  re as AutoCompleteInput
 };
 //# sourceMappingURL=index45.js.map

package/dist/index45.js.map

@@ -1 +1 @@
-{"version":3,"file":"index45.js","sources":["../src/components/PhoneInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, useCallback } from 'react';\nimport './style.scss';\nimport countriesInfoJson from './countriesInfo.json';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes, useCombobox } from '../../utils/a11y';\n\nexport interface PhoneInputProps {\n  onCountrycodeChange: (countryCode: string) => void;\n  onNumberChange: (number: string) => void;\n  error?: boolean;\n  errorMessage?: string;\n  value?: {\n    countryCode: string;\n    number: string;\n  };\n  label?: string;\n  automationId?: string;\n  /**\n   * Accessible label for the entire phone input group.\n   * Provides context for screen readers (e.g., \"Two-step verification phone number for signer 1\").\n   * Takes precedence over label prop for screen readers (visual label remains unchanged).\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this input (for external labels).\n   * Highest precedence - use when label is rendered outside the component.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) providing additional description.\n   */\n  ariaDescribedBy?: string;\n  /**\n   * Whether the input is disabled\n   */\n  disabled?: boolean;\n}\n\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\n  onCountrycodeChange,\n  onNumberChange,\n  error,\n  errorMessage,\n  value,\n  label,\n  automationId = '',\n  ariaLabel,\n  ariaLabelledBy,\n  ariaDescribedBy,\n  disabled = false\n}) => {\n  const [countryCode, setCountryCode] = useState(value?.countryCode || countriesInfoJson[0].dial_code);\n  const [displaySelectCountryCode, setDisplaySelectCountryCode] = useState(false);\n  const [countriesInfo, setCountriesInfo] = useState(countriesInfoJson);\n  const [searchValue, setSearchValue] = useState('');\n  const [enteredNumber, setEnteredNumber] = useState('');\n  const containerRef = useRef<HTMLDivElement>(null);\n  const countryButtonRef = useRef<HTMLButtonElement>(null);\n  const searchInputRef = useRef<HTMLInputElement>(null);\n  const restoreFocusToButtonRef = useRef(false);\n\n  // Generate stable IDs for ARIA relationships\n  const labelId = useStableId(automationId, 'phone-label');\n  const listboxId = useStableId(automationId, 'phone-listbox');\n  const phoneInputId = useStableId(automationId, 'phone-input');\n  const errorId = useStableId(automationId, 'phone-error');\n\n  const countryInfo = countriesInfoJson.find((country) => country.dial_code === countryCode);\n\n  // Close dropdown and reset state\n  const closeDropdown = useCallback(() => {\n    setDisplaySelectCountryCode(false);\n    setSearchValue('');\n    setCountriesInfo(countriesInfoJson);\n  }, []);\n\n  const handleCountryCodeSelect = useCallback(\n    (country: string) => {\n      if (country) {\n        setCountryCode(country);\n        onCountrycodeChange(country);\n      }\n      closeDropdown();\n      // Focus return is handled by useEffect that watches displaySelectCountryCode\n    },\n    [onCountrycodeChange, closeDropdown]\n  );\n\n  const handleSelectFromDropdown = useCallback(\n    (country: typeof countriesInfoJson[0]) => {\n      restoreFocusToButtonRef.current = true;\n      handleCountryCodeSelect(country.dial_code);\n    },\n    [handleCountryCodeSelect]\n  );\n\n  // Use comprehensive useCombobox hook for country search\n  const {\n    containerProps,\n    inputProps: comboboxInputProps,\n    listboxProps,\n    getOptionProps,\n    highlightedIndex,\n    setHighlightedIndex\n  } = useCombobox({\n    items: countriesInfo,\n    isOpen: displaySelectCountryCode,\n    onOpenChange: setDisplaySelectCountryCode,\n    onSelect: handleSelectFromDropdown,\n    listboxId\n  });\n\n  const handleCountryCodeSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const searchVal = event.target.value;\n    setSearchValue(searchVal);\n    setHighlightedIndex(-1);\n    const filteredCountries = countriesInfoJson.filter(\n      (country) =>\n        country.name.toLowerCase().includes(searchVal.toLowerCase()) ||\n        country.dial_code.toLowerCase().includes(searchVal.toLowerCase()) ||\n        country.code.toLowerCase().includes(searchVal.toLowerCase())\n    );\n    setCountriesInfo(filteredCountries);\n  };\n\n  // Return focus to button when dropdown closes\n  const prevDisplaySelectCountryCodeRef = useRef(displaySelectCountryCode);\n  useEffect(() => {\n    let rafId: number | null = null;\n    // If dropdown was open and is now closed, return focus to button\n    // ONLY when the close was triggered from within the component (Escape/selection),\n    // not when the user moved focus outside (focus-out dismissal).\n    if (prevDisplaySelectCountryCodeRef.current && !displaySelectCountryCode && restoreFocusToButtonRef.current) {\n      rafId = requestAnimationFrame(() => {\n        countryButtonRef.current?.focus();\n      });\n    }\n    if (prevDisplaySelectCountryCodeRef.current && !displaySelectCountryCode) {\n      restoreFocusToButtonRef.current = false;\n    }\n    prevDisplaySelectCountryCodeRef.current = displaySelectCountryCode;\n    return () => {\n      if (rafId !== null) {\n        cancelAnimationFrame(rafId);\n      }\n    };\n  }, [displaySelectCountryCode]);\n\n  useEffect(() => {\n    if (value) {\n      setCountryCode(value.countryCode);\n      setEnteredNumber(value.number);\n    }\n  }, [value]);\n\n  // Focus search input when dropdown opens\n  useEffect(() => {\n    let rafId: number | null = null;\n    if (displaySelectCountryCode) {\n      rafId = requestAnimationFrame(() => {\n        searchInputRef.current?.focus();\n      });\n    }\n    return () => {\n      if (rafId !== null) {\n        cancelAnimationFrame(rafId);\n      }\n    };\n  }, [displaySelectCountryCode]);\n\n  const handleEnteredNumberChange = (val: string) => {\n    const numericValue = val.replace(/\\D/g, ''); // Remove non-numeric characters\n    setEnteredNumber(numericValue);\n    onNumberChange(numericValue);\n  };\n\n  const toggleDropdown = useCallback(() => {\n    if (disabled) return;\n    setDisplaySelectCountryCode((prev) => !prev);\n  }, [disabled]);\n\n  const handleCountryButtonKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled) return;\n\n      switch (e.key) {\n        case 'Enter':\n        case ' ':\n          e.preventDefault();\n          toggleDropdown();\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n          if (!displaySelectCountryCode) {\n            setDisplaySelectCountryCode(true);\n          }\n          break;\n        // Escape is handled by useDismissOnEscape hook\n      }\n    },\n    [disabled, displaySelectCountryCode, toggleDropdown]\n  );\n\n  // Group and phone input label logic (precedence: ariaLabelledBy > ariaLabel > label > fallback):\n  // 1. ariaLabelledBy: external label reference (highest priority)\n  // 2. ariaLabel: programmatic label\n  // 3. label: internal visible label (uses aria-labelledby={labelId})\n  // 4. fallback: \"Phone number\"\n  const groupAriaLabelledBy = ariaLabelledBy || (!ariaLabel && label ? labelId : undefined);\n  const groupAriaLabel = !ariaLabelledBy ? (ariaLabel || (!label ? 'Phone number' : undefined)) : undefined;\n  \n  // Build ARIA name attributes for phone input\n  // Phone input directly references its label source (not through group) for reliability\n  const phoneInputA11yProps = getA11yNameAttributes({\n    ariaLabelledBy: groupAriaLabelledBy,\n    ariaLabel: groupAriaLabel,\n    ariaDescribedBy: error ? errorId : ariaDescribedBy\n  });\n\n  return (\n    <div \n      className=\"phone-input-container-se-design-main-container\" \n      data-automation-id={automationId}\n      {...containerProps}\n      onKeyDownCapture={(e) => {\n        if (e.key === 'Escape' && displaySelectCountryCode) {\n          restoreFocusToButtonRef.current = true;\n        }\n        containerProps.onKeyDownCapture(e);\n      }}\n    >\n      {label && (\n        <div id={labelId} className=\"label-container\">\n          {label}\n        </div>\n      )}\n      <div \n        role=\"group\"\n        aria-label={groupAriaLabel}\n        aria-labelledby={groupAriaLabelledBy}\n        className={`phone-input-container-se-design-main ${error ? 'error' : ''}`} \n        ref={containerRef}\n      >\n        <div className=\"phone-input-container-se-design\">\n          <button\n            ref={countryButtonRef}\n            type=\"button\"\n            className={`phone-input-container-se-design-country-code focus-outline rounded ${disabled ? 'cursor-not-allowed opacity-60' : ''}`}\n            onClick={toggleDropdown}\n            onKeyDown={handleCountryButtonKeyDown}\n            aria-haspopup=\"listbox\"\n            aria-expanded={displaySelectCountryCode}\n            aria-controls={displaySelectCountryCode ? listboxId : undefined}\n            aria-label={`Select country code. Current: ${countryInfo?.name} ${countryInfo?.dial_code}`}\n            disabled={disabled}\n            data-automation-id=\"country-code-selector\"\n          >\n            <img\n              src={`https://flagcdn.com/${countryInfo?.code.toLowerCase()}.svg`}\n              alt=\"\"\n              aria-hidden=\"true\"\n              width=\"16\"\n            />\n            <span>{countryInfo?.dial_code}</span>\n            <Icon\n              name=\"chevron\"\n              className={!displaySelectCountryCode ? '' : 'rotate-180'}\n              aria-hidden=\"true\"\n            />\n          </button>\n          <span className=\"divider\" aria-hidden=\"true\" />\n          <input\n            id={phoneInputId}\n            type=\"tel\"\n            placeholder=\"Enter phone number\"\n            className={`phone-input-container-se-design-phone-number-input ${disabled ? 'disabled' : ''}`}\n            onChange={(event) => handleEnteredNumberChange(event.target.value)}\n            value={enteredNumber}\n            pattern=\"[0-9]*\"\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            {...phoneInputA11yProps}\n            data-automation-id=\"phone-number-input-field\"\n          />\n        </div>\n\n        {displaySelectCountryCode && (\n          <div\n            {...listboxProps}\n            className=\"phone-input-container-se-design-country-code-list\"\n            aria-label=\"Select country\"\n            data-automation-id=\"country-code-list\"\n          >\n            <div className=\"search-input-wrapper\">\n              <Icon name=\"search\" className=\"search-icon\" aria-hidden=\"true\" />\n              <input\n                ref={searchInputRef}\n                {...comboboxInputProps}\n                type=\"text\"\n                placeholder=\"Search countries\"\n                className=\"phone-input-container-se-design-country-code-list-item-input\"\n                onChange={handleCountryCodeSearch}\n                value={searchValue}\n                aria-label=\"Search countries\"\n                data-automation-id=\"country-code-search-input\"\n              />\n            </div>\n            {countriesInfo.length > 0 ? (\n              countriesInfo.map((country, index) => {\n                const optionProps = getOptionProps(index, country.dial_code === countryCode);\n                return (\n                  <div\n                    key={country.code}\n                    {...optionProps}\n                    className={`phone-input-container-se-design-country-code-list-item ${\n                      highlightedIndex === index ? 'highlighted' : ''\n                    } ${country.dial_code === countryCode ? 'selected' : ''}`}\n                    onClick={() => {\n                      restoreFocusToButtonRef.current = true;\n                      handleCountryCodeSelect(country.dial_code);\n                    }}\n                    onMouseEnter={() => setHighlightedIndex(index)}\n                  >\n                    <img\n                      src={`https://flagcdn.com/${country.code.toLowerCase()}.svg`}\n                      alt=\"\"\n                      aria-hidden=\"true\"\n                      width=\"16\"\n                    />\n                    <span>{country.name}</span>\n                    <span>({country.dial_code})</span>\n                  </div>\n                );\n              })\n            ) : (\n              <div className=\"phone-input-container-se-design-country-code-list-item-no-results\" role=\"status\">\n                No results found\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n      {error && (\n        <div id={errorId} className=\"error-message\" role=\"alert\">\n          {errorMessage}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["PhoneInput","onCountrycodeChange","onNumberChange","error","errorMessage","value","label","automationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","disabled","countryCode","setCountryCode","useState","countriesInfoJson","dial_code","displaySelectCountryCode","setDisplaySelectCountryCode","countriesInfo","setCountriesInfo","searchValue","setSearchValue","enteredNumber","setEnteredNumber","containerRef","useRef","countryButtonRef","searchInputRef","restoreFocusToButtonRef","labelId","useStableId","listboxId","phoneInputId","errorId","countryInfo","find","country","closeDropdown","useCallback","handleCountryCodeSelect","handleSelectFromDropdown","current","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","useCombobox","items","isOpen","onOpenChange","onSelect","handleCountryCodeSearch","event","searchVal","target","filteredCountries","filter","name","toLowerCase","includes","code","prevDisplaySelectCountryCodeRef","useEffect","rafId","requestAnimationFrame","focus","cancelAnimationFrame","number","handleEnteredNumberChange","val","numericValue","replace","toggleDropdown","prev","handleCountryButtonKeyDown","e","key","preventDefault","groupAriaLabelledBy","undefined","groupAriaLabel","phoneInputA11yProps","getA11yNameAttributes","React","createElement","_extends","className","onKeyDownCapture","id","role","ref","type","onClick","onKeyDown","src","alt","width","Icon","placeholder","onChange","pattern","length","map","index","optionProps","onMouseEnter"],"mappings":"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"}
+{"version":3,"file":"index45.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useCallback, useState } from 'react';\nimport './style.scss';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes, useCombobox } from '../../utils/a11y';\n\nexport interface AutoCompleteInputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number;\n  /** Called when the user types in the input. Not called on suggestion selection. */\n  onChange: (value: string) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  /**\n   * Suggestion items. Default rendering expects { label, value } shape.\n   * When renderOption is provided, any shape is accepted.\n   */\n  suggestions?: any[];\n  /**\n   * Called when a suggestion is selected (click or Enter key).\n   * Receives the full item object from the suggestions array.\n   */\n  onSelect?: (item: any) => void;\n  /**\n   * Render custom content for each suggestion option. The component handles the option wrapper\n   * (ARIA props, highlight, click, keyboard navigation). You only provide the inner content.\n   */\n  renderOption?: (suggestion: any, context: { isHighlighted: boolean; index: number }) => React.ReactNode;\n  /**\n   * Custom CSS class for option elements. Replaces the default 'suggestion-item' class.\n   * Useful with renderOption to apply custom styling to option wrappers.\n   */\n  optionClassName?: string;\n  automationId?: string;\n  /**\n   * Accessible label for the input. Used when no visible label is provided.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this input. Takes precedence over ariaLabel.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) providing additional description.\n   */\n  ariaDescribedBy?: string;\n}\n\nexport const AutoCompleteInput: React.FC<AutoCompleteInputProps> = React.memo(\n  ({\n    value,\n    onChange,\n    disabled = false,\n    maxLength,\n    tag = 'input',\n    error = false,\n    errorMessage,\n    label,\n    placeholder,\n    suggestions = [],\n    onSelect,\n    renderOption,\n    optionClassName,\n    automationId = '',\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy,\n    ...props\n  }) => {\n    const [filteredSuggestions, setFilteredSuggestions] = useState<any[]>([...suggestions]);\n    const [isSuggestionBoxVisible, setSuggestionBoxVisible] = useState<boolean>(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    // Generate stable unique IDs per instance so label, input, listbox, and error never share IDs (HTML/ARIA require unique ids).\n    const instanceId = useStableId(undefined, 'autocomplete');\n    const inputId = `${instanceId}-input`;\n    const listboxId = `${instanceId}-listbox`;\n    const labelId = `${instanceId}-label`;\n    const errorId = `${instanceId}-error`;\n\n    const handleSelectSuggestion = useCallback(\n      (item: any) => {\n        setSuggestionBoxVisible(false);\n        onSelect?.(item);\n      },\n      [onSelect]\n    );\n\n    // Use the comprehensive useCombobox hook\n    const {\n      containerProps,\n      inputProps: comboboxInputProps,\n      listboxProps,\n      getOptionProps,\n      highlightedIndex,\n      setHighlightedIndex\n    } = useCombobox<any>({\n      items: filteredSuggestions,\n      isOpen: isSuggestionBoxVisible,\n      onOpenChange: setSuggestionBoxVisible,\n      onSelect: handleSelectSuggestion,\n      listboxId\n    });\n\n    const handleInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        setHighlightedIndex(-1); // Reset highlight on input change\n        onChange(inputValue);\n\n        // Internal filtering for default rendering (when no renderOption, component manages filtering)\n        if (!renderOption) {\n          if (inputValue === '') {\n            setFilteredSuggestions([...suggestions]);\n          } else {\n            const filtered = suggestions?.filter(\n              (suggestion) =>\n                typeof suggestion === 'object' &&\n                suggestion?.label?.toLowerCase().includes(inputValue?.toLowerCase() ?? '')\n            );\n            setFilteredSuggestions([...filtered]);\n          }\n        }\n      },\n      [onChange, suggestions, renderOption, setHighlightedIndex]\n    );\n\n    useEffect(() => {\n      setFilteredSuggestions([...suggestions]);\n    }, [suggestions]);\n\n    const handleInputClick = () => {\n      setSuggestionBoxVisible(true);\n    };\n\n    const handleInputFocus = () => {\n      if (filteredSuggestions.length > 0) {\n        setSuggestionBoxVisible(true);\n      }\n    };\n\n    const handleClearInput = () => {\n      onChange('');\n      setHighlightedIndex(-1);\n      inputRef.current?.focus();\n    };\n\n    // Build ARIA name attributes: when ariaLabel is provided use it (e.g. \"Signer 1 name\"); otherwise use visible label or ariaLabelledBy\n    const a11yNameProps = getA11yNameAttributes({\n      ariaLabelledBy: label && !ariaLabel ? labelId : ariaLabelledBy,\n      ariaLabel,\n      ariaDescribedBy: error ? errorId : ariaDescribedBy\n    });\n\n    return (\n      <div \n        className=\"main-container-autocomplete-se-design\" \n        ref={containerRef} \n        data-automation-id={automationId}\n        {...containerProps}\n      >\n        {label && (\n          <span\n            id={labelId}\n            className={`label-container ${disabled ? 'label-container-disabled' : ''}`}\n          >\n            {label}\n          </span>\n        )}\n        <div className=\"input-container-wrapper\">\n          <div className=\"input-wrapper\" style={{ pointerEvents: disabled ? 'none' : 'auto' }}>\n            {React.createElement(tag, {\n              ref: inputRef,\n              id: inputId,\n              value: value,\n              onChange: handleInputChange,\n              onClick: handleInputClick,\n              onFocus: handleInputFocus,\n              ...comboboxInputProps,\n              disabled,\n              className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''} ${filteredSuggestions.length > 0 || value ? 'with-icon' : ''} ${filteredSuggestions.length > 0 && value ? 'with-icons' : ''}`,\n              maxLength,\n              placeholder,\n              'aria-invalid': error || undefined,\n              ...a11yNameProps,\n              ...props\n            })}\n            {value && (\n              <Icon\n                name=\"close\"\n                className=\"input-icon-close\"\n                size={15}\n                onClick={handleClearInput}\n                stroke={disabled ? 'var(--color-gray-600)' : ''}\n                ariaLabel=\"Clear input\"\n              />\n            )}\n            {filteredSuggestions.length > 0 && (\n              <Icon\n                name=\"chevron\"\n                rotation={isSuggestionBoxVisible ? '180' : '0'}\n                className=\"input-icon-chevron\"\n                stroke={disabled ? 'var(--color-gray-600)' : ''}\n                aria-hidden=\"true\"\n              />\n            )}\n          </div>\n          {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n            <div\n              {...listboxProps}\n              aria-label={label || ariaLabel || 'Suggestions'}\n              className=\"suggestions-list\"\n              data-automation-id=\"autocomplete-suggestions-list\"\n            >\n              {filteredSuggestions.map((suggestion, index) => {\n                const optionProps = getOptionProps(index, false);\n                const isHighlighted = highlightedIndex === index;\n                return (\n                  <div\n                    key={index}\n                    {...optionProps}\n                    className={`${optionClassName || 'suggestion-item'} ${isHighlighted ? 'suggestion-item-highlighted' : ''}`}\n                    onClick={() => handleSelectSuggestion(suggestion)}\n                    onMouseEnter={() => setHighlightedIndex(index)}\n                    data-automation-id={`autocomplete-suggestion-item-${index}`}\n                  >\n                    {renderOption\n                      ? renderOption(suggestion, { isHighlighted, index })\n                      : suggestion.label}\n                  </div>\n                );\n              })}\n            </div>\n          )}\n        </div>\n        {(error || maxLength) && (\n          <div className={`${error ? 'error-and-max-word' : 'max-word-container'} ${disabled ? 'disabled' : ''}`}>\n            {error && (\n              <div id={errorId} className=\"error-message\" role=\"alert\">\n                {errorMessage}\n              </div>\n            )}\n            {maxLength && (\n              <div className=\"max-word\">\n                {value.length}/{maxLength}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["AutoCompleteInput","React","memo","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","onSelect","renderOption","optionClassName","automationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","props","filteredSuggestions","setFilteredSuggestions","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","useRef","inputRef","instanceId","useStableId","undefined","inputId","listboxId","labelId","errorId","handleSelectSuggestion","useCallback","item","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","useCombobox","items","isOpen","onOpenChange","handleInputChange","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","useEffect","handleInputClick","handleInputFocus","length","handleClearInput","current","focus","a11yNameProps","getA11yNameAttributes","createElement","_extends","className","ref","id","style","pointerEvents","onClick","onFocus","Icon","name","size","stroke","rotation","map","index","optionProps","isHighlighted","key","onMouseEnter","role"],"mappings":"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"}