se-design 1.0.82 → 1.0.83-dev.2

package/dist/index38.js

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