@blockle/blocks-react 3.2.0 → 3.3.1

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

@@ -17,7 +17,16 @@ export type PopoverProps = {
      * @deprecated Use `placement`, which wins when both are passed
      */
     position?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * @deprecated Has no effect, an open popover always keeps its layout up to
+     * date
+     */
     sticky?: boolean;
+    /**
+     * Caps the popover's height to the room on the side it opens on, so a tall
+     * popover stops at the viewport's edge. Give it `overflow: auto` to scroll.
+     */
+    limitHeight?: boolean;
 } & HTMLElementProps<HTMLDivElement>;
 export declare const Popover: React.FC<PopoverProps>;
 //# sourceMappingURL=Popover.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Popover/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,gBAAgB,EAEtB,MAAM,sBAAsB,CAAC;AAQ9B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAsB,KAAK,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAE/E,YAAY,EAAE,gBAAgB,EAAE,CAAC;AAIjC,MAAM,MAAM,YAAY,GAAG;IACzB,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACnD,cAAc,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACrD,IAAI,EAAE,OAAO,CAAC;IACd;;;;;OAKG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;CAElB,GAAG,gBAAgB,CAAC,cAAc,CAAC,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAkJ1C,CAAC"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Popover/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,gBAAgB,EAEtB,MAAM,sBAAsB,CAAC;AAQ9B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,oBAAoB,CAAC;AAE5B,YAAY,EAAE,gBAAgB,EAAE,CAAC;AAIjC,MAAM,MAAM,YAAY,GAAG;IACzB,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACnD,cAAc,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACrD,IAAI,EAAE,OAAO,CAAC;IACd;;;;;OAKG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CAEvB,GAAG,gBAAgB,CAAC,cAAc,CAAC,CAAC;AAcrC,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAgO1C,CAAC"}

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

@@ -7,23 +7,33 @@ import { useComponentStyles } from "../../../hooks/useComponentStyles/useCompone
 import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
 import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.js";
 import { Box } from "../../layout/Box/Box.js";
-import { getPopoverPosition } from "./popover-utils.js";
+import { getPopoverLayout } from "./popover-utils.js";
+function toPx(value) {
+  return value === void 0 ? "" : `${value}px`;
+}
+function applyLayout(element, layout) {
+  element.style.left = toPx(layout.x);
+  element.style.top = toPx(layout.y);
+  element.style.maxWidth = toPx(layout.maxWidth);
+  element.style.maxHeight = toPx(layout.maxHeight);
+}
 const Popover = ({
   anchorElement,
   children,
   className,
+  limitHeight = false,
   onRequestClose,
   open,
   placement: placementProp,
   position,
   ref,
-  sticky,
+  sticky: _sticky,
   style,
   ...restProps
 }) => {
   const placement = placementProp ?? position ?? "top";
   const popoverRef = useRef(null);
-  const [popoverPosition, setPopoverPosition] = useState({ x: 0, y: 0 });
+  const [layout, setLayout] = useState({ x: 0, y: 0 });
   const [visible, setVisible] = useState(open);
   const popoverClassName = useComponentStyles("popover", { root: true }, false);
   const onEscape = useCallback(
@@ -50,8 +60,14 @@ const Popover = ({
         return;
       }
       element.showPopover();
-      const [x, y] = getPopoverPosition(placement, anchorElement, popoverRef);
-      setPopoverPosition({ x, y });
+      const nextLayout = getPopoverLayout(
+        placement,
+        anchorElement,
+        popoverRef,
+        limitHeight
+      );
+      applyLayout(element, nextLayout);
+      setLayout(nextLayout);
     } else if (open) {
       setVisible(true);
     } else {
@@ -71,36 +87,70 @@ const Popover = ({
     }
   }, [open, visible]);
   useEffect(() => {
-    if (open) {
-      const [x, y] = getPopoverPosition(placement, anchorElement, popoverRef);
-      setPopoverPosition({ x, y });
-    }
-  }, [open, anchorElement, placement]);
-  useEffect(() => {
-    if (!open || !sticky) {
+    if (!open || !visible) {
       return;
     }
-    function updatePopoverPosition() {
-      const [x, y] = getPopoverPosition(placement, anchorElement, popoverRef);
-      setPopoverPosition((prev) => {
-        if (prev.x === x && prev.y === y) {
+    let frame = 0;
+    function updateLayout() {
+      frame = 0;
+      if (!popoverRef.current) {
+        return;
+      }
+      const next = getPopoverLayout(
+        placement,
+        anchorElement,
+        popoverRef,
+        limitHeight
+      );
+      setLayout((prev) => {
+        if (prev.x === next.x && prev.y === next.y && prev.maxWidth === next.maxWidth && prev.maxHeight === next.maxHeight) {
           return prev;
         }
-        return { x, y };
+        return next;
       });
     }
-    window.addEventListener("resize", updatePopoverPosition);
-    window.addEventListener("scroll", updatePopoverPosition);
+    function scheduleLayoutUpdate() {
+      if (!frame) {
+        frame = requestAnimationFrame(updateLayout);
+      }
+    }
+    function onScroll(event) {
+      if (event.target instanceof Node && popoverRef.current?.contains(event.target)) {
+        return;
+      }
+      scheduleLayoutUpdate();
+    }
+    updateLayout();
+    const { visualViewport } = window;
+    const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(scheduleLayoutUpdate);
+    if (anchorElement.current) {
+      observer?.observe(anchorElement.current);
+    }
+    if (popoverRef.current) {
+      observer?.observe(popoverRef.current);
+    }
+    window.addEventListener("resize", scheduleLayoutUpdate);
+    document.addEventListener("scroll", onScroll, {
+      capture: true,
+      passive: true
+    });
+    visualViewport?.addEventListener("resize", scheduleLayoutUpdate);
     return () => {
-      window.removeEventListener("resize", updatePopoverPosition);
-      window.removeEventListener("scroll", updatePopoverPosition);
+      cancelAnimationFrame(frame);
+      observer?.disconnect();
+      window.removeEventListener("resize", scheduleLayoutUpdate);
+      document.removeEventListener("scroll", onScroll, { capture: true });
+      visualViewport?.removeEventListener("resize", scheduleLayoutUpdate);
     };
-  }, [placement, anchorElement, open, sticky]);
-  const onAnimationEnd = useCallback(() => {
-    if (!open) {
-      setVisible(false);
-    }
-  }, [open]);
+  }, [open, visible, placement, anchorElement, limitHeight]);
+  const onClosingEnd = useCallback(
+    (event) => {
+      if (!open && event.target === event.currentTarget) {
+        setVisible(false);
+      }
+    },
+    [open]
+  );
   if (!visible) {
     return null;
   }
@@ -112,12 +162,15 @@ const Popover = ({
       popover: "manual",
       className: classnames(popoverClassName, className),
       position: "absolute",
-      onAnimationEnd,
-      onTransitionEnd: onAnimationEnd,
+      onAnimationEnd: onClosingEnd,
+      onTransitionEnd: onClosingEnd,
+      onTransitionCancel: onClosingEnd,
       style: {
         ...style,
-        left: popoverPosition.x,
-        top: popoverPosition.y
+        left: layout.x,
+        top: layout.y,
+        maxWidth: layout.maxWidth,
+        maxHeight: layout.maxHeight
       },
       ...restProps,
       children

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

@@ -35,6 +35,37 @@ export type ComputePopoverPositionOptions = {
  * Returns the popover's `left` and `top`, relative to the document
  */
 export declare function computePopoverPosition({ placement, anchor, popover, viewport, }: ComputePopoverPositionOptions): PopoverPositions;
-export declare function getPopoverPosition(placement: PopoverPlacement, anchorRef: React.RefObject<HTMLElement | null>, popoverRef: React.RefObject<HTMLElement | null>): PopoverPositions;
+/**
+ * Returns the most height the popover's border box can take on the side it
+ * opens on, keeping it VIEWPORT_PADDING inside the viewport
+ */
+export declare function computeAvailableHeight({ placement, anchor, popover, viewport, }: ComputePopoverPositionOptions): number;
+/**
+ * Returns the most width the popover's border box can take, keeping it
+ * VIEWPORT_PADDING inside the viewport on both sides
+ */
+export declare function computeAvailableWidth(viewport: ComputePopoverPositionOptions['viewport']): number;
+export type PopoverLayout = {
+    x: number;
+    y: number;
+    /**
+     * The popover's `max-width`: the viewport's width, VIEWPORT_PADDING inside
+     * both edges. It follows the popover's `box-sizing`, so padding and border
+     * fit too.
+     */
+    maxWidth?: number;
+    /**
+     * The popover's `max-height`, when it is limited to the room it has. It
+     * follows the popover's `box-sizing`, so padding and border fit too.
+     */
+    maxHeight?: number;
+};
+/**
+ * Measures the anchor and popover and returns where to put the popover. A
+ * popover wider than the viewport is capped to it, and placed by its capped
+ * width. With `limitHeight`, a popover taller than the room on its side is
+ * capped to that room, and placed by its capped height.
+ */
+export declare function getPopoverLayout(placement: PopoverPlacement, anchorRef: React.RefObject<HTMLElement | null>, popoverRef: React.RefObject<HTMLElement | null>, limitHeight?: boolean): PopoverLayout;
 export {};
 //# sourceMappingURL=popover-utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"popover-utils.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Popover/popover-utils.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,gBAAgB,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC;AAEtD,KAAK,WAAW,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvD,KAAK,WAAW,GAAG,OAAO,GAAG,KAAK,CAAC;AAEnC,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,GAAG,WAAW,IAAI,WAAW,EAAE,CAAC;AAE7E,KAAK,IAAI,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzE,KAAK,MAAM,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3E,MAAM,MAAM,6BAA6B,GAAG;IAC1C,SAAS,EAAE,gBAAgB,CAAC;IAC5B,wDAAwD;IACxD,MAAM,EAAE,IAAI,CAAC;IACb,kEAAkE;IAClE,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3D,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;CAC/E,CAAC;AAEF;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,6BAA6B,GAAG,gBAAgB,CAyClD;AAoED,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,gBAAgB,EAC3B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC9C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAC9C,gBAAgB,CAyClB"}
+{"version":3,"file":"popover-utils.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Popover/popover-utils.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,gBAAgB,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC;AAEtD,KAAK,WAAW,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvD,KAAK,WAAW,GAAG,OAAO,GAAG,KAAK,CAAC;AAEnC,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,GAAG,WAAW,IAAI,WAAW,EAAE,CAAC;AAE7E,KAAK,IAAI,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzE,KAAK,MAAM,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3E,MAAM,MAAM,6BAA6B,GAAG;IAC1C,SAAS,EAAE,gBAAgB,CAAC;IAC5B,wDAAwD;IACxD,MAAM,EAAE,IAAI,CAAC;IACb,kEAAkE;IAClE,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3D,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;CAC/E,CAAC;AAEF;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,6BAA6B,GAAG,gBAAgB,CAgDlD;AA0CD;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,6BAA6B,GAAG,MAAM,CAgBxC;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,QAAQ,EAAE,6BAA6B,CAAC,UAAU,CAAC,GAClD,MAAM,CAER;AAyCD,MAAM,MAAM,aAAa,GAAG;IAC1B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,gBAAgB,EAC3B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC9C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC/C,WAAW,UAAQ,GAClB,aAAa,CAyFf"}

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

@@ -11,7 +11,11 @@ function computePopoverPosition({
   let left;
   let top;
   if (side === "top" || side === "bottom") {
-    top = side === "top" ? anchor.top - margin.bottom - popover.height : anchor.top + anchor.height + margin.top;
+    top = holdInViewport(
+      side === "top" ? anchor.top - margin.bottom - popover.height : anchor.top + anchor.height + margin.top,
+      popover.height,
+      viewport.height
+    );
     left = alignOnCrossAxis(
       edge,
       anchor.left,
@@ -20,7 +24,11 @@ function computePopoverPosition({
       viewport.width
     );
   } else {
-    left = side === "left" ? anchor.left - margin.right - popover.width : anchor.left + anchor.width + margin.left;
+    left = holdInViewport(
+      side === "left" ? anchor.left - margin.right - popover.width : anchor.left + anchor.width + margin.left,
+      popover.width,
+      viewport.width
+    );
     top = alignOnCrossAxis(
       edge,
       anchor.top,
@@ -56,6 +64,25 @@ function flipSide(side, anchor, popover, viewport) {
   }
   return side;
 }
+function computeAvailableHeight({
+  placement,
+  anchor,
+  popover,
+  viewport
+}) {
+  const [preferredSide] = placement.split("-");
+  const side = flipSide(preferredSide, anchor, popover, viewport);
+  let available = viewport.height - VIEWPORT_PADDING * 2;
+  if (side === "top") {
+    available = anchor.top - popover.margin.bottom - VIEWPORT_PADDING;
+  } else if (side === "bottom") {
+    available = viewport.height - VIEWPORT_PADDING - (anchor.top + anchor.height) - popover.margin.top;
+  }
+  return Math.max(0, available);
+}
+function computeAvailableWidth(viewport) {
+  return Math.max(0, viewport.width - VIEWPORT_PADDING * 2);
+}
 function alignOnCrossAxis(edge, anchorStart, anchorSize, popoverSize, viewportSize) {
   let start = anchorStart + (anchorSize - popoverSize) / 2;
   if (edge === "start") {
@@ -63,46 +90,74 @@ function alignOnCrossAxis(edge, anchorStart, anchorSize, popoverSize, viewportSi
   } else if (edge === "end") {
     start = anchorStart + anchorSize - popoverSize;
   }
+  return holdInViewport(start, popoverSize, viewportSize);
+}
+function holdInViewport(start, popoverSize, viewportSize) {
   const max = viewportSize - VIEWPORT_PADDING - popoverSize;
   return Math.max(VIEWPORT_PADDING, Math.min(start, max));
 }
-function getPopoverPosition(placement, anchorRef, popoverRef) {
+function getPopoverLayout(placement, anchorRef, popoverRef, limitHeight = false) {
   if (!anchorRef.current || !popoverRef.current) {
-    return [0, 0];
+    return { x: 0, y: 0 };
   }
+  const element = popoverRef.current;
   const anchorRect = anchorRef.current.getBoundingClientRect();
-  const popoverRect = popoverRef.current.getBoundingClientRect();
-  const popoverStyles = getComputedStyle(popoverRef.current);
-  const [width, height] = getOriginalElementSize(
+  const popoverRect = element.getBoundingClientRect();
+  const popoverStyles = getComputedStyle(element);
+  const [measuredWidth, measuredHeight] = getOriginalElementSize(
     popoverStyles,
     popoverRect.width,
     popoverRect.height
   );
+  const style = (property) => cssValueToNumber(popoverStyles.getPropertyValue(property));
+  const borderY = style("border-top-width") + style("border-bottom-width");
+  const isContentBox = popoverStyles.boxSizing === "content-box";
+  const height = limitHeight ? Math.max(measuredHeight, element.scrollHeight + borderY) : measuredHeight;
   const { documentElement } = document;
-  return computePopoverPosition({
+  const viewport = {
+    width: documentElement.clientWidth,
+    height: documentElement.clientHeight,
+    scrollX: documentElement.scrollLeft,
+    scrollY: documentElement.scrollTop
+  };
+  const availableWidth = computeAvailableWidth(viewport);
+  const options = {
     placement,
     anchor: anchorRect,
     popover: {
-      width,
+      width: Math.min(measuredWidth, availableWidth),
       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"))
+        top: style("margin-top"),
+        right: style("margin-right"),
+        bottom: style("margin-bottom"),
+        left: style("margin-left")
       }
     },
-    viewport: {
-      width: documentElement.clientWidth,
-      height: documentElement.clientHeight,
-      scrollX: documentElement.scrollLeft,
-      scrollY: documentElement.scrollTop
-    }
+    viewport
+  };
+  const paddingAndBorderX = isContentBox ? style("padding-left") + style("padding-right") + style("border-left-width") + style("border-right-width") : 0;
+  const maxWidth = Math.max(0, availableWidth - paddingAndBorderX);
+  if (!limitHeight) {
+    const [x2, y2] = computePopoverPosition(options);
+    return { x: x2, y: y2, maxWidth };
+  }
+  const availableHeight = computeAvailableHeight(options);
+  const [x, y] = computePopoverPosition({
+    ...options,
+    popover: { ...options.popover, height: Math.min(height, availableHeight) }
   });
+  const paddingAndBorderY = isContentBox ? style("padding-top") + style("padding-bottom") + borderY : 0;
+  return {
+    x,
+    y,
+    maxWidth,
+    maxHeight: Math.max(0, availableHeight - paddingAndBorderY)
+  };
 }
 export {
+  computeAvailableHeight,
+  computeAvailableWidth,
   computePopoverPosition,
-  getPopoverPosition
+  getPopoverLayout
 };

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

@@ -0,0 +1,8 @@
+/**
+ * Puts a modal overlay on the stack of open ones while `open` is true, and
+ * returns whether it is the top one: the one opened last, wherever it is
+ * mounted. Like the browser's top layer, which shows each modal dialog above
+ * the ones shown before it, the order does not follow the React tree.
+ */
+export declare const useIsTopModalOverlay: (open: boolean) => boolean;
+//# sourceMappingURL=modalOverlayStack.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modalOverlayStack.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/modalOverlayStack.ts"],"names":[],"mappings":"AA8BA;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAAI,MAAM,OAAO,KAAG,OAoBpD,CAAC"}

package/dist/components/overlay/modalOverlayStack.js

@@ -0,0 +1,37 @@
+"use client";
+import { useState, useSyncExternalStore } from "react";
+import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
+let stack = [];
+const listeners = /* @__PURE__ */ new Set();
+const setStack = (next) => {
+  stack = next;
+  for (const listener of listeners) {
+    listener();
+  }
+};
+const subscribe = (listener) => {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+};
+const useIsTopModalOverlay = (open) => {
+  const [token] = useState(() => ({}));
+  useIsomorphicLayoutEffect(() => {
+    if (!open) {
+      return;
+    }
+    setStack([...stack, token]);
+    return () => {
+      setStack(stack.filter((item) => item !== token));
+    };
+  }, [open, token]);
+  return useSyncExternalStore(
+    subscribe,
+    () => stack.at(-1) === token,
+    () => false
+  );
+};
+export {
+  useIsTopModalOverlay
+};

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

@@ -1,9 +1,4 @@
 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;
@@ -19,17 +14,14 @@ type UseModalOverlayOptions = Omit<UseDialogCloseRequestsOptions, 'enabled'> & {
  * 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.
+ * Only the modal overlay opened last handles Escape and clicks outside, so a
+ * click in a Dialog or Drawer does not close the ones below it, whether it is
+ * nested in them or mounted elsewhere.
  */
 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;
-    };
+    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

@@ -1 +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"}
+{"version":3,"file":"useModalOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/useModalOverlay.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE,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;uBA/D/B,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC;8BAR3D,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC;sBA2BlB,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;CA2DrE,CAAC"}

package/dist/components/overlay/useModalOverlay.js

@@ -1,24 +1,9 @@
 "use client";
-import { useState, createContext, useContext, useEffect, useRef } from "react";
+import { 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;
-};
+import { useIsTopModalOverlay } from "./modalOverlayStack.js";
 const useDialogCloseRequests = ({
   enabled,
   onRequestClose,
@@ -63,23 +48,15 @@ const useDialogCloseRequests = ({
   };
 };
 const useModalOverlay = (dialogRef, { open, onRequestClose, ...handlers }) => {
-  const [enabled, setEnabled] = useState(true);
-  const [contextValue] = useState(() => ({ setEnabled }));
   useRestoreFocus(open);
-  const isNested = useNestedDialog(open);
-  usePreventBodyScroll(open && !isNested);
+  usePreventBodyScroll(open);
+  const isTop = useIsTopModalOverlay(open);
+  const enabled = open && isTop;
   useClickOutside(dialogRef, () => onRequestClose("outside-click"), {
-    enabled: open && enabled
-  });
-  const closeRequestProps = useDialogCloseRequests({
-    enabled: open && enabled,
-    onRequestClose,
-    ...handlers
+    enabled
   });
-  return { contextValue, closeRequestProps };
+  return useDialogCloseRequests({ enabled, onRequestClose, ...handlers });
 };
 export {
-  DialogContext,
-  useModalOverlay,
-  useNestedDialog
+  useModalOverlay
 };

package/dist/components/typography/textOverflow.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textOverflow.css.d.ts","sourceRoot":"","sources":["../../../src/components/typography/textOverflow.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,mCAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,QASnB,CAAC"}
+{"version":3,"file":"textOverflow.css.d.ts","sourceRoot":"","sources":["../../../src/components/typography/textOverflow.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS,mCAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,QASnB,CAAC"}

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

@@ -5,9 +5,14 @@
  * 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.
+ *
+ * Render `openAttribute` as the dialog's `open` attribute. It is `open` on the
+ * first render, so a server-rendered open dialog hydrates without a mismatch,
+ * and never changes after it, so React leaves the attribute to this hook.
  */
 export declare const useModalDialog: (dialogRef: React.RefObject<HTMLDialogElement | null>, open: boolean) => {
     visible: boolean;
     onAnimationEnd: () => void;
+    openAttribute: boolean;
 };
 //# sourceMappingURL=useModalDialog.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"useModalDialog.d.ts","sourceRoot":"","sources":["../../../src/hooks/useModalDialog/useModalDialog.ts"],"names":[],"mappings":"AAOA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,GACzB,WAAW,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,EACpD,MAAM,OAAO;;;;CAiDd,CAAC"}

package/dist/hooks/useModalDialog/useModalDialog.js

@@ -4,6 +4,7 @@ import { useState, useCallback } from "react";
 import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
 const useModalDialog = (dialogRef, open) => {
   const [visible, setVisible] = useState(open);
+  const [openAttribute] = useState(open);
   useIsomorphicLayoutEffect(() => {
     const dialog = dialogRef.current;
     if (open && visible) {
@@ -11,7 +12,7 @@ const useModalDialog = (dialogRef, open) => {
         return;
       }
       if (dialog.open) {
-        dialog.close();
+        dialog.removeAttribute("open");
       }
       dialog.showModal();
       return () => {
@@ -32,7 +33,7 @@ const useModalDialog = (dialogRef, open) => {
       setVisible(false);
     }
   }, [open]);
-  return { visible, onAnimationEnd };
+  return { visible, onAnimationEnd, openAttribute };
 };
 export {
   useModalDialog

package/dist/hooks/usePreventBodyScroll/usePreventBodyScroll.d.ts

@@ -1,2 +1,7 @@
+/**
+ * Prevents the body from scrolling while enabled. Any number of callers can
+ * be enabled at once: the first locks the body, and the body's styles and
+ * scroll position are restored once the last one is disabled or unmounts.
+ */
 export declare const usePreventBodyScroll: (enabled?: boolean) => void;
 //# sourceMappingURL=usePreventBodyScroll.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"usePreventBodyScroll.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePreventBodyScroll/usePreventBodyScroll.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB,GAAI,iBAAc,SAmClD,CAAC"}
+{"version":3,"file":"usePreventBodyScroll.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePreventBodyScroll/usePreventBodyScroll.ts"],"names":[],"mappings":"AAuCA;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,iBAAc,SAqBlD,CAAC"}