@prokodo/ui 0.0.37 → 0.0.39

package/dist/components/dialog/Dialog.client.js

@@ -0,0 +1,91 @@
+"use client";
+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 { DialogView } from "./Dialog.view.js";
+const FADE_DURATION = 300;
+function DialogClient({ 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 openDialog = useCallback(() => {
+    triggerRef.current = document.activeElement;
+    setIsOpen(true);
+  }, []);
+  useEffect(() => {
+    var _a;
+    if (isOpen) {
+      (_a = closeButtonRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [isOpen]);
+  const closeDialog = useCallback((reson) => {
+    setIsOpen(false);
+    setTimeout(() => {
+      var _a;
+      onChange == null ? void 0 : onChange({}, reson ?? "backdropClick", false);
+      (_a = triggerRef.current) == null ? void 0 : _a.focus();
+    }, FADE_DURATION);
+  }, [onChange]);
+  useImperativeHandle(
+    ref,
+    () => ({ openDialog, closeDialog }),
+    [openDialog, closeDialog]
+  );
+  useEffect(() => {
+    if (open) openDialog();
+  }, [open, openDialog]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKey = /* @__PURE__ */ __name((e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        closeDialog("escapeKeyDown");
+      }
+      if (e.key === "Tab" && containerRef.current) {
+        const focusable = containerRef.current.querySelectorAll(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        if (focusable.length > 0) {
+          const first = focusable[0];
+          const last = focusable[focusable.length - 1];
+          if (e.shiftKey) {
+            if (document.activeElement === first) {
+              e.preventDefault();
+              last.focus();
+            }
+          } else {
+            if (document.activeElement === last) {
+              e.preventDefault();
+              first.focus();
+            }
+          }
+        }
+      }
+    }, "handleKey");
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [isOpen, closeDialog]);
+  return /* @__PURE__ */ jsx(
+    DialogView,
+    {
+      ...props,
+      closeButtonRef,
+      containerRef,
+      open: isOpen,
+      wrapperProps: {
+        onMouseDown: /* @__PURE__ */ __name(() => {
+          if (closeOnBackdropClick) closeDialog("backdropClick");
+        }, "onMouseDown")
+      },
+      onClose: closeDialog,
+      onMouseDown: /* @__PURE__ */ __name((e) => e.stopPropagation(), "onMouseDown")
+    }
+  );
+}
+__name(DialogClient, "DialogClient");
+const DialogClient$1 = forwardRef(DialogClient);
+export {
+  DialogClient$1 as default
+};

package/dist/components/dialog/Dialog.js

@@ -1,169 +1,14 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Modal } from "@mui/base";
-import { useState, useCallback, useImperativeHandle } from "react";
-import { create } from "../../helpers/bem.js";
-import styles from "./Dialog.module.scss.js";
-import { Button } from "../button/Button.js";
-import { Headline } from "../headline/Headline.server.js";
-const bem = create(styles, "Dialog");
-const Dialog = /* @__PURE__ */ __name(({
-  actions,
-  children,
-  className,
-  classNameHeader,
-  containerChildren,
-  contentProps = {},
-  contentRef,
-  fullScreen,
-  hideTitle,
-  onClose,
-  open,
-  ref,
-  renderHeader,
-  scroll = "paper",
-  showCloseButton,
-  title,
-  titleProps = {},
-  translations,
-  ...props
-}) => {
-  const [dialogOpen, setDialogOpen] = useState(open ?? false);
-  const [transitionState, setTransitionState] = useState("exiting");
-  const handleClose = useCallback(() => {
-    setTransitionState("exiting");
-    setTimeout(() => {
-      setDialogOpen(false);
-      if (onClose) {
-        onClose({}, "backdropClick");
-      }
-    }, 300);
-  }, [onClose]);
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (e.code === "Enter") {
-        handleClose();
-      }
-    },
-    [handleClose]
-  );
-  useImperativeHandle(
-    ref,
-    () => ({
-      openDialog: /* @__PURE__ */ __name(() => {
-        setDialogOpen(true);
-        setTimeout(() => {
-          setTransitionState("entering");
-        }, 300);
-      }, "openDialog"),
-      closeDialog: handleClose
-    }),
-    [handleClose]
-  );
-  const fullScreenModifier = {
-    fullScreen: Boolean(fullScreen)
-  };
-  return /* @__PURE__ */ jsx(
-    Modal,
-    {
-      ...props,
-      "aria-labelledby": "dialog-title",
-      open: dialogOpen,
-      className: bem(
-        void 0,
-        {
-          ...fullScreenModifier,
-          "fade-enter": transitionState === "entering",
-          "fade-exit": transitionState === "exiting"
-        },
-        className
-      ),
-      onClose: handleClose,
-      children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: bem("container", {
-              ...fullScreenModifier,
-              "is-visible": dialogOpen,
-              [`scroll-${scroll}`]: true
-            }),
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: bem("header", void 0, classNameHeader), children: [
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx(
-                    Headline,
-                    {
-                      ...titleProps,
-                      id: "dialog-title",
-                      className: bem("title", {
-                        "is-hidden": Boolean(hideTitle)
-                      }),
-                      children: title
-                    }
-                  ),
-                  renderHeader == null ? void 0 : renderHeader()
-                ] }),
-                Boolean(showCloseButton) && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    "aria-label": (translations == null ? void 0 : translations.close) ?? "Close dialog",
-                    className: bem("close"),
-                    role: "button",
-                    tabIndex: 0,
-                    onClick: handleClose,
-                    onKeyDown: handleKeyDown,
-                    children: [
-                      /* @__PURE__ */ jsx("span", { className: bem("close__label"), children: (translations == null ? void 0 : translations.cancel) ?? "Cancel" }),
-                      /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          inert: true,
-                          color: "inherit",
-                          tabIndex: -1,
-                          variant: "text",
-                          iconProps: {
-                            name: "Cancel01Icon",
-                            size: "sm"
-                          }
-                        }
-                      )
-                    ]
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  ...contentProps,
-                  ref: contentRef,
-                  className: bem(
-                    "content",
-                    {
-                      [`scroll-${scroll}`]: true
-                    },
-                    contentProps == null ? void 0 : contentProps.className
-                  ),
-                  children
-                }
-              ),
-              actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: bem("actions"), children: actions.map((action) => /* @__PURE__ */ jsx(
-                Button,
-                {
-                  ...action
-                },
-                `dialog-action-button-${action.id}`
-              )) })
-            ]
-          }
-        ),
-        containerChildren !== void 0 && containerChildren
-      ] })
-    }
-  );
-}, "Dialog");
-Dialog.displayName = "Dialog";
+import { createIsland } from "../../helpers/createIsland.js";
+import DialogServer from "./Dialog.server.js";
+const Dialog = createIsland({
+  name: "Dialog",
+  Server: DialogServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./Dialog.lazy.js"), "loadLazy"),
+  // erzwinge Client, sobald jemand open/close benutzt
+  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
+});
 export {
   Dialog
 };

package/dist/components/dialog/Dialog.lazy.js

@@ -0,0 +1,15 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createLazyWrapper } from "../../helpers/createLazyWrapper.js";
+import DialogClient from "./Dialog.client.js";
+import DialogServer from "./Dialog.server.js";
+const Dialog_lazy = createLazyWrapper({
+  name: "Dialog",
+  Client: DialogClient,
+  Server: DialogServer,
+  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
+});
+export {
+  Dialog_lazy as default
+};

package/dist/components/dialog/Dialog.module.scss.js

@@ -2,6 +2,7 @@ const gradientMove = "gradientMove";
 const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-Dialog": "prokodo-Dialog",
+  "prokodo-Dialog--is-visible": "prokodo-Dialog--is-visible",
   "prokodo-Dialog__container": "prokodo-Dialog__container",
   "prokodo-Dialog__container--scroll-paper": "prokodo-Dialog__container--scroll-paper",
   "prokodo-Dialog__container--scroll-body": "prokodo-Dialog__container--scroll-body",
@@ -12,8 +13,8 @@ const styles = {
   "prokodo-Dialog__content": "prokodo-Dialog__content",
   "prokodo-Dialog__content--scroll-body": "prokodo-Dialog__content--scroll-body",
   "prokodo-Dialog__actions": "prokodo-Dialog__actions",
-  "prokodo-Dialog--fade-enter": "prokodo-Dialog--fade-enter",
-  "prokodo-Dialog--fade-exit": "prokodo-Dialog--fade-exit",
+  "prokodo-Dialog__backdrop": "prokodo-Dialog__backdrop",
+  "prokodo-Dialog__backdrop--is-visible": "prokodo-Dialog__backdrop--is-visible",
   "prokodo-Dialog--fullScreen": "prokodo-Dialog--fullScreen",
   gradientMove,
   fadeInKeyframe

package/dist/components/dialog/Dialog.server.js

@@ -0,0 +1,11 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { DialogView } from "./Dialog.view.js";
+const DialogServer = /* @__PURE__ */ __name((props) => {
+  if (!Boolean(props.open)) return null;
+  return /* @__PURE__ */ jsx(DialogView, { ...props, onChange: void 0 });
+}, "DialogServer");
+export {
+  DialogServer as default
+};

package/dist/components/dialog/Dialog.view.js

@@ -0,0 +1,118 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { create } from "../../helpers/bem.js";
+import styles from "./Dialog.module.scss.js";
+import { Button } from "../button/Button.js";
+import { Headline } from "../headline/Headline.js";
+const bem = create(styles, "Dialog");
+function DialogView({
+  open,
+  title,
+  containerRef,
+  hideTitle = false,
+  renderHeader,
+  hideCloseButton = false,
+  translations,
+  actions = [],
+  contentProps = {},
+  contentRef,
+  containerChildren,
+  className,
+  classNameHeader,
+  scroll = "paper",
+  fullScreen = false,
+  titleProps = {},
+  children,
+  onClose,
+  wrapperProps,
+  closeOnBackdropClick = true,
+  closeButtonProps,
+  closeButtonRef,
+  ...rest
+}) {
+  const containerMods = {
+    fullScreen,
+    [`scroll-${scroll}`]: true
+  };
+  const wrapperMods = {
+    fullScreen,
+    "is-visible": Boolean(open)
+  };
+  const renderDialog = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-describedby": "dialog-content",
+      "aria-labelledby": "dialog-title",
+      "aria-modal": "true",
+      role: "dialog",
+      ...rest,
+      className: bem(void 0, wrapperMods, className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { ref: containerRef, className: bem("container", containerMods), children: [
+          /* @__PURE__ */ jsxs("div", { className: bem("header", void 0, classNameHeader), children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(
+                Headline,
+                {
+                  ...titleProps,
+                  className: bem("title", { "is-hidden": hideTitle }),
+                  id: "dialog-title",
+                  children: title
+                }
+              ),
+              renderHeader == null ? void 0 : renderHeader()
+            ] }),
+            !Boolean(hideCloseButton) && /* @__PURE__ */ jsx(
+              Button,
+              {
+                "aria-label": translations == null ? void 0 : translations.close,
+                color: "inherit",
+                iconProps: { name: "Cancel01Icon", size: "sm" },
+                variant: "outlined",
+                ...closeButtonProps,
+                ref: closeButtonRef,
+                title: (translations == null ? void 0 : translations.close) ?? "Close",
+                onClick: onClose
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", tabIndex: 0 }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ...contentProps,
+              ref: contentRef,
+              id: "dialog-content",
+              className: bem(
+                "content",
+                { [`scroll-${scroll}`]: true },
+                contentProps.className
+              ),
+              children
+            }
+          ),
+          actions.length > 0 && /* @__PURE__ */ jsxs("div", { className: bem("actions"), children: [
+            /* @__PURE__ */ jsx("div", { "aria-hidden": "true", tabIndex: 0 }),
+            actions.map((action) => /* @__PURE__ */ jsx(Button, { ...action, title: (action == null ? void 0 : action.title) ?? "" }, action.id)),
+            /* @__PURE__ */ jsx("div", { "aria-hidden": "true", tabIndex: 0 })
+          ] })
+        ] }),
+        containerChildren
+      ]
+    }
+  ), "renderDialog");
+  if (!closeOnBackdropClick || fullScreen) return renderDialog();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: bem("backdrop", { "is-visible": Boolean(open) }),
+      ...wrapperProps,
+      children: renderDialog()
+    }
+  );
+}
+__name(DialogView, "DialogView");
+export {
+  DialogView
+};

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

@@ -0,0 +1,75 @@
+"use client";
+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, useImperativeHandle, useEffect } 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 openDrawer = useCallback(() => {
+    triggerRef.current = document.activeElement;
+    setIsOpen(true);
+  }, []);
+  const closeDrawer = useCallback(
+    (reason) => {
+      var _a;
+      setIsOpen(false);
+      onChange == null ? void 0 : onChange({}, reason ?? "backdropClick");
+      (_a = triggerRef.current) == null ? void 0 : _a.focus();
+    },
+    [onChange]
+  );
+  useImperativeHandle(
+    ref,
+    () => ({
+      openDrawer,
+      closeDrawer
+    }),
+    [openDrawer, closeDrawer]
+  );
+  useEffect(() => {
+    var _a;
+    if (isOpen) {
+      (_a = closeButtonRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKey = /* @__PURE__ */ __name((e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        closeDrawer("escapeKeyDown");
+      }
+    }, "handleKey");
+    window.addEventListener("keydown", handleKey);
+    return () => {
+      window.removeEventListener("keydown", handleKey);
+    };
+  }, [isOpen, closeDrawer]);
+  return /* @__PURE__ */ jsx(
+    DrawerView,
+    {
+      ...props,
+      closeButtonRef,
+      containerRef,
+      open: isOpen,
+      backdropProps: {
+        onMouseDown: /* @__PURE__ */ __name(() => {
+          if (isOpen && closeOnBackdropClick) {
+            closeDrawer == null ? void 0 : closeDrawer("backdropClick");
+          }
+        }, "onMouseDown")
+      },
+      onClose: closeDrawer,
+      onMouseDown: /* @__PURE__ */ __name((e) => e.stopPropagation(), "onMouseDown")
+    }
+  );
+}
+__name(DrawerClient, "DrawerClient");
+const DrawerClient$1 = forwardRef(DrawerClient);
+export {
+  DrawerClient$1 as default
+};

package/dist/components/drawer/Drawer.js

@@ -1,108 +1,13 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Modal } from "@mui/base";
-import { useState, useEffect, useCallback, isValidElement } from "react";
-import { create } from "../../helpers/bem.js";
-import { isString } from "../../helpers/validations.js";
-import styles from "./Drawer.module.scss.js";
-import { Button } from "../button/Button.js";
-import { Headline } from "../headline/Headline.server.js";
-const bem = create(styles, "Drawer");
-const renderDrawerTitle = /* @__PURE__ */ __name((title) => isString(title) && /* @__PURE__ */ jsx(Headline, { size: "md", type: "h2", children: title }), "renderDrawerTitle");
-const renderDrawerCloseButton = /* @__PURE__ */ __name((onClose) => /* @__PURE__ */ jsx(
-  Button,
-  {
-    "aria-label": "Close dialog",
-    color: "info",
-    role: "button",
-    variant: "text",
-    iconProps: {
-      name: "Cancel01Icon",
-      size: "sm"
-    },
-    onClick: onClose
-  }
-), "renderDrawerCloseButton");
-const Drawer = /* @__PURE__ */ __name(({
-  open,
-  title,
-  fullscreen,
-  className,
-  containerClassName,
-  children,
-  anchor = "left",
-  disabled,
-  renderHeader,
-  onClose,
-  ...props
-}) => {
-  const [transitionState, setTransitionState] = useState("entering");
-  useEffect(() => {
-    setTimeout(() => {
-      setTransitionState("entering");
-    }, 300);
-  }, [open]);
-  const handleClose = useCallback(() => {
-    setTransitionState("exiting");
-    setTimeout(() => {
-      if (onClose) {
-        onClose({}, "backdropClick");
-      }
-    }, 300);
-  }, [onClose]);
-  const renderCustomHeader = useCallback(() => {
-    if (!isValidElement(renderHeader == null ? void 0 : renderHeader())) {
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: bem("header", {
-            "has-title": Boolean(title)
-          }),
-          children: [
-            renderDrawerTitle(title),
-            Boolean(disabled) && renderDrawerCloseButton(handleClose)
-          ]
-        }
-      );
-    }
-    return renderHeader();
-  }, [title, disabled, handleClose, renderHeader]);
-  return /* @__PURE__ */ jsx(
-    Modal,
-    {
-      "aria-labelledby": title,
-      disableEscapeKeyDown: disabled,
-      open,
-      ...props,
-      className: bem(void 0, void 0, className),
-      onClose: handleClose,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: bem(
-            "container",
-            {
-              open: !!open,
-              fullscreen: Boolean(fullscreen),
-              [`anchor-${anchor}`]: Boolean(anchor),
-              [`anchor-${anchor}--open`]: !!open,
-              [`anchor-${anchor}--enter`]: transitionState === "entering",
-              [`anchor-${anchor}--exit`]: transitionState === "exiting"
-            },
-            containerClassName
-          ),
-          children: [
-            renderCustomHeader(),
-            /* @__PURE__ */ jsx("div", { className: bem("content"), children })
-          ]
-        }
-      )
-    }
-  );
-}, "Drawer");
+import { createIsland } from "../../helpers/createIsland.js";
+import DrawerServer from "./Drawer.server.js";
+const Drawer = createIsland({
+  name: "Drawer",
+  Server: DrawerServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./Drawer.lazy.js"), "loadLazy")
+});
 export {
   Drawer,
-  renderDrawerCloseButton,
-  renderDrawerTitle
+  Drawer as default
 };

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

@@ -0,0 +1,15 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createLazyWrapper } from "../../helpers/createLazyWrapper.js";
+import DrawerClient from "./Drawer.client.js";
+import DrawerServer from "./Drawer.server.js";
+const Drawer_lazy = createLazyWrapper({
+  name: "Drawer",
+  Client: DrawerClient,
+  Server: DrawerServer,
+  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
+});
+export {
+  Drawer_lazy as default
+};