@fluidattacks/design 9.1.1 → 9.2.0

package/dist/components/inputs/fields/combobox/field/index.js

@@ -1,74 +1,74 @@
-import { jsx as t, jsxs as R } from "react/jsx-runtime";
-import { useVirtualizer as He } from "../../../../../node_modules/@tanstack/react-virtual/dist/esm/index.js";
-import { useState as v, useMemo as F, useRef as y, useCallback as g } from "react";
-import { useButton as Ue } from "../../../../../node_modules/react-aria/dist/private/button/useButton.js";
-import { useComboBox as We } from "../../../../../node_modules/react-aria/dist/private/combobox/useComboBox.js";
-import { useFilter as Ye } from "../../../../../node_modules/react-aria/dist/private/i18n/useFilter.js";
-import { useListBox as qe } from "../../../../../node_modules/react-aria/dist/private/listbox/useListBox.js";
-import { useComboBoxState as Je } from "../../../../../node_modules/react-stately/dist/private/combobox/useComboBoxState.js";
-import { Item as Pe } from "../../../../../node_modules/react-stately/dist/private/collections/Item.js";
-import { useTheme as Qe } from "styled-components";
-import { OutlineContainer as Xe } from "../../../outline-container/index.js";
-import { StyledTextInputContainer as Ze } from "../../../styles.js";
+import { jsx as t, jsxs as F } from "react/jsx-runtime";
+import { useVirtualizer as We } from "../../../../../node_modules/@tanstack/react-virtual/dist/esm/index.js";
+import { useState as v, useMemo as x, useRef as g, useCallback as y } from "react";
+import { useButton as Ye } from "../../../../../node_modules/react-aria/dist/private/button/useButton.js";
+import { useComboBox as qe } from "../../../../../node_modules/react-aria/dist/private/combobox/useComboBox.js";
+import { useFilter as Je } from "../../../../../node_modules/react-aria/dist/private/i18n/useFilter.js";
+import { useListBox as Pe } from "../../../../../node_modules/react-aria/dist/private/listbox/useListBox.js";
+import { useComboBoxState as Qe } from "../../../../../node_modules/react-stately/dist/private/combobox/useComboBoxState.js";
+import { Item as Xe } from "../../../../../node_modules/react-stately/dist/private/collections/Item.js";
+import { useTheme as Ze } from "styled-components";
+import { OutlineContainer as _e } from "../../../outline-container/index.js";
+import { StyledTextInputContainer as eo } from "../../../styles.js";
 import { Popover as de } from "../../../utils/popover/index.js";
-import { Option as _e } from "../option/index.js";
-import { StyledStatusMessage as eo, ChevronIconButton as oo, StyledDropdown as he, StyledGroupHeader as to, StyledEmptyMessage as ro } from "../styles.js";
-import { describeSelection as no, toSelection as so } from "../utils.js";
+import { Option as oo } from "../option/index.js";
+import { StyledStatusMessage as to, ChevronIconButton as ro, StyledDropdown as he, StyledGroupHeader as no, StyledEmptyMessage as so } from "../styles.js";
+import { describeSelection as lo, toSelection as me } from "../utils.js";
 import { Icon as q } from "../../../../icon/index.js";
-import { IconButton as lo } from "../../../../icon-button/index.js";
+import { IconButton as ao } from "../../../../icon-button/index.js";
 import "../../../../typography/heading/index.js";
 import "../../../../typography/span/index.js";
 import { Text as J } from "../../../../typography/text/index.js";
-import { useClickOutside as io } from "../../../../../hooks/use-click-outside.js";
-const Fo = ({
+import { useClickOutside as co } from "../../../../../hooks/use-click-outside.js";
+const ko = ({
   field: u,
   disabled: h = !1,
-  disabledKeys: x,
-  error: me,
+  disabledKeys: $,
+  error: ge,
   helpLink: ye,
-  helpLinkText: ge,
-  helpText: ve,
+  helpLinkText: ve,
+  helpText: xe,
   label: P,
-  loadingItems: xe,
-  name: i,
+  loadingItems: $e,
+  name: l,
   multiSelection: r = !1,
   items: o,
   onBlur: K,
   onChange: f,
   onClear: Q,
-  placeholder: $e,
-  clearable: be = !1,
+  placeholder: be,
+  clearable: we = !1,
   emptyMessage: X,
   statusMessage: Z,
-  required: we,
-  setValue: $,
-  tooltip: Se,
-  value: Be,
-  watch: b,
-  weight: Ce
+  required: Se,
+  setValue: b,
+  tooltip: Be,
+  value: Ce,
+  watch: w,
+  weight: Ae
 }) => {
-  const m = Qe(), D = h ? void 0 : me, d = u?.value ?? Be, [G, w] = v(() => r ? no(
-    so(b?.(`${i}Options`)),
+  const m = Ze(), k = h ? void 0 : ge, d = u?.value ?? Ce, [D, S] = v(() => r ? lo(
+    me(w?.(`${l}Options`)),
     o.map((e) => e.value),
-    x ?? [],
+    $ ?? [],
     o.find((e) => e.value === "All")?.name
-  ).text : o.find((e) => e.value === d)?.name ?? ""), [_, k] = v(d), j = (xe === !1 || !d) && !r, N = F(
+  ).text : o.find((e) => e.value === d)?.name ?? ""), [_, G] = v(d), j = ($e === !1 || !d) && !r, M = x(
     () => j ? o.find((e) => e.value === d)?.name ?? "" : "",
     [j, d, o]
-  ), [Ae, Oe] = v(d), [ze, Ie] = v(N);
-  j && (d !== Ae || N !== ze) && (Oe(d), Ie(N), w(N), k(d ?? ""));
-  const [Re, H] = v(o), [ee, S] = v(!1), { contains: M } = Ye({ sensitivity: "base" }), U = y(null), W = y(null), B = y(null), C = y(null), oe = y(null), A = y(null), Y = y(/* @__PURE__ */ new Set()), Fe = F(() => {
-    const e = Y.current, s = Array.from(x ?? []), l = o.some((n) => n.group !== void 0);
+  ), [Oe, ze] = v(d), [Ie, Re] = v(M);
+  j && (d !== Oe || M !== Ie) && (ze(d), Re(M), S(M), G(d ?? ""));
+  const [Fe, H] = v(o), [ee, B] = v(!1), { contains: N } = Je({ sensitivity: "base" }), U = g(null), W = g(null), C = g(null), A = g(null), oe = g(null), O = g(null), Y = g(/* @__PURE__ */ new Set()), ke = x(() => {
+    const e = Y.current, s = Array.from($ ?? []), c = o.some((n) => n.group !== void 0);
     return o.toSorted((n, p) => {
       if (n.value === "All") return -1;
       if (p.value === "All") return 1;
       const E = s.includes(n.value), L = s.includes(p.value);
-      if (l) {
-        const z = n.group ?? "", I = p.group ?? "";
+      if (c) {
+        const I = n.group ?? "", R = p.group ?? "";
         if (!n.group && p.group) return -1;
         if (n.group && !p.group) return 1;
-        if (z !== I)
-          return z.localeCompare(I);
+        if (I !== R)
+          return I.localeCompare(R);
         if (E && !L) return 1;
         if (!E && L) return -1;
         if (r) {
@@ -81,124 +81,125 @@ const Fo = ({
       if (E && !L) return 1;
       if (!E && L) return -1;
       if (r) {
-        const z = e.has(n.value), I = e.has(p.value);
-        return z && !I ? -1 : !z && I ? 1 : n.name.localeCompare(p.name);
+        const I = e.has(n.value), R = e.has(p.value);
+        return I && !R ? -1 : !I && R ? 1 : n.name.localeCompare(p.name);
       }
       return 0;
     }).map(
-      (n) => M(n.name, G) || ee ? /* @__PURE__ */ t(
-        Pe,
+      (n) => N(n.name, D) || ee ? /* @__PURE__ */ t(
+        Xe,
         {
           "aria-label": n.value,
           hrefLang: n.href,
-          textValue: n.tag,
+          textValue: n.name,
           children: n.name
         },
         n.value
       ) : null
     );
-  }, [M, x, G, o, r, ee]), De = g(
+  }, [N, $, D, o, r, ee]), De = y(
     (e) => {
       const s = e.split(/,|\s/u).slice(-1)[0].trim();
-      w(r ? s : e), e === "" || e.endsWith(",") ? S(!0) : (S(!1), k((l) => {
-        const c = e === "" ? "" : l;
-        return u && u.onChange(c), f && f(e), c;
+      S(r ? s : e), e === "" || e.endsWith(",") ? B(!0) : (B(!1), G((c) => {
+        const i = e === "" ? "" : c;
+        return u && u.onChange(i), f && f(e), i;
       }), H(
         o.filter(
-          (l) => M(l.name, r ? s : e)
+          (c) => N(c.name, r ? s : e)
         )
       ));
     },
-    [M, o, u, r, f]
-  ), Ge = g(
+    [N, o, u, r, f]
+  ), Ge = y(
     (e) => {
-      w(o.find((s) => s.value === e)?.name ?? ""), k(e ? String(e) : ""), u && u.onChange(e), f && f(e ? String(e) : ""), H(o);
+      S(o.find((s) => s.value === e)?.name ?? ""), G(e ? String(e) : ""), u && u.onChange(e), f && f(e ? String(e) : ""), H(o);
     },
     [o, u, f]
-  ), te = g(
+  ), te = y(
     (e) => {
-      e.key === "Enter" && e.preventDefault(), S(!1);
+      e.key === "Enter" && e.preventDefault(), B(!1);
     },
     []
-  ), ke = g(() => {
+  ), Me = y(() => {
     K && K(), u && u.onBlur();
-  }, [u, K]), Ne = g(() => {
-    S(!0);
-  }, []), a = Je({
+  }, [u, K]), Ne = y(() => {
+    B(!0);
+  }, []), a = Qe({
     allowsCustomValue: r,
     allowsEmptyCollection: !0,
-    disabledKeys: x,
-    inputValue: G,
-    items: Re,
+    disabledKeys: $,
+    inputValue: D,
+    items: Fe,
     menuTrigger: "focus",
     shouldCloseOnBlur: !r,
     selectedKey: _,
-    onBlur: ke,
+    onBlur: Me,
     onInputChange: De,
     onKeyDown: te,
     onKeyUp: Ne,
     onOpenChange(e, s) {
-      if (e && r && b) {
-        const l = b(`${i}Options`) ?? [], c = Array.isArray(l) ? l : l ? [l] : [];
-        Y.current = new Set(c.filter(Boolean));
-      }
-      S(
+      e && r && w && (Y.current = new Set(
+        me(w(`${l}Options`)).filter(Boolean)
+      )), B(
         e && (s === "manual" || s === "focus")
       ), e && s !== "focus" && requestAnimationFrame(() => {
         U.current?.focus();
       });
     },
     onSelectionChange: r ? void 0 : Ge,
-    children: Fe
-  }), Me = g(() => {
-    w(""), k(null), H(o), a.setSelectedKey(null), a.setInputValue(""), f && f(""), r && $ && ($(`${i}Options`, []), $(`${i}CheckAll`, "")), Q?.();
-  }, [o, r, i, Q, f, $, a]), {
+    children: ke
+  }), Te = y(() => {
+    S(""), G(null), H(o), a.setSelectedKey(null), a.setInputValue(""), f && f(""), r && b && (b(`${l}Options`, []), b(`${l}CheckAll`, "")), Q?.();
+  }, [o, r, l, Q, f, b, a]), {
     buttonProps: Ve,
-    inputProps: Te,
-    listBoxProps: Ee
-  } = We(
+    inputProps: Ee,
+    listBoxProps: Le
+  } = qe(
     {
-      inputValue: G,
+      inputValue: D,
       buttonRef: W,
-      id: i,
+      id: l,
       inputRef: U,
-      label: P ?? i,
-      listBoxRef: B,
-      name: i,
-      placeholder: $e,
-      popoverRef: A
+      label: P ?? l,
+      listBoxRef: C,
+      name: l,
+      placeholder: be,
+      popoverRef: O
     },
     a
-  ), { listBoxProps: re } = qe(Ee, a, B), { buttonProps: Le } = Ue(Ve, W), { width: ne } = C.current?.getBoundingClientRect() ?? {
+  ), { listBoxProps: re } = Pe(Le, a, C), { buttonProps: Ke } = Ye(Ve, W), { width: ne } = A.current?.getBoundingClientRect() ?? {
     width: 240
   };
-  io(C, () => {
+  co(A, () => {
     a.isOpen && !r && a.close();
-  }, [A]);
-  const O = Array.from(a.collection), se = r ? O.findLastIndex(
+  }, [O]);
+  const z = Array.from(a.collection), se = r ? z.findLastIndex(
     (e) => e.key === "All" || Y.current.has(String(e.key))
-  ) : -1, Ke = F(() => o.map((e) => e.value), [o]), le = F(
+  ) : -1, je = x(() => o.map((e) => e.value), [o]), le = x(
     () => new Map(o.map((e) => [e.value, e.group])),
     [o]
-  ), V = F(() => O.reduce(
-    (e, s, l) => {
-      const c = le.get(String(s.key));
-      return c !== void 0 && c !== e.currentGroup ? (e.result.push({ type: "header", group: c }), e.currentGroup = c) : c === void 0 && e.currentGroup !== void 0 && (e.currentGroup = void 0), e.result.push({ type: "item", index: l }), e;
+  ), He = x(
+    () => new Map(o.map((e) => [e.value, e.tag])),
+    [o]
+  ), T = x(() => z.reduce(
+    (e, s, c) => {
+      const i = le.get(String(s.key));
+      return i !== void 0 && i !== e.currentGroup ? (e.result.push({ type: "header", group: i }), e.currentGroup = i) : i === void 0 && e.currentGroup !== void 0 && (e.currentGroup = void 0), e.result.push({ type: "item", index: c }), e;
     },
     { result: [], currentGroup: void 0 }
-  ).result, [O, le]), ie = He({
-    count: V.length,
-    estimateSize: (e) => V[e].type === "header" ? 44 : 28,
-    getScrollElement: () => B.current,
+  ).result, [z, le]), ae = We({
+    count: T.length,
+    estimateSize: (e) => T[e].type === "header" ? 44 : 28,
+    getScrollElement: () => C.current,
     useFlushSync: !1
-  }), ae = a.isOpen && !h, T = ae && !!Z, ce = ae && o.length === 0 && !!X, je = g(
+  }), ce = a.isOpen && !h, V = ce && !!Z, ie = ce && o.length === 0 && !!X, Ue = y(
     (e) => {
       e.preventDefault();
     },
     []
-  ), pe = T ? (
+  ), pe = V ? (
     // A listbox only owns options, so the row itself must stay presentational
-    /* @__PURE__ */ t(eo, { onMouseDown: je, role: "presentation", children: /* @__PURE__ */ t("div", { "aria-live": "polite", role: "status", children: /* @__PURE__ */ t(
+    /* @__PURE__ */ t(to, { onMouseDown: Ue, role: "presentation", children: /* @__PURE__ */ t("div", { "aria-live": "polite", role: "status", children: /* @__PURE__ */ t(
       J,
       {
         color: m.palette.gray[400],
@@ -209,39 +210,39 @@ const Fo = ({
       }
     ) }) })
   ) : null;
-  return /* @__PURE__ */ R(
-    Xe,
+  return /* @__PURE__ */ F(
+    _e,
     {
       containerRef: oe,
-      error: D,
+      error: k,
       helpLink: ye,
-      helpLinkText: ge,
-      helpText: ve,
-      htmlFor: i,
-      id: `combobox-${i}`,
+      helpLinkText: ve,
+      helpText: xe,
+      htmlFor: l,
+      id: `combobox-${l}`,
       label: P,
-      required: we,
-      tooltip: Se,
-      weight: Ce,
+      required: Se,
+      tooltip: Be,
+      weight: Ae,
       children: [
-        /* @__PURE__ */ R(
-          Ze,
+        /* @__PURE__ */ F(
+          eo,
           {
-            className: `${h ? "disabled" : ""} ${D ? "error" : ""}`,
-            ref: C,
+            className: `${h ? "disabled" : ""} ${k ? "error" : ""}`,
+            ref: A,
             children: [
               /* @__PURE__ */ t(
                 "input",
                 {
-                  ...Te,
-                  "aria-invalid": D ? "true" : "false",
-                  "aria-label": i,
+                  ...Ee,
+                  "aria-invalid": k ? "true" : "false",
+                  "aria-label": l,
                   disabled: h,
                   onKeyDown: te,
                   ref: U
                 }
               ),
-              D ? /* @__PURE__ */ t(
+              k ? /* @__PURE__ */ t(
                 q,
                 {
                   icon: "exclamation-circle",
@@ -250,24 +251,24 @@ const Fo = ({
                   iconSize: "lg"
                 }
               ) : void 0,
-              be && !h && (r ? (b?.(`${i}Options`)?.length ?? 0) > 0 : _) ? /* @__PURE__ */ t(
-                lo,
+              we && !h && (r ? (w?.(`${l}Options`)?.length ?? 0) > 0 : _) ? /* @__PURE__ */ t(
+                ao,
                 {
                   icon: "xmark",
                   iconColor: m.palette.gray[400],
                   iconSize: "sm",
                   iconType: "fa-light",
-                  onClick: Me,
+                  onClick: Te,
                   px: 0.125,
                   py: 0.125,
                   type: "reset",
                   variant: "ghost"
                 }
               ) : void 0,
-              /* @__PURE__ */ R(
-                oo,
+              /* @__PURE__ */ F(
+                ro,
                 {
-                  ...Le,
+                  ...Ke,
                   $variant: "ghost",
                   className: `action ${a.isOpen && !h ? "open" : "closed"}`,
                   disabled: h,
@@ -306,30 +307,30 @@ const Fo = ({
           de,
           {
             className: "dropdown",
-            id: `popover-${i}`,
+            id: `popover-${l}`,
             offset: 4,
             placement: "bottom start",
-            popoverRef: A,
+            popoverRef: O,
             state: a,
-            triggerRef: C,
-            children: /* @__PURE__ */ R(
+            triggerRef: A,
+            children: /* @__PURE__ */ F(
               he,
               {
                 ...re,
-                $hasStatus: T,
-                $multiSelection: r && !Array.from(x ?? []).includes("All"),
+                $hasStatus: V,
+                $multiSelection: r && !Array.from($ ?? []).includes("All"),
                 $width: ne,
-                ref: B,
+                ref: C,
                 children: [
                   /* @__PURE__ */ t(
                     "div",
                     {
                       style: {
-                        height: `${ie.getTotalSize()}px`,
+                        height: `${ae.getTotalSize()}px`,
                         position: "relative"
                       },
-                      children: ie.getVirtualItems().map((e) => {
-                        const s = V[e.index];
+                      children: ae.getVirtualItems().map((e) => {
+                        const s = T[e.index];
                         if (s.type === "header")
                           return /* @__PURE__ */ t(
                             "div",
@@ -342,7 +343,7 @@ const Fo = ({
                                 height: `${e.size}px`,
                                 transform: `translateY(${e.start}px)`
                               },
-                              children: /* @__PURE__ */ t(to, { children: /* @__PURE__ */ t(
+                              children: /* @__PURE__ */ t(no, { children: /* @__PURE__ */ t(
                                 J,
                                 {
                                   color: m.palette.gray[400],
@@ -354,7 +355,7 @@ const Fo = ({
                             },
                             `header-${e.index}`
                           );
-                        const l = O[s.index], c = V[e.index + 1], n = l.key === "All" && c?.type === "header", p = r && s.index === se && se >= 0 && s.index < O.length - 1 && !n;
+                        const c = z[s.index], i = T[e.index + 1], n = c.key === "All" && i?.type === "header", p = r && s.index === se && se >= 0 && s.index < z.length - 1 && !n;
                         return /* @__PURE__ */ t(
                           "div",
                           {
@@ -368,22 +369,23 @@ const Fo = ({
                               borderBottom: p ? `1px solid ${m.palette.gray[200]}` : void 0
                             },
                             children: /* @__PURE__ */ t(
-                              _e,
+                              oo,
                               {
-                                allItemKeys: Ke,
+                                allItemKeys: je,
                                 containerRef: oe,
-                                item: l,
+                                item: c,
                                 multiSelection: r,
-                                name: i,
-                                popoverRef: A,
-                                setInputValue: w,
-                                setValue: $,
+                                name: l,
+                                popoverRef: O,
+                                setInputValue: S,
+                                setValue: b,
                                 state: a,
-                                watch: b
+                                tag: He.get(String(c.key)),
+                                watch: w
                               }
                             )
                           },
-                          l.key
+                          c.key
                         );
                       })
                     }
@@ -393,26 +395,26 @@ const Fo = ({
               }
             )
           }
-        ) : !ce && !T ? null : /* @__PURE__ */ t(
+        ) : !ie && !V ? null : /* @__PURE__ */ t(
           de,
           {
             className: "dropdown",
-            id: `popover-${i}-empty`,
+            id: `popover-${l}-empty`,
             offset: 4,
             placement: "bottom start",
-            popoverRef: A,
+            popoverRef: O,
             state: a,
-            triggerRef: C,
-            children: /* @__PURE__ */ R(
+            triggerRef: A,
+            children: /* @__PURE__ */ F(
               he,
               {
                 ...re,
-                $hasStatus: T,
+                $hasStatus: V,
                 $multiSelection: !1,
                 $width: ne,
-                ref: B,
+                ref: C,
                 children: [
-                  ce ? /* @__PURE__ */ t(ro, { children: /* @__PURE__ */ t(
+                  ie ? /* @__PURE__ */ t(so, { children: /* @__PURE__ */ t(
                     J,
                     {
                       color: m.palette.gray[400],
@@ -433,5 +435,5 @@ const Fo = ({
   );
 };
 export {
-  Fo as ComboBoxField
+  ko as ComboBoxField
 };

package/dist/components/inputs/fields/combobox/option/index.d.ts

@@ -1,3 +1,3 @@
 import { IOptionProps } from '../types';
-declare const Option: <T extends object>({ allItemKeys, containerRef, item, multiSelection, name, popoverRef, setInputValue, setValue, state, watch, }: Readonly<IOptionProps<T>>) => JSX.Element;
+declare const Option: <T extends object>({ allItemKeys, containerRef, item, multiSelection, name, popoverRef, setInputValue, setValue, state, tag, watch, }: Readonly<IOptionProps<T>>) => JSX.Element;
 export { Option };