@refraktor/core 0.0.1 → 0.0.3

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

@@ -0,0 +1,94 @@
+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 {
+    DrawerClassNames,
+    DrawerRootFactoryPayload,
+    DrawerRootProps
+} from "../drawer.types";
+import { useDrawer } from "../use-drawer";
+
+const defaultProps = {
+    closeOnClickOutside: true,
+    closeOnEscape: true,
+    lockScroll: true,
+    withinPortal: true,
+    radius: "none",
+    position: "right",
+    size: "md"
+} satisfies Partial<DrawerRootProps>;
+
+const DrawerRoot = factory<DrawerRootFactoryPayload>((_props, ref) => {
+    const { cx } = useTheme();
+    const {
+        id,
+        children,
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        closeOnClickOutside,
+        closeOnEscape,
+        lockScroll,
+        withinPortal,
+        radius,
+        position,
+        size,
+        transitionProps,
+        className,
+        classNames,
+        ...props
+    } = useProps("Drawer", defaultProps, _props);
+    const classes = useClassNames("Drawer", classNames);
+
+    const _id = useId(id);
+    const headerId = `${_id}-header`;
+    const contentRef = useRef<HTMLDivElement | null>(null);
+
+    const drawer = useDrawer({
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        closeOnClickOutside,
+        closeOnEscape,
+        contentRef
+    });
+
+    const getStyles = (part: keyof DrawerClassNames) => classes[part];
+
+    return (
+        <DrawerProvider
+            value={{
+                drawer,
+                closeOnClickOutside,
+                lockScroll,
+                withinPortal,
+                radius,
+                position,
+                size,
+                transitionProps,
+                headerId,
+                contentRef,
+                classNames,
+                getStyles
+            }}
+        >
+            <RemoveScroll enabled={drawer.opened && lockScroll}>
+                <div
+                    ref={ref}
+                    id={_id}
+                    className={cx(classes.root, className)}
+                    {...props}
+                >
+                    {children}
+                </div>
+            </RemoveScroll>
+        </DrawerProvider>
+    );
+});
+
+DrawerRoot.displayName = "@refraktor/core/Drawer.Root";
+
+export default DrawerRoot;

package/src/components/drawer/drawer-root/index.ts

@@ -0,0 +1 @@
+export { default as DrawerRoot } from "./drawer-root";

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

@@ -0,0 +1,25 @@
+import { createSafeContext } from "@refraktor/utils";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { TransitionProps } from "../transition";
+import { DrawerClassNames, DrawerPosition } from "./drawer.types";
+import { UseDrawerReturn } from "./use-drawer";
+
+export interface DrawerContextValue {
+    drawer: UseDrawerReturn;
+    closeOnClickOutside: boolean;
+    lockScroll: boolean;
+    withinPortal: boolean;
+    radius: RefraktorRadius;
+    position: DrawerPosition;
+    size: RefraktorSize;
+    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
+    headerId: string;
+    contentRef: React.MutableRefObject<HTMLDivElement | null>;
+    classNames?: DrawerClassNames;
+    getStyles: (part: keyof DrawerClassNames) => string | undefined;
+}
+
+export const [DrawerProvider, useDrawerContext] =
+    createSafeContext<DrawerContextValue>(
+        "Drawer context was not found in tree. Make sure Drawer subcomponents are wrapped with Drawer or DrawerRoot."
+    );

package/src/components/drawer/drawer.styles.ts

@@ -0,0 +1,32 @@
+import { CSSProperties } from "react";
+import { RefraktorSize } from "../../theme";
+import { DrawerPosition } from "./drawer.types";
+
+const sizes: Record<RefraktorSize, string> = {
+    xs: "16rem",
+    sm: "20rem",
+    md: "24rem",
+    lg: "30rem",
+    xl: "36rem"
+};
+
+export const getSize = (size: RefraktorSize = "md") => sizes[size];
+
+export function getSizeStyles(
+    position: DrawerPosition,
+    size: RefraktorSize = "md"
+): CSSProperties {
+    const resolvedSize = getSize(size);
+
+    if (position === "left" || position === "right") {
+        return {
+            width: resolvedSize,
+            maxWidth: "100vw"
+        };
+    }
+
+    return {
+        height: resolvedSize,
+        maxHeight: "100vh"
+    };
+}

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

@@ -0,0 +1,166 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, userEvent, waitFor } from "../../vitest";
+import Drawer from "./drawer";
+import { DrawerContent } from "./drawer-content";
+import { DrawerOverlay } from "./drawer-overlay";
+import { DrawerRoot } from "./drawer-root";
+
+describe("@refraktor/core/Drawer", () => {
+    const transitionProps = {
+        duration: 0,
+        immediate: true
+    } as const;
+
+    it("renders with compound subcomponents and closes with header close button", async () => {
+        const user = userEvent.setup();
+
+        await render(
+            <Drawer defaultOpened transitionProps={transitionProps}>
+                <Drawer.Overlay />
+
+                <Drawer.Content>
+                    <Drawer.Header text="Edit profile" />
+                    <p>Drawer body</p>
+                </Drawer.Content>
+            </Drawer>
+        );
+
+        expect(
+            await screen.findByRole("dialog", { name: "Edit profile" })
+        ).toBeInTheDocument();
+
+        await user.click(screen.getByRole("button", { name: "Close" }));
+
+        await waitFor(() => {
+            expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+        });
+    });
+
+    it("calls onOpenedChange when clicking overlay in controlled mode", async () => {
+        const user = userEvent.setup();
+        const onOpenedChange = vi.fn();
+
+        await render(
+            <Drawer
+                opened
+                onOpenedChange={onOpenedChange}
+                transitionProps={transitionProps}
+            >
+                <Drawer.Overlay data-testid="overlay" />
+                <Drawer.Content>Controlled drawer</Drawer.Content>
+            </Drawer>
+        );
+
+        await user.click(await screen.findByTestId("overlay"));
+
+        expect(onOpenedChange).toHaveBeenCalledWith(false);
+    });
+
+    it("closes on Escape key", async () => {
+        const user = userEvent.setup();
+
+        await render(
+            <Drawer defaultOpened transitionProps={transitionProps}>
+                <Drawer.Content>Keyboard close</Drawer.Content>
+            </Drawer>
+        );
+
+        await screen.findByRole("dialog");
+
+        await user.keyboard("{Escape}");
+
+        await waitFor(() => {
+            expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+        });
+    });
+
+    it("supports standalone subcomponents with DrawerRoot", async () => {
+        await render(
+            <DrawerRoot defaultOpened transitionProps={transitionProps}>
+                <DrawerOverlay />
+                <DrawerContent>Standalone composition</DrawerContent>
+            </DrawerRoot>
+        );
+
+        expect(await screen.findByRole("dialog")).toBeInTheDocument();
+    });
+
+    it("applies custom overlay background opacity and blur", async () => {
+        await render(
+            <Drawer defaultOpened transitionProps={transitionProps}>
+                <Drawer.Overlay
+                    data-testid="overlay"
+                    backgroundOpacity={0.4}
+                    blur={6}
+                />
+                <Drawer.Content>Styled overlay</Drawer.Content>
+            </Drawer>
+        );
+
+        const overlay = await screen.findByTestId("overlay");
+
+        expect(overlay).toHaveStyle({
+            backgroundColor: "rgba(0, 0, 0, 0.4)",
+            backdropFilter: "blur(6px)"
+        });
+    });
+
+    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
+                    defaultOpened
+                    position="left"
+                    size="sm"
+                    transitionProps={transitionProps}
+                >
+                    <Drawer.Content data-testid="left-content">
+                        Left
+                    </Drawer.Content>
+                </Drawer>
+
+                <Drawer
+                    defaultOpened
+                    position="bottom"
+                    size="xl"
+                    transitionProps={transitionProps}
+                >
+                    <Drawer.Content data-testid="bottom-content">
+                        Bottom
+                    </Drawer.Content>
+                </Drawer>
+            </>
+        );
+
+        const leftContent = await screen.findByTestId("left-content");
+        const bottomContent = await screen.findByTestId("bottom-content");
+
+        expect(leftContent).toHaveAttribute("data-position", "left");
+        expect(leftContent).toHaveStyle({ width: "20rem" });
+        expect(bottomContent).toHaveAttribute("data-position", "bottom");
+        expect(bottomContent).toHaveStyle({ height: "36rem" });
+    });
+});

package/src/components/drawer/drawer.tsx

@@ -0,0 +1,30 @@
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory
+} from "../../utils";
+import { DrawerClose } from "./drawer-close";
+import { DrawerContent } from "./drawer-content";
+import { DrawerHeader } from "./drawer-header";
+import { DrawerOverlay } from "./drawer-overlay";
+import { DrawerRoot } from "./drawer-root";
+import {
+    DrawerClassNames,
+    DrawerFactoryPayload,
+    DrawerProps
+} from "./drawer.types";
+
+const Drawer = factory<DrawerFactoryPayload>((props, ref) => {
+    return <DrawerRoot {...props} ref={ref} />;
+});
+
+Drawer.displayName = "@refraktor/core/Drawer";
+Drawer.configure = createComponentConfig<DrawerProps>();
+Drawer.classNames = createClassNamesConfig<DrawerClassNames>();
+Drawer.Root = DrawerRoot;
+Drawer.Overlay = DrawerOverlay;
+Drawer.Content = DrawerContent;
+Drawer.Header = DrawerHeader;
+Drawer.Close = DrawerClose;
+
+export default Drawer;

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

@@ -0,0 +1,158 @@
+import { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    FactoryPayload
+} from "../../utils";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { TransitionProps } from "../transition";
+import { DrawerRoot } from "./drawer-root";
+import { DrawerOverlay } from "./drawer-overlay";
+import { DrawerContent } from "./drawer-content";
+import { DrawerHeader } from "./drawer-header";
+import { DrawerClose } from "./drawer-close";
+
+export type DrawerPosition = "left" | "right" | "top" | "bottom";
+
+export type DrawerClassNames = {
+    root?: string;
+    overlay?: string;
+    content?: string;
+    header?: string;
+    close?: string;
+};
+
+export interface DrawerProps extends ComponentPropsWithoutRef<"div"> {
+    /** Children containing drawer subcomponents */
+    children: ReactNode;
+
+    /** State of the drawer (controlled) */
+    opened?: boolean;
+
+    /** Initial state of the drawer (uncontrolled) */
+    defaultOpened?: boolean;
+
+    /** Callback called when drawer state changes */
+    onOpenedChange?: (opened: boolean) => void;
+
+    /** Whether to close drawer on overlay/outside click @default `true` */
+    closeOnClickOutside?: boolean;
+
+    /** Whether to close drawer on Escape key @default `true` */
+    closeOnEscape?: boolean;
+
+    /** Whether to lock body scroll while opened @default `true` */
+    lockScroll?: boolean;
+
+    /** Whether to render overlay/content inside portal @default `true` */
+    withinPortal?: boolean;
+
+    /** Radius for drawer content @default `none` */
+    radius?: RefraktorRadius;
+
+    /** Side where drawer appears @default `right` */
+    position?: DrawerPosition;
+
+    /** Drawer size scale (width for left/right, height for top/bottom) @default `md` */
+    size?: RefraktorSize;
+
+    /** Transition props for overlay/content, uses Transition internally */
+    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
+
+    /** Used for editing root class name */
+    className?: string;
+
+    /** Used for styling different parts of the component */
+    classNames?: DrawerClassNames;
+}
+
+export type DrawerRootProps = DrawerProps;
+
+export interface DrawerOverlayProps extends ComponentPropsWithoutRef<"div"> {
+    /** Whether clicking the overlay closes drawer @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;
+}
+
+export interface DrawerContentProps extends ComponentPropsWithoutRef<"div"> {
+    /** Drawer body content */
+    children: ReactNode;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface DrawerHeaderProps extends ComponentPropsWithoutRef<"div"> {
+    /** Header content */
+    children?: ReactNode;
+
+    /** Shorthand header text */
+    text?: ReactNode;
+
+    /** Whether to show close button inside header @default `true` */
+    withClose?: boolean;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface DrawerCloseProps extends Omit<
+    ComponentPropsWithoutRef<"button">,
+    "onClick"
+> {
+    /** Optional close content (defaults to `x`) */
+    children?: ReactNode;
+
+    /** Click callback fired before closing */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface DrawerFactoryPayload extends FactoryPayload {
+    props: DrawerProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<DrawerProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<DrawerClassNames>>;
+        Root: typeof DrawerRoot;
+        Overlay: typeof DrawerOverlay;
+        Content: typeof DrawerContent;
+        Header: typeof DrawerHeader;
+        Close: typeof DrawerClose;
+    };
+}
+
+export interface DrawerRootFactoryPayload extends FactoryPayload {
+    props: DrawerRootProps;
+    ref: HTMLDivElement;
+}
+
+export interface DrawerOverlayFactoryPayload extends FactoryPayload {
+    props: DrawerOverlayProps;
+    ref: HTMLDivElement;
+}
+
+export interface DrawerContentFactoryPayload extends FactoryPayload {
+    props: DrawerContentProps;
+    ref: HTMLDivElement;
+}
+
+export interface DrawerHeaderFactoryPayload extends FactoryPayload {
+    props: DrawerHeaderProps;
+    ref: HTMLDivElement;
+}
+
+export interface DrawerCloseFactoryPayload extends FactoryPayload {
+    props: DrawerCloseProps;
+    ref: HTMLButtonElement;
+}

package/src/components/drawer/index.ts

@@ -0,0 +1,16 @@
+export { default as Drawer } from "./drawer";
+export { DrawerRoot } from "./drawer-root";
+export { DrawerOverlay } from "./drawer-overlay";
+export { DrawerContent } from "./drawer-content";
+export { DrawerHeader } from "./drawer-header";
+export { DrawerClose } from "./drawer-close";
+export type {
+    DrawerProps,
+    DrawerRootProps,
+    DrawerOverlayProps,
+    DrawerContentProps,
+    DrawerHeaderProps,
+    DrawerCloseProps,
+    DrawerClassNames,
+    DrawerPosition
+} from "./drawer.types";

package/src/components/drawer/use-drawer.ts

@@ -0,0 +1,101 @@
+import { useUncontrolled } from "@refraktor/utils";
+import { useCallback, useEffect } from "react";
+
+interface UseDrawerProps {
+    opened?: boolean;
+    defaultOpened?: boolean;
+    onOpenedChange?: (opened: boolean) => void;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+    contentRef: React.MutableRefObject<HTMLElement | null>;
+}
+
+export interface UseDrawerReturn {
+    opened: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+}
+
+export function useDrawer(options: UseDrawerProps): UseDrawerReturn {
+    const {
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        closeOnClickOutside = true,
+        closeOnEscape = true,
+        contentRef
+    } = options;
+
+    const [isOpen, setIsOpen] = useUncontrolled({
+        value: opened,
+        defaultValue: defaultOpened,
+        finalValue: false,
+        onChange: onOpenedChange
+    });
+
+    const open = useCallback(() => {
+        setIsOpen(true);
+    }, [setIsOpen]);
+
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, [setIsOpen]);
+
+    const toggle = useCallback(() => {
+        setIsOpen(!isOpen);
+    }, [isOpen, setIsOpen]);
+
+    useEffect(() => {
+        if (!isOpen || !closeOnEscape) {
+            return;
+        }
+
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.key === "Escape") {
+                setIsOpen(false);
+            }
+        };
+
+        document.addEventListener("keydown", handleKeyDown);
+
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [closeOnEscape, isOpen, setIsOpen]);
+
+    useEffect(() => {
+        if (!isOpen || !closeOnClickOutside) {
+            return;
+        }
+
+        const handlePointerDown = (event: MouseEvent | TouchEvent) => {
+            const target = event.target;
+
+            if (!(target instanceof Node)) {
+                return;
+            }
+
+            if (contentRef.current?.contains(target)) {
+                return;
+            }
+
+            setIsOpen(false);
+        };
+
+        document.addEventListener("mousedown", handlePointerDown);
+        document.addEventListener("touchstart", handlePointerDown);
+
+        return () => {
+            document.removeEventListener("mousedown", handlePointerDown);
+            document.removeEventListener("touchstart", handlePointerDown);
+        };
+    }, [closeOnClickOutside, contentRef, isOpen, setIsOpen]);
+
+    return {
+        opened: isOpen,
+        open,
+        close,
+        toggle
+    };
+}

package/src/components/index.ts

@@ -1,9 +1,11 @@
 export * from "./accordion";
 export * from "./avatar";
 export * from "./badge";
+export * from "./breadcrumbs";
 export * from "./button";
 export * from "./checkbox";
 export * from "./color-swatch";
+export * from "./drawer";
 export * from "./input";
 export * from "./loader";
 export * from "./modal";
@@ -16,10 +18,12 @@ export * from "./progress";
 export * from "./progress-circle";
 export * from "./radio";
 export * from "./select";
+export * from "./segmented-control";
 export * from "./slider";
-export * from "./switch";
-export * from "./tabs";
-export * from "./timeline";
-export * from "./textarea";
-export * from "./tooltip";
-export * from "./transition";
+export * from "./switch";
+export * from "./table";
+export * from "./tabs";
+export * from "./timeline";
+export * from "./textarea";
+export * from "./tooltip";
+export * from "./transition";

package/src/components/menu/menu-dropdown/menu-dropdown.tsx

@@ -166,6 +166,7 @@ const MenuDropdown = factory<MenuDropdownFactoryPayload>(
                 transition="fade"
                 duration={150}
                 mounted={level.menu.opened}
+                style={{ position: "relative", zIndex: 1000 }}
                 {...transitionProps}
             >
                 <div
@@ -174,6 +175,7 @@ const MenuDropdown = factory<MenuDropdownFactoryPayload>(
                     tabIndex={-1}
                     style={{
                         ...level.menu.floatingStyles,
+                        zIndex: 1000,
                         scrollbarGutter: "auto",
                         ...style
                     }}
@@ -194,16 +196,15 @@ const MenuDropdown = factory<MenuDropdownFactoryPayload>(
             </Transition>
         );
 
-        const wrappedContent = level.menu.opened ? (
+        const wrappedContent = (
             <FloatingFocusManager
                 context={level.menu.context}
                 modal={false}
                 initialFocus={-1}
+                disabled={!level.menu.opened}
             >
                 {dropdownContent}
             </FloatingFocusManager>
-        ) : (
-            dropdownContent
         );
 
         return withinPortal ? (