@eyesee/ui-components 0.1.0

package/dist/components/Fields/InputFieldContainer.js

@@ -0,0 +1,115 @@
+import { jsx as n, jsxs as C } from "react/jsx-runtime";
+import { useId as y } from "react";
+import E from "clsx";
+import { useController as P } from "react-hook-form";
+import r from "./InputFieldContainer.module.scss.js";
+const k = (
+  /** @type {const} */
+  ["default", "error"]
+), A = ({
+  id: c,
+  label: i,
+  isRequiredField: f = !1,
+  validationStatus: e = "default",
+  disabled: a = !1,
+  computedInfoText: l,
+  children: d
+}) => {
+  const u = !!l && `${l}`.trim().length > 0;
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      className: E(
+        r.wrapper,
+        e === "error" && r.wrapperError,
+        a && r.disabledField
+      ),
+      children: [
+        i ? /* @__PURE__ */ C("label", { className: r.label, htmlFor: c, children: [
+          i,
+          f ? /* @__PURE__ */ n("span", { className: r.requiredMark, children: "*" }) : null
+        ] }) : null,
+        d,
+        u ? /* @__PURE__ */ n("div", { className: r.infoText, children: l }) : null
+      ]
+    }
+  );
+}, D = (c) => {
+  const i = (e) => {
+    const {
+      status: a = "default",
+      label: l,
+      infoText: d,
+      id: u,
+      name: o,
+      type: m = "text",
+      value: b,
+      defaultValue: S,
+      placeholder: B = "Text",
+      disabled: p = !1,
+      onChange: N = () => {
+      },
+      onBlur: v,
+      inputRef: F,
+      error: s,
+      rules: h,
+      required: q = !1,
+      "aria-label": R,
+      ...T
+    } = e, I = y(), g = u ?? I, V = k.includes(a) ? a : "default", x = s != null && s.message ? "error" : V, j = (s == null ? void 0 : s.message) ?? d, w = !!(h != null && h.required) || q, t = { ...T };
+    return delete t.control, delete t.rules, delete t.invalid, delete t.defaultValues, v && (t.onBlur = v), F && (t.ref = F), /* @__PURE__ */ n(
+      A,
+      {
+        id: g,
+        label: l,
+        isRequiredField: w,
+        validationStatus: x,
+        disabled: p,
+        computedInfoText: j,
+        children: /* @__PURE__ */ n(
+          c,
+          {
+            ...e,
+            id: g,
+            name: o,
+            type: m,
+            value: b,
+            defaultValue: S,
+            placeholder: B,
+            disabled: p,
+            onChange: N,
+            ariaLabel: R,
+            label: l,
+            inputProps: t,
+            validationStatus: x,
+            containerFieldClassName: r.field
+          }
+        )
+      }
+    );
+  }, f = (e) => {
+    const { control: a, name: l, rules: d, defaultValue: u } = e, { field: o, fieldState: m } = P({
+      name: l,
+      control: a,
+      rules: d,
+      defaultValue: u
+    });
+    return /* @__PURE__ */ n(
+      i,
+      {
+        ...e,
+        name: l,
+        value: o.value,
+        onChange: o.onChange,
+        onBlur: o.onBlur,
+        inputRef: o.ref,
+        error: m.error
+      }
+    );
+  };
+  return (e) => e.control && e.name ? /* @__PURE__ */ n(f, { ...e }) : /* @__PURE__ */ n(i, { ...e });
+};
+export {
+  A as InputFieldContainer,
+  D as createField
+};

package/dist/components/Fields/InputFieldContainer.module.scss.js

@@ -0,0 +1,19 @@
+const r = "_wrapper_fkxmy_1", e = "_label_fkxmy_8", _ = "_infoText_fkxmy_9", a = "_requiredMark_fkxmy_29", l = "_wrapperError_fkxmy_37", d = "_field_fkxmy_40", i = "_disabledField_fkxmy_67", o = {
+  wrapper: r,
+  label: e,
+  infoText: _,
+  requiredMark: a,
+  wrapperError: l,
+  field: d,
+  disabledField: i
+};
+export {
+  o as default,
+  i as disabledField,
+  d as field,
+  _ as infoText,
+  e as label,
+  a as requiredMark,
+  r as wrapper,
+  l as wrapperError
+};

package/dist/components/Fields/SelectField/SelectField.js

@@ -0,0 +1,220 @@
+import { jsx as n, jsxs as $, Fragment as pe } from "react/jsx-runtime";
+import { useState as z, useRef as me, useMemo as g } from "react";
+import V from "./SelectField.module.scss.js";
+import { createField as fe } from "../InputFieldContainer.js";
+import { InputFieldContent as M } from "../InputField/InputField.js";
+import { ChevronDownIcon as de } from "../../icons-v2/ChevronDownIcon.js";
+import { ChevronUpIcon as ue } from "../../icons-v2/ChevronUpIcon.js";
+import { LoadingIcon as ge } from "../../icons-v2/LoadingIcon.js";
+import { SearchIcon as Se } from "../../icons-v2/SearchIcon.js";
+import ve from "../../../hooks/useClickOutside.js";
+import { DropdownList as he } from "../../DropdownList/DropdownList.js";
+import { ExpandableItem as ye } from "../../ExpandableItem/ExpandableItem.js";
+import { renderOptionRow as xe } from "./selectOptionRow.js";
+import { SelectFieldTags as Ie } from "./SelectFieldTags.js";
+import { normalizeSelectOptions as Oe, getEffectiveSelectValue as we, getSelectedOptions as Te, getSelectFieldDisplayValue as Fe, filterOptionsByQuery as H, toArrayValue as Q, filterSectionsByQuery as Ce, getNextToggleAllValues as be, getResolvedListItemType as ke, emitSelectChange as De, isOptionSelected as Be, areAllOptionsSelected as Ee } from "./selectUtils.js";
+const Re = ({ isOpen: r }) => r ? /* @__PURE__ */ n(ue, {}) : /* @__PURE__ */ n(de, {}), Ae = ({
+  withSections: r,
+  sections: p,
+  flatOptionList: s,
+  searchValue: i,
+  listItemType: F,
+  value: l,
+  selectAllLabel: v,
+  onSelectOption: C,
+  onToggleAll: h
+}) => {
+  const m = g(
+    () => Ce(p, i),
+    [p, i]
+  ), y = g(
+    () => H(s, i),
+    [s, i]
+  ), b = (t) => Be(l, t), S = (t, c = F, x = b, f = !1) => xe(t, c, x, C, h, f);
+  return /* @__PURE__ */ $(pe, { children: [
+    v ? S(
+      { label: v },
+      "checkbox",
+      () => Ee(l, s),
+      !0
+    ) : null,
+    r ? m.map((t) => /* @__PURE__ */ n(
+      ye,
+      {
+        title: t.sectionTitle,
+        defaultOpen: !0,
+        arrowPositionEnd: !0,
+        children: t.options.map((c) => /* @__PURE__ */ n("div", { children: S(c) }, `${t.sectionTitle}-${String(c.value)}`))
+      },
+      t.sectionTitle
+    )) : y.map((t) => /* @__PURE__ */ n("div", { children: S(t) }, String(t.value)))
+  ] });
+}, Ve = ({
+  id: r,
+  name: p,
+  value: s,
+  defaultValue: i,
+  placeholder: F = "Select",
+  disabled: l = !1,
+  onChange: v = () => {
+  },
+  ariaLabel: C,
+  label: h,
+  inputProps: m = {},
+  options: y = [],
+  size: b = "lg",
+  startIcon: S,
+  onEndIconClick: t,
+  containerFieldClassName: c,
+  multiSelect: x = !1,
+  tags: f = !1,
+  tagsWrap: U = !1,
+  search: q = !1,
+  onSearchChange: k = () => {
+  },
+  onLoadMore: G,
+  optionsLoading: J = !1,
+  selectAllLabel: W = null,
+  listItemType: X = null,
+  dir: Y = "down",
+  dropdownMaxHeight: Z
+}) => {
+  const d = !!(x || f), _ = !!(q || f), P = !!(f && d), ee = ke({
+    multiSelect: x,
+    tags: f,
+    listItemType: X
+  }), [D, B] = z(!1), [I, O] = z(""), L = me(null), w = r ? `${r}-listbox` : void 0;
+  ve(L, () => {
+    B(!1), O("");
+  });
+  const {
+    withSections: te,
+    sections: oe,
+    options: a
+  } = g(() => Oe(y), [y]), u = g(
+    () => we(s, i),
+    [s, i]
+  ), K = g(
+    () => Te(u, a),
+    [u, a]
+  ), ne = Fe(s, i, a), le = g(
+    () => H(a, I),
+    [a, I]
+  ), E = (e) => {
+    const o = d ? e : e[0] ?? "";
+    De(v, o);
+  }, N = (e) => {
+    const o = Q(u), R = o.map((A) => String(A)), j = String(e), ae = R.includes(j) ? o.filter((A) => String(A) !== j) : [...o, e];
+    E(d ? ae : [e]), d || (B(!1), O(""));
+  }, ie = (e) => {
+    if (l) return;
+    const o = Q(u).filter((R) => String(R) !== String(e));
+    E(o);
+  }, re = P && K.length > 0 ? /* @__PURE__ */ n(
+    Ie,
+    {
+      options: K,
+      wrap: U,
+      disabled: l,
+      onRemove: ie
+    }
+  ) : null, T = () => {
+    l || (B((e) => !e), O(""));
+  }, se = () => {
+    d && E(be(u, a));
+  }, ce = () => {
+    if (t) {
+      t();
+      return;
+    }
+    T();
+  };
+  return /* @__PURE__ */ $("div", { className: V.wrapper, ref: L, children: [
+    /* @__PURE__ */ n(
+      M,
+      {
+        id: r,
+        name: p,
+        value: ne,
+        placeholder: F,
+        disabled: l,
+        onChange: () => {
+        },
+        startIcon: S,
+        endIcon: Re({ isOpen: D }),
+        onEndIconClick: ce,
+        onFieldClick: T,
+        onEnter: T,
+        size: b,
+        ariaLabel: C ?? (h ? void 0 : "select field"),
+        label: h,
+        containerFieldClassName: c,
+        content: re,
+        inputProps: {
+          readOnly: !0,
+          role: "combobox",
+          "aria-controls": w,
+          "aria-expanded": D,
+          "aria-haspopup": "listbox",
+          ...m,
+          onKeyDown: (e) => {
+            var o;
+            e.key === " " && !l && (e.preventDefault(), T()), (o = m.onKeyDown) == null || o.call(m, e);
+          }
+        }
+      }
+    ),
+    D ? /* @__PURE__ */ $(
+      he,
+      {
+        id: w,
+        dir: Y,
+        maxHeight: Z,
+        onLoadMore: G,
+        children: [
+          _ ? /* @__PURE__ */ n("div", { className: V.search, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ n(
+            M,
+            {
+              id: w ? `${w}-search` : void 0,
+              name: p ? `${p}-search` : void 0,
+              value: I,
+              placeholder: "Search",
+              disabled: l,
+              ariaLabel: "Search options",
+              size: "sm",
+              onChange: (e) => {
+                O(e.target.value), k == null || k(e.target.value);
+              },
+              containerFieldClassName: c,
+              startIcon: /* @__PURE__ */ n(Se, {}),
+              inputProps: {
+                onKeyDown: (e) => {
+                  if (e.key !== "Enter") return;
+                  const o = le[0];
+                  o && N(o.value);
+                }
+              }
+            }
+          ) }) : null,
+          J ? /* @__PURE__ */ n("span", { className: V.spinning, children: /* @__PURE__ */ n(ge, {}) }) : /* @__PURE__ */ n(
+            Ae,
+            {
+              withSections: te,
+              sections: oe,
+              flatOptionList: a,
+              searchValue: I,
+              listItemType: ee,
+              value: u,
+              selectAllLabel: d ? W : null,
+              onSelectOption: N,
+              onToggleAll: se
+            }
+          )
+        ]
+      }
+    ) : null
+  ] });
+}, Ze = fe(Ve);
+export {
+  Ze as SelectField
+};

package/dist/components/Fields/SelectField/SelectField.module.scss.js

@@ -0,0 +1,11 @@
+const n = "_wrapper_1jahw_1", s = "_search_1jahw_6", a = "_spinning_1jahw_10", p = {
+  wrapper: n,
+  search: s,
+  spinning: a
+};
+export {
+  p as default,
+  s as search,
+  a as spinning,
+  n as wrapper
+};

package/dist/components/Fields/SelectField/SelectFieldTags.js

@@ -0,0 +1,111 @@
+import { jsxs as D, jsx as l } from "react/jsx-runtime";
+import { useRef as h, useState as N, useLayoutEffect as j } from "react";
+import E from "clsx";
+import { Tag as f } from "../../Tag/Tag.js";
+import { Tooltip as V } from "../../Tooltip/Tooltip.js";
+import d from "./SelectFieldTags.module.scss.js";
+const $ = (e) => {
+  const s = window.getComputedStyle(e);
+  return parseFloat(s.columnGap || s.gap) || 0;
+}, C = (e, { containerWidth: s, gap: n, maxRows: i }) => s <= 0 ? !0 : !e.reduce(
+  (t, o) => {
+    if (t.exceeded) return t;
+    if (t.rowWidth === 0)
+      return { ...t, rowWidth: o };
+    if (t.rowWidth + n + o <= s)
+      return { ...t, rowWidth: t.rowWidth + n + o };
+    const a = t.row + 1;
+    return a > i ? { ...t, row: a, exceeded: !0 } : { row: a, rowWidth: o, exceeded: !1 };
+  },
+  { row: 1, rowWidth: 0, exceeded: !1 }
+).exceeded, A = ({ itemWidths: e, overflowWidth: s, containerWidth: n, gap: i, maxRows: u }) => {
+  const t = e.length;
+  if (t === 0) return 0;
+  const o = { containerWidth: n, gap: i, maxRows: u };
+  return C(e, o) ? t : Array.from({ length: t }, (c, m) => t - 1 - m).find(
+    (c) => C([...e.slice(0, c), s], o)
+  ) ?? 0;
+}, B = ({ label: e, onRemove: s, disabled: n }) => /* @__PURE__ */ l(
+  f,
+  {
+    label: e,
+    shape: "pill",
+    state: n ? "disabled" : "default",
+    onDismiss: n ? void 0 : (i) => {
+      i.stopPropagation(), s == null || s(i);
+    }
+  }
+), I = ({
+  options: e = [],
+  wrap: s = !1,
+  disabled: n = !1,
+  onRemove: i = () => {
+  }
+}) => {
+  const u = h(null), t = h(null), o = h(null), [a, g] = N(e.length), c = `+${Math.max(e.length, 1)}`;
+  j(() => {
+    const r = u.current, w = t.current, v = o.current;
+    if (!r || !w || !v) return;
+    const b = () => {
+      const y = Array.from(w.children).map((T) => T.getBoundingClientRect().width), M = v.getBoundingClientRect().width, R = $(r), S = s ? 2 : 1;
+      g(
+        A({
+          itemWidths: y,
+          overflowWidth: M,
+          containerWidth: r.clientWidth,
+          gap: R,
+          maxRows: S
+        })
+      );
+    };
+    b();
+    const x = new ResizeObserver(b);
+    return x.observe(r), () => x.disconnect();
+  }, [e, s, c]);
+  const m = e.slice(0, a), p = Math.max(0, e.length - a), W = e.map((r) => r.label).join(", ");
+  return /* @__PURE__ */ D("div", { className: E(d.tags, s && d.tagsWrap), ref: u, children: [
+    /* @__PURE__ */ l("div", { className: d.tagsMeasure, "aria-hidden": !0, ref: t, children: e.map((r) => /* @__PURE__ */ l(
+      f,
+      {
+        label: r.label,
+        shape: "pill",
+        onDismiss: () => {
+        }
+      },
+      `measure-${String(r.value)}`
+    )) }),
+    /* @__PURE__ */ l("span", { className: d.tagsMeasure, "aria-hidden": !0, ref: o, children: /* @__PURE__ */ l(f, { label: c, shape: "pill", showDismiss: !1 }) }),
+    m.map((r) => /* @__PURE__ */ l(
+      B,
+      {
+        label: r.label,
+        disabled: n,
+        onRemove: () => i(r.value)
+      },
+      String(r.value)
+    )),
+    p > 0 ? /* @__PURE__ */ l(
+      V,
+      {
+        className: d.overflowTag,
+        content: W,
+        position: "top",
+        variant: "light",
+        maxWidth: 280,
+        disabled: n,
+        children: /* @__PURE__ */ l("span", { onClick: (r) => r.stopPropagation(), children: /* @__PURE__ */ l(
+          f,
+          {
+            label: `+${p}`,
+            shape: "pill",
+            showDismiss: !1,
+            state: n ? "disabled" : "default"
+          }
+        ) })
+      }
+    ) : null
+  ] });
+};
+export {
+  I as SelectFieldTags
+};

package/dist/components/Fields/SelectField/SelectFieldTags.module.scss.js

@@ -0,0 +1,13 @@
+const a = "_tags_11rh6_1", s = "_tagsWrap_11rh6_13", t = "_tagsMeasure_11rh6_18", r = "_overflowTag_11rh6_30", e = {
+  tags: a,
+  tagsWrap: s,
+  tagsMeasure: t,
+  overflowTag: r
+};
+export {
+  e as default,
+  r as overflowTag,
+  a as tags,
+  t as tagsMeasure,
+  s as tagsWrap
+};

package/dist/components/Fields/SelectField/selectOptionRow.js

@@ -0,0 +1,92 @@
+import { jsx as a } from "react/jsx-runtime";
+import { Checkbox as h } from "../../Checkbox/Checkbox.js";
+import { CheckmarkLargeIcon as o } from "../../icons-v2/CheckmarkLargeIcon.js";
+import { InfoIcon as f } from "../../icons-v2/InfoIcon.js";
+import { ListItem as m } from "../../ListItem/ListItem.js";
+import { Tooltip as C } from "../../Tooltip/Tooltip.js";
+const v = "var(--color--icon--default--default)", k = /* @__PURE__ */ a(o, { strokeColorOnHover: v }), n = {
+  horizontalSpacing: "xs",
+  verticalSpacing: "none"
+}, T = (i, c, r, l, s, e = !1) => {
+  const d = {
+    trailing: r(i) ? [{ type: "checkmark", icon: k }] : [],
+    trailingDisplay: "always"
+  };
+  switch (c) {
+    case "checkbox":
+      return /* @__PURE__ */ a(
+        u,
+        {
+          ...n,
+          title: i == null ? void 0 : i.label,
+          active: r(i),
+          checked: r(i),
+          disabled: i.disabled,
+          ariaLabel: i == null ? void 0 : i.label,
+          onChange: () => e ? s() : l(i == null ? void 0 : i.value)
+        }
+      );
+    case "info": {
+      const b = [
+        {
+          type: "info",
+          icon: i != null && i.infoTooltip ? /* @__PURE__ */ a(
+            C,
+            {
+              content: i.infoTooltip,
+              position: "bottom",
+              variant: "light",
+              showArrow: !0,
+              children: /* @__PURE__ */ a(f, {})
+            }
+          ) : /* @__PURE__ */ a(f, {})
+        }
+      ];
+      return r(i) && b.push({ type: "checkmark", icon: k }), /* @__PURE__ */ a(
+        m,
+        {
+          ...n,
+          title: i == null ? void 0 : i.label,
+          active: r(i),
+          trailing: b,
+          trailingDisplay: "always",
+          disabled: i.disabled,
+          onClick: () => l(i == null ? void 0 : i.value)
+        }
+      );
+    }
+    default:
+      return /* @__PURE__ */ a(
+        m,
+        {
+          ...n,
+          title: i == null ? void 0 : i.label,
+          disabled: i.disabled,
+          active: r(i),
+          ...d,
+          onClick: () => l(i == null ? void 0 : i.value)
+        }
+      );
+  }
+}, u = ({ title: i, active: c, checked: r, disabled: l, ariaLabel: s, onChange: e }) => /* @__PURE__ */ a(
+  m,
+  {
+    title: i,
+    active: c,
+    ...n,
+    controlItem: /* @__PURE__ */ a(
+      h,
+      {
+        size: "lg",
+        checked: r,
+        disabled: l,
+        "aria-label": s,
+        onChange: e
+      }
+    ),
+    onClick: e
+  }
+);
+export {
+  T as renderOptionRow
+};

package/dist/components/Fields/SelectField/selectUtils.js

@@ -0,0 +1,77 @@
+const f = (e) => typeof e == "string" || typeof e == "number" ? { value: e, label: String(e), disabled: !1 } : {
+  value: e == null ? void 0 : e.value,
+  label: (e == null ? void 0 : e.label) ?? (e == null ? void 0 : e.text) ?? String((e == null ? void 0 : e.value) ?? ""),
+  disabled: !!(e != null && e.disabled),
+  infoTooltip: e == null ? void 0 : e.infoTooltip
+}, c = (e) => Array.isArray(e) ? e.filter(Boolean).map(f) : [], i = (e) => ({
+  sectionTitle: (e == null ? void 0 : e.sectionTitle) ?? (e == null ? void 0 : e.title) ?? "",
+  options: c((e == null ? void 0 : e.options) ?? [])
+}), u = (e) => e && typeof e == "object" && !Array.isArray(e) && Array.isArray(e.options) && (e.sectionTitle != null || e.title != null), d = (e) => {
+  const r = { withSections: !1, sections: [], options: [] };
+  if (e == null) return r;
+  if (!Array.isArray(e) && typeof e == "object") {
+    const t = Object.values(e).filter(Boolean).map(i).filter((n) => n.sectionTitle && n.options.length > 0);
+    return {
+      withSections: t.length > 0,
+      sections: t,
+      options: t.flatMap((n) => n.options)
+    };
+  }
+  if (!Array.isArray(e)) return r;
+  if (e.some(u)) {
+    const t = e.filter(Boolean).map(i).filter((n) => n.sectionTitle && n.options.length > 0);
+    return {
+      withSections: !0,
+      sections: t,
+      options: t.flatMap((n) => n.options)
+    };
+  }
+  return {
+    withSections: !1,
+    sections: [],
+    options: c(e)
+  };
+}, s = (e) => Array.isArray(e) ? e.filter((r) => r != null && `${r}`.length > 0) : e == null || e === "" ? [] : [e], y = (e, r) => e.find((t) => String(t.value) === String(r)), a = (e) => s(e).length > 0, g = (e) => {
+  if (e != null)
+    return Array.isArray(e) ? e.length > 0 ? e : void 0 : typeof e == "object" && "value" in e ? e.value : e;
+}, S = (e, r) => {
+  if (a(e)) return e;
+  const t = g(r);
+  return t == null || Array.isArray(t) && t.length === 0 ? e : t;
+}, A = (e, r) => s(e).map((t) => y(r, t)).filter(Boolean), b = (e, r) => A(e, r).map((t) => t.label).join(", "), m = (e, r, t) => {
+  const n = S(e, r), l = b(n, t);
+  return l || (!a(e) && r && typeof r == "object" && !Array.isArray(r) ? r.label ?? r.text ?? "" : "");
+}, v = (e, r) => {
+  e(r);
+}, h = (e, r) => {
+  const t = `${r}`.trim().toLowerCase();
+  return t ? e.filter((n) => {
+    var l;
+    return (l = n == null ? void 0 : n.label) == null ? void 0 : l.toLowerCase().includes(t);
+  }) : e;
+}, w = (e, r) => e.map((t) => ({
+  ...t,
+  options: h(t.options, r)
+})).filter((t) => t.options.length > 0), o = (e, r) => {
+  if (r.length === 0) return !1;
+  const t = s(e).map((n) => String(n));
+  return r.every((n) => t.includes(String(n.value)));
+}, B = (e, r) => o(e, r) ? [] : r.map((t) => t.value), T = ({ multiSelect: e, tags: r, listItemType: t }) => t || (e || r ? "checkbox" : null), O = (e, r) => s(e).map((t) => String(t)).includes(String(r == null ? void 0 : r.value));
+export {
+  o as areAllOptionsSelected,
+  v as emitSelectChange,
+  h as filterOptionsByQuery,
+  w as filterSectionsByQuery,
+  S as getEffectiveSelectValue,
+  B as getNextToggleAllValues,
+  y as getOptionByValue,
+  T as getResolvedListItemType,
+  m as getSelectFieldDisplayValue,
+  b as getSelectedLabelsPreview,
+  A as getSelectedOptions,
+  a as hasSelectValue,
+  O as isOptionSelected,
+  d as normalizeSelectOptions,
+  g as resolveDefaultSelectValue,
+  s as toArrayValue
+};