react-miui 0.33.0 → 0.34.0

package/src/components/ui/drawer/Drawer.stories.tsx

@@ -1,12 +1,49 @@
 import React, { useCallback, useState } from "react";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { DrawerProps } from "./Drawer";
 
 import { styled } from "../../../theme";
 import { Section } from "../../layout/section/Section";
 import { Button } from "../button/Button";
 import { Drawer } from "./Drawer";
 
+type PlaygroundArgs = Omit<DrawerProps, "isOpen" | "onClose">;
+
+const Playground = (args: PlaygroundArgs) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleToggleOpen = useCallback(() => {
+        setIsOpen((prev) => !prev);
+    }, []);
+
+    const handleClose = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+
+    return (
+        <div style={{ padding: "20px" }}>
+            <h2>Page content</h2>
+            <p>Open the drawer and tweak its props in the Controls panel.</p>
+            {Array(8).fill(0).map((_: number, i) => (
+                <Section key={i} vertical={true} horizontal={true}> {/* eslint-disable-line react/no-array-index-key */}
+                    <p>Filler row {i + 1}</p>
+                </Section>
+            ))}
+            <Button onClick={handleToggleOpen}>
+                {isOpen ? "Close Drawer" : "Open Drawer"}
+            </Button>
+            <Drawer {...args} isOpen={isOpen} onClose={handleClose}>
+                <div style={{ padding: "20px" }}>
+                    <h2>Drawer</h2>
+                    <p>Adjust controls to customize behavior.</p>
+                    <Button onClick={handleClose}>Close</Button>
+                </div>
+            </Drawer>
+        </div>
+    );
+};
+
 const meta: Meta<typeof Drawer> = {
     title: "UI/Drawer",
     component: Drawer,
@@ -14,72 +51,111 @@ const meta: Meta<typeof Drawer> = {
         layout: "fullscreen",
     },
     tags: ["autodocs"],
+    argTypes: {
+        from: {
+            control: "inline-radio",
+            options: ["top", "right", "bottom", "left"],
+        },
+        size: {
+            control: "text",
+            description: "CSS length, e.g. \"200px\", \"50%\", \"calc(100% - 80px)\". Leave empty for full viewport.",
+        },
+        scaleContent: {
+            control: "boolean",
+        },
+        scaleSelectors: {
+            control: "object",
+        },
+        scaleSelectorsMode: {
+            control: "inline-radio",
+            options: ["first", "all"],
+        },
+        onOverlayClick: {
+            control: "select",
+            options: ["close", null],
+        },
+        closeOnEsc: {
+            control: "boolean",
+        },
+        isOpen: { table: { disable: true } },
+        onClose: { table: { disable: true } },
+        children: { table: { disable: true } },
+        portal: { table: { disable: true } },
+        className: { table: { disable: true } },
+    },
+    args: {
+        from: "bottom",
+        closeOnEsc: true,
+        onOverlayClick: "close",
+        scaleContent: false,
+        scaleSelectorsMode: "first",
+    },
+    render: (args) => <Playground {...args as PlaygroundArgs} />,
 };
 
 type Story = StoryObj<typeof Drawer>;
 
 /**
- * Basic implementation of the Drawer component with a toggle button.
+ * Default full-viewport drawer sliding up from the bottom.
  */
-const Default: Story = {
-    render: () => {
-        const [isOpen, setisOpen] = useState(false);
+const Default: Story = {};
 
-        const handleToggleOpen = useCallback(() => {
-            setisOpen((prev) => !prev);
-        }, []);
+/**
+ * ESC key is disabled, drawer can only be closed via its own UI.
+ */
+const NoEscClose: Story = {
+    args: { closeOnEsc: false },
+};
 
-        const handleClose = useCallback(() => {
-            setisOpen(false);
-        }, []);
+/**
+ * Slides in from the top, partial height.
+ */
+const FromTop: Story = {
+    args: { from: "top", size: "240px" },
+};
 
-        return (
-            <div style={{ padding: "20px" }}>
-                <Drawer isOpen={isOpen} onClose={handleClose}>
-                    <div style={{ padding: "20px" }}>
-                        <h2>Drawer Content</h2>
-                        <p>This is the content inside the drawer.</p>
-                        <p>Press ESC to close.</p>
-                    </div>
-                </Drawer>
-                <Button onClick={handleToggleOpen}>
-                    {isOpen ? "Close Drawer" : "Open Drawer"}
-                </Button>
-            </div>
-        );
-    },
+/**
+ * Slides in from the right side.
+ */
+const FromRight: Story = {
+    args: { from: "right", size: "320px" },
 };
 
 /**
- * Drawer with custom close behavior where ESC key doesn't close the drawer.
+ * Slides in from the left side.
  */
-const NoEscClose: Story = {
-    render: () => {
-        const [open, setOpen] = useState(false);
+const FromLeft: Story = {
+    args: { from: "left", size: "260px" },
+};
 
-        const handleToggleOpen = useCallback(() => {
-            setOpen((prev) => !prev);
-        }, []);
+/**
+ * Partial-size drawer with the new rounded corner treatment on the visible edge.
+ */
+const PartialSize: Story = {
+    args: { from: "bottom", size: "200px" },
+};
 
-        const handleClose = useCallback(() => {
-            setOpen(false);
-        }, []);
+/**
+ * Drawer that leaves 80px of the page visible at the top while scaling the page
+ * content down — the classic stacked "3D" sheet look.
+ */
+const ScaleContent: Story = {
+    args: {
+        from: "bottom",
+        size: "calc(100% - 80px)",
+        scaleContent: true,
+    },
+};
 
-        return (
-            <div style={{ padding: "20px" }}>
-                <Drawer isOpen={open} onClose={handleClose} closeOnEsc={false}>
-                    <div style={{ padding: "20px" }}>
-                        <h2>Drawer Without ESC Close</h2>
-                        <p>This drawer will not close when you press ESC.</p>
-                        <p>Use the button below to close it.</p>
-                        <Button onClick={handleClose}>Close Drawer</Button>
-                    </div>
-                </Drawer>
-                <Button onClick={handleToggleOpen}>
-                    {open ? "Close Drawer" : "Open Drawer (No ESC Close)"}
-                </Button>
-            </div>
-        );
+/**
+ * Overlay clicks are passed through to the underlying page (`onOverlayClick={null}`),
+ * so users can keep interacting with content next to the drawer.
+ */
+const PassThroughOverlay: Story = {
+    args: {
+        from: "bottom",
+        size: "200px",
+        onOverlayClick: null,
     },
 };
 
@@ -87,7 +163,7 @@ const NoEscClose: Story = {
  * Drawer with content that demonstrates scrolling behavior.
  */
 const WithLongContent: Story = {
-    render: () => {
+    render: (args) => {
         const [isOpen, setIsOpen] = useState(false);
 
         const handleToggleOpen = useCallback(() => {
@@ -100,7 +176,7 @@ const WithLongContent: Story = {
 
         return (
             <div style={{ padding: "20px" }}>
-                <Drawer isOpen={isOpen} onClose={handleClose}>
+                <Drawer {...args as PlaygroundArgs} isOpen={isOpen} onClose={handleClose}>
                     <div style={{ padding: "20px" }}>
                         <h2>Drawer with Long Content</h2>
                         <p>This drawer has enough content to demonstrate scrolling behavior.</p>
@@ -120,9 +196,6 @@ const WithLongContent: Story = {
     },
 };
 
-/**
- * Custom styled Drawer with a different background color and border radius.
- */
 const CustomStyledDrawer = styled(Drawer, {
     "&&": {
         background: "linear-gradient(to bottom, #c5f7fa, #63cfe2)",
@@ -130,10 +203,10 @@ const CustomStyledDrawer = styled(Drawer, {
 });
 
 /**
- * A custom styled version of the Drawer component with a gradient background and rounded top corners.
+ * A custom styled version of the Drawer component with a gradient background.
  */
 const CustomStyled: Story = {
-    render: () => {
+    render: (args) => {
         const [isOpen, setIsOpen] = useState(false);
 
         const handleToggleOpen = useCallback(() => {
@@ -146,7 +219,7 @@ const CustomStyled: Story = {
 
         return (
             <div style={{ padding: "20px" }}>
-                <CustomStyledDrawer isOpen={isOpen} onClose={handleClose}>
+                <CustomStyledDrawer {...args as PlaygroundArgs} isOpen={isOpen} onClose={handleClose}>
                     <div style={{ padding: "20px" }}>
                         <h2>Custom Styled Drawer</h2>
                         <p>This drawer has custom styling with a gradient background</p>
@@ -161,5 +234,16 @@ const CustomStyled: Story = {
     },
 };
 
-export { Default, NoEscClose, WithLongContent, CustomStyled };
+export {
+    Default,
+    NoEscClose,
+    FromTop,
+    FromRight,
+    FromLeft,
+    PartialSize,
+    ScaleContent,
+    PassThroughOverlay,
+    WithLongContent,
+    CustomStyled,
+};
 export default meta;

package/src/components/ui/drawer/Drawer.styled.ts

@@ -12,11 +12,24 @@ const StyledDrawer = styled("div", {
     overflow: "auto",
 });
 
+const Tint = styled("div", {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: "$text",
+    opacity: 0,
+    transition: "opacity 300ms",
+    zIndex: 0,
+});
+
 const Content = styled("div", {
     height: "100%",
 });
 
 export {
     StyledDrawer,
+    Tint,
     Content,
 };

package/src/components/ui/drawer/Drawer.tsx

@@ -1,22 +1,147 @@
-import React, { forwardRef, useEffect, useRef, useState } from "react";
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 
+import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
 import { Timeout } from "oop-timers";
 
 import { HandleEsc } from "../../utils/HandleEsc";
-import { Content, StyledDrawer } from "./Drawer.styled";
+import { Content, StyledDrawer, Tint } from "./Drawer.styled";
 
 const RENDER_TIMEOUT = 500;
+const TRANSITION_MS = 300;
+const DEFAULT_CONTENT_SCALE = 0.92;
+const DEFAULT_TINT_OPACITY = 0.1;
+const PARTIAL_RADIUS = "16px";
+const DEFAULT_SCALE_SELECTORS = ["#__next", "#root", "#storybook-root", "body>*:first-child"];
+
+type DrawerFrom = "top" | "right" | "bottom" | "left";
+type ScaleMode = "first" | "all";
 
 type DrawerProps = {
     isOpen: boolean;
     closeOnEsc?: boolean;
     onClose: () => void;
     className?: string;
+    /**
+     * Which edge the drawer slides in from. Defaults to `"bottom"`.
+     */
+    from?: DrawerFrom;
+    /**
+     * How far the drawer extends along its slide axis. Defaults to filling the whole viewport.
+     * - positive number — size in pixels (e.g. `300` ⇒ 300px tall/wide).
+     * - negative number — viewport minus pixels (e.g. `-100` ⇒ `calc(100% - 100px)`).
+     * - string — any CSS length (e.g. `"50%"`, `"20rem"`).
+     *
+     * When set, the drawer's visible edge gets rounded corners.
+     */
+    size?: number | string;
+    /**
+     * When set, scales the targeted page content down while the drawer is open
+     * (use with `scaleSelectors`) and fades in a subtle tint over it for a
+     * stacked "3D" look. `true` uses the default scale (~0.92), or pass a number
+     * to customize (e.g. `0.95`).
+     */
+    scaleContent?: boolean | number;
+    /**
+     * CSS selector (or array tried in order) for what to scale when `scaleContent`
+     * is set. The first selector that matches anything wins. Defaults to common
+     * app-root selectors `["#__next", "#root", "body>*:first-child"]`.
+     */
+    scaleSelectors?: string | string[];
+    /**
+     * Whether to scale only the first match of the chosen selector (`"first"`,
+     * default) or every match (`"all"`).
+     */
+    scaleSelectorsMode?: ScaleMode;
+    /**
+     * What happens when the user clicks (or taps) on the area outside the drawer.
+     * Mirrors `Modal`'s prop: `"close"` (default) calls `onClose`, a function is
+     * invoked directly, and `null` makes the overlay transparent to pointer/touch
+     * events so the underlying page stays interactive. The overlay only renders
+     * when there is an "outside" — i.e. `size` is set or `scaleContent` is enabled.
+     */
+    onOverlayClick?: (() => void) | "close" | null;
+    /**
+     * Where to portal the drawer. `true` (default) portals to `document.body` so the
+     * drawer's `position: fixed` always anchors to the viewport — needed when any
+     * ancestor establishes a containing block (e.g. via `transform`, `filter`, or
+     * `will-change`). Pass an `HTMLElement` to portal to a specific node, or `false`
+     * to render in place.
+     */
+    portal?: boolean | HTMLElement;
     children: React.ReactNode;
 };
 
+const closedTransform: Record<DrawerFrom, string> = {
+    bottom: "translate(0, 100%)",
+    top: "translate(0, -100%)",
+    left: "translate(-100%, 0)",
+    right: "translate(100%, 0)",
+};
+
+const getSizeCss = (size: number | string | undefined): string | undefined => {
+    if (size === undefined) {
+        return undefined;
+    }
+    if (typeof size === "string") {
+        return size;
+    }
+    if (size >= 0) {
+        return `${size}px`;
+    }
+    return `calc(100% + ${size}px)`;
+};
+
+const positioningPresets: Record<DrawerFrom, (size: string) => React.CSSProperties> = {
+    bottom: (size) => ({ top: "auto", height: size }),
+    top: (size) => ({ bottom: "auto", height: size }),
+    left: (size) => ({ right: "auto", width: size }),
+    right: (size) => ({ left: "auto", width: size }),
+};
+
+const radiusPresets: Record<DrawerFrom, React.CSSProperties> = {
+    bottom: { borderTopLeftRadius: PARTIAL_RADIUS, borderTopRightRadius: PARTIAL_RADIUS },
+    top: { borderBottomLeftRadius: PARTIAL_RADIUS, borderBottomRightRadius: PARTIAL_RADIUS },
+    left: { borderTopRightRadius: PARTIAL_RADIUS, borderBottomRightRadius: PARTIAL_RADIUS },
+    right: { borderTopLeftRadius: PARTIAL_RADIUS, borderBottomLeftRadius: PARTIAL_RADIUS },
+};
+
+const getStaticStyle = (from: DrawerFrom, size: number | string | undefined): React.CSSProperties => {
+    const sizeCss = getSizeCss(size);
+    if (sizeCss === undefined) {
+        return {};
+    }
+    return { ...positioningPresets[from](sizeCss), ...radiusPresets[from] };
+};
+
+const findScaleTargets = (selectors: string[], mode: ScaleMode): HTMLElement[] => {
+    for (const sel of selectors) {
+        if (mode === "first") {
+            const el = document.querySelector<HTMLElement>(sel);
+            if (el) {
+                return [el];
+            }
+        }
+        else {
+            const els = Array.from(document.querySelectorAll<HTMLElement>(sel));
+            if (els.length > 0) {
+                return els;
+            }
+        }
+    }
+    return [];
+};
+
+const applyScale = (target: HTMLElement, transform: string) => {
+    target.style.setProperty("transition", `transform ${TRANSITION_MS}ms`);
+    target.style.setProperty("transform-origin", "50% 0");
+    target.style.setProperty("transform", transform);
+};
+
 const Drawer = forwardRef<HTMLDivElement, DrawerProps>((props, ref) => {
+    const drawerRef = useForwardedRef(ref);
     const [shouldRenderWhenClosed, setShouldRenderWhenClosed] = useState(false);
+    const [isVisible, setIsVisible] = useState(props.isOpen);
     const timeoutRef = useRef<Timeout | null>(null);
 
     useEffect(() => {
@@ -31,36 +156,105 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>((props, ref) => {
     }, []);
 
     useEffect(() => {
-        if (props.isOpen) {
-            timeoutRef.current?.stop();
-            // eslint-disable-next-line react-hooks/set-state-in-effect
-            setShouldRenderWhenClosed(true);
-        }
-        else {
+        if (!props.isOpen) {
             timeoutRef.current?.start();
+            // eslint-disable-next-line react-hooks/set-state-in-effect
+            setIsVisible(false);
+            return undefined;
         }
+        timeoutRef.current?.stop();
+        setShouldRenderWhenClosed(true);
+        const id = requestAnimationFrame(() => {
+            setIsVisible(true);
+        });
+        return () => {
+            cancelAnimationFrame(id);
+        };
     }, [props.isOpen]);
 
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    const y = props.isOpen ? 0 : 100;
+    const { scaleContent, scaleSelectors, scaleSelectorsMode } = props;
+
+    useEffect(() => {
+        if (!scaleContent || !props.isOpen) {
+            return undefined;
+        }
+        const selectors = scaleSelectors === undefined
+            ? DEFAULT_SCALE_SELECTORS
+            : (Array.isArray(scaleSelectors) ? scaleSelectors : [scaleSelectors]);
+        const mode = scaleSelectorsMode ?? "first";
+        const targets = findScaleTargets(selectors, mode);
+        if (targets.length === 0) {
+            return undefined;
+        }
+        const scale = typeof scaleContent === "number" ? scaleContent : DEFAULT_CONTENT_SCALE;
+        targets.forEach((el) => {
+            applyScale(el, `scale(${scale})`);
+        });
+        return () => {
+            targets.forEach((el) => {
+                applyScale(el, "");
+            });
+        };
+    }, [props.isOpen, scaleContent, scaleSelectors, scaleSelectorsMode]);
+
+    const from = props.from ?? "bottom";
     const style = {
-        transform: `translateY(${y}%)`,
+        ...getStaticStyle(from, props.size),
+        transform: isVisible ? "translate(0, 0)" : closedTransform[from],
+        transition: props.isOpen && !isVisible ? "none" : undefined,
     };
 
     const shouldRender = props.isOpen || shouldRenderWhenClosed;
 
     const closeOnEsc = props.closeOnEsc ?? true;
     const esc = closeOnEsc && <HandleEsc onPress={props.onClose} />;
+    const portal = props.portal ?? true;
+
+    const overlayClick = props.onOverlayClick === undefined ? "close" : props.onOverlayClick;
+    const { onClose } = props;
+    const handleOverlayClick = useCallback(() => {
+        if (overlayClick === "close") {
+            onClose();
+            return;
+        }
+        if (typeof overlayClick === "function") {
+            overlayClick();
+        }
+    }, [overlayClick, onClose]);
 
-    return (
-        <StyledDrawer className={props.className} style={style} ref={ref}>
-            {esc}
-            <Content>
-                {/* eslint-disable-next-line react/jsx-no-leaked-render */}
-                {shouldRender && props.children}
-            </Content>
-        </StyledDrawer>
+    const hasOverlay = props.size !== undefined || Boolean(scaleContent);
+    const overlayInteractive = overlayClick !== null && props.isOpen;
+    const tintStyle = {
+        opacity: isVisible ? DEFAULT_TINT_OPACITY : 0,
+        pointerEvents: (overlayInteractive ? "auto" : "none") as React.CSSProperties["pointerEvents"],
+    };
+
+    const tree = (
+        <>
+            {/* eslint-disable-next-line react/jsx-no-leaked-render */}
+            {hasOverlay && (
+                <Tint
+                    style={tintStyle}
+                    onClick={handleOverlayClick}
+                    aria-hidden={true}
+                />
+            )}
+            <StyledDrawer className={props.className} style={style} ref={drawerRef}>
+                {esc}
+                <Content>
+                    {/* eslint-disable-next-line react/jsx-no-leaked-render */}
+                    {shouldRender && props.children}
+                </Content>
+            </StyledDrawer>
+        </>
     );
+
+    if (portal) {
+        const root = typeof portal === "boolean" ? document.body : portal;
+        return createPortal(tree, root);
+    }
+
+    return tree;
 });
 
 Drawer.displayName = "Drawer";
@@ -69,4 +263,4 @@ Drawer.toString = () => StyledDrawer.toString();
 const DrawerContentSelector = Content.toString();
 
 export { Drawer, DrawerContentSelector };
-export type { DrawerProps };
+export type { DrawerProps, DrawerFrom };

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}
         </>
     );
 };