meticulous-ui 2.1.1 → 2.1.2

package/components/Dropdown/Dropdown.js

@@ -1,13 +1,13 @@
 import { j as r } from "../../_virtual/jsx-runtime.js";
-import { useState as C, useRef as S, useMemo as L, useEffect as d, useLayoutEffect as M, useCallback as ee, createElement as te } from "react";
-import ne from "../../node_modules/lodash-es/get.js";
+import { useState as C, useRef as S, useMemo as M, useEffect as d, useLayoutEffect as ee, useCallback as te, createElement as ne } from "react";
+import re from "../../node_modules/lodash-es/get.js";
 import I from "../../colors/grey.js";
-import re from "../MenuItem/MenuItem.js";
-import oe from "../../colors/index.js";
-import se from "../../colors/blue.js";
+import oe from "../MenuItem/MenuItem.js";
+import se from "../../colors/index.js";
+import ie from "../../colors/blue.js";
 import F from "../Spinner/Spinner.js";
-import { DropdownWrapper as ie, Box as ce, PWrapper as le, ChevronDownWrapper as fe, OptionWrapper as ue, SearchContainer as ae, SearchIcon as pe, SearchInput as de, OptionsList as me, LoadMoreSentinel as he, SpinnerWrapper as xe } from "./styles.js";
-const be = (o) => {
+import { DropdownWrapper as ce, Box as le, PWrapper as fe, ChevronDownWrapper as ue, OptionWrapper as ae, SearchContainer as pe, SearchIcon as de, SearchInput as me, OptionsList as he, LoadMoreSentinel as xe, SpinnerWrapper as be } from "./styles.js";
+const ge = (o) => {
   if (typeof o != "string") return o;
   if (o.endsWith("px")) return parseFloat(o);
   if (o.endsWith("rem")) {
@@ -15,7 +15,7 @@ const be = (o) => {
     return E * i;
   }
   return parseFloat(o);
-}, ve = ({
+}, ye = ({
   options: o,
   onChange: E,
   value: i,
@@ -29,11 +29,12 @@ const be = (o) => {
   searchable: h = !1,
   onLoadMore: l,
   hasMore: x = !1,
-  isLoadingMore: a = !1
+  isLoadingMore: a = !1,
+  searchPh: B = "Search..."
 }) => {
-  const [n, j] = C(!1), [B, H] = C("bottom"), [b, D] = C(""), [f, p] = C(-1), g = S(null), w = S(null), k = S(null), R = S(null), V = S(!0), K = () => j((e) => !e), z = (e) => {
+  const [n, j] = C(!1), [H, V] = C("bottom"), [b, D] = C(""), [f, p] = C(-1), g = S(null), w = S(null), k = S(null), R = S(null), K = S(!0), Q = () => j((e) => !e), z = (e) => {
     e !== i && (E(e), j(!1));
-  }, c = L(() => {
+  }, c = M(() => {
     if (!h || !b.trim()) return o;
     const e = b.toLowerCase();
     return o.filter(({ label: t }) => t.toLowerCase().includes(e));
@@ -60,44 +61,44 @@ const be = (o) => {
   }, [f, n]), d(() => {
     n && h && k.current && k.current.focus();
   }, [n, h]), d(() => {
-    n || (V.current = !0);
+    n || (K.current = !0);
   }, [n]), d(() => {
     const e = (t) => {
       g.current && !g.current.contains(t.target) && j(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []), M(() => {
+  }, []), ee(() => {
     if (n && w.current && g.current) {
-      const e = g.current.getBoundingClientRect(), t = window.innerHeight, s = be(O), u = t - e.bottom;
-      H(
+      const e = g.current.getBoundingClientRect(), t = window.innerHeight, s = ge(O), u = t - e.bottom;
+      V(
         u < s + 8 && e.top > u ? "top" : "bottom"
       );
     }
   }, [n, O]);
-  const Q = (e) => {
+  const q = (e) => {
     let t = e + 1;
     for (; t < c.length; ) {
       if (!c[t].disabled) return t;
       t++;
     }
     return e;
-  }, q = (e) => {
+  }, N = (e) => {
     let t = e - 1;
     for (; t >= 0; ) {
       if (!c[t].disabled) return t;
       t--;
     }
     return e;
-  }, N = (e) => {
+  }, U = (e) => {
     if (n)
       switch (e.key) {
         case "ArrowDown":
           e.preventDefault();
-          const t = Q(f);
+          const t = q(f);
           t === f && x && !a && l?.(), p(t);
           break;
         case "ArrowUp":
-          e.preventDefault(), p((u) => q(u));
+          e.preventDefault(), p((u) => N(u));
           break;
         case "Enter":
           e.preventDefault();
@@ -108,7 +109,7 @@ const be = (o) => {
           j(!1);
           break;
       }
-  }, W = ee(() => {
+  }, W = te(() => {
     x && !a && l && l();
   }, [x, a, l]);
   d(() => {
@@ -129,68 +130,68 @@ const be = (o) => {
     return t.observe(e), () => t.disconnect();
   }, [W, l, x, a]);
   const {
-    m50: U,
-    m100: G,
-    m200: J,
-    m500: T
-  } = ne(oe, A, se), X = (e, t) => () => !e && p(t), Y = ({ value: e, label: t, disabled: s }, u) => /* @__PURE__ */ te(
-    re,
+    m50: G,
+    m100: J,
+    m200: T,
+    m500: X
+  } = re(se, A, ie), Y = (e, t) => () => !e && p(t), Z = ({ value: e, label: t, disabled: s }, u) => /* @__PURE__ */ ne(
+    oe,
     {
       value: e,
       label: t,
       isDisabled: s,
       onSelect: z,
-      onMouseEnter: X(s, u),
+      onMouseEnter: Y(s, u),
       isSelected: e === i,
       isHighlighted: u === f,
       key: e,
       width: m,
-      selectedColor: J,
-      hoverColor: U,
-      activeColor: G
+      selectedColor: T,
+      hoverColor: G,
+      activeColor: J
     }
-  ), Z = (e) => {
+  ), _ = (e) => {
     D(e.target.value);
-  }, _ = (e) => {
+  }, L = (e) => {
     e.stopPropagation();
   };
   return /* @__PURE__ */ r.jsxs(
-    ie,
+    ce,
     {
       ref: g,
       $width: m,
       tabIndex: v ? -1 : 0,
-      onKeyDown: N,
+      onKeyDown: U,
       $isLoading: $,
       $isDisabled: v,
       children: [
-        /* @__PURE__ */ r.jsxs(ce, { $width: m, onClick: K, $isOpen: n, $border: T, children: [
-          /* @__PURE__ */ r.jsx(le, { $width: m, color: i ? I.m700 : I.m500, size: "1.2rem", children: i ? o.find(({ value: e }) => i === e)?.label : P }),
-          /* @__PURE__ */ r.jsx(fe, { color: I.m500, size: 22, $isOpen: n })
+        /* @__PURE__ */ r.jsxs(le, { $width: m, onClick: Q, $isOpen: n, $border: X, children: [
+          /* @__PURE__ */ r.jsx(fe, { $width: m, color: i ? I.m700 : I.m500, size: "1.2rem", children: i ? o.find(({ value: e }) => i === e)?.label : P }),
+          /* @__PURE__ */ r.jsx(ue, { color: I.m500, size: 22, $isOpen: n })
         ] }),
-        /* @__PURE__ */ r.jsxs(ue, { $isOpen: n, $width: m, $height: O, $top: B === "top", children: [
-          h && /* @__PURE__ */ r.jsxs(ae, { onClick: _, children: [
-            /* @__PURE__ */ r.jsx(pe, { size: 18, color: I.m800 }),
+        /* @__PURE__ */ r.jsxs(ae, { $isOpen: n, $width: m, $height: O, $top: H === "top", children: [
+          h && /* @__PURE__ */ r.jsxs(pe, { onClick: L, children: [
+            /* @__PURE__ */ r.jsx(de, { size: 20, color: I.m600 }),
             /* @__PURE__ */ r.jsx(
-              de,
+              me,
               {
                 ref: k,
                 value: b,
-                onChange: Z,
-                placeholder: "Search..."
+                onChange: _,
+                placeholder: B
               }
             )
           ] }),
-          /* @__PURE__ */ r.jsxs(me, { ref: w, children: [
-            c.map(Y),
-            l && /* @__PURE__ */ r.jsx(he, { ref: R, children: a && /* @__PURE__ */ r.jsx(F, { size: "small", color: y }) })
+          /* @__PURE__ */ r.jsxs(he, { ref: w, children: [
+            c.map(Z),
+            l && /* @__PURE__ */ r.jsx(xe, { ref: R, children: a && /* @__PURE__ */ r.jsx(F, { size: "small", color: y }) })
           ] })
         ] }),
-        $ && /* @__PURE__ */ r.jsx(xe, { children: /* @__PURE__ */ r.jsx(F, { size: "small", color: y }) })
+        $ && /* @__PURE__ */ r.jsx(be, { children: /* @__PURE__ */ r.jsx(F, { size: "small", color: y }) })
       ]
     }
   );
 };
 export {
-  ve as default
+  ye as default
 };

package/components/Dropdown/styles.js

@@ -115,7 +115,7 @@ const c = n`
     color: ${t.m400};
   }
 `, L = e(d)`
-  margin: 0 1.2rem;
+  margin: 0 0.8rem;
 `, O = e.div`
   display: flex;
   justify-content: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {