@blockle/blocks-react 3.1.0 → 3.3.0

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

@@ -7,23 +7,24 @@ 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";
 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 +51,9 @@ const Popover = ({
         return;
       }
       element.showPopover();
-      const [x, y] = getPopoverPosition(placement, anchorElement, popoverRef);
-      setPopoverPosition({ x, y });
+      setLayout(
+        getPopoverLayout(placement, anchorElement, popoverRef, limitHeight)
+      );
     } else if (open) {
       setVisible(true);
     } else {
@@ -71,36 +73,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 +148,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/Heading/Heading.d.ts

@@ -1,10 +1,11 @@
 import { HTMLElementProps, MarginAtoms, PaddingAtoms, TextAtoms } from '@blockle/blocks-core';
 import { TextColor } from '../textColor.js';
+import { TextOverflowProps } from '../textOverflow.js';
 export type HeadingProps = {
     className?: string;
     /** A text Color role, which follows the Color mode, or a fixed Palette color. */
     color?: TextColor;
     level?: 1 | 2 | 3 | 4 | 5 | 6;
-} & HTMLElementProps<HTMLHeadingElement> & Omit<TextAtoms, 'color'> & MarginAtoms & PaddingAtoms;
+} & TextOverflowProps & HTMLElementProps<HTMLHeadingElement> & Omit<TextAtoms, 'color'> & MarginAtoms & PaddingAtoms;
 export declare const Heading: React.FC<HeadingProps>;
 //# sourceMappingURL=Heading.d.ts.map

package/dist/components/typography/Heading/Heading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/Heading/Heading.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,sBAAsB,CAAC;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAiB,MAAM,iBAAiB,CAAC;AAGhE,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC/B,GAAG,gBAAgB,CAAC,kBAAkB,CAAC,GACtC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GACxB,WAAW,GACX,YAAY,CAAC;AAEf,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAuB1C,CAAC"}
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/Heading/Heading.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,sBAAsB,CAAC;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAiB,MAAM,iBAAiB,CAAC;AAChE,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,oBAAoB,CAAC;AAG5B,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC/B,GAAG,iBAAiB,GACnB,gBAAgB,CAAC,kBAAkB,CAAC,GACpC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GACxB,WAAW,GACX,YAAY,CAAC;AAEf,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA8B1C,CAAC"}

package/dist/components/typography/Heading/Heading.js

@@ -3,11 +3,14 @@ import { jsx } from "react/jsx-runtime";
 import { classnames } from "@blockle/blocks-core";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { Box } from "../../layout/Box/Box.js";
+import { textOverflowClassName } from "../textOverflow.js";
 import { heading } from "./heading.css.js";
 const Heading = ({
   className,
   color,
   level = 1,
+  lineClamp,
+  truncate,
   children,
   ...restProps
 }) => {
@@ -20,7 +23,12 @@ const Heading = ({
     Box,
     {
       asChild: true,
-      className: classnames(heading, themeClassName, className),
+      className: classnames(
+        heading,
+        themeClassName,
+        textOverflowClassName("Heading", { lineClamp, truncate }),
+        className
+      ),
       color,
       ...restProps,
       children: /* @__PURE__ */ jsx(Tag, { children })

package/dist/components/typography/Text/Text.d.ts

@@ -1,6 +1,7 @@
 import { HTMLElementProps, MarginAtoms, PaddingAtoms, TextAtoms } from '@blockle/blocks-core';
 import { default as React } from 'react';
 import { TextColor } from '../textColor.js';
+import { TextOverflowProps } from '../textOverflow.js';
 type Tags = 'cite' | 'code' | 'del' | 'em' | 'ins' | 'kbd' | 'label' | 'mark' | 'p' | 'q' | 's' | 'small' | 'span' | 'strong' | 'sub' | 'sup';
 export type TextProps<Tag extends Tags = 'span'> = {
     asChild?: boolean;
@@ -9,7 +10,7 @@ export type TextProps<Tag extends Tags = 'span'> = {
     tag?: Tag;
     /** A text Color role, which follows the Color mode, or a fixed Palette color. */
     color?: TextColor;
-} & Omit<HTMLElementProps<HTMLSpanElement>, 'children' | 'ref'> & Omit<TextAtoms, 'color'> & MarginAtoms & PaddingAtoms;
-export declare const Text: <T extends Tags = "span">({ asChild, children, className, color, ref, tag, ...restProps }: TextProps<T>) => import("react/jsx-runtime").JSX.Element;
+} & TextOverflowProps & Omit<HTMLElementProps<HTMLSpanElement>, 'children' | 'ref'> & Omit<TextAtoms, 'color'> & MarginAtoms & PaddingAtoms;
+export declare const Text: <T extends Tags = "span">({ asChild, children, className, color, lineClamp, ref, tag, truncate, ...restProps }: TextProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Text.d.ts.map

package/dist/components/typography/Text/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/Text/Text.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,SAAS,EAAiB,MAAM,iBAAiB,CAAC;AAGhE,KAAK,IAAI,GACL,MAAM,GACN,MAAM,GACN,KAAK,GACL,IAAI,GACJ,KAAK,GACL,KAAK,GACL,OAAO,GACP,MAAM,GACN,GAAG,GACH,GAAG,GACH,GAAG,GACH,OAAO,GACP,MAAM,GACN,QAAQ,GACR,KAAK,GACL,KAAK,CAAC;AAEV,MAAM,MAAM,SAAS,CAAC,GAAG,SAAS,IAAI,GAAG,MAAM,IAAI;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC5C,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,GAAG,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,GAC7D,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GACxB,WAAW,GACX,YAAY,CAAC;AAEf,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,IAAI,GAAG,MAAM,EAAE,iEAQ3C,SAAS,CAAC,CAAC,CAAC,4CAsBd,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/Text/Text.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,SAAS,EAAiB,MAAM,iBAAiB,CAAC;AAChE,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,oBAAoB,CAAC;AAG5B,KAAK,IAAI,GACL,MAAM,GACN,MAAM,GACN,KAAK,GACL,IAAI,GACJ,KAAK,GACL,KAAK,GACL,OAAO,GACP,MAAM,GACN,GAAG,GACH,GAAG,GACH,GAAG,GACH,OAAO,GACP,MAAM,GACN,QAAQ,GACR,KAAK,GACL,KAAK,CAAC;AAEV,MAAM,MAAM,SAAS,CAAC,GAAG,SAAS,IAAI,GAAG,MAAM,IAAI;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC5C,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,GAAG,iBAAiB,GACnB,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,GAC3D,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GACxB,WAAW,GACX,YAAY,CAAC;AAEf,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,IAAI,GAAG,MAAM,EAAE,sFAU3C,SAAS,CAAC,CAAC,CAAC,4CA2Bd,CAAC"}

package/dist/components/typography/Text/Text.js

@@ -3,14 +3,17 @@ import { jsx } from "react/jsx-runtime";
 import { classnames } from "@blockle/blocks-core";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { Box } from "../../layout/Box/Box.js";
+import { textOverflowClassName } from "../textOverflow.js";
 import { text } from "./text.css.js";
 const Text = ({
   asChild,
   children,
   className,
   color,
+  lineClamp,
   ref,
   tag,
+  truncate,
   ...restProps
 }) => {
   const Component = tag ?? "span";
@@ -22,7 +25,12 @@ const Text = ({
     Box,
     {
       asChild: true,
-      className: classnames(text, themeClassName, className),
+      className: classnames(
+        text,
+        themeClassName,
+        textOverflowClassName("Text", { lineClamp, truncate }),
+        className
+      ),
       color,
       ...restProps,
       children: asChild ? children : (

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

@@ -0,0 +1,3 @@
+export declare const lineClamp: Record<1 | 2 | 3 | 4 | 5, string>;
+export declare const truncate: string;
+//# sourceMappingURL=textOverflow.css.d.ts.map

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

@@ -0,0 +1 @@
+{"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/components/typography/textOverflow.css.js

@@ -0,0 +1,32 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { layers } from "@blockle/blocks-core";
+import { styleVariants, style } from "@vanilla-extract/css";
+setFileScope("src/components/typography/textOverflow.css.ts", "@blockle/blocks-react");
+const lineClamp = styleVariants(
+  { 1: 1, 2: 2, 3: 3, 4: 4, 5: 5 },
+  (lines) => ({
+    "@layer": {
+      [layers.molecule]: {
+        display: "-webkit-box",
+        WebkitBoxOrient: "vertical",
+        WebkitLineClamp: lines,
+        overflow: "hidden"
+      }
+    }
+  })
+);
+const truncate = style({
+  "@layer": {
+    [layers.molecule]: {
+      display: "block",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    }
+  }
+});
+endFileScope();
+export {
+  lineClamp,
+  truncate
+};