@prokodo/ui 0.0.26 → 0.0.28

package/dist/components/drawer/Drawer.js

@@ -1,13 +1,17 @@
-import { jsx as r, jsxs as f } from "react/jsx-runtime";
-import { Modal as b } from "@mui/base";
-import { useState as v, useEffect as B, useCallback as u, isValidElement as w } from "react";
-import { create as D } from "../../helpers/bem.js";
-import { isString as k } from "../../helpers/validations.js";
-import y from "./Drawer.module.scss.js";
-import { Headline as N } from "../headline/Headline.js";
-import { Button as S } from "../button/Button.js";
-const n = D(y, "Drawer"), T = (o) => k(o) && /* @__PURE__ */ r(N, { size: "md", type: "h2", children: o }), $ = (o) => /* @__PURE__ */ r(
-  S,
+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",
@@ -17,78 +21,88 @@ const n = D(y, "Drawer"), T = (o) => k(o) && /* @__PURE__ */ r(N, { size: "md",
       name: "Cancel01Icon",
       size: "sm"
     },
-    onClick: o
+    onClick: onClose
   }
-), q = ({
-  open: o,
-  title: i,
-  fullscreen: p,
-  className: h,
-  containerClassName: d,
-  children: g,
-  anchor: t = "left",
-  disabled: s,
-  renderHeader: e,
-  onClose: a,
-  ...x
+), "renderDrawerCloseButton");
+const Drawer = /* @__PURE__ */ __name(({
+  open,
+  title,
+  fullscreen,
+  className,
+  containerClassName,
+  children,
+  anchor = "left",
+  disabled,
+  renderHeader,
+  onClose,
+  ...props
 }) => {
-  const [c, m] = v("entering");
-  B(() => {
+  const [transitionState, setTransitionState] = useState("entering");
+  useEffect(() => {
     setTimeout(() => {
-      m("entering");
+      setTransitionState("entering");
     }, 300);
-  }, [o]);
-  const l = u(() => {
-    m("exiting"), setTimeout(() => {
-      a && a({}, "backdropClick");
+  }, [open]);
+  const handleClose = useCallback(() => {
+    setTransitionState("exiting");
+    setTimeout(() => {
+      if (onClose) {
+        onClose({}, "backdropClick");
+      }
     }, 300);
-  }, [a]), C = u(() => w(e == null ? void 0 : e()) ? e() : /* @__PURE__ */ f(
-    "div",
-    {
-      className: n("header", {
-        "has-title": !!i
-      }),
-      children: [
-        T(i),
-        !!s && $(l)
-      ]
+  }, [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)
+          ]
+        }
+      );
     }
-  ), [i, s, l, e]);
-  return /* @__PURE__ */ r(
-    b,
+    return renderHeader();
+  }, [title, disabled, handleClose, renderHeader]);
+  return /* @__PURE__ */ jsx(
+    Modal,
     {
-      "aria-labelledby": i,
-      disableEscapeKeyDown: s,
-      open: o,
-      ...x,
-      className: n(void 0, void 0, h),
-      onClose: l,
-      children: /* @__PURE__ */ f(
+      "aria-labelledby": title,
+      disableEscapeKeyDown: disabled,
+      open,
+      ...props,
+      className: bem(void 0, void 0, className),
+      onClose: handleClose,
+      children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: n(
+          className: bem(
             "container",
             {
-              open: !!o,
-              fullscreen: !!p,
-              [`anchor-${t}`]: !!t,
-              [`anchor-${t}--open`]: !!o,
-              [`anchor-${t}--enter`]: c === "entering",
-              [`anchor-${t}--exit`]: c === "exiting"
+              open: !!open,
+              fullscreen: Boolean(fullscreen),
+              [`anchor-${anchor}`]: Boolean(anchor),
+              [`anchor-${anchor}--open`]: !!open,
+              [`anchor-${anchor}--enter`]: transitionState === "entering",
+              [`anchor-${anchor}--exit`]: transitionState === "exiting"
             },
-            d
+            containerClassName
           ),
           children: [
-            C(),
-            /* @__PURE__ */ r("div", { className: n("content"), children: g })
+            renderCustomHeader(),
+            /* @__PURE__ */ jsx("div", { className: bem("content"), children })
           ]
         }
       )
     }
   );
-};
+}, "Drawer");
 export {
-  q as Drawer,
-  $ as renderDrawerCloseButton,
-  T as renderDrawerTitle
+  Drawer,
+  renderDrawerCloseButton,
+  renderDrawerTitle
 };

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

@@ -1,37 +1,43 @@
-const o = "slideInLeft", r = "slideInRight", e = "slideInTop", n = "slideInBottom", a = "gradientMove", t = "fadeInKeyframe", _ = {
+const slideInLeft = "slideInLeft";
+const slideInRight = "slideInRight";
+const slideInTop = "slideInTop";
+const slideInBottom = "slideInBottom";
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-Drawer": "prokodo-Drawer",
   "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--anchor-left": "prokodo-Drawer__container--anchor-left",
   "prokodo-Drawer__container--anchor-left--enter": "prokodo-Drawer__container--anchor-left--enter",
-  slideInLeft: o,
+  slideInLeft,
   "prokodo-Drawer__container--anchor-left--exit": "prokodo-Drawer__container--anchor-left--exit",
   "prokodo-Drawer__container--anchor-right": "prokodo-Drawer__container--anchor-right",
   "prokodo-Drawer__container--anchor-right--enter": "prokodo-Drawer__container--anchor-right--enter",
-  slideInRight: r,
+  slideInRight,
   "prokodo-Drawer__container--anchor-right--exit": "prokodo-Drawer__container--anchor-right--exit",
   "prokodo-Drawer__container--anchor-top": "prokodo-Drawer__container--anchor-top",
   "prokodo-Drawer__container--anchor-top--enter": "prokodo-Drawer__container--anchor-top--enter",
-  slideInTop: e,
+  slideInTop,
   "prokodo-Drawer__container--anchor-top--exit": "prokodo-Drawer__container--anchor-top--exit",
   "prokodo-Drawer__container--anchor-bottom": "prokodo-Drawer__container--anchor-bottom",
   "prokodo-Drawer__container--anchor-bottom--enter": "prokodo-Drawer__container--anchor-bottom--enter",
-  slideInBottom: n,
+  slideInBottom,
   "prokodo-Drawer__container--anchor-bottom--exit": "prokodo-Drawer__container--anchor-bottom--exit",
   "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: a,
-  fadeInKeyframe: t
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  _ as default,
-  t as fadeInKeyframe,
-  a as gradientMove,
-  n as slideInBottom,
-  o as slideInLeft,
-  r as slideInRight,
-  e as slideInTop
+  styles as default,
+  fadeInKeyframe,
+  gradientMove,
+  slideInBottom,
+  slideInLeft,
+  slideInRight,
+  slideInTop
 };

package/dist/components/drawer/index.js

@@ -1,6 +1,6 @@
-import { Drawer as o, renderDrawerCloseButton as t, renderDrawerTitle as a } from "./Drawer.js";
+import { Drawer, renderDrawerCloseButton, renderDrawerTitle } from "./Drawer.js";
 export {
-  o as Drawer,
-  t as renderDrawerCloseButton,
-  a as renderDrawerTitle
+  Drawer,
+  renderDrawerCloseButton,
+  renderDrawerTitle
 };