se-design 1.0.85 → 1.0.86

package/dist/index38.js

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