@refraktor/core 0.0.2 → 0.0.4

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

@@ -1,21 +1,39 @@
+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, className, onMouseDown, ...props }, ref) => {
+    (
+        {
+            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);
 
@@ -37,14 +55,19 @@ const ModalOverlay = factory<ModalOverlayFactoryPayload>(
                 mounted={modal.opened}
                 {...transitionProps}
             >
-                <div
+                <FloatingOverlay
+                    lockScroll={lockScroll}
                     ref={ref}
-                    aria-hidden="true"
                     className={cx(
-                        "fixed inset-0 z-40 bg-gradient-to-b from-black/60 via-black/45 to-black/65 backdrop-blur-[2px]",
+                        "z-40",
                         getStyles("overlay"),
                         className
                     )}
+                    style={{
+                        backgroundColor: `rgba(0, 0, 0, ${backgroundOpacity})`,
+                        backdropFilter: backdropFilterValue,
+                        ...style
+                    }}
                     onMouseDown={handleMouseDown}
                     {...props}
                 />
@@ -52,7 +75,7 @@ const ModalOverlay = factory<ModalOverlayFactoryPayload>(
         );
 
         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");
@@ -85,26 +88,229 @@ describe("@refraktor/core/Modal", () => {
         expect(await screen.findByRole("dialog")).toBeInTheDocument();
     });
 
-    it("locks and unlocks body scroll when enabled", async () => {
-        const user = userEvent.setup();
+    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;

package/src/components/modal/modal.types.ts

@@ -10,19 +10,23 @@ import { ModalRoot } from "./modal-root";
 import { ModalOverlay } from "./modal-overlay";
 import { ModalContent } from "./modal-content";
 import { ModalHeader } from "./modal-header";
+import { ModalBody } from "./modal-body";
 import { ModalClose } from "./modal-close";
 
+export type ModalSize = "xs" | "sm" | "md" | "lg" | "xl" | "full";
+
 export type ModalClassNames = {
     root?: string;
     overlay?: string;
     content?: string;
     header?: string;
+    body?: string;
     close?: string;
 };
 
-export interface ModalProps extends ComponentPropsWithoutRef<"div"> {
+export interface ModalRootProps extends ComponentPropsWithoutRef<"div"> {
     /** Children containing modal subcomponents */
-    children: ReactNode;
+    children?: ReactNode;
 
     /** State of the modal (controlled) */
     opened?: boolean;
@@ -48,6 +52,18 @@ export interface ModalProps extends ComponentPropsWithoutRef<"div"> {
     /** Radius for modal content @default `md` */
     radius?: RefraktorRadius;
 
+    /** Modal content width @default `md` */
+    size?: ModalSize;
+
+    /** Whether to center modal vertically @default `true` */
+    centered?: boolean;
+
+    /** Whether to trap focus within the modal @default `true` */
+    trapFocus?: boolean;
+
+    /** Whether to return focus to trigger after close @default `true` */
+    returnFocus?: boolean;
+
     /** Transition props for overlay/content, uses Transition internally */
     transitionProps?: Omit<TransitionProps, "children" | "mounted">;
 
@@ -58,12 +74,30 @@ export interface ModalProps extends ComponentPropsWithoutRef<"div"> {
     classNames?: ModalClassNames;
 }
 
-export type ModalRootProps = ModalProps;
+export interface ModalProps extends Omit<ModalRootProps, "title"> {
+    /** Title text rendered in the header */
+    title?: ReactNode;
+
+    /** Whether to render the overlay @default `true` */
+    withOverlay?: boolean;
+
+    /** Whether to show the close button in the header @default `true` */
+    withCloseButton?: boolean;
+
+    /** Props passed to the Overlay subcomponent */
+    overlayProps?: ModalOverlayProps;
+}
 
 export interface ModalOverlayProps extends ComponentPropsWithoutRef<"div"> {
     /** Whether clicking the overlay closes modal @default `true` */
     closeOnClick?: boolean;
 
+    /** Overlay background opacity @default `0.5` */
+    backgroundOpacity?: number;
+
+    /** Backdrop blur amount in px (or any CSS length) @default `0` */
+    blur?: number | string;
+
     /** Used for editing root class name */
     className?: string;
 }
@@ -80,9 +114,6 @@ export interface ModalHeaderProps extends ComponentPropsWithoutRef<"div"> {
     /** Header content */
     children?: ReactNode;
 
-    /** Shorthand header text */
-    text?: ReactNode;
-
     /** Whether to show close button inside header @default `true` */
     withClose?: boolean;
 
@@ -90,8 +121,18 @@ export interface ModalHeaderProps extends ComponentPropsWithoutRef<"div"> {
     className?: string;
 }
 
-export interface ModalCloseProps
-    extends Omit<ComponentPropsWithoutRef<"button">, "onClick"> {
+export interface ModalBodyProps extends ComponentPropsWithoutRef<"div"> {
+    /** Body content */
+    children?: ReactNode;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface ModalCloseProps extends Omit<
+    ComponentPropsWithoutRef<"button">,
+    "onClick"
+> {
     /** Optional close content (defaults to `x`) */
     children?: ReactNode;
 
@@ -112,6 +153,7 @@ export interface ModalFactoryPayload extends FactoryPayload {
         Overlay: typeof ModalOverlay;
         Content: typeof ModalContent;
         Header: typeof ModalHeader;
+        Body: typeof ModalBody;
         Close: typeof ModalClose;
     };
 }
@@ -136,6 +178,11 @@ export interface ModalHeaderFactoryPayload extends FactoryPayload {
     ref: HTMLDivElement;
 }
 
+export interface ModalBodyFactoryPayload extends FactoryPayload {
+    props: ModalBodyProps;
+    ref: HTMLDivElement;
+}
+
 export interface ModalCloseFactoryPayload extends FactoryPayload {
     props: ModalCloseProps;
     ref: HTMLButtonElement;