react-miui 0.33.0 → 0.35.0

package/src/components/ui/modal/Modal.styled.ts

@@ -13,20 +13,25 @@ const overlay = keyframes({
 });
 
 const OverlayStyled = styled("div", {
-    position: "fixed",
-    zIndex: 4,
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    animation: `${overlay.toString()} 300ms`,
-    animationFillMode: "forwards",
-    backdropFilter: "blur(5px)",
+    "position": "fixed",
+    "zIndex": 4,
+    "top": 0,
+    "bottom": 0,
+    "left": 0,
+    "right": 0,
+    "display": "flex",
+    "alignItems": "center",
+    "justifyContent": "center",
+    "animation": `${overlay.toString()} 300ms`,
+    "animationFillMode": "forwards",
+    "backdropFilter": "blur(5px)",
 
-    variants: {
+    "@media (prefers-reduced-motion: reduce)": {
+        animation: "none",
+        background: "rgba($background, 0.3)",
+    },
+
+    "variants": {
         position: {
             bottom: {
                 alignItems: "flex-end",
@@ -57,18 +62,33 @@ const RemovePadding = styled("div", {
 });
 
 const ContainerStyled = styled("div", {
-    background: "$modalBg",
-    borderRadius: dimensionsPxToRem(12),
-    maxWidth: pxToRem(333),
-    maxHeight: "100%",
-    width: "calc(100% - 30px)",
-    padding: PADDING,
-    position: "relative",
-    boxSizing: "border-box",
-    animation: `${container.toString()} 300ms`,
-    animationFillMode: "forwards",
+    "background": "$modalBg",
+    "borderRadius": dimensionsPxToRem(12),
+    "maxWidth": pxToRem(333),
+    "maxHeight": "100%",
+    "width": "calc(100% - 30px)",
+    "padding": PADDING,
+    "position": "relative",
+    "boxSizing": "border-box",
+    "overflowY": "auto",
+    "overscrollBehavior": "contain",
+    "animation": `${container.toString()} 300ms`,
+    "animationFillMode": "forwards",
+
+    // The dialog uses tabindex=-1 to be programmatically focusable for initial focus
+    // fallback (when there is no focusable child). Hide the outline since it's only
+    // there as a focus target, not a user-visible affordance.
+    "&:focus": {
+        outline: "none",
+    },
+
+    "@media (prefers-reduced-motion: reduce)": {
+        animation: "none",
+        opacity: 1,
+        transform: "none",
+    },
 
-    variants: {
+    "variants": {
         // TODO this is very not rwd, it should be a media query
         full: {
             true: {
@@ -84,11 +104,12 @@ const ContainerStyled = styled("div", {
     },
 });
 
-const TitleStyled = styled("div", { // TODO header by default? expose this as `titleAs`?
+const TitleStyled = styled("h2", {
     fontSize: fontPxToRem(40),
     textAlign: "center",
     color: "$text3",
     margin: `${dimensionsPxToRem(90)} 0`,
+    fontWeight: "inherit",
 });
 
 export {

package/src/components/ui/modal/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import React, { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
 import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
@@ -6,18 +6,34 @@ import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
 import type { ThemeCSS } from "../../../theme";
 
 import { fnWithProps } from "../../../types/fnWithProps";
+import { HandleEsc } from "../../utils/HandleEsc";
 import { ContainerStyled, NEGATIVE_PADDING, OverlayStyled, RemovePadding, TitleStyled } from "./Modal.styled";
 
 type OverlayProps = React.ComponentProps<typeof OverlayStyled>;
 type ContainerProps = React.ComponentProps<typeof ContainerStyled>;
 
-interface Props {
+const FOCUSABLE_SELECTOR = [
+    "a[href]",
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    "[tabindex]:not([tabindex=\"-1\"])",
+].join(",");
+
+const prefersReducedMotion = () => {
+    if (typeof window === "undefined") {
+        return false;
+    }
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+};
+
+interface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     onOverlayClick?: (() => void) | "close" | null;
     closeOnEsc?: boolean;
     onClose: () => void;
     isOpen: boolean;
     title?: React.ReactNode;
-    className?: string;
     portal?: boolean | HTMLElement;
     children: React.ReactNode;
 
@@ -39,57 +55,107 @@ const ModalBase = forwardRef<HTMLDivElement, Props>(({
     portal = true,
     position,
     full,
+    ...rest
 }, ref) => {
     const [isClosing, setIsClosing] = useState(false);
     const [isRendered, setIsRendered] = useState(false);
     const overlayRef = useRef<HTMLDivElement>(null);
     const containerRef = useForwardedRef(ref);
+    const previouslyFocusedRef = useRef<HTMLElement | null>(null);
+    const titleId = useId();
 
     useEffect(() => {
-        if (!isOpen || !closeOnEsc) {
+        if (isOpen) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
+            setIsRendered(true);
+            setIsClosing(false);
             return;
         }
-
-        const onKeyDown = (e: KeyboardEvent) => {
-            if (e.key === "Escape") {
-                onClose();
-            }
-        };
-        document.addEventListener("keydown", onKeyDown);
-        return () => {
-            document.removeEventListener("keydown", onKeyDown);
-        };
-    }, [isOpen, closeOnEsc, onClose]);
-
-    useEffect(() => {
-        if (!isOpen) {
-            // eslint-disable-next-line react-hooks/set-state-in-effect
-            setIsClosing(true);
+        // Under reduced motion the close animation is disabled, so onAnimationEnd will
+        // never fire — unmount synchronously instead.
+        if (prefersReducedMotion()) {
+            setIsRendered(false);
+            setIsClosing(false);
             return;
         }
-        setIsRendered(true);
-        setIsClosing(false);
+        setIsClosing(true);
     }, [isOpen]);
 
     useEffect(() => {
         if (!isClosing) {
             return;
         }
-
+        const overlay = overlayRef.current;
+        const container = containerRef.current;
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        if (!overlayRef.current || !containerRef.current) {
+        if (!overlay || !container) {
             return;
         }
-
-        overlayRef.current.style.animation = "none";
-        containerRef.current.style.animation = "none";
+        // animationFillMode: forwards leaves the keyframe in its end state, so flipping
+        // animationDirection to reverse alone wouldn't replay it. Force a restart by
+        // clearing animation, triggering reflow, then letting the variant's reverse run.
+        overlay.style.animation = "none";
+        container.style.animation = "none";
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        overlayRef.current.offsetHeight; // force sync document reflow
-        overlayRef.current.style.removeProperty("animation");
-        containerRef.current.style.removeProperty("animation");
+        overlay.offsetHeight;
+        overlay.style.removeProperty("animation");
+        container.style.removeProperty("animation");
     }, [isClosing, containerRef]);
 
-    const titleElem = title ? <TitleStyled>{title}</TitleStyled> : null;
+    // Focus management: capture previous focus on open, set initial focus inside the
+    // dialog, restore focus on close. Tab containment + AT-hiding is delegated to the
+    // `inert` attribute on everything outside the modal subtree (native browser handles
+    // Tab cycling, screen-reader pruning, and pointer-event blocking).
+    useEffect(() => {
+        if (!isOpen || !isRendered) {
+            return;
+        }
+        const container = containerRef.current;
+        const overlay = overlayRef.current;
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (!container || !overlay) {
+            return;
+        }
+
+        previouslyFocusedRef.current = document.activeElement instanceof HTMLElement
+            ? document.activeElement
+            : null;
+
+        const focusables = container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
+        (focusables[0] ?? container).focus();
+
+        // Walk up from the overlay to <body>; at each level mark every sibling of the
+        // cursor as inert. Already-inert nodes (e.g. from a nesting modal) are skipped
+        // so that the outer owner remains responsible for cleanup — this gives correct
+        // stacking for nested modals without a separate registry.
+        const inerted: HTMLElement[] = [];
+        let cursor: HTMLElement = overlay;
+        while (cursor !== document.body) {
+            const parentEl: HTMLElement | null = cursor.parentElement;
+            if (!parentEl) {
+                break;
+            }
+            for (const child of Array.from(parentEl.children)) {
+                if (child === cursor || !(child instanceof HTMLElement)) {
+                    continue;
+                }
+                if (!child.hasAttribute("inert")) {
+                    child.setAttribute("inert", "");
+                    inerted.push(child);
+                }
+            }
+            cursor = parentEl;
+        }
+
+        return () => {
+            inerted.forEach((el) => {
+                el.removeAttribute("inert");
+            });
+            previouslyFocusedRef.current?.focus();
+        };
+    }, [isOpen, isRendered, containerRef]);
+
+    const titleElem = title ? <TitleStyled id={titleId}>{title}</TitleStyled> : null;
 
     const handleOverlayClick = useCallback((e: React.MouseEvent) => {
         if (e.target !== e.currentTarget) {
@@ -98,16 +164,18 @@ const ModalBase = forwardRef<HTMLDivElement, Props>(({
         if (onOverlayClick === "close") {
             onClose();
         }
-        if (typeof onOverlayClick === "function") {
+        else if (typeof onOverlayClick === "function") {
             onOverlayClick();
         }
     }, [onOverlayClick, onClose]);
 
-    const handleAnimationEnd = useCallback(() => {
+    const handleAnimationEnd = useCallback((e: React.AnimationEvent) => {
+        if (e.target !== e.currentTarget) {
+            return;
+        }
         if (isOpen) {
             return;
         }
-
         setIsRendered(false);
     }, [isOpen]);
 
@@ -116,30 +184,35 @@ const ModalBase = forwardRef<HTMLDivElement, Props>(({
     }
 
     const overlayVariants: Pick<OverlayProps, "isClosing" | "position"> = {};
-    isClosing && (overlayVariants.isClosing = true);
-    position != null && (overlayVariants.position = position);
+    if (isClosing) {
+        overlayVariants.isClosing = true;
+    }
+    if (position != null) {
+        overlayVariants.position = position;
+    }
 
     const containerVariants: Pick<ContainerProps, "isClosing" | "full"> = {};
-    isClosing && (containerVariants.isClosing = true);
-    full != null && (containerVariants.full = full);
+    if (isClosing) {
+        containerVariants.isClosing = true;
+    }
+    if (full != null) {
+        containerVariants.full = full;
+    }
 
     const childrenCount = React.Children.count(children);
 
     const chld = React.Children.map(children, (child, index) => {
-        if (React.isValidElement(child)) {
-            if (child.type === RemovePadding) {
-                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
-                const css: ThemeCSS = child.props.css ?? {};
-                if (index === 0 && titleElem == null) {
-                    css.marginTop = NEGATIVE_PADDING;
-                }
-                if (index === childrenCount - 1) {
-                    css.marginBottom = NEGATIVE_PADDING;
-                }
-
-                return React.cloneElement(child, { css });
+        if (React.isValidElement(child) && child.type === RemovePadding) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
+            const css: ThemeCSS = { ...(child.props.css ?? {}) };
+            if (index === 0 && titleElem == null) {
+                css.marginTop = NEGATIVE_PADDING;
             }
-            return child;
+            if (index === childrenCount - 1) {
+                css.marginBottom = NEGATIVE_PADDING;
+            }
+
+            return React.cloneElement(child, { css });
         }
         return child;
     });
@@ -151,7 +224,17 @@ const ModalBase = forwardRef<HTMLDivElement, Props>(({
             ref={overlayRef}
             onAnimationEnd={handleAnimationEnd}
         >
-            <ContainerStyled className={className} {...containerVariants} ref={containerRef}>
+            {closeOnEsc ? <HandleEsc onPress={onClose} /> : null}
+            <ContainerStyled
+                role={"dialog"}
+                aria-modal={true}
+                aria-labelledby={titleElem ? titleId : undefined}
+                tabIndex={-1}
+                className={className}
+                {...containerVariants}
+                ref={containerRef}
+                {...rest}
+            >
                 {titleElem}
                 {chld}
             </ContainerStyled>

package/src/components/ui/toaster/Toaster.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 
 import { toast, Toaster as SonnerToaster } from "sonner";
 
@@ -9,10 +10,19 @@ interface ToasterProviderProps extends SonnerToasterProps {
 }
 
 const ToasterProvider: React.FC<ToasterProviderProps> = ({ children, position = "bottom-center", ...rest }) => {
+    const [body, setBody] = useState<HTMLElement | null>(null);
+
+    useEffect(() => {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setBody(document.body);
+    }, []);
+
+    const toaster = <SonnerToaster position={position} {...rest} />;
+
     return (
         <>
             {children}
-            <SonnerToaster position={position} {...rest} />
+            {body ? createPortal(toaster, body) : null}
         </>
     );
 };

package/src/components/ui/tooltip/Tooltip.stories.tsx

@@ -0,0 +1,285 @@
+/* eslint-disable max-lines */
+import React, { useCallback, useState } from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Gap } from "../../utils/Gap";
+import { Button } from "../button/Button";
+import { Drawer } from "../drawer/Drawer";
+import { Modal } from "../modal/Modal";
+import { ModalButtons } from "../modal/ModalButtons";
+import { Tooltip, TooltipProvider } from "./Tooltip";
+
+const meta: Meta<typeof Tooltip> = {
+    title: "Components/UI/Tooltip",
+    component: Tooltip,
+    tags: ["autodocs", "ui"],
+    argTypes: {
+        side: {
+            control: "inline-radio",
+            options: ["top", "right", "bottom", "left"],
+        },
+        align: {
+            control: "inline-radio",
+            options: ["start", "center", "end"],
+        },
+        sideOffset: { control: { type: "number", min: 0, max: 40 } },
+        alignOffset: { control: { type: "number", min: -40, max: 40 } },
+        delayDuration: { control: { type: "number", min: 0, max: 2000, step: 100 } },
+        avoidCollisions: { type: "boolean" },
+        arrow: { type: "boolean" },
+        content: { control: "text" },
+        children: { table: { disable: true } },
+        open: { table: { disable: true } },
+        defaultOpen: { table: { disable: true } },
+        onOpenChange: { table: { disable: true } },
+    },
+};
+
+type Story = StoryObj<typeof Tooltip>;
+
+/**
+ * Playground. Tweak `side`, `align`, `sideOffset`, `delayDuration`, `arrow`,
+ * and `avoidCollisions` from the controls panel.
+ */
+const Primary: Story = {
+    args: {
+        content: "Save your changes",
+        side: "top",
+        align: "center",
+        sideOffset: 6,
+        alignOffset: 0,
+        delayDuration: 500,
+        avoidCollisions: true,
+        arrow: true,
+    },
+    render: (args) => (
+        <div style={{ padding: 80, display: "flex", justifyContent: "center" }}>
+            <Tooltip {...args}>
+                <Button>Hover me</Button>
+            </Tooltip>
+        </div>
+    ),
+};
+
+/**
+ * All four sides shown at once.
+ */
+const AllSides: Story = {
+    render: () => (
+        <div
+            style={{
+                padding: 120,
+                display: "grid",
+                gridTemplateColumns: "repeat(2, max-content)",
+                gap: 40,
+                justifyContent: "center",
+            }}
+        >
+            <Tooltip content={"Top"} side={"top"} arrow={true}>
+                <Button>Top</Button>
+            </Tooltip>
+            <Tooltip content={"Right"} side={"right"} arrow={true}>
+                <Button>Right</Button>
+            </Tooltip>
+            <Tooltip content={"Bottom"} side={"bottom"} arrow={true}>
+                <Button>Bottom</Button>
+            </Tooltip>
+            <Tooltip content={"Left"} side={"left"} arrow={true}>
+                <Button>Left</Button>
+            </Tooltip>
+        </div>
+    ),
+};
+
+/**
+ * `TooltipProvider` enables group-delay behavior: once any tooltip is open, the next ones
+ * appear without waiting for `delayDuration` (until `skipDelayDuration` elapses with all
+ * tooltips closed). Hover one button slowly, then sweep across the rest — they pop instantly.
+ */
+const GroupDelay: Story = {
+    render: () => (
+        <TooltipProvider delayDuration={500} skipDelayDuration={400}>
+            <div style={{ padding: 80, display: "flex", gap: 12, justifyContent: "center" }}>
+                <Tooltip content={"First"}>
+                    <Button>One</Button>
+                </Tooltip>
+                <Tooltip content={"Second"}>
+                    <Button>Two</Button>
+                </Tooltip>
+                <Tooltip content={"Third"}>
+                    <Button>Three</Button>
+                </Tooltip>
+                <Tooltip content={"Fourth"}>
+                    <Button>Four</Button>
+                </Tooltip>
+            </div>
+        </TooltipProvider>
+    ),
+};
+
+/**
+ * Triggers placed near viewport edges. With `avoidCollisions` (default) the tooltip
+ * flips to fit; toggle the arg in the playground story to see the difference.
+ */
+const NearViewportEdge: Story = {
+    render: () => (
+        <div style={{ height: "90vh", position: "relative" }}>
+            <div style={{ position: "absolute", top: 4, left: 4 }}>
+                <Tooltip content={"I would overflow up-left, so I flip"} side={"top"} arrow={true}>
+                    <Button>Top-left corner</Button>
+                </Tooltip>
+            </div>
+            <div style={{ position: "absolute", top: 4, right: 4 }}>
+                <Tooltip content={"I would overflow up-right, so I flip"} side={"top"} arrow={true}>
+                    <Button>Top-right corner</Button>
+                </Tooltip>
+            </div>
+            <div style={{ position: "absolute", bottom: 4, left: 4 }}>
+                <Tooltip content={"I would overflow down-left"} side={"bottom"} arrow={true}>
+                    <Button>Bottom-left corner</Button>
+                </Tooltip>
+            </div>
+            <div style={{ position: "absolute", bottom: 4, right: 4 }}>
+                <Tooltip content={"I would overflow down-right"} side={"bottom"} arrow={true}>
+                    <Button>Bottom-right corner</Button>
+                </Tooltip>
+            </div>
+        </div>
+    ),
+};
+
+/**
+ * Long content wraps to the configured `maxWidth`.
+ */
+const LongContent: Story = {
+    render: () => (
+        <div style={{ padding: 80, display: "flex", justifyContent: "center" }}>
+            <Tooltip
+                content={"This tooltip has a longer description that wraps onto multiple lines once it "
+                    + "exceeds the maximum content width set in the styles."}
+                side={"bottom"}
+            >
+                <Button>Long description</Button>
+            </Tooltip>
+        </div>
+    ),
+};
+
+/**
+ * Edge case: tooltip rendered from inside a `Modal`. Because the content is portalled to
+ * `document.body`, it escapes the modal's stacking context and renders above it.
+ */
+const InModal: Story = {
+    render: () => {
+        const [open, setOpen] = useState(false);
+
+        const handleOpen = useCallback(() => { setOpen(true); }, []);
+        const handleClose = useCallback(() => { setOpen(false); }, []);
+
+        return (
+            <div>
+                <Button onClick={handleOpen}>Open modal</Button>
+                <Modal isOpen={open} onClose={handleClose} title={"Tooltip in a modal"}>
+                    <Gap>
+                        <div>Hover the buttons below — the tooltip should appear above the modal.</div>
+                        <div style={{ display: "flex", gap: 12 }}>
+                            <Tooltip content={"Above modal, side=top"} side={"top"} arrow={true}>
+                                <Button>Top</Button>
+                            </Tooltip>
+                            <Tooltip content={"Above modal, side=right"} side={"right"} arrow={true}>
+                                <Button>Right</Button>
+                            </Tooltip>
+                            <Tooltip content={"Above modal, side=bottom"} side={"bottom"} arrow={true}>
+                                <Button>Bottom</Button>
+                            </Tooltip>
+                        </div>
+                    </Gap>
+                    <ModalButtons>
+                        <ModalButtons.Button variant={"main"} onClick={handleClose}>Close</ModalButtons.Button>
+                    </ModalButtons>
+                </Modal>
+            </div>
+        );
+    },
+};
+
+/**
+ * Edge case: tooltip rendered from inside a `Drawer`. Same portal behavior — content
+ * floats above the drawer regardless of the drawer's stacking context.
+ */
+const InDrawer: Story = {
+    render: () => {
+        const [open, setOpen] = useState(false);
+
+        const handleOpen = useCallback(() => { setOpen(true); }, []);
+        const handleClose = useCallback(() => { setOpen(false); }, []);
+
+        return (
+            <div>
+                <Button onClick={handleOpen}>Open drawer</Button>
+                <Drawer isOpen={open} onClose={handleClose}>
+                    <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 16 }}>
+                        <div>Tooltips work from inside a drawer.</div>
+                        <Tooltip content={"Hello from inside the drawer"} side={"bottom"} arrow={true}>
+                            <Button>Hover me</Button>
+                        </Tooltip>
+                        <Button onClick={handleClose}>Close drawer</Button>
+                    </div>
+                </Drawer>
+            </div>
+        );
+    },
+};
+
+/**
+ * Controlled tooltip — open state is driven by parent. Useful for tutorials,
+ * onboarding tours, or pinning a tooltip open while a user interacts elsewhere.
+ */
+const Controlled: Story = {
+    render: () => {
+        const [open, setOpen] = useState(false);
+
+        const handleToggle = useCallback(() => { setOpen(p => !p); }, []);
+
+        return (
+            <div style={{ padding: 80, display: "flex", gap: 16, justifyContent: "center" }}>
+                <Button onClick={handleToggle}>{open ? "Hide" : "Show"} tooltip</Button>
+                <Tooltip content={"I'm controlled"} open={open} side={"right"}>
+                    <Button>Target</Button>
+                </Tooltip>
+            </div>
+        );
+    },
+};
+
+/**
+ * Tooltip wrapping a non-button trigger. Any element that can receive a ref works
+ * — here, an inline word with a dotted underline.
+ */
+const InlineTrigger: Story = {
+    render: () => (
+        <div style={{ padding: 80, fontSize: 18, lineHeight: 1.6, maxWidth: 500, margin: "0 auto" }}>
+            This sentence contains a{" "}
+            <Tooltip content={"A short, contextual explanation."}>
+                <span style={{ borderBottom: "1px dotted currentColor", cursor: "help" }}>
+                    glossed term
+                </span>
+            </Tooltip>
+            {" "}that reveals more on hover or focus.
+        </div>
+    ),
+};
+
+export default meta;
+export {
+    Primary,
+    AllSides,
+    GroupDelay,
+    NearViewportEdge,
+    LongContent,
+    InModal,
+    InDrawer,
+    Controlled,
+    InlineTrigger,
+};