@refraktor/core 0.0.1

package/src/components/menu/menu.test.tsx

@@ -0,0 +1,136 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, userEvent, waitFor } from "../../vitest";
+import Menu from "./menu";
+
+describe("@refraktor/core/Menu", () => {
+    const transitionProps = {
+        duration: 0,
+        immediate: true
+    } as const;
+
+    it("opens on trigger click and closes on item selection", async () => {
+        const user = userEvent.setup();
+        const onSelect = vi.fn();
+
+        await render(
+            <Menu transitionProps={transitionProps}>
+                <Menu.Trigger>
+                    <button type="button">Open menu</button>
+                </Menu.Trigger>
+
+                <Menu.Dropdown>
+                    <Menu.Item onSelect={onSelect}>Profile</Menu.Item>
+                </Menu.Dropdown>
+            </Menu>
+        );
+
+        await user.click(screen.getByRole("button", { name: "Open menu" }));
+        expect(screen.getByRole("menu")).toBeInTheDocument();
+
+        await user.click(screen.getByRole("menuitem", { name: "Profile" }));
+
+        expect(onSelect).toHaveBeenCalledTimes(1);
+
+        await waitFor(() => {
+            expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+        });
+    });
+
+    it("does not activate disabled item", async () => {
+        const user = userEvent.setup();
+        const onSelect = vi.fn();
+
+        await render(
+            <Menu transitionProps={transitionProps}>
+                <Menu.Trigger>
+                    <button type="button">Open menu</button>
+                </Menu.Trigger>
+
+                <Menu.Dropdown>
+                    <Menu.Item disabled onSelect={onSelect}>
+                        Disabled item
+                    </Menu.Item>
+                </Menu.Dropdown>
+            </Menu>
+        );
+
+        await user.click(screen.getByRole("button", { name: "Open menu" }));
+
+        const item = screen.getByRole("menuitem", { name: "Disabled item" });
+        expect(item).toBeDisabled();
+
+        await user.click(item);
+        expect(onSelect).not.toHaveBeenCalled();
+        expect(screen.getByRole("menu")).toBeInTheDocument();
+    });
+
+    it("supports keyboard navigation", async () => {
+        const user = userEvent.setup();
+        const onFirstSelect = vi.fn();
+        const onSecondSelect = vi.fn();
+
+        await render(
+            <Menu transitionProps={transitionProps}>
+                <Menu.Trigger>
+                    <button type="button">Open menu</button>
+                </Menu.Trigger>
+
+                <Menu.Dropdown>
+                    <Menu.Item onSelect={onFirstSelect}>First</Menu.Item>
+                    <Menu.Item onSelect={onSecondSelect}>Second</Menu.Item>
+                </Menu.Dropdown>
+            </Menu>
+        );
+
+        const trigger = screen.getByRole("button", { name: "Open menu" });
+        trigger.focus();
+
+        await user.keyboard("{ArrowDown}");
+        await user.keyboard("{ArrowDown}");
+        await user.keyboard("{Enter}");
+
+        expect(onFirstSelect).not.toHaveBeenCalled();
+        expect(onSecondSelect).toHaveBeenCalledTimes(1);
+    });
+
+    it("opens submenu with keyboard and selects submenu item", async () => {
+        const user = userEvent.setup();
+        const onSubSelect = vi.fn();
+
+        await render(
+            <Menu transitionProps={transitionProps}>
+                <Menu.Trigger>
+                    <button type="button">Open menu</button>
+                </Menu.Trigger>
+
+                <Menu.Dropdown>
+                    <Menu.Sub>
+                        <Menu.SubTrigger>More</Menu.SubTrigger>
+
+                        <Menu.SubDropdown>
+                            <Menu.Item onSelect={onSubSelect}>Sub item</Menu.Item>
+                        </Menu.SubDropdown>
+                    </Menu.Sub>
+                </Menu.Dropdown>
+            </Menu>
+        );
+
+        await user.click(screen.getByRole("button", { name: "Open menu" }));
+
+        const subTrigger = screen.getByRole("menuitem", { name: "More" });
+        subTrigger.focus();
+
+        await user.keyboard("{ArrowRight}");
+
+        const subItem = await screen.findByRole("menuitem", {
+            name: "Sub item"
+        });
+
+        await user.click(subItem);
+        expect(onSubSelect).toHaveBeenCalledTimes(1);
+
+        await waitFor(() => {
+            expect(screen.queryAllByRole("menu")).toHaveLength(0);
+        });
+    });
+});

package/src/components/menu/menu.tsx

@@ -0,0 +1,133 @@
+import { useId } from "@refraktor/utils";
+import { useTheme } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory,
+    useClassNames,
+    useProps
+} from "../../utils";
+import { MenuFactoryPayload, MenuClassNames, MenuProps } from "./menu.types";
+import { useMenu } from "./use-menu";
+import {
+    MenuLevelProvider,
+    MenuRootProvider,
+    useMenuItemsRegistry
+} from "./menu.context";
+import { MenuTrigger } from "./menu-trigger";
+import { MenuDropdown } from "./menu-dropdown";
+import { MenuItem } from "./menu-item";
+import { MenuLabel } from "./menu-label";
+import { MenuSeparator } from "./menu-separator";
+import { MenuSub } from "./menu-sub";
+import { MenuSubTrigger } from "./menu-sub-trigger";
+import { MenuSubDropdown } from "./menu-sub-dropdown";
+
+const defaultProps = {
+    positioning: {
+        placement: "bottom-start",
+        offset: 4
+    },
+    middlewares: { flip: true, shift: true },
+    trigger: "click",
+    openDelay: 0,
+    closeDelay: 100,
+    radius: "default",
+    withinPortal: true,
+    closeOnClickOutside: true,
+    closeOnEscape: true,
+    closeOnItemClick: true
+} satisfies Partial<MenuProps>;
+
+const Menu = factory<MenuFactoryPayload>((_props, ref) => {
+    const { cx } = useTheme();
+    const {
+        id,
+        children,
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        positioning,
+        middlewares,
+        disabled,
+        trigger,
+        openDelay,
+        closeDelay,
+        transitionProps,
+        radius,
+        withinPortal,
+        closeOnClickOutside,
+        closeOnEscape,
+        closeOnItemClick,
+        className,
+        classNames,
+        ...props
+    } = useProps("Menu", defaultProps, _props);
+    const classes = useClassNames("Menu", classNames);
+    const _id = useId(id);
+
+    const menu = useMenu({
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        positioning,
+        middlewares,
+        disabled,
+        trigger,
+        closeOnClickOutside,
+        closeOnEscape,
+        openDelay,
+        closeDelay
+    });
+
+    const registry = useMenuItemsRegistry();
+
+    const getStyles = (part: keyof MenuClassNames) => classes[part];
+
+    return (
+        <MenuRootProvider
+            value={{
+                radius: radius ?? "default",
+                withinPortal: withinPortal ?? true,
+                closeOnItemClick: closeOnItemClick ?? true,
+                transitionProps,
+                classNames,
+                getStyles
+            }}
+        >
+            <MenuLevelProvider
+                value={{
+                    menu,
+                    isSubmenu: false,
+                    registerItem: registry.registerItem,
+                    getItems: registry.getItems,
+                    closeMenu: menu.close,
+                    closeAllMenus: menu.close
+                }}
+            >
+                <div
+                    ref={ref}
+                    id={_id}
+                    className={cx("inline-block", classes.root, className)}
+                    {...props}
+                >
+                    {children}
+                </div>
+            </MenuLevelProvider>
+        </MenuRootProvider>
+    );
+});
+
+Menu.displayName = "@refraktor/core/Menu";
+Menu.configure = createComponentConfig<MenuProps>();
+Menu.classNames = createClassNamesConfig<MenuClassNames>();
+Menu.Trigger = MenuTrigger;
+Menu.Dropdown = MenuDropdown;
+Menu.Item = MenuItem;
+Menu.Label = MenuLabel;
+Menu.Separator = MenuSeparator;
+Menu.Sub = MenuSub;
+Menu.SubTrigger = MenuSubTrigger;
+Menu.SubDropdown = MenuSubDropdown;
+
+export default Menu;

package/src/components/menu/menu.types.ts

@@ -0,0 +1,291 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import type {
+    FlipOptions,
+    InlineOptions,
+    Placement,
+    ShiftOptions
+} from "@floating-ui/react";
+import { TransitionProps } from "../transition";
+import { RefraktorRadius } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    FactoryPayload
+} from "../../utils";
+import { MenuTrigger } from "./menu-trigger";
+import { MenuDropdown } from "./menu-dropdown";
+import { MenuItem } from "./menu-item";
+import { MenuLabel } from "./menu-label";
+import { MenuSeparator } from "./menu-separator";
+import { MenuSub } from "./menu-sub";
+import { MenuSubTrigger } from "./menu-sub-trigger";
+import { MenuSubDropdown } from "./menu-sub-dropdown";
+
+export type MenuClassNames = {
+    root?: string;
+    trigger?: string;
+    dropdown?: string;
+    item?: string;
+    label?: string;
+    separator?: string;
+    subTrigger?: string;
+    subDropdown?: string;
+    itemLeftSection?: string;
+    itemRightSection?: string;
+    subIndicator?: string;
+};
+
+export type MenuPositioning = {
+    /** The placement of the menu relative to the trigger element @default `bottom-start` */
+    placement?: Placement;
+
+    /** Offset distance from the trigger element in pixels @default `4` */
+    offset?: number;
+};
+
+export type MenuMiddlewares = {
+    shift?: boolean | ShiftOptions;
+    flip?: boolean | FlipOptions;
+    inline?: boolean | InlineOptions;
+};
+
+export type MenuTriggerType = "click" | "hover" | "focus";
+
+export interface MenuProps extends ComponentPropsWithoutRef<"div"> {
+    /** Children containing subcomponents */
+    children: ReactNode;
+
+    /** State of the menu (controlled) */
+    opened?: boolean;
+
+    /** Initial state of the menu (uncontrolled) */
+    defaultOpened?: boolean;
+
+    /** Callback called when the menu state changes */
+    onOpenedChange?: (opened: boolean) => void;
+
+    /** Positioning settings for the menu */
+    positioning?: MenuPositioning;
+
+    /** Middlewares settings for the menu */
+    middlewares?: MenuMiddlewares;
+
+    /** Whether the menu is disabled @default `false` */
+    disabled?: boolean;
+
+    /** Trigger type for the menu @default `click` */
+    trigger?: MenuTriggerType;
+
+    /** Delay in milliseconds before the menu opens @default `0` */
+    openDelay?: number;
+
+    /** Delay in milliseconds before the menu closes @default `100` */
+    closeDelay?: number;
+
+    /** Transition props for the menu dropdown, uses Transition component internally */
+    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
+
+    /** Radius for menu dropdowns @default `default` */
+    radius?: RefraktorRadius;
+
+    /** Whether to render dropdowns within a portal @default `true` */
+    withinPortal?: boolean;
+
+    /** Whether to close on click outside @default `true` */
+    closeOnClickOutside?: boolean;
+
+    /** Whether to close on escape key @default `true` */
+    closeOnEscape?: boolean;
+
+    /** Whether to close the whole menu tree after selecting an item @default `true` */
+    closeOnItemClick?: boolean;
+
+    /** Used for editing root class name */
+    className?: string;
+
+    /** Used for styling different parts of the component */
+    classNames?: MenuClassNames;
+}
+
+export interface MenuTriggerProps extends ComponentPropsWithoutRef<"div"> {
+    /** The trigger element */
+    children: ReactNode;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface MenuDropdownProps extends ComponentPropsWithoutRef<"div"> {
+    /** Content to display inside the dropdown */
+    children: ReactNode;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface MenuItemProps
+    extends Omit<ComponentPropsWithoutRef<"button">, "onSelect"> {
+    /** Content of the item */
+    children: ReactNode;
+
+    /** Callback called when an item is selected */
+    onSelect?: () => void;
+
+    /** Whether the item is disabled @default `false` */
+    disabled?: boolean;
+
+    /** Whether this item should close menus when selected, defaults to Menu closeOnItemClick */
+    closeOnSelect?: boolean;
+
+    /** Optional typeahead value if children is non-text */
+    textValue?: string;
+
+    /** Optional left section for icons or markers */
+    leftSection?: ReactNode;
+
+    /** Optional right section for hints or shortcuts */
+    rightSection?: ReactNode;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface MenuLabelProps extends ComponentPropsWithoutRef<"div"> {
+    /** Label content */
+    children: ReactNode;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface MenuSeparatorProps extends ComponentPropsWithoutRef<"div"> {
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface MenuSubProps extends ComponentPropsWithoutRef<"div"> {
+    /** Children containing submenu trigger and submenu dropdown */
+    children: ReactNode;
+
+    /** State of the submenu (controlled) */
+    opened?: boolean;
+
+    /** Initial state of the submenu (uncontrolled) */
+    defaultOpened?: boolean;
+
+    /** Callback called when the submenu state changes */
+    onOpenedChange?: (opened: boolean) => void;
+
+    /** Positioning settings for the submenu */
+    positioning?: MenuPositioning;
+
+    /** Middlewares settings for the submenu */
+    middlewares?: MenuMiddlewares;
+
+    /** Whether the submenu is disabled @default `false` */
+    disabled?: boolean;
+
+    /** Trigger type for the submenu @default `hover` */
+    trigger?: MenuTriggerType;
+
+    /** Delay in milliseconds before the submenu opens @default `75` */
+    openDelay?: number;
+
+    /** Delay in milliseconds before the submenu closes @default `125` */
+    closeDelay?: number;
+
+    /** Whether to close submenu on click outside @default `false` */
+    closeOnClickOutside?: boolean;
+
+    /** Whether to close submenu on escape @default `true` */
+    closeOnEscape?: boolean;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface MenuSubTriggerProps
+    extends Omit<ComponentPropsWithoutRef<"button">, "onSelect"> {
+    /** Content of the submenu trigger */
+    children: ReactNode;
+
+    /** Optional typeahead value if children is non-text */
+    textValue?: string;
+
+    /** Whether the submenu trigger is disabled @default `false` */
+    disabled?: boolean;
+
+    /** Optional left section for icons or markers */
+    leftSection?: ReactNode;
+
+    /** Optional right section for hints or shortcuts */
+    rightSection?: ReactNode;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface MenuSubDropdownProps extends ComponentPropsWithoutRef<"div"> {
+    /** Content to display inside the submenu dropdown */
+    children: ReactNode;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface MenuFactoryPayload extends FactoryPayload {
+    props: MenuProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<MenuProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<MenuClassNames>>;
+        Trigger: typeof MenuTrigger;
+        Dropdown: typeof MenuDropdown;
+        Item: typeof MenuItem;
+        Label: typeof MenuLabel;
+        Separator: typeof MenuSeparator;
+        Sub: typeof MenuSub;
+        SubTrigger: typeof MenuSubTrigger;
+        SubDropdown: typeof MenuSubDropdown;
+    };
+}
+
+export interface MenuTriggerFactoryPayload extends FactoryPayload {
+    props: MenuTriggerProps;
+    ref: HTMLDivElement;
+}
+
+export interface MenuDropdownFactoryPayload extends FactoryPayload {
+    props: MenuDropdownProps;
+    ref: HTMLDivElement;
+}
+
+export interface MenuItemFactoryPayload extends FactoryPayload {
+    props: MenuItemProps;
+    ref: HTMLButtonElement;
+}
+
+export interface MenuLabelFactoryPayload extends FactoryPayload {
+    props: MenuLabelProps;
+    ref: HTMLDivElement;
+}
+
+export interface MenuSeparatorFactoryPayload extends FactoryPayload {
+    props: MenuSeparatorProps;
+    ref: HTMLDivElement;
+}
+
+export interface MenuSubFactoryPayload extends FactoryPayload {
+    props: MenuSubProps;
+    ref: HTMLDivElement;
+}
+
+export interface MenuSubTriggerFactoryPayload extends FactoryPayload {
+    props: MenuSubTriggerProps;
+    ref: HTMLButtonElement;
+}
+
+export interface MenuSubDropdownFactoryPayload extends FactoryPayload {
+    props: MenuSubDropdownProps;
+    ref: HTMLDivElement;
+}