react-miui 0.34.0 → 0.36.0

package/src/components/ui/button/Button.tsx

@@ -1 +1,33 @@
-export { Button } from "./Button.styled";
+import React, { forwardRef } from "react";
+
+import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
+
+import { useRipple } from "../../../utils/useRipple";
+import { StyledButton } from "./Button.styled";
+
+type Props = React.ComponentProps<typeof StyledButton>;
+
+const Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {
+    const { children, onPointerDown, onKeyDown, ...rest } = props;
+    const innerRef = useForwardedRef(ref);
+    const ripple = useRipple({ ref: innerRef, onPointerDown, onKeyDown });
+
+    return (
+        <StyledButton
+            ref={innerRef}
+            onPointerDown={ripple.onPointerDown}
+            onKeyDown={ripple.onKeyDown}
+            {...rest}
+        >
+            {children}
+            {ripple.ripples}
+        </StyledButton>
+    );
+});
+
+Button.displayName = "Button";
+Button.toString = () => StyledButton.toString();
+
+export {
+    Button,
+};

package/src/components/ui/directionPad/Button.styled.ts

@@ -1,6 +1,7 @@
 import { styled } from "../../../theme";
+import { rippleHostStyles } from "../../../utils/useRipple.styled";
 
-const StyledButton = styled("button", {
+const StyledButton = styled("button", rippleHostStyles, {
     height: "50px",
     width: "50px",
     margin: "0",

package/src/components/ui/directionPad/Button.tsx

@@ -1,5 +1,8 @@
 import React, { forwardRef } from "react";
 
+import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
+
+import { useRipple } from "../../../utils/useRipple";
 import { StyledButton, StyledDot } from "./Button.styled";
 
 type PadButtonProps = {
@@ -7,9 +10,18 @@ type PadButtonProps = {
 };
 
 const PadButton = forwardRef<HTMLButtonElement, PadButtonProps>((props, ref) => {
+    const innerRef = useForwardedRef(ref);
+    const ripple = useRipple({ ref: innerRef, fromCenter: true });
+
     return (
-        <StyledButton {...props} ref={ref}>
+        <StyledButton
+            {...props}
+            ref={innerRef}
+            onPointerDown={ripple.onPointerDown}
+            onKeyDown={ripple.onKeyDown}
+        >
             <StyledDot />
+            {ripple.ripples}
         </StyledButton>
     );
 });

package/src/components/ui/directionPad/Middle.styled.ts

@@ -1,6 +1,7 @@
 import { styled } from "../../../theme";
+import { rippleHostStyles } from "../../../utils/useRipple.styled";
 
-const StyledMiddle = styled("button", {
+const StyledMiddle = styled("button", rippleHostStyles, {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",

package/src/components/ui/directionPad/Middle.tsx

@@ -1,5 +1,8 @@
 import React, { forwardRef } from "react";
 
+import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
+
+import { useRipple } from "../../../utils/useRipple";
 import { StyledMiddle } from "./Middle.styled";
 
 type PadMiddleProps = {
@@ -8,9 +11,18 @@ type PadMiddleProps = {
 };
 
 const PadMiddle = forwardRef<HTMLButtonElement, PadMiddleProps>((props, ref) => {
+    const innerRef = useForwardedRef(ref);
+    const ripple = useRipple({ ref: innerRef, fromCenter: true });
+
     return (
-        <StyledMiddle onClick={props.onClick} ref={ref}>
+        <StyledMiddle
+            onClick={props.onClick}
+            ref={innerRef}
+            onPointerDown={ripple.onPointerDown}
+            onKeyDown={ripple.onKeyDown}
+        >
             {props.label}
+            {ripple.ripples}
         </StyledMiddle>
     );
 });

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

@@ -8,7 +8,6 @@ import { Label } from "../../form/Label";
 import { List } from "../../layout/list/List";
 import { Button } from "../button/Button";
 import { Modal } from "./Modal";
-import { RemovePadding } from "./Modal.styled";
 import { ModalButtons } from "./ModalButtons";
 
 const meta: Meta = {
@@ -77,19 +76,19 @@ const WithRemovedPaddingSections: Story = {
             <div>
                 <Button onClick={handleOpen}>Open modal</Button>
                 <Modal onClose={handleClose} isOpen={open} position={"bottom"} full={true}>
-                    <RemovePadding>
+                    <Modal.RemovePadding>
                         <Label>
                             <Input placeholder={"New station"} />
                         </Label>
-                    </RemovePadding>
+                    </Modal.RemovePadding>
                     <Label>
                         <Input placeholder={"New station"} />
                     </Label>
-                    <RemovePadding>
+                    <Modal.RemovePadding>
                         <Label>
                             <Input placeholder={"New station"} />
                         </Label>
-                    </RemovePadding>
+                    </Modal.RemovePadding>
                 </Modal>
             </div>
         );
@@ -116,14 +115,50 @@ const WithList: Story = {
             <div>
                 <Button onClick={handleOpen}>Open modal</Button>
                 <Modal onClose={handleClose} isOpen={open} position={"bottom"} full={true}>
-                    <RemovePadding>
+                    <Modal.RemovePadding>
                         <List inset={true}>
                             <List.Item selected={false} onClick={handleClose}>First item</List.Item>
                             <List.Item selected={true} onClick={handleClose}>Second item</List.Item>
                             <List.Item selected={false} onClick={handleClose}>Third item</List.Item>
                             <List.Item selected={false} onClick={handleClose}>Last option</List.Item>
                         </List>
-                    </RemovePadding>
+                    </Modal.RemovePadding>
+                </Modal>
+            </div>
+        );
+    },
+};
+
+/**
+ * Demonstrates a known issue: when the modal content is taller than the viewport,
+ * it gets clipped at the top and bottom because `ContainerStyled` has
+ * `maxHeight: 100%` but no `overflow: auto`. There is no scrolling inside the modal.
+ */
+const WithLongContent: Story = {
+    args: {},
+    render: () => {
+        const [open, setIsOpen] = useState(false);
+
+        const handleClose = useCallback(() => {
+            setIsOpen(false);
+        }, []);
+
+        const handleOpen = useCallback(() => {
+            setIsOpen(true);
+        }, []);
+
+        const lines = Array.from({ length: 60 }, (_, i) => i + 1);
+
+        return (
+            <div>
+                <Button onClick={handleOpen}>Open modal</Button>
+                <Modal onClose={handleClose} isOpen={open} title={"Long content"}>
+                    {lines.map((n) => (
+                        <p key={n}>
+                            Line {n} — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                            Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        </p>
+                    ))}
                 </Modal>
             </div>
         );
@@ -134,6 +169,7 @@ export {
     Primary,
     WithRemovedPaddingSections,
     WithList,
+    WithLongContent,
 };
 
 export default meta;

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/modal/ModalButtons.styled.ts

@@ -1,5 +1,5 @@
 import { dimensionsPxToRem, styled } from "../../../theme";
-import { fnWithProps } from "../../../types/fnWithProps";
+import { rippleHostStyles } from "../../../utils/useRipple.styled";
 import { NEGATIVE_PADDING } from "./Modal.styled";
 
 const Container = styled("div", {
@@ -9,7 +9,7 @@ const Container = styled("div", {
     marginBottom: NEGATIVE_PADDING,
 });
 
-const Button = styled("button", {
+const StyledButton = styled("button", rippleHostStyles, {
     "border": "none",
     "borderTop": "1px solid $modalButtonBorder",
     "background": "$modalButtonBg",
@@ -41,10 +41,7 @@ const Button = styled("button", {
     },
 });
 
-const ModalButtons = fnWithProps(Container, {
-    Button,
-});
-
 export {
-    ModalButtons,
+    Container,
+    StyledButton,
 };

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

@@ -1 +1,38 @@
-export { ModalButtons } from "./ModalButtons.styled";
+import React, { forwardRef } from "react";
+
+import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
+
+import { fnWithProps } from "../../../types/fnWithProps";
+import { useRipple } from "../../../utils/useRipple";
+import { Container, StyledButton } from "./ModalButtons.styled";
+
+type ButtonProps = React.ComponentProps<typeof StyledButton>;
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+    const { children, onPointerDown, onKeyDown, ...rest } = props;
+    const innerRef = useForwardedRef(ref);
+    const ripple = useRipple({ ref: innerRef, onPointerDown, onKeyDown });
+
+    return (
+        <StyledButton
+            ref={innerRef}
+            onPointerDown={ripple.onPointerDown}
+            onKeyDown={ripple.onKeyDown}
+            {...rest}
+        >
+            {children}
+            {ripple.ripples}
+        </StyledButton>
+    );
+});
+
+Button.displayName = "ModalButtons.Button";
+Button.toString = () => StyledButton.toString();
+
+const ModalButtons = fnWithProps(Container, {
+    Button,
+});
+
+export {
+    ModalButtons,
+};