@refraktor/core 0.0.3 → 0.0.5

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

@@ -1,136 +0,0 @@
-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

@@ -1,133 +0,0 @@
-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

@@ -1,291 +0,0 @@
-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;
-}