@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/tooltip/Tooltip.js

@@ -0,0 +1,388 @@
+"use client";
+import { TriggerContext, useTriggerProps } from "../../primitives/TriggerContext.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { usePresence } from "../../primitives/use-presence.js";
+import { TooltipPlacementContext } from "./tooltip-placement.js";
+import { CLOSE_DELAY, RichContext, TooltipContext, TooltipTrigger, useTouchLongPress } from "./tooltip-trigger.js";
+import { tabbables } from "../../utils/focus.js";
+import { Overlay as Overlay$1 } from "../../primitives/Overlay.js";
+import { toAriaPlacement } from "../../utils/placement.js";
+import { richTooltipStyles, tooltipStyles } from "./tooltip-styles.js";
+import { Children, useContext, useEffect, useId, useRef, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps, useInteractOutside, useObjectRef, useOverlayPosition, useOverlayTrigger, usePopover, useTooltip, useTooltipTrigger } from "react-aria";
+import { useOverlayTriggerState, useTooltipTriggerState } from "react-stately";
+//#region src/components/tooltip/Tooltip.tsx
+/** A caret (8px) sits in the gap between the anchor and the tooltip. */
+const offsetFor = (offset, caret) => offset + (caret ? 8 : 0);
+/** Tooltips move off the screen edge in 8px steps (the spec), so keep 8px from it. */
+const CONTAINER_PADDING = 8;
+const subscribeToNothing = () => () => {};
+/**
+* React Aria resolves `start` / `end` from its locale, not the DOM; read the anchor's laid-out
+* direction and turn them into physical sides.
+*/
+function usePhysicalPlacement(placement, triggerRef) {
+	const direction = useSyncExternalStore(subscribeToNothing, () => triggerRef.current ? getComputedStyle(triggerRef.current).direction : "ltr", () => "ltr");
+	return toAriaPlacement(placement, direction === "rtl");
+}
+/**
+* The side to reveal from: React Aria's resolved one, or until it has measured (its first
+* render reports none) the requested side, so the element is inserted with a placement and
+* its `@starting-style` clip applies.
+*/
+function revealSide(resolved, requested) {
+	return resolved ?? requested.split(" ")[0] ?? requested;
+}
+/** The caret points at the anchor from whichever side the tooltip ended up on. */
+function caretStyle(placement, arrow) {
+	const side = placement.split(" ")[0];
+	const rotation = {
+		top: 0,
+		bottom: 180,
+		left: -90,
+		right: 90
+	}[side] ?? 0;
+	const style = {
+		...arrow.style,
+		position: "absolute",
+		rotate: `${rotation}deg`
+	};
+	if (side === "top") style.top = "100%";
+	if (side === "bottom") style.bottom = "100%";
+	if (side === "left") style.left = "calc(100% - 4px)";
+	if (side === "right") style.right = "calc(100% - 4px)";
+	if (side === "top" || side === "bottom") style.marginInlineStart = -8;
+	else style.marginTop = -4;
+	return style;
+}
+/** M3 plain tooltip: a short label in `inverse-surface`, inside a {@link TooltipTrigger}. */
+function Tooltip(props) {
+	const context = useContext(TooltipContext);
+	if (!context) throw new Error("Tooltip must be rendered inside a TooltipTrigger");
+	const { isPresent, isExiting, exitProps } = usePresence(context.state.isOpen);
+	if (!isPresent) return null;
+	return /* @__PURE__ */ jsx(Overlay$1, {
+		exiting: isExiting,
+		topLayer: true,
+		children: /* @__PURE__ */ jsx(TooltipPopup, {
+			...props,
+			context,
+			isExiting,
+			exitProps
+		})
+	});
+}
+function TooltipPopup({ children, caret = false, className, style, ref, classNames, context, isExiting, exitProps, ...rest }) {
+	const overlayRef = useObjectRef(ref);
+	const { tooltipProps } = useTooltip(context.tooltipProps, context.state);
+	const requested = usePhysicalPlacement(context.placement, context.triggerRef);
+	const { overlayProps, arrowProps, placement } = useOverlayPosition({
+		targetRef: context.triggerRef,
+		overlayRef,
+		placement: requested,
+		offset: offsetFor(context.offset, caret),
+		containerPadding: CONTAINER_PADDING,
+		isOpen: true,
+		onClose: () => context.state.close(true)
+	});
+	const side = revealSide(placement, requested);
+	const styles = tooltipStyles();
+	const { "data-tokens": appTokens, ...dom } = rest;
+	return /* @__PURE__ */ jsx("div", {
+		...mergeProps(dom, overlayProps),
+		style: {
+			...style,
+			...overlayProps.style
+		},
+		ref: overlayRef,
+		"data-overlay-placement": "",
+		className: styles.positioner({ class: className }),
+		children: /* @__PURE__ */ jsxs("div", {
+			...mergeProps(tooltipProps, exitProps),
+			"data-tokens": mergeDataTokens("md-comp-plain-tooltip", { "data-tokens": appTokens ?? tooltipProps["data-tokens"] }),
+			"data-placement": side,
+			"data-exiting": isExiting || void 0,
+			className: styles.panel({ class: classNames?.panel }),
+			children: [children, caret && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				style: caretStyle(side, arrowProps),
+				className: styles.caret({ class: classNames?.caret })
+			})]
+		})
+	});
+}
+/**
+* Shows a {@link RichTooltip} for its trigger. Transient by default (hover, keyboard focus or a
+* touch long press; it stays while hovered or focused within and leaves 1.5s later), or
+* `persistent`: opened by a press and kept until the trigger is pressed again, Escape, or a
+* press anywhere outside it. Focus stays on the trigger, and Tab moves on into the tooltip.
+* Use `persistent` when the tooltip holds actions keyboard users must reach.
+*/
+function RichTooltipTrigger({ persistent = false, ...props }) {
+	return persistent ? /* @__PURE__ */ jsx(PersistentRichTrigger, { ...props }) : /* @__PURE__ */ jsx(TransientRichTrigger, { ...props });
+}
+function PersistentRichTrigger({ children, placement = "bottom-start", offset = 4, disabled = false, open, defaultOpen, onOpenChange }) {
+	const state = useOverlayTriggerState({
+		isOpen: open,
+		defaultOpen,
+		onOpenChange
+	});
+	const triggerRef = useRef(null);
+	const { triggerProps, overlayProps } = useOverlayTrigger({ type: "dialog" }, state, triggerRef);
+	const triggerValue = useTriggerProps({
+		...disabled ? {} : triggerProps,
+		ref: triggerRef
+	});
+	const [trigger, ...tooltip] = Children.toArray(children);
+	return /* @__PURE__ */ jsxs(RichContext, {
+		value: {
+			persistent: true,
+			state,
+			triggerRef,
+			overlayProps,
+			placement,
+			offset
+		},
+		children: [/* @__PURE__ */ jsx(TriggerContext, {
+			value: triggerValue,
+			children: trigger
+		}), tooltip]
+	});
+}
+function TransientRichTrigger({ children, placement = "bottom-start", offset = 4, delay = 0, closeDelay = CLOSE_DELAY, disabled, open, defaultOpen, onOpenChange }) {
+	const options = {
+		delay,
+		closeDelay,
+		isDisabled: disabled,
+		isOpen: open,
+		defaultOpen,
+		onOpenChange
+	};
+	const state = useTooltipTriggerState(options);
+	const triggerRef = useRef(null);
+	const { triggerProps, tooltipProps } = useTooltipTrigger(options, state, triggerRef);
+	const longPressProps = useTouchLongPress(() => state.open(true), () => state.close(), disabled);
+	const triggerValue = useTriggerProps({
+		...mergeProps(triggerProps, longPressProps),
+		ref: triggerRef
+	});
+	const [trigger, ...tooltip] = Children.toArray(children);
+	return /* @__PURE__ */ jsxs(RichContext, {
+		value: {
+			persistent: false,
+			state,
+			triggerRef,
+			tooltipProps,
+			placement,
+			offset
+		},
+		children: [/* @__PURE__ */ jsx(TriggerContext, {
+			value: triggerValue,
+			children: trigger
+		}), tooltip]
+	});
+}
+/**
+* M3 rich tooltip: a subhead, supporting text and an optional action on
+* `surface-container`, inside a {@link RichTooltipTrigger}. A transient one is a
+* `role="tooltip"` describing its trigger; a persistent one is a non-modal popover dialog.
+*
+* @example
+* <RichTooltipTrigger>
+*   <Button variant="text">What's this?</Button>
+*   <RichTooltip title="Grouped tabs">Tabs with the same site stay together.</RichTooltip>
+* </RichTooltipTrigger>
+*/
+function RichTooltip(props) {
+	const context = useContext(RichContext);
+	if (!context) throw new Error("RichTooltip must be rendered inside a RichTooltipTrigger");
+	const { isPresent, isExiting, exitProps } = usePresence(context.state.isOpen);
+	if (!isPresent) return null;
+	const shared = {
+		isExiting,
+		exitProps
+	};
+	return /* @__PURE__ */ jsx(Overlay$1, {
+		exiting: isExiting,
+		topLayer: true,
+		disableFocusManagement: context.persistent,
+		children: context.persistent ? /* @__PURE__ */ jsx(PersistentRichPopup, {
+			...props,
+			...shared,
+			context
+		}) : /* @__PURE__ */ jsx(TransientRichPopup, {
+			...props,
+			...shared,
+			context
+		})
+	});
+}
+function PersistentRichPopup({ context, isExiting, exitProps, ...props }) {
+	const popoverRef = useObjectRef(props.ref);
+	const titleId = useId();
+	const requested = usePhysicalPlacement(context.placement, context.triggerRef);
+	const { state, triggerRef } = context;
+	const isOutside = (element) => !triggerRef.current?.contains(element);
+	const { popoverProps, arrowProps, placement } = usePopover({
+		triggerRef,
+		popoverRef,
+		placement: requested,
+		offset: offsetFor(context.offset, props.caret ?? false),
+		containerPadding: CONTAINER_PADDING,
+		isNonModal: true,
+		isKeyboardDismissDisabled: false,
+		shouldCloseOnInteractOutside: isOutside
+	}, state);
+	useInteractOutside({
+		ref: popoverRef,
+		isDisabled: isExiting,
+		onInteractOutside: (event) => {
+			if (isOutside(event.target)) state.close();
+		}
+	});
+	useTabOrderAfterTrigger(popoverRef, triggerRef, state, isExiting);
+	const dialogProps = {
+		role: "dialog",
+		tabIndex: -1,
+		...props.title != null ? { "aria-labelledby": titleId } : { "aria-label": props["aria-label"] }
+	};
+	return /* @__PURE__ */ jsx(RichBody, {
+		...props,
+		popupRef: popoverRef,
+		titleId,
+		positionProps: popoverProps,
+		domProps: mergeProps(dialogProps, context.overlayProps, exitProps),
+		placement: revealSide(placement, requested),
+		arrowProps,
+		isExiting
+	});
+}
+/**
+* Puts a persistent rich tooltip next in the Tab order after its trigger, though it's
+* portalled to the end of the document (the spec: focus goes parent element → link → button,
+* and people "move linearly through the rest of the page"). Tab from the trigger enters it,
+* Tab from its last control goes on to whatever follows the trigger, and Shift+Tab reverses
+* both. Escape on the trigger or inside closes it, putting focus back on the trigger.
+*/
+function useTabOrderAfterTrigger(popoverRef, triggerRef, state, isExiting) {
+	useEffect(() => {
+		if (isExiting) return;
+		const onKeyDown = (event) => {
+			const popover = popoverRef.current;
+			const trigger = triggerRef.current;
+			if (event.defaultPrevented || !popover || !trigger) return;
+			const active = document.activeElement;
+			const onTrigger = active === trigger;
+			if (event.key === "Escape" && (onTrigger || popover.contains(active))) {
+				event.preventDefault();
+				event.stopPropagation();
+				state.close();
+				trigger.focus();
+				return;
+			}
+			if (event.key !== "Tab" || event.altKey || event.ctrlKey || event.metaKey) return;
+			const inside = tabbables(popover);
+			if (inside.length === 0) return;
+			const following = () => tabbables(document.body, (el) => popover.contains(el) || trigger.contains(el)).find((el) => trigger.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING);
+			let target;
+			if (!event.shiftKey) {
+				if (onTrigger) target = inside[0];
+				else if (active === inside.at(-1)) target = following();
+			} else if (active === inside[0]) target = trigger;
+			else if (active instanceof HTMLElement && active === following()) target = inside.at(-1);
+			if (!target) return;
+			event.preventDefault();
+			target.focus();
+		};
+		document.addEventListener("keydown", onKeyDown, true);
+		return () => document.removeEventListener("keydown", onKeyDown, true);
+	}, [
+		popoverRef,
+		triggerRef,
+		state,
+		isExiting
+	]);
+}
+function TransientRichPopup({ context, isExiting, exitProps, ...props }) {
+	const overlayRef = useObjectRef(props.ref);
+	const titleId = useId();
+	const { state } = context;
+	const { tooltipProps } = useTooltip(context.tooltipProps, state);
+	const requested = usePhysicalPlacement(context.placement, context.triggerRef);
+	const { overlayProps, arrowProps, placement } = useOverlayPosition({
+		targetRef: context.triggerRef,
+		overlayRef,
+		placement: requested,
+		offset: offsetFor(context.offset, props.caret ?? false),
+		containerPadding: CONTAINER_PADDING,
+		isOpen: true,
+		onClose: () => state.close(true)
+	});
+	const focusProps = {
+		onFocus: () => state.open(true),
+		onBlur: (event) => {
+			if (!event.currentTarget.contains(event.relatedTarget)) state.close();
+		}
+	};
+	return /* @__PURE__ */ jsx(RichBody, {
+		...props,
+		popupRef: overlayRef,
+		titleId,
+		positionProps: overlayProps,
+		domProps: mergeProps(tooltipProps, focusProps, exitProps),
+		placement: revealSide(placement, requested),
+		arrowProps,
+		isExiting
+	});
+}
+function RichBody({ children, title, action, caret = false, className, style, classNames, popupRef, titleId, positionProps, domProps, placement, arrowProps, isExiting, ...rest }) {
+	const styles = richTooltipStyles({
+		subhead: title != null,
+		action: action != null
+	});
+	const { "data-tokens": appTokens, "aria-label": _label, ref: _ref, ...dom } = rest;
+	return /* @__PURE__ */ jsx("div", {
+		...mergeProps(dom, positionProps),
+		style: {
+			...style,
+			...positionProps.style
+		},
+		ref: popupRef,
+		"data-overlay-placement": "",
+		className: styles.positioner({ class: className }),
+		children: /* @__PURE__ */ jsxs("div", {
+			...domProps,
+			"data-tokens": mergeDataTokens("md-comp-rich-tooltip", { "data-tokens": appTokens ?? domProps["data-tokens"] }),
+			"data-placement": placement,
+			"data-exiting": isExiting || void 0,
+			className: styles.panel({ class: classNames?.panel }),
+			children: [
+				title != null && /* @__PURE__ */ jsx("div", {
+					id: titleId,
+					"data-slot": "subhead",
+					className: styles.title({ class: classNames?.title }),
+					children: title
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"data-slot": "text",
+					className: styles.text({ class: classNames?.text }),
+					children
+				}),
+				action != null && /* @__PURE__ */ jsx("div", {
+					className: styles.actions({ class: classNames?.actions }),
+					children: action
+				}),
+				caret && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					style: caretStyle(placement, arrowProps),
+					className: styles.caret({ class: classNames?.caret })
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { RichTooltip, RichTooltipTrigger, Tooltip, TooltipPlacementContext, TooltipTrigger };
+
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","names":["Overlay"],"sources":["../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Children,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useSyncExternalStore,\n  type CSSProperties,\n  type FocusEvent,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n} from 'react';\nimport {\n  mergeProps,\n  useInteractOutside,\n  useObjectRef,\n  useOverlayPosition,\n  useOverlayTrigger,\n  usePopover,\n  useTooltip,\n  useTooltipTrigger,\n  type Placement,\n} from 'react-aria';\nimport {\n  useOverlayTriggerState,\n  useTooltipTriggerState,\n  type OverlayTriggerState,\n} from 'react-stately';\nimport { Overlay } from '../../primitives/Overlay';\nimport {\n  TriggerContext,\n  useTriggerProps,\n  type TriggerContextValue,\n} from '../../primitives/TriggerContext';\nimport { usePresence } from '../../primitives/use-presence';\nimport { toAriaPlacement } from '../../utils/placement';\nimport { tabbables } from '../../utils/focus';\nimport { richTooltipStyles, tooltipStyles } from './tooltip-styles';\nimport { TooltipPlacementContext, type TooltipPlacement } from './tooltip-placement';\nimport {\n  CLOSE_DELAY,\n  DEFAULT_OFFSET,\n  RichContext,\n  TooltipContext,\n  TooltipTrigger,\n  useInTooltipTrigger,\n  useTouchLongPress,\n  type RichContextValue,\n  type TooltipContextValue,\n  type TooltipTriggerProps,\n} from './tooltip-trigger';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\nimport type { RootDOMProps } from '../../utils/root-props';\n\nexport {\n  TooltipPlacementContext,\n  TooltipTrigger,\n  useInTooltipTrigger,\n  type TooltipPlacement,\n  type TooltipTriggerProps,\n};\n\n/** A caret (8px) sits in the gap between the anchor and the tooltip. */\nconst offsetFor = (offset: number, caret: boolean) => offset + (caret ? 8 : 0);\n\n/** Tooltips move off the screen edge in 8px steps (the spec), so keep 8px from it. */\nconst CONTAINER_PADDING = 8;\n\nconst subscribeToNothing = () => () => {};\n\n/**\n * React Aria resolves `start` / `end` from its locale, not the DOM; read the anchor's laid-out\n * direction and turn them into physical sides.\n */\nfunction usePhysicalPlacement(\n  placement: TooltipPlacement,\n  triggerRef: RefObject<HTMLElement | null>,\n): Placement {\n  const direction = useSyncExternalStore(\n    subscribeToNothing,\n    () => (triggerRef.current ? getComputedStyle(triggerRef.current).direction : 'ltr'),\n    () => 'ltr',\n  );\n  return toAriaPlacement(placement, direction === 'rtl');\n}\n\n/**\n * The side to reveal from: React Aria's resolved one, or until it has measured (its first\n * render reports none) the requested side, so the element is inserted with a placement and\n * its `@starting-style` clip applies.\n */\nfunction revealSide(resolved: string | null | undefined, requested: Placement): string {\n  return resolved ?? requested.split(' ')[0] ?? requested;\n}\n\n/** The caret points at the anchor from whichever side the tooltip ended up on. */\nfunction caretStyle(placement: string, arrow: HTMLAttributes<HTMLElement>) {\n  const side = placement.split(' ')[0];\n  const rotation =\n    { top: 0, bottom: 180, left: -90, right: 90 }[side as 'top' | 'bottom' | 'left' | 'right'] ?? 0;\n  const style: CSSProperties = {\n    ...arrow.style,\n    position: 'absolute',\n    rotate: `${rotation}deg`,\n  };\n  if (side === 'top') style.top = '100%';\n  if (side === 'bottom') style.bottom = '100%';\n  if (side === 'left') style.left = 'calc(100% - 4px)';\n  if (side === 'right') style.right = 'calc(100% - 4px)';\n  // Centre the 16px caret on the arrow position React Aria computed.\n  if (side === 'top' || side === 'bottom') style.marginInlineStart = -8;\n  else style.marginTop = -4;\n  return style;\n}\n\n/* ------------------------------------------------------------------ Plain */\n\nexport interface TooltipClassNames {\n  /** The visible surface: its colour, corners, padding and size. */\n  panel?: string;\n  /** The caret pointing at the anchor. */\n  caret?: string;\n}\n\n/**\n * The outermost element's DOM attributes (`data-*`, `aria-*`, `title`, pointer events). A\n * `data-tokens` value joins the surface's token set instead, where the tokens resolve.\n */\ntype PopupDOMProps = RootDOMProps & {\n  [data: `data-${string}`]: string | number | boolean | undefined;\n};\n\nexport interface TooltipProps extends PopupDOMProps {\n  /** The label: a few words, with no links or buttons (use a rich tooltip for those). */\n  children: ReactNode;\n  /** Draw a 16×8px caret pointing at the anchor. @default false */\n  caret?: boolean;\n  /**\n   * Goes on the outermost element, which React Aria places against the anchor; the surface\n   * inside keeps its size whatever layout class lands here. Style the surface with\n   * `classNames.panel`.\n   */\n  className?: string;\n  /** Inline styles for the outermost element; React Aria's position wins over them. */\n  style?: CSSProperties;\n  /** Ref to the outermost element. */\n  ref?: Ref<HTMLDivElement>;\n  /** Classes for each part, by slot. */\n  classNames?: TooltipClassNames;\n}\n\n/** M3 plain tooltip: a short label in `inverse-surface`, inside a {@link TooltipTrigger}. */\nexport function Tooltip(props: TooltipProps) {\n  const context = useContext(TooltipContext);\n  if (!context) throw new Error('Tooltip must be rendered inside a TooltipTrigger');\n  const { isPresent, isExiting, exitProps } = usePresence(context.state.isOpen);\n  if (!isPresent) return null;\n  return (\n    <Overlay exiting={isExiting} topLayer>\n      <TooltipPopup {...props} context={context} isExiting={isExiting} exitProps={exitProps} />\n    </Overlay>\n  );\n}\n\nfunction TooltipPopup({\n  children,\n  caret = false,\n  className,\n  style,\n  ref,\n  classNames,\n  context,\n  isExiting,\n  exitProps,\n  ...rest\n}: TooltipProps & {\n  context: TooltipContextValue;\n  isExiting: boolean;\n  exitProps: ReturnType<typeof usePresence>['exitProps'];\n}) {\n  const overlayRef = useObjectRef(ref);\n  const { tooltipProps } = useTooltip(context.tooltipProps, context.state);\n  const requested = usePhysicalPlacement(context.placement, context.triggerRef);\n  const { overlayProps, arrowProps, placement } = useOverlayPosition({\n    targetRef: context.triggerRef,\n    overlayRef,\n    placement: requested,\n    offset: offsetFor(context.offset, caret),\n    containerPadding: CONTAINER_PADDING,\n    isOpen: true,\n    // Without its own `onClose`, React Aria's close on scroll falls back to the close of\n    // whatever overlay trigger last registered the same element, so a scroll while a menu\n    // trigger's tooltip is shown or leaving closed the menu it had just opened.\n    onClose: () => context.state.close(true),\n  });\n  const side = revealSide(placement, requested);\n  const styles = tooltipStyles();\n  const { 'data-tokens': appTokens, ...dom } = rest;\n  return (\n    <div\n      {...mergeProps(dom, overlayProps)}\n      style={{ ...style, ...overlayProps.style }}\n      ref={overlayRef}\n      // Only React Aria's insets apply (styles/utilities.css).\n      data-overlay-placement=\"\"\n      className={styles.positioner({ class: className })}\n    >\n      <div\n        {...mergeProps(tooltipProps, exitProps)}\n        // The component tokens' hook (tooltip-tokens.ts).\n        data-tokens={mergeDataTokens('md-comp-plain-tooltip', {\n          'data-tokens': appTokens ?? (tooltipProps as { 'data-tokens'?: unknown })['data-tokens'],\n        })}\n        data-placement={side}\n        data-exiting={isExiting || undefined}\n        className={styles.panel({ class: classNames?.panel })}\n      >\n        {children}\n        {caret && (\n          <span\n            aria-hidden=\"true\"\n            style={caretStyle(side, arrowProps)}\n            className={styles.caret({ class: classNames?.caret })}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n\n/* ------------------------------------------------------------------- Rich */\n\nexport interface RichTooltipTriggerProps {\n  /** The trigger (a library button), then a `<RichTooltip>`. */\n  children: ReactNode;\n  /**\n   * A persistent rich tooltip opens when the trigger is pressed and stays, even after the\n   * pointer leaves, until the trigger is pressed again, Escape, or a press anywhere outside it\n   * (on another element or on empty space), or focus moving to another element. It's a\n   * non-modal dialog: opening it leaves focus on the trigger, and it comes next in the Tab\n   * order (trigger → its links and buttons → the rest of the page) without trapping focus.\n   * A transient one (the spec's default) works like a plain tooltip: hover, focus\n   * or a touch long press opens it, and it leaves 1.5s after the pointer or focus does.\n   * @default false\n   */\n  persistent?: boolean;\n  /** Bottom right of the anchor in left-to-right layouts (the spec). @default \"bottom-start\" */\n  placement?: TooltipPlacement;\n  /** Distance from the anchor in px. @default 4 */\n  offset?: number;\n  /** Milliseconds of hover before a transient tooltip shows. @default 0 */\n  delay?: number;\n  /** Milliseconds before a transient tooltip hides after the pointer leaves. @default 1500 */\n  closeDelay?: number;\n  /**\n   * The trigger opens nothing: a transient tooltip ignores hover, focus and long press, and a\n   * persistent one's trigger works as a plain button, without `aria-expanded`. @default false\n   */\n  disabled?: boolean;\n  /** Whether the tooltip is shown (controlled). */\n  open?: boolean;\n  /** Whether the tooltip starts shown when uncontrolled. @default false */\n  defaultOpen?: boolean;\n  /** Called when the tooltip shows or hides. */\n  onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * Shows a {@link RichTooltip} for its trigger. Transient by default (hover, keyboard focus or a\n * touch long press; it stays while hovered or focused within and leaves 1.5s later), or\n * `persistent`: opened by a press and kept until the trigger is pressed again, Escape, or a\n * press anywhere outside it. Focus stays on the trigger, and Tab moves on into the tooltip.\n * Use `persistent` when the tooltip holds actions keyboard users must reach.\n */\nexport function RichTooltipTrigger({ persistent = false, ...props }: RichTooltipTriggerProps) {\n  return persistent ? <PersistentRichTrigger {...props} /> : <TransientRichTrigger {...props} />;\n}\n\nfunction PersistentRichTrigger({\n  children,\n  placement = 'bottom-start',\n  offset = DEFAULT_OFFSET,\n  disabled = false,\n  open,\n  defaultOpen,\n  onOpenChange,\n}: Omit<RichTooltipTriggerProps, 'persistent'>) {\n  const state = useOverlayTriggerState({ isOpen: open, defaultOpen, onOpenChange });\n  const triggerRef = useRef<HTMLElement>(null);\n  const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef);\n  const triggerValue = useTriggerProps({\n    ...(disabled ? {} : (triggerProps as TriggerContextValue)),\n    ref: triggerRef,\n  });\n  const [trigger, ...tooltip] = Children.toArray(children);\n  return (\n    <RichContext value={{ persistent: true, state, triggerRef, overlayProps, placement, offset }}>\n      <TriggerContext value={triggerValue}>{trigger}</TriggerContext>\n      {tooltip}\n    </RichContext>\n  );\n}\n\nfunction TransientRichTrigger({\n  children,\n  placement = 'bottom-start',\n  offset = DEFAULT_OFFSET,\n  delay = 0,\n  closeDelay = CLOSE_DELAY,\n  disabled,\n  open,\n  defaultOpen,\n  onOpenChange,\n}: Omit<RichTooltipTriggerProps, 'persistent'>) {\n  const options = {\n    delay,\n    closeDelay,\n    isDisabled: disabled,\n    isOpen: open,\n    defaultOpen,\n    onOpenChange,\n  };\n  const state = useTooltipTriggerState(options);\n  const triggerRef = useRef<HTMLElement>(null);\n  const { triggerProps, tooltipProps } = useTooltipTrigger(options, state, triggerRef);\n  const longPressProps = useTouchLongPress(\n    () => state.open(true),\n    () => state.close(),\n    disabled,\n  );\n  const triggerValue = useTriggerProps({\n    ...(mergeProps(triggerProps, longPressProps) as TriggerContextValue),\n    ref: triggerRef,\n  });\n  const [trigger, ...tooltip] = Children.toArray(children);\n  return (\n    <RichContext value={{ persistent: false, state, triggerRef, tooltipProps, placement, offset }}>\n      <TriggerContext value={triggerValue}>{trigger}</TriggerContext>\n      {tooltip}\n    </RichContext>\n  );\n}\n\nexport interface RichTooltipClassNames {\n  /** The visible surface: its colour, corners, padding, size and shadow. */\n  panel?: string;\n  /** The subhead. */\n  title?: string;\n  /** The supporting text. */\n  text?: string;\n  /** The row holding the action(s). */\n  actions?: string;\n  /** The caret pointing at the anchor. */\n  caret?: string;\n}\n\nexport interface RichTooltipProps extends Omit<PopupDOMProps, 'title'> {\n  /** Supporting text. */\n  children: ReactNode;\n  /** Subhead; it also names a persistent tooltip. */\n  title?: ReactNode;\n  /** Action(s), usually a text `Button`. */\n  action?: ReactNode;\n  /** Name of a persistent tooltip when there is no `title`. */\n  'aria-label'?: string;\n  /** Draw a 16×8px caret pointing at the anchor. @default false */\n  caret?: boolean;\n  /**\n   * Goes on the outermost element, which React Aria places against the anchor; the surface\n   * inside keeps its size whatever layout class lands here. Style the surface with\n   * `classNames.panel`.\n   */\n  className?: string;\n  /** Inline styles for the outermost element; React Aria's position wins over them. */\n  style?: CSSProperties;\n  /** Ref to the outermost element. */\n  ref?: Ref<HTMLDivElement>;\n  /** Classes for each part, by slot. */\n  classNames?: RichTooltipClassNames;\n}\n\n/**\n * M3 rich tooltip: a subhead, supporting text and an optional action on\n * `surface-container`, inside a {@link RichTooltipTrigger}. A transient one is a\n * `role=\"tooltip\"` describing its trigger; a persistent one is a non-modal popover dialog.\n *\n * @example\n * <RichTooltipTrigger>\n *   <Button variant=\"text\">What's this?</Button>\n *   <RichTooltip title=\"Grouped tabs\">Tabs with the same site stay together.</RichTooltip>\n * </RichTooltipTrigger>\n */\nexport function RichTooltip(props: RichTooltipProps) {\n  const context = useContext(RichContext);\n  if (!context) throw new Error('RichTooltip must be rendered inside a RichTooltipTrigger');\n  const { isPresent, isExiting, exitProps } = usePresence(context.state.isOpen);\n  if (!isPresent) return null;\n  const shared = { isExiting, exitProps };\n  return (\n    // A persistent one handles its own Tab order and focus return (`useTabOrderAfterTrigger`):\n    // the overlay's restoring focus scope would send Shift+Tab from its first control to\n    // whatever precedes the trigger.\n    <Overlay exiting={isExiting} topLayer disableFocusManagement={context.persistent}>\n      {context.persistent ? (\n        <PersistentRichPopup {...props} {...shared} context={context} />\n      ) : (\n        <TransientRichPopup {...props} {...shared} context={context} />\n      )}\n    </Overlay>\n  );\n}\n\ntype PopupProps<Context> = RichTooltipProps & {\n  context: Context;\n  isExiting: boolean;\n  exitProps: ReturnType<typeof usePresence>['exitProps'];\n};\n\nfunction PersistentRichPopup({\n  context,\n  isExiting,\n  exitProps,\n  ...props\n}: PopupProps<Extract<RichContextValue, { persistent: true }>>) {\n  const popoverRef = useObjectRef(props.ref);\n  const titleId = useId();\n  const requested = usePhysicalPlacement(context.placement, context.triggerRef);\n  const { state, triggerRef } = context;\n  // The trigger toggles it itself: focus or a press moving to it isn't \"outside\".\n  const isOutside = (element: Element | null) => !triggerRef.current?.contains(element);\n  const { popoverProps, arrowProps, placement } = usePopover(\n    {\n      triggerRef,\n      popoverRef,\n      placement: requested,\n      offset: offsetFor(context.offset, props.caret ?? false),\n      containerPadding: CONTAINER_PADDING,\n      isNonModal: true,\n      isKeyboardDismissDisabled: false,\n      shouldCloseOnInteractOutside: isOutside,\n    },\n    state,\n  );\n  // \"They only disappear once a person interacts with another UI element\": a press anywhere\n  // else closes it, which a non-modal popover doesn't do on its own.\n  useInteractOutside({\n    ref: popoverRef,\n    isDisabled: isExiting,\n    onInteractOutside: (event) => {\n      if (isOutside(event.target as Element | null)) state.close();\n    },\n  });\n  useTabOrderAfterTrigger(popoverRef, triggerRef, state, isExiting);\n  // A non-modal dialog (no `aria-modal`), named by its subhead. Not React Aria's `useDialog`,\n  // which moves focus into it: focus stays on the trigger. `tabIndex={-1}` (not in the Tab\n  // order) lets a press on its text take focus, so Escape still closes it then.\n  const dialogProps = {\n    role: 'dialog',\n    tabIndex: -1,\n    ...(props.title != null\n      ? { 'aria-labelledby': titleId }\n      : { 'aria-label': props['aria-label'] }),\n  };\n  return (\n    <RichBody\n      {...props}\n      popupRef={popoverRef}\n      titleId={titleId}\n      positionProps={popoverProps}\n      domProps={mergeProps(dialogProps, context.overlayProps, exitProps)}\n      placement={revealSide(placement, requested)}\n      arrowProps={arrowProps}\n      isExiting={isExiting}\n    />\n  );\n}\n\n/**\n * Puts a persistent rich tooltip next in the Tab order after its trigger, though it's\n * portalled to the end of the document (the spec: focus goes parent element → link → button,\n * and people \"move linearly through the rest of the page\"). Tab from the trigger enters it,\n * Tab from its last control goes on to whatever follows the trigger, and Shift+Tab reverses\n * both. Escape on the trigger or inside closes it, putting focus back on the trigger.\n */\nfunction useTabOrderAfterTrigger(\n  popoverRef: RefObject<HTMLElement | null>,\n  triggerRef: RefObject<HTMLElement | null>,\n  state: OverlayTriggerState,\n  isExiting: boolean,\n) {\n  useEffect(() => {\n    if (isExiting) return;\n    const onKeyDown = (event: KeyboardEvent) => {\n      const popover = popoverRef.current;\n      const trigger = triggerRef.current;\n      if (event.defaultPrevented || !popover || !trigger) return;\n      const active = document.activeElement;\n      const onTrigger = active === trigger;\n      if (event.key === 'Escape' && (onTrigger || popover.contains(active))) {\n        // Before any enclosing overlay (a dialog) sees it: the tooltip is on top.\n        event.preventDefault();\n        event.stopPropagation();\n        state.close();\n        trigger.focus();\n        return;\n      }\n      if (event.key !== 'Tab' || event.altKey || event.ctrlKey || event.metaKey) return;\n      const inside = tabbables(popover);\n      if (inside.length === 0) return;\n      // The first tabbable after the trigger in the page, leaving the tooltip out.\n      const following = () =>\n        tabbables(document.body, (el) => popover.contains(el) || trigger.contains(el)).find(\n          (el) => trigger.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING,\n        );\n      let target: HTMLElement | undefined;\n      if (!event.shiftKey) {\n        if (onTrigger) target = inside[0];\n        else if (active === inside.at(-1)) target = following();\n      } else if (active === inside[0]) target = trigger;\n      else if (active instanceof HTMLElement && active === following()) target = inside.at(-1);\n      if (!target) return;\n      event.preventDefault();\n      target.focus();\n    };\n    // Capture: before the trigger's and the popover's own key handling.\n    document.addEventListener('keydown', onKeyDown, true);\n    return () => document.removeEventListener('keydown', onKeyDown, true);\n  }, [popoverRef, triggerRef, state, isExiting]);\n}\n\nfunction TransientRichPopup({\n  context,\n  isExiting,\n  exitProps,\n  ...props\n}: PopupProps<Extract<RichContextValue, { persistent: false }>>) {\n  const overlayRef = useObjectRef(props.ref);\n  const titleId = useId();\n  const { state } = context;\n  const { tooltipProps } = useTooltip(context.tooltipProps, state);\n  const requested = usePhysicalPlacement(context.placement, context.triggerRef);\n  const { overlayProps, arrowProps, placement } = useOverlayPosition({\n    targetRef: context.triggerRef,\n    overlayRef,\n    placement: requested,\n    offset: offsetFor(context.offset, props.caret ?? false),\n    containerPadding: CONTAINER_PADDING,\n    isOpen: true,\n    // Its own close on scroll, never a menu's sharing the trigger (see `TooltipPopup`).\n    onClose: () => state.close(true),\n  });\n  // It may hold an action: stay open while focus is inside, and leave after focus does.\n  const focusProps = {\n    onFocus: () => state.open(true),\n    onBlur: (event: FocusEvent<HTMLElement>) => {\n      if (!event.currentTarget.contains(event.relatedTarget as Node | null)) state.close();\n    },\n  };\n  return (\n    <RichBody\n      {...props}\n      popupRef={overlayRef}\n      titleId={titleId}\n      positionProps={overlayProps}\n      domProps={mergeProps(tooltipProps, focusProps, exitProps)}\n      placement={revealSide(placement, requested)}\n      arrowProps={arrowProps}\n      isExiting={isExiting}\n    />\n  );\n}\n\nfunction RichBody({\n  children,\n  title,\n  action,\n  caret = false,\n  className,\n  style,\n  classNames,\n  popupRef,\n  titleId,\n  positionProps,\n  domProps,\n  placement,\n  arrowProps,\n  isExiting,\n  ...rest\n}: RichTooltipProps & {\n  popupRef: RefObject<HTMLDivElement | null>;\n  titleId: string;\n  /** React Aria's placement, for the outermost element. */\n  positionProps: HTMLAttributes<HTMLElement>;\n  /** The surface's role, naming, focus and exit props. */\n  domProps: HTMLAttributes<HTMLElement>;\n  placement: string;\n  arrowProps: HTMLAttributes<HTMLElement>;\n  isExiting: boolean;\n}) {\n  const styles = richTooltipStyles({ subhead: title != null, action: action != null });\n  // The ref already reached `popupRef`, and `aria-label` names the dialog through `domProps`.\n  const { 'data-tokens': appTokens, 'aria-label': _label, ref: _ref, ...dom } = rest;\n  return (\n    <div\n      {...mergeProps(dom, positionProps)}\n      style={{ ...style, ...positionProps.style }}\n      ref={popupRef}\n      data-overlay-placement=\"\"\n      className={styles.positioner({ class: className })}\n    >\n      <div\n        {...domProps}\n        // The component tokens' hook (tooltip-tokens.ts).\n        data-tokens={mergeDataTokens('md-comp-rich-tooltip', {\n          'data-tokens': appTokens ?? (domProps as { 'data-tokens'?: unknown })['data-tokens'],\n        })}\n        data-placement={placement}\n        data-exiting={isExiting || undefined}\n        className={styles.panel({ class: classNames?.panel })}\n      >\n        {title != null && (\n          <div\n            id={titleId}\n            data-slot=\"subhead\"\n            className={styles.title({ class: classNames?.title })}\n          >\n            {title}\n          </div>\n        )}\n        <div data-slot=\"text\" className={styles.text({ class: classNames?.text })}>\n          {children}\n        </div>\n        {action != null && (\n          <div className={styles.actions({ class: classNames?.actions })}>{action}</div>\n        )}\n        {caret && (\n          <span\n            aria-hidden=\"true\"\n            style={caretStyle(placement, arrowProps)}\n            className={styles.caret({ class: classNames?.caret })}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/tooltip/lazy-tooltip.js

@@ -0,0 +1,35 @@
+"use client";
+import { onDemand, usePreloadOnIntent } from "../../utils/load-on-demand.js";
+import { TooltipContext } from "./tooltip-trigger.js";
+import { useContext, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/tooltip/lazy-tooltip.tsx
+const tooltip = onDemand(() => import("./Tooltip.js").then((module) => module.Tooltip));
+tooltip.preload;
+/**
+* A plain `Tooltip` whose module loads on demand, for components that show a tooltip of their
+* own (an icon button's label, a FAB's): it only appears on hover, keyboard focus or a touch
+* long press, so a page of buttons doesn't carry the tooltip's code up front. It goes inside a
+* `TooltipTrigger` from `./tooltip-trigger`, which works as before: the trigger's state,
+* naming and keyboard handling are all there from the first render.
+*
+* The module starts loading when the pointer moves over the trigger or focus enters it, and
+* at the latest when the tooltip opens; once loaded, every tooltip opens at once. Until the
+* tooltip first opens it renders nothing; if it opens before the module arrives it shows once
+* loaded. Once opened it stays mounted, so it can play its exit. Server rendering is
+* unchanged: a tooltip is never open there.
+*/
+function LazyTooltip(props) {
+	const context = useContext(TooltipContext);
+	if (!context) throw new Error("Tooltip must be rendered inside a TooltipTrigger");
+	const isOpen = context.state.isOpen;
+	const [opened, setOpened] = useState(isOpen);
+	if (isOpen && !opened) setOpened(true);
+	usePreloadOnIntent(context.triggerRef, tooltip.preload, !opened);
+	if (!opened) return null;
+	return /* @__PURE__ */ jsx(tooltip.Component, { ...props });
+}
+//#endregion
+export { LazyTooltip };
+
+//# sourceMappingURL=lazy-tooltip.js.map

package/dist/components/tooltip/lazy-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy-tooltip.js","names":[],"sources":["../../../src/components/tooltip/lazy-tooltip.tsx"],"sourcesContent":["'use client';\n\nimport { useContext, useState } from 'react';\nimport { onDemand, usePreloadOnIntent } from '../../utils/load-on-demand';\nimport type { TooltipProps } from './Tooltip';\nimport { TooltipContext } from './tooltip-trigger';\n\nconst tooltip = onDemand<TooltipProps>(() => import('./Tooltip').then((module) => module.Tooltip));\n\n/** Starts loading the `Tooltip` module, once; later calls return the same promise. */\nexport const preloadTooltip = tooltip.preload;\n\n/**\n * A plain `Tooltip` whose module loads on demand, for components that show a tooltip of their\n * own (an icon button's label, a FAB's): it only appears on hover, keyboard focus or a touch\n * long press, so a page of buttons doesn't carry the tooltip's code up front. It goes inside a\n * `TooltipTrigger` from `./tooltip-trigger`, which works as before: the trigger's state,\n * naming and keyboard handling are all there from the first render.\n *\n * The module starts loading when the pointer moves over the trigger or focus enters it, and\n * at the latest when the tooltip opens; once loaded, every tooltip opens at once. Until the\n * tooltip first opens it renders nothing; if it opens before the module arrives it shows once\n * loaded. Once opened it stays mounted, so it can play its exit. Server rendering is\n * unchanged: a tooltip is never open there.\n */\nexport function LazyTooltip(props: TooltipProps) {\n  const context = useContext(TooltipContext);\n  if (!context) throw new Error('Tooltip must be rendered inside a TooltipTrigger');\n  const isOpen = context.state.isOpen;\n  const [opened, setOpened] = useState(isOpen);\n  // Set during render, so the first open renders the tooltip in the same pass.\n  if (isOpen && !opened) setOpened(true);\n\n  // Until it first opens; after that the module is loading or in.\n  usePreloadOnIntent(context.triggerRef, tooltip.preload, !opened);\n\n  if (!opened) return null;\n  return <tooltip.Component {...props} />;\n}\n"],"mappings":";;;;;;AAOA,MAAM,UAAU,eAA6B,OAAO,eAAY,CAAC,MAAM,WAAW,OAAO,OAAO,CAAC;AAGnE,QAAQ;;;;;;;;;;;;;;AAetC,SAAgB,YAAY,OAAqB;CAC/C,MAAM,UAAU,WAAW,cAAc;CACzC,IAAI,CAAC,SAAS,MAAM,IAAI,MAAM,kDAAkD;CAChF,MAAM,SAAS,QAAQ,MAAM;CAC7B,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAE3C,IAAI,UAAU,CAAC,QAAQ,UAAU,IAAI;CAGrC,mBAAmB,QAAQ,YAAY,QAAQ,SAAS,CAAC,MAAM;CAE/D,IAAI,CAAC,QAAQ,OAAO;CACpB,OAAO,oBAAC,QAAQ,WAAT,EAAmB,GAAI,MAAQ,CAAA;AACxC"}

package/dist/components/tooltip/tooltip-placement.d.ts

@@ -0,0 +1,16 @@
+//#region src/components/tooltip/tooltip-placement.d.ts
+/**
+ * Where a tooltip sits against its anchor. `start` / `end` follow the text direction; a
+ * second part aligns the tooltip with that edge of the anchor (`bottom-start` sits below,
+ * extending towards the end). Tooltips flip when there's no room.
+ */
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right' | 'start' | 'end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+/**
+ * The default placement of the plain tooltips inside, where a container calls for one other
+ * than `top`. App bars provide `bottom` (the spec: "If the element is in an app bar, the plain
+ * tooltip appears below the element"), so their icon buttons' tooltips open below. A
+ * trigger's own `placement` wins.
+ */
+export declare const TooltipPlacementContext: import("react").Context<TooltipPlacement | null>;
+//#endregion
+//# sourceMappingURL=tooltip-placement.d.ts.map

package/dist/components/tooltip/tooltip-placement.js

@@ -0,0 +1,14 @@
+"use client";
+import { createContext } from "react";
+//#region src/components/tooltip/tooltip-placement.ts
+/**
+* The default placement of the plain tooltips inside, where a container calls for one other
+* than `top`. App bars provide `bottom` (the spec: "If the element is in an app bar, the plain
+* tooltip appears below the element"), so their icon buttons' tooltips open below. A
+* trigger's own `placement` wins.
+*/
+const TooltipPlacementContext = createContext(null);
+//#endregion
+export { TooltipPlacementContext };
+
+//# sourceMappingURL=tooltip-placement.js.map

package/dist/components/tooltip/tooltip-placement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-placement.js","names":[],"sources":["../../../src/components/tooltip/tooltip-placement.ts"],"sourcesContent":["'use client';\n\nimport { createContext } from 'react';\n\n/**\n * Where a tooltip sits against its anchor. `start` / `end` follow the text direction; a\n * second part aligns the tooltip with that edge of the anchor (`bottom-start` sits below,\n * extending towards the end). Tooltips flip when there's no room.\n */\nexport type TooltipPlacement =\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'start'\n  | 'end'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom-end';\n\n/**\n * The default placement of the plain tooltips inside, where a container calls for one other\n * than `top`. App bars provide `bottom` (the spec: \"If the element is in an app bar, the plain\n * tooltip appears below the element\"), so their icon buttons' tooltips open below. A\n * trigger's own `placement` wins.\n */\nexport const TooltipPlacementContext = createContext<TooltipPlacement | null>(null);\n"],"mappings":";;;;;;;;;AA2BA,MAAa,0BAA0B,cAAuC,IAAI"}