meticulous-ui 3.7.11 → 3.7.13

package/components/Selectbox/Selectbox.js

@@ -1,430 +1,411 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useId, useRef, useMemo, useEffect, useLayoutEffect, useCallback } from "react";
-import PropTypes from "prop-types";
-import grey from "../../colors/grey.js";
-import colors from "../../colors/colorMap.js";
-import { blue } from "../../colors/blue.js";
-import Checkbox from "../Input/Checkbox/Checkbox.js";
-import Spinner from "../Spinner/Spinner.js";
-import styled, { css, keyframes } from "styled-components";
-import P from "../Typography/P/P.js";
-import ChevronDown from "../Icons/ChevronDown.js";
-import Search from "../Icons/Search.js";
-import white from "../../colors/white.js";
-const DEFAULT_BORDER = grey.m500;
-const rotate = keyframes`
+import { jsxs as C, jsx as c } from "react/jsx-runtime";
+import { useState as I, useId as _, useRef as F, useMemo as ue, useEffect as S, useLayoutEffect as fe, useCallback as he } from "react";
+import o from "prop-types";
+import d from "../../colors/grey.js";
+import be from "../../colors/colorMap.js";
+import { blue as ge } from "../../colors/blue.js";
+import xe from "../Input/Checkbox/Checkbox.js";
+import G from "../Spinner/Spinner.js";
+import s, { css as O, keyframes as J } from "styled-components";
+import $e from "../Typography/P/P.js";
+import we from "../Icons/ChevronDown.js";
+import ve from "../Icons/Search.js";
+import X from "../../colors/white.js";
+const ye = d.m500, ke = J`
   from { transform: rotate(0deg); }
   to { transform: rotate(180deg); }
-`;
-const reverse = keyframes`
+`, Ce = J`
   from { transform: rotate(180deg); }
   to { transform: rotate(0deg); }
-`;
-const SelectBoxWrapper = /*@__PURE__*/styled.div`
-  max-width: ${({
-  $width
-}) => $width};
+`, Ie = s.div`
+  max-width: ${({ $width: t }) => t};
   position: relative;
   outline: none;
 
-  ${({
-  $isDisabled
-}) => $isDisabled && css`
+  ${({ $isDisabled: t }) => t && O`
       pointer-events: none;
       opacity: 0.7;
     `}
 
-  ${({
-  $isLoading
-}) => $isLoading && css`
+  ${({ $isLoading: t }) => t && O`
       pointer-events: none;
       opacity: 0.7;
     `}
-`;
-const Box = /*@__PURE__*/styled.div`
+`, Se = s.div`
   height: 3.2rem;
-  width: ${({
-  $width
-}) => $width};
+  width: ${({ $width: t }) => t};
   border-radius: 0.96rem;
   outline: none;
-  border: ${({
-  $isOpen,
-  $isFocused,
-  $border
-}) => $isOpen || $isFocused ? `2px solid ${$border}` : `1px solid ${DEFAULT_BORDER}`};
+  border: ${({ $isOpen: t, $isFocused: m, $border: a }) => t || m ? `2px solid ${a}` : `1px solid ${ye}`};
   padding: 0.64rem 0.96rem 0.64rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
-`;
-const PWrapper = /*@__PURE__*/styled(P)`
+`, Oe = s($e)`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  max-width: calc(${({
-  $width
-}) => $width} - 3.2rem);
+  max-width: calc(${({ $width: t }) => t} - 3.2rem);
   pointer-events: none;
-`;
-const ChevronDownWrapper = /*@__PURE__*/styled(ChevronDown)`
-  animation: ${({
-  $isOpen
-}) => $isOpen ? rotate : reverse} 0.15s linear;
-  transform: rotate(${({
-  $isOpen
-}) => $isOpen ? 180 : 0}deg);
-`;
-const OptionWrapper = /*@__PURE__*/styled.div`
-  border: 1px solid ${grey.m700};
-  width: calc(${({
-  $width
-}) => $width} + 1.6rem);
+`, Ee = s(we)`
+  animation: ${({ $isOpen: t }) => t ? ke : Ce} 0.15s linear;
+  transform: rotate(${({ $isOpen: t }) => t ? 180 : 0}deg);
+`, ze = s.div`
+  border: 1px solid ${d.m700};
+  width: calc(${({ $width: t }) => t} + 1.6rem);
   display: flex;
   flex-direction: column;
   position: absolute;
   z-index: 1000;
-  background-color: ${white};
+  background-color: ${X};
   left: 0.24rem;
   max-height: 0;
   transition: max-height 0.15s ease-out;
   opacity: 0;
   overflow: hidden;
 
-  ${({
-  $isOpen
-}) => $isOpen && css`
-      max-height: ${({
-  $height
-}) => $height};
+  ${({ $isOpen: t }) => t && O`
+      max-height: ${({ $height: m }) => m};
       opacity: 1;
     `};
 
-  ${({
-  $top
-}) => $top ? css`
+  ${({ $top: t }) => t ? O`
           bottom: 100%;
           flex-direction: column-reverse;
           border-top-right-radius: 0.96rem;
           border-top-left-radius: 0.96rem;
           margin-bottom: 0.16rem;
-        ` : css`
+        ` : O`
           top: 100%;
           border-bottom-right-radius: 0.96rem;
           border-bottom-left-radius: 0.96rem;
           margin-top: 0.16rem;
         `}
-`;
-const OptionsList = /*@__PURE__*/styled.div`
+`, De = s.div`
   overflow-y: auto;
   flex: 1;
-`;
-const CheckboxItem = /*@__PURE__*/styled.div`
-  width: ${({
-  $width
-}) => $width};
+`, Fe = s.div`
+  width: ${({ $width: t }) => t};
   box-sizing: border-box;
-  background-color: ${({
-  $isHighlighted,
-  $hoverColor
-}) => $isHighlighted ? $hoverColor : "transparent"};
-  cursor: ${({
-  $isDisabled
-}) => $isDisabled ? "not-allowed" : "pointer"};
+  background-color: ${({ $isHighlighted: t, $hoverColor: m }) => t ? m : "transparent"};
+  cursor: ${({ $isDisabled: t }) => t ? "not-allowed" : "pointer"};
   padding: 0.96rem 1.6rem 1.28rem;
   margin-top: 0.16rem;
   display: flex;
   align-items: center;
   gap: 0.96rem;
-  pointer-events: ${({
-  $isDisabled
-}) => $isDisabled ? "none" : "auto"};
+  pointer-events: ${({ $isDisabled: t }) => t ? "none" : "auto"};
 
   &:active {
-    background-color: ${({
-  $activeColor
-}) => $activeColor};
+    background-color: ${({ $activeColor: t }) => t};
   }
-`;
-const SearchContainer = /*@__PURE__*/styled.div`
+`, Re = s.div`
   position: relative;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid ${grey.m300};
-  background: ${white};
+  border-bottom: 1px solid ${d.m300};
+  background: ${X};
 
   &:focus-within {
-    border-bottom-color: ${grey.m500};
+    border-bottom-color: ${d.m500};
   }
-`;
-const SearchInput = /*@__PURE__*/styled.input`
+`, Be = s.input`
   width: 100%;
   box-sizing: border-box;
   border: none;
   padding: 0.8rem 1.2rem 0.8rem 0;
   font-size: 1.92rem;
-  color: ${grey.m700};
+  color: ${d.m700};
   background: transparent;
   outline: none;
 
   &::placeholder {
-    color: ${grey.m400};
+    color: ${d.m400};
   }
-`;
-const SearchIcon = /*@__PURE__*/styled(Search)`
+`, Pe = s(ve)`
   margin: 0 1.28rem;
-`;
-const SpinnerWrapper = /*@__PURE__*/styled.div`
+`, We = s.div`
   position: absolute;
   top: 1.28rem;
   right: 1.92rem;
-`;
-const LoadMoreSentinel = /*@__PURE__*/styled.div`
+`, Ae = s.div`
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 1.6rem 0;
   min-height: 1.6rem;
   width: 100%;
-`;
-const getPixelValue = (value) => {
-  if (typeof value !== "string") return value;
-  if (value.endsWith("px")) return parseFloat(value);
-  if (value.endsWith("rem")) {
-    const remValue = parseFloat(value);
-    const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-    return remValue * rootFontSize;
+`, Te = (t) => {
+  if (typeof t != "string") return t;
+  if (t.endsWith("px")) return parseFloat(t);
+  if (t.endsWith("rem")) {
+    const m = parseFloat(t), a = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return m * a;
   }
-  return parseFloat(value);
-};
-const Selectbox = ({
-  options,
-  onChange,
-  value = [],
-  width = "32rem",
-  menuHeight = "32rem",
-  placeholder,
-  theme = "blue",
-  isDisabled,
-  isLoading,
-  searchable = false,
-  searchPh = "Search...",
-  onLoadMore,
-  hasMore = false,
-  isLoadingMore = false,
-  loaderColor,
-  ...rest
+  return parseFloat(t);
+}, je = ({
+  options: t,
+  onChange: m,
+  value: a = [],
+  width: g = "32rem",
+  menuHeight: R = "32rem",
+  placeholder: Y,
+  theme: Z = "blue",
+  isDisabled: x,
+  isLoading: E,
+  searchable: $ = !1,
+  searchPh: A = "Search...",
+  onLoadMore: p,
+  hasMore: w = !1,
+  isLoadingMore: u = !1,
+  loaderColor: T,
+  ...L
 }) => {
-  var _a;
-  const [isOpen, setOpen] = useState(false);
-  const [isFocused, setIsFocused] = useState(false);
-  const [position, setPosition] = useState("bottom");
-  const [searchQuery, setSearchQuery] = useState("");
-  const [activeIndex, setActiveIndex] = useState(-1);
-  const listboxId = useId();
-  const triggerId = useId();
-  const containerRef = useRef(null);
-  const menuRef = useRef(null);
-  const searchInputRef = useRef(null);
-  const sentinelRef = useRef(null);
-  const toggle = () => !isDisabled && !isLoading && setOpen((prev) => !prev);
-  const handleToggleOption = (val) => {
-    const next = value.includes(val) ? value.filter((v) => v !== val) : [...value, val];
-    onChange(next);
-  };
-  const filteredOptions = useMemo(() => {
-    if (!searchable || !searchQuery.trim()) return options;
-    const q = searchQuery.toLowerCase();
-    return options.filter(({
-      label
-    }) => label.toLowerCase().includes(q));
-  }, [options, searchQuery, searchable]);
-  useEffect(() => {
-    if (isOpen) {
-      const firstEnabled = filteredOptions.findIndex((opt) => !opt.disabled);
-      setActiveIndex(firstEnabled);
-    } else {
-      setSearchQuery("");
-      setActiveIndex(-1);
-    }
-  }, [isOpen]);
-  useEffect(() => {
-    if (isOpen && activeIndex !== -1 && menuRef.current) {
-      const el = menuRef.current.children[activeIndex];
-      if (el) el.scrollIntoView({
-        block: "nearest",
-        behavior: "auto"
-      });
+  var N;
+  const [n, v] = I(!1), [M, j] = I(!1), [ee, te] = I("bottom"), [z, H] = I(""), [l, y] = I(-1), D = _(), U = _(), f = F(null), k = F(null), B = F(null), V = F(null), re = () => !x && !E && v((e) => !e), P = (e) => {
+    const r = a.includes(e) ? a.filter((i) => i !== e) : [...a, e];
+    m(r);
+  }, h = ue(() => {
+    if (!$ || !z.trim()) return t;
+    const e = z.toLowerCase();
+    return t.filter(({ label: r }) => r.toLowerCase().includes(e));
+  }, [t, z, $]);
+  S(() => {
+    if (n) {
+      const e = h.findIndex((r) => !r.disabled);
+      y(e);
+    } else
+      H(""), y(-1);
+  }, [n]), S(() => {
+    if (n && l !== -1 && k.current) {
+      const e = k.current.children[l];
+      e && e.scrollIntoView({ block: "nearest", behavior: "auto" });
     }
-  }, [activeIndex, isOpen]);
-  useEffect(() => {
-    if (isOpen && searchable && searchInputRef.current) {
-      searchInputRef.current.focus();
-    }
-  }, [isOpen, searchable]);
-  useEffect(() => {
-    const handleOutsideClick = (event) => {
-      if (containerRef.current && !containerRef.current.contains(event.target)) {
-        setOpen(false);
-      }
+  }, [l, n]), S(() => {
+    n && $ && B.current && B.current.focus();
+  }, [n, $]), S(() => {
+    const e = (r) => {
+      f.current && !f.current.contains(r.target) && v(!1);
     };
-    document.addEventListener("mousedown", handleOutsideClick);
-    return () => document.removeEventListener("mousedown", handleOutsideClick);
-  }, []);
-  useLayoutEffect(() => {
-    if (isOpen && menuRef.current && containerRef.current) {
-      const containerRect = containerRef.current.getBoundingClientRect();
-      const viewportHeight = window.innerHeight;
-      const parsedMenuHeight = getPixelValue(menuHeight);
-      const spaceBelow = viewportHeight - containerRect.bottom;
-      const buffer = 8;
-      setPosition(spaceBelow < parsedMenuHeight + buffer && containerRect.top > spaceBelow ? "top" : "bottom");
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, []), fe(() => {
+    if (n && k.current && f.current) {
+      const e = f.current.getBoundingClientRect(), r = window.innerHeight, i = Te(R), b = r - e.bottom;
+      te(
+        b < i + 8 && e.top > b ? "top" : "bottom"
+      );
     }
-  }, [isOpen, menuHeight]);
-  const getNextEnabledIndex = (currentIndex) => {
-    let next = currentIndex + 1;
-    while (next < filteredOptions.length) {
-      if (!filteredOptions[next].disabled) return next;
-      next++;
+  }, [n, R]);
+  const oe = (e) => {
+    let r = e + 1;
+    for (; r < h.length; ) {
+      if (!h[r].disabled) return r;
+      r++;
     }
-    return currentIndex;
-  };
-  const getPrevEnabledIndex = (currentIndex) => {
-    let prev = currentIndex - 1;
-    while (prev >= 0) {
-      if (!filteredOptions[prev].disabled) return prev;
-      prev--;
+    return e;
+  }, ne = (e) => {
+    let r = e - 1;
+    for (; r >= 0; ) {
+      if (!h[r].disabled) return r;
+      r--;
     }
-    return currentIndex;
-  };
-  const handleLoadMore = useCallback(() => {
-    if (hasMore && !isLoadingMore && onLoadMore) onLoadMore();
-  }, [hasMore, isLoadingMore, onLoadMore]);
-  useEffect(() => {
-    const sentinel = sentinelRef.current;
-    if (!sentinel || !onLoadMore || !hasMore) return;
-    const observer = new IntersectionObserver(([entry]) => {
-      if (entry.isIntersecting && !isLoadingMore) handleLoadMore();
-    }, {
-      root: menuRef.current,
-      threshold: 0.1,
-      rootMargin: "20px"
-    });
-    observer.observe(sentinel);
-    return () => observer.disconnect();
-  }, [handleLoadMore, onLoadMore, hasMore, isLoadingMore]);
-  const handleKeyDown = (e) => {
-    if (isDisabled || isLoading) return;
-    if (!isOpen) {
-      if (e.key === " " || e.key === "Enter" || e.key === "ArrowDown" || e.key === "ArrowUp") {
-        e.preventDefault();
-        setOpen(true);
-      }
-      return;
-    }
-    switch (e.key) {
-      case "ArrowDown": {
-        e.preventDefault();
-        const nextIndex = getNextEnabledIndex(activeIndex);
-        if (nextIndex === activeIndex && hasMore && !isLoadingMore) onLoadMore == null ? void 0 : onLoadMore();
-        setActiveIndex(nextIndex);
-        break;
+    return e;
+  }, K = he(() => {
+    w && !u && p && p();
+  }, [w, u, p]);
+  S(() => {
+    const e = V.current;
+    if (!e || !p || !w) return;
+    const r = new IntersectionObserver(
+      ([i]) => {
+        i.isIntersecting && !u && K();
+      },
+      { root: k.current, threshold: 0.1, rootMargin: "20px" }
+    );
+    return r.observe(e), () => r.disconnect();
+  }, [K, p, w, u]);
+  const ie = (e) => {
+    if (!(x || E)) {
+      if (!n) {
+        (e.key === " " || e.key === "Enter" || e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), v(!0));
+        return;
       }
-      case "ArrowUp": {
-        e.preventDefault();
-        setActiveIndex(getPrevEnabledIndex(activeIndex));
-        break;
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          const i = oe(l);
+          i === l && w && !u && (p == null || p()), y(i);
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault(), y(ne(l));
+          break;
+        }
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          const r = h[l];
+          r && !r.disabled && P(r.value);
+          break;
+        case "Escape":
+          v(!1);
+          break;
       }
-      case "Enter":
-      case " ":
-        e.preventDefault();
-        const opt = filteredOptions[activeIndex];
-        if (opt && !opt.disabled) handleToggleOption(opt.value);
-        break;
-      case "Escape":
-        setOpen(false);
-        break;
     }
+  }, {
+    m50: se,
+    m100: ae,
+    m500: Q,
+    m800: ce
+  } = (N = be[Z]) != null ? N : ge, le = (e, r) => () => !e && y(r), q = (e) => `${D}-opt-${e}`, de = a.length === 0 ? Y : `${a.length} selected`, me = ({ value: e, label: r, disabled: i }, b) => {
+    const W = a.includes(e);
+    return /* @__PURE__ */ c(
+      Fe,
+      {
+        id: q(b),
+        role: "option",
+        "aria-selected": W,
+        "aria-disabled": i || void 0,
+        $width: `calc(${g} + 1.6rem)`,
+        $isHighlighted: b === l,
+        $isDisabled: i,
+        $hoverColor: se,
+        $activeColor: ae,
+        onClick: () => P(e),
+        onMouseEnter: le(i, b),
+        title: r,
+        children: /* @__PURE__ */ c("div", { onClick: (pe) => pe.stopPropagation(), children: /* @__PURE__ */ c(
+          xe,
+          {
+            value: W,
+            onChange: () => P(e),
+            label: r,
+            disabled: i,
+            innerShade: Q,
+            outerShade: ce,
+            tabIndex: -1
+          }
+        ) })
+      },
+      e
+    );
   };
-  const {
-    m50: hoverColor,
-    m100: activeColor,
-    m500: border,
-    m800: cbOuterShade
-  } = (_a = colors[theme]) != null ? _a : blue;
-  const mouseHighlight = (disabled, index) => () => !disabled && setActiveIndex(index);
-  const getOptionId = (index) => `${listboxId}-opt-${index}`;
-  const displayLabel = value.length === 0 ? placeholder : `${value.length} selected`;
-  const renderOption = ({
-    value: val,
-    label,
-    disabled
-  }, index) => {
-    const isChecked = value.includes(val);
-    return /* @__PURE__ */ jsx(CheckboxItem, { id: getOptionId(index), role: "option", "aria-selected": isChecked, "aria-disabled": disabled || void 0, $width: `calc(${width} + 1.6rem)`, $isHighlighted: index === activeIndex, $isDisabled: disabled, $hoverColor: hoverColor, $activeColor: activeColor, onClick: () => handleToggleOption(val), onMouseEnter: mouseHighlight(disabled, index), title: label, children: /* @__PURE__ */ jsx("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(Checkbox, { value: isChecked, onChange: () => handleToggleOption(val), label, disabled, innerShade: border, outerShade: cbOuterShade, tabIndex: -1 }) }) }, val);
-  };
-  const handleBlur = (e) => {
-    var _a2;
-    if (!((_a2 = containerRef.current) == null ? void 0 : _a2.contains(e.relatedTarget))) {
-      setIsFocused(false);
-      setOpen(false);
+  return /* @__PURE__ */ C(
+    Ie,
+    {
+      ref: f,
+      $width: g,
+      $isDisabled: x,
+      $isLoading: E,
+      onKeyDown: ie,
+      onBlur: (e) => {
+        var r;
+        (r = f.current) != null && r.contains(e.relatedTarget) || (j(!1), v(!1));
+      },
+      onFocus: () => j(!0),
+      ...L,
+      children: [
+        /* @__PURE__ */ C(
+          Se,
+          {
+            id: U,
+            role: "button",
+            $width: g,
+            onClick: re,
+            $isOpen: n,
+            $border: Q,
+            $isFocused: M && !n,
+            tabIndex: x ? -1 : 0,
+            "aria-haspopup": "listbox",
+            "aria-expanded": n,
+            "aria-controls": D,
+            "aria-disabled": x || void 0,
+            "aria-activedescendant": l !== -1 ? q(l) : void 0,
+            children: [
+              /* @__PURE__ */ c(Oe, { $width: g, color: a.length > 0 ? d.m700 : d.m500, size: "1.92rem", children: de }),
+              /* @__PURE__ */ c(Ee, { color: d.m500, size: 22, $isOpen: n, "aria-hidden": !0 })
+            ]
+          }
+        ),
+        /* @__PURE__ */ C(ze, { $isOpen: n, $width: g, $height: R, $top: ee === "top", children: [
+          $ && /* @__PURE__ */ C(Re, { onClick: (e) => e.stopPropagation(), children: [
+            /* @__PURE__ */ c(Pe, { size: 20, color: d.m600, "aria-hidden": !0 }),
+            /* @__PURE__ */ c(
+              Be,
+              {
+                ref: B,
+                value: z,
+                onChange: (e) => H(e.target.value),
+                placeholder: A,
+                "aria-label": A,
+                "aria-controls": D,
+                "aria-autocomplete": "list",
+                "aria-expanded": n,
+                role: "combobox",
+                tabIndex: n ? 0 : -1
+              }
+            )
+          ] }),
+          /* @__PURE__ */ C(
+            De,
+            {
+              ref: k,
+              role: "listbox",
+              id: D,
+              tabIndex: -1,
+              "aria-multiselectable": !0,
+              "aria-labelledby": U,
+              children: [
+                h.map(me),
+                p && /* @__PURE__ */ c(Ae, { ref: V, children: u && /* @__PURE__ */ c(G, { size: "small", color: T }) })
+              ]
+            }
+          )
+        ] }),
+        E && /* @__PURE__ */ c(We, { children: /* @__PURE__ */ c(G, { size: "small", color: T }) })
+      ]
     }
-  };
-  return /* @__PURE__ */ jsxs(SelectBoxWrapper, { ref: containerRef, $width: width, $isDisabled: isDisabled, $isLoading: isLoading, onKeyDown: handleKeyDown, onBlur: handleBlur, onFocus: () => setIsFocused(true), ...rest, children: [
-    /* @__PURE__ */ jsxs(Box, { id: triggerId, role: "button", $width: width, onClick: toggle, $isOpen: isOpen, $border: border, $isFocused: isFocused && !isOpen, tabIndex: isDisabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-disabled": isDisabled || void 0, "aria-activedescendant": activeIndex !== -1 ? getOptionId(activeIndex) : void 0, children: [
-      /* @__PURE__ */ jsx(PWrapper, { $width: width, color: value.length > 0 ? grey.m700 : grey.m500, size: "1.92rem", children: displayLabel }),
-      /* @__PURE__ */ jsx(ChevronDownWrapper, { color: grey.m500, size: 22, $isOpen: isOpen, "aria-hidden": true })
-    ] }),
-    /* @__PURE__ */ jsxs(OptionWrapper, { $isOpen: isOpen, $width: width, $height: menuHeight, $top: position === "top", children: [
-      searchable && /* @__PURE__ */ jsxs(SearchContainer, { onClick: (e) => e.stopPropagation(), children: [
-        /* @__PURE__ */ jsx(SearchIcon, { size: 20, color: grey.m600, "aria-hidden": true }),
-        /* @__PURE__ */ jsx(SearchInput, { ref: searchInputRef, value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: searchPh, "aria-label": searchPh, "aria-controls": listboxId, "aria-autocomplete": "list", "aria-expanded": isOpen, role: "combobox", tabIndex: isOpen ? 0 : -1 })
-      ] }),
-      /* @__PURE__ */ jsxs(OptionsList, { ref: menuRef, role: "listbox", id: listboxId, tabIndex: -1, "aria-multiselectable": true, "aria-labelledby": triggerId, children: [
-        filteredOptions.map(renderOption),
-        onLoadMore && /* @__PURE__ */ jsx(LoadMoreSentinel, { ref: sentinelRef, children: isLoadingMore && /* @__PURE__ */ jsx(Spinner, { size: "small", color: loaderColor }) })
-      ] })
-    ] }),
-    isLoading && /* @__PURE__ */ jsx(SpinnerWrapper, { children: /* @__PURE__ */ jsx(Spinner, { size: "small", color: loaderColor }) })
-  ] });
+  );
 };
-Selectbox.propTypes = {
+je.propTypes = {
   /** Array of option objects: `{ value, label, disabled? }` */
-  options: /* @__PURE__ */ PropTypes.arrayOf(/* @__PURE__ */ PropTypes.shape({
-    value: PropTypes.any,
-    label: PropTypes.string,
-    disabled: PropTypes.bool
-  })),
+  options: o.arrayOf(
+    o.shape({
+      value: o.any,
+      label: o.string,
+      disabled: o.bool
+    })
+  ),
   /** Array of currently selected values (controlled multi-select). Defaults to `[]` */
-  value: /* @__PURE__ */ PropTypes.arrayOf(PropTypes.any),
+  value: o.arrayOf(o.any),
   /** Called with the updated array of selected values on each change */
-  onChange: PropTypes.func,
+  onChange: o.func,
   /** CSS width of the selectbox trigger. Defaults to `'32rem'` */
-  width: PropTypes.string,
+  width: o.string,
   /** Maximum CSS height of the dropdown menu. Defaults to `'32rem'` */
-  menuHeight: PropTypes.string,
+  menuHeight: o.string,
   /** Placeholder text shown when nothing is selected */
-  placeholder: PropTypes.string,
+  placeholder: o.string,
   /** Color theme key. Defaults to `'blue'` */
-  theme: PropTypes.string,
+  theme: o.string,
   /** Disables the selectbox */
-  isDisabled: PropTypes.bool,
+  isDisabled: o.bool,
   /** Shows a spinner inside the trigger and disables interaction */
-  isLoading: PropTypes.bool,
+  isLoading: o.bool,
   /** Color key for the loading spinner */
-  loaderColor: PropTypes.string,
+  loaderColor: o.string,
   /** Adds a search input inside the dropdown menu */
-  searchable: PropTypes.bool,
+  searchable: o.bool,
   /** Placeholder text for the search input. Defaults to `'Search...'` */
-  searchPh: PropTypes.string,
+  searchPh: o.string,
   /** Called when the user scrolls to the bottom of the list (infinite scroll) */
-  onLoadMore: PropTypes.func,
+  onLoadMore: o.func,
   /** Whether more options are available to load */
-  hasMore: PropTypes.bool,
+  hasMore: o.bool,
   /** Shows a spinner at the bottom while loading more options */
-  isLoadingMore: PropTypes.bool
+  isLoadingMore: o.bool
 };
 export {
-  Selectbox as default
+  je as default
 };