npm - fictoan-react - Versions diffs - 2.0.0-beta.17 → 2.0.0-beta.18 - Mend

fictoan-react 2.0.0-beta.17 → 2.0.0-beta.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (181) hide show

package/dist/components/Form/ListBox/ListBox.js ADDED Viewed

@@ -0,0 +1,284 @@
+"use client";
+import { jsx as a, jsxs as u, Fragment as de } from "react/jsx-runtime";
+import N, { useState as k, useRef as R, useEffect as E } from "react";
+import { Div as f } from "../../Element/Tags.js";
+import { useClickOutside as pe } from "../../../hooks/UseClickOutside.js";
+import { separateWrapperProps as ue } from "../../../utils/propSeparation.js";
+/* empty css             */
+import { Badge as me } from "../../Badge/Badge.js";
+import { deriveAriaIds as fe, FormItem as be } from "../FormItem/FormItem.js";
+import { InputField as xe } from "../InputField/InputField.js";
+import { Text as F } from "../../Typography/Text.js";
+import { searchOptions as he } from "./listBoxUtils.js";
+import { Element as W } from "../../Element/Element.js";
+const ve = N.forwardRef(
+  ({
+    options: H = [],
+    label: Y,
+    helpText: P,
+    errorText: D,
+    placeholder: V = "Select an option",
+    id: G,
+    defaultValue: J,
+    onChange: t,
+    disabled: h,
+    selectionLimit: b,
+    allowMultiSelect: v = !1,
+    allowCustomEntries: w = !1,
+    isLoading: Q,
+    value: L,
+    isFullWidth: U,
+    className: T,
+    required: j,
+    size: X,
+    ...Z
+  }, we) => {
+    const [i, x] = k(!1), [m, z] = k(""), [c, n] = k(-1), [_, K] = k(!1), I = N.useMemo(() => [...H], [H]), q = N.useCallback(
+      (e, s) => e == null || e === "" ? [] : (Array.isArray(e) ? e : [e]).map((o) => s.find((B) => B.value === o)).filter((o) => o !== void 0),
+      []
+    ), S = L !== void 0, [M, g] = k(
+      () => q(J, I)
+    ), r = S ? q(L, I) : M, y = N.useCallback((e) => {
+      S || g(e);
+    }, [S]), O = R(null), A = R(null), C = R(null), ee = N.useId(), d = G || `listbox-${ee.replace(/:/g, "")}`, { describedBy: se } = fe(d, P, D), p = he(I, m), ae = c >= 0 && p[c] ? `${d}-option-${p[c].value}` : void 0, $ = (e) => {
+      if (e.disabled) return;
+      let s;
+      if (v) {
+        if (r.some((o) => o.value === e.value))
+          s = r.filter((o) => o.value !== e.value);
+        else {
+          if (b && r.length >= b)
+            return;
+          s = [...r, e];
+        }
+        y(s), t == null || t(s.map((o) => o.value));
+      } else
+        s = [e], y(s), t == null || t(e.value), x(!1);
+      z(""), n(-1);
+    }, te = (e) => {
+      z(e);
+    }, re = () => {
+      if (!m.trim() || !w) return;
+      const e = m.trim(), s = {
+        value: e,
+        label: e
+      };
+      I.some((l) => l.value === e) || $(s);
+    }, le = (e) => {
+      if (v) {
+        const s = r.filter((l) => l.value !== e);
+        y(s), t == null || t(s.map((l) => l.value));
+      } else
+        y([]), t == null || t("");
+    }, ie = () => {
+      y([]), t == null || t(v ? [] : "");
+    }, oe = (e) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), i ? n(
+            (s) => s < p.length - 1 ? s + 1 : s
+          ) : (x(!0), n(0));
+          break;
+        case "ArrowUp":
+          e.preventDefault(), n((s) => s > 0 ? s - 1 : s);
+          break;
+        case "Enter":
+          if (e.preventDefault(), w && m.trim()) {
+            const s = p.find(
+              (l) => l.label.toLowerCase() === m.trim().toLowerCase()
+            );
+            s ? $(s) : re();
+          } else c >= 0 && p[c] && $(p[c]);
+          break;
+        case "Escape":
+          e.preventDefault(), x(!1), n(-1);
+          break;
+        case " ":
+          i || (e.preventDefault(), x(!0), n(0));
+          break;
+        case "Home":
+          i && (e.preventDefault(), n(0));
+          break;
+        case "End":
+          i && (e.preventDefault(), n(p.length - 1));
+          break;
+      }
+    };
+    pe(O, () => {
+      x(!1), n(-1);
+    }), E(() => {
+      i && A.current && A.current.focus();
+    }, [i]), E(() => {
+      if (i && O.current) {
+        const e = O.current.getBoundingClientRect(), s = window.innerHeight, l = 300, o = s - e.bottom, B = e.top;
+        K(o < l && B > o);
+      } else
+        K(!1);
+    }, [i]), E(() => {
+      if (c >= 0) {
+        const e = document.querySelector(`[data-index="${c}"]`);
+        e == null || e.scrollIntoView({ block: "nearest" });
+      }
+    }, [c]);
+    const { wrapperProps: ce, inputProps: ne } = ue(Z);
+    return /* @__PURE__ */ a(
+      be,
+      {
+        label: Y,
+        htmlFor: d,
+        helpText: P,
+        errorText: D,
+        required: j,
+        isFullWidth: U,
+        size: X,
+        ...ce,
+        children: /* @__PURE__ */ u(
+          W,
+          {
+            as: "div",
+            "data-list-box": !0,
+            classNames: ["list-box-wrapper", h ? "disabled" : "", T || ""],
+            ref: O,
+            isFullWidth: U,
+            ...ne,
+            children: [
+              /* @__PURE__ */ u(
+                f,
+                {
+                  className: "list-box-input-wrapper",
+                  id: d,
+                  onClick: () => !h && x(!i),
+                  role: "combobox",
+                  "aria-haspopup": "listbox",
+                  "aria-expanded": i,
+                  "aria-controls": `${d}-listbox`,
+                  "aria-owns": `${d}-listbox`,
+                  "aria-activedescendant": i ? ae : void 0,
+                  "aria-invalid": !!D || void 0,
+                  "aria-required": j,
+                  "aria-describedby": se,
+                  "aria-disabled": h || void 0,
+                  tabIndex: h ? -1 : 0,
+                  children: [
+                    v ? /* @__PURE__ */ u(de, { children: [
+                      r.length > 0 ? /* @__PURE__ */ u(f, { className: "options-wrapper", children: [
+                        /* @__PURE__ */ a(f, { className: "options-list", children: r.map((e) => /* @__PURE__ */ a(
+                          me,
+                          {
+                            actionIcon: "cross",
+                            onActionClick: () => le(e.value),
+                            actionAriaLabel: `Remove ${e.label}`,
+                            size: "small",
+                            shape: "rounded",
+                            children: /* @__PURE__ */ a(F, { children: e.label })
+                          },
+                          e.value
+                        )) }),
+                        b && r.length >= b && /* @__PURE__ */ u(F, { className: "options-limit-warning", textColour: "red", size: "tiny", children: [
+                          "You can choose only ",
+                          b,
+                          " option",
+                          b === 1 ? "" : "s"
+                        ] })
+                      ] }) : /* @__PURE__ */ a("span", { className: "placeholder", children: V }),
+                      r.length > 0 && /* @__PURE__ */ a(
+                        f,
+                        {
+                          className: "icon-wrapper clear-all",
+                          title: "Clear all options",
+                          onClick: () => ie(),
+                          children: /* @__PURE__ */ u("svg", { viewBox: "0 0 24 24", children: [
+                            /* @__PURE__ */ a("line", { x1: "5", y1: "5", x2: "19", y2: "19" }),
+                            /* @__PURE__ */ a("line", { x1: "5", y1: "19", x2: "19", y2: "5" })
+                          ] })
+                        }
+                      )
+                    ] }) : r[0] ? /* @__PURE__ */ a(F, { className: "selected-option", children: r[0].label }) : /* @__PURE__ */ a("span", { className: "placeholder", children: V }),
+                    /* @__PURE__ */ a(f, { className: "icon-wrapper chevrons", children: /* @__PURE__ */ u("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+                      /* @__PURE__ */ a("polyline", { points: "6 9 12 4 18 9" }),
+                      /* @__PURE__ */ a("polyline", { points: "6 15 12 20 18 15" })
+                    ] }) })
+                  ]
+                }
+              ),
+              i && !h && /* @__PURE__ */ u(
+                f,
+                {
+                  ref: C,
+                  className: `list-box-dropdown${_ ? " opens-upward" : ""}`,
+                  children: [
+                    /* @__PURE__ */ u(f, { className: "list-box-search-wrapper", children: [
+                      /* @__PURE__ */ a(
+                        xe,
+                        {
+                          type: "text",
+                          ref: A,
+                          className: "list-box-search",
+                          placeholder: w ? "Type to search or add new" : "Search",
+                          value: m,
+                          onChange: te,
+                          onKeyDown: oe,
+                          "aria-controls": `${d}-listbox`,
+                          "aria-label": "Search options",
+                          isFullWidth: !0
+                        }
+                      ),
+                      w && m.trim() && !r.some((e) => e.label.toLowerCase() === m.trim().toLowerCase()) && /* @__PURE__ */ a(
+                        "kbd",
+                        {
+                          className: "list-box-enter-key",
+                          "aria-label": "Press Enter to add custom option",
+                          children: "↵"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ a(
+                      W,
+                      {
+                        as: "ul",
+                        id: `${d}-listbox`,
+                        className: "list-box-options",
+                        role: "listbox",
+                        "aria-multiselectable": v,
+                        "aria-busy": Q,
+                        tabIndex: -1,
+                        children: p.length > 0 ? p.map((e, s) => /* @__PURE__ */ a(
+                          "li",
+                          {
+                            id: `${d}-option-${e.value}`,
+                            className: `list-box-option ${e.disabled ? "disabled" : ""} ${c === s ? "active" : ""}`,
+                            role: "option",
+                            "aria-selected": r.some((l) => l.value === e.value),
+                            "aria-disabled": e.disabled,
+                            onClick: () => $(e),
+                            "data-index": s,
+                            tabIndex: -1,
+                            children: e.customLabel || e.label
+                          },
+                          e.value
+                        )) : /* @__PURE__ */ a(
+                          "li",
+                          {
+                            className: "list-box-option disabled",
+                            role: "alert",
+                            "aria-live": "polite",
+                            children: w ? "Type and press Enter to add new option" : "No matches found"
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+ve.displayName = "ListBox";
+export {
+  ve as ListBox
+};
+//# sourceMappingURL=ListBox.js.map

package/dist/components/Form/ListBox/ListBox.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ListBox.js","sources":["../../../../src/components/Form/ListBox/ListBox.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { useState, useRef, useEffect, MutableRefObject, KeyboardEvent } from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { Div } from \"$tags\";\nimport { Element } from \"$element\";\n\n// HOOKS ===============================================================================================================\nimport { useClickOutside } from \"$hooks/UseClickOutside\";\n\n// UTILS ===============================================================================================================\nimport { separateWrapperProps } from \"$utils/propSeparation\";\n\n// STYLES ==============================================================================================================\nimport \"./list-box.css\";\n\n// OTHER ===============================================================================================================\nimport { Badge } from \"../../Badge/Badge\";\nimport { FormItem, deriveAriaIds } from \"../FormItem/FormItem\";\nimport { InputField } from \"../InputField/InputField\";\nimport { ListBoxProps, OptionForListBoxProps, ListBoxElementType, ListBoxCustomProps } from \"./constants\";\nimport { Text } from \"../../Typography/Text\";\nimport { searchOptions } from \"./listBoxUtils\";\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const ListBox = React.forwardRef<ListBoxElementType, ListBoxProps>(\n (\n {\n options = [],\n label,\n helpText,\n errorText,\n placeholder = \"Select an option\",\n id,\n defaultValue,\n onChange,\n disabled,\n selectionLimit,\n allowMultiSelect = false,\n allowCustomEntries = false,\n isLoading,\n value,\n isFullWidth,\n className,\n required,\n size,\n ...props\n },\n ref\n ) => {\n const [isOpen, setIsOpen] = useState(false);\n const [searchValue, setSearchValue] = useState(\"\");\n const [activeIndex, setActiveIndex] = useState(-1);\n const [openUpward, setOpenUpward] = useState(false);\n\n // Create a memoized version of the combined options\n const allOptions = React.useMemo(() => {\n return [...options];\n }, [options]);\n\n // Map a value or array of values to the matching option objects.\n const resolveSelectedOptions = React.useCallback(\n (val : string | string[] | undefined, opts : OptionForListBoxProps[]) : OptionForListBoxProps[] => {\n if (val == null || val === \"\") return [];\n const values = Array.isArray(val) ? val : [val];\n return values\n .map(v => opts.find(o => o.value === v))\n .filter((o) : o is OptionForListBoxProps => o !== undefined);\n },\n [],\n );\n\n // Internal state for uncontrolled mode. Lazy init from defaultValue so the\n // displayed selection is correct on first paint — no spurious onChange fires.\n const isControlled = value !== undefined;\n const [internalSelectedOptions, setInternalSelectedOptions] = useState<OptionForListBoxProps[]>(\n () => resolveSelectedOptions(defaultValue, allOptions),\n );\n\n // The effective selection: controlled value takes precedence, otherwise internal state.\n const selectedOptions = isControlled\n ? resolveSelectedOptions(value, allOptions)\n : internalSelectedOptions;\n\n const setSelectedOptions = React.useCallback((next : OptionForListBoxProps[]) => {\n if (!isControlled) setInternalSelectedOptions(next);\n }, [ isControlled ]);\n\n // The list-box wrapper renders as a <div>, not a <select> — the prior\n // HTMLSelectElement typing was a pre-existing mistake that only got\n // caught when Element's ref type tightened.\n const dropdownRef = useRef<HTMLDivElement>(null) as MutableRefObject<HTMLDivElement>;\n const searchInputRef = useRef<HTMLInputElement>(null);\n const dropdownMenuRef = useRef<HTMLDivElement>(null);\n\n const reactId = React.useId();\n const listboxId = id || `listbox-${reactId.replace(/:/g, \"\")}`;\n const { describedBy } = deriveAriaIds(listboxId, helpText, errorText);\n const filteredOptions = searchOptions(allOptions, searchValue);\n const activeOptionId = activeIndex >= 0 && filteredOptions[activeIndex]\n ? `${listboxId}-option-${filteredOptions[activeIndex].value}`\n : undefined;\n\n const handleSelectOption = (option: OptionForListBoxProps) => {\n if (option.disabled) return;\n\n let newSelectedOptions: OptionForListBoxProps[];\n if (allowMultiSelect) {\n const isSelected = selectedOptions.some(opt => opt.value === option.value);\n if (isSelected) {\n newSelectedOptions = selectedOptions.filter(opt => opt.value !== option.value);\n } else {\n if (selectionLimit && selectedOptions.length >= selectionLimit) {\n return;\n }\n newSelectedOptions = [...selectedOptions, option];\n }\n setSelectedOptions(newSelectedOptions);\n onChange?.(newSelectedOptions.map(opt => opt.value));\n } else {\n newSelectedOptions = [option];\n setSelectedOptions(newSelectedOptions);\n onChange?.(option.value);\n setIsOpen(false);\n }\n\n setSearchValue(\"\");\n setActiveIndex(-1);\n };\n\n const handleSearchChange = (value: string) => {\n setSearchValue(value);\n };\n\n const handleCustomEntry = () => {\n if (!searchValue.trim() || !allowCustomEntries) return;\n\n const customValue = searchValue.trim();\n const customOption: OptionForListBoxProps = {\n value: customValue,\n label: customValue,\n };\n\n // If this option doesn't exist yet\n if (!allOptions.some(opt => opt.value === customValue)) {\n handleSelectOption(customOption);\n }\n };\n\n const handleDeleteOption = (valueToRemove: string) => {\n if (allowMultiSelect) {\n // Filter out the option to remove\n const newSelectedOptions = selectedOptions.filter(opt => opt.value !== valueToRemove);\n\n // Update local state\n setSelectedOptions(newSelectedOptions);\n\n // Notify parent\n onChange?.(newSelectedOptions.map(opt => opt.value));\n } else {\n // For single-select mode, just clear everything\n setSelectedOptions([]);\n onChange?.(\"\");\n }\n };\n\n const handleClearAll = () => {\n // Reset local state for both single and multi-select\n setSelectedOptions([]);\n\n // Notify parent with empty data\n onChange?.(allowMultiSelect ? [] : \"\");\n };\n\n const handleKeyDown = (event: KeyboardEvent) => {\n switch (event.key) {\n case \"ArrowDown\":\n event.preventDefault();\n if (!isOpen) {\n setIsOpen(true);\n setActiveIndex(0);\n } else {\n setActiveIndex(prev =>\n prev < filteredOptions.length - 1 ? prev + 1 : prev\n );\n }\n break;\n\n case \"ArrowUp\":\n event.preventDefault();\n setActiveIndex(prev => prev > 0 ? prev - 1 : prev);\n break;\n\n case \"Enter\":\n event.preventDefault();\n if (allowCustomEntries && searchValue.trim()) {\n const exactMatch = filteredOptions.find(opt =>\n opt.label.toLowerCase() === searchValue.trim().toLowerCase()\n );\n if (exactMatch) {\n handleSelectOption(exactMatch);\n } else {\n handleCustomEntry();\n }\n } else if (activeIndex >= 0 && filteredOptions[activeIndex]) {\n handleSelectOption(filteredOptions[activeIndex]);\n }\n break;\n\n case \"Escape\":\n event.preventDefault();\n setIsOpen(false);\n setActiveIndex(-1);\n break;\n\n case \" \": // Space key\n if (!isOpen) {\n event.preventDefault();\n setIsOpen(true);\n setActiveIndex(0);\n }\n break;\n\n case \"Home\":\n if (isOpen) {\n event.preventDefault();\n setActiveIndex(0);\n }\n break;\n\n case \"End\":\n if (isOpen) {\n event.preventDefault();\n setActiveIndex(filteredOptions.length - 1);\n }\n break;\n }\n };\n\n useClickOutside(dropdownRef, () => {\n setIsOpen(false);\n setActiveIndex(-1);\n });\n\n useEffect(() => {\n if (isOpen && searchInputRef.current) {\n searchInputRef.current.focus();\n }\n }, [isOpen]);\n\n // Determine if dropdown should open upward based on available viewport space\n useEffect(() => {\n if (isOpen && dropdownRef.current) {\n const wrapperRect = dropdownRef.current.getBoundingClientRect();\n const viewportHeight = window.innerHeight;\n // Estimate dropdown height (max-height is 240px for options + search + padding)\n const estimatedDropdownHeight = 300;\n const spaceBelow = viewportHeight - wrapperRect.bottom;\n const spaceAbove = wrapperRect.top;\n\n // Open upward if not enough space below but enough space above\n setOpenUpward(spaceBelow < estimatedDropdownHeight && spaceAbove > spaceBelow);\n } else {\n setOpenUpward(false);\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (activeIndex >= 0) {\n const activeOption = document.querySelector(`[data-index=\"${activeIndex}\"]`);\n activeOption?.scrollIntoView({ block: \"nearest\" });\n }\n }, [activeIndex]);\n\n // Separate wrapper-level props (margin, padding, etc.) from input-specific props\n const { wrapperProps, inputProps } = separateWrapperProps(props);\n\n return (\n <FormItem\n label={label}\n htmlFor={listboxId}\n helpText={helpText}\n errorText={errorText}\n required={required}\n isFullWidth={isFullWidth}\n size={size}\n {...wrapperProps}\n >\n {/* PARENT */}\n <Element\n as=\"div\"\n data-list-box\n classNames={[\"list-box-wrapper\", disabled ? \"disabled\" : \"\", className || \"\"]}\n ref={dropdownRef}\n isFullWidth={isFullWidth}\n {...inputProps}\n >\n <Div\n className=\"list-box-input-wrapper\"\n id={listboxId}\n onClick={() => !disabled && setIsOpen(!isOpen)}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={isOpen}\n aria-controls={`${listboxId}-listbox`}\n aria-owns={`${listboxId}-listbox`}\n aria-activedescendant={isOpen ? activeOptionId : undefined}\n aria-invalid={Boolean(errorText) || undefined}\n aria-required={required}\n aria-describedby={describedBy}\n aria-disabled={disabled || undefined}\n tabIndex={disabled ? -1 : 0}\n >\n {allowMultiSelect ? (\n <>\n {selectedOptions.length > 0 ? (\n <Div className=\"options-wrapper\">\n <Div className=\"options-list\">\n {selectedOptions.map(option => (\n <Badge\n key={option.value}\n actionIcon=\"cross\"\n onActionClick={() => handleDeleteOption(option.value)}\n actionAriaLabel={`Remove ${option.label}`}\n size=\"small\"\n shape=\"rounded\"\n >\n <Text>{option.label}</Text>\n </Badge>\n ))}\n </Div>\n {selectionLimit && selectedOptions.length >= selectionLimit && (\n <Text className=\"options-limit-warning\" textColour=\"red\" size=\"tiny\">\n You can choose only {selectionLimit} option{selectionLimit === 1 ? \"\" : \"s\"}\n </Text>\n )}\n </Div>\n ) : (\n <span className=\"placeholder\">{placeholder}</span>\n )}\n\n {/* Clear button for multi-select */}\n {selectedOptions.length > 0 && (\n <Div\n className=\"icon-wrapper clear-all\"\n title=\"Clear all options\"\n onClick={() => handleClearAll()}\n >\n <svg viewBox=\"0 0 24 24\">\n <line x1=\"5\" y1=\"5\" x2=\"19\" y2=\"19\" />\n <line x1=\"5\" y1=\"19\" x2=\"19\" y2=\"5\" />\n </svg>\n </Div>\n )}\n </>\n ) : (\n selectedOptions[0]\n ? <Text className=\"selected-option\">{selectedOptions[0].label}</Text>\n : <span className=\"placeholder\">{placeholder}</span>\n )}\n\n <Div className=\"icon-wrapper chevrons\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <polyline points=\"6 9 12 4 18 9\"></polyline>\n <polyline points=\"6 15 12 20 18 15\"></polyline>\n </svg>\n </Div>\n </Div>\n\n {/* DROPDOWN */}\n {isOpen && !disabled && (\n <Div\n ref={dropdownMenuRef}\n className={`list-box-dropdown${openUpward ? \" opens-upward\" : \"\"}`}\n >\n <Div className=\"list-box-search-wrapper\">\n <InputField\n type=\"text\"\n ref={searchInputRef}\n className=\"list-box-search\"\n placeholder={allowCustomEntries ? \"Type to search or add new\" : \"Search\"}\n value={searchValue}\n onChange={handleSearchChange}\n onKeyDown={handleKeyDown}\n aria-controls={`${listboxId}-listbox`}\n aria-label=\"Search options\"\n isFullWidth\n />\n {allowCustomEntries && searchValue.trim() && !selectedOptions.some(opt =>\n opt.label.toLowerCase() === searchValue.trim().toLowerCase()) && (\n <kbd\n className=\"list-box-enter-key\"\n aria-label=\"Press Enter to add custom option\"\n >\n ↵\n </kbd>\n )}\n </Div>\n\n {/* OPTIONS */}\n <Element\n as=\"ul\"\n id={`${listboxId}-listbox`}\n className=\"list-box-options\"\n role=\"listbox\"\n aria-multiselectable={allowMultiSelect}\n aria-busy={isLoading}\n tabIndex={-1}\n >\n {filteredOptions.length > 0 ? (\n filteredOptions.map((option, index) => (\n <li\n key={option.value}\n id={`${listboxId}-option-${option.value}`}\n className={`list-box-option ${option.disabled ? \"disabled\" : \"\"} ${activeIndex === index ? \"active\" : \"\"}`}\n role=\"option\"\n aria-selected={selectedOptions.some(opt => opt.value === option.value)}\n aria-disabled={option.disabled}\n onClick={() => handleSelectOption(option)}\n data-index={index}\n tabIndex={-1}\n >\n {option.customLabel || option.label}\n </li>\n ))\n ) : (\n <li\n className=\"list-box-option disabled\"\n role=\"alert\"\n aria-live=\"polite\"\n >\n {allowCustomEntries\n ? \"Type and press Enter to add new option\"\n : \"No matches found\"\n }\n </li>\n )}\n </Element>\n </Div>\n )}\n </Element>\n </FormItem>\n );\n }\n);\nListBox.displayName = \"ListBox\";\n"],"names":["ListBox","React","options","label","helpText","errorText","placeholder","id","defaultValue","onChange","disabled","selectionLimit","allowMultiSelect","allowCustomEntries","isLoading","value","isFullWidth","className","required","size","props","ref","isOpen","setIsOpen","useState","searchValue","setSearchValue","activeIndex","setActiveIndex","openUpward","setOpenUpward","allOptions","resolveSelectedOptions","val","opts","v","o","isControlled","internalSelectedOptions","setInternalSelectedOptions","selectedOptions","setSelectedOptions","next","dropdownRef","useRef","searchInputRef","dropdownMenuRef","reactId","listboxId","describedBy","deriveAriaIds","filteredOptions","searchOptions","activeOptionId","handleSelectOption","option","newSelectedOptions","opt","handleSearchChange","handleCustomEntry","customValue","customOption","handleDeleteOption","valueToRemove","handleClearAll","handleKeyDown","event","prev","exactMatch","useClickOutside","useEffect","wrapperRect","viewportHeight","estimatedDropdownHeight","spaceBelow","spaceAbove","activeOption","wrapperProps","inputProps","separateWrapperProps","jsx","FormItem","jsxs","Element","Div","Fragment","Badge","Text","InputField","index"],"mappings":"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"}

package/dist/components/Form/ListBox/constants.d.ts CHANGED Viewed

@@ -19,7 +19,7 @@ export interface ListBoxCustomProps {
     disabled?: boolean;
     placeholder?: string;
     id?: string;
-    defaultValue?: string;
+    defaultValue?: string | string[];
     selectionLimit?: NonZeroNumber;
     allowCustomEntries?: boolean;
     isLoading?: boolean;

package/dist/components/Form/ListBox/constants.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/ListBox/constants.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAGjF,MAAM,MAAM,kBAAkB,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;AAChE,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAW,MAAM,CAAC;IACvB,KAAK,EAAW,MAAM,CAAC;IACvB,WAAY,CAAC,EAAG,KAAK,CAAC,SAAS,CAAC;IAChC,QAAY,CAAC,EAAG,OAAO,CAAC;CAC3B;AAED,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC;AAEhD,KAAK,aAAa,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;AAExC,MAAM,WAAW,kBAAkB;IAC/B,OAAmB,CAAC,EAAG,qBAAqB,EAAE,CAAC;IAC/C,KAAmB,CAAC,EAAG,MAAM,CAAC;IAC9B,QAAmB,CAAC,EAAG,MAAM,CAAC;IAC9B,SAAmB,CAAC,EAAG,MAAM,CAAC;IAC9B,gBAAmB,CAAC,EAAG,OAAO,CAAC;IAC/B,QAAmB,CAAC,EAAG,OAAO,CAAC;IAC/B,WAAmB,CAAC,EAAG,MAAM,CAAC;IAC9B,EAAmB,CAAC,EAAG,MAAM,CAAC;IAC9B,YAAmB,CAAC,EAAG,MAAM,CAAC;~~IAC9B~~,cAAmB,CAAC,EAAG,aAAa,CAAC;IACrC,kBAAmB,CAAC,EAAG,OAAO,CAAC;IAC/B,SAAmB,CAAC,EAAG,OAAO,CAAC;IAC/B,QAAmB,CAAC,EAAG,kBAAkB,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IAC7D,KAAmB,CAAC,EAAG,MAAM,GAAG,MAAM,EAAE,CAAC;IACzC,WAAmB,CAAC,EAAG,OAAO,CAAC;IAC/B,IAAmB,CAAC,EAAG,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;CACjE;AAED,MAAM,MAAM,YAAY,GACpB,IAAI,CAAC,kBAAkB,CAAC,kBAAkB,CAAC,EAAE,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAC7E,kBAAkB,CAAC"}
1	+ {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/ListBox/constants.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAGjF,MAAM,MAAM,kBAAkB,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;AAChE,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAW,MAAM,CAAC;IACvB,KAAK,EAAW,MAAM,CAAC;IACvB,WAAY,CAAC,EAAG,KAAK,CAAC,SAAS,CAAC;IAChC,QAAY,CAAC,EAAG,OAAO,CAAC;CAC3B;AAED,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC;AAEhD,KAAK,aAAa,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;AAExC,MAAM,WAAW,kBAAkB;IAC/B,OAAmB,CAAC,EAAG,qBAAqB,EAAE,CAAC;IAC/C,KAAmB,CAAC,EAAG,MAAM,CAAC;IAC9B,QAAmB,CAAC,EAAG,MAAM,CAAC;IAC9B,SAAmB,CAAC,EAAG,MAAM,CAAC;IAC9B,gBAAmB,CAAC,EAAG,OAAO,CAAC;IAC/B,QAAmB,CAAC,EAAG,OAAO,CAAC;IAC/B,WAAmB,CAAC,EAAG,MAAM,CAAC;IAC9B,EAAmB,CAAC,EAAG,MAAM,CAAC;IAC9B,YAAmB,CAAC,EAAG,MAAM,GAAG,MAAM,EAAE,CAAC;IACzC,cAAmB,CAAC,EAAG,aAAa,CAAC;IACrC,kBAAmB,CAAC,EAAG,OAAO,CAAC;IAC/B,SAAmB,CAAC,EAAG,OAAO,CAAC;IAC/B,QAAmB,CAAC,EAAG,kBAAkB,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IAC7D,KAAmB,CAAC,EAAG,MAAM,GAAG,MAAM,EAAE,CAAC;IACzC,WAAmB,CAAC,EAAG,OAAO,CAAC;IAC/B,IAAmB,CAAC,EAAG,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;CACjE;AAED,MAAM,MAAM,YAAY,GACpB,IAAI,CAAC,kBAAkB,CAAC,kBAAkB,CAAC,EAAE,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAC7E,kBAAkB,CAAC"}

package/dist/components/Form/ListBox/listBoxUtils.js ADDED Viewed

@@ -0,0 +1,49 @@
+"use client";
+const M = (r, i) => {
+  const n = [], s = r.length, c = i.length;
+  if (s === 0) return c;
+  if (c === 0) return s;
+  for (let t = 0; t <= c; t++)
+    n[t] = [t];
+  for (let t = 0; t <= s; t++)
+    n[0][t] = t;
+  for (let t = 1; t <= c; t++)
+    for (let e = 1; e <= s; e++)
+      i[t - 1] === r[e - 1] ? n[t][e] = n[t - 1][e - 1] : n[t][e] = Math.min(
+        n[t - 1][e] + 1,
+        // Deletion
+        n[t][e - 1] + 1,
+        // Insertion
+        n[t - 1][e - 1] + 1
+        // Substitution
+      );
+  return n[c][s];
+}, g = (r, i) => {
+  let n = 0, s = 0;
+  for (; n < r.length && s < i.length; )
+    r[n] === i[s] && n++, s++;
+  return n === r.length;
+}, p = (r) => r.split(/[\s\-_]+/).map((i) => i.slice(0, 2)).join("").toLowerCase(), y = (r, i) => {
+  if (!i) return r;
+  const n = i.toLowerCase().trim(), s = Math.floor(n.length / 2);
+  return r.map((t) => {
+    const e = t.label.toLowerCase(), o = M(n, e), a = e.split(/[\s\-_]+/), l = n.split(/[\s\-_]+/), h = e.includes(n) || l.every(
+      (f) => a.some((d) => d.startsWith(f))
+    ), m = p(e), u = g(n, m);
+    return {
+      option: t,
+      distance: o,
+      isPartialMatch: h,
+      isAcronymMatch: u
+    };
+  }).filter(
+    ({ distance: t, isPartialMatch: e, isAcronymMatch: o }) => e || o || t <= s
+  ).sort((t, e) => t.isPartialMatch && !e.isPartialMatch ? -1 : !t.isPartialMatch && e.isPartialMatch ? 1 : t.isAcronymMatch && !e.isAcronymMatch ? -1 : !t.isAcronymMatch && e.isAcronymMatch ? 1 : t.distance - e.distance).map(({ option: t }) => t);
+};
+export {
+  p as generateAcronym,
+  g as isSubsequence,
+  M as levenshteinDistance,
+  y as searchOptions
+};
+//# sourceMappingURL=listBoxUtils.js.map

package/dist/components/Form/ListBox/listBoxUtils.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"listBoxUtils.js","sources":["../../../../src/components/Form/ListBox/listBoxUtils.ts"],"sourcesContent":["import { OptionForListBoxProps } from \"./constants\";\n\nexport const levenshteinDistance = (a: string, b: string): number => {\n const matrix = [];\n\n const aLength = a.length;\n const bLength = b.length;\n\n // Early exit if one of the strings is empty\n if (aLength === 0) return bLength;\n if (bLength === 0) return aLength;\n\n // Initialize the first row and column of the matrix\n for (let i = 0; i <= bLength; i++) {\n matrix[i] = [ i ];\n }\n for (let j = 0; j <= aLength; j++) {\n matrix[0][j] = j;\n }\n\n // Fill in the rest of the matrix\n for (let i = 1; i <= bLength; i++) {\n for (let j = 1; j <= aLength; j++) {\n if (b[i - 1] === a[j - 1]) {\n matrix[i][j] = matrix[i - 1][j - 1];\n } else {\n matrix[i][j] = Math.min(\n matrix[i - 1][j] + 1, // Deletion\n matrix[i][j - 1] + 1, // Insertion\n matrix[i - 1][j - 1] + 1, // Substitution\n );\n }\n }\n }\n\n return matrix[bLength][aLength];\n};\n\nexport const isSubsequence = (search: string, target: string): boolean => {\n let searchIndex = 0;\n let targetIndex = 0;\n\n while (searchIndex < search.length && targetIndex < target.length) {\n if (search[searchIndex] === target[targetIndex]) {\n searchIndex++;\n }\n targetIndex++;\n }\n\n return searchIndex === search.length;\n};\n\nexport const generateAcronym = (label: string): string => {\n return label\n .split(/[\\s\\-_]+/)\n .map(word => word.slice(0, 2)) // Take first two letters\n .join(\"\")\n .toLowerCase();\n};\n\n// Handle partial matches and common typos =============================================================================\nexport const searchOptions = (options: OptionForListBoxProps[], searchTerm: string) => {\n if (!searchTerm) return options;\n\n const normalizedSearch = searchTerm.toLowerCase().trim();\n\n const maxDistance = Math.floor(normalizedSearch.length / 2);\n\n const matchedOptions = options\n .map(option => {\n const normalizedLabel = option.label.toLowerCase();\n\n const distance = levenshteinDistance(normalizedSearch, normalizedLabel);\n\n const words = normalizedLabel.split(/[\\s\\-_]+/);\n const searchWords = normalizedSearch.split(/[\\s\\-_]+/);\n\n const isPartialMatch =\n normalizedLabel.includes(normalizedSearch) ||\n searchWords.every(searchWord =>\n words.some(word => word.startsWith(searchWord)),\n );\n\n const acronym = generateAcronym(normalizedLabel);\n\n const isAcronymMatch = isSubsequence(normalizedSearch, acronym);\n\n return {\n option,\n distance,\n isPartialMatch,\n isAcronymMatch,\n };\n })\n .filter(({ distance, isPartialMatch, isAcronymMatch }) =>\n isPartialMatch || isAcronymMatch || distance <= maxDistance,\n )\n .sort((a, b) => {\n if (a.isPartialMatch && !b.isPartialMatch) return -1;\n if (!a.isPartialMatch && b.isPartialMatch) return 1;\n\n if (a.isAcronymMatch && !b.isAcronymMatch) return -1;\n if (!a.isAcronymMatch && b.isAcronymMatch) return 1;\n\n return a.distance - b.distance;\n })\n .map(({ option }) => option);\n\n return matchedOptions;\n};\n"],"names":["levenshteinDistance","a","b","matrix","aLength","bLength","i","j","isSubsequence","search","target","searchIndex","targetIndex","generateAcronym","label","word","searchOptions","options","searchTerm","normalizedSearch","maxDistance","option","normalizedLabel","distance","words","searchWords","isPartialMatch","searchWord","acronym","isAcronymMatch"],"mappings":"AAEO,MAAMA,IAAsB,CAACC,GAAWC,MAAsB;AACjE,QAAMC,IAAS,CAAA,GAETC,IAAUH,EAAE,QACZI,IAAUH,EAAE;AAGlB,MAAIE,MAAY,EAAG,QAAOC;AAC1B,MAAIA,MAAY,EAAG,QAAOD;AAG1B,WAASE,IAAI,GAAGA,KAAKD,GAASC;AAC1B,IAAAH,EAAOG,CAAC,IAAI,CAAEA,CAAE;AAEpB,WAASC,IAAI,GAAGA,KAAKH,GAASG;AAC1B,IAAAJ,EAAO,CAAC,EAAEI,CAAC,IAAIA;AAInB,WAASD,IAAI,GAAGA,KAAKD,GAASC;AAC1B,aAASC,IAAI,GAAGA,KAAKH,GAASG;AAC1B,MAAIL,EAAEI,IAAI,CAAC,MAAML,EAAEM,IAAI,CAAC,IACpBJ,EAAOG,CAAC,EAAEC,CAAC,IAAIJ,EAAOG,IAAI,CAAC,EAAEC,IAAI,CAAC,IAElCJ,EAAOG,CAAC,EAAEC,CAAC,IAAI,KAAK;AAAA,QAChBJ,EAAOG,IAAI,CAAC,EAAEC,CAAC,IAAI;AAAA;AAAA,QACnBJ,EAAOG,CAAC,EAAEC,IAAI,CAAC,IAAI;AAAA;AAAA,QACnBJ,EAAOG,IAAI,CAAC,EAAEC,IAAI,CAAC,IAAI;AAAA;AAAA,MAAA;AAMvC,SAAOJ,EAAOE,CAAO,EAAED,CAAO;AAClC,GAEaI,IAAgB,CAACC,GAAgBC,MAA4B;AACtE,MAAIC,IAAc,GACdC,IAAc;AAElB,SAAOD,IAAcF,EAAO,UAAUG,IAAcF,EAAO;AACvD,IAAID,EAAOE,CAAW,MAAMD,EAAOE,CAAW,KAC1CD,KAEJC;AAGJ,SAAOD,MAAgBF,EAAO;AAClC,GAEaI,IAAkB,CAACC,MACrBA,EACF,MAAM,UAAU,EAChB,IAAI,CAAAC,MAAQA,EAAK,MAAM,GAAG,CAAC,CAAC,EAC5B,KAAK,EAAE,EACP,YAAA,GAIIC,IAAgB,CAACC,GAAkCC,MAAuB;AACnF,MAAI,CAACA,EAAY,QAAOD;AAExB,QAAME,IAAmBD,EAAW,YAAA,EAAc,KAAA,GAE5CE,IAAc,KAAK,MAAMD,EAAiB,SAAS,CAAC;AA0C1D,SAxCuBF,EAClB,IAAI,CAAAI,MAAU;AACX,UAAMC,IAAkBD,EAAO,MAAM,YAAA,GAE/BE,IAAWvB,EAAoBmB,GAAkBG,CAAe,GAEhEE,IAAcF,EAAgB,MAAM,UAAU,GAC9CG,IAAcN,EAAiB,MAAM,UAAU,GAE/CO,IACIJ,EAAgB,SAASH,CAAgB,KACzCM,EAAY;AAAA,MAAM,OACdD,EAAM,KAAK,OAAQT,EAAK,WAAWY,CAAU,CAAC;AAAA,IAAA,GAGtDC,IAAUf,EAAgBS,CAAe,GAEzCO,IAAiBrB,EAAcW,GAAkBS,CAAO;AAE9D,WAAO;AAAA,MACH,QAAAP;AAAA,MACA,UAAAE;AAAA,MACA,gBAAAG;AAAA,MACA,gBAAAG;AAAA,IAAA;AAAA,EAER,CAAC,EACA;AAAA,IAAO,CAAC,EAAE,UAAAN,GAAU,gBAAAG,GAAgB,gBAAAG,QACjCH,KAAkBG,KAAkBN,KAAYH;AAAA,EAAA,EAEnD,KAAK,CAACnB,GAAGC,MACFD,EAAE,kBAAkB,CAACC,EAAE,iBAAuB,KAC9C,CAACD,EAAE,kBAAkBC,EAAE,iBAAuB,IAE9CD,EAAE,kBAAkB,CAACC,EAAE,iBAAuB,KAC9C,CAACD,EAAE,kBAAkBC,EAAE,iBAAuB,IAE3CD,EAAE,WAAWC,EAAE,QACzB,EACA,IAAI,CAAC,EAAE,QAAAmB,EAAA,MAAaA,CAAM;AAGnC;"}

package/dist/components/Form/PinInputField/PinInputField.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from "react";
-import { CommonAndHTMLProps } from '../../Element/constants';
+import { CommonAndHTMLProps, SpacingTypes } from '../../Element/constants';
 type PinInputFieldCustomProps = {
     numberOfFields: number;
@@ -12,6 +12,11 @@ type PinInputFieldCustomProps = {
     focusFirstInputOnReset?: boolean;
     isFullWidth?: boolean;
     ariaLabel?: string;
+    label?: string;
+    helpText?: string | React.ReactNode;
+    errorText?: string;
+    required?: boolean;
+    size?: Exclude<SpacingTypes, "nano" | "huge">;
 };
 export type PinInputFieldElementType = HTMLDivElement & {
     reset: () => void;

package/dist/components/Form/PinInputField/PinInputField.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PinInputField.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/PinInputField/PinInputField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmF,MAAM,OAAO,CAAC;~~AAOxG~~,OAAO,uBAAuB,CAAC;AAG/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;~~AAO7D~~,KAAK,wBAAwB,GAAG;IAC5B,cAAc,EAAa,MAAM,CAAC;IAClC,QAAuB,CAAC,EAAG,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,IAAuB,CAAC,EAAG,cAAc,GAAG,QAAQ,CAAC;IACrD,IAAuB,CAAC,EAAG,OAAO,CAAC;IACnC,KAAuB,CAAC,EAAG,OAAO,CAAC;IACnC,SAAuB,CAAC,EAAG,OAAO,CAAC;IACnC,kBAAuB,CAAC,EAAG,SAAS,GAAG,UAAU,CAAC;IAClD,sBAAuB,CAAC,EAAG,OAAO,CAAC;IACnC,WAAuB,CAAC,EAAG,OAAO,CAAC;IACnC,SAAuB,CAAC,EAAG,MAAM,CAAC;~~CACrC~~,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,cAAc,GAAG;IAAE,KAAK,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAC9E,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC,wBAAwB,CAAC,EAAE,MAAM,wBAAwB,CAAC,GAC/G,wBAAwB,CAAC;AAW7B,eAAO,MAAM,aAAa,~~gMA6PzB~~,CAAC"}
1	+ {"version":3,"file":"PinInputField.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/PinInputField/PinInputField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmF,MAAM,OAAO,CAAC;AAQxG,OAAO,uBAAuB,CAAC;AAG/B,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAO3E,KAAK,wBAAwB,GAAG;IAC5B,cAAc,EAAa,MAAM,CAAC;IAClC,QAAuB,CAAC,EAAG,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,IAAuB,CAAC,EAAG,cAAc,GAAG,QAAQ,CAAC;IACrD,IAAuB,CAAC,EAAG,OAAO,CAAC;IACnC,KAAuB,CAAC,EAAG,OAAO,CAAC;IACnC,SAAuB,CAAC,EAAG,OAAO,CAAC;IACnC,kBAAuB,CAAC,EAAG,SAAS,GAAG,UAAU,CAAC;IAClD,sBAAuB,CAAC,EAAG,OAAO,CAAC;IACnC,WAAuB,CAAC,EAAG,OAAO,CAAC;IACnC,SAAuB,CAAC,EAAG,MAAM,CAAC;IAElC,KAAuB,CAAC,EAAG,MAAM,CAAC;IAClC,QAAuB,CAAC,EAAG,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACpD,SAAuB,CAAC,EAAG,MAAM,CAAC;IAClC,QAAuB,CAAC,EAAG,OAAO,CAAC;IACnC,IAAuB,CAAC,EAAG,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;CACrE,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,cAAc,GAAG;IAAE,KAAK,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAC9E,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC,wBAAwB,CAAC,EAAE,MAAM,wBAAwB,CAAC,GAC/G,wBAAwB,CAAC;AAW7B,eAAO,MAAM,aAAa,gMAiRzB,CAAC"}

package/dist/components/Form/PinInputField/PinInputField.js ADDED Viewed

@@ -0,0 +1,165 @@
+"use client";
+import { jsx as $ } from "react/jsx-runtime";
+import Z, { useRef as se, useState as E, useCallback as l, useEffect as re, createRef as oe, useImperativeHandle as ce } from "react";
+import { InputField as fe } from "../InputField/InputField.js";
+import { deriveAriaIds as ae, FormItem as le } from "../FormItem/FormItem.js";
+import { Div as ie } from "../../Element/Tags.js";
+/* empty css                    */
+function q(r, o) {
+  return (o === "alphanumeric" ? /^[a-zA-Z0-9]+$/i : /^[0-9]+$/).test(r);
+}
+const ue = Z.forwardRef(
+  ({
+    numberOfFields: r,
+    onChange: o,
+    type: m = "number",
+    mask: k = !1,
+    isOTP: P = !1,
+    autoFocus: A = !1,
+    pasteFromClipboard: B = "enabled",
+    focusFirstInputOnReset: G = !0,
+    isFullWidth: J,
+    ariaLabel: O,
+    // FormItem integration
+    label: y,
+    helpText: S,
+    errorText: b,
+    required: _,
+    size: Q,
+    ...U
+  }, W) => {
+    const X = se(null), [u, Y] = E([]), [d, w] = E([]), [H, I] = E(!0), [j, D] = E(-1), x = Z.useId(), v = U.id || `pin-input-${x.replace(/:/g, "")}`, F = O || y || "Enter verification code", { describedBy: T } = ae(v, S, b), a = l(
+      (s) => {
+        var t;
+        const e = u[s];
+        (t = e == null ? void 0 : e.current) == null || t.focus();
+      },
+      [u]
+    ), L = l(
+      (s) => {
+        if (!H) return;
+        const e = s + 1 < r ? s + 1 : null;
+        e && a(e);
+      },
+      [a, r, H]
+    ), K = l(() => {
+      w(Array(r).fill("")), o == null || o(""), G && (a(0), D(0));
+    }, [r, o, a, G]), p = l(
+      (s, e) => {
+        const t = [...d];
+        t[e] = s, w(t), o == null || o(t.join("")), s !== "" && t.length === r && t.every((i) => i != null && i !== "") && e === r - 1 || (I(!0), L(e));
+      },
+      [L, r, o, d]
+    ), C = l((s, e) => {
+      var i;
+      const t = typeof s == "string" ? s : s.target.value, f = d[e];
+      if (t === "") {
+        p("", e);
+        return;
+      }
+      if (t.length > 1 && e < r - 1) {
+        if (q(t, m)) {
+          let c = [];
+          const M = t.split("");
+          f === "" ? c = M.filter((N, n) => e + n < r) : ((i = u[e].current) == null ? void 0 : i.selectionEnd) === t.length ? c = M.filter((n, R) => R > 0 && e + R - 1 < r) : c = M.filter((n, R) => R < t.length - 1 && e + R < r);
+          const z = d.map(
+            (N, n) => n >= e && n < e + c.length ? c[n - e] : N
+          );
+          w(z), o == null || o(z.join(""));
+          const te = Math.min(e + c.length, r - 1);
+          a(te);
+        }
+      } else {
+        let c = t;
+        (f == null ? void 0 : f.length) > 0 && (c = t.charAt(t.length - 1)), q(c, m) && p(c, e);
+      }
+    }, [r, o, p, m, d, a, u]), h = l((s, e) => {
+      var t;
+      if (s.key === "Backspace")
+        if (s.target.value === "") {
+          if (e > 0) {
+            const f = e - 1;
+            p("", f), a(f), I(!0);
+          }
+        } else
+          I(!1);
+      else s.key === "Escape" ? ((t = u[e].current) == null || t.blur(), V()) : s.key === "ArrowRight" ? e < r - 1 && a(e + 1) : s.key === "ArrowLeft" && e > 0 && a(e - 1);
+    }, [a, p, u, r]), g = l((s, e) => {
+      D(e);
+    }, []), ee = l((s) => {
+      const e = s.target;
+      setTimeout(() => {
+        e.setSelectionRange(e.value.length, e.value.length);
+      }, 0);
+    }, []), V = l(() => {
+      D(-1);
+    }, []);
+    return re(() => {
+      Y((s) => Array(r).fill(0).map((t, f) => {
+        var c;
+        const i = s[f] || oe();
+        return A && f === 0 && ((c = i.current) == null || c.focus()), i;
+      }));
+    }, [r, A]), ce(
+      W,
+      () => ({
+        ...X.current,
+        reset: K
+      }),
+      [K]
+    ), /* @__PURE__ */ $(
+      le,
+      {
+        label: y,
+        htmlFor: v,
+        helpText: S,
+        errorText: b,
+        required: _,
+        size: Q,
+        children: /* @__PURE__ */ $(
+          ie,
+          {
+            "data-pin-input-field": !0,
+            ref: X,
+            id: v,
+            classNames: J ? ["full-width"] : [],
+            role: "group",
+            "aria-label": y ? void 0 : F,
+            "aria-invalid": !!b || void 0,
+            "aria-required": _,
+            "aria-describedby": T,
+            ...U,
+            children: Array.from({ length: r }, (s, e) => /* @__PURE__ */ $(
+              fe,
+              {
+                id: `${v}-${e}`,
+                ref: u[e],
+                type: k ? "password" : m === "number" ? "tel" : "text",
+                inputMode: m === "number" ? "numeric" : "text",
+                onChange: (t) => C(t, e),
+                onKeyDown: (t) => h(t, e),
+                onFocus: (t) => g(t, e),
+                onSelect: ee,
+                onBlur: V,
+                placeholder: j !== e ? "⦁" : void 0,
+                autoComplete: P ? "one-time-code" : "off",
+                value: d[e] || "",
+                autoFocus: A && e === 0,
+                onCopy: (t) => B === "disabled" && t.preventDefault(),
+                onPaste: (t) => B === "disabled" && t.preventDefault(),
+                "aria-label": `Digit ${e + 1} of ${r}`,
+                "aria-required": _
+              },
+              e
+            ))
+          }
+        )
+      }
+    );
+  }
+);
+ue.displayName = "PinInputField";
+export {
+  ue as PinInputField
+};
+//# sourceMappingURL=PinInputField.js.map