@refraktor/core 0.0.1 → 0.0.3

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

@@ -160,6 +160,7 @@ const MenuSubDropdown = factory<MenuSubDropdownFactoryPayload>(
                 transition="fade"
                 duration={150}
                 mounted={submenuLevel.menu.opened}
+                style={{ position: "relative", zIndex: 1000 }}
                 {...transitionProps}
             >
                 <MenuLevelProvider value={submenuLevel}>
@@ -172,6 +173,7 @@ const MenuSubDropdown = factory<MenuSubDropdownFactoryPayload>(
                         tabIndex={-1}
                         style={{
                             ...submenuLevel.menu.floatingStyles,
+                            zIndex: 1000,
                             scrollbarGutter: "auto",
                             ...style
                         }}

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

@@ -128,7 +128,8 @@ export function useMenu(options: UseMenuProps = {}): UseMenuReturn {
         open: isOpen,
         onOpenChange: setIsOpen,
         middleware,
-        whileElementsMounted: autoUpdate
+        whileElementsMounted: autoUpdate,
+        strategy: "fixed"
     });
 
     const click = useClick(floating.context, {

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

@@ -25,11 +25,7 @@ const ModalClose = factory<ModalCloseFactoryPayload>(
                 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",
+                    "size-6 text-[var(--refraktor-text-secondary)] hover:text-[var(--refraktor-text)] cursor-pointer transition-colors",
                     getStyles("close"),
                     className
                 )}

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

@@ -38,7 +38,7 @@ const ModalContent = factory<ModalContentFactoryPayload>(
                 mounted={modal.opened}
                 {...resolvedTransitionProps}
                 className={cx(
-                    "fixed inset-0 z-50 grid place-items-center p-3 sm:p-6 pointer-events-none",
+                    "fixed inset-0 z-50 grid place-items-center pointer-events-none",
                     transitionClassName
                 )}
             >
@@ -50,9 +50,8 @@ const ModalContent = factory<ModalContentFactoryPayload>(
                     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",
+                        "pointer-events-auto relative z-50 w-full max-w-md",
+                        "border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] p-4 text-[var(--refraktor-text)] shadow-md",
                         getRadius(radius),
                         getStyles("content"),
                         className

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

@@ -14,7 +14,7 @@ const ModalHeader = factory<ModalHeaderFactoryPayload>(
             <div
                 ref={ref}
                 className={cx(
-                    "mb-3 flex items-center justify-between gap-2.5",
+                    "mb-4 flex items-center justify-between",
                     getStyles("header"),
                     className
                 )}
@@ -27,7 +27,9 @@ const ModalHeader = factory<ModalHeaderFactoryPayload>(
                     {text ?? children}
                 </div>
 
-                {withClose && <ModalClose className="static shrink-0 self-center" />}
+                {withClose && (
+                    <ModalClose className="static shrink-0 self-center" />
+                )}
             </div>
         );
     }

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

@@ -1,12 +1,23 @@
-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";
-
+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,
@@ -16,49 +27,60 @@ const ModalOverlay = factory<ModalOverlayFactoryPayload>(
             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}
-            >
+        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);
+
+            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]",
+                        "fixed inset-0 z-40",
                         getStyles("overlay"),
                         className
                     )}
+                    style={{
+                        backgroundColor: `rgba(0, 0, 0, ${backgroundOpacity})`,
+                        backdropFilter: backdropFilterValue,
+                        ...style
+                    }}
                     onMouseDown={handleMouseDown}
                     {...props}
                 />
-            </Transition>
-        );
-
-        return withinPortal ? (
-            <Portal>{overlayContent}</Portal>
-        ) : (
-            overlayContent
-        );
-    }
-);
-
-ModalOverlay.displayName = "@refraktor/core/Modal.Overlay";
-
-export default ModalOverlay;
+            </Transition>
+        );
+
+        return withinPortal ? (
+            <Portal>{overlayContent}</Portal>
+        ) : (
+            overlayContent
+        );
+    }
+);
+
+ModalOverlay.displayName = "@refraktor/core/Modal.Overlay";
+
+export default ModalOverlay;

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

@@ -1,110 +1,146 @@
-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();
-
+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(
-            <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" }));
+            <ModalRoot defaultOpened transitionProps={transitionProps}>
+                <ModalOverlay />
+                <ModalContent>Standalone composition</ModalContent>
+            </ModalRoot>
+        );
 
-        await waitFor(() => {
-            expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
-        });
+        expect(await screen.findByRole("dialog")).toBeInTheDocument();
     });
 
-    it("calls onOpenedChange when clicking overlay in controlled mode", async () => {
-        const user = userEvent.setup();
-        const onOpenedChange = vi.fn();
-
+    it("applies custom overlay background opacity and blur", async () => {
         await render(
-            <Modal
-                opened
-                onOpenedChange={onOpenedChange}
-                transitionProps={transitionProps}
-            >
-                <Modal.Overlay data-testid="overlay" />
-                <Modal.Content>Controlled modal</Modal.Content>
+            <Modal defaultOpened transitionProps={transitionProps}>
+                <Modal.Overlay
+                    data-testid="overlay"
+                    backgroundOpacity={0.4}
+                    blur={6}
+                />
+                <Modal.Content>Styled overlay</Modal.Content>
             </Modal>
         );
 
-        await user.click(await screen.findByTestId("overlay"));
+        const overlay = await screen.findByTestId("overlay");
 
-        expect(onOpenedChange).toHaveBeenCalledWith(false);
+        expect(overlay).toHaveStyle({
+            backgroundColor: "rgba(0, 0, 0, 0.4)",
+            backdropFilter: "blur(6px)"
+        });
     });
 
-    it("closes on Escape key", async () => {
-        const user = userEvent.setup();
-
+    it("does not set backdrop blur for zero blur", async () => {
         await render(
             <Modal defaultOpened transitionProps={transitionProps}>
-                <Modal.Content>Keyboard close</Modal.Content>
+                <Modal.Overlay data-testid="overlay" blur={0} />
+                <Modal.Content>No blur</Modal.Content>
             </Modal>
         );
 
-        await screen.findByRole("dialog");
+        const overlay = await screen.findByTestId("overlay");
 
-        await user.keyboard("{Escape}");
-
-        await waitFor(() => {
-            expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+        expect(overlay).toHaveStyle({
+            backgroundColor: "rgba(0, 0, 0, 0.5)"
         });
-    });
-
-    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();
+        expect(overlay.style.backdropFilter).toBe("");
     });
 
     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");
-        });
-    });
-});
+
+        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");
+        });
+    });
+});

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

@@ -64,6 +64,12 @@ 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;
 }

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

@@ -1,101 +1,101 @@
-import { useUncontrolled } from "@refraktor/utils";
-import { useCallback, useEffect } from "react";
-
-interface UseModalProps {
-    opened?: boolean;
-    defaultOpened?: boolean;
-    onOpenedChange?: (opened: boolean) => void;
-    closeOnClickOutside?: boolean;
-    closeOnEscape?: boolean;
-    contentRef: React.MutableRefObject<HTMLElement | null>;
-}
-
-export interface UseModalReturn {
-    opened: boolean;
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-}
-
-export function useModal(options: UseModalProps): UseModalReturn {
-    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
-    };
-}
+import { useUncontrolled } from "@refraktor/utils";
+import { useCallback, useEffect } from "react";
+
+interface UseModalProps {
+    opened?: boolean;
+    defaultOpened?: boolean;
+    onOpenedChange?: (opened: boolean) => void;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+    contentRef: React.MutableRefObject<HTMLElement | null>;
+}
+
+export interface UseModalReturn {
+    opened: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+}
+
+export function useModal(options: UseModalProps): UseModalReturn {
+    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
+    };
+}