meticulous-ui 1.8.6 → 1.8.7

package/components/Dropdown/Dropdown.js

@@ -1,73 +1,74 @@
 import { j as o } from "../../_virtual/jsx-runtime.js";
-import { useState as a, useRef as h, useEffect as D, useLayoutEffect as k, createElement as y } from "react";
-import z from "../../node_modules/lodash-es/get.js";
+import { useState as h, useRef as g, useEffect as k, useLayoutEffect as y, createElement as z } from "react";
+import H from "../../node_modules/lodash-es/get.js";
 import p from "../../colors/grey.js";
-import H from "../MenuItem/MenuItem.js";
-import L from "../../colors/index.js";
-import P from "../../colors/blue.js";
-import I from "../Spinner/Spinner.js";
-import { DropdownWrapper as M, Box as q, PWrapper as A, ChevronDownWrapper as F, OptionWrapper as G, SpinnerWrapper as J } from "./styles.js";
+import L from "../MenuItem/MenuItem.js";
+import P from "../../colors/index.js";
+import I from "../../colors/blue.js";
+import M from "../Spinner/Spinner.js";
+import { DropdownWrapper as q, Box as A, PWrapper as F, ChevronDownWrapper as G, OptionWrapper as J, SpinnerWrapper as K } from "./styles.js";
 const oe = ({
   options: l,
-  onChange: g,
+  onChange: b,
   value: r,
   width: n = "20rem",
-  menuHeight: b = "20rem",
-  placeholder: x,
-  theme: $ = "blue",
+  menuHeight: x = "20rem",
+  placeholder: $,
+  theme: w = "blue",
   isLoading: f,
-  isDisabled: w,
-  loaderColor: j
+  isDisabled: j,
+  loaderColor: C
 }) => {
-  const [i, c] = a(!1), [C, u] = a("bottom"), s = h(null), m = h(null), R = () => {
+  const [i, c] = h(!1), [R, u] = h("bottom"), s = g(null), m = g(null), O = () => {
     c((e) => !e);
-  }, O = (e) => {
-    e !== r && (g(e), c(!1));
+  }, E = (e) => {
+    e !== r && (b(e), c(!1));
   };
-  D(() => {
+  k(() => {
     const e = (t) => {
       s.current && !s.current.contains(t.target) && c(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []), k(() => {
+  }, []), y(() => {
     if (i && m.current && s.current) {
-      const e = m.current.getBoundingClientRect(), t = s.current.getBoundingClientRect(), d = window.innerHeight - t.bottom;
-      d < e.height + 8 && t.top > d ? u("top") : u("bottom");
+      const e = m.current.getBoundingClientRect(), t = s.current.getBoundingClientRect(), a = window.innerHeight - t.bottom;
+      a < e.height + 8 && t.top > a ? u("top") : u("bottom");
     }
   }, [i]);
   const {
-    m50: E,
+    m50: D,
     m100: S,
     m200: W,
     m500: v
-  } = z(L, $, P), B = ({ value: e, label: t }) => /* @__PURE__ */ y(
-    H,
+  } = H(P, w, I), B = ({ value: e, label: t, disabled: d }) => /* @__PURE__ */ z(
+    L,
     {
       value: e,
       label: t,
-      onSelect: O,
+      isDisabled: d,
+      onSelect: E,
       isSelected: e === r,
       key: e,
       width: n,
       selectedColor: W,
-      hoverColor: E,
+      hoverColor: D,
       activeColor: S
     }
   );
   return /* @__PURE__ */ o.jsxs(
-    M,
+    q,
     {
       ref: s,
       $width: n,
       $isLoading: f,
-      $isDisabled: w,
+      $isDisabled: j,
       children: [
-        /* @__PURE__ */ o.jsxs(q, { $width: n, onClick: R, $isOpen: i, $border: v, children: [
-          /* @__PURE__ */ o.jsx(A, { $width: n, color: r ? p.m700 : p.m500, size: "1.2rem", children: r ? l.find(({ value: e }) => r === e)?.label : x }),
-          /* @__PURE__ */ o.jsx(F, { color: p.m500, size: 22, $isOpen: i })
+        /* @__PURE__ */ o.jsxs(A, { $width: n, onClick: O, $isOpen: i, $border: v, children: [
+          /* @__PURE__ */ o.jsx(F, { $width: n, color: r ? p.m700 : p.m500, size: "1.2rem", children: r ? l.find(({ value: e }) => r === e)?.label : $ }),
+          /* @__PURE__ */ o.jsx(G, { color: p.m500, size: 22, $isOpen: i })
         ] }),
-        i && /* @__PURE__ */ o.jsx(G, { ref: m, $width: n, $height: b, $top: C === "top", children: l.map(B) }),
-        f && /* @__PURE__ */ o.jsx(J, { children: /* @__PURE__ */ o.jsx(I, { size: "small", color: j }) })
+        i && /* @__PURE__ */ o.jsx(J, { ref: m, $width: n, $height: x, $top: R === "top", children: l.map(B) }),
+        f && /* @__PURE__ */ o.jsx(K, { children: /* @__PURE__ */ o.jsx(M, { size: "small", color: C }) })
       ]
     }
   );

package/components/MenuItem/MenuItem.js

@@ -1,38 +1,40 @@
-import { j as m } from "../../_virtual/jsx-runtime.js";
-import i from "../../colors/grey.js";
-import r from "../../colors/blue.js";
-import $ from "../../colors/white.js";
-import { Wrapper as h, PWrapper as u } from "./styles.js";
-const w = ({
-  value: l,
-  label: o,
-  width: e = "20rem",
-  isSelected: t,
-  defaultColor: p = $,
-  selectedColor: c = r.m200,
-  hoverColor: n = r.m50,
-  activeColor: s = r.m100,
-  size: a = "1.2rem",
-  onSelect: d
+import { j as n } from "../../_virtual/jsx-runtime.js";
+import e from "../../colors/grey.js";
+import t from "../../colors/blue.js";
+import d from "../../colors/white.js";
+import { Wrapper as C, PWrapper as h } from "./styles.js";
+const x = ({ isSelected: o, isDisabled: r }) => o ? e.m700 : r ? e.m300 : e.m500, W = ({
+  value: o,
+  label: r,
+  width: m = "20rem",
+  isSelected: i,
+  defaultColor: p = d,
+  selectedColor: c = t.m200,
+  hoverColor: s = t.m50,
+  activeColor: f = t.m100,
+  size: u = "1.2rem",
+  onSelect: $,
+  isDisabled: l
 }) => {
-  const f = () => {
-    d(l);
+  const a = () => {
+    $(o);
   };
-  return /* @__PURE__ */ m.jsx(
-    h,
+  return /* @__PURE__ */ n.jsx(
+    C,
     {
-      $isSelected: t,
-      $width: e,
+      $isSelected: i,
+      $width: m,
       $defaultColor: p,
       $selectedColor: c,
-      $hoverColor: n,
-      $activeColor: s,
-      onClick: f,
-      title: o,
-      children: /* @__PURE__ */ m.jsx(u, { size: a, color: t ? i.m700 : i.m500, $width: e, children: o })
+      $hoverColor: s,
+      $activeColor: f,
+      $isDisabled: l,
+      onClick: a,
+      title: r,
+      children: /* @__PURE__ */ n.jsx(h, { size: u, color: x({ isSelected: i, isDisabled: l }), $width: m, children: r })
     }
   );
 };
 export {
-  w as default
+  W as default
 };

package/components/MenuItem/styles.js

@@ -1,26 +1,27 @@
 import t from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
 import a from "../Typography/P/P.js";
 const p = t.div`
-  width: ${({ $width: r }) => r};
-  background-color: ${({ $isSelected: r, $defaultColor: o, $selectedColor: e }) => r ? e : o};
-  cursor: ${({ $isSelected: r }) => r ? "auto" : "pointer"};
+  width: ${({ $width: o }) => o};
+  background-color: ${({ $isSelected: o, $defaultColor: r, $selectedColor: e }) => o ? e : r};
+  cursor: ${({ $isSelected: o }) => o ? "auto" : "pointer"};
   padding: 0.6rem 0 0.8rem 1rem;
   margin-top: 0.1rem;
+  pointer-events: ${({ $isDisabled: o }) => o ? "none" : "auto"};
 
   &:hover {
-    background-color: ${({ $isSelected: r, $hoverColor: o, $selectedColor: e }) => r ? e : o};
+    background-color: ${({ $isSelected: o, $hoverColor: r, $selectedColor: e }) => o ? e : r};
   }
 
   &:active {
-    background-color: ${({ $isSelected: r, $activeColor: o, $selectedColor: e }) => r ? e : o};
+    background-color: ${({ $isSelected: o, $activeColor: r, $selectedColor: e }) => o ? e : r};
   }
-`, d = t(a)`
+`, c = t(a)`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  max-width: calc(${({ $width: r }) => r} - 2rem);
+  max-width: calc(${({ $width: o }) => o} - 2rem);
 `;
 export {
-  d as PWrapper,
+  c as PWrapper,
   p as Wrapper
 };

package/package.json

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