@geckoui/geckoui 2.0.3 → 2.0.5

package/dist/index.d.mts

@@ -5552,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()`.
@@ -5579,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:
  *
@@ -5599,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

@@ -5552,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()`.
@@ -5579,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:
  *
@@ -5599,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

@@ -9529,6 +9529,7 @@ function Drawer({
   className,
   children,
   dismissOnEscape = true,
+  keepMounted = false,
   style
 }) {
   const drawerRef = (0, import_react81.useRef)(null);
@@ -9540,15 +9541,16 @@ 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);
-  }, [open]);
+  }, [closing]);
   const onCloseRef = (0, import_react81.useRef)(onClose);
   onCloseRef.current = onClose;
   const handleDismiss = (0, import_react81.useCallback)(() => {
@@ -9575,19 +9577,25 @@ function Drawer({
     ),
     /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
       "div",
-      {
+      __spreadProps(__spreadValues({
         ref: drawerRef,
         "data-placement": placement,
         "data-state": visible ? "open" : "closed",
         "data-instant": !ready || void 0,
         className: classNames("GeckoUIDrawer__drawer", className),
         role: "dialog",
-        "aria-modal": !allowClickOutside,
-        children
-      }
+        "aria-modal": !allowClickOutside
+      }, inertProps(!open)), {
+        children: (open || closing || keepMounted) && children
+      })
     )
   ] });
 }
+var INERT_IS_BOOLEAN = Number(import_react81.version.split(".")[0]) >= 19;
+function inertProps(inert) {
+  if (INERT_IS_BOOLEAN) return { inert };
+  return inert ? { inert: "" } : {};
+}
 Drawer.show = (node, options = {}) => {
   var _a;
   (_a = document.activeElement) == null ? void 0 : _a.blur();

package/dist/index.mjs

@@ -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, useRef as useRef33, useState as useState29, version } 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,15 +9416,16 @@ 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);
-  }, [open]);
+  }, [closing]);
   const onCloseRef = useRef33(onClose);
   onCloseRef.current = onClose;
   const handleDismiss = useCallback9(() => {
@@ -9450,19 +9452,25 @@ function Drawer({
     ),
     /* @__PURE__ */ jsx97(
       "div",
-      {
+      __spreadProps(__spreadValues({
         ref: drawerRef,
         "data-placement": placement,
         "data-state": visible ? "open" : "closed",
         "data-instant": !ready || void 0,
         className: classNames("GeckoUIDrawer__drawer", className),
         role: "dialog",
-        "aria-modal": !allowClickOutside,
-        children
-      }
+        "aria-modal": !allowClickOutside
+      }, inertProps(!open)), {
+        children: (open || closing || keepMounted) && children
+      })
     )
   ] });
 }
+var INERT_IS_BOOLEAN = Number(version.split(".")[0]) >= 19;
+function inertProps(inert) {
+  if (INERT_IS_BOOLEAN) return { inert };
+  return inert ? { inert: "" } : {};
+}
 Drawer.show = (node, options = {}) => {
   var _a;
   (_a = document.activeElement) == null ? void 0 : _a.blur();

package/package.json

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