se-design 1.0.83 → 1.0.84-dev.0

package/dist/index38.js

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