@blockle/blocks-react 3.0.1 → 3.2.0

package/dist/components/overlay/Drawer/drawer.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.css.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Drawer/drawer.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,QAmBjB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;CA2CrB,CAAC"}
+{"version":3,"file":"drawer.css.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Drawer/drawer.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,QAmBjB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;CAuCrB,CAAC"}

package/dist/components/overlay/Drawer/drawer.css.js

@@ -29,8 +29,7 @@ const placement = {
         top: 0,
         bottom: 0,
         left: 0,
-        height: "100%",
-        width: "300px"
+        height: "100%"
       }
     }
   }),
@@ -40,8 +39,7 @@ const placement = {
         top: 0,
         right: 0,
         bottom: 0,
-        height: "100%",
-        width: "300px"
+        height: "100%"
       }
     }
   }),
@@ -50,8 +48,7 @@ const placement = {
       [layers.molecule]: {
         top: 0,
         left: 0,
-        width: "100%",
-        height: "300px"
+        width: "100%"
       }
     }
   }),
@@ -60,8 +57,7 @@ const placement = {
       [layers.molecule]: {
         bottom: 0,
         left: 0,
-        width: "100%",
-        height: "300px"
+        width: "100%"
       }
     }
   })

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

@@ -1,10 +1,22 @@
 import { HTMLElementProps } from '@blockle/blocks-core';
-export type PopoverAlign = 'top' | 'bottom' | 'left' | 'right';
+import { RequestCloseReason } from '../requestCloseReason.js';
+import { PopoverPlacement } from './popover-utils.js';
+export type { PopoverPlacement };
 export type PopoverProps = {
     anchorElement: React.RefObject<HTMLElement | null>;
-    onRequestClose: () => void;
+    onRequestClose: (reason: RequestCloseReason) => void;
     open: boolean;
-    position?: PopoverAlign;
+    /**
+     * Side of the anchor to open on, and which of its edges to line up with.
+     * Flips to the opposite side when there is no room, and shifts to stay
+     * inside the viewport.
+     * @default 'top'
+     */
+    placement?: PopoverPlacement;
+    /**
+     * @deprecated Use `placement`, which wins when both are passed
+     */
+    position?: 'top' | 'bottom' | 'left' | 'right';
     sticky?: boolean;
 } & HTMLElementProps<HTMLDivElement>;
 export declare const Popover: React.FC<PopoverProps>;

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;AAU9B,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAI/D,MAAM,MAAM,YAAY,GAAG;IACzB,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACnD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;CAElB,GAAG,gBAAgB,CAAC,cAAc,CAAC,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAqH1C,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,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"}

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { hasAnimationDuration, classnames, composeRefs } from "@blockle/blocks-core";
-import { useRef, useState, useEffect, useCallback } from "react";
+import { useRef, useState, useCallback, useEffect } from "react";
 import { useClickOutside } from "../../../hooks/useClickOutside/useClickOutside.js";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
@@ -14,17 +14,32 @@ const Popover = ({
   className,
   onRequestClose,
   open,
-  position = "top",
+  placement: placementProp,
+  position,
+  ref,
   sticky,
   style,
   ...restProps
 }) => {
+  const placement = placementProp ?? position ?? "top";
   const popoverRef = useRef(null);
   const [popoverPosition, setPopoverPosition] = useState({ x: 0, y: 0 });
   const [visible, setVisible] = useState(open);
   const popoverClassName = useComponentStyles("popover", { root: true }, false);
-  useKeyboard("Escape", onRequestClose, { enabled: open });
-  useClickOutside(popoverRef, onRequestClose, { enabled: open });
+  const onEscape = useCallback(
+    (event) => {
+      if (event.defaultPrevented) {
+        return;
+      }
+      event.preventDefault();
+      onRequestClose("escape");
+    },
+    [onRequestClose]
+  );
+  useKeyboard("Escape", onEscape, { enabled: open });
+  useClickOutside(popoverRef, () => onRequestClose("outside-click"), {
+    enabled: open
+  });
   useIsomorphicLayoutEffect(() => {
     const element = popoverRef.current;
     if (open && visible) {
@@ -35,7 +50,7 @@ const Popover = ({
         return;
       }
       element.showPopover();
-      const [x, y] = getPopoverPosition(position, anchorElement, popoverRef);
+      const [x, y] = getPopoverPosition(placement, anchorElement, popoverRef);
       setPopoverPosition({ x, y });
     } else if (open) {
       setVisible(true);
@@ -43,21 +58,30 @@ const Popover = ({
       if (!hasAnimationDuration(popoverRef.current)) {
         setVisible(false);
       }
-      popoverRef.current?.hidePopover();
+      if (!element) {
+        return;
+      }
+      if (typeof element.hidePopover !== "function") {
+        console.warn(
+          "Popover: hidePopover method is not available on the element."
+        );
+        return;
+      }
+      element.hidePopover();
     }
   }, [open, visible]);
   useEffect(() => {
     if (open) {
-      const [x, y] = getPopoverPosition(position, anchorElement, popoverRef);
+      const [x, y] = getPopoverPosition(placement, anchorElement, popoverRef);
       setPopoverPosition({ x, y });
     }
-  }, [open, anchorElement, position]);
+  }, [open, anchorElement, placement]);
   useEffect(() => {
     if (!open || !sticky) {
       return;
     }
     function updatePopoverPosition() {
-      const [x, y] = getPopoverPosition(position, anchorElement, popoverRef);
+      const [x, y] = getPopoverPosition(placement, anchorElement, popoverRef);
       setPopoverPosition((prev) => {
         if (prev.x === x && prev.y === y) {
           return prev;
@@ -71,7 +95,7 @@ const Popover = ({
       window.removeEventListener("resize", updatePopoverPosition);
       window.removeEventListener("scroll", updatePopoverPosition);
     };
-  }, [position, anchorElement, open, sticky]);
+  }, [placement, anchorElement, open, sticky]);
   const onAnimationEnd = useCallback(() => {
     if (!open) {
       setVisible(false);
@@ -83,7 +107,7 @@ const Popover = ({
   return /* @__PURE__ */ jsx(
     Box,
     {
-      ref: composeRefs(restProps.ref, popoverRef),
+      ref: composeRefs(ref, popoverRef),
       "data-open": open ? "" : void 0,
       popover: "manual",
       className: classnames(popoverClassName, className),

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

@@ -1,3 +1,40 @@
 export type PopoverPositions = [x: number, y: number];
-export declare function getPopoverPosition(position: 'top' | 'bottom' | 'left' | 'right', anchorRef: React.RefObject<HTMLElement | null>, popoverRef: React.RefObject<HTMLElement | null>): PopoverPositions;
+type PopoverSide = 'top' | 'bottom' | 'left' | 'right';
+type PopoverEdge = 'start' | 'end';
+export type PopoverPlacement = PopoverSide | `${PopoverSide}-${PopoverEdge}`;
+type Rect = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+type Margin = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export type ComputePopoverPositionOptions = {
+    placement: PopoverPlacement;
+    /** The anchor's border box, relative to the viewport */
+    anchor: Rect;
+    /** The popover's untransformed border-box size and its margins */
+    popover: {
+        width: number;
+        height: number;
+        margin: Margin;
+    };
+    viewport: {
+        width: number;
+        height: number;
+        scrollX: number;
+        scrollY: number;
+    };
+};
+/**
+ * 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;
+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,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC7C,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC9C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAC9C,gBAAgB,CAqElB"}
+{"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"}

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/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"}