@blockle/blocks 0.12.0 → 0.12.2

package/dist/index.cjs

@@ -136,22 +136,6 @@ const Link = react.forwardRef(function Link2({ asChild, className, children, var
     }
   );
 });
-const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
-  react.useEffect(() => {
-    if (!enabled) {
-      return;
-    }
-    const listener = (event) => {
-      if (ref.current && !ref.current.contains(event.target)) {
-        onClickOutside();
-      }
-    };
-    document.addEventListener("click", listener);
-    return () => {
-      document.removeEventListener("click", listener);
-    };
-  }, [ref, onClickOutside, enabled]);
-};
 function getDopoverPosition(align, anchorRef, popoverRef) {
   if (!anchorRef.current || !popoverRef.current) {
     return [0, 0];
@@ -264,7 +248,7 @@ const Popover = ({
     }
   }, [hide, open]);
   styles_components_overlay_Dialog_Dialog_cjs.useKeyboard("Escape", onRequestClose, { enabled: visible });
-  useClickOutside(popoverRef, onRequestClose, { enabled: visible });
+  styles_components_overlay_Dialog_Dialog_cjs.useClickOutside(popoverRef, onRequestClose, { enabled: visible });
   if (!visible) {
     return null;
   }
@@ -352,6 +336,13 @@ const Tooltip = ({
     )
   ] });
 };
+const useRootAriaHidden = (hidden) => {
+  const context = react.useContext(styles_components_display_Divider_Divider_cjs.BlocksProviderContext);
+  if (!context) {
+    throw new Error("useRootAriaHidden must be used within a BlocksProvider");
+  }
+  context.setAriaHidden(hidden);
+};
 exports.breakpointQuery = styles_lib_css_atoms_breakpoints_cjs.breakpointQuery;
 exports.style = styles_lib_css_style_style_cjs.style;
 exports.makeComponentTheme = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme;
@@ -380,7 +371,6 @@ 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;
-exports.useRootAriaHidden = styles_components_overlay_Dialog_Dialog_cjs.useRootAriaHidden;
 exports.Heading = styles_components_typography_Heading_Heading_cjs.Heading;
 exports.Text = styles_components_typography_Text_Text_cjs.Text;
 exports.Inline = Inline;
@@ -388,3 +378,4 @@ exports.Link = Link;
 exports.Progress = Progress;
 exports.Stack = Stack;
 exports.Tooltip = Tooltip;
+exports.useRootAriaHidden = useRootAriaHidden;

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 } from "./styles/components/display/Divider/Divider.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 { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState, useRef, useLayoutEffect, useCallback, useId, Children, isValidElement, cloneElement } from "react";
+import { forwardRef, useState, useRef, useLayoutEffect, useEffect, useCallback, 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,8 +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, Portal } from "./styles/components/overlay/Dialog/Dialog.mjs";
-import { Dialog, usePreventBodyScroll, useRootAriaHidden } from "./styles/components/overlay/Dialog/Dialog.mjs";
+import { useLayer, useVisibilityState, useIsomorphicLayoutEffect, hasAnimationDuration, useKeyboard, useClickOutside, Portal } 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";
 const Progress = forwardRef(function Progress2({ value, max = 100, className, ...restProps }, ref) {
@@ -138,22 +138,6 @@ const Link = forwardRef(function Link2({ asChild, className, children, variant,
     }
   );
 });
-const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
-  useEffect(() => {
-    if (!enabled) {
-      return;
-    }
-    const listener = (event) => {
-      if (ref.current && !ref.current.contains(event.target)) {
-        onClickOutside();
-      }
-    };
-    document.addEventListener("click", listener);
-    return () => {
-      document.removeEventListener("click", listener);
-    };
-  }, [ref, onClickOutside, enabled]);
-};
 function getDopoverPosition(align, anchorRef, popoverRef) {
   if (!anchorRef.current || !popoverRef.current) {
     return [0, 0];
@@ -354,6 +338,13 @@ const Tooltip = ({
     )
   ] });
 };
+const useRootAriaHidden = (hidden) => {
+  const context = useContext(BlocksProviderContext);
+  if (!context) {
+    throw new Error("useRootAriaHidden must be used within a BlocksProvider");
+  }
+  context.setAriaHidden(hidden);
+};
 export {
   BlocksProvider,
   Box,