meticulous-ui 2.0.5 → 2.1.0

package/components/Dropdown/Dropdown.js

@@ -1,87 +1,196 @@
-import { j as o } from "../../_virtual/jsx-runtime.js";
-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;
+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 I from "../../colors/grey.js";
+import re from "../MenuItem/MenuItem.js";
+import oe from "../../colors/index.js";
+import se 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) => {
+  if (typeof o != "string") return o;
+  if (o.endsWith("px")) return parseFloat(o);
+  if (o.endsWith("rem")) {
+    const E = parseFloat(o), i = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return E * i;
   }
-  return parseFloat(t);
-}, oe = ({
-  options: t,
-  onChange: p,
-  value: r,
-  width: n = "20rem",
-  menuHeight: m = "20rem",
-  placeholder: $,
-  theme: j = "blue",
-  isLoading: a,
-  isDisabled: w,
-  loaderColor: C
+  return parseFloat(o);
+}, ve = ({
+  options: o,
+  onChange: E,
+  value: i,
+  width: m = "20rem",
+  menuHeight: O = "20rem",
+  placeholder: P,
+  theme: A = "blue",
+  isLoading: $,
+  isDisabled: v,
+  loaderColor: y,
+  searchable: h = !1,
+  onLoadMore: l,
+  hasMore: x = !1,
+  isLoadingMore: a = !1
 }) => {
-  const [s, l] = g(!1), [O, u] = g("bottom"), i = b(null), h = b(null), S = () => {
-    l((e) => !e);
-  }, E = (e) => {
-    e !== r && (p(e), l(!1));
-  };
-  F(() => {
-    const e = (c) => {
-      i.current && !i.current.contains(c.target) && l(!1);
+  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) => {
+    e !== i && (E(e), j(!1));
+  }, c = L(() => {
+    if (!h || !b.trim()) return o;
+    const e = b.toLowerCase();
+    return o.filter(({ label: t }) => t.toLowerCase().includes(e));
+  }, [o, b, h]);
+  d(() => {
+    if (n) {
+      const e = c.findIndex((t) => t.value === i);
+      if (e !== -1 && !c[e].disabled)
+        p(e);
+      else {
+        const t = c.findIndex((s) => !s.disabled);
+        p(t);
+      }
+    } else
+      D(""), p(-1);
+  }, [n, b, c, i]), d(() => {
+    if (n && f !== -1 && w.current) {
+      const e = w.current.children[f];
+      e && e.scrollIntoView({
+        block: "nearest",
+        behavior: "auto"
+      });
+    }
+  }, [f, n]), d(() => {
+    n && h && k.current && k.current.focus();
+  }, [n, h]), d(() => {
+    n || (V.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);
-  }, []), 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");
+  }, []), M(() => {
+    if (n && w.current && g.current) {
+      const e = g.current.getBoundingClientRect(), t = window.innerHeight, s = be(O), u = t - e.bottom;
+      H(
+        u < s + 8 && e.top > u ? "top" : "bottom"
+      );
+    }
+  }, [n, O]);
+  const Q = (e) => {
+    let t = e + 1;
+    for (; t < c.length; ) {
+      if (!c[t].disabled) return t;
+      t++;
+    }
+    return e;
+  }, q = (e) => {
+    let t = e - 1;
+    for (; t >= 0; ) {
+      if (!c[t].disabled) return t;
+      t--;
     }
-  }, [s, m]);
+    return e;
+  }, N = (e) => {
+    if (n)
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          const t = Q(f);
+          t === f && x && !a && l?.(), p(t);
+          break;
+        case "ArrowUp":
+          e.preventDefault(), p((u) => q(u));
+          break;
+        case "Enter":
+          e.preventDefault();
+          const s = c[f];
+          s && !s.disabled && z(s.value);
+          break;
+        case "Escape":
+          j(!1);
+          break;
+      }
+  }, W = ee(() => {
+    x && !a && l && l();
+  }, [x, a, l]);
+  d(() => {
+    const e = R.current;
+    if (!e || !l || !x) return;
+    const t = new IntersectionObserver(
+      ([s]) => {
+        s.isIntersecting && !a && W();
+      },
+      {
+        root: w.current,
+        // Observe relative to the scrollable container
+        threshold: 0.1,
+        rootMargin: "20px"
+        // Start loading 20px before the user even hits the bottom
+      }
+    );
+    return t.observe(e), () => t.disconnect();
+  }, [W, l, x, a]);
   const {
-    m50: W,
-    m100: R,
-    m200: y,
-    m500: z
-  } = L(M, j, V), D = ({ value: e, label: c, disabled: f }) => /* @__PURE__ */ B(
-    P,
+    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,
     {
       value: e,
-      label: c,
-      isDisabled: f,
-      onSelect: E,
-      isSelected: e === r,
+      label: t,
+      isDisabled: s,
+      onSelect: z,
+      onMouseEnter: X(s, u),
+      isSelected: e === i,
+      isHighlighted: u === f,
       key: e,
-      width: n,
-      selectedColor: y,
-      hoverColor: W,
-      activeColor: R
+      width: m,
+      selectedColor: J,
+      hoverColor: U,
+      activeColor: G
     }
-  );
-  return /* @__PURE__ */ o.jsxs(
-    I,
+  ), Z = (e) => {
+    D(e.target.value);
+  }, _ = (e) => {
+    e.stopPropagation();
+  };
+  return /* @__PURE__ */ r.jsxs(
+    ie,
     {
-      ref: i,
-      $width: n,
-      $isLoading: a,
-      $isDisabled: w,
+      ref: g,
+      $width: m,
+      tabIndex: v ? -1 : 0,
+      onKeyDown: N,
+      $isLoading: $,
+      $isDisabled: v,
       children: [
-        /* @__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 })
+        /* @__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(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.jsx(
+              de,
+              {
+                ref: k,
+                value: b,
+                onChange: Z,
+                placeholder: "Search..."
+              }
+            )
+          ] }),
+          /* @__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__ */ 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 }) })
+        $ && /* @__PURE__ */ r.jsx(xe, { children: /* @__PURE__ */ r.jsx(F, { size: "small", color: y }) })
       ]
     }
   );
 };
 export {
-  oe as default
+  ve as default
 };

package/components/Dropdown/styles.js

@@ -1,92 +1,139 @@
-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 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 = i`
+import e, { css as r, keyframes as n } from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+import t from "../../colors/grey.js";
+import m from "../Typography/P/P.js";
+import s from "../Icons/ChevronDown/ChevronDown.js";
+import d from "../Icons/Search/Search.js";
+import { DEFAULT_BORDER as p } from "./constants.js";
+import a from "../../colors/white.js";
+const c = n`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(180deg);
   }
-`, c = i`
+`, l = n`
   from {
     transform: rotate(180deg);
   }
   to {
     transform: rotate(0deg);
   }
-`, $ = o.div`
-  max-width: ${({ $width: r }) => r};
+`, w = e.div`
+  max-width: ${({ $width: o }) => o};
   position: relative;
+  outline: none;
 
-  ${({ $isLoading: r }) => r && t`
+  ${({ $isLoading: o }) => o && r`
       pointer-events: none;
       opacity: 0.8;
     `}
 
-  ${({ $isDisabled: r }) => r && t`
+  ${({ $isDisabled: o }) => o && r`
       pointer-events: none;
     `}
-`, v = o.div`
+`, $ = e.div`
   height: 2rem;
-  width: ${({ $width: r }) => r};
+  width: ${({ $width: o }) => o};
   border-radius: 0.6rem;
-  border: ${({ $isOpen: r, $border: e }) => r ? `2px solid ${e}` : `1px solid ${s}`};
+  border: ${({ $isOpen: o, $border: i }) => o ? `2px solid ${i}` : `1px solid ${p}`};
   padding: 0.4rem 0.6rem 0.4rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
-`, x = o(a)`
+`, y = e(m)`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  max-width: calc(${({ $width: r }) => r} - 2rem);
+  max-width: calc(${({ $width: o }) => o} - 2rem);
   pointer-events: none;
-`, 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);
-  overflow: auto;
+`, S = e(s)`
+  animation: ${({ $isOpen: o }) => o ? c : l} 0.15s linear;
+  transform: rotate(${({ $isOpen: o }) => o ? 180 : 0}deg);
+`, k = e.div`
+  border: 1px solid ${t.m700};
+  width: calc(${({ $width: o }) => o} + 1rem);
+  /* Remove overflow: auto from here */
+  display: flex;
+  flex-direction: column;
   position: absolute;
   z-index: 1000;
-  background-color: ${p};
+  background-color: ${a};
   left: 0.15rem;
   max-height: 0;
   transition: max-height 0.15s ease-out;
   opacity: 0;
+  overflow: hidden; /* Keep this hidden so the collapse works */
 
-  ${({ $isOpen: r }) => r && t`
-      max-height: ${({ $height: e }) => e};
+  ${({ $isOpen: o }) => o && r`
+      max-height: ${({ $height: i }) => i};
       opacity: 1;
     `};
 
-  ${({ $top: r }) => r ? t`
+  ${({ $top: o }) => o ? r`
           bottom: 100%;
+          flex-direction: column-reverse; /* Search at bottom if menu opens upward */
           border-top-right-radius: 0.6rem;
           border-top-left-radius: 0.6rem;
-          border-bottom-width: 0;
-        ` : t`
+          margin-bottom: 0.1rem;
+        ` : r`
           top: 100%;
           border-bottom-right-radius: 0.6rem;
           border-bottom-left-radius: 0.6rem;
-          border-top-width: 0;
+          margin-top: 0.1rem;
         `}
-`, D = o.div`
+`, D = e.div`
+  overflow-y: auto;
+  flex: 1;
+`, W = e.div`
   position: absolute;
   top: 0.7rem;
   right: 1rem;
+`, z = e.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid ${t.m300};
+  background: ${a};
+
+  &:focus-within {
+    border-bottom-color: ${t.m500};
+  }
+`, C = e.input`
+  width: 100%;
+  box-sizing: border-box;
+  border: none;
+  /* Add left padding to make room for the icon */
+  padding: 0.5rem 0.75rem 0.5rem 0;
+  font-size: 1.2rem;
+  color: ${t.m700};
+  background: transparent;
+  outline: none;
+
+  &::placeholder {
+    color: ${t.m400};
+  }
+`, L = e(d)`
+  margin: 0 1.2rem;
+`, O = e.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem 0;
+  min-height: 1rem;
+  width: 100%;
 `;
 export {
-  v as Box,
-  u as ChevronDownWrapper,
-  $ as DropdownWrapper,
-  y as OptionWrapper,
-  x as PWrapper,
-  D as SpinnerWrapper
+  $ as Box,
+  S as ChevronDownWrapper,
+  w as DropdownWrapper,
+  O as LoadMoreSentinel,
+  k as OptionWrapper,
+  D as OptionsList,
+  y as PWrapper,
+  z as SearchContainer,
+  L as SearchIcon,
+  C as SearchInput,
+  W as SpinnerWrapper
 };

package/components/Icons/ChevronDown/index.js

@@ -0,0 +1,4 @@
+import r from "./ChevronDown.js";
+export {
+  r as default
+};

package/components/Icons/Search/index.js

@@ -0,0 +1,4 @@
+import a from "./Search.js";
+export {
+  a as default
+};

package/components/MenuItem/MenuItem.js

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

package/components/MenuItem/styles.js

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

package/package.json

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