@dreamtree-org/twreact-ui 1.3.11 → 2.0.0

package/dist/esm/components/core/Select.js

@@ -1,13 +1,20 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray, typeof as _typeof, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useState, useRef, useImperativeHandle, useId, useMemo, useEffect, useLayoutEffect } from 'react';
+import React, { useState, useRef, useCallback, useImperativeHandle, useId, useMemo, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { cn } from '../../utils/cn.js';
+import { setRefs } from '../../utils/position.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 import { useLatestRef } from '../../hooks/useLatestRef.js';
+import { useMediaQuery } from '../../hooks/useMediaQuery.js';
+import { usePresentation } from '../../hooks/usePresentation.js';
+import { useFloatingPosition } from '../../hooks/useFloatingPosition.js';
+import Sheet from '../feedback/Sheet.js';
+import Button from './Button.js';
 import { ChevronDown, X, Check, Search, Plus } from 'lucide-react';
 
-var _excluded = ["options", "value", "onChange", "placeholder", "label", "error", "helperText", "disabled", "required", "multiSelect", "searchable", "grouped", "onMenuItemRender", "className", "allowClear", "creatable", "onCreateOption", "onSearch", "loading", "selectAllOption", "closeOnSelect", "maxTagCount", "renderGroupLabel", "name", "size"];
+var _excluded = ["options", "value", "onChange", "placeholder", "label", "error", "helperText", "disabled", "required", "multiSelect", "searchable", "grouped", "onMenuItemRender", "className", "allowClear", "creatable", "onCreateOption", "onSearch", "loading", "selectAllOption", "closeOnSelect", "maxTagCount", "renderGroupLabel", "name", "size", "presentation"];
 /**
  * Enhanced Select component (debounce removed)
  * - Supports single and multi select
@@ -19,8 +26,8 @@ var _excluded = ["options", "value", "onChange", "placeholder", "label", "error"
  * - ARIA & keyboard accessibility
  * - Custom render per option via onMenuItemRender
  * - Max tag count with overflow indicator
- * - Auto-flip dropdown if not enough space below; use above instead
- * - Adjusts dropdown max-height to available space
+ * - Popover: anchored with useFloatingPosition (flip / shift / size)
+ * - Sheet: a bottom Sheet on small touch screens (`presentation`, ADR 0001)
  */
 var isPlainObject = function isPlainObject(v) {
   return v !== null && _typeof(v) === "object";
@@ -109,6 +116,13 @@ var highlight = function highlight() {
 // Trigger sizes. min-h (not h) so multi-select tags can wrap. `md` keeps its
 // desktop look but grows to the 44px touch target on coarse pointers; `lg` is
 // 44px everywhere.
+// Popover menu height cap (px); it also shrinks to the room left on its side.
+var MENU_MAX_HEIGHT = 250;
+// Option rows: compact in the popover, 48px touch rows in the sheet.
+var ROW_CLASSES = {
+  popover: "px-3 py-2 text-sm",
+  sheet: "min-h-12 px-4 py-3 text-base"
+};
 var SIZE_CLASSES = {
   sm: "min-h-8 px-2.5 py-1 text-xs",
   md: "min-h-[38px] px-3 py-2 text-sm [@media(pointer:coarse)]:min-h-11",
@@ -152,6 +166,8 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     name = _ref.name,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "md" : _ref$size,
+    _ref$presentation = _ref.presentation,
+    presentation = _ref$presentation === void 0 ? "auto" : _ref$presentation,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -174,20 +190,33 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var searchRef = useRef(null);
   var menuRef = useRef(null);
   var listboxRef = useRef(null);
-  // New: dropdown placement & max height
-  var _useState9 = useState("bottom"),
-    _useState0 = _slicedToArray(_useState9, 2),
-    placement = _useState0[0],
-    setPlacement = _useState0[1]; // "bottom" | "top"
-  var _useState1 = useState(null),
-    _useState10 = _slicedToArray(_useState1, 2),
-    menuMaxHeight = _useState10[0],
-    setMenuMaxHeight = _useState10[1]; // px or null
-  // Fixed-position coordinates for the portaled menu (anchored to the trigger).
-  var _useState11 = useState(null),
-    _useState12 = _slicedToArray(_useState11, 2),
-    menuCoords = _useState12[0],
-    setMenuCoords = _useState12[1]; // { left, top, width } in viewport px
+  // 'sheet' on small touch screens (or when forced), else 'popover'.
+  var isSheet = usePresentation(presentation) === "sheet";
+  // Focusing the search box pops the on-screen keyboard over the options,
+  // so touch users get the listbox focused instead and tap search to type.
+  var isCoarse = useMediaQuery("(pointer: coarse)");
+  var autoFocusSearch = searchable && !isSheet && !isCoarse;
+  // Popover mode: the portaled menu is anchored to the trigger wrapper.
+  var _useFloatingPosition = useFloatingPosition({
+      placement: "bottom-start",
+      offset: 4,
+      matchWidth: "exact",
+      maxHeight: MENU_MAX_HEIGHT,
+      strategy: "fixed",
+      open: isOpen && !isSheet
+    }),
+    floatingRefs = _useFloatingPosition.refs,
+    floatingStyles = _useFloatingPosition.floatingStyles,
+    floatingPlacement = _useFloatingPosition.placement,
+    isPositioned = _useFloatingPosition.isPositioned;
+  var setReference = floatingRefs.setReference,
+    setFloating = floatingRefs.setFloating;
+  var wrapperRef = useCallback(function (node) {
+    return setRefs(node, selectRef, setReference);
+  }, [setReference]);
+  var popoverRef = useCallback(function (node) {
+    return setRefs(node, menuRef, setFloating);
+  }, [setFloating]);
   useImperativeHandle(forwardedRef, function () {
     return selectRef.current;
   }, []);
@@ -278,10 +307,22 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   };
   var activeDescendant = isOpen && focusedIndex >= 0 && focusedIndex < navOptions.length ? optionId(focusedIndex) : undefined;
   // A new search term or a collapsed group changes what the rows are, so
-  // the active row no longer means the same option: start over.
-  useEffect(function () {
+  // the active row no longer means the same option: start over. Adjusted
+  // during render (previous-value pattern), not in an effect.
+  var _useState9 = useState({
+      searchTerm: searchTerm,
+      collapsedGroups: collapsedGroups
+    }),
+    _useState0 = _slicedToArray(_useState9, 2),
+    rowsKey = _useState0[0],
+    setRowsKey = _useState0[1];
+  if (rowsKey.searchTerm !== searchTerm || rowsKey.collapsedGroups !== collapsedGroups) {
+    setRowsKey({
+      searchTerm: searchTerm,
+      collapsedGroups: collapsedGroups
+    });
     setFocusedIndex(-1);
-  }, [searchTerm, collapsedGroups]);
+  }
   // Keep the active option visible while arrowing through a long list.
   useEffect(function () {
     var _el$scrollIntoView;
@@ -291,101 +332,22 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
       block: "nearest"
     });
   }, [activeDescendant]);
-  // ===== Placement/space calculation =====
-  var calculatePlacement = function calculatePlacement() {
-    var MARGIN = 8; // px margin from viewport edges
-    var DEFAULT_MENU_MAX = 240; // fallback max (approx 15rem)
-    if (!selectRef.current) return;
-    var rect = selectRef.current.getBoundingClientRect();
-    var viewportH = window.innerHeight;
-    var spaceBelow = viewportH - rect.bottom - MARGIN;
-    var spaceAbove = rect.top - MARGIN;
-    // desired approximate menu height (we can try to measure menu if already rendered)
-    var desiredMenuHeight = DEFAULT_MENU_MAX;
-    if (menuRef.current) {
-      // when menu exists, use its scrollHeight as desired
-      desiredMenuHeight = Math.min(menuRef.current.scrollHeight, DEFAULT_MENU_MAX);
-    }
-    // decide placement: prefer bottom unless not enough space and top has more space
-    var nextPlacement;
-    var nextMaxHeight;
-    if (spaceBelow >= desiredMenuHeight || spaceBelow >= spaceAbove) {
-      nextPlacement = "bottom";
-      nextMaxHeight = Math.min(desiredMenuHeight, Math.max(80, spaceBelow));
-    } else {
-      nextPlacement = "top";
-      nextMaxHeight = Math.min(desiredMenuHeight, Math.max(80, spaceAbove));
-    }
-    setPlacement(nextPlacement);
-    setMenuMaxHeight(nextMaxHeight);
-    // The menu is portaled to document.body with position:fixed, so it floats
-    // above any ancestor with overflow:hidden|auto|scroll. Anchor it to the
-    // trigger via the viewport-relative rect (no scroll offset for fixed).
-    // maxHeight here mirrors the inline style applied to the menu (+10 fudge).
-    var renderedMaxHeight = nextMaxHeight + 10;
-    var next = {
-      left: rect.left,
-      width: rect.width
-    };
-    if (nextPlacement === "bottom") {
-      next.top = rect.bottom + 4; // ~mt-1
-    } else {
-      // place above the trigger; bottom of menu sits just above the trigger top
-      next.top = Math.max(MARGIN, rect.top - 4 - renderedMaxHeight);
-    }
-    setMenuCoords(next);
-  };
-  // Anchor the portaled menu BEFORE the browser paints, so it never flashes
-  // at (0,0). The menu is already in the DOM (createPortal runs during render),
-  // we just need its fixed coords set synchronously.
-  useLayoutEffect(function () {
-    if (isOpen) calculatePlacement();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen, filtered.length]);
+  // Popover mode: move focus into the popup once it is in the DOM
+  // (WAI-ARIA collapsible listbox) — the search box when searchable on a
+  // fine pointer, otherwise the listbox itself. Both carry
+  // aria-activedescendant and the same key handling as the trigger. The
+  // sheet moves focus itself (to the listbox, via `initialFocus`).
   useEffect(function () {
-    if (!isOpen) {
-      // drop stale coords so the next open re-anchors from scratch
-      setMenuCoords(null);
-      return;
-    }
-    // initial calc on open; wait a tick to allow DOM to render
+    if (!isOpen || isSheet) return undefined;
     var raf = requestAnimationFrame(function () {
       var _searchRef$current, _listboxRef$current;
-      calculatePlacement();
-      // Move focus into the popup (WAI-ARIA collapsible listbox): the search
-      // box when searchable, otherwise the listbox itself. Both carry
-      // aria-activedescendant and the same key handling as the trigger.
       var inMenu = menuRef.current && menuRef.current.contains(document.activeElement);
-      if (searchable) (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 || _searchRef$current.focus();else if (!inMenu) (_listboxRef$current = listboxRef.current) === null || _listboxRef$current === void 0 || _listboxRef$current.focus();
-    });
-    // Reposition on resize/scroll while open (throttled by rAF). Use
-    // capture-phase scroll so we also catch any scrolling ancestor — the
-    // menu is portaled with position:fixed, so its coords must track the
-    // trigger as the page (or a scroll container) moves.
-    var rafId = null;
-    var onWindowChange = function onWindowChange() {
-      if (rafId) cancelAnimationFrame(rafId);
-      rafId = requestAnimationFrame(function () {
-        return calculatePlacement();
-      });
-    };
-    window.addEventListener("resize", onWindowChange, {
-      passive: true
-    });
-    window.addEventListener("scroll", onWindowChange, {
-      passive: true,
-      capture: true
+      if (autoFocusSearch) (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 || _searchRef$current.focus();else if (!inMenu) (_listboxRef$current = listboxRef.current) === null || _listboxRef$current === void 0 || _listboxRef$current.focus();
     });
     return function () {
-      cancelAnimationFrame(raf);
-      if (rafId) cancelAnimationFrame(rafId);
-      window.removeEventListener("resize", onWindowChange);
-      window.removeEventListener("scroll", onWindowChange, {
-        capture: true
-      });
+      return cancelAnimationFrame(raf);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen, searchable, filtered.length]);
+  }, [isOpen, isSheet, autoFocusSearch]);
   // ===== handlers =====
   // Close the popup. When focus is inside it (the portaled menu unmounts),
   // hand focus back to the trigger so keyboard users are not dropped on
@@ -445,7 +407,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         setIsOpen(true);
         setTimeout(function () {
           var _searchRef$current2;
-          return searchable ? (_searchRef$current2 = searchRef.current) === null || _searchRef$current2 === void 0 ? void 0 : _searchRef$current2.focus() : null;
+          return autoFocusSearch ? (_searchRef$current2 = searchRef.current) === null || _searchRef$current2 === void 0 ? void 0 : _searchRef$current2.focus() : null;
         }, 0);
       }
       return;
@@ -509,8 +471,9 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         break;
       case "Tab":
         // Leaving the (portaled) popup: close it and continue the tab order
-        // from the trigger rather than from the end of <body>.
-        closeMenu();
+        // from the trigger rather than from the end of <body>. The sheet is
+        // modal and traps Tab (search -> options -> Done) instead.
+        if (!isSheet) closeMenu();
         break;
     }
   };
@@ -545,14 +508,18 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
             children: [jsx("span", {
               className: "truncate max-w-[8rem]",
               children: opt.label
-            }), jsx("div", {
+            }), jsx("span", {
               "aria-label": "Remove ".concat(opt.label),
+              // 44px hit area on coarse pointers; the negative margins
+              // keep the pill its compact size.
+              className: cn("inline-flex items-center justify-center cursor-pointer", TOUCH_TARGET, "[@media(pointer:coarse)]:-my-4 [@media(pointer:coarse)]:-mr-3"),
               onClick: function onClick(e) {
                 e.stopPropagation();
                 handleSelect(opt);
               },
               children: jsx(X, {
-                className: "h-3 w-3"
+                className: "h-3 w-3",
+                "aria-hidden": "true"
               })
             })]
           }, opt.value);
@@ -584,6 +551,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var renderGroupedOptions = function renderGroupedOptions() {
     // Running index into `navOptions` (render order, collapsed skipped).
     var navIndex = -1;
+    var rowClass = ROW_CLASSES[isSheet ? "sheet" : "popover"];
     return jsx("div", {
       className: "divide-y",
       children: filtered.map(function (group, gi) {
@@ -630,7 +598,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
                 onClick: function onClick() {
                   return handleSelect(option);
                 },
-                className: cn("flex items-center px-3 py-2 text-sm hover:bg-gray-100 cursor-pointer", {
+                className: cn("flex items-center hover:bg-gray-100 cursor-pointer", rowClass, {
                   "opacity-50 cursor-not-allowed": option.disabled,
                   "bg-primary-50 text-primary-600": focusedIndex === index
                 }),
@@ -668,7 +636,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
           onClick: function onClick() {
             return handleSelect(option);
           },
-          className: cn("flex items-center px-3 py-2 text-sm hover:bg-gray-100 cursor-pointer", {
+          className: cn("flex items-center hover:bg-gray-100 cursor-pointer", ROW_CLASSES[isSheet ? "sheet" : "popover"], {
             "opacity-50 cursor-not-allowed": option.disabled,
             "bg-primary-50 text-primary-600": focusedIndex === index,
             "bg-primary-100": multiSelect && selectedValues.includes(option.value)
@@ -699,6 +667,67 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
       })]
     });
   };
+  var renderSearch = function renderSearch() {
+    return jsxs("div", {
+      className: "relative",
+      children: [selectAllOption && multiSelect && jsx("div", {
+        className: " text-sm flex items-center gap-2 border-b absolute left-1 top-1/2 h-4 w-4 -translate-y-1/2",
+        children: function () {
+          var allSelected = selectedValues.length === flatOptions.filter(function (o) {
+            return !o.disabled;
+          }).length;
+          return jsx("button", {
+            type: "button",
+            onClick: handleSelectAll,
+            "aria-label": allSelected ? "Deselect all" : "Select all",
+            "aria-pressed": allSelected,
+            className: "text-sm rounded focus:outline-none focus:ring-2 focus:ring-primary-500",
+            children: allSelected ? jsx(Check, {
+              className: "h-4 w-4 text-primary-600",
+              "aria-hidden": "true"
+            }) : jsx("div", {
+              className: "h-4 w-4 rounded border border-gray-300"
+            })
+          });
+        }()
+      }), jsx("input", {
+        ref: searchRef,
+        type: "text",
+        className: cn("w-full rounded-md border-0 bg-transparent pl-8 pr-3 py-1 focus:outline-none focus:ring-0",
+        // 16px in the sheet so iOS does not zoom the page on focus.
+        isSheet ? "min-h-11 text-base" : "text-sm", {
+          "pl-2": !(selectAllOption && multiSelect)
+        }),
+        placeholder: "Search...",
+        value: searchTerm,
+        onChange: function onChange(e) {
+          return setSearchTerm(e.target.value);
+        },
+        onKeyDown: handleKeyDown,
+        "aria-label": "Search options",
+        "aria-controls": listboxId,
+        "aria-activedescendant": activeDescendant,
+        "aria-autocomplete": "list"
+      }), jsx(Search, {
+        className: "absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-primary-400"
+      })]
+    });
+  };
+  var renderListbox = function renderListbox() {
+    return jsx("div", {
+      ref: listboxRef,
+      className: "overflow-auto focus:outline-none",
+      role: "listbox",
+      id: listboxId,
+      tabIndex: -1,
+      "aria-labelledby": label ? labelId : undefined,
+      "aria-label": label ? undefined : "Options",
+      "aria-multiselectable": multiSelect,
+      "aria-activedescendant": activeDescendant,
+      onKeyDown: handleKeyDown,
+      children: grouped ? renderGroupedOptions() : renderFlatOptions()
+    });
+  };
   return jsxs("div", {
     className: "w-full",
     children: [label && jsxs("label", {
@@ -710,13 +739,13 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         children: "*"
       })]
     }), jsxs("div", {
-      ref: selectRef,
+      ref: wrapperRef,
       className: "relative",
       children: [jsxs("button", _objectSpread2(_objectSpread2({
         ref: triggerRef,
         type: "button",
         id: baseId,
-        "aria-haspopup": "listbox",
+        "aria-haspopup": isSheet ? "dialog" : "listbox",
         "aria-expanded": isOpen,
         "aria-controls": isOpen ? listboxId : undefined,
         "aria-labelledby": label ? "".concat(labelId, " ").concat(valueId) : valueId,
@@ -734,7 +763,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
             });
             setTimeout(function () {
               var _searchRef$current3;
-              return searchable ? (_searchRef$current3 = searchRef.current) === null || _searchRef$current3 === void 0 ? void 0 : _searchRef$current3.focus() : null;
+              return autoFocusSearch ? (_searchRef$current3 = searchRef.current) === null || _searchRef$current3 === void 0 ? void 0 : _searchRef$current3.focus() : null;
             }, 0);
           }
         },
@@ -755,7 +784,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         type: "button",
         onClick: handleClear,
         "aria-label": "Clear selection",
-        className: "absolute right-8 top-1/2 -translate-y-1/2 rounded p-1 text-primary-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500",
+        className: cn("absolute right-8 top-1/2 -translate-y-1/2 inline-flex items-center justify-center rounded p-1 text-primary-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500", TOUCH_TARGET),
         children: jsx(X, {
           className: "h-4 w-4",
           "aria-hidden": "true"
@@ -776,81 +805,47 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         type: "hidden",
         name: name,
         value: selectedValues !== null && selectedValues !== void 0 ? selectedValues : ""
-      })), isOpen && typeof document !== "undefined" && /*#__PURE__*/createPortal(jsxs("div", {
-        ref: menuRef,
-        className: cn("fixed z-50 rounded-md border border-gray-300 bg-white shadow-lg"),
+      })), isOpen && !isSheet && typeof document !== "undefined" && /*#__PURE__*/createPortal(jsxs("div", {
+        ref: popoverRef,
+        className: "fixed z-popover overflow-auto rounded-md border border-gray-300 bg-white shadow-lg",
         role: "dialog",
-        "data-placement": placement,
+        "data-placement": floatingPlacement.split("-")[0],
         // Portaled to document.body with position:fixed so the menu
-        // escapes any ancestor overflow:hidden|auto|scroll. Coordinates
-        // are anchored to the trigger's viewport rect; width matches the
-        // trigger; maxHeight is driven by available space.
-        style: _objectSpread2({
-          left: menuCoords ? "".concat(menuCoords.left, "px") : undefined,
-          top: menuCoords ? "".concat(menuCoords.top, "px") : undefined,
-          width: menuCoords ? "".concat(menuCoords.width, "px") : undefined
-        }, menuMaxHeight ? {
-          maxHeight: "".concat(menuMaxHeight + 10, "px"),
-          overflow: "auto"
-        } : {}),
+        // escapes any ancestor overflow:hidden|auto|scroll. Anchored
+        // by useFloatingPosition (flip / shift; width matches the
+        // trigger; max-height follows the room left). Transparent
+        // until the first position so it never flashes at (0,0).
+        style: _objectSpread2(_objectSpread2({}, floatingStyles), isPositioned ? {} : {
+          opacity: 0
+        }),
         children: [searchable && jsx("div", {
           className: "border-b border-gray-200 p-2",
-          children: jsxs("div", {
-            className: "relative",
-            children: [selectAllOption && multiSelect && jsx("div", {
-              className: " text-sm flex items-center gap-2 border-b absolute left-1 top-1/2 h-4 w-4 -translate-y-1/2",
-              children: function () {
-                var allSelected = selectedValues.length === flatOptions.filter(function (o) {
-                  return !o.disabled;
-                }).length;
-                return jsx("button", {
-                  type: "button",
-                  onClick: handleSelectAll,
-                  "aria-label": allSelected ? "Deselect all" : "Select all",
-                  "aria-pressed": allSelected,
-                  className: "text-sm rounded focus:outline-none focus:ring-2 focus:ring-primary-500",
-                  children: allSelected ? jsx(Check, {
-                    className: "h-4 w-4 text-primary-600",
-                    "aria-hidden": "true"
-                  }) : jsx("div", {
-                    className: "h-4 w-4 rounded border border-gray-300"
-                  })
-                });
-              }()
-            }), jsx("input", {
-              ref: searchRef,
-              type: "text",
-              className: cn("w-full rounded-md border-0 bg-transparent pl-8 pr-3 py-1 text-sm focus:outline-none focus:ring-0", {
-                "pl-2": !(selectAllOption && multiSelect)
-              }),
-              placeholder: "Search...",
-              value: searchTerm,
-              onChange: function onChange(e) {
-                return setSearchTerm(e.target.value);
-              },
-              onKeyDown: handleKeyDown,
-              "aria-label": "Search options",
-              "aria-controls": listboxId,
-              "aria-activedescendant": activeDescendant,
-              "aria-autocomplete": "list"
-            }), jsx(Search, {
-              className: "absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-primary-400"
-            })]
-          })
-        }), jsx("div", {
-          ref: listboxRef,
-          className: "overflow-auto focus:outline-none",
-          role: "listbox",
-          id: listboxId,
-          tabIndex: -1,
-          "aria-labelledby": label ? labelId : undefined,
-          "aria-label": label ? undefined : "Options",
-          "aria-multiselectable": multiSelect,
-          "aria-activedescendant": activeDescendant,
-          onKeyDown: handleKeyDown,
-          children: grouped ? renderGroupedOptions() : renderFlatOptions()
-        })]
+          children: renderSearch()
+        }), renderListbox()]
       }), document.body)]
+    }), isSheet && jsxs(Sheet, {
+      ref: menuRef,
+      open: isOpen,
+      onClose: closeMenu,
+      placement: "bottom",
+      title: label || placeholder,
+      initialFocus: listboxRef,
+      "data-select-sheet": "",
+      children: [searchable && jsx(Sheet.Header, {
+        className: "py-2",
+        children: renderSearch()
+      }), jsx(Sheet.Body, {
+        className: "px-0 py-1",
+        children: renderListbox()
+      }), multiSelect && jsx(Sheet.Footer, {
+        children: jsx(Button, {
+          type: "button",
+          size: "lg",
+          className: "w-full",
+          onClick: closeMenu,
+          children: "Done"
+        })
+      })]
     }), error ? jsx("p", {
       id: errorId,
       className: "mt-1 text-sm text-error-500",