@fluidattacks/design 8.1.0 → 8.2.0

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

@@ -1,8 +1,433 @@
-import "react/jsx-runtime";
-import "../../../../../vendor-i-lggy4V.mjs";
-import "react";
-import "styled-components";
-import { bX as b } from "../../../../../components-LCJjFofC.mjs";
+import { jsx as o, jsxs as z } from "react/jsx-runtime";
+import { useVirtualizer as He } from "../../../../../node_modules/@tanstack/react-virtual/dist/esm/index.js";
+import { useState as v, useMemo as I, 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 { 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 { Icon as q } from "../../../../icon/index.js";
+import { IconButton as no } 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 so } from "../../../../../hooks/use-click-outside.js";
+const zo = ({
+  field: u,
+  disabled: h = !1,
+  disabledKeys: R,
+  error: me,
+  helpLink: ye,
+  helpLinkText: ge,
+  helpText: ve,
+  label: P,
+  loadingItems: xe,
+  name: a,
+  multiSelection: r = !1,
+  items: n,
+  onBlur: L,
+  onChange: f,
+  onClear: Q,
+  placeholder: $e,
+  clearable: be = !1,
+  emptyMessage: X,
+  statusMessage: Z,
+  required: we,
+  setValue: x,
+  tooltip: Se,
+  value: Be,
+  watch: F,
+  weight: Ce
+}) => {
+  const m = Qe(), D = h ? void 0 : me, d = u?.value ?? Be, [G, $] = v(
+    n.find((e) => e.value === d)?.name ?? ""
+  ), [_, k] = v(d), j = (xe === !1 || !d) && !r, N = I(
+    () => j ? n.find((e) => e.value === d)?.name ?? "" : "",
+    [j, d, n]
+  ), [Ae, Oe] = v(d), [ze, Ie] = v(N);
+  j && (d !== Ae || N !== ze) && (Oe(d), Ie(N), $(N), k(d ?? ""));
+  const [Re, H] = v(n), [ee, b] = v(!1), { contains: M } = Ye({ sensitivity: "base" }), U = y(null), W = y(null), w = y(null), S = y(null), oe = y(null), B = y(null), Y = y(/* @__PURE__ */ new Set()), Fe = I(() => {
+    const e = Y.current, s = Array.from(R ?? []), l = n.some((t) => t.group !== void 0);
+    return n.toSorted((t, p) => {
+      if (t.value === "All") return -1;
+      if (p.value === "All") return 1;
+      const E = s.includes(t.value), K = s.includes(p.value);
+      if (l) {
+        const A = t.group ?? "", O = p.group ?? "";
+        if (!t.group && p.group) return -1;
+        if (t.group && !p.group) return 1;
+        if (A !== O)
+          return A.localeCompare(O);
+        if (E && !K) return 1;
+        if (!E && K) return -1;
+        if (r) {
+          const ue = e.has(t.value), fe = e.has(p.value);
+          if (ue && !fe) return -1;
+          if (!ue && fe) return 1;
+        }
+        return t.name.localeCompare(p.name);
+      }
+      if (E && !K) return 1;
+      if (!E && K) return -1;
+      if (r) {
+        const A = e.has(t.value), O = e.has(p.value);
+        return A && !O ? -1 : !A && O ? 1 : t.name.localeCompare(p.name);
+      }
+      return 0;
+    }).map(
+      (t) => M(t.name, G) || ee ? /* @__PURE__ */ o(
+        Pe,
+        {
+          "aria-label": t.value,
+          hrefLang: t.href,
+          textValue: t.tag,
+          children: t.name
+        },
+        t.value
+      ) : null
+    );
+  }, [M, R, G, n, r, ee]), De = g(
+    (e) => {
+      const s = e.split(/,|\s/u).slice(-1)[0].trim();
+      $(r ? s : e), e === "" || e.endsWith(",") ? b(!0) : (b(!1), k((l) => {
+        const c = e === "" ? "" : l;
+        return u && u.onChange(c), f && f(e), c;
+      }), H(
+        n.filter(
+          (l) => M(l.name, r ? s : e)
+        )
+      ));
+    },
+    [M, n, u, r, f]
+  ), Ge = g(
+    (e) => {
+      $(n.find((s) => s.value === e)?.name ?? ""), k(e ? String(e) : ""), u && u.onChange(e), f && f(e ? String(e) : ""), H(n);
+    },
+    [n, u, f]
+  ), te = g(
+    (e) => {
+      e.key === "Enter" && e.preventDefault(), b(!1);
+    },
+    []
+  ), ke = g(() => {
+    L && L(), u && u.onBlur();
+  }, [u, L]), Ne = g(() => {
+    b(!0);
+  }, []), i = Je({
+    allowsCustomValue: r,
+    allowsEmptyCollection: !0,
+    disabledKeys: R,
+    inputValue: G,
+    items: Re,
+    menuTrigger: "focus",
+    shouldCloseOnBlur: !r,
+    selectedKey: _,
+    onBlur: ke,
+    onInputChange: De,
+    onKeyDown: te,
+    onKeyUp: Ne,
+    onOpenChange(e, s) {
+      if (e && r && F) {
+        const l = F(`${a}Options`) ?? [], c = Array.isArray(l) ? l : l ? [l] : [];
+        Y.current = new Set(c.filter(Boolean));
+      }
+      b(
+        e && (s === "manual" || s === "focus")
+      ), e && s !== "focus" && requestAnimationFrame(() => {
+        U.current?.focus();
+      });
+    },
+    onSelectionChange: r ? void 0 : Ge,
+    children: Fe
+  }), Me = g(() => {
+    $(""), k(null), H(n), i.setSelectedKey(null), i.setInputValue(""), f && f(""), r && x && (x(`${a}Options`, []), x(`${a}CheckAll`, "")), Q?.();
+  }, [n, r, a, Q, f, x, i]), {
+    buttonProps: Ve,
+    inputProps: Te,
+    listBoxProps: Ee
+  } = We(
+    {
+      inputValue: G,
+      buttonRef: W,
+      id: a,
+      inputRef: U,
+      label: P ?? a,
+      listBoxRef: w,
+      name: a,
+      placeholder: $e,
+      popoverRef: B
+    },
+    i
+  ), { listBoxProps: re } = qe(Ee, i, w), { buttonProps: Ke } = Ue(Ve, W), { width: ne } = S.current?.getBoundingClientRect() ?? {
+    width: 240
+  };
+  so(S, () => {
+    i.isOpen && !r && i.close();
+  }, [B]);
+  const C = Array.from(i.collection), se = r ? C.findLastIndex(
+    (e) => e.key === "All" || Y.current.has(String(e.key))
+  ) : -1, Le = I(() => n.map((e) => e.value), [n]), le = I(
+    () => new Map(n.map((e) => [e.value, e.group])),
+    [n]
+  ), V = I(() => C.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;
+    },
+    { result: [], currentGroup: void 0 }
+  ).result, [C, le]), ie = He({
+    count: V.length,
+    estimateSize: (e) => V[e].type === "header" ? 44 : 28,
+    getScrollElement: () => w.current,
+    useFlushSync: !1
+  }), ae = i.isOpen && !h, T = ae && !!Z, ce = ae && n.length === 0 && !!X, je = g(
+    (e) => {
+      e.preventDefault();
+    },
+    []
+  ), pe = T ? (
+    // A listbox only owns options, so the row itself must stay presentational
+    /* @__PURE__ */ o(eo, { onMouseDown: je, role: "presentation", children: /* @__PURE__ */ o("div", { "aria-live": "polite", role: "status", children: /* @__PURE__ */ o(
+      J,
+      {
+        color: m.palette.gray[400],
+        size: "sm",
+        textOverflow: "auto",
+        whiteSpace: "wrap",
+        children: Z
+      }
+    ) }) })
+  ) : null;
+  return /* @__PURE__ */ z(
+    Xe,
+    {
+      containerRef: oe,
+      error: D,
+      helpLink: ye,
+      helpLinkText: ge,
+      helpText: ve,
+      htmlFor: a,
+      id: `combobox-${a}`,
+      label: P,
+      required: we,
+      tooltip: Se,
+      weight: Ce,
+      children: [
+        /* @__PURE__ */ z(
+          Ze,
+          {
+            className: `${h ? "disabled" : ""} ${D ? "error" : ""}`,
+            ref: S,
+            children: [
+              /* @__PURE__ */ o(
+                "input",
+                {
+                  ...Te,
+                  "aria-invalid": D ? "true" : "false",
+                  "aria-label": a,
+                  disabled: h,
+                  onKeyDown: te,
+                  ref: U
+                }
+              ),
+              D ? /* @__PURE__ */ o(
+                q,
+                {
+                  icon: "exclamation-circle",
+                  iconClass: "error-icon",
+                  iconColor: m.palette.error[500],
+                  iconSize: "lg"
+                }
+              ) : void 0,
+              be && !h && (r ? (F?.(`${a}Options`)?.length ?? 0) > 0 : _) ? /* @__PURE__ */ o(
+                no,
+                {
+                  icon: "xmark",
+                  iconColor: m.palette.gray[400],
+                  iconSize: "sm",
+                  iconType: "fa-light",
+                  onClick: Me,
+                  px: 0.125,
+                  py: 0.125,
+                  type: "reset",
+                  variant: "ghost"
+                }
+              ) : void 0,
+              /* @__PURE__ */ z(
+                oo,
+                {
+                  ...Ke,
+                  $variant: "ghost",
+                  className: `action ${i.isOpen && !h ? "open" : "closed"}`,
+                  disabled: h,
+                  px: 0.125,
+                  py: 0.125,
+                  ref: W,
+                  type: "button",
+                  children: [
+                    /* @__PURE__ */ o("div", { className: "chevron-down", children: /* @__PURE__ */ o(
+                      q,
+                      {
+                        clickable: !1,
+                        icon: "chevron-down",
+                        iconColor: m.palette.gray[400],
+                        iconSize: "sm",
+                        iconType: "fa-light"
+                      }
+                    ) }),
+                    /* @__PURE__ */ o("div", { className: "chevron-up", children: /* @__PURE__ */ o(
+                      q,
+                      {
+                        clickable: !1,
+                        icon: "chevron-up",
+                        iconColor: m.palette.gray[400],
+                        iconSize: "sm",
+                        iconType: "fa-light"
+                      }
+                    ) })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        i.isOpen && i.collection.size > 0 && !h ? /* @__PURE__ */ o(
+          de,
+          {
+            className: "dropdown",
+            id: `popover-${a}`,
+            offset: 4,
+            placement: "bottom start",
+            popoverRef: B,
+            state: i,
+            triggerRef: S,
+            children: /* @__PURE__ */ z(
+              he,
+              {
+                ...re,
+                $hasStatus: T,
+                $multiSelection: r && !Array.from(R ?? []).includes("All"),
+                $width: ne,
+                ref: w,
+                children: [
+                  /* @__PURE__ */ o(
+                    "div",
+                    {
+                      style: {
+                        height: `${ie.getTotalSize()}px`,
+                        position: "relative"
+                      },
+                      children: ie.getVirtualItems().map((e) => {
+                        const s = V[e.index];
+                        if (s.type === "header")
+                          return /* @__PURE__ */ o(
+                            "div",
+                            {
+                              style: {
+                                position: "absolute",
+                                top: 0,
+                                left: 0,
+                                width: "100%",
+                                height: `${e.size}px`,
+                                transform: `translateY(${e.start}px)`
+                              },
+                              children: /* @__PURE__ */ o(to, { children: /* @__PURE__ */ o(
+                                J,
+                                {
+                                  color: m.palette.gray[400],
+                                  fontWeight: "bold",
+                                  size: "md",
+                                  children: s.group
+                                }
+                              ) })
+                            },
+                            `header-${e.index}`
+                          );
+                        const l = C[s.index], c = V[e.index + 1], t = l.key === "All" && c?.type === "header", p = r && s.index === se && se >= 0 && s.index < C.length - 1 && !t;
+                        return /* @__PURE__ */ o(
+                          "div",
+                          {
+                            style: {
+                              position: "absolute",
+                              top: 0,
+                              left: 0,
+                              width: "100%",
+                              height: `${e.size}px`,
+                              transform: `translateY(${e.start}px)`,
+                              borderBottom: p ? `1px solid ${m.palette.gray[200]}` : void 0
+                            },
+                            children: /* @__PURE__ */ o(
+                              _e,
+                              {
+                                allItemKeys: Le,
+                                containerRef: oe,
+                                item: l,
+                                multiSelection: r,
+                                name: a,
+                                popoverRef: B,
+                                setInputValue: $,
+                                setValue: x,
+                                state: i,
+                                watch: F
+                              }
+                            )
+                          },
+                          l.key
+                        );
+                      })
+                    }
+                  ),
+                  pe
+                ]
+              }
+            )
+          }
+        ) : !ce && !T ? null : /* @__PURE__ */ o(
+          de,
+          {
+            className: "dropdown",
+            id: `popover-${a}-empty`,
+            offset: 4,
+            placement: "bottom start",
+            popoverRef: B,
+            state: i,
+            triggerRef: S,
+            children: /* @__PURE__ */ z(
+              he,
+              {
+                ...re,
+                $hasStatus: T,
+                $multiSelection: !1,
+                $width: ne,
+                ref: w,
+                children: [
+                  ce ? /* @__PURE__ */ o(ro, { children: /* @__PURE__ */ o(
+                    J,
+                    {
+                      color: m.palette.gray[400],
+                      size: "md",
+                      textOverflow: "auto",
+                      whiteSpace: "wrap",
+                      children: X
+                    }
+                  ) }) : null,
+                  pe
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
 export {
-  b as ComboBoxField
+  zo as ComboBoxField
 };

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

@@ -1,6 +1,96 @@
-import "react/jsx-runtime";
-import "../../../../vendor-i-lggy4V.mjs";
-import { D as t } from "../../../../components-LCJjFofC.mjs";
+import { jsx as f } from "react/jsx-runtime";
+import { Controller as v } from "../../../../node_modules/react-hook-form/dist/index.esm.js";
+import { ComboBoxField as W } from "./field/index.js";
+const S = ({
+  control: m,
+  disabled: x = !1,
+  disabledKeys: j,
+  error: X,
+  helpLink: B,
+  helpLinkText: C,
+  helpText: F,
+  label: z,
+  loadingItems: A,
+  name: r,
+  multiSelection: D,
+  items: E,
+  onBlur: G,
+  onChange: H,
+  onClear: J,
+  placeholder: N,
+  clearable: O = !1,
+  emptyMessage: P,
+  required: o,
+  setValue: Y,
+  statusMessage: Q,
+  tooltip: R,
+  value: U,
+  watch: Z,
+  weight: V
+}) => m ? /* @__PURE__ */ f(
+  v,
+  {
+    control: m,
+    name: r,
+    render: ({ field: _, fieldState: $ }) => /* @__PURE__ */ f(
+      W,
+      {
+        clearable: O,
+        disabled: x,
+        disabledKeys: j,
+        emptyMessage: P,
+        error: $.error?.message,
+        field: _,
+        helpLink: B,
+        helpLinkText: C,
+        helpText: F,
+        items: E,
+        label: z,
+        loadingItems: A,
+        multiSelection: D,
+        name: r,
+        onBlur: G,
+        onChange: H,
+        onClear: J,
+        placeholder: N,
+        required: o,
+        setValue: Y,
+        statusMessage: Q,
+        tooltip: R,
+        value: U,
+        watch: Z,
+        weight: V
+      }
+    ),
+    rules: { required: o }
+  }
+) : /* @__PURE__ */ f(
+  W,
+  {
+    clearable: O,
+    disabled: x,
+    disabledKeys: j,
+    emptyMessage: P,
+    error: X,
+    helpLink: B,
+    helpLinkText: C,
+    helpText: F,
+    items: E,
+    label: z,
+    loadingItems: A,
+    multiSelection: D,
+    name: r,
+    onBlur: G,
+    onChange: H,
+    onClear: J,
+    placeholder: N,
+    required: o,
+    statusMessage: Q,
+    tooltip: R,
+    value: U,
+    weight: V
+  }
+);
 export {
-  t as ComboBox
+  S as ComboBox
 };

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

@@ -1,8 +1,123 @@
-import "react/jsx-runtime";
-import "../../../../../vendor-i-lggy4V.mjs";
-import "react";
-import "styled-components";
-import { bW as a } from "../../../../../components-LCJjFofC.mjs";
+import { jsx as d, jsxs as U } from "react/jsx-runtime";
+import G from "../../../../../_virtual/isEqual.js";
+import { useRef as H, useMemo as g, useCallback as y } from "react";
+import { useOption as J } from "../../../../../node_modules/react-aria/dist/private/listbox/useOption.js";
+import { useTheme as Q } from "styled-components";
+import { StyledOption as W } from "../styles.js";
+import { Checkbox as j } from "../../../../checkbox/index.js";
+import { Icon as X } from "../../../../icon/index.js";
+import { Link as Y } from "../../../../link/index.js";
+import { Tag as Z } from "../../../../tag/index.js";
+import "../../../../typography/heading/index.js";
+import "../../../../typography/span/index.js";
+import { Text as _ } from "../../../../typography/text/index.js";
+import { useClickOutside as I } from "../../../../../hooks/use-click-outside.js";
+import { openUrl as V } from "../../../../../utils/open-url.js";
+const yo = ({
+  allItemKeys: L,
+  containerRef: T,
+  item: o,
+  multiSelection: p,
+  name: e,
+  popoverRef: D,
+  setInputValue: t,
+  setValue: n,
+  state: c,
+  watch: f
+}) => {
+  const K = Q(), C = H(null), h = o.props.hrefLang, A = c.disabledKeys, i = L.filter(
+    (r) => !Array.from(A).includes(r) && r !== "All"
+  ), { optionProps: q, isSelected: O, isFocused: w, isDisabled: $ } = J(
+    { key: o.key },
+    c,
+    C
+  ), k = g(() => c.collection.getItem("All")?.rendered?.toString(), [c.collection]), z = [
+    O ? "selected" : "",
+    w ? "focused" : "",
+    $ ? "disabled" : ""
+  ].join(" "), m = y(
+    (r) => {
+      if (i.length > 0 && r.length === i.length && G([...i].sort(), [...r].sort()) && !Array.from(A).includes("All") && k)
+        n?.(`${e}CheckAll`, k), t(k);
+      else {
+        n?.(`${e}CheckAll`, "");
+        const l = [...r].sort();
+        t(
+          l.length <= 2 ? l.join(", ") : `${l.slice(0, 2).join(", ")}, +${l.length - 2} more`
+        );
+      }
+    },
+    [k, A, i, e, t, n]
+  ), F = y(
+    (r) => {
+      if (r.target.checked) {
+        const a = [...i].sort();
+        n?.(`${e}Options`, a), n?.(`${e}CheckAll`, r.target.value), t(r.target.value);
+      } else
+        n?.(`${e}Options`, []), n?.(`${e}CheckAll`, ""), t("");
+    },
+    [i, e, t, n]
+  ), B = y(
+    (r) => {
+      const a = r.target.value, l = f?.(`${e}Options`) ?? [], u = Array.isArray(l) ? l : l ? [l] : [], v = r.target.checked ? [...u, a] : u.filter((R) => R !== a);
+      n?.(`${e}Options`, v), m(v);
+    },
+    [e, n, f, m]
+  ), s = f?.(`${e}Options`), b = g(() => Array.isArray(s) ? s : typeof s == "string" && s ? [s] : [], [s]), E = g(
+    () => b.includes(o.key.toString()),
+    [b, o.key]
+  ), S = f?.(`${e}CheckAll`), M = g(() => !!S, [S]), N = o.key === "All" ? /* @__PURE__ */ d(
+    j,
+    {
+      checked: M,
+      label: o.rendered?.toString(),
+      name: `${e}CheckAll`,
+      onChange: F,
+      value: o.rendered?.toString()
+    }
+  ) : /* @__PURE__ */ d(
+    j,
+    {
+      checked: E,
+      label: o.rendered?.toString(),
+      name: `${e}Options`,
+      onChange: B,
+      value: o.key.toString()
+    }
+  ), x = p && !$ ? N : /* @__PURE__ */ d(
+    _,
+    {
+      color: K.palette.gray[800],
+      size: "md",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      children: o.rendered
+    }
+  ), P = y(
+    (r) => {
+      r.preventDefault(), t(o.rendered?.toString() ?? ""), c.setSelectedKey(o.key), requestAnimationFrame(() => {
+        c.setOpen(!1);
+      }), V(h);
+    },
+    [h, o.key, o.rendered, c, t]
+  );
+  return I(D, () => {
+    p && c.close();
+  }, [T]), /* @__PURE__ */ U(
+    W,
+    {
+      ...!p && !h ? q : {},
+      $multiSelection: p,
+      className: z,
+      ref: C,
+      children: [
+        h ? /* @__PURE__ */ d(Y, { href: h, onClick: P, children: x }) : x,
+        O && !$ && !p ? /* @__PURE__ */ d(X, { icon: "check", iconSize: "sm", iconType: "fa-light" }) : void 0,
+        o.rendered === o.textValue ? void 0 : /* @__PURE__ */ d(Z, { tagLabel: o.textValue, variant: "inactive" })
+      ]
+    }
+  );
+};
 export {
-  a as Option
+  yo as Option
 };