npm - meticulous-ui - Versions diffs - 3.3.0 → 3.4.0 - Mend

meticulous-ui 3.3.0 → 3.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (924) hide show

package/components/Dropdown/Dropdown.js CHANGED Viewed

@@ -1,12 +1,12 @@
-import { jsxs as C, jsx as u } from "react/jsx-runtime";
-import { useState as $, useId as le, useRef as v, useMemo as ae, useEffect as h, useLayoutEffect as ue, useCallback as fe, createElement as de } from "react";
+import { jsxs as C, jsx as a } from "react/jsx-runtime";
+import { useState as $, useId as ie, useRef as v, useMemo as le, useEffect as h, useLayoutEffect as ae, useCallback as ue, createElement as de } from "react";
 import E from "../../colors/grey.js";
-import pe from "../MenuItem/MenuItem.js";
-import me from "../../colors/colorMap.js";
-import he from "../../colors/blue.js";
-import K from "../Spinner/Spinner.js";
-import { DropdownWrapper as be, Box as we, PWrapper as xe, ChevronDownWrapper as ge, OptionWrapper as Ie, SearchContainer as ke, SearchIcon as Se, SearchInput as Ce, OptionsList as $e, LoadMoreSentinel as ve, SpinnerWrapper as ye } from "./styles.js";
-const Ee = (n) => {
+import fe from "../MenuItem/MenuItem.js";
+import pe from "../../colors/colorMap.js";
+import { blue as me } from "../../colors/blue.js";
+import j from "../Spinner/Spinner.js";
+import { DropdownWrapper as he, Box as be, PWrapper as we, ChevronDownWrapper as xe, OptionWrapper as ge, SearchContainer as Ie, SearchIcon as ke, SearchInput as Se, OptionsList as Ce, LoadMoreSentinel as $e, SpinnerWrapper as ve } from "./styles.js";
+const ye = (n) => {
   if (typeof n != "string") return n;
   if (n.endsWith("px")) return parseFloat(n);
   if (n.endsWith("rem")) {
@@ -14,116 +14,115 @@ const Ee = (n) => {
     return O * s;
   }
   return parseFloat(n);
-}, He = ({
+}, Pe = ({
   options: n,
   onChange: O,
   value: s,
   width: b = "32rem",
   menuHeight: F = "32rem",
-  placeholder: Q,
-  theme: U = "blue",
+  placeholder: K,
+  theme: Q = "blue",
   isLoading: w,
   isDisabled: x,
   loaderColor: z,
   searchable: g = !1,
-  onLoadMore: c,
+  onLoadMore: u,
   hasMore: I = !1,
-  isLoadingMore: f = !1,
+  isLoadingMore: d = !1,
   searchPh: R = "Search...",
-  ...q
+  ...U
 }) => {
-  var j;
-  const [r, d] = $(!1), [N, W] = $(!1), [T, G] = $("bottom"), [k, A] = $(""), [i, p] = $(-1), y = le(), m = v(null), S = v(null), D = v(null), B = v(null), J = v(!0), X = () => !w && !x && d((e) => !e), P = (e) => {
-    e !== s && (O(e), d(!1));
-  }, l = ae(() => {
+  const [r, f] = $(!1), [q, W] = $(!1), [N, T] = $("bottom"), [k, A] = $(""), [c, p] = $(-1), y = ie(), m = v(null), S = v(null), D = v(null), B = v(null), G = v(!0), J = () => !w && !x && f((e) => !e), P = (e) => {
+    e !== s && (O(e), f(!1));
+  }, i = le(() => {
     if (!g || !k.trim()) return n;
     const e = k.toLowerCase();
     return n.filter(({ label: t }) => t.toLowerCase().includes(e));
   }, [n, k, g]);
   h(() => {
     if (r) {
-      const e = l.findIndex((t) => t.value === s);
-      if (e !== -1 && !l[e].disabled)
+      const e = i.findIndex((t) => t.value === s);
+      if (e !== -1 && !i[e].disabled)
         p(e);
       else {
-        const t = l.findIndex((o) => !o.disabled);
+        const t = i.findIndex((o) => !o.disabled);
         p(t);
       }
     } else
       A(""), p(-1);
-  }, [r, k, l, s]), h(() => {
-    if (r && i !== -1 && S.current) {
-      const e = S.current.children[i];
+  }, [r, k, i, s]), h(() => {
+    if (r && c !== -1 && S.current) {
+      const e = S.current.children[c];
       e && e.scrollIntoView({
         block: "nearest",
         behavior: "auto"
       });
     }
-  }, [i, r]), h(() => {
+  }, [c, r]), h(() => {
     r && g && D.current && D.current.focus();
   }, [r, g]), h(() => {
-    r || (J.current = !0);
+    r || (G.current = !0);
   }, [r]), h(() => {
     const e = (t) => {
-      m.current && !m.current.contains(t.target) && d(!1);
+      m.current && !m.current.contains(t.target) && f(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []), ue(() => {
+  }, []), ae(() => {
     if (r && S.current && m.current) {
-      const e = m.current.getBoundingClientRect(), t = window.innerHeight, o = Ee(F), a = t - e.bottom;
-      G(
-        a < o + 8 && e.top > a ? "top" : "bottom"
+      const e = m.current.getBoundingClientRect(), t = window.innerHeight, o = ye(F), l = t - e.bottom;
+      T(
+        l < o + 8 && e.top > l ? "top" : "bottom"
       );
     }
   }, [r, F]);
-  const Y = (e) => {
+  const X = (e) => {
     let t = e + 1;
-    for (; t < l.length; ) {
-      if (!l[t].disabled) return t;
+    for (; t < i.length; ) {
+      if (!i[t].disabled) return t;
       t++;
     }
     return e;
-  }, Z = (e) => {
+  }, Y = (e) => {
     let t = e - 1;
     for (; t >= 0; ) {
-      if (!l[t].disabled) return t;
+      if (!i[t].disabled) return t;
       t--;
     }
     return e;
-  }, _ = (e) => {
+  }, Z = (e) => {
     if (!(w || x)) {
       if (!r) {
-        (e.key === " " || e.key === "Enter" || e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), d(!0));
+        (e.key === " " || e.key === "Enter" || e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), f(!0));
         return;
       }
       switch (e.key) {
         case "ArrowDown":
           e.preventDefault();
-          const t = Y(i);
-          t === i && I && !f && (c == null || c()), p(t);
+          const t = X(c);
+          t === c && I && !d && u?.(), p(t);
           break;
         case "ArrowUp":
-          e.preventDefault(), p((a) => Z(a));
+          e.preventDefault(), p((l) => Y(l));
           break;
         case "Enter":
           e.preventDefault();
-          const o = l[i];
+          const o = i[c];
           o && !o.disabled && P(o.value);
           break;
         case "Escape":
-          d(!1);
+          f(!1);
           break;
       }
     }
-  }, H = fe(() => {
-    I && !f && c && c();
-  }, [I, f, c]);
+  }, H = ue(() => {
+    I && !d && u && u();
+  }, [I, d, u]);
   h(() => {
     const e = B.current;
-    if (!e || !c || !I) return;
+    if (!e || !u || !I) return;
     const t = new IntersectionObserver(
       ([o]) => {
-        o.isIntersecting && !f && H();
+        o.isIntersecting && !d && H();
       },
       {
         root: S.current,
@@ -134,47 +133,46 @@ const Ee = (n) => {
       }
     );
     return t.observe(e), () => t.disconnect();
-  }, [H, c, I, f]);
+  }, [H, u, I, d]);
   const {
-    m50: L,
-    m100: M,
-    m200: ee,
-    m500: te
-  } = me[U] ?? he, re = (e, t) => () => !e && p(t), V = (e) => `${y}-opt-${e}`, ne = ({ value: e, label: t, disabled: o }, a) => /* @__PURE__ */ de(
-    pe,
+    m50: _,
+    m100: L,
+    m200: M,
+    m500: ee
+  } = pe[Q] ?? me, te = (e, t) => () => !e && p(t), V = (e) => `${y}-opt-${e}`, re = ({ value: e, label: t, disabled: o }, l) => /* @__PURE__ */ de(
+    fe,
     {
       value: e,
       label: t,
       isDisabled: o,
       onSelect: P,
-      onMouseEnter: re(o, a),
+      onMouseEnter: te(o, l),
       isSelected: e === s,
-      isHighlighted: a === i,
+      isHighlighted: l === c,
       key: e,
-      id: V(a),
+      id: V(l),
       width: b,
-      selectedColor: ee,
-      hoverColor: L,
-      activeColor: M
+      selectedColor: M,
+      hoverColor: _,
+      activeColor: L
     }
-  ), oe = (e) => () => {
+  ), ne = (e) => () => {
     W(e);
+  }, oe = (e) => {
+    W(!1), m.current?.contains(e.relatedTarget) || f(!1);
   }, se = (e) => {
-    var t;
-    W(!1), (t = m.current) != null && t.contains(e.relatedTarget) || d(!1);
-  }, ce = (e) => {
     A(e.target.value);
-  }, ie = (e) => {
+  }, ce = (e) => {
     e.stopPropagation();
   };
   return /* @__PURE__ */ C(
-    be,
+    he,
     {
       ref: m,
       $width: b,
-      ...q,
+      ...U,
       tabIndex: x || w ? -1 : 0,
-      onKeyDown: _,
+      onKeyDown: Z,
       $isLoading: w,
       $isDisabled: x,
       role: "combobox",
@@ -182,33 +180,33 @@ const Ee = (n) => {
       "aria-haspopup": "listbox",
       "aria-controls": y,
       "aria-disabled": x || void 0,
-      "aria-activedescendant": i !== -1 ? V(i) : void 0,
-      onFocus: oe(!0),
-      onBlur: se,
+      "aria-activedescendant": c !== -1 ? V(c) : void 0,
+      onFocus: ne(!0),
+      onBlur: oe,
       children: [
         /* @__PURE__ */ C(
-          we,
+          be,
           {
             $width: b,
-            onClick: X,
+            onClick: J,
             $isOpen: r,
-            $border: te,
-            $isFocused: N && !r,
+            $border: ee,
+            $isFocused: q && !r,
             children: [
-              /* @__PURE__ */ u(xe, { $width: b, color: s ? E.m700 : E.m500, size: "1.92rem", children: s ? (j = n.find(({ value: e }) => s === e)) == null ? void 0 : j.label : Q }),
-              /* @__PURE__ */ u(ge, { color: E.m500, size: 22, $isOpen: r, "aria-hidden": !0 })
+              /* @__PURE__ */ a(we, { $width: b, color: s ? E.m700 : E.m500, size: "1.92rem", children: s ? n.find(({ value: e }) => s === e)?.label : K }),
+              /* @__PURE__ */ a(xe, { color: E.m500, size: 22, $isOpen: r, "aria-hidden": !0 })
             ]
           }
         ),
-        /* @__PURE__ */ C(Ie, { $isOpen: r, $width: b, $height: F, $top: T === "top", children: [
-          g && /* @__PURE__ */ C(ke, { onClick: ie, children: [
-            /* @__PURE__ */ u(Se, { size: 20, color: E.m600, "aria-hidden": !0 }),
-            /* @__PURE__ */ u(
-              Ce,
+        /* @__PURE__ */ C(ge, { $isOpen: r, $width: b, $height: F, $top: N === "top", children: [
+          g && /* @__PURE__ */ C(Ie, { onClick: ce, children: [
+            /* @__PURE__ */ a(ke, { size: 20, color: E.m600, "aria-hidden": !0 }),
+            /* @__PURE__ */ a(
+              Se,
               {
                 ref: D,
                 value: k,
-                onChange: ce,
+                onChange: se,
                 placeholder: R,
                 "aria-label": R,
                 "aria-controls": y,
@@ -219,16 +217,16 @@ const Ee = (n) => {
               }
             )
           ] }),
-          /* @__PURE__ */ C($e, { ref: S, role: "listbox", id: y, tabIndex: -1, children: [
-            l.map(ne),
-            c && /* @__PURE__ */ u(ve, { ref: B, children: f && /* @__PURE__ */ u(K, { size: "small", color: z }) })
+          /* @__PURE__ */ C(Ce, { ref: S, role: "listbox", id: y, tabIndex: -1, children: [
+            i.map(re),
+            u && /* @__PURE__ */ a($e, { ref: B, children: d && /* @__PURE__ */ a(j, { size: "small", color: z }) })
           ] })
         ] }),
-        w && /* @__PURE__ */ u(ye, { children: /* @__PURE__ */ u(K, { size: "small", color: z }) })
+        w && /* @__PURE__ */ a(ve, { children: /* @__PURE__ */ a(j, { size: "small", color: z }) })
       ]
     }
   );
 };
 export {
-  He as default
+  Pe as default
 };

package/components/Dropdown/styles.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import e, { css as r, keyframes as n } from "styled-components";
 import t from "../../colors/grey.js";
 import s from "../Typography/P/P.js";
-import d from "../Icons/ChevronDown/ChevronDown.js";
-import p from "../Icons/Search/Search.js";
-import { DEFAULT_BORDER as c } from "./constants.js";
+import { DEFAULT_BORDER as d } from "./constants.js";
 import a from "../../colors/white.js";
+import p from "../Icons/ChevronDown/ChevronDown.js";
+import c from "../Icons/Search/Search.js";
 const l = n`
   from {
     transform: rotate(0deg);
@@ -37,7 +37,7 @@ const l = n`
   height: 3.2rem;
   width: ${({ $width: o }) => o};
   border-radius: 0.96rem;
-  border: ${({ $isOpen: o, $isFocused: i, $border: m }) => o || i ? `2px solid ${m}` : `1px solid ${c}`};
+  border: ${({ $isOpen: o, $isFocused: i, $border: m }) => o || i ? `2px solid ${m}` : `1px solid ${d}`};
   padding: 0.64rem 0.96rem 0.64rem;
   display: flex;
   align-items: center;
@@ -49,7 +49,7 @@ const l = n`
   text-overflow: ellipsis;
   max-width: calc(${({ $width: o }) => o} - 3.2rem);
   pointer-events: none;
-`, k = e(d)`
+`, k = e(p)`
   animation: ${({ $isOpen: o }) => o ? l : f} 0.15s linear;
   transform: rotate(${({ $isOpen: o }) => o ? 180 : 0}deg);
 `, D = e.div`
@@ -115,7 +115,7 @@ const l = n`
   &::placeholder {
     color: ${t.m400};
   }
-`, O = e(p)`
+`, O = e(c)`
   margin: 0 1.28rem;
 `, R = e.div`
   display: flex;