@blockle/blocks-react 3.0.1 → 3.1.0

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

@@ -1,57 +1,108 @@
 import { getOriginalElementSize, cssValueToNumber } from "@blockle/blocks-core";
-function getPopoverPosition(position, anchorRef, popoverRef) {
+function computePopoverPosition({
+  placement,
+  anchor,
+  popover,
+  viewport
+}) {
+  const [preferredSide, edge] = placement.split("-");
+  const { margin } = popover;
+  const side = flipSide(preferredSide, anchor, popover, viewport);
+  let left;
+  let top;
+  if (side === "top" || side === "bottom") {
+    top = side === "top" ? anchor.top - margin.bottom - popover.height : anchor.top + anchor.height + margin.top;
+    left = alignOnCrossAxis(
+      edge,
+      anchor.left,
+      anchor.width,
+      popover.width,
+      viewport.width
+    );
+  } else {
+    left = side === "left" ? anchor.left - margin.right - popover.width : anchor.left + anchor.width + margin.left;
+    top = alignOnCrossAxis(
+      edge,
+      anchor.top,
+      anchor.height,
+      popover.height,
+      viewport.height
+    );
+  }
+  return [
+    left - margin.left + viewport.scrollX,
+    top - margin.top + viewport.scrollY
+  ];
+}
+const VIEWPORT_PADDING = 8;
+const oppositeSide = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left"
+};
+function flipSide(side, anchor, popover, viewport) {
+  const { margin } = popover;
+  const room = {
+    top: anchor.top,
+    bottom: viewport.height - anchor.top - anchor.height,
+    left: anchor.left,
+    right: viewport.width - anchor.left - anchor.width
+  };
+  const needed = side === "top" || side === "bottom" ? popover.height + margin.top + margin.bottom : popover.width + margin.left + margin.right;
+  const opposite = oppositeSide[side];
+  if (room[side] < needed && room[opposite] > room[side]) {
+    return opposite;
+  }
+  return side;
+}
+function alignOnCrossAxis(edge, anchorStart, anchorSize, popoverSize, viewportSize) {
+  let start = anchorStart + (anchorSize - popoverSize) / 2;
+  if (edge === "start") {
+    start = anchorStart;
+  } else if (edge === "end") {
+    start = anchorStart + anchorSize - popoverSize;
+  }
+  const max = viewportSize - VIEWPORT_PADDING - popoverSize;
+  return Math.max(VIEWPORT_PADDING, Math.min(start, max));
+}
+function getPopoverPosition(placement, anchorRef, popoverRef) {
   if (!anchorRef.current || !popoverRef.current) {
     return [0, 0];
   }
   const anchorRect = anchorRef.current.getBoundingClientRect();
   const popoverRect = popoverRef.current.getBoundingClientRect();
   const popoverStyles = getComputedStyle(popoverRef.current);
-  const [popoverWidth, popoverHeight] = getOriginalElementSize(
+  const [width, height] = getOriginalElementSize(
     popoverStyles,
     popoverRect.width,
     popoverRect.height
   );
-  const marginTop = cssValueToNumber(
-    popoverStyles.getPropertyValue("margin-top")
-  );
-  const marginRight = cssValueToNumber(
-    popoverStyles.getPropertyValue("margin-right")
-  );
-  const marginBottom = cssValueToNumber(
-    popoverStyles.getPropertyValue("margin-bottom")
-  );
-  const marginLeft = cssValueToNumber(
-    popoverStyles.getPropertyValue("margin-left")
-  );
-  const marginY = marginTop + marginBottom;
-  const marginX = marginRight + marginLeft;
-  const docHeight = document.documentElement.clientHeight;
-  const docWidth = document.documentElement.clientWidth;
-  const docScrollTop = document.documentElement.scrollTop;
-  const docScrollLeft = document.documentElement.scrollLeft;
-  const anchorLeft = anchorRect.left + docScrollLeft;
-  const anchorTop = anchorRect.top + docScrollTop;
-  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 - popoverHeight - marginY] : [offsetX, anchorTop + anchorRect.height];
-    }
-    case "bottom": {
-      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - popoverHeight - marginY];
+  const { documentElement } = document;
+  return computePopoverPosition({
+    placement,
+    anchor: anchorRect,
+    popover: {
+      width,
+      height,
+      margin: {
+        top: cssValueToNumber(popoverStyles.getPropertyValue("margin-top")),
+        right: cssValueToNumber(popoverStyles.getPropertyValue("margin-right")),
+        bottom: cssValueToNumber(
+          popoverStyles.getPropertyValue("margin-bottom")
+        ),
+        left: cssValueToNumber(popoverStyles.getPropertyValue("margin-left"))
+      }
+    },
+    viewport: {
+      width: documentElement.clientWidth,
+      height: documentElement.clientHeight,
+      scrollX: documentElement.scrollLeft,
+      scrollY: documentElement.scrollTop
     }
-    case "left": {
-      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 - popoverWidth - marginX, offsetY];
-    }
-  }
+  });
 }
 export {
+  computePopoverPosition,
   getPopoverPosition
 };

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

@@ -3,6 +3,14 @@ import { PopoverProps } from '../Popover/Popover.js';
 type ReactElement = React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 type TooltipTheme = ComponentThemes['tooltip'];
 export type TooltipProps = {
+    /**
+     * Side of the child to open on, and which of its edges to line up with
+     * @default 'top'
+     */
+    placement?: PopoverProps['placement'];
+    /**
+     * @deprecated Use `placement`, which wins when both are passed
+     */
     position?: PopoverProps['position'];
     children: ReactElement;
     content: React.ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAY9B,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEnE,KAAK,YAAY,GAAG,KAAK,CAAC,YAAY,CAEpC,GAAG,EAEH,MAAM,GAAG,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAC1C,CAAC;AAEF,KAAK,YAAY,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;AAE/C,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IACpC,QAAQ,EAAE,YAAY,CAAC;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC;CAC7C,GAAG,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC,CAAC;AAE/D,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA+E1C,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAY9B,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEnE,KAAK,YAAY,GAAG,KAAK,CAAC,YAAY,CAEpC,GAAG,EAEH,MAAM,GAAG,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAC1C,CAAC;AAEF,KAAK,YAAY,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;AAE/C,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IACpC,QAAQ,EAAE,YAAY,CAAC;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC;CAC7C,GAAG,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC,CAAC;AAE/D,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAgF1C,CAAC"}

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

@@ -5,7 +5,8 @@ import { useId, useRef, useState, useEffect, Children, isValidElement, cloneElem
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { Popover } from "../Popover/Popover.js";
 const Tooltip = ({
-  position = "top",
+  placement,
+  position,
   children,
   content,
   intent
@@ -61,7 +62,7 @@ const Tooltip = ({
         onRequestClose: () => {
           setOpen(false);
         },
-        position,
+        placement: placement ?? position,
         className: tooltipClassName,
         children: content
       }

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

@@ -0,0 +1,6 @@
+/**
+ * Why an overlay asks to close: an Escape (or another close request, such as
+ * the Android back gesture), or a click outside of it.
+ */
+export type RequestCloseReason = 'escape' | 'outside-click';
+//# sourceMappingURL=requestCloseReason.d.ts.map

package/dist/components/overlay/requestCloseReason.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"requestCloseReason.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/requestCloseReason.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,eAAe,CAAC"}

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

@@ -0,0 +1,35 @@
+import { RequestCloseReason } from './requestCloseReason.js';
+type DialogContextValue = {
+    setEnabled: (active: boolean) => void;
+};
+export declare const DialogContext: import('react').Context<DialogContextValue | undefined>;
+export declare const useNestedDialog: (open: boolean) => boolean;
+type UseDialogCloseRequestsOptions = {
+    enabled: boolean;
+    onRequestClose: (reason: RequestCloseReason) => void;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDialogElement>;
+    onKeyDownCapture?: React.KeyboardEventHandler<HTMLDialogElement>;
+    onCancel?: React.ReactEventHandler<HTMLDialogElement>;
+};
+type UseModalOverlayOptions = Omit<UseDialogCloseRequestsOptions, 'enabled'> & {
+    open: boolean;
+};
+/**
+ * The behaviour Dialog and Drawer share while open: focus is restored when
+ * closed, the body does not scroll, and an Escape, close request or click
+ * outside requests to close.
+ *
+ * While a nested Dialog or Drawer is open, the outer one ignores Escape and
+ * clicks outside, and leaves the body scroll lock to the outermost one.
+ * Provide `contextValue` through DialogContext to the dialog's content.
+ */
+export declare const useModalOverlay: (dialogRef: React.RefObject<HTMLDialogElement | null>, { open, onRequestClose, ...handlers }: UseModalOverlayOptions) => {
+    contextValue: DialogContextValue;
+    closeRequestProps: {
+        onKeyDown: (event: React.KeyboardEvent<HTMLDialogElement>) => void;
+        onKeyDownCapture: (event: React.KeyboardEvent<HTMLDialogElement>) => void;
+        onCancel: (event: React.SyntheticEvent<HTMLDialogElement>) => void;
+    };
+};
+export {};
+//# sourceMappingURL=useModalOverlay.d.ts.map

package/dist/components/overlay/useModalOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModalOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/useModalOverlay.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE,KAAK,kBAAkB,GAAG;IACxB,UAAU,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,aAAa,yDAEzB,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,MAAM,OAAO,KAAG,OAgB/C,CAAC;AAEF,KAAK,6BAA6B,GAAG;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAC1D,gBAAgB,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IACjE,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACvD,CAAC;AA6EF,KAAK,sBAAsB,GAAG,IAAI,CAAC,6BAA6B,EAAE,SAAS,CAAC,GAAG;IAC7E,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,GAC1B,WAAW,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,EACpD,uCAAuC,sBAAsB;;;2BA/D/B,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC;kCAR3D,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC;0BA2BlB,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;;CAqErE,CAAC"}

package/dist/components/overlay/useModalOverlay.js

@@ -0,0 +1,85 @@
+"use client";
+import { useState, createContext, useContext, useEffect, useRef } from "react";
+import { useClickOutside } from "../../hooks/useClickOutside/useClickOutside.js";
+import { usePreventBodyScroll } from "../../hooks/usePreventBodyScroll/usePreventBodyScroll.js";
+import { useRestoreFocus } from "../../hooks/useRestoreFocus/useRestoreFocus.js";
+const DialogContext = createContext(
+  void 0
+);
+const useNestedDialog = (open) => {
+  const parentDialog = useContext(DialogContext);
+  useEffect(() => {
+    if (!parentDialog || !open) {
+      return;
+    }
+    parentDialog.setEnabled(false);
+    return () => {
+      parentDialog.setEnabled(true);
+    };
+  }, [parentDialog, open]);
+  return !!parentDialog;
+};
+const useDialogCloseRequests = ({
+  enabled,
+  onRequestClose,
+  onKeyDown,
+  onKeyDownCapture,
+  onCancel
+}) => {
+  const stoppedEscapeRef = useRef(null);
+  const handleKeyDownCapture = (event) => {
+    onKeyDownCapture?.(event);
+    stoppedEscapeRef.current = event.key === "Escape" ? event.nativeEvent : null;
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.key !== "Escape") {
+      return;
+    }
+    stoppedEscapeRef.current = null;
+    if (!enabled || event.defaultPrevented) {
+      return;
+    }
+    event.preventDefault();
+    onRequestClose("escape");
+  };
+  const handleCancel = (event) => {
+    onCancel?.(event);
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+    event.preventDefault();
+    const stoppedEscape = stoppedEscapeRef.current;
+    const claimed = stoppedEscape !== null && !stoppedEscape.defaultPrevented;
+    stoppedEscapeRef.current = null;
+    if (enabled && !claimed) {
+      onRequestClose("escape");
+    }
+  };
+  return {
+    onKeyDown: handleKeyDown,
+    onKeyDownCapture: handleKeyDownCapture,
+    onCancel: handleCancel
+  };
+};
+const useModalOverlay = (dialogRef, { open, onRequestClose, ...handlers }) => {
+  const [enabled, setEnabled] = useState(true);
+  const [contextValue] = useState(() => ({ setEnabled }));
+  useRestoreFocus(open);
+  const isNested = useNestedDialog(open);
+  usePreventBodyScroll(open && !isNested);
+  useClickOutside(dialogRef, () => onRequestClose("outside-click"), {
+    enabled: open && enabled
+  });
+  const closeRequestProps = useDialogCloseRequests({
+    enabled: open && enabled,
+    onRequestClose,
+    ...handlers
+  });
+  return { contextValue, closeRequestProps };
+};
+export {
+  DialogContext,
+  useModalOverlay,
+  useNestedDialog
+};

package/dist/hooks/useClickOutside/useClickOutside.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useClickOutside.d.ts","sourceRoot":"","sources":["../../../src/hooks/useClickOutside/useClickOutside.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,sBAAsB,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,KAAK,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,gBAAgB,MAAM,IAAI,EAC1B,cAAoB,sBAA2B,KAC9C,IAuBF,CAAC"}
+{"version":3,"file":"useClickOutside.d.ts","sourceRoot":"","sources":["../../../src/hooks/useClickOutside/useClickOutside.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,KAAK,sBAAsB,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,KAAK,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,gBAAgB,MAAM,IAAI,EAC1B,cAAoB,sBAA2B,KAC9C,IA0DF,CAAC"}

package/dist/hooks/useClickOutside/useClickOutside.js

@@ -1,23 +1,43 @@
 "use client";
-import { useEffect } from "react";
+import { useRef, useEffect } from "react";
+import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
 const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
+  const onClickOutsideRef = useRef(onClickOutside);
+  useIsomorphicLayoutEffect(() => {
+    onClickOutsideRef.current = onClickOutside;
+  }, [onClickOutside]);
   useEffect(() => {
     if (!enabled) {
       return;
     }
-    const listener = (event) => {
-      if (ref.current && !ref.current.contains(event.target)) {
-        onClickOutside();
+    let pointerInside = false;
+    const isInside = (event) => ref.current !== null && event.composedPath().includes(ref.current);
+    const onPointerDown = (event) => {
+      pointerInside = isInside(event);
+    };
+    const onPointerUp = (event) => {
+      pointerInside ||= isInside(event);
+    };
+    const onClick = (event) => {
+      const fromPointer = event.detail > 0;
+      const inside = fromPointer && pointerInside || isInside(event);
+      pointerInside = false;
+      if (ref.current && !inside) {
+        onClickOutsideRef.current();
       }
     };
     const rafId = requestAnimationFrame(() => {
-      document.addEventListener("click", listener);
+      document.addEventListener("pointerdown", onPointerDown, true);
+      document.addEventListener("pointerup", onPointerUp, true);
+      document.addEventListener("click", onClick);
     });
     return () => {
       cancelAnimationFrame(rafId);
-      document.removeEventListener("click", listener);
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("pointerup", onPointerUp, true);
+      document.removeEventListener("click", onClick);
     };
-  }, [ref, onClickOutside, enabled]);
+  }, [ref, enabled]);
 };
 export {
   useClickOutside

package/dist/hooks/useModalDialog/useModalDialog.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Shows a <dialog> as modal while `open` is true, and keeps it rendered
+ * (`visible`) until its closing animation has ended.
+ *
+ * The dialog also closes whenever the effect is cleaned up while open, such as
+ * when React hides it in an <Activity> or unmounts it, so it never lingers in
+ * the top layer. Revealing it again shows it as modal.
+ */
+export declare const useModalDialog: (dialogRef: React.RefObject<HTMLDialogElement | null>, open: boolean) => {
+    visible: boolean;
+    onAnimationEnd: () => void;
+};
+//# sourceMappingURL=useModalDialog.d.ts.map

package/dist/hooks/useModalDialog/useModalDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModalDialog.d.ts","sourceRoot":"","sources":["../../../src/hooks/useModalDialog/useModalDialog.ts"],"names":[],"mappings":"AAOA;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GACzB,WAAW,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,EACpD,MAAM,OAAO;;;CA+Cd,CAAC"}

package/dist/hooks/useModalDialog/useModalDialog.js

@@ -0,0 +1,39 @@
+"use client";
+import { hasAnimationDuration } from "@blockle/blocks-core";
+import { useState, useCallback } from "react";
+import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
+const useModalDialog = (dialogRef, open) => {
+  const [visible, setVisible] = useState(open);
+  useIsomorphicLayoutEffect(() => {
+    const dialog = dialogRef.current;
+    if (open && visible) {
+      if (!dialog?.showModal) {
+        return;
+      }
+      if (dialog.open) {
+        dialog.close();
+      }
+      dialog.showModal();
+      return () => {
+        dialog.close();
+      };
+    }
+    if (open) {
+      setVisible(true);
+      return;
+    }
+    if (!hasAnimationDuration(dialog)) {
+      setVisible(false);
+    }
+    dialog?.close?.();
+  }, [open, visible]);
+  const onAnimationEnd = useCallback(() => {
+    if (!open) {
+      setVisible(false);
+    }
+  }, [open]);
+  return { visible, onAnimationEnd };
+};
+export {
+  useModalDialog
+};

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { Alert, type AlertProps, } from './components/feedback/Alert/Alert.js';
 export { Progress, type ProgressProps, } from './components/feedback/Progress/Progress.js';
 export { Skeleton, type SkeletonProps, } from './components/feedback/Skeleton/Skeleton.js';
 export { Spinner, type SpinnerProps, } from './components/feedback/Spinner/Spinner.js';
-export { ToastProvider, type ToastProviderProps, } from './components/feedback/Toast/ToastProvider.js';
+export { type ToastPlacement, ToastProvider, type ToastProviderProps, } from './components/feedback/Toast/ToastProvider.js';
 export { type ToastProps, useToast, } from './components/feedback/Toast/useToast.js';
 export { Button, type ButtonProps } from './components/form/Button/Button.js';
 export { Checkbox, type CheckboxProps, } from './components/form/Checkbox/Checkbox.js';
@@ -27,8 +27,9 @@ export { Stack, type StackProps } from './components/layout/Stack/Stack.js';
 export { Link, type LinkProps } from './components/navigation/Link/Link.js';
 export { Dialog, type DialogProps, } from './components/overlay/Dialog/Dialog.js';
 export { Drawer, type DrawerProps, } from './components/overlay/Drawer/Drawer.js';
-export { Popover, type PopoverProps, } from './components/overlay/Popover/Popover.js';
+export { Popover, type PopoverPlacement, type PopoverProps, } from './components/overlay/Popover/Popover.js';
 export { Portal, type PortalProps, } from './components/overlay/Portal/Portal.js';
+export type { RequestCloseReason } from './components/overlay/requestCloseReason.js';
 export { Tooltip, type TooltipProps, } from './components/overlay/Tooltip/Tooltip.js';
 export { BlocksProvider, type BlocksProviderProps, } from './components/providers/BlocksProvider/BlocksProvider.js';
 export { Heading, type HeadingProps, } from './components/typography/Heading/Heading.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/testUtils/browser/pointer.d.ts

@@ -0,0 +1,18 @@
+export type Point = {
+    x: number;
+    y: number;
+};
+/**
+ * Dispatches a trusted mouse event at a point in the test frame. Chromium only.
+ */
+export declare const mouse: (type: "mousePressed" | "mouseMoved" | "mouseReleased", point: Point) => Promise<void>;
+/**
+ * Presses the left button at `from`, moves to `to` and releases it there.
+ */
+export declare const press: (from: Point, to?: Point) => Promise<void>;
+export declare const centerOf: (element: Element) => Point;
+/**
+ * The bottom right corner of the viewport, clear of the overlays under test.
+ */
+export declare const outside: () => Point;
+//# sourceMappingURL=pointer.d.ts.map

package/dist/testUtils/browser/pointer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pointer.d.ts","sourceRoot":"","sources":["../../../src/testUtils/browser/pointer.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,KAAK,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAgB7C;;GAEG;AACH,eAAO,MAAM,KAAK,GAChB,MAAM,cAAc,GAAG,YAAY,GAAG,eAAe,EACrD,OAAO,KAAK,kBASb,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,GAAU,MAAM,KAAK,EAAE,KAAI,KAAY,kBAQxD,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,SAAS,OAAO,KAAG,KAI3C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,QAAO,KAGzB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks-react",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "React hooks and components for Blockle",
   "type": "module",
   "exports": {
@@ -34,7 +34,7 @@
     "@vanilla-extract/css": "^1.18.0"
   },
   "peerDependencies": {
-    "@blockle/blocks-core": ">=3.0.x",
+    "@blockle/blocks-core": ">=3.1.x",
     "@blockle/blocks-react-slot": ">=1.2.x",
     "@vanilla-extract/css": "^1.18.0",
     "react": ">=19.1.0",

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

@@ -1,7 +0,0 @@
-type DialogContextValue = {
-    setEnabled: (active: boolean) => void;
-};
-export declare const DialogContext: import('react').Context<DialogContextValue | undefined>;
-export declare const useNestedDialog: (open: boolean) => boolean;
-export {};
-//# sourceMappingURL=dialogHelper.d.ts.map

package/dist/components/overlay/Dialog/dialogHelper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dialogHelper.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Dialog/dialogHelper.tsx"],"names":[],"mappings":"AAIA,KAAK,kBAAkB,GAAG;IACxB,UAAU,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,aAAa,yDAEzB,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,MAAM,OAAO,KAAG,OAgB/C,CAAC"}

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

@@ -1,22 +0,0 @@
-"use client";
-import { useContext, useEffect, createContext } from "react";
-const DialogContext = createContext(
-  void 0
-);
-const useNestedDialog = (open) => {
-  const parentDialog = useContext(DialogContext);
-  useEffect(() => {
-    if (!parentDialog || !open) {
-      return;
-    }
-    parentDialog.setEnabled(false);
-    return () => {
-      parentDialog.setEnabled(true);
-    };
-  }, [parentDialog, open]);
-  return !!parentDialog;
-};
-export {
-  DialogContext,
-  useNestedDialog
-};