@blockle/blocks 0.3.9 → 0.4.1

package/dist/index.cjs

@@ -1,14 +1,16 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const styles_lib_css_atoms_breakpoints_cjs = require("./styles/lib/css/atoms/breakpoints.cjs");
-const styles_lib_css_theme_makeTheme_cjs = require("./styles/lib/css/theme/makeTheme.cjs");
 const styles_lib_css_theme_makeComponentTheme_cjs = require("./styles/lib/css/theme/makeComponentTheme.cjs");
+const styles_lib_css_theme_makeTheme_cjs = require("./styles/lib/css/theme/makeTheme.cjs");
 const styles_lib_css_theme_vars_css_cjs = require("./styles/lib/css/theme/vars.css.cjs");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("./styles/lib/css/atoms/sprinkles.css.cjs");
-const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const jsxRuntime = require("react/jsx-runtime");
 const styles_components_Button_Button_css_cjs = require("./styles/components/Button/Button.css.cjs");
 const styles_components_Divider_divider_css_cjs = require("./styles/components/Divider/divider.css.cjs");
+const styles_components_Dialog_dialog_css_cjs = require("./styles/components/Dialog/dialog.css.cjs");
+const reactDom = require("react-dom");
 const classnames = (...args) => {
   const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
   return className || void 0;
@@ -286,14 +288,186 @@ const Divider = ({ className, color }) => {
     }
   );
 };
+const useLayer = () => {
+  const layerRef = react.useRef();
+  react.useEffect(
+    () => () => {
+      if (layerRef.current) {
+        layerRef.current.remove();
+      }
+    },
+    []
+  );
+  return () => {
+    if (!layerRef.current) {
+      layerRef.current = document.createElement("div");
+      document.body.append(layerRef.current);
+    }
+    return layerRef.current;
+  };
+};
+const useVisibilityState = (open) => {
+  const [visible, setVisible] = react.useState(open);
+  const hide = react.useCallback(() => {
+    setVisible(false);
+  }, []);
+  react.useEffect(() => {
+    if (open) {
+      setVisible(true);
+    }
+  }, [open]);
+  return [visible, hide];
+};
+const focusableSelectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+const getFirstFocusableElement = (container) => {
+  const focusable = container.querySelector(focusableSelectors);
+  return focusable || null;
+};
+const focusFirstElement = (container) => {
+  const focusable = getFirstFocusableElement(container);
+  if (focusable) {
+    focusable.focus();
+  }
+};
+const useFocusLock = ({ ref, active }) => {
+  react.useEffect(() => {
+    if (!active) {
+      return;
+    }
+    const handleFocus = (event) => {
+      if (ref.current && event.target instanceof HTMLElement && !ref.current.contains(event.target)) {
+        focusFirstElement(ref.current);
+      }
+    };
+    document.addEventListener("focusin", handleFocus);
+    return () => {
+      document.removeEventListener("focusin", handleFocus);
+    };
+  }, [active]);
+};
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+const useRestoreFocus = (active) => {
+  const [target, setTarget] = react.useState(null);
+  useIsomorphicLayoutEffect(() => {
+    if (active && !target) {
+      setTarget(document.activeElement);
+    }
+  }, [active]);
+  react.useEffect(() => {
+    if (!active && target instanceof HTMLElement) {
+      target.focus();
+    }
+  }, [active]);
+};
+const DialogContext = react.createContext(void 0);
+const useNestedDialog = (open) => {
+  const parentDialog = react.useContext(DialogContext);
+  react.useEffect(() => {
+    if (!parentDialog || !open) {
+      return;
+    }
+    parentDialog.setEnabled(false);
+    return () => {
+      parentDialog.setEnabled(true);
+    };
+  }, [parentDialog, open]);
+  return !!parentDialog;
+};
+const usePreventBodyScroll = (enabled = true) => {
+  useIsomorphicLayoutEffect(() => {
+    const prevValue = document.body.style.getPropertyValue("overflow");
+    if (enabled) {
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.body.style.overflow = prevValue;
+    };
+  }, [enabled]);
+};
+const Portal = ({ children, container }) => {
+  const context = useTheme();
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(BlocksProvider, { theme: context, children }),
+    container || document.body
+  );
+};
+const Dialog = ({ children, open, className, onRequestClose }) => {
+  const dialogRef = react.useRef(null);
+  const layer = useLayer();
+  const [visible, hide] = useVisibilityState(open);
+  const [enabled, setEnabled] = react.useState(true);
+  const onBackdropClick = react.useCallback(
+    (event) => {
+      if (event.target === event.currentTarget) {
+        onRequestClose();
+      }
+    },
+    [onRequestClose]
+  );
+  const onAnimationEnd = react.useCallback((event) => {
+    if (event.animationName === styles_components_Dialog_dialog_css_cjs.backdropLeaveAnimation) {
+      event.stopPropagation();
+      hide();
+    }
+  }, []);
+  useFocusLock({ ref: dialogRef, active: open && enabled });
+  useRestoreFocus(open);
+  const isNested = useNestedDialog(visible);
+  usePreventBodyScroll(visible && !isNested);
+  react.useEffect(() => {
+    if (!open || !enabled) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onRequestClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, enabled]);
+  const backdropClassName = useComponentStyles("dialog", { backdrop: true });
+  const dialogClassName = useComponentStyles("dialog", { base: true });
+  if (!visible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Box,
+    {
+      className: classnames(styles_components_Dialog_dialog_css_cjs.backdrop, !open && styles_components_Dialog_dialog_css_cjs.backdropLeave, backdropClassName),
+      display: "flex",
+      placeItems: "center",
+      onClick: onBackdropClick,
+      onAnimationEnd,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Box,
+        {
+          ref: dialogRef,
+          as: "dialog",
+          open: true,
+          className: classnames(
+            styles_components_Dialog_dialog_css_cjs.dialog,
+            !open && styles_components_Dialog_dialog_css_cjs.dialogLeave,
+            dialogClassName,
+            className
+          ),
+          children
+        }
+      )
+    }
+  ) }) });
+};
 exports.breakpointQuery = styles_lib_css_atoms_breakpoints_cjs.breakpointQuery;
-exports.makeTheme = styles_lib_css_theme_makeTheme_cjs.makeTheme;
 exports.makeComponentTheme = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme;
+exports.makeTheme = styles_lib_css_theme_makeTheme_cjs.makeTheme;
 exports.vars = styles_lib_css_theme_vars_css_cjs.vars;
 exports.atoms = styles_lib_css_atoms_sprinkles_css_cjs.atoms;
 exports.BlocksProvider = BlocksProvider;
 exports.Box = Box;
 exports.Button = Button;
+exports.Dialog = Dialog;
 exports.Divider = Divider;
 exports.Heading = Heading;
 exports.Inline = Inline;
@@ -302,3 +476,5 @@ exports.Spinner = Spinner;
 exports.Stack = Stack;
 exports.Text = Text;
 exports.classnames = classnames;
+exports.useComponentStyleDefaultProps = useComponentStyleDefaultProps;
+exports.useComponentStyles = useComponentStyles;

package/dist/index.d.ts

@@ -1 +1 @@
-export { BlocksProvider, BlocksProviderProps, BlocksTokens, Box, BoxProps, Button, ButtonProps, ComponentThemesMap, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, vars } from './momotaro.chunk.js';
+export { BlocksProvider, BlocksProviderProps, BlocksTokens, Box, BoxProps, Button, ButtonProps, ComponentThemesMap, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, useComponentStyleDefaultProps, useComponentStyles, vars } from './momotaro.chunk.js';

package/dist/index.mjs

@@ -1,14 +1,16 @@
 'use client';
 
 import { breakpointQuery } from "./styles/lib/css/atoms/breakpoints.mjs";
-import { makeTheme } from "./styles/lib/css/theme/makeTheme.mjs";
 import { makeComponentTheme } from "./styles/lib/css/theme/makeComponentTheme.mjs";
+import { makeTheme } from "./styles/lib/css/theme/makeTheme.mjs";
 import { vars } from "./styles/lib/css/theme/vars.css.mjs";
 import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
+import { createContext, forwardRef, useContext, useRef, useEffect, useState, useCallback, useLayoutEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, forwardRef, useContext } from "react";
 import { buttonReset } from "./styles/components/Button/Button.css.mjs";
 import { divider } from "./styles/components/Divider/divider.css.mjs";
+import { backdropLeaveAnimation, backdropLeave, backdrop, dialogLeave, dialog } from "./styles/components/Dialog/dialog.css.mjs";
+import { createPortal } from "react-dom";
 const classnames = (...args) => {
   const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
   return className || void 0;
@@ -286,10 +288,182 @@ const Divider = ({ className, color }) => {
     }
   );
 };
+const useLayer = () => {
+  const layerRef = useRef();
+  useEffect(
+    () => () => {
+      if (layerRef.current) {
+        layerRef.current.remove();
+      }
+    },
+    []
+  );
+  return () => {
+    if (!layerRef.current) {
+      layerRef.current = document.createElement("div");
+      document.body.append(layerRef.current);
+    }
+    return layerRef.current;
+  };
+};
+const useVisibilityState = (open) => {
+  const [visible, setVisible] = useState(open);
+  const hide = useCallback(() => {
+    setVisible(false);
+  }, []);
+  useEffect(() => {
+    if (open) {
+      setVisible(true);
+    }
+  }, [open]);
+  return [visible, hide];
+};
+const focusableSelectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+const getFirstFocusableElement = (container) => {
+  const focusable = container.querySelector(focusableSelectors);
+  return focusable || null;
+};
+const focusFirstElement = (container) => {
+  const focusable = getFirstFocusableElement(container);
+  if (focusable) {
+    focusable.focus();
+  }
+};
+const useFocusLock = ({ ref, active }) => {
+  useEffect(() => {
+    if (!active) {
+      return;
+    }
+    const handleFocus = (event) => {
+      if (ref.current && event.target instanceof HTMLElement && !ref.current.contains(event.target)) {
+        focusFirstElement(ref.current);
+      }
+    };
+    document.addEventListener("focusin", handleFocus);
+    return () => {
+      document.removeEventListener("focusin", handleFocus);
+    };
+  }, [active]);
+};
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+const useRestoreFocus = (active) => {
+  const [target, setTarget] = useState(null);
+  useIsomorphicLayoutEffect(() => {
+    if (active && !target) {
+      setTarget(document.activeElement);
+    }
+  }, [active]);
+  useEffect(() => {
+    if (!active && target instanceof HTMLElement) {
+      target.focus();
+    }
+  }, [active]);
+};
+const DialogContext = createContext(void 0);
+const useNestedDialog = (open) => {
+  const parentDialog = useContext(DialogContext);
+  useEffect(() => {
+    if (!parentDialog || !open) {
+      return;
+    }
+    parentDialog.setEnabled(false);
+    return () => {
+      parentDialog.setEnabled(true);
+    };
+  }, [parentDialog, open]);
+  return !!parentDialog;
+};
+const usePreventBodyScroll = (enabled = true) => {
+  useIsomorphicLayoutEffect(() => {
+    const prevValue = document.body.style.getPropertyValue("overflow");
+    if (enabled) {
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.body.style.overflow = prevValue;
+    };
+  }, [enabled]);
+};
+const Portal = ({ children, container }) => {
+  const context = useTheme();
+  return createPortal(
+    /* @__PURE__ */ jsx(BlocksProvider, { theme: context, children }),
+    container || document.body
+  );
+};
+const Dialog = ({ children, open, className, onRequestClose }) => {
+  const dialogRef = useRef(null);
+  const layer = useLayer();
+  const [visible, hide] = useVisibilityState(open);
+  const [enabled, setEnabled] = useState(true);
+  const onBackdropClick = useCallback(
+    (event) => {
+      if (event.target === event.currentTarget) {
+        onRequestClose();
+      }
+    },
+    [onRequestClose]
+  );
+  const onAnimationEnd = useCallback((event) => {
+    if (event.animationName === backdropLeaveAnimation) {
+      event.stopPropagation();
+      hide();
+    }
+  }, []);
+  useFocusLock({ ref: dialogRef, active: open && enabled });
+  useRestoreFocus(open);
+  const isNested = useNestedDialog(visible);
+  usePreventBodyScroll(visible && !isNested);
+  useEffect(() => {
+    if (!open || !enabled) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onRequestClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, enabled]);
+  const backdropClassName = useComponentStyles("dialog", { backdrop: true });
+  const dialogClassName = useComponentStyles("dialog", { base: true });
+  if (!visible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: classnames(backdrop, !open && backdropLeave, backdropClassName),
+      display: "flex",
+      placeItems: "center",
+      onClick: onBackdropClick,
+      onAnimationEnd,
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          ref: dialogRef,
+          as: "dialog",
+          open: true,
+          className: classnames(
+            dialog,
+            !open && dialogLeave,
+            dialogClassName,
+            className
+          ),
+          children
+        }
+      )
+    }
+  ) }) });
+};
 export {
   BlocksProvider,
   Box,
   Button,
+  Dialog,
   Divider,
   Heading,
   Inline,
@@ -302,5 +476,7 @@ export {
   classnames,
   makeComponentTheme,
   makeTheme,
+  useComponentStyleDefaultProps,
+  useComponentStyles,
   vars
 };