@eyesee/ui-components 0.1.0 → 0.1.2

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

@@ -1,23 +1,23 @@
-const _ = "_field_11l7r_1", n = "_lg_11l7r_5", l = "_md_11l7r_9", c = "_sm_11l7r_13", t = "_xs_11l7r_17", s = "_icon_11l7r_21", o = "_clickable_11l7r_27", e = "_content_11l7r_34", d = "_hiddenInput_11l7r_42", i = {
+const _ = "_field_m5w59_1", n = "_lg_m5w59_5", c = "_md_m5w59_9", t = "_sm_m5w59_13", s = "_xs_m5w59_17", o = "_icon_m5w59_21", e = "_clickable_m5w59_27", m = "_content_m5w59_34", l = "_hiddenInput_m5w59_42", d = {
   field: _,
   lg: n,
-  md: l,
-  sm: c,
-  xs: t,
-  icon: s,
-  clickable: o,
-  content: e,
-  hiddenInput: d
+  md: c,
+  sm: t,
+  xs: s,
+  icon: o,
+  clickable: e,
+  content: m,
+  hiddenInput: l
 };
 export {
-  o as clickable,
-  e as content,
-  i as default,
+  e as clickable,
+  m as content,
+  d as default,
   _ as field,
-  d as hiddenInput,
-  s as icon,
+  l as hiddenInput,
+  o as icon,
   n as lg,
-  l as md,
-  c as sm,
-  t as xs
+  c as md,
+  t as sm,
+  s as xs
 };

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

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

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

@@ -0,0 +1,42 @@
+import { useState as d, useLayoutEffect as w } from "react";
+const f = 8, p = 320, g = () => parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--spacing--2xs")) || 4;
+function h(s, l, o, a) {
+  var n;
+  const c = s.current;
+  if (!c) return null;
+  const i = g(), e = c.getBoundingClientRect(), r = ((n = l.current) == null ? void 0 : n.getBoundingClientRect().height) ?? p, m = r + i + f;
+  let t = o;
+  o === "down" && window.innerHeight - e.bottom < m && e.top >= r + i ? t = "up" : o === "up" && e.top < m && (t = "down");
+  const u = {
+    resolvedDir: t,
+    left: e.left,
+    minWidth: e.width
+  };
+  return a && (t === "down" ? u.top = e.bottom + i : u.bottom = window.innerHeight - e.top + i), u;
+}
+function L({
+  open: s,
+  anchorRef: l,
+  dropdownRef: o,
+  dir: a = "down",
+  fixed: c = !1
+}) {
+  const [i, e] = d(null);
+  return w(() => {
+    if (!s)
+      return e(null), () => {
+      };
+    let r = 0;
+    const m = () => e(h(l, o, a, c)), t = () => {
+      cancelAnimationFrame(r), r = requestAnimationFrame(m);
+    };
+    t(), window.addEventListener("resize", t), window.addEventListener("scroll", t, !0);
+    const u = o.current, n = u && typeof ResizeObserver < "u" ? new ResizeObserver(t) : null;
+    return n == null || n.observe(u), () => {
+      cancelAnimationFrame(r), window.removeEventListener("resize", t), window.removeEventListener("scroll", t, !0), n == null || n.disconnect();
+    };
+  }, [s, l, o, a, c]), i;
+}
+export {
+  L as useSelectFieldDropdownPosition
+};

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

@@ -1,13 +1,13 @@
-const e = "_field_1rid6_1", t = "_input_1rid6_7", d = "_expandableField_1rid6_11", n = "_buttonWrapper_1rid6_19", i = {
+const e = "_field_1e7vo_1", t = "_input_1e7vo_7", n = "_expandableField_1e7vo_11", o = "_buttonWrapper_1e7vo_19", p = {
   field: e,
   input: t,
-  expandableField: d,
-  buttonWrapper: n
+  expandableField: n,
+  buttonWrapper: o
 };
 export {
-  n as buttonWrapper,
-  i as default,
-  d as expandableField,
+  o as buttonWrapper,
+  p as default,
+  n as expandableField,
   e as field,
   t as input
 };

package/dist/components/ListItem/ListItem.js

@@ -1,21 +1,22 @@
-import { jsxs as x, jsx as e, Fragment as y } from "react/jsx-runtime";
-import b from "clsx";
-import { EllipsisTooltip as v } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { jsxs as x, jsx as e, Fragment as b } from "react/jsx-runtime";
+import A from "clsx";
+import { EllipsisTooltip as y } from "../EllipsisTooltip/EllipsisTooltip.js";
 import a from "./ListItem.module.scss.js";
 const F = ({
-  item: T = null,
+  item: v = null,
   controlItem: r = null,
   customItem: n = null,
   title: i = null,
   description: s = null,
   trailing: t = [],
   trailingDisplay: c = "hover",
-  active: D = !1,
-  onClick: w,
+  active: T = !1,
+  onClick: C,
   verticalSpacing: p = "xs",
   horizontalSpacing: m = "xs",
-  variant: C = "fill",
-  disabled: d = !1
+  variant: D = "fill",
+  disabled: d = !1,
+  role: w
 }) => {
   const o = (t == null ? void 0 : t.length) > 0, h = !!i, u = !!s, N = [
     r && "auto",
@@ -26,34 +27,35 @@ const F = ({
   return /* @__PURE__ */ x(
     "div",
     {
-      className: b(a.listItem, a[C], d && a.disabled),
+      role: w,
+      className: A(a.listItem, a[D], d && a.disabled),
       style: {
         "--minHeight": !s && p === "none" ? "var(--scale--lg)" : "auto",
         "--verticalSpacing": p === "none" ? "0px" : `var(--spacing--${p})`,
         "--horizontalSpacing": m === "none" ? "0px" : `var(--spacing--${m})`,
         "--gridTemplateColumns": N
       },
-      "data-active": D || null,
+      "data-active": T || null,
       onClick: d ? () => {
-      } : w,
+      } : C,
       children: [
-        r && /* @__PURE__ */ e(y, { children: r }),
-        n && /* @__PURE__ */ e(y, { children: n }),
+        r && /* @__PURE__ */ e("div", { onClick: (l) => l.stopPropagation(), children: r }),
+        n && /* @__PURE__ */ e(b, { children: n }),
         /* @__PURE__ */ x("div", { className: a.textWrapper, children: [
-          h && /* @__PURE__ */ e(v, { showArrow: !0, content: i, className: a.title, children: i }),
-          u && /* @__PURE__ */ e(v, { showArrow: !0, content: s, className: a.description, children: s })
+          h && /* @__PURE__ */ e(y, { showArrow: !0, content: i, className: a.title, children: i }),
+          u && /* @__PURE__ */ e(y, { showArrow: !0, content: s, className: a.description, children: s })
         ] }),
         o && /* @__PURE__ */ e("div", { className: a.trailing, children: t.map((l) => {
-          const j = (l == null ? void 0 : l.trailingDisplay) || c, k = (l == null ? void 0 : l.trailingDisplayOnSelectedItem) || "always", g = d || (l == null ? void 0 : l.disabled);
+          const k = (l == null ? void 0 : l.trailingDisplay) || c, j = (l == null ? void 0 : l.trailingDisplayOnSelectedItem) || "always", g = d || (l == null ? void 0 : l.disabled);
           return /* @__PURE__ */ e(
             "span",
             {
-              "data-trailing-display": j,
-              "data-trailing-display-on-selected-item": k,
+              "data-trailing-display": k,
+              "data-trailing-display-on-selected-item": j,
               "data-trailing-disabled": g || null,
               onClick: ($) => {
                 var f;
-                $.stopPropagation(), !g && ((f = l == null ? void 0 : l.onClick) == null || f.call(l, T));
+                $.stopPropagation(), !g && ((f = l == null ? void 0 : l.onClick) == null || f.call(l, v));
               },
               children: l.icon
             },