@refraktor/core 0.0.1

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

@@ -0,0 +1,203 @@
+import { useUncontrolled } from "@refraktor/utils";
+import {
+    autoUpdate,
+    flip,
+    FloatingContext,
+    inline,
+    Middleware,
+    offset,
+    Placement,
+    safePolygon,
+    shift,
+    useClick,
+    useDismiss,
+    useFloating,
+    useFocus,
+    useHover,
+    useInteractions,
+    useRole
+} from "@floating-ui/react";
+import { useCallback, useMemo } from "react";
+import {
+    MenuMiddlewares,
+    MenuPositioning,
+    MenuTriggerType
+} from "./menu.types";
+
+interface UseMenuProps {
+    opened?: boolean;
+    defaultOpened?: boolean;
+    onOpenedChange?: (opened: boolean) => void;
+    positioning?: MenuPositioning;
+    middlewares?: MenuMiddlewares;
+    disabled?: boolean;
+    trigger?: MenuTriggerType;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+    openDelay?: number;
+    closeDelay?: number;
+}
+
+export interface UseMenuReturn {
+    opened: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    context: FloatingContext;
+    refs: {
+        setReference: (node: HTMLElement | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+        reference: React.MutableRefObject<HTMLElement | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+    };
+    floatingStyles: React.CSSProperties;
+    getReferenceProps: (
+        userProps?: React.HTMLAttributes<HTMLElement>
+    ) => Record<string, unknown>;
+    getFloatingProps: (
+        userProps?: React.HTMLAttributes<HTMLElement>
+    ) => Record<string, unknown>;
+    placement: Placement;
+}
+
+export function useMenu(options: UseMenuProps = {}): UseMenuReturn {
+    const {
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        positioning = {
+            placement: "bottom-start",
+            offset: 4
+        },
+        middlewares = { flip: true, shift: true },
+        disabled = false,
+        trigger = "click",
+        closeOnClickOutside = true,
+        closeOnEscape = true,
+        openDelay = 0,
+        closeDelay = 100
+    } = options;
+
+    const [isOpen, setIsOpen] = useUncontrolled({
+        value: opened,
+        defaultValue: defaultOpened,
+        finalValue: false,
+        onChange: onOpenedChange
+    });
+
+    const middleware = useMemo(() => {
+        const middlewareList: Middleware[] = [];
+
+        middlewareList.push(offset(positioning.offset ?? 4));
+
+        if (middlewares.flip) {
+            middlewareList.push(
+                flip(
+                    typeof middlewares.flip === "boolean"
+                        ? undefined
+                        : middlewares.flip
+                )
+            );
+        }
+
+        if (middlewares.shift) {
+            middlewareList.push(
+                shift(
+                    typeof middlewares.shift === "boolean"
+                        ? undefined
+                        : middlewares.shift
+                )
+            );
+        }
+
+        if (middlewares.inline) {
+            middlewareList.push(
+                inline(
+                    typeof middlewares.inline === "boolean"
+                        ? undefined
+                        : middlewares.inline
+                )
+            );
+        }
+
+        return middlewareList;
+    }, [positioning.offset, middlewares]);
+
+    const floating = useFloating({
+        placement: positioning.placement,
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        middleware,
+        whileElementsMounted: autoUpdate
+    });
+
+    const click = useClick(floating.context, {
+        enabled: trigger === "click" && !disabled
+    });
+
+    const hover = useHover(floating.context, {
+        enabled: trigger === "hover" && !disabled,
+        handleClose: safePolygon(),
+        delay: {
+            open: openDelay,
+            close: closeDelay
+        }
+    });
+
+    const focus = useFocus(floating.context, {
+        enabled: trigger === "focus" && !disabled
+    });
+
+    const dismiss = useDismiss(floating.context, {
+        outsidePress: closeOnClickOutside,
+        escapeKey: closeOnEscape
+    });
+
+    const role = useRole(floating.context, {
+        role: "menu"
+    });
+
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        click,
+        hover,
+        focus,
+        dismiss,
+        role
+    ]);
+
+    const open = useCallback(() => {
+        if (!disabled) {
+            setIsOpen(true);
+        }
+    }, [setIsOpen, disabled]);
+
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, [setIsOpen]);
+
+    const toggle = useCallback(() => {
+        if (!disabled) {
+            setIsOpen(!isOpen);
+        }
+    }, [setIsOpen, isOpen, disabled]);
+
+    return {
+        opened: isOpen,
+        open,
+        close,
+        toggle,
+        context: floating.context,
+        refs: {
+            setReference: floating.refs.setReference,
+            setFloating: floating.refs.setFloating,
+            reference: floating.refs
+                .reference as React.MutableRefObject<HTMLElement | null>,
+            floating: floating.refs
+                .floating as React.MutableRefObject<HTMLElement | null>
+        },
+        floatingStyles: floating.floatingStyles,
+        getReferenceProps,
+        getFloatingProps,
+        placement: floating.placement
+    };
+}

package/src/components/modal/index.ts

@@ -0,0 +1,15 @@
+export { default as Modal } from "./modal";
+export { ModalRoot } from "./modal-root";
+export { ModalOverlay } from "./modal-overlay";
+export { ModalContent } from "./modal-content";
+export { ModalHeader } from "./modal-header";
+export { ModalClose } from "./modal-close";
+export type {
+    ModalProps,
+    ModalRootProps,
+    ModalOverlayProps,
+    ModalContentProps,
+    ModalHeaderProps,
+    ModalCloseProps,
+    ModalClassNames
+} from "./modal.types";

package/src/components/modal/modal-close/index.ts

@@ -0,0 +1 @@
+export { default as ModalClose } from "./modal-close";

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

@@ -0,0 +1,47 @@
+import { XIcon } from "../../../icons";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useModalContext } from "../modal.context";
+import { ModalCloseFactoryPayload } from "../modal.types";
+
+const ModalClose = factory<ModalCloseFactoryPayload>(
+    ({ children, className, onClick, type = "button", ...props }, ref) => {
+        const { cx } = useTheme();
+        const { modal, getStyles } = useModalContext();
+
+        const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+            onClick?.(event);
+
+            if (event.defaultPrevented) {
+                return;
+            }
+
+            modal.close();
+        };
+
+        return (
+            <button
+                ref={ref}
+                type={type}
+                aria-label="Close"
+                className={cx(
+                    "absolute right-4 top-4 inline-flex h-9 w-9 items-center justify-center rounded-full cursor-pointer border border-transparent",
+                    "text-base text-[var(--refraktor-text-secondary)] transition-all",
+                    "hover:border-[var(--refraktor-border)] hover:bg-[var(--refraktor-bg-subtle)] hover:text-[var(--refraktor-text)]",
+                    "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]",
+                    "active:scale-95",
+                    getStyles("close"),
+                    className
+                )}
+                onClick={handleClick}
+                {...props}
+            >
+                {children ?? <XIcon />}
+            </button>
+        );
+    }
+);
+
+ModalClose.displayName = "@refraktor/core/Modal.Close";
+
+export default ModalClose;

package/src/components/modal/modal-content/index.ts

@@ -0,0 +1 @@
+export { default as ModalContent } from "./modal-content";

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

@@ -0,0 +1,73 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { Portal } from "../../portal";
+import { Transition } from "../../transition";
+import { useModalContext } from "../modal.context";
+import { ModalContentFactoryPayload } from "../modal.types";
+
+const ModalContent = factory<ModalContentFactoryPayload>(
+    ({ children, className, style, ...props }, ref) => {
+        const { cx, getRadius } = useTheme();
+        const {
+            modal,
+            withinPortal,
+            radius,
+            transitionProps,
+            headerId,
+            contentRef,
+            getStyles
+        } = useModalContext();
+
+        const setRefs = (node: HTMLDivElement | null) => {
+            contentRef.current = node;
+
+            if (typeof ref === "function") {
+                ref(node);
+            } else if (ref) {
+                ref.current = node;
+            }
+        };
+
+        const { className: transitionClassName, ...resolvedTransitionProps } =
+            transitionProps ?? {};
+
+        const content = (
+            <Transition
+                transition="scale"
+                duration={150}
+                mounted={modal.opened}
+                {...resolvedTransitionProps}
+                className={cx(
+                    "fixed inset-0 z-50 grid place-items-center p-3 sm:p-6 pointer-events-none",
+                    transitionClassName
+                )}
+            >
+                <div
+                    ref={setRefs}
+                    role="dialog"
+                    aria-modal="true"
+                    aria-labelledby={headerId}
+                    data-opened={modal.opened}
+                    style={style}
+                    className={cx(
+                        "pointer-events-auto relative z-50 w-full max-w-[36rem]",
+                        "border border-[var(--refraktor-border)] bg-[var(--refraktor-bg-elevated)] px-5 pb-5 pt-4 text-[var(--refraktor-text)] shadow-[0_30px_80px_-40px_rgba(0,0,0,0.75)] sm:px-6 sm:pb-6 sm:pt-5",
+                        "max-h-[calc(100vh-1.5rem)] max-h-[calc(100dvh-1.5rem)] overflow-y-auto refraktor-scrollbar",
+                        getRadius(radius),
+                        getStyles("content"),
+                        className
+                    )}
+                    {...props}
+                >
+                    {children}
+                </div>
+            </Transition>
+        );
+
+        return withinPortal ? <Portal>{content}</Portal> : content;
+    }
+);
+
+ModalContent.displayName = "@refraktor/core/Modal.Content";
+
+export default ModalContent;

package/src/components/modal/modal-header/index.ts

@@ -0,0 +1 @@
+export { default as ModalHeader } from "./modal-header";

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

@@ -0,0 +1,38 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { ModalClose } from "../modal-close";
+import { useModalContext } from "../modal.context";
+import { ModalHeaderFactoryPayload } from "../modal.types";
+
+const ModalHeader = factory<ModalHeaderFactoryPayload>(
+    ({ children, className, id, text, withClose = true, ...props }, ref) => {
+        const { cx } = useTheme();
+        const { headerId, getStyles } = useModalContext();
+        const resolvedId = id ?? headerId;
+
+        return (
+            <div
+                ref={ref}
+                className={cx(
+                    "mb-3 flex items-center justify-between gap-2.5",
+                    getStyles("header"),
+                    className
+                )}
+                {...props}
+            >
+                <div
+                    id={resolvedId}
+                    className="min-w-0 flex-1 text-sm font-semibold leading-5 text-[var(--refraktor-text)]"
+                >
+                    {text ?? children}
+                </div>
+
+                {withClose && <ModalClose className="static shrink-0 self-center" />}
+            </div>
+        );
+    }
+);
+
+ModalHeader.displayName = "@refraktor/core/Modal.Header";
+
+export default ModalHeader;

package/src/components/modal/modal-overlay/index.ts

@@ -0,0 +1 @@
+export { default as ModalOverlay } from "./modal-overlay";

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

@@ -0,0 +1,64 @@
+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) => {
+        const { cx } = useTheme();
+        const {
+            modal,
+            closeOnClickOutside,
+            withinPortal,
+            transitionProps,
+            getStyles
+        } = useModalContext();
+
+        const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+            onMouseDown?.(event);
+
+            if (
+                event.defaultPrevented ||
+                !closeOnClick ||
+                !closeOnClickOutside
+            ) {
+                return;
+            }
+
+            modal.close();
+        };
+
+        const overlayContent = (
+            <Transition
+                transition="fade"
+                duration={150}
+                mounted={modal.opened}
+                {...transitionProps}
+            >
+                <div
+                    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]",
+                        getStyles("overlay"),
+                        className
+                    )}
+                    onMouseDown={handleMouseDown}
+                    {...props}
+                />
+            </Transition>
+        );
+
+        return withinPortal ? (
+            <Portal>{overlayContent}</Portal>
+        ) : (
+            overlayContent
+        );
+    }
+);
+
+ModalOverlay.displayName = "@refraktor/core/Modal.Overlay";
+
+export default ModalOverlay;

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

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

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

@@ -0,0 +1,88 @@
+import { useId } from "@refraktor/utils";
+import { useRef } from "react";
+import { useTheme } from "../../../theme";
+import { factory, useClassNames, useProps } from "../../../utils";
+import { ModalProvider } from "../modal.context";
+import { useModal } from "../use-modal";
+import {
+    ModalClassNames,
+    ModalRootFactoryPayload,
+    ModalRootProps
+} from "../modal.types";
+import { RemoveScroll } from "react-remove-scroll";
+
+const defaultProps = {
+    closeOnClickOutside: true,
+    closeOnEscape: true,
+    lockScroll: true,
+    withinPortal: true,
+    radius: "md"
+} satisfies Partial<ModalRootProps>;
+
+const ModalRoot = factory<ModalRootFactoryPayload>((_props, ref) => {
+    const { cx } = useTheme();
+    const {
+        id,
+        children,
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        closeOnClickOutside,
+        closeOnEscape,
+        lockScroll,
+        withinPortal,
+        radius,
+        transitionProps,
+        className,
+        classNames,
+        ...props
+    } = useProps("Modal", defaultProps, _props);
+    const classes = useClassNames("Modal", classNames);
+
+    const _id = useId(id);
+    const headerId = `${_id}-header`;
+    const contentRef = useRef<HTMLDivElement | null>(null);
+
+    const modal = useModal({
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        closeOnClickOutside,
+        closeOnEscape,
+        contentRef
+    });
+
+    const getStyles = (part: keyof ModalClassNames) => classes[part];
+
+    return (
+        <ModalProvider
+            value={{
+                modal,
+                closeOnClickOutside,
+                lockScroll,
+                withinPortal,
+                radius,
+                transitionProps,
+                headerId,
+                contentRef,
+                classNames,
+                getStyles
+            }}
+        >
+            <RemoveScroll enabled={modal.opened && lockScroll}>
+                <div
+                    ref={ref}
+                    id={_id}
+                    className={cx(classes.root, className)}
+                    {...props}
+                >
+                    {children}
+                </div>
+            </RemoveScroll>
+        </ModalProvider>
+    );
+});
+
+ModalRoot.displayName = "@refraktor/core/Modal.Root";
+
+export default ModalRoot;

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

@@ -0,0 +1,23 @@
+import { createSafeContext } from "@refraktor/utils";
+import { RefraktorRadius } from "../../theme";
+import { TransitionProps } from "../transition";
+import { ModalClassNames } from "./modal.types";
+import { UseModalReturn } from "./use-modal";
+
+export interface ModalContextValue {
+    modal: UseModalReturn;
+    closeOnClickOutside: boolean;
+    lockScroll: boolean;
+    withinPortal: boolean;
+    radius: RefraktorRadius;
+    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
+    headerId: string;
+    contentRef: React.MutableRefObject<HTMLDivElement | null>;
+    classNames?: ModalClassNames;
+    getStyles: (part: keyof ModalClassNames) => string | undefined;
+}
+
+export const [ModalProvider, useModalContext] =
+    createSafeContext<ModalContextValue>(
+        "Modal context was not found in tree. Make sure Modal subcomponents are wrapped with Modal or ModalRoot."
+    );

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

@@ -0,0 +1,110 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, userEvent, waitFor } from "../../vitest";
+import Modal from "./modal";
+import { ModalContent } from "./modal-content";
+import { ModalOverlay } from "./modal-overlay";
+import { ModalRoot } from "./modal-root";
+
+describe("@refraktor/core/Modal", () => {
+    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(
+            <Modal defaultOpened transitionProps={transitionProps}>
+                <Modal.Overlay />
+
+                <Modal.Content>
+                    <Modal.Header text="Delete item" />
+                    <p>Are you sure?</p>
+                </Modal.Content>
+            </Modal>
+        );
+
+        expect(
+            await screen.findByRole("dialog", { name: "Delete item" })
+        ).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(
+            <Modal
+                opened
+                onOpenedChange={onOpenedChange}
+                transitionProps={transitionProps}
+            >
+                <Modal.Overlay data-testid="overlay" />
+                <Modal.Content>Controlled modal</Modal.Content>
+            </Modal>
+        );
+
+        await user.click(await screen.findByTestId("overlay"));
+
+        expect(onOpenedChange).toHaveBeenCalledWith(false);
+    });
+
+    it("closes on Escape key", async () => {
+        const user = userEvent.setup();
+
+        await render(
+            <Modal defaultOpened transitionProps={transitionProps}>
+                <Modal.Content>Keyboard close</Modal.Content>
+            </Modal>
+        );
+
+        await screen.findByRole("dialog");
+
+        await user.keyboard("{Escape}");
+
+        await waitFor(() => {
+            expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+        });
+    });
+
+    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("locks and unlocks body scroll when enabled", async () => {
+        const user = userEvent.setup();
+
+        await render(
+            <Modal defaultOpened lockScroll transitionProps={transitionProps}>
+                <Modal.Content>
+                    Scroll locked
+                    <Modal.Close />
+                </Modal.Content>
+            </Modal>
+        );
+
+        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");
+        });
+    });
+});