@blockle/blocks 0.12.2 → 0.14.0

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");
@@ -119,24 +120,64 @@ const Stack = ({
     }
   );
 };
-const Slottable = styles_components_display_Divider_Divider_cjs.createSlottable("a");
+const { Template, Slot } = styles_components_display_Divider_Divider_cjs.createAsChildTemplate("a");
 const Link = react.forwardRef(function Link2({ asChild, className, children, variant, underline, ...restProps }, ref) {
   const linkClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("link", {
     base: true,
     variants: { variant, underline }
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Slottable,
+    Template,
     {
       asChild,
       ref,
       className: styles_components_display_Divider_Divider_cjs.classnames(className, linkClassName),
       ...restProps,
-      children
+      children: /* @__PURE__ */ jsxRuntime.jsx(Slot, { children })
     }
   );
 });
-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,
@@ -350,9 +398,8 @@ exports.makeTheme = styles_lib_theme_makeTheme_cjs.makeTheme;
 exports.vars = styles_lib_theme_vars_css_cjs.vars;
 exports.Box = styles_components_display_Divider_Divider_cjs.Box;
 exports.Divider = styles_components_display_Divider_Divider_cjs.Divider;
-exports.Slot = styles_components_display_Divider_Divider_cjs.Slot;
 exports.classnames = styles_components_display_Divider_Divider_cjs.classnames;
-exports.createSlottable = styles_components_display_Divider_Divider_cjs.createSlottable;
+exports.createAsChildTemplate = styles_components_display_Divider_Divider_cjs.createAsChildTemplate;
 exports.useComponentStyleDefaultProps = styles_components_display_Divider_Divider_cjs.useComponentStyleDefaultProps;
 exports.useComponentStyles = styles_components_display_Divider_Divider_cjs.useComponentStyles;
 exports.atoms = styles_lib_css_atoms_sprinkles_css_cjs.atoms;
@@ -367,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;
@@ -375,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.d.mts

@@ -1 +1 @@
-export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Progress, ProgressProps, Radio, RadioProps, Select, SelectProps, Slider, SliderProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Switch, SwitchProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, Tooltip, TooltipProps, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars } from './momotaro.chunk.js';
+export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Progress, ProgressProps, Radio, RadioProps, Select, SelectProps, Slider, SliderProps, Spinner, SpinnerProps, Stack, StackProps, Switch, SwitchProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, Tooltip, TooltipProps, atoms, breakpointQuery, classnames, createAsChildTemplate, makeComponentTheme, makeTheme, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars } from './momotaro.chunk.js';

package/dist/index.d.ts

@@ -1 +1 @@
-export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Progress, ProgressProps, Radio, RadioProps, Select, SelectProps, Slider, SliderProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Switch, SwitchProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, Tooltip, TooltipProps, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars } from './momotaro.chunk.js';
+export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Progress, ProgressProps, Radio, RadioProps, Select, SelectProps, Slider, SliderProps, Spinner, SpinnerProps, Stack, StackProps, Switch, SwitchProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, Tooltip, TooltipProps, atoms, breakpointQuery, classnames, createAsChildTemplate, makeComponentTheme, makeTheme, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars } from './momotaro.chunk.js';

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, createSlottable, composeRefs, BlocksProviderContext } from "./styles/components/display/Divider/Divider.mjs";
-import { Divider, Slot, useComponentStyleDefaultProps } 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";
@@ -121,24 +122,64 @@ const Stack = ({
     }
   );
 };
-const Slottable = createSlottable("a");
+const { Template, Slot } = createAsChildTemplate("a");
 const Link = forwardRef(function Link2({ asChild, className, children, variant, underline, ...restProps }, ref) {
   const linkClassName = useComponentStyles("link", {
     base: true,
     variants: { variant, underline }
   });
   return /* @__PURE__ */ jsx(
-    Slottable,
+    Template,
     {
       asChild,
       ref,
       className: classnames(className, linkClassName),
       ...restProps,
-      children
+      children: /* @__PURE__ */ jsx(Slot, { children })
     }
   );
 });
-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);
@@ -362,7 +410,6 @@ export {
   Radio,
   Select,
   Slider,
-  Slot,
   Spinner,
   Stack,
   Switch,
@@ -371,7 +418,7 @@ export {
   atoms,
   breakpointQuery,
   classnames,
-  createSlottable,
+  createAsChildTemplate,
   makeComponentTheme,
   makeTheme,
   style,