meticulous-ui 2.0.1 → 2.0.2

package/components/Dropdown/Dropdown.js

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

package/components/Dropdown/styles.js

@@ -1,70 +1,77 @@
-import o, { css as e, keyframes as t } from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+import o, { css as t, keyframes as i } from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
 import n from "../../colors/grey.js";
-import m from "../Typography/P/P.js";
-import a from "../Icons/ChevronDown/ChevronDown.js";
+import a from "../Typography/P/P.js";
+import m from "../Icons/ChevronDown/ChevronDown.js";
 import { DEFAULT_BORDER as s } from "./constants.js";
 import p from "../../colors/white.js";
-const d = t`
+const d = i`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(180deg);
   }
-`, f = t`
+`, c = i`
   from {
     transform: rotate(180deg);
   }
   to {
     transform: rotate(0deg);
   }
-`, g = o.div`
+`, $ = o.div`
   max-width: ${({ $width: r }) => r};
   position: relative;
 
-  ${({ $isLoading: r }) => r && e`
+  ${({ $isLoading: r }) => r && t`
       pointer-events: none;
       opacity: 0.8;
     `}
 
-  ${({ $isDisabled: r }) => r && e`
+  ${({ $isDisabled: r }) => r && t`
       pointer-events: none;
     `}
 `, v = o.div`
   height: 2rem;
   width: ${({ $width: r }) => r};
   border-radius: 0.6rem;
-  border: ${({ $isOpen: r, $border: i }) => r ? `2px solid ${i}` : `1px solid ${s}`};
+  border: ${({ $isOpen: r, $border: e }) => r ? `2px solid ${e}` : `1px solid ${s}`};
   padding: 0.4rem 0.6rem 0.4rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
-`, u = o(m)`
+`, x = o(a)`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   max-width: calc(${({ $width: r }) => r} - 2rem);
   pointer-events: none;
-`, x = o(a)`
-  animation: ${({ $isOpen: r }) => r ? d : f} 0.15s linear;
+`, u = o(m)`
+  animation: ${({ $isOpen: r }) => r ? d : c} 0.15s linear;
   transform: rotate(${({ $isOpen: r }) => r ? 180 : 0}deg);
 `, y = o.div`
   border: 1px solid ${n.m700};
   width: calc(${({ $width: r }) => r} + 1rem);
-  max-height: ${({ $height: r }) => r};
   overflow: auto;
   position: absolute;
   z-index: 1000;
   background-color: ${p};
   left: 0.15rem;
+  max-height: 0;
+  transition: max-height 0.15s ease-out;
+  opacity: 0;
+
+  ${({ $isOpen: r }) => r && t`
+      max-height: ${({ $height: e }) => e};
+      opacity: 1;
+    `};
 
-  ${({ $top: r }) => r ? e`
+  ${({ $top: r }) => r ? t`
           bottom: 100%;
           border-top-right-radius: 0.6rem;
           border-top-left-radius: 0.6rem;
           border-bottom-width: 0;
-        ` : e`
+        ` : t`
           top: 100%;
           border-bottom-right-radius: 0.6rem;
           border-bottom-left-radius: 0.6rem;
@@ -77,9 +84,9 @@ const d = t`
 `;
 export {
   v as Box,
-  x as ChevronDownWrapper,
-  g as DropdownWrapper,
+  u as ChevronDownWrapper,
+  $ as DropdownWrapper,
   y as OptionWrapper,
-  u as PWrapper,
+  x as PWrapper,
   D as SpinnerWrapper
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {
@@ -35,6 +35,7 @@
     "toasts",
     "button",
     "input",
+    "textarea",
     "notification",
     "dropdown",
     "spinner",