se-design 1.0.94 → 1.0.96-dev.0

package/dist/index39.js

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