@tanishqkancharla/maui 0.0.50 → 0.0.52

package/dist/components/Tooltip.d.ts

@@ -3,8 +3,11 @@ type TooltipPlacement = "top" | "bottom" | "left" | "right";
 type TooltipProps = {
     /** The content shown inside the tooltip. */
     content: React.ReactNode;
-    /** The trigger element. Must contain something focusable (e.g. a button). */
-    children: React.ReactNode;
+    /**
+     * The trigger: one focusable element, such as a Button, that forwards its
+     * ref and passes event handlers and ARIA props to the DOM.
+     */
+    children: React.ReactElement;
     placement?: TooltipPlacement;
     /** Warmup delay in ms before the tooltip shows on hover. */
     delay?: number;

package/dist/components/Tooltip.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
-import { mergeProps, useOverlayPosition, useTooltip, useTooltipTrigger, } from "react-aria";
+import { mergeProps, mergeRefs, useOverlayPosition, useTooltip, useTooltipTrigger, } from "react-aria";
 import { useTooltipTriggerState } from "react-stately";
 import { useReducedMotion } from "motion/react";
 import { style, useStyles } from "purse-styles";
@@ -16,9 +16,17 @@ export function Tooltip(props) {
     const state = useTooltipTriggerState({ delay, isDisabled });
     const triggerRef = useRef(null);
     const { triggerProps, tooltipProps } = useTooltipTrigger({ delay, isDisabled }, state, triggerRef);
-    const triggerClassName = useStyles(triggerClass);
     const transition = useTooltipTransition(state.isOpen);
-    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: triggerRef, className: triggerClassName, ...triggerProps, children: children }), transition.render && (_jsx(TooltipPopup, { state: state, triggerRef: triggerRef, placement: placement, animateIn: transition.animateIn, phase: transition.phase, onExited: transition.onExited, ...tooltipProps, children: content }))] }));
+    // The trigger props go on the focusable element itself, as react-aria's
+    // FocusableProvider does. On a wrapper, focus never opened the tooltip
+    // (react-aria ignores focus on descendants) and aria-describedby missed
+    // the focused element.
+    const child = React.Children.only(children);
+    const trigger = React.cloneElement(child, {
+        ...mergeProps(child.props, triggerProps),
+        ref: mergeRefs(child.props.ref, triggerRef),
+    });
+    return (_jsxs(_Fragment, { children: [trigger, transition.render && (_jsx(TooltipPopup, { state: state, triggerRef: triggerRef, placement: placement, animateIn: transition.animateIn, phase: transition.phase, onExited: transition.onExited, ...tooltipProps, children: content }))] }));
 }
 /**
  * Coordinates enter/exit transitions across every tooltip so the animation only
@@ -155,11 +163,6 @@ function TooltipPopup(props) {
             }
         }, children: children }), document.body);
 }
-// The wrapper makes the trigger hoverable/focusable as a unit without
-// affecting layout of the child.
-const triggerClass = style({
-    display: "inline-block",
-});
 const tooltipClass = style(text({ size: "xs", fontWeight: 400, color: "highContrast" }), radius.sm, spacing.padding({ x: 3, y: 2 }), border([], "outline"), background.element, {
     zIndex: 1000,
     maxWidth: "240px",

package/dist/tokens/prose.js

@@ -38,7 +38,6 @@ const metrics = {
         },
         listPadding: 22,
         listItemGap: 4,
-        listNestedGap: 8,
     },
     md: {
         blockGap: 20,
@@ -69,7 +68,6 @@ const metrics = {
         },
         listPadding: 26,
         listItemGap: 8,
-        listNestedGap: 12,
     },
     lg: {
         blockGap: 24,
@@ -100,7 +98,6 @@ const metrics = {
         },
         listPadding: 28,
         listItemGap: 12,
-        listNestedGap: 16,
     },
 };
 // Slightly tighter reading rhythm on the Large platform scale.
@@ -148,12 +145,10 @@ export const prose = memoize((size) => {
             fontWeight: 400,
             color: bodyColor,
             paddingInlineStart: px(m.listPadding),
-            "& > li + li": {
+            // One gap between items at any depth, including through wrappers.
+            "& li + li, & li ul, & li ol": {
                 marginTop: px(m.listItemGap),
             },
-            "& li > ul, & li > ol": {
-                marginTop: px(m.listNestedGap),
-            },
         }),
     };
 });
@@ -279,12 +274,10 @@ export const proseHtml = memoize((size) => {
             paddingRight: "0.4em",
             boxSizing: "border-box",
         },
-        "& ul > li + li, & ol > li + li": {
+        // One gap between items at any depth, including through editor node views.
+        "& li + li, & li ul, & li ol": {
             marginTop: px(m.listItemGap),
         },
-        "& li > ul, & li > ol": {
-            marginTop: px(m.listNestedGap),
-        },
         "& strong": { fontWeight: 600 },
         "& em": { fontStyle: "italic" },
         "& code": {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tanishqkancharla/maui",
-	"version": "0.0.50",
+	"version": "0.0.52",
 	"description": "Maui design system",
 	"type": "module",
 	"main": "./dist/maui.js",

package/src/components/Tooltip.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from "react"
 import ReactDOM from "react-dom"
 import {
 	mergeProps,
+	mergeRefs,
 	useOverlayPosition,
 	useTooltip,
 	useTooltipTrigger,
@@ -22,8 +23,11 @@ type TooltipPlacement = "top" | "bottom" | "left" | "right"
 type TooltipProps = {
 	/** The content shown inside the tooltip. */
 	content: React.ReactNode
-	/** The trigger element. Must contain something focusable (e.g. a button). */
-	children: React.ReactNode
+	/**
+	 * The trigger: one focusable element, such as a Button, that forwards its
+	 * ref and passes event handlers and ARIA props to the DOM.
+	 */
+	children: React.ReactElement
 	placement?: TooltipPlacement
 	/** Warmup delay in ms before the tooltip shows on hover. */
 	delay?: number
@@ -40,21 +44,30 @@ export function Tooltip(props: TooltipProps) {
 	} = props
 
 	const state = useTooltipTriggerState({ delay, isDisabled })
-	const triggerRef = useRef<HTMLSpanElement>(null)
+	const triggerRef = useRef<HTMLElement>(null)
 	const { triggerProps, tooltipProps } = useTooltipTrigger(
 		{ delay, isDisabled },
 		state,
 		triggerRef,
 	)
 
-	const triggerClassName = useStyles(triggerClass)
 	const transition = useTooltipTransition(state.isOpen)
 
+	// The trigger props go on the focusable element itself, as react-aria's
+	// FocusableProvider does. On a wrapper, focus never opened the tooltip
+	// (react-aria ignores focus on descendants) and aria-describedby missed
+	// the focused element.
+	const child = React.Children.only(children) as React.ReactElement<
+		Record<string, unknown> & { ref?: React.Ref<HTMLElement> }
+	>
+	const trigger = React.cloneElement(child, {
+		...mergeProps(child.props, triggerProps),
+		ref: mergeRefs(child.props.ref, triggerRef),
+	})
+
 	return (
 		<>
-			<span ref={triggerRef} className={triggerClassName} {...triggerProps}>
-				{children}
-			</span>
+			{trigger}
 			{transition.render && (
 				<TooltipPopup
 					state={state}
@@ -257,12 +270,6 @@ function TooltipPopup(props: TooltipPopupProps) {
 	)
 }
 
-// The wrapper makes the trigger hoverable/focusable as a unit without
-// affecting layout of the child.
-const triggerClass = style({
-	display: "inline-block",
-})
-
 const tooltipClass = style(
 	text({ size: "xs", fontWeight: 400, color: "highContrast" }),
 	radius.sm,

package/src/tokens/prose.ts

@@ -45,7 +45,6 @@ type ProseMetric = {
 	h4: HeadingMetric
 	listPadding: number
 	listItemGap: number
-	listNestedGap: number
 }
 
 /** A block size that steps up with the platform data scale. */
@@ -84,7 +83,6 @@ const metrics: Record<ProseSize, ProseMetric> = {
 		},
 		listPadding: 22,
 		listItemGap: 4,
-		listNestedGap: 8,
 	},
 	md: {
 		blockGap: 20,
@@ -115,7 +113,6 @@ const metrics: Record<ProseSize, ProseMetric> = {
 		},
 		listPadding: 26,
 		listItemGap: 8,
-		listNestedGap: 12,
 	},
 	lg: {
 		blockGap: 24,
@@ -146,7 +143,6 @@ const metrics: Record<ProseSize, ProseMetric> = {
 		},
 		listPadding: 28,
 		listItemGap: 12,
-		listNestedGap: 16,
 	},
 }
 
@@ -200,12 +196,10 @@ export const prose = memoize((size: ProseSize) => {
 			fontWeight: 400,
 			color: bodyColor,
 			paddingInlineStart: px(m.listPadding),
-			"& > li + li": {
+			// One gap between items at any depth, including through wrappers.
+			"& li + li, & li ul, & li ol": {
 				marginTop: px(m.listItemGap),
 			},
-			"& li > ul, & li > ol": {
-				marginTop: px(m.listNestedGap),
-			},
 		}),
 	}
 })
@@ -336,12 +330,10 @@ export const proseHtml = memoize((size: ProseSize) => {
 			paddingRight: "0.4em",
 			boxSizing: "border-box",
 		},
-		"& ul > li + li, & ol > li + li": {
+		// One gap between items at any depth, including through editor node views.
+		"& li + li, & li ul, & li ol": {
 			marginTop: px(m.listItemGap),
 		},
-		"& li > ul, & li > ol": {
-			marginTop: px(m.listNestedGap),
-		},
 		"& strong": { fontWeight: 600 },
 		"& em": { fontStyle: "italic" },
 		"& code": {