@blockle/blocks-react 1.0.3 → 1.1.0

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

@@ -20,11 +20,11 @@ const Dialog = ({
   size,
   ...restProps
 }) => {
+  const dialogRef = react.useRef(null);
   const dialogClassName = useComponentStyles.useComponentStyles("dialog", {
     dialog: true,
     variants: { size }
   });
-  const dialogRef = react.useRef(null);
   const [enabled, setEnabled] = react.useState(true);
   const [visible, setVisible] = react.useState(open);
   useRestoreFocus.useRestoreFocus(open);
@@ -52,7 +52,9 @@ const Dialog = ({
       if (!blocksCore.hasAnimationDuration(dialogRef.current)) {
         setVisible(false);
       }
-      (_a = dialogRef.current) == null ? void 0 : _a.close();
+      if ((_a = dialogRef.current) == null ? void 0 : _a.close) {
+        dialogRef.current.close();
+      }
     }
   }, [open, visible]);
   const onAnimationEnd = react.useCallback(() => {
@@ -68,7 +70,6 @@ const Dialog = ({
     "dialog",
     {
       ref: dialogRef,
-      "aria-modal": "true",
       open: dataOpen,
       className: blocksCore.classnames(dialog_css.dialog, dialogClassName, className),
       onAnimationEnd,

package/dist/components/overlay/Dialog/Dialog.js

@@ -18,11 +18,11 @@ const Dialog = ({
   size,
   ...restProps
 }) => {
+  const dialogRef = useRef(null);
   const dialogClassName = useComponentStyles("dialog", {
     dialog: true,
     variants: { size }
   });
-  const dialogRef = useRef(null);
   const [enabled, setEnabled] = useState(true);
   const [visible, setVisible] = useState(open);
   useRestoreFocus(open);
@@ -50,7 +50,9 @@ const Dialog = ({
       if (!hasAnimationDuration(dialogRef.current)) {
         setVisible(false);
       }
-      (_a = dialogRef.current) == null ? void 0 : _a.close();
+      if ((_a = dialogRef.current) == null ? void 0 : _a.close) {
+        dialogRef.current.close();
+      }
     }
   }, [open, visible]);
   const onAnimationEnd = useCallback(() => {
@@ -66,7 +68,6 @@ const Dialog = ({
     "dialog",
     {
       ref: dialogRef,
-      "aria-modal": "true",
       open: dataOpen,
       className: classnames(dialog, dialogClassName, className),
       onAnimationEnd,

package/dist/components/overlay/Dialog/Dialog.stories.d.ts

@@ -3,5 +3,6 @@ import { DialogProps } from './Dialog';
 declare const _default: Meta;
 export default _default;
 export declare const Default: StoryObj<DialogProps>;
+export declare const Nested: StoryObj<DialogProps>;
 export declare const WithAriaMarkup: StoryObj<DialogProps>;
 export declare const Play: StoryObj<DialogProps>;

package/dist/components/overlay/Popover/Popover.cjs

@@ -6,107 +6,101 @@ const blocksCore = require("@blockle/blocks-core");
 const react = require("react");
 const useClickOutside = require("../../../hooks/useClickOutside/useClickOutside.cjs");
 const popoverUtils = require("./popover-utils.cjs");
-const useLayer = require("../../../hooks/useLayer/useLayer.cjs");
-const useVisibilityState = require("../../../hooks/useVisibilityState/useVisibilityState.cjs");
 const useComponentStyles = require("../../../hooks/useComponentStyles/useComponentStyles.cjs");
-const useIsomorphicLayoutEffect = require("../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs");
 const useKeyboard = require("../../../hooks/useKeyboard/useKeyboard.cjs");
-const Portal = require("../Portal/Portal.cjs");
+const useIsomorphicLayoutEffect = require("../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs");
 const Box = require("../../layout/Box/Box.cjs");
 const Popover = ({
-  align = "bottom",
   anchorElement,
   children,
   className,
   onRequestClose,
   open,
-  repositionOnScroll,
+  position = "top",
+  sticky,
   style,
   ...restProps
 }) => {
-  const layer = useLayer.useLayer();
-  const [visible, hide] = useVisibilityState.useVisibilityState(open);
-  const [position, setPosition] = react.useState({ x: 0, y: 0 });
   const popoverRef = react.useRef(null);
-  const containerClassName = useComponentStyles.useComponentStyles(
-    "popover",
-    { base: true },
-    false
-  );
-  react.useLayoutEffect(() => {
-    if (!visible) {
-      return;
+  const [popoverPosition, setPopoverPosition] = react.useState({ x: 0, y: 0 });
+  const [visible, setVisible] = react.useState(open);
+  const popoverClassName = useComponentStyles.useComponentStyles("popover", { base: true }, false);
+  useKeyboard.useKeyboard("Escape", onRequestClose, { enabled: open });
+  useClickOutside.useClickOutside(popoverRef, onRequestClose, { enabled: open });
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    var _a;
+    const element = popoverRef.current;
+    if (open && visible) {
+      if (!element || typeof element.showPopover !== "function") {
+        console.warn(
+          "Popover: showPopover method is not available on the element."
+        );
+        return;
+      }
+      element.showPopover();
+      const [x, y] = popoverUtils.getPopoverPosition(position, anchorElement, popoverRef);
+      setPopoverPosition({ x, y });
+    } else if (open) {
+      setVisible(true);
+    } else {
+      if (!blocksCore.hasAnimationDuration(popoverRef.current)) {
+        setVisible(false);
+      }
+      (_a = popoverRef.current) == null ? void 0 : _a.hidePopover();
     }
-    const position2 = popoverUtils.getPopoverPosition(align, anchorElement, popoverRef);
-    setPosition({ x: position2[0], y: position2[1] });
-  }, [align, anchorElement, visible]);
+  }, [open, visible]);
   react.useEffect(() => {
-    if (!open || !repositionOnScroll) {
-      return;
-    }
-    function handleResize() {
-      const position2 = popoverUtils.getPopoverPosition(align, anchorElement, popoverRef);
-      setPosition({ x: position2[0], y: position2[1] });
+    if (open) {
+      const [x, y] = popoverUtils.getPopoverPosition(position, anchorElement, popoverRef);
+      setPopoverPosition({ x, y });
     }
-    window.addEventListener("resize", handleResize);
-    window.addEventListener("scroll", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-      window.removeEventListener("scroll", handleResize);
-    };
-  }, [align, anchorElement, open, repositionOnScroll]);
-  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
-    var _a;
-    if (!open) {
-      (_a = popoverRef.current) == null ? void 0 : _a.removeAttribute("data-open");
+  }, [open, anchorElement, position]);
+  react.useEffect(() => {
+    if (!open || !sticky) {
       return;
     }
-    let timer = requestAnimationFrame(() => {
-      timer = requestAnimationFrame(() => {
-        var _a2;
-        (_a2 = popoverRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
+    function updatePopoverPosition() {
+      const [x, y] = popoverUtils.getPopoverPosition(position, anchorElement, popoverRef);
+      setPopoverPosition((prev) => {
+        if (prev.x === x && prev.y === y) {
+          return prev;
+        }
+        return { x, y };
       });
-    });
+    }
+    window.addEventListener("resize", updatePopoverPosition);
+    window.addEventListener("scroll", updatePopoverPosition);
     return () => {
-      cancelAnimationFrame(timer);
+      window.removeEventListener("resize", updatePopoverPosition);
+      window.removeEventListener("scroll", updatePopoverPosition);
     };
-  }, [open, visible]);
+  }, [position, anchorElement, open, sticky]);
   const onAnimationEnd = react.useCallback(() => {
     if (!open) {
-      hide();
+      setVisible(false);
     }
-  }, [hide, open]);
-  react.useEffect(() => {
-    if (open) {
-      return;
-    }
-    if (!blocksCore.hasAnimationDuration(popoverRef.current)) {
-      hide();
-    }
-  }, [hide, open]);
-  useKeyboard.useKeyboard("Escape", onRequestClose, { enabled: visible });
-  useClickOutside.useClickOutside(popoverRef, onRequestClose, { enabled: visible });
+  }, [open]);
   if (!visible) {
     return null;
   }
-  const dataOpen = typeof window === "undefined" && open ? "" : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(Portal.Portal, { container: layer(), children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Box.Box,
     {
       ref: popoverRef,
-      "data-open": dataOpen,
+      "data-open": open ? "" : void 0,
+      popover: "manual",
+      className: blocksCore.classnames(popoverClassName, className),
+      position: "absolute",
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
-      className: blocksCore.classnames(containerClassName, className),
-      position: "absolute",
       style: {
         ...style,
-        left: position.x,
-        top: position.y
+        left: popoverPosition.x,
+        top: popoverPosition.y
       },
       ...restProps,
       children
     }
-  ) });
+  );
 };
 exports.Popover = Popover;

package/dist/components/overlay/Popover/Popover.d.ts

@@ -1,12 +1,13 @@
 import { HTMLElementProps } from '@blockle/blocks-core';
+export type PopoverAlign = 'top' | 'bottom' | 'left' | 'right';
 export type PopoverProps = {
-    align?: 'top' | 'bottom' | 'left' | 'right';
     anchorElement: React.RefObject<HTMLElement | null>;
     children: React.ReactNode;
     className?: string;
     onRequestClose: () => void;
     open: boolean;
-    repositionOnScroll?: boolean;
+    position?: PopoverAlign;
+    sticky?: boolean;
     style?: React.CSSProperties;
 } & HTMLElementProps<HTMLDivElement>;
 export declare const Popover: React.FC<PopoverProps>;

package/dist/components/overlay/Popover/Popover.js

@@ -1,111 +1,105 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { hasAnimationDuration, classnames } from "@blockle/blocks-core";
-import { useState, useRef, useLayoutEffect, useEffect, useCallback } from "react";
+import { useRef, useState, useEffect, useCallback } from "react";
 import { useClickOutside } from "../../../hooks/useClickOutside/useClickOutside.js";
 import { getPopoverPosition } from "./popover-utils.js";
-import { useLayer } from "../../../hooks/useLayer/useLayer.js";
-import { useVisibilityState } from "../../../hooks/useVisibilityState/useVisibilityState.js";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
-import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
 import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.js";
-import { Portal } from "../Portal/Portal.js";
+import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
 import { Box } from "../../layout/Box/Box.js";
 const Popover = ({
-  align = "bottom",
   anchorElement,
   children,
   className,
   onRequestClose,
   open,
-  repositionOnScroll,
+  position = "top",
+  sticky,
   style,
   ...restProps
 }) => {
-  const layer = useLayer();
-  const [visible, hide] = useVisibilityState(open);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
   const popoverRef = useRef(null);
-  const containerClassName = useComponentStyles(
-    "popover",
-    { base: true },
-    false
-  );
-  useLayoutEffect(() => {
-    if (!visible) {
-      return;
+  const [popoverPosition, setPopoverPosition] = useState({ x: 0, y: 0 });
+  const [visible, setVisible] = useState(open);
+  const popoverClassName = useComponentStyles("popover", { base: true }, false);
+  useKeyboard("Escape", onRequestClose, { enabled: open });
+  useClickOutside(popoverRef, onRequestClose, { enabled: open });
+  useIsomorphicLayoutEffect(() => {
+    var _a;
+    const element = popoverRef.current;
+    if (open && visible) {
+      if (!element || typeof element.showPopover !== "function") {
+        console.warn(
+          "Popover: showPopover method is not available on the element."
+        );
+        return;
+      }
+      element.showPopover();
+      const [x, y] = getPopoverPosition(position, anchorElement, popoverRef);
+      setPopoverPosition({ x, y });
+    } else if (open) {
+      setVisible(true);
+    } else {
+      if (!hasAnimationDuration(popoverRef.current)) {
+        setVisible(false);
+      }
+      (_a = popoverRef.current) == null ? void 0 : _a.hidePopover();
     }
-    const position2 = getPopoverPosition(align, anchorElement, popoverRef);
-    setPosition({ x: position2[0], y: position2[1] });
-  }, [align, anchorElement, visible]);
+  }, [open, visible]);
   useEffect(() => {
-    if (!open || !repositionOnScroll) {
-      return;
-    }
-    function handleResize() {
-      const position2 = getPopoverPosition(align, anchorElement, popoverRef);
-      setPosition({ x: position2[0], y: position2[1] });
+    if (open) {
+      const [x, y] = getPopoverPosition(position, anchorElement, popoverRef);
+      setPopoverPosition({ x, y });
     }
-    window.addEventListener("resize", handleResize);
-    window.addEventListener("scroll", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-      window.removeEventListener("scroll", handleResize);
-    };
-  }, [align, anchorElement, open, repositionOnScroll]);
-  useIsomorphicLayoutEffect(() => {
-    var _a;
-    if (!open) {
-      (_a = popoverRef.current) == null ? void 0 : _a.removeAttribute("data-open");
+  }, [open, anchorElement, position]);
+  useEffect(() => {
+    if (!open || !sticky) {
       return;
     }
-    let timer = requestAnimationFrame(() => {
-      timer = requestAnimationFrame(() => {
-        var _a2;
-        (_a2 = popoverRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
+    function updatePopoverPosition() {
+      const [x, y] = getPopoverPosition(position, anchorElement, popoverRef);
+      setPopoverPosition((prev) => {
+        if (prev.x === x && prev.y === y) {
+          return prev;
+        }
+        return { x, y };
       });
-    });
+    }
+    window.addEventListener("resize", updatePopoverPosition);
+    window.addEventListener("scroll", updatePopoverPosition);
     return () => {
-      cancelAnimationFrame(timer);
+      window.removeEventListener("resize", updatePopoverPosition);
+      window.removeEventListener("scroll", updatePopoverPosition);
     };
-  }, [open, visible]);
+  }, [position, anchorElement, open, sticky]);
   const onAnimationEnd = useCallback(() => {
     if (!open) {
-      hide();
+      setVisible(false);
     }
-  }, [hide, open]);
-  useEffect(() => {
-    if (open) {
-      return;
-    }
-    if (!hasAnimationDuration(popoverRef.current)) {
-      hide();
-    }
-  }, [hide, open]);
-  useKeyboard("Escape", onRequestClose, { enabled: visible });
-  useClickOutside(popoverRef, onRequestClose, { enabled: visible });
+  }, [open]);
   if (!visible) {
     return null;
   }
-  const dataOpen = typeof window === "undefined" && open ? "" : void 0;
-  return /* @__PURE__ */ jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     Box,
     {
       ref: popoverRef,
-      "data-open": dataOpen,
+      "data-open": open ? "" : void 0,
+      popover: "manual",
+      className: classnames(popoverClassName, className),
+      position: "absolute",
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
-      className: classnames(containerClassName, className),
-      position: "absolute",
       style: {
         ...style,
-        left: position.x,
-        top: position.y
+        left: popoverPosition.x,
+        top: popoverPosition.y
       },
       ...restProps,
       children
     }
-  ) });
+  );
 };
 export {
   Popover

package/dist/components/overlay/Popover/Popover.stories.d.ts

@@ -3,3 +3,4 @@ import { PopoverProps } from './Popover';
 declare const _default: Meta;
 export default _default;
 export declare const Default: StoryObj<PopoverProps>;
+export declare const Interactive: StoryObj<PopoverProps>;

package/dist/components/overlay/Popover/Popover.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/overlay/Popover/popover-utils.cjs

@@ -1,29 +1,28 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-function getPopoverPosition(align, anchorRef, popoverRef) {
+const blocksCore = require("@blockle/blocks-core");
+function getPopoverPosition(position, anchorRef, popoverRef) {
   if (!anchorRef.current || !popoverRef.current) {
     return [0, 0];
   }
-  popoverRef.current.style.transform = "none";
-  popoverRef.current.style.transitionDuration = "0s";
   const anchorRect = anchorRef.current.getBoundingClientRect();
   const popoverRect = popoverRef.current.getBoundingClientRect();
-  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(
+  const popoverStyles = getComputedStyle(popoverRef.current);
+  const [popoverWidth, popoverHeight] = blocksCore.getOriginalElementSize(
+    popoverStyles,
+    popoverRect.width,
+    popoverRect.height
+  );
+  const marginTop = blocksCore.cssValueToNumber(
     popoverStyles.getPropertyValue("margin-top")
   );
-  const marginRight = Number.parseFloat(
+  const marginRight = blocksCore.cssValueToNumber(
     popoverStyles.getPropertyValue("margin-right")
   );
-  const marginBottom = Number.parseFloat(
+  const marginBottom = blocksCore.cssValueToNumber(
     popoverStyles.getPropertyValue("margin-bottom")
   );
-  const marginLeft = Number.parseFloat(
+  const marginLeft = blocksCore.cssValueToNumber(
     popoverStyles.getPropertyValue("margin-left")
   );
   const marginY = marginTop + marginBottom;
@@ -34,28 +33,24 @@ function getPopoverPosition(align, anchorRef, popoverRef) {
   const docScrollLeft = document.documentElement.scrollLeft;
   const anchorLeft = anchorRect.left + docScrollLeft;
   const anchorTop = anchorRect.top + docScrollTop;
-  const topPosition = anchorRect.top - (popoverRect.height + marginTop);
-  const rightPosition = anchorRect.left + anchorRect.width + popoverRect.width;
-  const bottomPosition = anchorRect.top + anchorRect.height + popoverRect.height;
-  const leftPosition = anchorRect.left - popoverRect.width;
-  const offsetX = anchorLeft - marginLeft - (popoverRect.width - anchorRect.width) / 2;
-  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) {
+  const topPosition = anchorRect.top - (popoverHeight + marginTop);
+  const rightPosition = anchorRect.left + anchorRect.width + popoverWidth;
+  const bottomPosition = anchorRect.top + anchorRect.height + popoverHeight;
+  const leftPosition = anchorRect.left - popoverWidth;
+  const offsetX = anchorLeft - marginLeft - (popoverWidth - anchorRect.width) / 2;
+  const offsetY = anchorTop - marginTop - (popoverHeight - anchorRect.height) / 2;
+  switch (position) {
     case "top": {
-      return topPosition > 0 ? [offsetX, anchorTop - popoverRect.height - marginY] : [offsetX, anchorTop + anchorRect.height];
+      return topPosition > 0 ? [offsetX, anchorTop - popoverHeight - marginY] : [offsetX, anchorTop + anchorRect.height];
     }
     case "bottom": {
-      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - popoverRect.height - marginY];
+      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - popoverHeight - marginY];
     }
     case "left": {
-      return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - popoverRect.width - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
+      return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - popoverWidth - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
     }
     case "right": {
-      return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - popoverRect.width - marginX, offsetY];
+      return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - popoverWidth - marginX, offsetY];
     }
   }
 }

package/dist/components/overlay/Popover/popover-utils.d.ts

@@ -1,2 +1,2 @@
 export type PopoverPositions = [x: number, y: number];
-export declare function getPopoverPosition(align: 'top' | 'bottom' | 'left' | 'right', anchorRef: React.RefObject<HTMLElement | null>, popoverRef: React.RefObject<HTMLElement | null>): PopoverPositions;
+export declare function getPopoverPosition(position: 'top' | 'bottom' | 'left' | 'right', anchorRef: React.RefObject<HTMLElement | null>, popoverRef: React.RefObject<HTMLElement | null>): PopoverPositions;

package/dist/components/overlay/Popover/popover-utils.js

@@ -1,27 +1,26 @@
-function getPopoverPosition(align, anchorRef, popoverRef) {
+import { getOriginalElementSize, cssValueToNumber } from "@blockle/blocks-core";
+function getPopoverPosition(position, anchorRef, popoverRef) {
   if (!anchorRef.current || !popoverRef.current) {
     return [0, 0];
   }
-  popoverRef.current.style.transform = "none";
-  popoverRef.current.style.transitionDuration = "0s";
   const anchorRect = anchorRef.current.getBoundingClientRect();
   const popoverRect = popoverRef.current.getBoundingClientRect();
-  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(
+  const popoverStyles = getComputedStyle(popoverRef.current);
+  const [popoverWidth, popoverHeight] = getOriginalElementSize(
+    popoverStyles,
+    popoverRect.width,
+    popoverRect.height
+  );
+  const marginTop = cssValueToNumber(
     popoverStyles.getPropertyValue("margin-top")
   );
-  const marginRight = Number.parseFloat(
+  const marginRight = cssValueToNumber(
     popoverStyles.getPropertyValue("margin-right")
   );
-  const marginBottom = Number.parseFloat(
+  const marginBottom = cssValueToNumber(
     popoverStyles.getPropertyValue("margin-bottom")
   );
-  const marginLeft = Number.parseFloat(
+  const marginLeft = cssValueToNumber(
     popoverStyles.getPropertyValue("margin-left")
   );
   const marginY = marginTop + marginBottom;
@@ -32,28 +31,24 @@ function getPopoverPosition(align, anchorRef, popoverRef) {
   const docScrollLeft = document.documentElement.scrollLeft;
   const anchorLeft = anchorRect.left + docScrollLeft;
   const anchorTop = anchorRect.top + docScrollTop;
-  const topPosition = anchorRect.top - (popoverRect.height + marginTop);
-  const rightPosition = anchorRect.left + anchorRect.width + popoverRect.width;
-  const bottomPosition = anchorRect.top + anchorRect.height + popoverRect.height;
-  const leftPosition = anchorRect.left - popoverRect.width;
-  const offsetX = anchorLeft - marginLeft - (popoverRect.width - anchorRect.width) / 2;
-  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) {
+  const topPosition = anchorRect.top - (popoverHeight + marginTop);
+  const rightPosition = anchorRect.left + anchorRect.width + popoverWidth;
+  const bottomPosition = anchorRect.top + anchorRect.height + popoverHeight;
+  const leftPosition = anchorRect.left - popoverWidth;
+  const offsetX = anchorLeft - marginLeft - (popoverWidth - anchorRect.width) / 2;
+  const offsetY = anchorTop - marginTop - (popoverHeight - anchorRect.height) / 2;
+  switch (position) {
     case "top": {
-      return topPosition > 0 ? [offsetX, anchorTop - popoverRect.height - marginY] : [offsetX, anchorTop + anchorRect.height];
+      return topPosition > 0 ? [offsetX, anchorTop - popoverHeight - marginY] : [offsetX, anchorTop + anchorRect.height];
     }
     case "bottom": {
-      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - popoverRect.height - marginY];
+      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - popoverHeight - marginY];
     }
     case "left": {
-      return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - popoverRect.width - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
+      return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - popoverWidth - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
     }
     case "right": {
-      return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - popoverRect.width - marginX, offsetY];
+      return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - popoverWidth - marginX, offsetY];
     }
   }
 }

package/dist/components/overlay/Tooltip/Tooltip.cjs

@@ -7,9 +7,9 @@ const react = require("react");
 const useComponentStyles = require("../../../hooks/useComponentStyles/useComponentStyles.cjs");
 const Popover = require("../Popover/Popover.cjs");
 const Tooltip = ({
-  align = "top",
+  position = "top",
   children,
-  label,
+  content,
   colorScheme
 }) => {
   const id = react.useId();
@@ -63,9 +63,9 @@ const Tooltip = ({
         onRequestClose: () => {
           setOpen(false);
         },
-        align,
+        position,
         className: tooltipClassName,
-        children: label
+        children: content
       }
     )
   ] });

package/dist/components/overlay/Tooltip/Tooltip.d.ts

@@ -3,9 +3,9 @@ import { PopoverProps } from '../Popover';
 type ReactElement = React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 type TooltipTheme = ComponentThemes['tooltip'];
 export type TooltipProps = {
-    align?: PopoverProps['align'];
+    position?: PopoverProps['position'];
     children: ReactElement;
-    label: React.ReactNode;
+    content: React.ReactNode;
     colorScheme?: TooltipTheme['variants']['colorScheme'];
 };
 export declare const Tooltip: React.FC<TooltipProps>;

package/dist/components/overlay/Tooltip/Tooltip.js

@@ -5,9 +5,9 @@ import { useId, useRef, useState, useEffect, Children, isValidElement, cloneElem
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { Popover } from "../Popover/Popover.js";
 const Tooltip = ({
-  align = "top",
+  position = "top",
   children,
-  label,
+  content,
   colorScheme
 }) => {
   const id = useId();
@@ -61,9 +61,9 @@ const Tooltip = ({
         onRequestClose: () => {
           setOpen(false);
         },
-        align,
+        position,
         className: tooltipClassName,
-        children: label
+        children: content
       }
     )
   ] });

package/dist/hooks/useRestoreFocus/useRestoreFocus.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks-react",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "React hooks and components for Blockle",
   "type": "module",
   "exports": {
@@ -43,7 +43,7 @@
   "peerDependencies": {
     "react": "^19",
     "react-dom": "^19",
-    "@blockle/blocks-core": "^0.21.0",
-    "@blockle/blocks-react-slot": "^1.0.0"
+    "@blockle/blocks-core": ">=0.x",
+    "@blockle/blocks-react-slot": ">=1.x"
   }
 }

package/dist/hooks/useLayer/useLayer.cjs

@@ -1,27 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-const useLayer = () => {
-  const layerRef = react.useRef(null);
-  react.useEffect(
-    () => () => {
-      if (layerRef.current) {
-        layerRef.current.remove();
-        layerRef.current = null;
-      }
-    },
-    []
-  );
-  function getLayer() {
-    if (!layerRef.current) {
-      const div = document.createElement("div");
-      div.dataset.layer = "blocks";
-      layerRef.current = div;
-      document.body.append(layerRef.current);
-    }
-    return layerRef.current;
-  }
-  return getLayer;
-};
-exports.useLayer = useLayer;

package/dist/hooks/useLayer/useLayer.js

@@ -1,27 +0,0 @@
-"use client";
-import { useRef, useEffect } from "react";
-const useLayer = () => {
-  const layerRef = useRef(null);
-  useEffect(
-    () => () => {
-      if (layerRef.current) {
-        layerRef.current.remove();
-        layerRef.current = null;
-      }
-    },
-    []
-  );
-  function getLayer() {
-    if (!layerRef.current) {
-      const div = document.createElement("div");
-      div.dataset.layer = "blocks";
-      layerRef.current = div;
-      document.body.append(layerRef.current);
-    }
-    return layerRef.current;
-  }
-  return getLayer;
-};
-export {
-  useLayer
-};

package/dist/hooks/useVisibilityState/useVisibilityState.cjs

@@ -1,17 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-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];
-};
-exports.useVisibilityState = useVisibilityState;

package/dist/hooks/useVisibilityState/useVisibilityState.js

@@ -1,17 +0,0 @@
-"use client";
-import { useState, useCallback, useEffect } from "react";
-const useVisibilityState = (open) => {
-  const [visible, setVisible] = useState(open);
-  const hide = useCallback(() => {
-    setVisible(false);
-  }, []);
-  useEffect(() => {
-    if (open) {
-      setVisible(true);
-    }
-  }, [open]);
-  return [visible, hide];
-};
-export {
-  useVisibilityState
-};