@blockle/blocks 0.13.0 → 0.14.0

package/dist/styles/components/overlay/Dialog/Dialog.cjs

@@ -3,15 +3,6 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
 const styles_components_overlay_Dialog_dialog_css_cjs = require("./dialog.css.cjs");
-const reactDom = require("react-dom");
-const styles_components_other_BlocksProvider_BlocksProvider_cjs = require("../../other/BlocksProvider/BlocksProvider.cjs");
-const Portal = ({ children, container }) => {
-  const context = styles_components_display_Divider_Divider_cjs.useTheme();
-  return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx(styles_components_other_BlocksProvider_BlocksProvider_cjs.BlocksProvider, { theme: context, children }),
-    container || document.body
-  );
-};
 const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
   react.useEffect(() => {
     if (!enabled) {
@@ -22,8 +13,11 @@ const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
         onClickOutside();
       }
     };
-    document.addEventListener("click", listener);
+    const rafId = requestAnimationFrame(() => {
+      document.addEventListener("click", listener);
+    });
     return () => {
+      cancelAnimationFrame(rafId);
       document.removeEventListener("click", listener);
     };
   }, [ref, onClickOutside, enabled]);
@@ -45,27 +39,6 @@ const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) =
     };
   }, [callback, enabled, key, type]);
 };
-const useLayer = () => {
-  const layerRef = react.useRef();
-  react.useEffect(
-    () => () => {
-      if (layerRef.current) {
-        layerRef.current.remove();
-        layerRef.current = void 0;
-      }
-    },
-    []
-  );
-  return () => {
-    if (!layerRef.current) {
-      const div = document.createElement("div");
-      div.dataset.layer = "blocks";
-      layerRef.current = div;
-      document.body.append(layerRef.current);
-    }
-    return layerRef.current;
-  };
-};
 const usePreventBodyScroll = (enabled = true) => {
   useIsomorphicLayoutEffect(() => {
     if (!enabled) {
@@ -106,24 +79,15 @@ const useRestoreFocus = (active) => {
     }
   }, [active]);
 };
-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];
-};
 function hasAnimationDuration(element) {
   if (!element) {
     return false;
   }
   const style = window.getComputedStyle(element);
-  return style.transitionDuration !== "0s" || style.animationDuration !== "0s";
+  return hasDuration(style.transitionDuration) || hasDuration(style.animationDuration);
+}
+function hasDuration(duration) {
+  return duration.split(",").map((part) => Number.parseFloat(part.trim())).some((part) => part > 0);
 }
 const DialogContext = react.createContext(void 0);
 const useNestedDialog = (open) => {
@@ -149,12 +113,11 @@ const Dialog = ({
 }) => {
   const dialogClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("dialog", { dialog: true, variants: { size } });
   const dialogRef = react.useRef(null);
-  const layer = useLayer();
-  const [visible, hide] = useVisibilityState(open);
   const [enabled, setEnabled] = react.useState(true);
+  const [visible, setVisible] = react.useState(open);
   useRestoreFocus(open);
-  const isNested = useNestedDialog(visible);
-  usePreventBodyScroll(visible && !isNested);
+  const isNested = useNestedDialog(open);
+  usePreventBodyScroll(open && !isNested);
   const onEscape = react.useCallback(
     (event) => {
       event.preventDefault();
@@ -166,47 +129,32 @@ const Dialog = ({
   useClickOutside(dialogRef, onRequestClose, { enabled: open && enabled });
   useIsomorphicLayoutEffect(() => {
     var _a, _b;
-    if (!visible) {
-      (_a = dialogRef.current) == null ? void 0 : _a.close();
-    }
-    if (!open) {
-      (_b = dialogRef.current) == null ? void 0 : _b.removeAttribute("data-open");
-      return;
+    if (open && visible) {
+      (_a = dialogRef.current) == null ? void 0 : _a.showModal();
+    } else if (open) {
+      setVisible(true);
+    } else {
+      if (!hasAnimationDuration(dialogRef.current)) {
+        setVisible(false);
+      }
+      (_b = dialogRef.current) == null ? void 0 : _b.close();
     }
-    let timer = requestAnimationFrame(() => {
-      timer = requestAnimationFrame(() => {
-        var _a2, _b2;
-        (_a2 = dialogRef.current) == null ? void 0 : _a2.showModal();
-        (_b2 = dialogRef.current) == null ? void 0 : _b2.setAttribute("data-open", "");
-      });
-    });
-    return () => {
-      cancelAnimationFrame(timer);
-    };
   }, [open, visible]);
   const onAnimationEnd = react.useCallback(() => {
     if (!open) {
-      hide();
-    }
-  }, [hide, open]);
-  react.useEffect(() => {
-    if (open) {
-      return;
-    }
-    if (!hasAnimationDuration(dialogRef.current)) {
-      hide();
+      setVisible(false);
     }
-  }, [hide, open]);
+  }, [setVisible, open]);
   if (!visible) {
     return null;
   }
-  const dataOpen = typeof window === "undefined" && open ? "" : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsxRuntime.jsx(
+  const dataOpen = typeof window === "undefined" && open ? true : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsxRuntime.jsx(
     "dialog",
     {
       ref: dialogRef,
       "aria-modal": "true",
-      "data-open": dataOpen,
+      open: dataOpen,
       className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_overlay_Dialog_dialog_css_cjs.dialog, dialogClassName, className),
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
@@ -216,11 +164,8 @@ const Dialog = ({
   ) }) });
 };
 exports.Dialog = Dialog;
-exports.Portal = Portal;
 exports.hasAnimationDuration = hasAnimationDuration;
 exports.useClickOutside = useClickOutside;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useKeyboard = useKeyboard;
-exports.useLayer = useLayer;
 exports.usePreventBodyScroll = usePreventBodyScroll;
-exports.useVisibilityState = useVisibilityState;

package/dist/styles/components/overlay/Dialog/Dialog.mjs

@@ -1,16 +1,7 @@
-import { jsx } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef, useState, useCallback, createContext, useContext } from "react";
-import { useTheme, useComponentStyles, classnames } from "../../display/Divider/Divider.mjs";
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, createContext, useContext, useState, useCallback } from "react";
+import { useComponentStyles, classnames } from "../../display/Divider/Divider.mjs";
 import { dialog } from "./dialog.css.mjs";
-import { createPortal } from "react-dom";
-import { BlocksProvider } from "../../other/BlocksProvider/BlocksProvider.mjs";
-const Portal = ({ children, container }) => {
-  const context = useTheme();
-  return createPortal(
-    /* @__PURE__ */ jsx(BlocksProvider, { theme: context, children }),
-    container || document.body
-  );
-};
 const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
   useEffect(() => {
     if (!enabled) {
@@ -21,8 +12,11 @@ const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
         onClickOutside();
       }
     };
-    document.addEventListener("click", listener);
+    const rafId = requestAnimationFrame(() => {
+      document.addEventListener("click", listener);
+    });
     return () => {
+      cancelAnimationFrame(rafId);
       document.removeEventListener("click", listener);
     };
   }, [ref, onClickOutside, enabled]);
@@ -44,27 +38,6 @@ const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) =
     };
   }, [callback, enabled, key, type]);
 };
-const useLayer = () => {
-  const layerRef = useRef();
-  useEffect(
-    () => () => {
-      if (layerRef.current) {
-        layerRef.current.remove();
-        layerRef.current = void 0;
-      }
-    },
-    []
-  );
-  return () => {
-    if (!layerRef.current) {
-      const div = document.createElement("div");
-      div.dataset.layer = "blocks";
-      layerRef.current = div;
-      document.body.append(layerRef.current);
-    }
-    return layerRef.current;
-  };
-};
 const usePreventBodyScroll = (enabled = true) => {
   useIsomorphicLayoutEffect(() => {
     if (!enabled) {
@@ -105,24 +78,15 @@ const useRestoreFocus = (active) => {
     }
   }, [active]);
 };
-const useVisibilityState = (open) => {
-  const [visible, setVisible] = useState(open);
-  const hide = useCallback(() => {
-    setVisible(false);
-  }, []);
-  useEffect(() => {
-    if (open) {
-      setVisible(true);
-    }
-  }, [open]);
-  return [visible, hide];
-};
 function hasAnimationDuration(element) {
   if (!element) {
     return false;
   }
   const style = window.getComputedStyle(element);
-  return style.transitionDuration !== "0s" || style.animationDuration !== "0s";
+  return hasDuration(style.transitionDuration) || hasDuration(style.animationDuration);
+}
+function hasDuration(duration) {
+  return duration.split(",").map((part) => Number.parseFloat(part.trim())).some((part) => part > 0);
 }
 const DialogContext = createContext(void 0);
 const useNestedDialog = (open) => {
@@ -148,12 +112,11 @@ const Dialog = ({
 }) => {
   const dialogClassName = useComponentStyles("dialog", { dialog: true, variants: { size } });
   const dialogRef = useRef(null);
-  const layer = useLayer();
-  const [visible, hide] = useVisibilityState(open);
   const [enabled, setEnabled] = useState(true);
+  const [visible, setVisible] = useState(open);
   useRestoreFocus(open);
-  const isNested = useNestedDialog(visible);
-  usePreventBodyScroll(visible && !isNested);
+  const isNested = useNestedDialog(open);
+  usePreventBodyScroll(open && !isNested);
   const onEscape = useCallback(
     (event) => {
       event.preventDefault();
@@ -165,47 +128,32 @@ const Dialog = ({
   useClickOutside(dialogRef, onRequestClose, { enabled: open && enabled });
   useIsomorphicLayoutEffect(() => {
     var _a, _b;
-    if (!visible) {
-      (_a = dialogRef.current) == null ? void 0 : _a.close();
-    }
-    if (!open) {
-      (_b = dialogRef.current) == null ? void 0 : _b.removeAttribute("data-open");
-      return;
+    if (open && visible) {
+      (_a = dialogRef.current) == null ? void 0 : _a.showModal();
+    } else if (open) {
+      setVisible(true);
+    } else {
+      if (!hasAnimationDuration(dialogRef.current)) {
+        setVisible(false);
+      }
+      (_b = dialogRef.current) == null ? void 0 : _b.close();
     }
-    let timer = requestAnimationFrame(() => {
-      timer = requestAnimationFrame(() => {
-        var _a2, _b2;
-        (_a2 = dialogRef.current) == null ? void 0 : _a2.showModal();
-        (_b2 = dialogRef.current) == null ? void 0 : _b2.setAttribute("data-open", "");
-      });
-    });
-    return () => {
-      cancelAnimationFrame(timer);
-    };
   }, [open, visible]);
   const onAnimationEnd = useCallback(() => {
     if (!open) {
-      hide();
-    }
-  }, [hide, open]);
-  useEffect(() => {
-    if (open) {
-      return;
-    }
-    if (!hasAnimationDuration(dialogRef.current)) {
-      hide();
+      setVisible(false);
     }
-  }, [hide, open]);
+  }, [setVisible, open]);
   if (!visible) {
     return null;
   }
-  const dataOpen = typeof window === "undefined" && open ? "" : void 0;
-  return /* @__PURE__ */ jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsx(
+  const dataOpen = typeof window === "undefined" && open ? true : void 0;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsx(
     "dialog",
     {
       ref: dialogRef,
       "aria-modal": "true",
-      "data-open": dataOpen,
+      open: dataOpen,
       className: classnames(dialog, dialogClassName, className),
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
@@ -216,12 +164,9 @@ const Dialog = ({
 };
 export {
   Dialog,
-  Portal,
   hasAnimationDuration,
   useClickOutside,
   useIsomorphicLayoutEffect,
   useKeyboard,
-  useLayer,
-  usePreventBodyScroll,
-  useVisibilityState
+  usePreventBodyScroll
 };

package/dist/styles/themes/momotaro/components/dialog.css.cjs

@@ -20,23 +20,36 @@ const dialog = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dialo
       backgroundColor: "rgba(0, 0, 0, 0.5)"
     },
     selectors: {
-      "&[data-open]": {
+      "&[open]": {
         transform: "translate(0, 0)",
         opacity: 1
       },
-      "&[data-open]::backdrop": {
+      "&[open]::backdrop": {
         opacity: 1
       }
     },
     // Apply the animation only if the user has not requested reduced motion
     "@media": {
       "(prefers-reduced-motion: no-preference)": {
+        // Ending style
         transform: "translate(0, -120px)",
         opacity: 0,
-        transition: "transform 240ms, opacity 160ms",
+        transitionBehavior: "allow-discrete",
+        transitionProperty: "opacity, transform, overlay, display",
+        transitionDuration: "240ms, 160ms, 240ms, 240ms",
+        // @ts-expect-error - Vanilla Extract does not support @starting-style (yet)
+        "@starting-style": {
+          transform: "translate(0, -120px)",
+          opacity: 0
+        },
         "::backdrop": {
           opacity: 0,
-          transition: "opacity 160ms"
+          transitionBehavior: "allow-discrete",
+          transitionProperty: "opacity, overlay, display",
+          transitionDuration: "160ms, 240ms, 240ms",
+          "@starting-style": {
+            opacity: 0
+          }
         }
       }
     }

package/dist/styles/themes/momotaro/components/dialog.css.mjs

@@ -19,23 +19,36 @@ const dialog = makeComponentTheme("dialog", {
       backgroundColor: "rgba(0, 0, 0, 0.5)"
     },
     selectors: {
-      "&[data-open]": {
+      "&[open]": {
         transform: "translate(0, 0)",
         opacity: 1
       },
-      "&[data-open]::backdrop": {
+      "&[open]::backdrop": {
         opacity: 1
       }
     },
     // Apply the animation only if the user has not requested reduced motion
     "@media": {
       "(prefers-reduced-motion: no-preference)": {
+        // Ending style
         transform: "translate(0, -120px)",
         opacity: 0,
-        transition: "transform 240ms, opacity 160ms",
+        transitionBehavior: "allow-discrete",
+        transitionProperty: "opacity, transform, overlay, display",
+        transitionDuration: "240ms, 160ms, 240ms, 240ms",
+        // @ts-expect-error - Vanilla Extract does not support @starting-style (yet)
+        "@starting-style": {
+          transform: "translate(0, -120px)",
+          opacity: 0
+        },
         "::backdrop": {
           opacity: 0,
-          transition: "opacity 160ms"
+          transitionBehavior: "allow-discrete",
+          transitionProperty: "opacity, overlay, display",
+          transitionDuration: "160ms, 240ms, 240ms",
+          "@starting-style": {
+            opacity: 0
+          }
         }
       }
     }

package/dist/styles/themes/momotaro/components/link.css.cjs

@@ -19,6 +19,12 @@ const link = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("link",
       textDecoration: "underline"
     },
     cursor: "pointer"
+    // selectors: {
+    //   '&[target="_blank"]::after': {
+    //     content: '"\\2197"',
+    //     marginLeft: 4,
+    //   },
+    // },
   }, styles_themes_momotaro_components_helpers_css_cjs.focusable], "link_base"),
   variants: {
     variant: {

package/dist/styles/themes/momotaro/components/link.css.mjs

@@ -18,6 +18,12 @@ const link = makeComponentTheme("link", {
       textDecoration: "underline"
     },
     cursor: "pointer"
+    // selectors: {
+    //   '&[target="_blank"]::after': {
+    //     content: '"\\2197"',
+    //     marginLeft: 4,
+    //   },
+    // },
   }, focusable], "link_base"),
   variants: {
     variant: {

package/dist/styles/themes/momotaro/components/popover.css.cjs

@@ -11,6 +11,7 @@ const popover = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("popo
     padding: "medium",
     margin: "small",
     // Space between the popover and the anchor element
+    width: "max-content",
     selectors: {
       "&[data-open]": {
         transform: "scale(1)",

package/dist/styles/themes/momotaro/components/popover.css.mjs

@@ -10,6 +10,7 @@ const popover = makeComponentTheme("popover", {
     padding: "medium",
     margin: "small",
     // Space between the popover and the anchor element
+    width: "max-content",
     selectors: {
       "&[data-open]": {
         transform: "scale(1)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",
@@ -34,7 +34,6 @@
       "import": "./dist/themes/momotaro.mjs",
       "require": "./dist/themes/momotaro.cjs"
     },
-    "./dist/style.css": "./dist/style.css",
     "./package.json": "./package.json"
   },
   "main": "./dist/index.cjs",
@@ -59,6 +58,10 @@
   "resolutions": {
     "string-width": "^4.2.2"
   },
+  "dependencies": {
+    "npm": "^10.8.1",
+    "update": "^0.4.2"
+  },
   "devDependencies": {
     "@changesets/cli": "^2.27.5",
     "@crackle/cli": "^0.15.4",