@geckoui/geckoui 2.0.3 → 2.0.4

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,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

@@ -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/package.json

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