@prokodo/ui 0.0.51 → 0.0.52

package/dist/components/drawer/Drawer.base.module.scss.js

@@ -1,11 +1,3 @@
-const DrawerSlideInLeft = "DrawerSlideInLeft";
-const DrawerSlideOutLeft = "DrawerSlideOutLeft";
-const DrawerSlideInRight = "DrawerSlideInRight";
-const DrawerSlideOutRight = "DrawerSlideOutRight";
-const DrawerSlideInTop = "DrawerSlideInTop";
-const DrawerSlideOutTop = "DrawerSlideOutTop";
-const DrawerSlideInBottom = "DrawerSlideInBottom";
-const DrawerSlideOutBottom = "DrawerSlideOutBottom";
 const styles = {
   "prokodo-Drawer": "prokodo-Drawer",
   "prokodo-Drawer__backdrop": "prokodo-Drawer__backdrop",
@@ -15,31 +7,15 @@ const styles = {
   "prokodo-Drawer__container--fullscreen": "prokodo-Drawer__container--fullscreen",
   "prokodo-Drawer__container--anchor-left": "prokodo-Drawer__container--anchor-left",
   "prokodo-Drawer__container--anchor-left--open": "prokodo-Drawer__container--anchor-left--open",
-  DrawerSlideInLeft,
-  DrawerSlideOutLeft,
   "prokodo-Drawer__container--anchor-right": "prokodo-Drawer__container--anchor-right",
   "prokodo-Drawer__container--anchor-right--open": "prokodo-Drawer__container--anchor-right--open",
-  DrawerSlideInRight,
-  DrawerSlideOutRight,
   "prokodo-Drawer__container--anchor-top": "prokodo-Drawer__container--anchor-top",
   "prokodo-Drawer__container--anchor-top--open": "prokodo-Drawer__container--anchor-top--open",
-  DrawerSlideInTop,
-  DrawerSlideOutTop,
   "prokodo-Drawer__container--anchor-bottom": "prokodo-Drawer__container--anchor-bottom",
   "prokodo-Drawer__container--anchor-bottom--open": "prokodo-Drawer__container--anchor-bottom--open",
-  DrawerSlideInBottom,
-  DrawerSlideOutBottom,
   "prokodo-Drawer__header": "prokodo-Drawer__header",
   "prokodo-Drawer__content": "prokodo-Drawer__content"
 };
 export {
-  DrawerSlideInBottom,
-  DrawerSlideInLeft,
-  DrawerSlideInRight,
-  DrawerSlideInTop,
-  DrawerSlideOutBottom,
-  DrawerSlideOutLeft,
-  DrawerSlideOutRight,
-  DrawerSlideOutTop,
   styles as default
 };

package/dist/components/drawer/Drawer.client.js

@@ -2,70 +2,102 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, useState, useCallback, useEffect, useImperativeHandle } from "react";
+import { forwardRef, useRef, useState, useLayoutEffect, useEffect, useCallback, useImperativeHandle } from "react";
 import { DrawerView } from "./Drawer.view.js";
 function DrawerClient({ open = false, closeOnBackdropClick = true, onChange, ...props }, ref) {
   const triggerRef = useRef(null);
   const closeButtonRef = useRef(null);
   const containerRef = useRef(null);
-  const [isOpen, setIsOpen] = useState(() => open);
-  const syncingFromPropRef = useRef(false);
-  const openDrawer = useCallback(() => {
-    triggerRef.current = document.activeElement;
-    setIsOpen(true);
-  }, []);
-  const closeDrawer = useCallback(
-    (reason) => {
-      var _a;
+  const [isOpen, setIsOpen] = useState(() => Boolean(open));
+  const [mounted, setMounted] = useState(() => Boolean(open));
+  useLayoutEffect(() => {
+    if (!open) {
       setIsOpen(false);
-      if (!syncingFromPropRef.current) {
-        onChange == null ? void 0 : onChange({}, reason ?? "backdropClick");
-      }
-      (_a = triggerRef.current) == null ? void 0 : _a.focus();
-    },
-    [onChange]
-  );
+      setMounted(false);
+    }
+  }, [open]);
   useEffect(() => {
-    var _a;
-    syncingFromPropRef.current = true;
-    if (open && !isOpen) {
+    if (open) {
       triggerRef.current = document.activeElement;
-      setIsOpen(true);
-    } else if (!open && isOpen) {
+      if (!mounted) setMounted(true);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          var _a;
+          (_a = containerRef.current) == null ? void 0 : _a.getBoundingClientRect();
+          setIsOpen(true);
+        });
+      });
+    } else {
       setIsOpen(false);
-      (_a = triggerRef.current) == null ? void 0 : _a.focus();
     }
-    queueMicrotask(() => {
-      syncingFromPropRef.current = false;
-    });
-  }, [open, isOpen]);
-  useImperativeHandle(
-    ref,
-    () => ({
-      openDrawer,
-      closeDrawer
-    }),
-    [openDrawer, closeDrawer]
-  );
+  }, [open, mounted]);
   useEffect(() => {
-    var _a;
-    if (isOpen) {
-      (_a = closeButtonRef.current) == null ? void 0 : _a.focus();
+    if (isOpen || !mounted) return;
+    const node = containerRef.current;
+    if (!node) {
+      setMounted(false);
+      return;
     }
-  }, [isOpen]);
+    const onEnd = /* @__PURE__ */ __name((e) => {
+      var _a, _b;
+      if (e.target !== node) return;
+      node.removeEventListener("transitionend", onEnd);
+      setMounted(false);
+      (_b = (_a = triggerRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+    }, "onEnd");
+    node.addEventListener("transitionend", onEnd);
+    const t = setTimeout(() => {
+      var _a, _b;
+      node.removeEventListener("transitionend", onEnd);
+      setMounted(false);
+      (_b = (_a = triggerRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+    }, 450);
+    return () => {
+      node.removeEventListener("transitionend", onEnd);
+      clearTimeout(t);
+    };
+  }, [isOpen, mounted]);
+  const closeDrawer = useCallback(
+    (reason) => {
+      var _a, _b;
+      setIsOpen(false);
+      onChange == null ? void 0 : onChange({}, reason ?? "backdropClick");
+      (_b = (_a = triggerRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+    },
+    [onChange]
+  );
   useEffect(() => {
     if (!isOpen) return;
-    const handleKey = /* @__PURE__ */ __name((e) => {
+    const onKey = /* @__PURE__ */ __name((e) => {
       if (e.key === "Escape") {
         e.preventDefault();
         closeDrawer("escapeKeyDown");
       }
-    }, "handleKey");
-    window.addEventListener("keydown", handleKey);
-    return () => {
-      window.removeEventListener("keydown", handleKey);
-    };
+    }, "onKey");
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
   }, [isOpen, closeDrawer]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const id = requestAnimationFrame(() => {
+      var _a, _b;
+      (_b = (_a = closeButtonRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+    });
+    return () => cancelAnimationFrame(id);
+  }, [isOpen]);
+  const openDrawer = useCallback(() => {
+    triggerRef.current = document.activeElement;
+    setMounted(true);
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        var _a;
+        (_a = containerRef.current) == null ? void 0 : _a.getBoundingClientRect();
+        setIsOpen(true);
+      });
+    });
+  }, []);
+  useImperativeHandle(ref, () => ({ openDrawer, closeDrawer }), [openDrawer, closeDrawer]);
+  if (!mounted) return null;
   return /* @__PURE__ */ jsx(
     DrawerView,
     {
@@ -76,7 +108,7 @@ function DrawerClient({ open = false, closeOnBackdropClick = true, onChange, ...
       backdropProps: {
         onMouseDown: /* @__PURE__ */ __name(() => {
           if (isOpen && closeOnBackdropClick) {
-            closeDrawer == null ? void 0 : closeDrawer("backdropClick");
+            closeDrawer("backdropClick");
           }
         }, "onMouseDown")
       },

package/dist/components/drawer/Drawer.effects.client.js

@@ -1,16 +1,82 @@
 "use client";
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { useEffect } from "react";
-function DrawerEffectsLoader({ useSlide }) {
+import { useRef, useEffect } from "react";
+import { isString } from "../../helpers/validations.js";
+const FOCUSABLE = 'a[href], area[href], button:not([disabled]), input:not([disabled]):not([type=hidden]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+const DrawerEffectsLoader = /* @__PURE__ */ __name(({
+  isOpen,
+  containerRef,
+  closeButtonRef,
+  onClose
+}) => {
+  const lastFocused = useRef(null);
   useEffect(() => {
-    if (Boolean(useSlide)) {
-      void import("./Drawer.effects.module.scss.js");
+    if (!isOpen) return;
+    const { body, documentElement } = document;
+    const { scrollY } = window;
+    const prev = {
+      overflow: body.style.overflow,
+      position: body.style.position,
+      top: body.style.top,
+      width: body.style.width,
+      overscroll: documentElement.style.overscrollBehavior
+    };
+    body.style.overflow = "hidden";
+    body.style.position = "fixed";
+    body.style.top = `-${scrollY}px`;
+    body.style.width = "100%";
+    documentElement.style.overscrollBehavior = "none";
+    return () => {
+      body.style.overflow = prev.overflow;
+      body.style.position = prev.position;
+      body.style.top = prev.top;
+      body.style.width = prev.width;
+      documentElement.style.overscrollBehavior = prev.overscroll;
+      window.scrollTo(0, scrollY);
+    };
+  }, [isOpen]);
+  useEffect(() => {
+    var _a, _b;
+    const container = containerRef == null ? void 0 : containerRef.current;
+    if (!container) return;
+    if (isOpen) {
+      lastFocused.current = document.activeElement ?? null;
+      if (!container.hasAttribute("tabindex")) container.setAttribute("tabindex", "-1");
+      const first = (closeButtonRef == null ? void 0 : closeButtonRef.current) ?? container.querySelector(FOCUSABLE) ?? container;
+      first.focus({ preventScroll: true });
+    } else {
+      (_b = (_a = lastFocused.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
     }
-  }, [useSlide]);
+  }, [isOpen, containerRef, closeButtonRef]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const container = containerRef == null ? void 0 : containerRef.current;
+    if (!container) return;
+    const onKeydown = /* @__PURE__ */ __name((e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onClose == null ? void 0 : onClose("escapeKeyDown");
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const nodes = Array.from(container.querySelectorAll(FOCUSABLE)).filter((el) => !Boolean(el.hasAttribute("inert")) && !isString(el.getAttribute("aria-hidden")));
+      const [first] = nodes;
+      const last = nodes.at(-1);
+      if (!first || !last) return;
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }, "onKeydown");
+    document.addEventListener("keydown", onKeydown, true);
+    return () => document.removeEventListener("keydown", onKeydown, true);
+  }, [isOpen, containerRef, onClose]);
   return null;
-}
-__name(DrawerEffectsLoader, "DrawerEffectsLoader");
+}, "DrawerEffectsLoader");
 export {
   DrawerEffectsLoader
 };

package/dist/components/drawer/Drawer.server.js

@@ -3,6 +3,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import { jsx } from "react/jsx-runtime";
 import { DrawerView } from "./Drawer.view.js";
 function DrawerServer(props) {
+  if (!Boolean(props.open)) return null;
   return /* @__PURE__ */ jsx(DrawerView, { ...props });
 }
 __name(DrawerServer, "DrawerServer");

package/dist/components/drawer/Drawer.view.js

@@ -29,17 +29,28 @@ const DrawerView = /* @__PURE__ */ __name(({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "aria-hidden": isOpen ? void 0 : true,
       className: bem("backdrop", { open: isOpen }),
       ...backdropProps,
       children: [
-        /* @__PURE__ */ jsx(DrawerEffectsLoader, { useSlide: true }),
+        /* @__PURE__ */ jsx(
+          DrawerEffectsLoader,
+          {
+            useSlide: true,
+            closeButtonRef,
+            containerRef,
+            isOpen,
+            onClose
+          }
+        ),
         /* @__PURE__ */ jsxs(
           "div",
           {
             ref: containerRef,
             "aria-labelledby": isString(title) ? "drawer-title" : void 0,
-            "aria-modal": "true",
             role: "dialog",
+            ...isOpen ? { "aria-modal": "true" } : { "aria-hidden": "true", inert: true },
+            "aria-modal": isOpen ? "true" : void 0,
             className: bem(
               "container",
               {

package/dist/constants/project.js

@@ -1,4 +1,4 @@
-const PROKODO_UI_VERSION = "0.0.51";
+const PROKODO_UI_VERSION = "0.0.52";
 export {
   PROKODO_UI_VERSION
 };