@geckoui/geckoui 2.0.2 → 2.0.4

package/dist/index.d.mts

@@ -3110,6 +3110,8 @@ interface BaseSelectProps extends PropsWithChildren, SelectButtonProps {
     disabled?: boolean;
     /**
      * Whether to show the input for filtering the options
+     * `true` or `"dropdown"`: a search box at the top of the menu
+     * `"inline"`: typed straight into the button
      * Default is false
      * */
     filterable?: boolean | "inline" | "dropdown";
@@ -5550,6 +5552,16 @@ interface DrawerProps {
      * Default is true
      * */
     dismissOnEscape?: boolean;
+    /**
+     * Keep the children in the DOM while the drawer is closed.
+     * By default they unmount once the slide out finishes, so a form inside starts fresh on
+     * every open and an `autoFocus` field only takes focus when it is shown.
+     * A closed drawer is inert either way: nothing in it can be focused or reached by
+     * assistive technology.
+     *
+     * Default: false
+     * */
+    keepMounted?: boolean;
     /**
      * Inline styles for the drawer root.
      * `GeckoUIProvider` uses it to stack drawers opened with `Drawer.show()`.
@@ -5577,6 +5589,10 @@ interface DrawerProps {
  * </Drawer>
  * ```
  *
+ * Closed drawers unmount their children once the slide out finishes, so a form inside
+ * starts fresh on every open and an `autoFocus` field only takes focus when it is shown.
+ * Pass `keepMounted` to keep the children alive while closed instead.
+ *
  * @example
  * Mobile navigation menu:
  *
@@ -5597,7 +5613,7 @@ interface DrawerProps {
  * </Drawer>
  * ```
  */
-declare function Drawer({ open, allowClickOutside, onClose, hideBackdrop, placement, backdropClassName, className, children, dismissOnEscape, style }: DrawerProps): react_jsx_runtime.JSX.Element;
+declare function Drawer({ open, allowClickOutside, onClose, hideBackdrop, placement, backdropClassName, className, children, dismissOnEscape, keepMounted, style }: DrawerProps): react_jsx_runtime.JSX.Element;
 declare namespace Drawer {
     var show: (node: ReactNode, options?: Omit<DrawerProps, "open" | "children">) => string;
     var dismiss: (id?: string) => void;

package/dist/index.d.ts

@@ -3110,6 +3110,8 @@ interface BaseSelectProps extends PropsWithChildren, SelectButtonProps {
     disabled?: boolean;
     /**
      * Whether to show the input for filtering the options
+     * `true` or `"dropdown"`: a search box at the top of the menu
+     * `"inline"`: typed straight into the button
      * Default is false
      * */
     filterable?: boolean | "inline" | "dropdown";
@@ -5550,6 +5552,16 @@ interface DrawerProps {
      * Default is true
      * */
     dismissOnEscape?: boolean;
+    /**
+     * Keep the children in the DOM while the drawer is closed.
+     * By default they unmount once the slide out finishes, so a form inside starts fresh on
+     * every open and an `autoFocus` field only takes focus when it is shown.
+     * A closed drawer is inert either way: nothing in it can be focused or reached by
+     * assistive technology.
+     *
+     * Default: false
+     * */
+    keepMounted?: boolean;
     /**
      * Inline styles for the drawer root.
      * `GeckoUIProvider` uses it to stack drawers opened with `Drawer.show()`.
@@ -5577,6 +5589,10 @@ interface DrawerProps {
  * </Drawer>
  * ```
  *
+ * Closed drawers unmount their children once the slide out finishes, so a form inside
+ * starts fresh on every open and an `autoFocus` field only takes focus when it is shown.
+ * Pass `keepMounted` to keep the children alive while closed instead.
+ *
  * @example
  * Mobile navigation menu:
  *
@@ -5597,7 +5613,7 @@ interface DrawerProps {
  * </Drawer>
  * ```
  */
-declare function Drawer({ open, allowClickOutside, onClose, hideBackdrop, placement, backdropClassName, className, children, dismissOnEscape, style }: DrawerProps): react_jsx_runtime.JSX.Element;
+declare function Drawer({ open, allowClickOutside, onClose, hideBackdrop, placement, backdropClassName, className, children, dismissOnEscape, keepMounted, style }: DrawerProps): react_jsx_runtime.JSX.Element;
 declare namespace Drawer {
     var show: (node: ReactNode, options?: Omit<DrawerProps, "open" | "children">) => string;
     var dismiss: (id?: string) => void;

package/dist/index.js

@@ -6635,7 +6635,7 @@ function SelectButton(_a) {
   if (trigger) {
     return trigger;
   }
-  const filterable = _filterable === true || _filterable === "inline";
+  const filterable = _filterable === "inline";
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
     "div",
     __spreadProps(__spreadValues(__spreadProps(__spreadValues({
@@ -6740,7 +6740,7 @@ function SelectButtonContent() {
     closeMenu,
     disabled
   } = useSelect();
-  const filterable = _filterable === true || _filterable === "inline";
+  const filterable = _filterable === "inline";
   const { preventDefault, attachPreventDefault } = usePreventDefault_default();
   if (multiple && Array.isArray(value) && !!(value == null ? void 0 : value.length)) {
     const selectedOptions = sortMultiSelectValue(value, options).map((o) => {
@@ -6919,7 +6919,7 @@ var SelectMenu = (_a) => {
   if (!open || disabled) {
     return null;
   }
-  const hasDropdownSearch = filterable === "dropdown";
+  const hasDropdownSearch = filterable === true || filterable === "dropdown";
   return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
     "div",
     __spreadProps(__spreadValues({
@@ -9529,6 +9529,7 @@ function Drawer({
   className,
   children,
   dismissOnEscape = true,
+  keepMounted = false,
   style
 }) {
   const drawerRef = (0, import_react81.useRef)(null);
@@ -9540,14 +9541,18 @@ function Drawer({
   const ready = readyFor === placement;
   const visible = open && ready;
   const [closing, setClosing] = (0, import_react81.useState)(false);
-  const wasOpen = (0, import_react81.useRef)(open);
+  const [prevOpen, setPrevOpen] = (0, import_react81.useState)(open);
+  if (prevOpen !== open) {
+    setPrevOpen(open);
+    setClosing(!open);
+  }
   (0, import_react81.useEffect)(() => {
-    if (wasOpen.current === open) return;
-    wasOpen.current = open;
-    if (open) return;
-    setClosing(true);
+    if (!closing) return;
     const timer = setTimeout(() => setClosing(false), OVERLAY_ANIMATION_DURATION);
     return () => clearTimeout(timer);
+  }, [closing]);
+  (0, import_react81.useLayoutEffect)(() => {
+    if (drawerRef.current) drawerRef.current.inert = !open;
   }, [open]);
   const onCloseRef = (0, import_react81.useRef)(onClose);
   onCloseRef.current = onClose;
@@ -9583,7 +9588,7 @@ function Drawer({
         className: classNames("GeckoUIDrawer__drawer", className),
         role: "dialog",
         "aria-modal": !allowClickOutside,
-        children
+        children: (open || closing || keepMounted) && children
       }
     )
   ] });

package/dist/index.mjs

@@ -6501,7 +6501,7 @@ function SelectButton(_a) {
   if (trigger) {
     return trigger;
   }
-  const filterable = _filterable === true || _filterable === "inline";
+  const filterable = _filterable === "inline";
   return /* @__PURE__ */ jsxs30(
     "div",
     __spreadProps(__spreadValues(__spreadProps(__spreadValues({
@@ -6606,7 +6606,7 @@ function SelectButtonContent() {
     closeMenu,
     disabled
   } = useSelect();
-  const filterable = _filterable === true || _filterable === "inline";
+  const filterable = _filterable === "inline";
   const { preventDefault, attachPreventDefault } = usePreventDefault_default();
   if (multiple && Array.isArray(value) && !!(value == null ? void 0 : value.length)) {
     const selectedOptions = sortMultiSelectValue(value, options).map((o) => {
@@ -6785,7 +6785,7 @@ var SelectMenu = (_a) => {
   if (!open || disabled) {
     return null;
   }
-  const hasDropdownSearch = filterable === "dropdown";
+  const hasDropdownSearch = filterable === true || filterable === "dropdown";
   return /* @__PURE__ */ jsxs31(
     "div",
     __spreadProps(__spreadValues({
@@ -9392,7 +9392,7 @@ import { useCallback as useCallback10, useEffect as useEffect23, useRef as useRe
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/Drawer/Drawer.tsx
-import { useCallback as useCallback9, useEffect as useEffect22, useRef as useRef33, useState as useState29 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect22, useLayoutEffect as useLayoutEffect2, useRef as useRef33, useState as useState29 } from "react";
 import { jsx as jsx97, jsxs as jsxs46 } from "react/jsx-runtime";
 function Drawer({
   open = false,
@@ -9404,6 +9404,7 @@ function Drawer({
   className,
   children,
   dismissOnEscape = true,
+  keepMounted = false,
   style
 }) {
   const drawerRef = useRef33(null);
@@ -9415,14 +9416,18 @@ function Drawer({
   const ready = readyFor === placement;
   const visible = open && ready;
   const [closing, setClosing] = useState29(false);
-  const wasOpen = useRef33(open);
+  const [prevOpen, setPrevOpen] = useState29(open);
+  if (prevOpen !== open) {
+    setPrevOpen(open);
+    setClosing(!open);
+  }
   useEffect22(() => {
-    if (wasOpen.current === open) return;
-    wasOpen.current = open;
-    if (open) return;
-    setClosing(true);
+    if (!closing) return;
     const timer = setTimeout(() => setClosing(false), OVERLAY_ANIMATION_DURATION);
     return () => clearTimeout(timer);
+  }, [closing]);
+  useLayoutEffect2(() => {
+    if (drawerRef.current) drawerRef.current.inert = !open;
   }, [open]);
   const onCloseRef = useRef33(onClose);
   onCloseRef.current = onClose;
@@ -9458,7 +9463,7 @@ function Drawer({
         className: classNames("GeckoUIDrawer__drawer", className),
         role: "dialog",
         "aria-modal": !allowClickOutside,
-        children
+        children: (open || closing || keepMounted) && children
       }
     )
   ] });

package/dist/styles.css

@@ -5392,7 +5392,9 @@
 }
 .GeckoUISelectButton__search__input[data-initial] {
   position: absolute;
+  right: calc(var(--spacing, 0.25rem) * 3);
   left: calc(var(--spacing, 0.25rem) * 3);
+  width: auto;
 }
 .GeckoUISelectButton__search__input[data-readonly] {
   width: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geckoui/geckoui",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "license": "MIT",
   "description": "The only thing our Gecko eats is bugs!",
   "keywords": [