@eyesee/ui-components 0.1.0 → 0.1.1

package/dist/components/Button/Button.module.scss.js

@@ -1,51 +1,53 @@
-const n = "_fullWidth_1l23j_1", t = "_button_1l23j_4", o = "_wrapper_1l23j_8", _ = "_buttonContent_1l23j_25", l = "_icon_1l23j_25", s = "_buttonArrow_1l23j_26", c = "_buttonText_1l23j_34", r = "_iconOnly_1l23j_58", u = "_buttonContentDropdown_1l23j_61", e = "_hasDropdown_1l23j_67", j = "_lg_1l23j_83", x = "_isIcon_1l23j_86", i = "_md_1l23j_90", a = "_sm_1l23j_97", b = "_xs_1l23j_104", d = "_xxs_1l23j_111", p = "_xxxs_1l23j_118", w = "_primary_1l23j_128", y = "_fill_1l23j_128", m = "_outline_1l23j_159", f = "_blank_1l23j_172", h = "_secondary_1l23j_219", C = "_neutral_1l23j_310", D = {
-  fullWidth: n,
-  button: t,
+const t = "_fullWidth_1bpdq_1", n = "_button_1bpdq_4", o = "_wrapper_1bpdq_8", _ = "_buttonContent_1bpdq_25", s = "_icon_1bpdq_25", d = "_buttonArrow_1bpdq_26", b = "_buttonText_1bpdq_34", c = "_iconOnly_1bpdq_58", p = "_buttonContentDropdown_1bpdq_61", r = "_hasDropdown_1bpdq_67", e = "_lg_1bpdq_83", l = "_isIcon_1bpdq_86", u = "_md_1bpdq_90", i = "_sm_1bpdq_97", q = "_xs_1bpdq_104", x = "_xxs_1bpdq_111", a = "_xxxs_1bpdq_118", w = "_primary_1bpdq_128", y = "_fill_1bpdq_128", m = "_outline_1bpdq_159", f = "_blank_1bpdq_172", h = "_secondary_1bpdq_219", C = "_destructive_1bpdq_310", D = "_neutral_1bpdq_401", g = {
+  fullWidth: t,
+  button: n,
   wrapper: o,
   buttonContent: _,
-  icon: l,
-  buttonArrow: s,
-  buttonText: c,
-  iconOnly: r,
-  buttonContentDropdown: u,
-  hasDropdown: e,
-  lg: j,
-  isIcon: x,
-  md: i,
-  sm: a,
-  xs: b,
-  xxs: d,
-  xxxs: p,
+  icon: s,
+  buttonArrow: d,
+  buttonText: b,
+  iconOnly: c,
+  buttonContentDropdown: p,
+  hasDropdown: r,
+  lg: e,
+  isIcon: l,
+  md: u,
+  sm: i,
+  xs: q,
+  xxs: x,
+  xxxs: a,
   primary: w,
   fill: y,
   outline: m,
   blank: f,
   secondary: h,
-  neutral: C
+  destructive: C,
+  neutral: D
 };
 export {
   f as blank,
-  t as button,
-  s as buttonArrow,
+  n as button,
+  d as buttonArrow,
   _ as buttonContent,
-  u as buttonContentDropdown,
-  c as buttonText,
-  D as default,
+  p as buttonContentDropdown,
+  b as buttonText,
+  g as default,
+  C as destructive,
   y as fill,
-  n as fullWidth,
-  e as hasDropdown,
-  l as icon,
-  r as iconOnly,
-  x as isIcon,
-  j as lg,
-  i as md,
-  C as neutral,
+  t as fullWidth,
+  r as hasDropdown,
+  s as icon,
+  c as iconOnly,
+  l as isIcon,
+  e as lg,
+  u as md,
+  D as neutral,
   m as outline,
   w as primary,
   h as secondary,
-  a as sm,
+  i as sm,
   o as wrapper,
-  b as xs,
-  d as xxs,
-  p as xxxs
+  q as xs,
+  x as xxs,
+  a as xxxs
 };

package/dist/components/DropdownList/DropdownList.js

@@ -1,37 +1,40 @@
-import { jsx as u } from "react/jsx-runtime";
-import f from "clsx";
+import { jsx as g } from "react/jsx-runtime";
+import w from "clsx";
 import r from "./DropdownList.module.scss.js";
-const h = ({
+const a = ({
   children: e,
-  align: n = "start",
-  className: s,
+  align: s = "start",
+  className: n,
   dir: o = "down",
   id: c,
-  maxWidth: p = "320px",
-  maxHeight: i,
-  onLoadMore: t
+  listRef: p,
+  maxWidth: i = "320px",
+  maxHeight: m,
+  onLoadMore: t,
+  style: d
 }) => {
-  const m = (d) => {
-    const l = d.currentTarget;
+  const f = (u) => {
+    const l = u.currentTarget;
     l.scrollHeight - l.scrollTop - l.clientHeight < 48 && (t == null || t());
   };
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ g(
     "ul",
     {
+      ref: p,
       id: c,
-      className: f(
+      className: w(
         r.dropdown,
         o === "up" && r.dropdownUp,
-        n === "end" && r.alignEnd,
-        s
+        s === "end" && r.alignEnd,
+        n
       ),
       role: "menu",
-      style: { maxWidth: p, maxHeight: i },
-      onScroll: m,
+      style: { maxWidth: i, maxHeight: m, ...d },
+      onScroll: f,
       children: e
     }
   );
 };
 export {
-  h as DropdownList
+  a as DropdownList
 };

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
+};