@refraktor/core 0.0.3 → 0.0.4

package/src/components/modal/modal-overlay/modal-overlay.tsx

@@ -1,37 +1,38 @@
+import { FloatingOverlay, FloatingPortal } from "@floating-ui/react";
 import { useTheme } from "../../../theme";
 import { factory } from "../../../utils";
-import { Portal } from "../../portal";
 import { Transition } from "../../transition";
 import { useModalContext } from "../modal.context";
 import { ModalOverlayFactoryPayload } from "../modal.types";
 
-const ModalOverlay = factory<ModalOverlayFactoryPayload>(
-    (
-        {
-            closeOnClick = true,
-            backgroundOpacity = 0.5,
-            blur = 0,
-            className,
-            onMouseDown,
-            style,
-            ...props
-        },
-        ref
-    ) => {
-        const { cx } = useTheme();
-        const {
-            modal,
-            closeOnClickOutside,
-            withinPortal,
-            transitionProps,
-            getStyles
-        } = useModalContext();
-
-        const blurValue = typeof blur === "number" ? `${blur}px` : blur;
-        const backdropFilterValue =
-            blurValue !== "0" && blurValue !== "0px"
-                ? `blur(${blurValue})`
-                : undefined;
+const ModalOverlay = factory<ModalOverlayFactoryPayload>(
+    (
+        {
+            closeOnClick = true,
+            backgroundOpacity = 0.5,
+            blur = 0,
+            className,
+            onMouseDown,
+            style,
+            ...props
+        },
+        ref
+    ) => {
+        const { cx } = useTheme();
+        const {
+            modal,
+            closeOnClickOutside,
+            lockScroll,
+            withinPortal,
+            transitionProps,
+            getStyles
+        } = useModalContext();
+
+        const blurValue = typeof blur === "number" ? `${blur}px` : blur;
+        const backdropFilterValue =
+            blurValue !== "0" && blurValue !== "0px"
+                ? `blur(${blurValue})`
+                : undefined;
 
         const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
             onMouseDown?.(event);
@@ -54,27 +55,27 @@ const ModalOverlay = factory<ModalOverlayFactoryPayload>(
                 mounted={modal.opened}
                 {...transitionProps}
             >
-                <div
-                    ref={ref}
-                    aria-hidden="true"
-                    className={cx(
-                        "fixed inset-0 z-40",
-                        getStyles("overlay"),
-                        className
-                    )}
-                    style={{
-                        backgroundColor: `rgba(0, 0, 0, ${backgroundOpacity})`,
-                        backdropFilter: backdropFilterValue,
-                        ...style
-                    }}
-                    onMouseDown={handleMouseDown}
-                    {...props}
-                />
+                <FloatingOverlay
+                    lockScroll={lockScroll}
+                    ref={ref}
+                    className={cx(
+                        "z-40",
+                        getStyles("overlay"),
+                        className
+                    )}
+                    style={{
+                        backgroundColor: `rgba(0, 0, 0, ${backgroundOpacity})`,
+                        backdropFilter: backdropFilterValue,
+                        ...style
+                    }}
+                    onMouseDown={handleMouseDown}
+                    {...props}
+                />
             </Transition>
         );
 
         return withinPortal ? (
-            <Portal>{overlayContent}</Portal>
+            <FloatingPortal>{overlayContent}</FloatingPortal>
         ) : (
             overlayContent
         );

package/src/components/modal/modal-root/modal-root.tsx

@@ -1,5 +1,4 @@
 import { useId } from "@refraktor/utils";
-import { useRef } from "react";
 import { useTheme } from "../../../theme";
 import { factory, useClassNames, useProps } from "../../../utils";
 import { ModalProvider } from "../modal.context";
@@ -9,14 +8,17 @@ import {
     ModalRootFactoryPayload,
     ModalRootProps
 } from "../modal.types";
-import { RemoveScroll } from "react-remove-scroll";
 
 const defaultProps = {
     closeOnClickOutside: true,
     closeOnEscape: true,
     lockScroll: true,
     withinPortal: true,
-    radius: "md"
+    radius: "md",
+    size: "md",
+    centered: true,
+    trapFocus: true,
+    returnFocus: true
 } satisfies Partial<ModalRootProps>;
 
 const ModalRoot = factory<ModalRootFactoryPayload>((_props, ref) => {
@@ -32,6 +34,10 @@ const ModalRoot = factory<ModalRootFactoryPayload>((_props, ref) => {
         lockScroll,
         withinPortal,
         radius,
+        size,
+        centered,
+        trapFocus,
+        returnFocus,
         transitionProps,
         className,
         classNames,
@@ -41,15 +47,13 @@ const ModalRoot = factory<ModalRootFactoryPayload>((_props, ref) => {
 
     const _id = useId(id);
     const headerId = `${_id}-header`;
-    const contentRef = useRef<HTMLDivElement | null>(null);
 
     const modal = useModal({
         opened,
         defaultOpened,
         onOpenedChange,
         closeOnClickOutside,
-        closeOnEscape,
-        contentRef
+        closeOnEscape
     });
 
     const getStyles = (part: keyof ModalClassNames) => classes[part];
@@ -62,23 +66,24 @@ const ModalRoot = factory<ModalRootFactoryPayload>((_props, ref) => {
                 lockScroll,
                 withinPortal,
                 radius,
+                size,
+                centered,
+                trapFocus,
+                returnFocus,
                 transitionProps,
                 headerId,
-                contentRef,
                 classNames,
                 getStyles
             }}
         >
-            <RemoveScroll enabled={modal.opened && lockScroll}>
-                <div
-                    ref={ref}
-                    id={_id}
-                    className={cx(classes.root, className)}
-                    {...props}
-                >
-                    {children}
-                </div>
-            </RemoveScroll>
+            <div
+                ref={ref}
+                id={_id}
+                className={cx(classes.root, className)}
+                {...props}
+            >
+                {children}
+            </div>
         </ModalProvider>
     );
 });

package/src/components/modal/modal.context.ts

@@ -1,7 +1,7 @@
 import { createSafeContext } from "@refraktor/utils";
 import { RefraktorRadius } from "../../theme";
 import { TransitionProps } from "../transition";
-import { ModalClassNames } from "./modal.types";
+import { ModalClassNames, ModalSize } from "./modal.types";
 import { UseModalReturn } from "./use-modal";
 
 export interface ModalContextValue {
@@ -10,9 +10,12 @@ export interface ModalContextValue {
     lockScroll: boolean;
     withinPortal: boolean;
     radius: RefraktorRadius;
+    size: ModalSize;
+    centered: boolean;
+    trapFocus: boolean;
+    returnFocus: boolean;
     transitionProps?: Omit<TransitionProps, "children" | "mounted">;
     headerId: string;
-    contentRef: React.MutableRefObject<HTMLDivElement | null>;
     classNames?: ModalClassNames;
     getStyles: (part: keyof ModalClassNames) => string | undefined;
 }

package/src/components/modal/modal.test.tsx

@@ -1,6 +1,7 @@
 import { describe, expect, it, vi } from "vitest";
 import { render, screen, userEvent, waitFor } from "../../vitest";
 import Modal from "./modal";
+import { ModalBody } from "./modal-body";
 import { ModalContent } from "./modal-content";
 import { ModalOverlay } from "./modal-overlay";
 import { ModalRoot } from "./modal-root";
@@ -15,14 +16,16 @@ describe("@refraktor/core/Modal", () => {
         const user = userEvent.setup();
 
         await render(
-            <Modal defaultOpened transitionProps={transitionProps}>
+            <Modal.Root defaultOpened transitionProps={transitionProps}>
                 <Modal.Overlay />
 
                 <Modal.Content>
-                    <Modal.Header text="Delete item" />
-                    <p>Are you sure?</p>
+                    <Modal.Header>Delete item</Modal.Header>
+                    <Modal.Body>
+                        <p>Are you sure?</p>
+                    </Modal.Body>
                 </Modal.Content>
-            </Modal>
+            </Modal.Root>
         );
 
         expect(
@@ -41,14 +44,14 @@ describe("@refraktor/core/Modal", () => {
         const onOpenedChange = vi.fn();
 
         await render(
-            <Modal
+            <Modal.Root
                 opened
                 onOpenedChange={onOpenedChange}
                 transitionProps={transitionProps}
             >
                 <Modal.Overlay data-testid="overlay" />
                 <Modal.Content>Controlled modal</Modal.Content>
-            </Modal>
+            </Modal.Root>
         );
 
         await user.click(await screen.findByTestId("overlay"));
@@ -60,9 +63,9 @@ describe("@refraktor/core/Modal", () => {
         const user = userEvent.setup();
 
         await render(
-            <Modal defaultOpened transitionProps={transitionProps}>
+            <Modal.Root defaultOpened transitionProps={transitionProps}>
                 <Modal.Content>Keyboard close</Modal.Content>
-            </Modal>
+            </Modal.Root>
         );
 
         await screen.findByRole("dialog");
@@ -74,73 +77,240 @@ describe("@refraktor/core/Modal", () => {
         });
     });
 
-    it("supports standalone subcomponents with ModalRoot", async () => {
-        await render(
-            <ModalRoot defaultOpened transitionProps={transitionProps}>
-                <ModalOverlay />
-                <ModalContent>Standalone composition</ModalContent>
+    it("supports standalone subcomponents with ModalRoot", async () => {
+        await render(
+            <ModalRoot defaultOpened transitionProps={transitionProps}>
+                <ModalOverlay />
+                <ModalContent>Standalone composition</ModalContent>
             </ModalRoot>
         );
-
-        expect(await screen.findByRole("dialog")).toBeInTheDocument();
-    });
-
-    it("applies custom overlay background opacity and blur", async () => {
-        await render(
-            <Modal defaultOpened transitionProps={transitionProps}>
-                <Modal.Overlay
-                    data-testid="overlay"
-                    backgroundOpacity={0.4}
-                    blur={6}
-                />
-                <Modal.Content>Styled overlay</Modal.Content>
-            </Modal>
-        );
-
-        const overlay = await screen.findByTestId("overlay");
-
-        expect(overlay).toHaveStyle({
-            backgroundColor: "rgba(0, 0, 0, 0.4)",
-            backdropFilter: "blur(6px)"
-        });
-    });
-
-    it("does not set backdrop blur for zero blur", async () => {
-        await render(
-            <Modal defaultOpened transitionProps={transitionProps}>
-                <Modal.Overlay data-testid="overlay" blur={0} />
-                <Modal.Content>No blur</Modal.Content>
-            </Modal>
-        );
-
-        const overlay = await screen.findByTestId("overlay");
-
-        expect(overlay).toHaveStyle({
-            backgroundColor: "rgba(0, 0, 0, 0.5)"
-        });
-        expect(overlay.style.backdropFilter).toBe("");
-    });
-
-    it("locks and unlocks body scroll when enabled", async () => {
-        const user = userEvent.setup();
 
+        expect(await screen.findByRole("dialog")).toBeInTheDocument();
+    });
+
+    it("applies custom overlay background opacity and blur", async () => {
+        await render(
+            <Modal.Root defaultOpened transitionProps={transitionProps}>
+                <Modal.Overlay
+                    data-testid="overlay"
+                    backgroundOpacity={0.4}
+                    blur={6}
+                />
+                <Modal.Content>Styled overlay</Modal.Content>
+            </Modal.Root>
+        );
+
+        const overlay = await screen.findByTestId("overlay");
+
+        expect(overlay).toHaveStyle({
+            backgroundColor: "rgba(0, 0, 0, 0.4)",
+            backdropFilter: "blur(6px)"
+        });
+    });
+
+    it("does not set backdrop blur for zero blur", async () => {
+        await render(
+            <Modal.Root defaultOpened transitionProps={transitionProps}>
+                <Modal.Overlay data-testid="overlay" blur={0} />
+                <Modal.Content>No blur</Modal.Content>
+            </Modal.Root>
+        );
+
+        const overlay = await screen.findByTestId("overlay");
+
+        expect(overlay).toHaveStyle({
+            backgroundColor: "rgba(0, 0, 0, 0.5)"
+        });
+        expect(overlay.style.backdropFilter).toBe("");
+    });
+
+    it("renders Modal.Body subcomponent", async () => {
         await render(
-            <Modal defaultOpened lockScroll transitionProps={transitionProps}>
+            <Modal.Root defaultOpened transitionProps={transitionProps}>
                 <Modal.Content>
-                    Scroll locked
-                    <Modal.Close />
+                    <Modal.Body data-testid="body">Body content</Modal.Body>
                 </Modal.Content>
-            </Modal>
+            </Modal.Root>
         );
 
-        await waitFor(() => {
-            expect(document.body).toHaveAttribute("data-scroll-locked");
+        const body = await screen.findByTestId("body");
+        expect(body).toBeInTheDocument();
+        expect(body).toHaveTextContent("Body content");
+    });
+
+    it("renders standalone ModalBody component", async () => {
+        await render(
+            <ModalRoot defaultOpened transitionProps={transitionProps}>
+                <ModalContent>
+                    <ModalBody data-testid="body">Standalone body</ModalBody>
+                </ModalContent>
+            </ModalRoot>
+        );
+
+        expect(await screen.findByTestId("body")).toHaveTextContent(
+            "Standalone body"
+        );
+    });
+
+    describe("single-component shorthand API", () => {
+        it("renders with title, overlay, close button, and body", async () => {
+            await render(
+                <Modal
+                    defaultOpened
+                    title="Confirm action"
+                    transitionProps={transitionProps}
+                >
+                    <p>Are you sure?</p>
+                </Modal>
+            );
+
+            expect(
+                await screen.findByRole("dialog", { name: "Confirm action" })
+            ).toBeInTheDocument();
+            expect(screen.getByText("Are you sure?")).toBeInTheDocument();
+            expect(
+                screen.getByRole("button", { name: "Close" })
+            ).toBeInTheDocument();
         });
 
-        await user.click(screen.getByRole("button", { name: "Close" }));
+        it("hides overlay when withOverlay is false", async () => {
+            const { container } = await render(
+                <Modal
+                    defaultOpened
+                    title="No overlay"
+                    withOverlay={false}
+                    transitionProps={transitionProps}
+                />
+            );
 
-        await waitFor(() => {
-            expect(document.body).not.toHaveAttribute("data-scroll-locked");
+            expect(await screen.findByRole("dialog")).toBeInTheDocument();
+            expect(
+                container.ownerDocument.querySelector("[aria-hidden='true']")
+            ).toBeNull();
+        });
+
+        it("hides close button when withCloseButton is false", async () => {
+            await render(
+                <Modal
+                    defaultOpened
+                    title="No close"
+                    withCloseButton={false}
+                    transitionProps={transitionProps}
+                />
+            );
+
+            await screen.findByRole("dialog");
+            expect(
+                screen.queryByRole("button", { name: "Close" })
+            ).not.toBeInTheDocument();
+        });
+
+        it("closes via shorthand close button", async () => {
+            const user = userEvent.setup();
+
+            await render(
+                <Modal
+                    defaultOpened
+                    title="Closeable"
+                    transitionProps={transitionProps}
+                >
+                    Content
+                </Modal>
+            );
+
+            await screen.findByRole("dialog");
+
+            await user.click(screen.getByRole("button", { name: "Close" }));
+
+            await waitFor(() => {
+                expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+            });
+        });
+
+        it("passes overlayProps to the overlay", async () => {
+            await render(
+                <Modal
+                    defaultOpened
+                    title="Custom overlay"
+                    overlayProps={{
+                        backgroundOpacity: 0.8,
+                        blur: 10,
+                        "data-testid": "shorthand-overlay"
+                    } as any}
+                    transitionProps={transitionProps}
+                >
+                    Content
+                </Modal>
+            );
+
+            const overlay = await screen.findByTestId("shorthand-overlay");
+
+            expect(overlay).toHaveStyle({
+                backgroundColor: "rgba(0, 0, 0, 0.8)",
+                backdropFilter: "blur(10px)"
+            });
+        });
+    });
+
+    describe("size prop", () => {
+        it("applies md size by default", async () => {
+            await render(
+                <Modal.Root defaultOpened transitionProps={transitionProps}>
+                    <Modal.Content data-testid="content">
+                        Default size
+                    </Modal.Content>
+                </Modal.Root>
+            );
+
+            const dialog = await screen.findByRole("dialog");
+            expect(dialog.className).toContain("max-w-md");
+        });
+
+        it("applies custom size", async () => {
+            await render(
+                <Modal.Root
+                    defaultOpened
+                    size="lg"
+                    transitionProps={transitionProps}
+                >
+                    <Modal.Content>Large modal</Modal.Content>
+                </Modal.Root>
+            );
+
+            const dialog = await screen.findByRole("dialog");
+            expect(dialog.className).toContain("max-w-lg");
+        });
+    });
+
+    describe("centered prop", () => {
+        it("centers vertically by default", async () => {
+            await render(
+                <Modal.Root defaultOpened transitionProps={transitionProps}>
+                    <Modal.Content>Centered</Modal.Content>
+                </Modal.Root>
+            );
+
+            await screen.findByRole("dialog");
+            const wrapper =
+                screen.getByRole("dialog").parentElement?.parentElement;
+            expect(wrapper?.className).toContain("place-items-center");
+        });
+
+        it("positions at top when centered is false", async () => {
+            await render(
+                <Modal.Root
+                    defaultOpened
+                    centered={false}
+                    transitionProps={transitionProps}
+                >
+                    <Modal.Content>Top aligned</Modal.Content>
+                </Modal.Root>
+            );
+
+            await screen.findByRole("dialog");
+            const wrapper =
+                screen.getByRole("dialog").parentElement?.parentElement;
+            expect(wrapper?.className).toContain("items-start");
         });
     });
 });

package/src/components/modal/modal.tsx

@@ -3,16 +3,47 @@ import {
     createComponentConfig,
     factory
 } from "../../utils";
+import { ModalBody } from "./modal-body";
 import { ModalClose } from "./modal-close";
 import { ModalContent } from "./modal-content";
 import { ModalHeader } from "./modal-header";
 import { ModalOverlay } from "./modal-overlay";
 import { ModalRoot } from "./modal-root";
-import { ModalClassNames, ModalFactoryPayload, ModalProps } from "./modal.types";
+import {
+    ModalClassNames,
+    ModalFactoryPayload,
+    ModalProps
+} from "./modal.types";
+
+const Modal = factory<ModalFactoryPayload>(
+    (
+        {
+            title,
+            withOverlay = true,
+            withCloseButton = true,
+            overlayProps,
+            children,
+            ...rootProps
+        },
+        ref
+    ) => {
+        return (
+            <ModalRoot {...rootProps} ref={ref}>
+                {withOverlay && <ModalOverlay {...overlayProps} />}
+
+                <ModalContent>
+                    {(title || withCloseButton) && (
+                        <ModalHeader withClose={withCloseButton}>
+                            {title}
+                        </ModalHeader>
+                    )}
 
-const Modal = factory<ModalFactoryPayload>((props, ref) => {
-    return <ModalRoot {...props} ref={ref} />;
-});
+                    <ModalBody>{children}</ModalBody>
+                </ModalContent>
+            </ModalRoot>
+        );
+    }
+);
 
 Modal.displayName = "@refraktor/core/Modal";
 Modal.configure = createComponentConfig<ModalProps>();
@@ -21,6 +52,7 @@ Modal.Root = ModalRoot;
 Modal.Overlay = ModalOverlay;
 Modal.Content = ModalContent;
 Modal.Header = ModalHeader;
+Modal.Body = ModalBody;
 Modal.Close = ModalClose;
 
 export default Modal;