se-design 1.0.87-dev.2 → 1.0.88-dev

package/dist/index37.js

@@ -1,77 +1,58 @@
-import a, { useState as v, useRef as T } from "react";
+import a, { useState as p, useRef as N } from "react";
 /* empty css         */
-import { Icon as R } from "./index6.js";
-import { getA11yNameAttributes as _ } from "./index81.js";
-import "./index72.js";
-import { useStableId as $ } from "./index206.js";
-function c() {
-  return c = Object.assign ? Object.assign.bind() : function(r) {
-    for (var n = 1; n < arguments.length; n++) {
-      var i = arguments[n];
-      for (var s in i) ({}).hasOwnProperty.call(i, s) && (r[s] = i[s]);
-    }
-    return r;
-  }, c.apply(null, arguments);
-}
-function K({
-  value: r,
-  onChange: n,
-  placeholder: i,
-  className: s,
-  error: m,
-  errorMessage: w,
-  label: u,
-  ariaLabel: y,
-  ariaLabelledBy: b,
-  automationId: E = ""
+import { Icon as k } from "./index6.js";
+function D({
+  value: g,
+  onChange: s,
+  placeholder: f,
+  className: d,
+  error: o,
+  errorMessage: h,
+  label: c,
+  automationId: w = ""
 }) {
-  const [o, p] = v([...r]), [l, g] = v(""), d = T(null), f = $(void 0, "input-with-tags-label"), N = _({
-    ariaLabel: y,
-    ariaLabelledBy: b,
-    internalLabelId: u ? f : void 0
-  }), h = (t) => {
-    const e = o.filter((A, I) => I !== t);
-    p(e), n?.(e);
-  }, k = (t) => {
-    if (t.key === "Enter" && l.trim()) {
+  const [n, l] = p([...g]), [i, r] = p(""), u = N(null), m = (t) => {
+    const e = n.filter((y, E) => E !== t);
+    l(e), s?.(e);
+  }, v = (t) => {
+    if (t.key === "Enter" && i.trim()) {
       t.preventDefault();
-      const e = [...o, l.trim()];
-      p(e), g(""), n?.(e);
-    } else t.key === "Backspace" && l === "" && o.length > 0 && h(o.length - 1);
+      const e = [...n, i.trim()];
+      l(e), r(""), s?.(e);
+    } else t.key === "Backspace" && i === "" && n.length > 0 && m(n.length - 1);
   };
   return /* @__PURE__ */ a.createElement("div", {
     className: "input-with-tags-main-container",
-    "data-automation-id": E
-  }, u && /* @__PURE__ */ a.createElement("div", {
-    id: f,
+    "data-automation-id": w
+  }, c && /* @__PURE__ */ a.createElement("div", {
     className: "label-container"
-  }, u), /* @__PURE__ */ a.createElement("div", {
-    className: `input-with-tags-container ${m ? "input-with-tags-error" : ""} ${s}`,
-    onClick: () => d.current?.focus()
-  }, o.map((t, e) => /* @__PURE__ */ a.createElement("span", {
+  }, c), /* @__PURE__ */ a.createElement("div", {
+    className: `input-with-tags-container ${o ? "input-with-tags-error" : ""} ${d}`,
+    onClick: () => u.current?.focus()
+  }, n.map((t, e) => /* @__PURE__ */ a.createElement("span", {
     key: e,
     className: "tag-in-inputwithtags",
     "data-automation-id": `input-tag-${e}`
-  }, t, /* @__PURE__ */ a.createElement(R, {
+  }, t, /* @__PURE__ */ a.createElement(k, {
     name: "close",
     className: "close-icon-in-inputwithtags",
     ariaLabel: `Remove tag ${t}`,
-    onClick: () => h(e),
+    onClick: () => m(e),
     shouldStopPropagation: !0
-  }))), /* @__PURE__ */ a.createElement("input", c({
+  }))), /* @__PURE__ */ a.createElement("input", {
     className: "input-with-tags-input",
-    ref: d,
+    ref: u,
     type: "text",
-    value: l,
-    onChange: (t) => g(t.target.value),
-    onKeyDown: k,
-    placeholder: i,
+    value: i,
+    onChange: (t) => r(t.target.value),
+    onKeyDown: v,
+    placeholder: f,
     "data-automation-id": "input-with-tags-input-field"
-  }, N))), m && /* @__PURE__ */ a.createElement("div", {
+  })), o && /* @__PURE__ */ a.createElement("div", {
     className: "error-message"
-  }, w));
+  }, h));
 }
 export {
-  K as InputWithTags
+  D as InputWithTags
 };
 //# sourceMappingURL=index37.js.map

package/dist/index37.js.map

@@ -1 +1 @@
-{"version":3,"file":"index37.js","sources":["../src/components/InputWithTags/index.tsx"],"sourcesContent":["import React, { useState, KeyboardEvent, useRef } from \"react\";\nimport './styles.scss';\nimport { Icon } from '../Icon';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport { useStableId } from '../../utils/useStableId';\n\nexport interface InputWithTagsProps {\n    value: string[];\n    onChange?: (tags: string[]) => void;\n    placeholder?: string;\n    className?: string;\n    error?: boolean;\n    errorMessage?: string;\n    label?: string;\n    ariaLabel?: string;\n    ariaLabelledBy?: string;\n    automationId?: string;\n}\n\nexport function InputWithTags({\n    value,\n    onChange,\n    placeholder,\n    className,\n    error,\n    errorMessage,\n    label,\n    ariaLabel,\n    ariaLabelledBy,\n    automationId = ''\n}: InputWithTagsProps) {\n    const [tags, setTags] = useState<string[]>([...value]);\n    const [inputValue, setInputValue] = useState('');\n    const inputRef = useRef<HTMLInputElement>(null);\n    const labelId = useStableId(undefined, 'input-with-tags-label');\n    const inputA11yProps = getA11yNameAttributes({\n      ariaLabel,\n      ariaLabelledBy,\n      internalLabelId: label ? labelId : undefined\n    });\n\n    const removeTag = (indexToRemove: number) => {\n        const newTags = tags.filter((_, i) => i !== indexToRemove);\n        setTags(newTags);\n        onChange?.(newTags);\n    };\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && inputValue.trim()) {\n            e.preventDefault();\n            const newTags = [...tags, inputValue.trim()];\n            setTags(newTags);\n            setInputValue(\"\");\n            onChange?.(newTags);\n        } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n            removeTag(tags.length - 1);\n        }\n    };\n\n    return (\n        <div className=\"input-with-tags-main-container\" data-automation-id={automationId}>\n            {label && <div id={labelId} className=\"label-container\">{label}</div>}\n            <div \n                className={`input-with-tags-container ${error ? 'input-with-tags-error' : ''} ${className}`} \n                onClick={() => inputRef.current?.focus()}\n            >\n                {tags.map((tag, index) => (\n                    <span key={index} className=\"tag-in-inputwithtags\" data-automation-id={`input-tag-${index}`}>\n                        {tag} \n                        <Icon\n                            name=\"close\"\n                            className=\"close-icon-in-inputwithtags\"\n                            ariaLabel={`Remove tag ${tag}`}\n                            onClick={() => removeTag(index)}\n                            shouldStopPropagation\n                        />\n                    </span>\n                ))}\n                <input\n                    className=\"input-with-tags-input\"\n                    ref={inputRef}\n                    type=\"text\"\n                    value={inputValue}\n                    onChange={(e) => setInputValue(e.target.value)}\n                    onKeyDown={handleKeyDown}\n                    placeholder={placeholder}\n                    data-automation-id=\"input-with-tags-input-field\"\n                    {...inputA11yProps}\n                />\n            </div>\n            {error && <div className=\"error-message\">{errorMessage}</div>}\n        </div>\n    );\n}"],"names":["InputWithTags","value","onChange","placeholder","className","error","errorMessage","label","ariaLabel","ariaLabelledBy","automationId","tags","setTags","useState","inputValue","setInputValue","inputRef","useRef","labelId","useStableId","undefined","inputA11yProps","getA11yNameAttributes","internalLabelId","removeTag","indexToRemove","newTags","filter","_","i","handleKeyDown","e","key","trim","preventDefault","length","React","createElement","id","onClick","current","focus","map","tag","index","Icon","name","shouldStopPropagation","_extends","ref","type","target","onKeyDown"],"mappings":";;;;;;;;;;;;;;;AAmBO,SAASA,EAAc;AAAA,EAC1BC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,cAAAA,IAAe;AACC,GAAG;AACnB,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAmB,CAAC,GAAGZ,CAAK,CAAC,GAC/C,CAACa,GAAYC,CAAa,IAAIF,EAAS,EAAE,GACzCG,IAAWC,EAAyB,IAAI,GACxCC,IAAUC,EAAYC,QAAW,uBAAuB,GACxDC,IAAiBC,EAAsB;AAAA,IAC3Cd,WAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAc,iBAAiBhB,IAAQW,IAAUE;AAAAA,EAAAA,CACpC,GAEKI,IAAYA,CAACC,MAA0B;AACzC,UAAMC,IAAUf,EAAKgB,OAAO,CAACC,GAAGC,MAAMA,MAAMJ,CAAa;AACzDb,IAAAA,EAAQc,CAAO,GACfxB,IAAWwB,CAAO;AAAA,EACtB,GAEMI,IAAgBA,CAACC,MAAuC;AAC1D,QAAIA,EAAEC,QAAQ,WAAWlB,EAAWmB,QAAQ;AACxCF,MAAAA,EAAEG,eAAAA;AACF,YAAMR,IAAU,CAAC,GAAGf,GAAMG,EAAWmB,MAAM;AAC3CrB,MAAAA,EAAQc,CAAO,GACfX,EAAc,EAAE,GAChBb,IAAWwB,CAAO;AAAA,IACtB,MAAA,CAAWK,EAAEC,QAAQ,eAAelB,MAAe,MAAMH,EAAKwB,SAAS,KACnEX,EAAUb,EAAKwB,SAAS,CAAC;AAAA,EAEjC;AAEA,SACIC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKjC,WAAU;AAAA,IAAiC,sBAAoBM;AAAAA,EAAAA,GAC/DH,KAAS6B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,IAAIpB;AAAAA,IAASd,WAAU;AAAA,EAAA,GAAmBG,CAAW,GACpE6B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACIjC,WAAW,6BAA6BC,IAAQ,0BAA0B,EAAE,IAAID,CAAS;AAAA,IACzFmC,SAASA,MAAMvB,EAASwB,SAASC,MAAAA;AAAAA,EAAM,GAEtC9B,EAAK+B,IAAI,CAACC,GAAKC,MACZR,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAML,KAAKY;AAAAA,IAAOxC,WAAU;AAAA,IAAuB,sBAAoB,aAAawC,CAAK;AAAA,EAAA,GACpFD,GACDP,gBAAAA,EAAAC,cAACQ,GAAI;AAAA,IACDC,MAAK;AAAA,IACL1C,WAAU;AAAA,IACVI,WAAW,cAAcmC,CAAG;AAAA,IAC5BJ,SAASA,MAAMf,EAAUoB,CAAK;AAAA,IAC9BG,uBAAqB;AAAA,EAAA,CACxB,CACC,CACT,GACDX,gBAAAA,EAAAC,uBAAAW,EAAA;AAAA,IACI5C,WAAU;AAAA,IACV6C,KAAKjC;AAAAA,IACLkC,MAAK;AAAA,IACLjD,OAAOa;AAAAA,IACPZ,UAAW6B,CAAAA,MAAMhB,EAAcgB,EAAEoB,OAAOlD,KAAK;AAAA,IAC7CmD,WAAWtB;AAAAA,IACX3B,aAAAA;AAAAA,IACA,sBAAmB;AAAA,EAAA,GACfkB,CAAc,CACrB,CACA,GACJhB,KAAS+B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKjC,WAAU;AAAA,EAAA,GAAiBE,CAAkB,CAC3D;AAEb;"}
+{"version":3,"file":"index37.js","sources":["../src/components/InputWithTags/index.tsx"],"sourcesContent":["import React, { useState, KeyboardEvent, useRef } from \"react\";\nimport './styles.scss';\nimport { Icon } from '../Icon';\n\nexport interface InputWithTagsProps {\n    value: string[];\n    onChange?: (tags: string[]) => void;\n    placeholder?: string;\n    className?: string;\n    error?: boolean;\n    errorMessage?: string;\n    label?: string;\n    automationId?: string;\n}\n\nexport function InputWithTags({ \n    value, \n    onChange, \n    placeholder, \n    className, \n    error, \n    errorMessage, \n    label,\n    automationId = ''\n}: InputWithTagsProps) {\n    const [tags, setTags] = useState<string[]>([...value]);\n    const [inputValue, setInputValue] = useState('');\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const removeTag = (indexToRemove: number) => {\n        const newTags = tags.filter((_, i) => i !== indexToRemove);\n        setTags(newTags);\n        onChange?.(newTags);\n    };\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && inputValue.trim()) {\n            e.preventDefault();\n            const newTags = [...tags, inputValue.trim()];\n            setTags(newTags);\n            setInputValue(\"\");\n            onChange?.(newTags);\n        } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n            removeTag(tags.length - 1);\n        }\n    };\n\n    return (\n        <div className=\"input-with-tags-main-container\" data-automation-id={automationId}>\n            {label && <div className=\"label-container\">{label}</div>}\n            <div \n                className={`input-with-tags-container ${error ? 'input-with-tags-error' : ''} ${className}`} \n                onClick={() => inputRef.current?.focus()}\n            >\n                {tags.map((tag, index) => (\n                    <span key={index} className=\"tag-in-inputwithtags\" data-automation-id={`input-tag-${index}`}>\n                        {tag} \n                        <Icon\n                            name=\"close\"\n                            className=\"close-icon-in-inputwithtags\"\n                            ariaLabel={`Remove tag ${tag}`}\n                            onClick={() => removeTag(index)}\n                            shouldStopPropagation\n                        />\n                    </span>\n                ))}\n                <input\n                    className=\"input-with-tags-input\"\n                    ref={inputRef}\n                    type=\"text\"\n                    value={inputValue}\n                    onChange={(e) => setInputValue(e.target.value)}\n                    onKeyDown={handleKeyDown}\n                    placeholder={placeholder}\n                    data-automation-id=\"input-with-tags-input-field\"\n                />\n            </div>\n            {error && <div className=\"error-message\">{errorMessage}</div>}\n        </div>\n    );\n}"],"names":["React__default","useState","useRef","Icon","InputWithTags","value","onChange","placeholder","className","error","errorMessage","label","automationId","tags","setTags","inputValue","setInputValue","inputRef","removeTag","indexToRemove","newTags","filter","_","i","handleKeyDown","e","key","trim","preventDefault","length","React","createElement","onClick","current","focus","map","tag","index","name","ariaLabel","shouldStopPropagation","ref","type","target","onKeyDown"],"mappings":"AAeO,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAASC,EAAc;AAAA,EAC1BC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA,IAAe;AACC,GAAG;AACnB,QAAM,CAACC,GAAMC,CAAO,IAAIb,EAAmB,CAAC,GAAGI,CAAK,CAAC,GAC/C,CAACU,GAAYC,CAAa,IAAIf,EAAS,EAAE,GACzCgB,IAAWf,EAAyB,IAAI,GAExCgB,IAAYA,CAACC,MAA0B;AACzC,UAAMC,IAAUP,EAAKQ,OAAO,CAACC,GAAGC,MAAMA,MAAMJ,CAAa;AACzDL,IAAAA,EAAQM,CAAO,GACfd,IAAWc,CAAO;AAAA,EACtB,GAEMI,IAAgBA,CAACC,MAAuC;AAC1D,QAAIA,EAAEC,QAAQ,WAAWX,EAAWY,QAAQ;AACxCF,MAAAA,EAAEG,eAAAA;AACF,YAAMR,IAAU,CAAC,GAAGP,GAAME,EAAWY,MAAM;AAC3Cb,MAAAA,EAAQM,CAAO,GACfJ,EAAc,EAAE,GAChBV,IAAWc,CAAO;AAAA,IACtB,MAAA,CAAWK,EAAEC,QAAQ,eAAeX,MAAe,MAAMF,EAAKgB,SAAS,KACnEX,EAAUL,EAAKgB,SAAS,CAAC;AAAA,EAEjC;AAEA,SACIC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,IAAiC,sBAAoBI;AAAAA,EAAAA,GAC/DD,KAASmB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,EAAA,GAAmBG,CAAW,GACvDmB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACIvB,WAAW,6BAA6BC,IAAQ,0BAA0B,EAAE,IAAID,CAAS;AAAA,IACzFwB,SAASA,MAAMf,EAASgB,SAASC,MAAAA;AAAAA,EAAM,GAEtCrB,EAAKsB,IAAI,CAACC,GAAKC,MACZP,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAML,KAAKW;AAAAA,IAAO7B,WAAU;AAAA,IAAuB,sBAAoB,aAAa6B,CAAK;AAAA,EAAA,GACpFD,GACDN,gBAAAA,EAAAC,cAAC5B,GAAI;AAAA,IACDmC,MAAK;AAAA,IACL9B,WAAU;AAAA,IACV+B,WAAW,cAAcH,CAAG;AAAA,IAC5BJ,SAASA,MAAMd,EAAUmB,CAAK;AAAA,IAC9BG,uBAAqB;AAAA,EAAA,CACxB,CACC,CACT,GACDV,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACIvB,WAAU;AAAA,IACViC,KAAKxB;AAAAA,IACLyB,MAAK;AAAA,IACLrC,OAAOU;AAAAA,IACPT,UAAWmB,CAAAA,MAAMT,EAAcS,EAAEkB,OAAOtC,KAAK;AAAA,IAC7CuC,WAAWpB;AAAAA,IACXjB,aAAAA;AAAAA,IACA,sBAAmB;AAAA,EAAA,CACtB,CACA,GACJE,KAASqB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,EAAA,GAAiBE,CAAkB,CAC3D;AAEb;"}

package/dist/index38.js

@@ -1,43 +1,43 @@
-import o, { forwardRef as Ce, useState as R, useRef as M, useCallback as U, useEffect as W, useImperativeHandle as De } from "react";
-import { Popover as $e } from "./index19.js";
-import { Icon as Te } from "./index6.js";
-import { Checkbox as Ie } from "./index23.js";
-import { Button as ee } from "./index4.js";
-import { getA11yNameAttributes as Oe } from "./index81.js";
+import o, { forwardRef as _e, useState as I, useRef as M, useCallback as U, useEffect as W, useImperativeHandle as Pe } from "react";
+import { Popover as Ce } from "./index19.js";
+import { Icon as De } from "./index6.js";
+import { Checkbox as $e } from "./index23.js";
+import { Button as Z } from "./index4.js";
+import { getA11yNameAttributes as Te } from "./index81.js";
 import "./index72.js";
-import { useCombobox as Ae } from "./index68.js";
-import { useStableId as te } from "./index206.js";
-import { announce as Re } from "./index75.js";
+import { useCombobox as Oe } from "./index68.js";
+import { useStableId as Ae } from "./index205.js";
+import { announce as Ie } from "./index75.js";
 /* empty css         */
-function d() {
-  return d = Object.assign ? Object.assign.bind() : function(v) {
+function f() {
+  return f = Object.assign ? Object.assign.bind() : function(w) {
     for (var i = 1; i < arguments.length; i++) {
-      var E = arguments[i];
-      for (var k in E) ({}).hasOwnProperty.call(E, k) && (v[k] = E[k]);
+      var b = arguments[i];
+      for (var k in b) ({}).hasOwnProperty.call(b, k) && (w[k] = b[k]);
     }
-    return v;
-  }, d.apply(null, arguments);
+    return w;
+  }, f.apply(null, arguments);
 }
-const Ge = /* @__PURE__ */ Ce(({
-  value: v,
+const Be = /* @__PURE__ */ _e(({
+  value: w,
   onChange: i,
-  placeholder: E = "Type to search or add custom tags...",
+  placeholder: b = "Type to search or add custom tags...",
   className: k = "",
   options: g = [],
   renderOption: x,
-  label: D,
-  ariaLabel: ne,
-  ariaLabelledBy: oe,
-  ariaDescribedBy: le,
-  automationId: c = "",
+  label: R,
+  ariaLabel: ee,
+  ariaLabelledBy: te,
+  ariaDescribedBy: ne,
+  automationId: p = "",
   noOptionsMessage: L = "No options found",
   allowCustomTags: j = !0,
-  disabled: l = !1,
+  disabled: a = !1,
   type: H = "select",
   showInput: z = !0,
   displayTagBy: B = "label",
-  isWithPortal: ae = !1
-}, re) => {
+  isWithPortal: oe = !1
+}, ae) => {
   const G = (e) => e.map((t) => {
     const n = g.find((s) => s.value === t);
     return n ? {
@@ -47,157 +47,157 @@ const Ge = /* @__PURE__ */ Ce(({
       label: t,
       value: t
     };
-  }), [a, f] = R(() => G(v || [])), [r, y] = R(""), [K, se] = R(g), [u, p] = R(!1), ie = M(null), $ = M(null), T = M(!1), S = H === "multi-select-without-cta", m = H === "multi-select" || S, ce = te(c, "dropdown-input-tags-listbox"), q = te(c ? `${c}-label` : void 0, "dropdown-input-tags-label"), I = U((e) => {
-    if (l) return;
-    const t = [...a];
+  }), [l, d] = I(() => G(w || [])), [r, y] = I(""), [K, le] = I(g), [c, u] = I(!1), re = M(null), D = M(null), $ = M(!1), S = H === "multi-select-without-cta", m = H === "multi-select" || S, se = Ae(p, "dropdown-input-tags-listbox"), T = U((e) => {
+    if (a) return;
+    const t = [...l];
     t.some((n) => n.value === e.value) || (t.push({
       label: e.label,
       value: e.value
-    }), f(t), i?.(t.map((n) => n.value))), y(""), p(!1);
-  }, [l, a, i]), V = U((e, t) => {
+    }), d(t), i?.(t.map((n) => n.value))), y(""), u(!1);
+  }, [a, l, i]), V = U((e, t) => {
     let n = [];
-    e ? n = [...a, {
+    e ? n = [...l, {
       label: t.label,
       value: t.value
-    }] : n = a.filter((s) => s.value !== t.value), f(n), y(""), S && (T.current = !0, i?.(n.map((s) => s.value)));
-  }, [a, S, i]), O = "__add_custom_tag__", J = "__no_results__", ue = {
-    id: J,
+    }] : n = l.filter((s) => s.value !== t.value), d(n), y(""), S && ($.current = !0, i?.(n.map((s) => s.value)));
+  }, [l, S, i]), O = "__add_custom_tag__", q = "__no_results__", ie = {
+    id: q,
     label: L,
-    value: J,
+    value: q,
     __noResults: !0
-  }, pe = (e) => !!e?.__noResults, Q = U((e) => {
-    if (!l) {
+  }, ce = (e) => !!e?.__noResults, J = U((e) => {
+    if (!a) {
       if (e.value === O) {
         const t = r.trim();
         if (!t) return;
-        const n = [...a];
+        const n = [...l];
         n.some((s) => s.value === t) || (n.push({
           label: t,
           value: t
-        }), f(n), i?.(n.map((s) => s.value))), y(""), p(!1);
+        }), d(n), i?.(n.map((s) => s.value))), y(""), u(!1);
         return;
       }
       if (m) {
-        const t = a.some((n) => n.value === e.value);
+        const t = l.some((n) => n.value === e.value);
         V(!t, e);
       } else
-        I(e);
+        T(e);
     }
-  }, [l, m, a, r, i, V, I]), w = K.length > 0 ? K : j && r.trim() ? [{
+  }, [a, m, l, r, i, V, T]), v = K.length > 0 ? K : j && r.trim() ? [{
     id: O,
     label: `Add "${r.trim()}"`,
     value: O
-  }] : [], X = w.length === 0 && u ? [ue] : w, {
-    containerProps: me,
-    inputProps: Y,
-    listboxProps: de,
+  }] : [], Q = v.length === 0 && c ? [ie] : v, {
+    containerProps: ue,
+    inputProps: X,
+    listboxProps: pe,
     getOptionProps: N,
     highlightedIndex: h,
-    setHighlightedIndex: b,
-    isKeyboardFocused: Z
-  } = Ae({
-    items: X,
-    isOpen: u,
-    onOpenChange: p,
-    onSelect: Q,
-    listboxId: ce,
-    hasItems: X.length > 0,
+    setHighlightedIndex: E,
+    isKeyboardFocused: Y
+  } = Oe({
+    items: Q,
+    isOpen: c,
+    onOpenChange: u,
+    onSelect: J,
+    listboxId: se,
+    hasItems: Q.length > 0,
     keepHighlightOnSelect: m,
     closeOnTab: H !== "multi-select",
-    isItemDisabled: pe
-  }), _ = (e) => e ? `highlighted${Z ? " keyboard-highlight" : ""}` : "";
+    isItemDisabled: ce
+  }), _ = (e) => e ? `highlighted${Y ? " keyboard-highlight" : ""}` : "";
   W(() => {
-    if (T.current) {
-      T.current = !1;
+    if ($.current) {
+      $.current = !1;
       return;
     }
-    f(G(v || []));
-  }, [v, g, u]), W(() => {
+    d(G(w || []));
+  }, [w, g, c]), W(() => {
     const e = g.filter((t) => t.label.toLowerCase().includes(r.toLowerCase()) || t.value.toLowerCase().includes(r.toLowerCase()));
-    se(e);
+    le(e);
   }, [r, g]), W(() => {
-    u && w.length === 0 && r.trim() && h === -1 && Re(L, {
+    c && v.length === 0 && r.trim() && h === -1 && Ie(L, {
       assertiveness: "polite",
       batchId: "dropdown-input-tags-empty-state",
       delay: 300
     });
-  }, [w.length, u, r, h]);
-  const fe = (e) => {
-    if (l) return;
-    const t = a.filter((n, s) => s !== e);
-    f(t), (!m || S || m && !u) && i?.(t.map((n) => n.value));
-  }, ge = (e) => {
-    if (!l) {
-      if (e.key === "Backspace" && r === "" && a.length > 0) {
+  }, [v.length, c, r, h]);
+  const me = (e) => {
+    if (a) return;
+    const t = l.filter((n, s) => s !== e);
+    d(t), (!m || S || m && !c) && i?.(t.map((n) => n.value));
+  }, fe = (e) => {
+    if (!a) {
+      if (e.key === "Backspace" && r === "" && l.length > 0) {
         e.preventDefault();
-        const t = a.slice(0, -1);
-        f(t), i?.(t.map((n) => n.value));
+        const t = l.slice(0, -1);
+        d(t), i?.(t.map((n) => n.value));
         return;
       }
       if (e.key === "Enter" && r.trim() && K.length === 0 && j) {
         e.preventDefault();
-        const t = [...a];
+        const t = [...l];
         t.some((n) => n.value === r.trim()) || (t.push({
           label: r.trim(),
           value: r.trim()
-        }), f(t), i?.(t.map((n) => n.value))), y(""), b(-1), p(!1);
+        }), d(t), i?.(t.map((n) => n.value))), y(""), E(-1), u(!1);
         return;
       }
-      Y.onKeyDown(e);
+      X.onKeyDown(e);
     }
-  }, he = (e) => {
-    if (l) return;
+  }, de = (e) => {
+    if (a) return;
     const t = e.target.value;
-    y(t), b(-1), t.trim() && !u && p(!0);
-  }, ve = () => {
-    l || (r.trim() || g.length > 0) && p(!0);
+    y(t), E(-1), t.trim() && !c && u(!0);
+  }, ge = () => {
+    a || (r.trim() || g.length > 0) && u(!0);
+  }, he = (e) => {
+    a || (e.stopPropagation(), D.current?.focus(), !c && (r.trim() || g.length > 0) && u(!0));
   }, we = (e) => {
-    l || (e.stopPropagation(), $.current?.focus(), !u && (r.trim() || g.length > 0) && p(!0));
-  }, be = (e) => {
-    if (l) {
+    if (a) {
       e.preventDefault(), e.stopPropagation();
       return;
     }
     e.target.closest(".input-with-tags-container") && e.stopPropagation();
-  }, Ee = () => {
-    l || p(!u);
+  }, ve = () => {
+    a || u(!c);
   };
-  De(re, () => ({
-    toggleDropdown: Ee
+  Pe(ae, () => ({
+    toggleDropdown: ve
   }), []);
-  const ke = (e, t, n, s) => {
-    const P = a.some((C) => C.value === e.value), A = h === t, F = N(t, P);
-    return /* @__PURE__ */ o.createElement("div", d({
+  const Ee = (e, t, n, s) => {
+    const P = l.some((C) => C.value === e.value), A = h === t, F = N(t, P);
+    return /* @__PURE__ */ o.createElement("div", f({
       key: e.id
     }, F, {
       className: `dropdown-with-input-tags-option ${_(A)}`,
       onClick: () => !s && n(e),
-      onMouseEnter: () => b(t),
-      "data-automation-id": `${c}-option-${e.id}`
+      onMouseEnter: () => E(t),
+      "data-automation-id": `${p}-option-${e.id}`
     }), /* @__PURE__ */ o.createElement("span", {
       className: "option-label"
     }, e.label), e.value !== e.label && /* @__PURE__ */ o.createElement("span", {
       className: "option-value"
     }, e.value));
-  }, ye = () => {
-    T.current = !0;
-    const e = a.map((t) => t.value);
-    i?.(e), p(!1);
-  }, Se = () => {
-    f([]);
-  }, Ne = (e, t) => {
-    const n = a.some((A) => A.value === e.value), s = h === t, P = N(t, n);
-    return /* @__PURE__ */ o.createElement("div", d({
+  }, be = () => {
+    $.current = !0;
+    const e = l.map((t) => t.value);
+    i?.(e), u(!1);
+  }, ke = () => {
+    d([]);
+  }, ye = (e, t) => {
+    const n = l.some((A) => A.value === e.value), s = h === t, P = N(t, n);
+    return /* @__PURE__ */ o.createElement("div", f({
       key: e.id
     }, P, {
       className: `dropdown-with-input-tags-option dropdown-with-input-tags-multi-select-option ${_(s)}`,
       "aria-checked": n,
       onClick: () => {
-        l || (V(!n, e), $.current?.focus());
+        a || (V(!n, e), D.current?.focus());
       },
-      onMouseEnter: () => b(t),
-      "data-automation-id": `${c}-option-${e.id}`
-    }), /* @__PURE__ */ o.createElement(Ie, {
+      onMouseEnter: () => E(t),
+      "data-automation-id": `${p}-option-${e.id}`
+    }), /* @__PURE__ */ o.createElement($e, {
       automationId: "checkbox",
       className: "checkbox",
       checked: n,
@@ -206,113 +206,112 @@ const Ge = /* @__PURE__ */ Ce(({
       label: e.label,
       tabIndex: -1
     }));
-  }, _e = () => /* @__PURE__ */ o.createElement("div", {
+  }, Se = () => /* @__PURE__ */ o.createElement("div", {
     className: "dropdown-with-input-tags-ctas-container",
     onKeyDown: (e) => {
       (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End") && e.stopPropagation();
     }
-  }, /* @__PURE__ */ o.createElement(ee, {
+  }, /* @__PURE__ */ o.createElement(Z, {
     label: "Clear",
     type: "link",
     size: "sm",
-    onClick: Se,
-    automationId: `${c}-clear-button`
-  }), /* @__PURE__ */ o.createElement(ee, {
+    onClick: ke,
+    automationId: `${p}-clear-button`
+  }), /* @__PURE__ */ o.createElement(Z, {
     label: "Apply",
     type: "primary",
     size: "sm",
-    onClick: ye,
-    automationId: `${c}-apply-button`
+    onClick: be,
+    automationId: `${p}-apply-button`
   }));
-  return /* @__PURE__ */ o.createElement("div", d({
-    className: `dropdown-with-input-tags-wrapper ${k} ${l ? "disabled-wrapper" : ""}`,
-    "data-automation-id": c
-  }, me), D && /* @__PURE__ */ o.createElement("label", {
-    id: q,
+  return /* @__PURE__ */ o.createElement("div", f({
+    className: `dropdown-with-input-tags-wrapper ${k} ${a ? "disabled-wrapper" : ""}`,
+    "data-automation-id": p
+  }, ue), R && /* @__PURE__ */ o.createElement("label", {
+    id: `${p}-label`,
     className: "dropdown-with-input-tags-label"
-  }, D), /* @__PURE__ */ o.createElement("div", {
-    onClick: be
-  }, /* @__PURE__ */ o.createElement($e, {
-    ref: ie,
+  }, R), /* @__PURE__ */ o.createElement("div", {
+    onClick: we
+  }, /* @__PURE__ */ o.createElement(Ce, {
+    ref: re,
     className: "dropdown-with-input-tags-popover",
     contentWidth: "full",
     position: "bottom-left",
-    isPopoverOpen: !l && u,
-    onPopoverToggle: l ? () => {
-    } : p,
+    isPopoverOpen: !a && c,
+    onPopoverToggle: a ? () => {
+    } : u,
     disableClickToggle: !0,
-    isWithPortal: ae,
+    isWithPortal: oe,
     renderPopoverContents: ({
       closePopoverCb: e
-    }) => /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("div", d({}, de, {
+    }) => /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("div", f({}, pe, {
       className: "dropdown-with-input-tags-content"
     }, m && {
       "aria-multiselectable": "true"
-    }), w.length > 0 ? w.map((t, n) => {
+    }), v.length > 0 ? v.map((t, n) => {
       if (t.value === O) {
-        const C = h === n, Pe = N(n, !1);
-        return /* @__PURE__ */ o.createElement("div", d({
+        const C = h === n, Ne = N(n, !1);
+        return /* @__PURE__ */ o.createElement("div", f({
           key: t.id
-        }, Pe, {
+        }, Ne, {
           className: `dropdown-with-input-tags-option dropdown-with-input-tags-custom-option ${_(C)}`,
           onClick: () => {
-            l || (Q(t), e());
+            a || (J(t), e());
           },
-          onMouseEnter: () => b(n)
+          onMouseEnter: () => E(n)
         }), 'Add "', r.trim(), '"');
       }
       if (m)
-        return Ne(t, n);
-      const s = a.some((C) => C.value === t.value), P = h === n, F = {
+        return ye(t, n);
+      const s = l.some((C) => C.value === t.value), P = h === n, F = {
         ...N(n, s),
-        onMouseEnter: () => b(n),
+        onMouseEnter: () => E(n),
         className: `dropdown-with-input-tags-option ${_(P)}`
       };
-      return x ? x(t, F, I) : ke(t, n, I, l);
-    }) : /* @__PURE__ */ o.createElement("div", d({}, N(0, !1), {
+      return x ? x(t, F, T) : Ee(t, n, T, a);
+    }) : /* @__PURE__ */ o.createElement("div", f({}, N(0, !1), {
       className: `dropdown-with-input-tags-no-options ${_(h === 0)}`
     }), /* @__PURE__ */ o.createElement("div", {
       className: "dropdown-with-input-tags-no-options-text"
-    }, L))), m && !S && _e()),
+    }, L))), m && !S && Se()),
     renderPopoverSrcElement: () => /* @__PURE__ */ o.createElement("div", {
       className: "dropdown-with-input-tags-input-container"
     }, /* @__PURE__ */ o.createElement("div", {
-      className: `input-with-tags-container ${l ? "disabled-input-with-tags-container" : ""} ${Z ? "keyboard-focused" : ""}`,
-      onClick: we,
+      className: `input-with-tags-container ${a ? "disabled-input-with-tags-container" : ""} ${Y ? "keyboard-focused" : ""}`,
+      onClick: he,
       onKeyDown: (e) => {
-        e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && $.current?.focus();
+        e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && D.current?.focus();
       }
-    }, a.map((e, t) => /* @__PURE__ */ o.createElement("span", {
+    }, l.map((e, t) => /* @__PURE__ */ o.createElement("span", {
       key: t,
       className: "tag-in-inputwithtags"
-    }, e[B], !l && /* @__PURE__ */ o.createElement(Te, {
+    }, e[B], !a && /* @__PURE__ */ o.createElement(De, {
       name: "close",
       className: "close-icon-in-inputwithtags",
       ariaLabel: `Remove tag ${e[B]}`,
-      onClick: () => fe(t),
+      onClick: () => me(t),
       shouldStopPropagation: !0
-    }))), (z || !a.length || m) && /* @__PURE__ */ o.createElement("input", d({
-      ref: $
-    }, Y, {
+    }))), (z || !l.length || m) && /* @__PURE__ */ o.createElement("input", f({
+      ref: D
+    }, X, {
       type: "text",
       value: r,
-      onChange: he,
-      onKeyDown: ge,
-      onFocus: ve,
-      placeholder: a.length === 0 ? E : "",
-      className: `input-with-tags-input${!z && a.length > 0 && !r ? " sr-only" : ""}`,
-      disabled: l
-    }, Oe({
-      ariaLabel: ne || (D ? void 0 : "Search and select options"),
-      ariaLabelledBy: oe,
-      internalLabelId: D ? q : void 0,
-      ariaDescribedBy: le
+      onChange: de,
+      onKeyDown: fe,
+      onFocus: ge,
+      placeholder: l.length === 0 ? b : "",
+      className: `input-with-tags-input${!z && l.length > 0 && !r ? " sr-only" : ""}`,
+      disabled: a
+    }, Te({
+      ariaLabel: ee || R || "Search and select options",
+      ariaLabelledBy: te,
+      ariaDescribedBy: ne
     }))))),
-    automationId: c,
-    popoverContentAutomationId: `${c}-content`
+    automationId: p,
+    popoverContentAutomationId: `${p}-content`
   })));
 });
 export {
-  Ge as DropdownWithInputTags
+  Be as DropdownWithInputTags
 };
 //# sourceMappingURL=index38.js.map