@blockle/blocks 0.13.0 → 0.14.1

package/dist/index.cjs

@@ -17,6 +17,7 @@ const styles_components_form_Select_Select_cjs = require("./styles/components/fo
 const styles_components_form_Slider_Slider_cjs = require("./styles/components/form/Slider/Slider.cjs");
 const styles_components_form_Switch_Switch_cjs = require("./styles/components/form/Switch/Switch.cjs");
 const styles_components_other_BlocksProvider_BlocksProvider_cjs = require("./styles/components/other/BlocksProvider/BlocksProvider.cjs");
+const reactDom = require("react-dom");
 const styles_components_overlay_Dialog_Dialog_cjs = require("./styles/components/overlay/Dialog/Dialog.cjs");
 const styles_components_typography_Heading_Heading_cjs = require("./styles/components/typography/Heading/Heading.cjs");
 const styles_components_typography_Text_Text_cjs = require("./styles/components/typography/Text/Text.cjs");
@@ -136,7 +137,47 @@ const Link = react.forwardRef(function Link2({ asChild, className, children, var
     }
   );
 });
-function getDopoverPosition(align, anchorRef, popoverRef) {
+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 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 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 getPopoverPosition(align, anchorRef, popoverRef) {
   if (!anchorRef.current || !popoverRef.current) {
     return [0, 0];
   }
@@ -144,7 +185,12 @@ function getDopoverPosition(align, anchorRef, popoverRef) {
   popoverRef.current.style.transitionDuration = "0s";
   const anchorRect = anchorRef.current.getBoundingClientRect();
   const popoverRect = popoverRef.current.getBoundingClientRect();
-  const popoverStyles = getComputedStyle(popoverRef.current);
+  let popoverStyles = getComputedStyle(popoverRef.current);
+  const top = popoverStyles.getPropertyValue("top");
+  const left = popoverStyles.getPropertyValue("left");
+  popoverRef.current.style.left = "0";
+  popoverRef.current.style.top = "0";
+  popoverStyles = getComputedStyle(popoverRef.current);
   const marginTop = Number.parseFloat(popoverStyles.getPropertyValue("margin-top"));
   const marginRight = Number.parseFloat(popoverStyles.getPropertyValue("margin-right"));
   const marginBottom = Number.parseFloat(popoverStyles.getPropertyValue("margin-bottom"));
@@ -165,6 +211,8 @@ function getDopoverPosition(align, anchorRef, popoverRef) {
   const offsetY = anchorTop - marginTop - (popoverRect.height - anchorRect.height) / 2;
   popoverRef.current.style.transform = "";
   popoverRef.current.style.transitionDuration = "";
+  popoverRef.current.style.top = top;
+  popoverRef.current.style.left = left;
   switch (align) {
     case "top": {
       return topPosition > 0 ? [offsetX, anchorTop - popoverRect.height - marginY] : [offsetX, anchorTop + anchorRect.height];
@@ -191,8 +239,8 @@ const Popover = ({
   style,
   ...restProps
 }) => {
-  const layer = styles_components_overlay_Dialog_Dialog_cjs.useLayer();
-  const [visible, hide] = styles_components_overlay_Dialog_Dialog_cjs.useVisibilityState(open);
+  const layer = useLayer();
+  const [visible, hide] = useVisibilityState(open);
   const [position, setPosition] = react.useState({ x: 0, y: 0 });
   const popoverRef = react.useRef(null);
   const containerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("popover", { base: true }, false);
@@ -200,7 +248,7 @@ const Popover = ({
     if (!visible) {
       return;
     }
-    const position2 = getDopoverPosition(align, anchorElement, popoverRef);
+    const position2 = getPopoverPosition(align, anchorElement, popoverRef);
     setPosition({ x: position2[0], y: position2[1] });
   }, [align, anchorElement, visible]);
   react.useEffect(() => {
@@ -208,7 +256,7 @@ const Popover = ({
       return;
     }
     function handleResize() {
-      const position2 = getDopoverPosition(align, anchorElement, popoverRef);
+      const position2 = getPopoverPosition(align, anchorElement, popoverRef);
       setPosition({ x: position2[0], y: position2[1] });
     }
     window.addEventListener("resize", handleResize);
@@ -253,7 +301,7 @@ const Popover = ({
     return null;
   }
   const dataOpen = typeof window === "undefined" && open ? "" : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(styles_components_overlay_Dialog_Dialog_cjs.Portal, { container: layer(), children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsxRuntime.jsx(
     styles_components_display_Divider_Divider_cjs.Box,
     {
       ref: popoverRef,
@@ -366,7 +414,6 @@ exports.Slider = styles_components_form_Slider_Slider_cjs.Slider;
 exports.Switch = styles_components_form_Switch_Switch_cjs.Switch;
 exports.BlocksProvider = styles_components_other_BlocksProvider_BlocksProvider_cjs.BlocksProvider;
 exports.Dialog = styles_components_overlay_Dialog_Dialog_cjs.Dialog;
-exports.Portal = styles_components_overlay_Dialog_Dialog_cjs.Portal;
 exports.useIsomorphicLayoutEffect = styles_components_overlay_Dialog_Dialog_cjs.useIsomorphicLayoutEffect;
 exports.useKeyboard = styles_components_overlay_Dialog_Dialog_cjs.useKeyboard;
 exports.usePreventBodyScroll = styles_components_overlay_Dialog_Dialog_cjs.usePreventBodyScroll;
@@ -374,6 +421,7 @@ exports.Heading = styles_components_typography_Heading_Heading_cjs.Heading;
 exports.Text = styles_components_typography_Text_Text_cjs.Text;
 exports.Inline = Inline;
 exports.Link = Link;
+exports.Portal = Portal;
 exports.Progress = Progress;
 exports.Stack = Stack;
 exports.Tooltip = Tooltip;

package/dist/index.mjs

@@ -5,11 +5,11 @@ import { style } from "./styles/lib/css/style/style.mjs";
 import { makeComponentTheme } from "./styles/lib/theme/makeComponentTheme.mjs";
 import { makeTheme } from "./styles/lib/theme/makeTheme.mjs";
 import { vars } from "./styles/lib/theme/vars.css.mjs";
-import { useComponentStyles, Box, classnames, createAsChildTemplate, composeRefs, BlocksProviderContext } from "./styles/components/display/Divider/Divider.mjs";
+import { useComponentStyles, Box, classnames, createAsChildTemplate, useTheme, composeRefs, BlocksProviderContext } from "./styles/components/display/Divider/Divider.mjs";
 import { Divider, useComponentStyleDefaultProps } from "./styles/components/display/Divider/Divider.mjs";
 import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { forwardRef, useState, useRef, useLayoutEffect, useEffect, useCallback, useId, Children, isValidElement, cloneElement, useContext } from "react";
+import { forwardRef, useRef, useEffect, useState, useCallback, useLayoutEffect, useId, Children, isValidElement, cloneElement, useContext } from "react";
 import { Button, Spinner } from "./styles/components/form/Button/Button.mjs";
 import { Checkbox, Label } from "./styles/components/form/Checkbox/Checkbox.mjs";
 import { Input } from "./styles/components/form/Input/Input.mjs";
@@ -18,7 +18,8 @@ import { Select } from "./styles/components/form/Select/Select.mjs";
 import { Slider } from "./styles/components/form/Slider/Slider.mjs";
 import { Switch } from "./styles/components/form/Switch/Switch.mjs";
 import { BlocksProvider } from "./styles/components/other/BlocksProvider/BlocksProvider.mjs";
-import { useLayer, useVisibilityState, useIsomorphicLayoutEffect, hasAnimationDuration, useKeyboard, useClickOutside, Portal } from "./styles/components/overlay/Dialog/Dialog.mjs";
+import { createPortal } from "react-dom";
+import { useIsomorphicLayoutEffect, hasAnimationDuration, useKeyboard, useClickOutside } from "./styles/components/overlay/Dialog/Dialog.mjs";
 import { Dialog, usePreventBodyScroll } from "./styles/components/overlay/Dialog/Dialog.mjs";
 import { Heading } from "./styles/components/typography/Heading/Heading.mjs";
 import { Text } from "./styles/components/typography/Text/Text.mjs";
@@ -138,7 +139,47 @@ const Link = forwardRef(function Link2({ asChild, className, children, variant,
     }
   );
 });
-function getDopoverPosition(align, anchorRef, popoverRef) {
+const Portal = ({ children, container }) => {
+  const context = useTheme();
+  return createPortal(
+    /* @__PURE__ */ jsx(BlocksProvider, { theme: context, children }),
+    container || document.body
+  );
+};
+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 useVisibilityState = (open) => {
+  const [visible, setVisible] = useState(open);
+  const hide = useCallback(() => {
+    setVisible(false);
+  }, []);
+  useEffect(() => {
+    if (open) {
+      setVisible(true);
+    }
+  }, [open]);
+  return [visible, hide];
+};
+function getPopoverPosition(align, anchorRef, popoverRef) {
   if (!anchorRef.current || !popoverRef.current) {
     return [0, 0];
   }
@@ -146,7 +187,12 @@ function getDopoverPosition(align, anchorRef, popoverRef) {
   popoverRef.current.style.transitionDuration = "0s";
   const anchorRect = anchorRef.current.getBoundingClientRect();
   const popoverRect = popoverRef.current.getBoundingClientRect();
-  const popoverStyles = getComputedStyle(popoverRef.current);
+  let popoverStyles = getComputedStyle(popoverRef.current);
+  const top = popoverStyles.getPropertyValue("top");
+  const left = popoverStyles.getPropertyValue("left");
+  popoverRef.current.style.left = "0";
+  popoverRef.current.style.top = "0";
+  popoverStyles = getComputedStyle(popoverRef.current);
   const marginTop = Number.parseFloat(popoverStyles.getPropertyValue("margin-top"));
   const marginRight = Number.parseFloat(popoverStyles.getPropertyValue("margin-right"));
   const marginBottom = Number.parseFloat(popoverStyles.getPropertyValue("margin-bottom"));
@@ -167,6 +213,8 @@ function getDopoverPosition(align, anchorRef, popoverRef) {
   const offsetY = anchorTop - marginTop - (popoverRect.height - anchorRect.height) / 2;
   popoverRef.current.style.transform = "";
   popoverRef.current.style.transitionDuration = "";
+  popoverRef.current.style.top = top;
+  popoverRef.current.style.left = left;
   switch (align) {
     case "top": {
       return topPosition > 0 ? [offsetX, anchorTop - popoverRect.height - marginY] : [offsetX, anchorTop + anchorRect.height];
@@ -202,7 +250,7 @@ const Popover = ({
     if (!visible) {
       return;
     }
-    const position2 = getDopoverPosition(align, anchorElement, popoverRef);
+    const position2 = getPopoverPosition(align, anchorElement, popoverRef);
     setPosition({ x: position2[0], y: position2[1] });
   }, [align, anchorElement, visible]);
   useEffect(() => {
@@ -210,7 +258,7 @@ const Popover = ({
       return;
     }
     function handleResize() {
-      const position2 = getDopoverPosition(align, anchorElement, popoverRef);
+      const position2 = getPopoverPosition(align, anchorElement, popoverRef);
       setPosition({ x: position2[0], y: position2[1] });
     }
     window.addEventListener("resize", handleResize);