@refraktor/core 0.0.3 → 0.0.4

package/src/components/drawer/drawer-content/drawer-content.tsx

@@ -1,6 +1,9 @@
+import {
+    FloatingFocusManager,
+    FloatingPortal
+} from "@floating-ui/react";
 import { useTheme } from "../../../theme";
 import { factory } from "../../../utils";
-import { Portal } from "../../portal";
 import { Transition, TransitionProps } from "../../transition";
 import { useDrawerContext } from "../drawer.context";
 import { DrawerContentFactoryPayload, DrawerPosition } from "../drawer.types";
@@ -32,14 +35,15 @@ const DrawerContent = factory<DrawerContentFactoryPayload>(
             radius,
             position,
             size,
+            trapFocus,
+            returnFocus,
             transitionProps,
             headerId,
-            contentRef,
             getStyles
         } = useDrawerContext();
 
         const setRefs = (node: HTMLDivElement | null) => {
-            contentRef.current = node;
+            drawer.refs.setFloating(node);
 
             if (typeof ref === "function") {
                 ref(node);
@@ -64,32 +68,65 @@ const DrawerContent = factory<DrawerContentFactoryPayload>(
                     transitionClassName
                 )}
             >
-                <div
-                    ref={setRefs}
-                    role="dialog"
-                    aria-modal="true"
-                    aria-labelledby={headerId}
-                    data-opened={drawer.opened}
-                    data-position={position}
-                    style={{
-                        ...sizeStyles,
-                        ...style
-                    }}
-                    className={cx(
-                        "pointer-events-auto fixed z-50 border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] p-4 text-[var(--refraktor-text)] shadow-md",
-                        positionClasses[position],
-                        getRadius(radius),
-                        getStyles("content"),
-                        className
-                    )}
-                    {...props}
-                >
-                    {children}
-                </div>
+                {drawer.opened ? (
+                    <FloatingFocusManager
+                        context={drawer.context}
+                        modal={trapFocus}
+                        returnFocus={returnFocus}
+                        outsideElementsInert={false}
+                    >
+                        <div
+                            ref={setRefs}
+                            aria-labelledby={headerId}
+                            data-opened={drawer.opened}
+                            data-position={position}
+                            style={{
+                                ...sizeStyles,
+                                ...style
+                            }}
+                            className={cx(
+                                "pointer-events-auto fixed z-50 border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] p-4 text-[var(--refraktor-text)] shadow-md",
+                                positionClasses[position],
+                                getRadius(radius),
+                                getStyles("content"),
+                                className
+                            )}
+                            {...drawer.getFloatingProps()}
+                            {...props}
+                        >
+                            {children}
+                        </div>
+                    </FloatingFocusManager>
+                ) : (
+                    <div
+                        ref={setRefs}
+                        aria-labelledby={headerId}
+                        data-opened={drawer.opened}
+                        data-position={position}
+                        style={{
+                            ...sizeStyles,
+                            ...style
+                        }}
+                        className={cx(
+                            "pointer-events-auto fixed z-50 border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] p-4 text-[var(--refraktor-text)] shadow-md",
+                            positionClasses[position],
+                            getRadius(radius),
+                            getStyles("content"),
+                            className
+                        )}
+                        {...props}
+                    >
+                        {children}
+                    </div>
+                )}
             </Transition>
         );
 
-        return withinPortal ? <Portal>{content}</Portal> : content;
+        return withinPortal ? (
+            <FloatingPortal>{content}</FloatingPortal>
+        ) : (
+            content
+        );
     }
 );
 

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

@@ -1,6 +1,6 @@
+import { FloatingOverlay, FloatingPortal } from "@floating-ui/react";
 import { useTheme } from "../../../theme";
 import { factory } from "../../../utils";
-import { Portal } from "../../portal";
 import { Transition } from "../../transition";
 import { useDrawerContext } from "../drawer.context";
 import { DrawerOverlayFactoryPayload } from "../drawer.types";
@@ -22,6 +22,7 @@ const DrawerOverlay = factory<DrawerOverlayFactoryPayload>(
         const {
             drawer,
             closeOnClickOutside,
+            lockScroll,
             withinPortal,
             transitionProps,
             getStyles
@@ -54,11 +55,11 @@ const DrawerOverlay = factory<DrawerOverlayFactoryPayload>(
                 mounted={drawer.opened}
                 {...transitionProps}
             >
-                <div
+                <FloatingOverlay
+                    lockScroll={lockScroll}
                     ref={ref}
-                    aria-hidden="true"
                     className={cx(
-                        "fixed inset-0 z-40",
+                        "z-40",
                         getStyles("overlay"),
                         className
                     )}
@@ -74,7 +75,7 @@ const DrawerOverlay = factory<DrawerOverlayFactoryPayload>(
         );
 
         return withinPortal ? (
-            <Portal>{overlayContent}</Portal>
+            <FloatingPortal>{overlayContent}</FloatingPortal>
         ) : (
             overlayContent
         );

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

@@ -1,15 +1,13 @@
 import { useId } from "@refraktor/utils";
-import { useRef } from "react";
-import { RemoveScroll } from "react-remove-scroll";
 import { useTheme } from "../../../theme";
 import { factory, useClassNames, useProps } from "../../../utils";
 import { DrawerProvider } from "../drawer.context";
+import { useDrawer } from "../use-drawer";
 import {
     DrawerClassNames,
     DrawerRootFactoryPayload,
     DrawerRootProps
 } from "../drawer.types";
-import { useDrawer } from "../use-drawer";
 
 const defaultProps = {
     closeOnClickOutside: true,
@@ -18,7 +16,9 @@ const defaultProps = {
     withinPortal: true,
     radius: "none",
     position: "right",
-    size: "md"
+    size: "md",
+    trapFocus: true,
+    returnFocus: true
 } satisfies Partial<DrawerRootProps>;
 
 const DrawerRoot = factory<DrawerRootFactoryPayload>((_props, ref) => {
@@ -36,6 +36,8 @@ const DrawerRoot = factory<DrawerRootFactoryPayload>((_props, ref) => {
         radius,
         position,
         size,
+        trapFocus,
+        returnFocus,
         transitionProps,
         className,
         classNames,
@@ -45,15 +47,13 @@ const DrawerRoot = factory<DrawerRootFactoryPayload>((_props, ref) => {
 
     const _id = useId(id);
     const headerId = `${_id}-header`;
-    const contentRef = useRef<HTMLDivElement | null>(null);
 
     const drawer = useDrawer({
         opened,
         defaultOpened,
         onOpenedChange,
         closeOnClickOutside,
-        closeOnEscape,
-        contentRef
+        closeOnEscape
     });
 
     const getStyles = (part: keyof DrawerClassNames) => classes[part];
@@ -68,23 +68,22 @@ const DrawerRoot = factory<DrawerRootFactoryPayload>((_props, ref) => {
                 radius,
                 position,
                 size,
+                trapFocus,
+                returnFocus,
                 transitionProps,
                 headerId,
-                contentRef,
                 classNames,
                 getStyles
             }}
         >
-            <RemoveScroll enabled={drawer.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>
         </DrawerProvider>
     );
 });

package/src/components/drawer/drawer.context.ts

@@ -12,9 +12,10 @@ export interface DrawerContextValue {
     radius: RefraktorRadius;
     position: DrawerPosition;
     size: RefraktorSize;
+    trapFocus: boolean;
+    returnFocus: boolean;
     transitionProps?: Omit<TransitionProps, "children" | "mounted">;
     headerId: string;
-    contentRef: React.MutableRefObject<HTMLDivElement | null>;
     classNames?: DrawerClassNames;
     getStyles: (part: keyof DrawerClassNames) => string | undefined;
 }

package/src/components/drawer/drawer.test.tsx

@@ -1,6 +1,7 @@
 import { describe, expect, it, vi } from "vitest";
 import { render, screen, userEvent, waitFor } from "../../vitest";
 import Drawer from "./drawer";
+import { DrawerBody } from "./drawer-body";
 import { DrawerContent } from "./drawer-content";
 import { DrawerOverlay } from "./drawer-overlay";
 import { DrawerRoot } from "./drawer-root";
@@ -15,14 +16,16 @@ describe("@refraktor/core/Drawer", () => {
         const user = userEvent.setup();
 
         await render(
-            <Drawer defaultOpened transitionProps={transitionProps}>
+            <Drawer.Root defaultOpened transitionProps={transitionProps}>
                 <Drawer.Overlay />
 
                 <Drawer.Content>
                     <Drawer.Header text="Edit profile" />
-                    <p>Drawer body</p>
+                    <Drawer.Body>
+                        <p>Drawer body</p>
+                    </Drawer.Body>
                 </Drawer.Content>
-            </Drawer>
+            </Drawer.Root>
         );
 
         expect(
@@ -41,14 +44,14 @@ describe("@refraktor/core/Drawer", () => {
         const onOpenedChange = vi.fn();
 
         await render(
-            <Drawer
+            <Drawer.Root
                 opened
                 onOpenedChange={onOpenedChange}
                 transitionProps={transitionProps}
             >
                 <Drawer.Overlay data-testid="overlay" />
                 <Drawer.Content>Controlled drawer</Drawer.Content>
-            </Drawer>
+            </Drawer.Root>
         );
 
         await user.click(await screen.findByTestId("overlay"));
@@ -60,9 +63,9 @@ describe("@refraktor/core/Drawer", () => {
         const user = userEvent.setup();
 
         await render(
-            <Drawer defaultOpened transitionProps={transitionProps}>
+            <Drawer.Root defaultOpened transitionProps={transitionProps}>
                 <Drawer.Content>Keyboard close</Drawer.Content>
-            </Drawer>
+            </Drawer.Root>
         );
 
         await screen.findByRole("dialog");
@@ -87,14 +90,14 @@ describe("@refraktor/core/Drawer", () => {
 
     it("applies custom overlay background opacity and blur", async () => {
         await render(
-            <Drawer defaultOpened transitionProps={transitionProps}>
+            <Drawer.Root defaultOpened transitionProps={transitionProps}>
                 <Drawer.Overlay
                     data-testid="overlay"
                     backgroundOpacity={0.4}
                     blur={6}
                 />
                 <Drawer.Content>Styled overlay</Drawer.Content>
-            </Drawer>
+            </Drawer.Root>
         );
 
         const overlay = await screen.findByTestId("overlay");
@@ -105,33 +108,10 @@ describe("@refraktor/core/Drawer", () => {
         });
     });
 
-    it("locks and unlocks body scroll when enabled", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Drawer defaultOpened lockScroll transitionProps={transitionProps}>
-                <Drawer.Content>
-                    Scroll locked
-                    <Drawer.Close />
-                </Drawer.Content>
-            </Drawer>
-        );
-
-        await waitFor(() => {
-            expect(document.body).toHaveAttribute("data-scroll-locked");
-        });
-
-        await user.click(screen.getByRole("button", { name: "Close" }));
-
-        await waitFor(() => {
-            expect(document.body).not.toHaveAttribute("data-scroll-locked");
-        });
-    });
-
     it("supports different positions and predefined sizes", async () => {
         await render(
             <>
-                <Drawer
+                <Drawer.Root
                     defaultOpened
                     position="left"
                     size="sm"
@@ -140,9 +120,9 @@ describe("@refraktor/core/Drawer", () => {
                     <Drawer.Content data-testid="left-content">
                         Left
                     </Drawer.Content>
-                </Drawer>
+                </Drawer.Root>
 
-                <Drawer
+                <Drawer.Root
                     defaultOpened
                     position="bottom"
                     size="xl"
@@ -151,7 +131,7 @@ describe("@refraktor/core/Drawer", () => {
                     <Drawer.Content data-testid="bottom-content">
                         Bottom
                     </Drawer.Content>
-                </Drawer>
+                </Drawer.Root>
             </>
         );
 
@@ -163,4 +143,132 @@ describe("@refraktor/core/Drawer", () => {
         expect(bottomContent).toHaveAttribute("data-position", "bottom");
         expect(bottomContent).toHaveStyle({ height: "36rem" });
     });
+
+    it("renders Drawer.Body subcomponent", async () => {
+        await render(
+            <Drawer.Root defaultOpened transitionProps={transitionProps}>
+                <Drawer.Content>
+                    <Drawer.Body data-testid="body">Body content</Drawer.Body>
+                </Drawer.Content>
+            </Drawer.Root>
+        );
+
+        const body = await screen.findByTestId("body");
+        expect(body).toBeInTheDocument();
+        expect(body).toHaveTextContent("Body content");
+    });
+
+    it("renders standalone DrawerBody component", async () => {
+        await render(
+            <DrawerRoot defaultOpened transitionProps={transitionProps}>
+                <DrawerContent>
+                    <DrawerBody data-testid="body">Standalone body</DrawerBody>
+                </DrawerContent>
+            </DrawerRoot>
+        );
+
+        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(
+                <Drawer
+                    defaultOpened
+                    title="Edit profile"
+                    transitionProps={transitionProps}
+                >
+                    <p>Profile form</p>
+                </Drawer>
+            );
+
+            expect(
+                await screen.findByRole("dialog", { name: "Edit profile" })
+            ).toBeInTheDocument();
+            expect(screen.getByText("Profile form")).toBeInTheDocument();
+            expect(
+                screen.getByRole("button", { name: "Close" })
+            ).toBeInTheDocument();
+        });
+
+        it("hides overlay when withOverlay is false", async () => {
+            const { container } = await render(
+                <Drawer
+                    defaultOpened
+                    title="No overlay"
+                    withOverlay={false}
+                    transitionProps={transitionProps}
+                />
+            );
+
+            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(
+                <Drawer
+                    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(
+                <Drawer
+                    defaultOpened
+                    title="Closeable"
+                    transitionProps={transitionProps}
+                >
+                    Content
+                </Drawer>
+            );
+
+            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(
+                <Drawer
+                    defaultOpened
+                    title="Custom overlay"
+                    overlayProps={{
+                        backgroundOpacity: 0.8,
+                        blur: 10,
+                        "data-testid": "shorthand-overlay"
+                    } as any}
+                    transitionProps={transitionProps}
+                >
+                    Content
+                </Drawer>
+            );
+
+            const overlay = await screen.findByTestId("shorthand-overlay");
+
+            expect(overlay).toHaveStyle({
+                backgroundColor: "rgba(0, 0, 0, 0.8)",
+                backdropFilter: "blur(10px)"
+            });
+        });
+    });
 });

package/src/components/drawer/drawer.tsx

@@ -3,6 +3,7 @@ import {
     createComponentConfig,
     factory
 } from "../../utils";
+import { DrawerBody } from "./drawer-body";
 import { DrawerClose } from "./drawer-close";
 import { DrawerContent } from "./drawer-content";
 import { DrawerHeader } from "./drawer-header";
@@ -14,9 +15,35 @@ import {
     DrawerProps
 } from "./drawer.types";
 
-const Drawer = factory<DrawerFactoryPayload>((props, ref) => {
-    return <DrawerRoot {...props} ref={ref} />;
-});
+const Drawer = factory<DrawerFactoryPayload>(
+    (
+        {
+            title,
+            withOverlay = true,
+            withCloseButton = true,
+            overlayProps,
+            children,
+            ...rootProps
+        },
+        ref
+    ) => {
+        return (
+            <DrawerRoot {...rootProps} ref={ref}>
+                {withOverlay && <DrawerOverlay {...overlayProps} />}
+
+                <DrawerContent>
+                    {(title || withCloseButton) && (
+                        <DrawerHeader withClose={withCloseButton}>
+                            {title}
+                        </DrawerHeader>
+                    )}
+
+                    <DrawerBody>{children}</DrawerBody>
+                </DrawerContent>
+            </DrawerRoot>
+        );
+    }
+);
 
 Drawer.displayName = "@refraktor/core/Drawer";
 Drawer.configure = createComponentConfig<DrawerProps>();
@@ -25,6 +52,7 @@ Drawer.Root = DrawerRoot;
 Drawer.Overlay = DrawerOverlay;
 Drawer.Content = DrawerContent;
 Drawer.Header = DrawerHeader;
+Drawer.Body = DrawerBody;
 Drawer.Close = DrawerClose;
 
 export default Drawer;

package/src/components/drawer/drawer.types.ts

@@ -10,6 +10,7 @@ import { DrawerRoot } from "./drawer-root";
 import { DrawerOverlay } from "./drawer-overlay";
 import { DrawerContent } from "./drawer-content";
 import { DrawerHeader } from "./drawer-header";
+import { DrawerBody } from "./drawer-body";
 import { DrawerClose } from "./drawer-close";
 
 export type DrawerPosition = "left" | "right" | "top" | "bottom";
@@ -19,12 +20,13 @@ export type DrawerClassNames = {
     overlay?: string;
     content?: string;
     header?: string;
+    body?: string;
     close?: string;
 };
 
-export interface DrawerProps extends ComponentPropsWithoutRef<"div"> {
+export interface DrawerRootProps extends ComponentPropsWithoutRef<"div"> {
     /** Children containing drawer subcomponents */
-    children: ReactNode;
+    children?: ReactNode;
 
     /** State of the drawer (controlled) */
     opened?: boolean;
@@ -56,6 +58,12 @@ export interface DrawerProps extends ComponentPropsWithoutRef<"div"> {
     /** Drawer size scale (width for left/right, height for top/bottom) @default `md` */
     size?: RefraktorSize;
 
+    /** Whether to trap focus within the drawer @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">;
 
@@ -66,7 +74,19 @@ export interface DrawerProps extends ComponentPropsWithoutRef<"div"> {
     classNames?: DrawerClassNames;
 }
 
-export type DrawerRootProps = DrawerProps;
+export interface DrawerProps extends Omit<DrawerRootProps, "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?: DrawerOverlayProps;
+}
 
 export interface DrawerOverlayProps extends ComponentPropsWithoutRef<"div"> {
     /** Whether clicking the overlay closes drawer @default `true` */
@@ -104,6 +124,14 @@ export interface DrawerHeaderProps extends ComponentPropsWithoutRef<"div"> {
     className?: string;
 }
 
+export interface DrawerBodyProps extends ComponentPropsWithoutRef<"div"> {
+    /** Body content */
+    children?: ReactNode;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
 export interface DrawerCloseProps extends Omit<
     ComponentPropsWithoutRef<"button">,
     "onClick"
@@ -128,6 +156,7 @@ export interface DrawerFactoryPayload extends FactoryPayload {
         Overlay: typeof DrawerOverlay;
         Content: typeof DrawerContent;
         Header: typeof DrawerHeader;
+        Body: typeof DrawerBody;
         Close: typeof DrawerClose;
     };
 }
@@ -152,6 +181,11 @@ export interface DrawerHeaderFactoryPayload extends FactoryPayload {
     ref: HTMLDivElement;
 }
 
+export interface DrawerBodyFactoryPayload extends FactoryPayload {
+    props: DrawerBodyProps;
+    ref: HTMLDivElement;
+}
+
 export interface DrawerCloseFactoryPayload extends FactoryPayload {
     props: DrawerCloseProps;
     ref: HTMLButtonElement;

package/src/components/drawer/index.ts

@@ -3,6 +3,7 @@ export { DrawerRoot } from "./drawer-root";
 export { DrawerOverlay } from "./drawer-overlay";
 export { DrawerContent } from "./drawer-content";
 export { DrawerHeader } from "./drawer-header";
+export { DrawerBody } from "./drawer-body";
 export { DrawerClose } from "./drawer-close";
 export type {
     DrawerProps,
@@ -10,6 +11,7 @@ export type {
     DrawerOverlayProps,
     DrawerContentProps,
     DrawerHeaderProps,
+    DrawerBodyProps,
     DrawerCloseProps,
     DrawerClassNames,
     DrawerPosition