@prokodo/ui 0.0.51 → 0.0.53

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

@@ -2,70 +2,110 @@
 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) {
+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 +116,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,87 @@
 "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/components/dynamic-list/DynamicList.client.js

@@ -14,9 +14,7 @@ function DynamicListClient({
   ...props
 }) {
   const isSingle = fields.length === 1;
-  const [items, setItems] = useState(
-    () => controlledItems ?? []
-  );
+  const [items, setItems] = useState(() => controlledItems ?? []);
   useEffect(() => {
     if (controlledItems !== void 0) {
       setItems(controlledItems);
@@ -62,10 +60,13 @@ function DynamicListClient({
   const handleAdd = useCallback(
     (e) => {
       var _a;
-      const empty = isSingle ? "" : fields.reduce((obj, f) => {
-        obj[(f == null ? void 0 : f.name) ?? ""] = "";
-        return obj;
-      }, {});
+      const empty = isSingle ? "" : fields.reduce(
+        (obj, f) => {
+          obj[(f == null ? void 0 : f.name) ?? ""] = "";
+          return obj;
+        },
+        {}
+      );
       const next = [...items, empty];
       setItems(next);
       (_a = buttonAddProps == null ? void 0 : buttonAddProps.onClick) == null ? void 0 : _a.call(buttonAddProps, e);

package/dist/components/dynamic-list/DynamicList.server.js

@@ -4,10 +4,16 @@ import { jsx } from "react/jsx-runtime";
 import { DynamicListView } from "./DynamicList.view.js";
 function DynamicListServer(props) {
   const { buttonDeleteProps, ...rest } = props;
-  return /* @__PURE__ */ jsx(DynamicListView, { ...rest, buttonDeleteProps: {
-    ...buttonDeleteProps,
-    onClick: void 0
-  } });
+  return /* @__PURE__ */ jsx(
+    DynamicListView,
+    {
+      ...rest,
+      buttonDeleteProps: {
+        ...buttonDeleteProps,
+        onClick: void 0
+      }
+    }
+  );
 }
 __name(DynamicListServer, "DynamicListServer");
 export {

package/dist/components/dynamic-list/DynamicList.view.js

@@ -70,8 +70,8 @@ function DynamicListView({
                         "data-index": idx,
                         disabled: disabled ?? (field == null ? void 0 : field.disabled),
                         id: `${name}-${idx}-${field.name}`,
-                        name: single ? `${name}[${idx}]` : `${name}[${idx}].${field.name}`,
                         required: required ?? (field == null ? void 0 : field.required),
+                        name: single ? `${name}[${idx}]` : `${name}[${idx}].${field.name}`,
                         value: single ? item : item[(field == null ? void 0 : field.name) ?? ""]
                       },
                       field.name

package/dist/components/form/Form.client.js

@@ -34,9 +34,7 @@ const FormClient = memo((props) => {
     hideResponse,
     ...restProps
   } = props;
-  const [formState, setFormState] = useState(
-    () => fields ?? []
-  );
+  const [formState, setFormState] = useState(() => fields ?? []);
   const [formMessages, setFormMessages] = useState(
     initialMessages
   );
@@ -51,7 +49,10 @@ const FormClient = memo((props) => {
     (index, update) => {
       setFormState((prev) => {
         const next = [...prev];
-        const nextField = { ...next[index], ...update };
+        const nextField = {
+          ...next[index],
+          ...update
+        };
         next[index] = nextField;
         notifyChange(nextField);
         return next;
@@ -106,7 +107,9 @@ const FormClient = memo((props) => {
           }
           if (Array.isArray(equalTo)) {
             if (typeof v === "string" || typeof v === "number") {
-              return equalTo.includes(v);
+              return equalTo.includes(
+                v
+              );
             }
             if (Array.isArray(v)) {
               const vv = v;
@@ -118,10 +121,13 @@ const FormClient = memo((props) => {
         }, "matches");
         const defaultsByName = /* @__PURE__ */ new Map();
         for (const df of defaultFields ?? []) {
-          if (isString(df == null ? void 0 : df.name)) defaultsByName.set(df.name, df);
+          if (isString(df == null ? void 0 : df.name))
+            defaultsByName.set(df.name, df);
         }
         const conds = Array.isArray(field.conditions) ? field.conditions : [];
-        const targetNames = Array.from(new Set(conds.map((c) => c.fieldId).filter(Boolean)));
+        const targetNames = Array.from(
+          new Set(conds.map((c) => c.fieldId).filter(Boolean))
+        );
         for (const targetName of targetNames) {
           const depIdx = next.findIndex((f) => f.name === targetName);
           if (depIdx < 0) continue;
@@ -177,12 +183,9 @@ const FormClient = memo((props) => {
     },
     [defaultFields, notifyChange]
   );
-  const handleHpChange = useCallback(
-    (e) => {
-      setHoneypotValue(e.target.value);
-    },
-    []
-  );
+  const handleHpChange = useCallback((e) => {
+    setHoneypotValue(e.target.value);
+  }, []);
   const validateFullForm = useCallback(() => {
     const errors = {};
     formState.forEach((field) => {

package/dist/components/form/Form.view.js

@@ -53,9 +53,13 @@ const FormView = /* @__PURE__ */ __name(({
           type: "h2",
           ...headlineProps,
           id: `${id}-heading`,
-          className: bem("label", {
-            "is-hidden": Boolean(hideHeadline)
-          }, headlineProps == null ? void 0 : headlineProps.className),
+          className: bem(
+            "label",
+            {
+              "is-hidden": Boolean(hideHeadline)
+            },
+            headlineProps == null ? void 0 : headlineProps.className
+          ),
           children: label
         }
       ),
@@ -65,9 +69,9 @@ const FormView = /* @__PURE__ */ __name(({
           {
             ...field,
             key: field.name,
+            disabled: disabled !== void 0 ? disabled : field == null ? void 0 : field.disabled,
             messagesFields,
             variant,
-            disabled: disabled !== void 0 ? disabled : field == null ? void 0 : field.disabled,
             ...fieldProps
           }
         )),

package/dist/components/form/FormField.client.js

@@ -23,7 +23,10 @@ function FormFieldClient({
   ...props
 }) {
   var _a, _b, _c;
-  const renderFieldContainer = useCallback((children) => /* @__PURE__ */ jsx(GridRow, { className: bem(), xs: 12, children }), []);
+  const renderFieldContainer = useCallback(
+    (children) => /* @__PURE__ */ jsx(GridRow, { className: bem(), xs: 12, children }),
+    []
+  );
   if (visible === false) return null;
   switch (fieldType) {
     case "switch":
@@ -103,10 +106,7 @@ function FormFieldClient({
               ...field,
               onValidate: /* @__PURE__ */ __name((_, err) => onValidate == null ? void 0 : onValidate(p, err), "onValidate")
             })),
-            onChange: /* @__PURE__ */ __name((items) => onChange == null ? void 0 : onChange(
-              props,
-              items
-            ), "onChange")
+            onChange: /* @__PURE__ */ __name((items) => onChange == null ? void 0 : onChange(props, items), "onChange")
           }
         )
       );

package/dist/components/form/FormField.server.js

@@ -25,32 +25,12 @@ function FormFieldServer({
   switch (fieldType) {
     case "switch":
       return renderFieldContainer(
-        /* @__PURE__ */ jsx(
-          Switch,
-          {
-            color: variant,
-            ...props
-          }
-        )
+        /* @__PURE__ */ jsx(Switch, { color: variant, ...props })
       );
     case "slider":
-      return renderFieldContainer(
-        /* @__PURE__ */ jsx(
-          Slider,
-          {
-            ...props
-          }
-        )
-      );
+      return renderFieldContainer(/* @__PURE__ */ jsx(Slider, { ...props }));
     case "select":
-      return renderFieldContainer(
-        /* @__PURE__ */ jsx(
-          Select,
-          {
-            ...props
-          }
-        )
-      );
+      return renderFieldContainer(/* @__PURE__ */ jsx(Select, { ...props }));
     case "input":
       return renderFieldContainer(
         /* @__PURE__ */ jsx(

package/dist/components/form/FormResponse.js

@@ -6,7 +6,11 @@ import { isArray, isNull } from "../../helpers/validations.js";
 import styles from "./FormResponse.module.scss.js";
 import { List } from "../list/List.js";
 const bem = create(styles, "FormResponse");
-const FormResponse = /* @__PURE__ */ __name(({ className, messages, ...props }) => {
+const FormResponse = /* @__PURE__ */ __name(({
+  className,
+  messages,
+  ...props
+}) => {
   const errorKeys = Object.keys((messages == null ? void 0 : messages.errors) || {});
   const listItems = errorKeys.map((key) => {
     var _a, _b;

package/dist/components/grid/Grid.js

@@ -4,7 +4,12 @@ import { jsx } from "react/jsx-runtime";
 import { create } from "../../helpers/bem.js";
 import styles from "./Grid.module.scss.js";
 const bem = create(styles, "Grid");
-const Grid = /* @__PURE__ */ __name((({ spacing = 2, className, children, ...props }) => /* @__PURE__ */ jsx(
+const Grid = /* @__PURE__ */ __name(({
+  spacing = 2,
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
   "div",
   {
     className: bem(void 0, void 0, className),
@@ -14,7 +19,7 @@ const Grid = /* @__PURE__ */ __name((({ spacing = 2, className, children, ...pro
     ...props,
     children
   }
-)), "Grid");
+), "Grid");
 Grid.displayName = "Grid";
 export {
   Grid

package/dist/components/grid/GridRow.js

@@ -4,7 +4,17 @@ import { jsx } from "react/jsx-runtime";
 import { create } from "../../helpers/bem.js";
 import styles from "./GridRow.module.scss.js";
 const bem = create(styles, "GridRow");
-const GridRow = /* @__PURE__ */ __name((({ align, className, children, xs, sm, md, lg, xl, ...props }) => /* @__PURE__ */ jsx(
+const GridRow = /* @__PURE__ */ __name(({
+  align,
+  className,
+  children,
+  xs,
+  sm,
+  md,
+  lg,
+  xl,
+  ...props
+}) => /* @__PURE__ */ jsx(
   "div",
   {
     className: bem(
@@ -22,7 +32,7 @@ const GridRow = /* @__PURE__ */ __name((({ align, className, children, xs, sm, m
     ...props,
     children
   }
-)), "GridRow");
+), "GridRow");
 GridRow.displayName = "GridRow";
 export {
   GridRow

package/dist/components/headline/Headline.js

@@ -48,7 +48,9 @@ const Headline = /* @__PURE__ */ __name(({
     }
     return /* @__PURE__ */ jsx(AnimatedText, { ...animationProps, children: text });
   }, "animateText");
-  const renderHTag = /* @__PURE__ */ __name(({ children: headingChildren }) => {
+  const renderHTag = /* @__PURE__ */ __name(({
+    children: headingChildren
+  }) => {
     const HTag = type;
     const headingLevel = parseInt(type.charAt(1), 10);
     return /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/icon/Icon.js

@@ -6,7 +6,7 @@ import { create } from "../../helpers/bem.js";
 import { isString } from "../../helpers/validations.js";
 import styles from "./Icon.module.scss.js";
 const bem = create(styles, "Icon");
-const getIconSize = /* @__PURE__ */ __name((s) => ({ xs: 15, sm: 20, md: 30, lg: 40, xl: 50 })[s] ?? (s ?? 16), "getIconSize");
+const getIconSize = /* @__PURE__ */ __name((s) => ({ xs: 15, sm: 20, md: 30, lg: 40, xl: 50 })[s] ?? s ?? 16, "getIconSize");
 const iconUrl = /* @__PURE__ */ __name((n) => `https://cdn.jsdelivr.net/gh/prokodo-agency/ui@v${PROKODO_UI_VERSION}/assets/icons/${n.replace(/Icon$/, "").replace(/([a-z])([A-Z0-9])/g, "$1_$2").replace(/([0-9])([a-zA-Z])/g, "$1_$2").toLowerCase()}_icon.svg`, "iconUrl");
 const Icon = /* @__PURE__ */ __name(({
   name,
@@ -35,9 +35,13 @@ const Icon = /* @__PURE__ */ __name(({
       "aria-label": label,
       role: isString(label) ? "img" : "presentation",
       style: { ...mask },
-      className: bem(void 0, {
-        [`${color}`]: Boolean(color)
-      }, className)
+      className: bem(
+        void 0,
+        {
+          [`${color}`]: Boolean(color)
+        },
+        className
+      )
     }
   );
 }, "Icon");

package/dist/components/image-text/ImageText.js

@@ -42,7 +42,11 @@ const ImageText = /* @__PURE__ */ __name(({
               type: "h3",
               variant: "primary",
               ...subTitleProps,
-              className: bem("sub__headline", void 0, subTitleProps == null ? void 0 : subTitleProps.className),
+              className: bem(
+                "sub__headline",
+                void 0,
+                subTitleProps == null ? void 0 : subTitleProps.className
+              ),
               children: subTitle
             }
           ),