@prokodo/ui 0.0.38 → 0.0.40

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
+};

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

@@ -1,33 +1,36 @@
 const slideInLeft = "slideInLeft";
+const slideOutLeft = "slideOutLeft";
 const slideInRight = "slideInRight";
+const slideOutRight = "slideOutRight";
 const slideInTop = "slideInTop";
+const slideOutTop = "slideOutTop";
 const slideInBottom = "slideInBottom";
+const slideOutBottom = "slideOutBottom";
 const gradientMove = "gradientMove";
 const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
-  "prokodo-Drawer": "prokodo-Drawer",
+  "prokodo-Drawer__backdrop": "prokodo-Drawer__backdrop",
+  "prokodo-Drawer__backdrop--open": "prokodo-Drawer__backdrop--open",
   "prokodo-Drawer__container": "prokodo-Drawer__container",
-  "prokodo-Drawer__container--fullscreen": "prokodo-Drawer__container--fullscreen",
   "prokodo-Drawer__container--open": "prokodo-Drawer__container--open",
+  "prokodo-Drawer__container--fullscreen": "prokodo-Drawer__container--fullscreen",
   "prokodo-Drawer__container--anchor-left": "prokodo-Drawer__container--anchor-left",
-  "prokodo-Drawer__container--anchor-left--enter": "prokodo-Drawer__container--anchor-left--enter",
+  "prokodo-Drawer__container--anchor-left--open": "prokodo-Drawer__container--anchor-left--open",
   slideInLeft,
-  "prokodo-Drawer__container--anchor-left--exit": "prokodo-Drawer__container--anchor-left--exit",
+  slideOutLeft,
   "prokodo-Drawer__container--anchor-right": "prokodo-Drawer__container--anchor-right",
-  "prokodo-Drawer__container--anchor-right--enter": "prokodo-Drawer__container--anchor-right--enter",
+  "prokodo-Drawer__container--anchor-right--open": "prokodo-Drawer__container--anchor-right--open",
   slideInRight,
-  "prokodo-Drawer__container--anchor-right--exit": "prokodo-Drawer__container--anchor-right--exit",
+  slideOutRight,
   "prokodo-Drawer__container--anchor-top": "prokodo-Drawer__container--anchor-top",
-  "prokodo-Drawer__container--anchor-top--enter": "prokodo-Drawer__container--anchor-top--enter",
+  "prokodo-Drawer__container--anchor-top--open": "prokodo-Drawer__container--anchor-top--open",
   slideInTop,
-  "prokodo-Drawer__container--anchor-top--exit": "prokodo-Drawer__container--anchor-top--exit",
+  slideOutTop,
   "prokodo-Drawer__container--anchor-bottom": "prokodo-Drawer__container--anchor-bottom",
-  "prokodo-Drawer__container--anchor-bottom--enter": "prokodo-Drawer__container--anchor-bottom--enter",
+  "prokodo-Drawer__container--anchor-bottom--open": "prokodo-Drawer__container--anchor-bottom--open",
   slideInBottom,
-  "prokodo-Drawer__container--anchor-bottom--exit": "prokodo-Drawer__container--anchor-bottom--exit",
+  slideOutBottom,
   "prokodo-Drawer__header": "prokodo-Drawer__header",
-  "prokodo-Drawer__header__title": "prokodo-Drawer__header__title",
-  "prokodo-Drawer__header--has-title": "prokodo-Drawer__header--has-title",
   "prokodo-Drawer__content": "prokodo-Drawer__content",
   gradientMove,
   fadeInKeyframe
@@ -39,5 +42,9 @@ export {
   slideInBottom,
   slideInLeft,
   slideInRight,
-  slideInTop
+  slideInTop,
+  slideOutBottom,
+  slideOutLeft,
+  slideOutRight,
+  slideOutTop
 };

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

@@ -0,0 +1,12 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { DrawerView } from "./Drawer.view.js";
+function DrawerServer(props) {
+  if (Boolean(props == null ? void 0 : props.open)) return null;
+  return /* @__PURE__ */ jsx(DrawerView, { ...props });
+}
+__name(DrawerServer, "DrawerServer");
+export {
+  DrawerServer as default
+};

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

@@ -0,0 +1,75 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+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.js";
+const bem = create(styles, "Drawer");
+const DrawerView = /* @__PURE__ */ __name(({
+  open,
+  title,
+  titleProps,
+  anchor = "left",
+  fullscreen = false,
+  renderHeader,
+  closeButtonRef,
+  closeButtonProps,
+  containerRef,
+  className,
+  containerClassName,
+  children,
+  onClose,
+  backdropProps,
+  ...rest
+}) => {
+  const isOpen = Boolean(open);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: bem("backdrop", { open: isOpen }),
+      ...backdropProps,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: containerRef,
+          "aria-labelledby": isString(title) ? "drawer-title" : void 0,
+          "aria-modal": "true",
+          role: "dialog",
+          className: bem(
+            "container",
+            {
+              open: isOpen,
+              [`anchor-${anchor}`]: true,
+              [`anchor-${anchor}--open`]: isOpen,
+              fullscreen
+            },
+            containerClassName
+          ),
+          ...rest,
+          children: [
+            /* @__PURE__ */ jsx("div", { className: bem("header"), children: renderHeader ? renderHeader() : /* @__PURE__ */ jsxs(Fragment, { children: [
+              isString(title) && /* @__PURE__ */ jsx(Headline, { size: "md", ...titleProps, id: "drawer-title", children: title }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  "aria-label": "Close drawer",
+                  iconProps: { name: "Cancel01Icon", size: "sm" },
+                  variant: "text",
+                  ...closeButtonProps,
+                  ref: closeButtonRef,
+                  onClick: /* @__PURE__ */ __name(() => onClose == null ? void 0 : onClose("escapeKeyDown"), "onClick")
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx("div", { className: bem("content", void 0, className), children })
+          ]
+        }
+      )
+    }
+  );
+}, "DrawerView");
+export {
+  DrawerView
+};

package/dist/components/drawer/index.js

@@ -1,6 +1,4 @@
-import { Drawer, renderDrawerCloseButton, renderDrawerTitle } from "./Drawer.js";
+import { Drawer } from "./Drawer.js";
 export {
-  Drawer,
-  renderDrawerCloseButton,
-  renderDrawerTitle
+  Drawer
 };

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

@@ -0,0 +1,176 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { memo, useState, useEffect, useCallback, useMemo } from "react";
+import { isString } from "../../helpers/validations.js";
+import { FormView } from "./Form.view.js";
+const FormClient = memo((props) => {
+  const {
+    disabled,
+    fields,
+    defaultFields,
+    messages: initialMessages,
+    onSubmit,
+    onChangeForm,
+    messagesFields,
+    hideResponse,
+    ...restProps
+  } = props;
+  const [formState, setFormState] = useState(fields ?? []);
+  const [formMessages, setFormMessages] = useState(
+    initialMessages
+  );
+  const [honeypotValue, setHoneypotValue] = useState("");
+  useEffect(() => {
+    if (initialMessages !== void 0) {
+      setFormMessages(initialMessages);
+    }
+  }, [initialMessages]);
+  const updateSingleField = useCallback(
+    (index, update) => {
+      setFormState((prev) => {
+        const clone = [...prev];
+        clone[index] = { ...clone[index], ...update };
+        return clone;
+      });
+      if (onChangeForm) {
+        onChangeForm({ ...formState[index], ...update });
+      }
+    },
+    [formState, onChangeForm]
+  );
+  const handleFieldValidate = useCallback(
+    (field, err) => {
+      if (field.errorText === err) {
+        return;
+      }
+      const idx = formState.findIndex((f) => (f == null ? void 0 : f.name) === (field == null ? void 0 : field.name));
+      if (idx < 0) return;
+      updateSingleField(idx, { errorText: err });
+      setFormMessages((prev) => {
+        const updatedErrors = {
+          ...(prev == null ? void 0 : prev.errors) ?? {}
+        };
+        if (isString(err)) {
+          updatedErrors[field.label ?? ""] = [err];
+        } else {
+          delete updatedErrors[field.label ?? ""];
+        }
+        return {
+          errors: Object.keys(updatedErrors).length > 0 ? updatedErrors : void 0
+        };
+      });
+    },
+    [formState, updateSingleField]
+  );
+  const handleFieldChange = useCallback(
+    (field, value) => {
+      const idx = formState.findIndex((f) => f.name === field.name);
+      if (idx < 0) return;
+      if (!field.conditions || field.conditions.length === 0) {
+        updateSingleField(idx, { value });
+        return;
+      }
+      defaultFields == null ? void 0 : defaultFields.forEach((defField, i) => {
+        var _a;
+        if (Boolean((_a = defField.conditions) == null ? void 0 : _a.some((c) => c.fieldId === field.name))) {
+          updateSingleField(i, defaultFields[i]);
+        }
+      });
+      const matched = (field.conditions ?? []).filter((c) => {
+        if (value === void 0 || c.equalTo === void 0) return true;
+        if (typeof c.equalTo === "boolean" && c.equalTo === value) {
+          return true;
+        }
+        if (typeof c.equalTo === "string") {
+          return c.equalTo === value;
+        }
+        if (Array.isArray(c.equalTo) && typeof value === "string") {
+          return c.equalTo.includes(value);
+        }
+        return false;
+      });
+      matched.forEach((c) => {
+        const idx2 = formState.findIndex((f) => f.name === c.fieldId);
+        if (idx2 >= 0) {
+          updateSingleField(idx2, c.updateProps);
+        }
+      });
+      updateSingleField(idx, { value });
+    },
+    [defaultFields, formState, updateSingleField]
+  );
+  const handleHpChange = useCallback(
+    (e) => {
+      setHoneypotValue(e.target.value);
+    },
+    []
+  );
+  const validateFullForm = useCallback(() => {
+    const errors = {};
+    formState.forEach((field) => {
+      var _a, _b, _c, _d;
+      if (Boolean(field.required) && (field.value === void 0 || field.value === "" || Array.isArray(field.value) && field.value.length === 0) && field.visible !== false) {
+        const errMsg = ((_b = (_a = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _a.input) == null ? void 0 : _b["required"]) ?? "This field is required";
+        if (!errors[field.label ?? ""]) {
+          errors[field.label ?? ""] = [];
+        }
+        (_c = errors[field.label ?? ""]) == null ? void 0 : _c.push(errMsg);
+      }
+      if (isString(field.errorText)) {
+        if (!errors[field.label ?? ""]) {
+          errors[field.label ?? ""] = [];
+        }
+        (_d = errors[field.label ?? ""]) == null ? void 0 : _d.push(field.errorText);
+      }
+    });
+    return {
+      errors: Object.keys(errors).length > 0 ? errors : void 0
+    };
+  }, [formState, messagesFields]);
+  const handleFormSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      const { errors } = validateFullForm();
+      setFormMessages({ errors });
+      if (!errors) {
+        onSubmit == null ? void 0 : onSubmit(formState);
+      }
+    },
+    [formState, onSubmit, validateFullForm]
+  );
+  const isFormValid = useMemo(() => {
+    if (Boolean(hideResponse)) {
+      return formState.every((f) => {
+        if (Boolean(f.required) && f.value === void 0 && Boolean(f.visible) !== false) {
+          return false;
+        }
+        return true;
+      });
+    }
+    return true;
+  }, [formState, hideResponse]);
+  return /* @__PURE__ */ jsx(
+    FormView,
+    {
+      ...restProps,
+      disabled,
+      formMessages,
+      formState,
+      isFormValid,
+      fieldProps: {
+        onChange: handleFieldChange,
+        onValidate: handleFieldValidate
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      },
+      honeypot: {
+        value: honeypotValue,
+        onChange: handleHpChange
+      },
+      onFormSubmit: handleFormSubmit
+    }
+  );
+});
+FormClient.displayName = "FormClient";
+export {
+  FormClient
+};