@refraktor/core 0.0.1

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

@@ -0,0 +1,219 @@
+import { useEffect, useRef } from "react";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { MenuDropdownFactoryPayload } from "../menu.types";
+import {
+    findFocusedMenuItemIndex,
+    findTypeaheadMatch,
+    focusMenuItem,
+    getNavigableMenuItems,
+    useMenuLevelContext,
+    useMenuRootContext
+} from "../menu.context";
+import { Transition } from "../../transition";
+import {
+    FloatingFocusManager,
+    FloatingPortal,
+    useMergeRefs
+} from "@floating-ui/react";
+
+const MenuDropdown = factory<MenuDropdownFactoryPayload>(
+    ({ children, className, style, ...props }, ref) => {
+        const { cx, getRadius } = useTheme();
+        const { radius, withinPortal, transitionProps, getStyles } =
+            useMenuRootContext();
+        const level = useMenuLevelContext();
+
+        const typeaheadRef = useRef("");
+        const typeaheadTimeoutRef = useRef<number | null>(null);
+
+        useEffect(() => {
+            return () => {
+                if (typeaheadTimeoutRef.current !== null) {
+                    window.clearTimeout(typeaheadTimeoutRef.current);
+                }
+            };
+        }, []);
+
+        const clearTypeahead = () => {
+            typeaheadRef.current = "";
+
+            if (typeaheadTimeoutRef.current !== null) {
+                window.clearTimeout(typeaheadTimeoutRef.current);
+                typeaheadTimeoutRef.current = null;
+            }
+        };
+
+        const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+            const items = getNavigableMenuItems(level.getItems());
+            const focusedIndex = findFocusedMenuItemIndex(items);
+
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+
+                if (!items.length) {
+                    return;
+                }
+
+                const nextIndex =
+                    focusedIndex >= 0 ? (focusedIndex + 1) % items.length : 0;
+
+                focusMenuItem(items[nextIndex]);
+                return;
+            }
+
+            if (event.key === "ArrowUp") {
+                event.preventDefault();
+
+                if (!items.length) {
+                    return;
+                }
+
+                const nextIndex =
+                    focusedIndex >= 0
+                        ? (focusedIndex - 1 + items.length) % items.length
+                        : items.length - 1;
+
+                focusMenuItem(items[nextIndex]);
+                return;
+            }
+
+            if (event.key === "Home") {
+                event.preventDefault();
+                focusMenuItem(items[0]);
+                return;
+            }
+
+            if (event.key === "End") {
+                event.preventDefault();
+                focusMenuItem(items[items.length - 1]);
+                return;
+            }
+
+            if (event.key === "ArrowRight") {
+                if (focusedIndex < 0) {
+                    return;
+                }
+
+                const activeItem = items[focusedIndex];
+
+                if (activeItem.hasSubmenu && activeItem.openSubmenu) {
+                    event.preventDefault();
+                    activeItem.openSubmenu(true);
+                }
+
+                return;
+            }
+
+            if (event.key === "ArrowLeft" && level.isSubmenu) {
+                event.preventDefault();
+                level.closeMenu();
+                level.menu.refs.reference.current?.focus();
+                return;
+            }
+
+            if (event.key === "Escape") {
+                event.preventDefault();
+
+                if (level.isSubmenu) {
+                    level.closeMenu();
+                    level.menu.refs.reference.current?.focus();
+                } else {
+                    level.closeAllMenus();
+                    level.menu.refs.reference.current?.focus();
+                }
+
+                return;
+            }
+
+            if (event.key === "Tab") {
+                level.closeAllMenus();
+                return;
+            }
+
+            if (
+                event.key.length === 1 &&
+                !event.ctrlKey &&
+                !event.metaKey &&
+                !event.altKey
+            ) {
+                const search = `${typeaheadRef.current}${event.key.toLowerCase()}`;
+                typeaheadRef.current = search;
+
+                if (typeaheadTimeoutRef.current !== null) {
+                    window.clearTimeout(typeaheadTimeoutRef.current);
+                }
+
+                typeaheadTimeoutRef.current = window.setTimeout(() => {
+                    clearTypeahead();
+                }, 400);
+
+                const matchedIndex = findTypeaheadMatch(
+                    items,
+                    search,
+                    focusedIndex
+                );
+
+                if (matchedIndex !== -1) {
+                    event.preventDefault();
+                    focusMenuItem(items[matchedIndex]);
+                }
+            }
+        };
+
+        const dropdownContent = (
+            <Transition
+                transition="fade"
+                duration={150}
+                mounted={level.menu.opened}
+                {...transitionProps}
+            >
+                <div
+                    ref={useMergeRefs([ref, level.menu.refs.setFloating])}
+                    role="menu"
+                    tabIndex={-1}
+                    style={{
+                        ...level.menu.floatingStyles,
+                        scrollbarGutter: "auto",
+                        ...style
+                    }}
+                    className={cx(
+                        "z-50 min-w-32 max-h-80 overflow-y-auto refraktor-scrollbar",
+                        "p-1 bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] shadow-md border border-[var(--refraktor-border)]",
+                        getRadius(radius),
+                        getStyles("dropdown"),
+                        className
+                    )}
+                    {...level.menu.getFloatingProps({
+                        onKeyDown: handleKeyDown
+                    })}
+                    {...props}
+                >
+                    {children}
+                </div>
+            </Transition>
+        );
+
+        const wrappedContent = level.menu.opened ? (
+            <FloatingFocusManager
+                context={level.menu.context}
+                modal={false}
+                initialFocus={-1}
+            >
+                {dropdownContent}
+            </FloatingFocusManager>
+        ) : (
+            dropdownContent
+        );
+
+        return withinPortal ? (
+            <FloatingPortal>{wrappedContent}</FloatingPortal>
+        ) : (
+            wrappedContent
+        );
+    }
+);
+
+MenuDropdown.displayName = "@refraktor/core/Menu.Dropdown";
+
+export default MenuDropdown;

package/src/components/menu/menu-item/index.ts

@@ -0,0 +1 @@
+export { default as MenuItem } from "./menu-item";

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

@@ -0,0 +1,126 @@
+import { useId } from "@refraktor/utils";
+import { useEffect, useRef } from "react";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { MenuItemFactoryPayload } from "../menu.types";
+import {
+    getNodeTextValue,
+    useMenuLevelContext,
+    useMenuRootContext
+} from "../menu.context";
+
+const MenuItem = factory<MenuItemFactoryPayload>(
+    (
+        {
+            id,
+            children,
+            className,
+            onSelect,
+            onClick,
+            onMouseMove,
+            disabled,
+            closeOnSelect,
+            textValue,
+            leftSection,
+            rightSection,
+            ...props
+        },
+        ref
+    ) => {
+        const { cx } = useTheme();
+        const { closeOnItemClick, getStyles } = useMenuRootContext();
+        const level = useMenuLevelContext();
+
+        const _id = useId(id);
+        const itemRef = useRef<HTMLButtonElement | null>(null);
+        const resolvedTextValue = getNodeTextValue(children, textValue);
+
+        useEffect(() => {
+            return level.registerItem({
+                id: _id,
+                ref: itemRef as React.MutableRefObject<HTMLElement | null>,
+                disabled: !!disabled,
+                textValue: resolvedTextValue
+            });
+        }, [level, _id, disabled, resolvedTextValue]);
+
+        return (
+            <button
+                ref={(node) => {
+                    itemRef.current = node;
+
+                    if (typeof ref === "function") {
+                        ref(node);
+                    } else if (ref) {
+                        ref.current = node;
+                    }
+                }}
+                type="button"
+                role="menuitem"
+                tabIndex={-1}
+                disabled={disabled}
+                data-disabled={disabled}
+                aria-disabled={disabled}
+                className={cx(
+                    "w-full text-left px-2 py-1.5 text-sm rounded-sm",
+                    "inline-flex items-center gap-2 outline-none transition-colors",
+                    "hover:bg-[var(--refraktor-bg-hover)] focus-visible:bg-[var(--refraktor-bg-hover)]",
+                    "data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed",
+                    getStyles("item"),
+                    className
+                )}
+                onMouseMove={(event) => {
+                    onMouseMove?.(event);
+
+                    if (!disabled && document.activeElement !== event.currentTarget) {
+                        event.currentTarget.focus();
+                    }
+                }}
+                onClick={(event) => {
+                    onClick?.(event);
+
+                    if (event.defaultPrevented || disabled) {
+                        return;
+                    }
+
+                    onSelect?.();
+
+                    const shouldClose = closeOnSelect ?? closeOnItemClick;
+
+                    if (shouldClose) {
+                        level.closeAllMenus();
+                    }
+                }}
+                {...props}
+            >
+                {leftSection && (
+                    <span
+                        className={cx(
+                            "inline-flex items-center shrink-0",
+                            getStyles("itemLeftSection")
+                        )}
+                    >
+                        {leftSection}
+                    </span>
+                )}
+
+                <span className="flex-1">{children}</span>
+
+                {rightSection && (
+                    <span
+                        className={cx(
+                            "inline-flex items-center shrink-0 text-[var(--refraktor-text-secondary)]",
+                            getStyles("itemRightSection")
+                        )}
+                    >
+                        {rightSection}
+                    </span>
+                )}
+            </button>
+        );
+    }
+);
+
+MenuItem.displayName = "@refraktor/core/Menu.Item";
+
+export default MenuItem;

package/src/components/menu/menu-label/index.ts

@@ -0,0 +1 @@
+export { default as MenuLabel } from "./menu-label";

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

@@ -0,0 +1,30 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { MenuLabelFactoryPayload } from "../menu.types";
+import { useMenuRootContext } from "../menu.context";
+
+const MenuLabel = factory<MenuLabelFactoryPayload>(
+    ({ children, className, ...props }, ref) => {
+        const { cx } = useTheme();
+        const { getStyles } = useMenuRootContext();
+
+        return (
+            <div
+                ref={ref}
+                role="presentation"
+                className={cx(
+                    "px-2 py-1 text-xs font-medium text-[var(--refraktor-text-secondary)]",
+                    getStyles("label"),
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </div>
+        );
+    }
+);
+
+MenuLabel.displayName = "@refraktor/core/Menu.Label";
+
+export default MenuLabel;

package/src/components/menu/menu-separator/index.ts

@@ -0,0 +1 @@
+export { default as MenuSeparator } from "./menu-separator";

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

@@ -0,0 +1,28 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { MenuSeparatorFactoryPayload } from "../menu.types";
+import { useMenuRootContext } from "../menu.context";
+
+const MenuSeparator = factory<MenuSeparatorFactoryPayload>(
+    ({ className, ...props }, ref) => {
+        const { cx } = useTheme();
+        const { getStyles } = useMenuRootContext();
+
+        return (
+            <div
+                ref={ref}
+                role="separator"
+                className={cx(
+                    "my-1 h-px bg-[var(--refraktor-border)]",
+                    getStyles("separator"),
+                    className
+                )}
+                {...props}
+            />
+        );
+    }
+);
+
+MenuSeparator.displayName = "@refraktor/core/Menu.Separator";
+
+export default MenuSeparator;

package/src/components/menu/menu-sub/index.ts

@@ -0,0 +1 @@
+export { default as MenuSub } from "./menu-sub";

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

@@ -0,0 +1,117 @@
+import { useCallback } from "react";
+import { useTheme } from "../../../theme";
+import { factory, useProps } from "../../../utils";
+import { MenuSubFactoryPayload, MenuSubProps } from "../menu.types";
+import {
+    focusMenuItem,
+    getNavigableMenuItems,
+    MenuSubProvider,
+    useMenuItemsRegistry,
+    useMenuLevelContext
+} from "../menu.context";
+import { useMenu } from "../use-menu";
+
+const defaultProps = {
+    positioning: {
+        placement: "right-start",
+        offset: 4
+    },
+    middlewares: { flip: true, shift: true },
+    trigger: "hover",
+    openDelay: 75,
+    closeDelay: 125,
+    closeOnClickOutside: false,
+    closeOnEscape: true,
+    disabled: false
+} satisfies Partial<MenuSubProps>;
+
+const MenuSub = factory<MenuSubFactoryPayload>((_props, ref) => {
+    const { cx } = useTheme();
+    const {
+        children,
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        positioning,
+        middlewares,
+        disabled,
+        trigger,
+        openDelay,
+        closeDelay,
+        closeOnClickOutside,
+        closeOnEscape,
+        className,
+        ...props
+    } = useProps("MenuSub", defaultProps, _props);
+    const parentLevel = useMenuLevelContext();
+
+    const submenu = useMenu({
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        positioning,
+        middlewares,
+        disabled,
+        trigger,
+        openDelay,
+        closeDelay,
+        closeOnClickOutside,
+        closeOnEscape
+    });
+
+    const registry = useMenuItemsRegistry();
+
+    const submenuLevel = {
+        menu: submenu,
+        isSubmenu: true,
+        registerItem: registry.registerItem,
+        getItems: registry.getItems,
+        closeMenu: submenu.close,
+        closeAllMenus: () => {
+            submenu.close();
+            parentLevel.closeAllMenus();
+        }
+    };
+
+    const openSubmenu = useCallback(
+        (focusFirstItem?: boolean) => {
+            if (disabled) {
+                return;
+            }
+
+            submenu.open();
+
+            if (focusFirstItem) {
+                requestAnimationFrame(() => {
+                    const items = getNavigableMenuItems(submenuLevel.getItems());
+                    focusMenuItem(items[0]);
+                });
+            }
+        },
+        [disabled, submenu, submenuLevel]
+    );
+
+    const closeSubmenu = useCallback(() => {
+        submenu.close();
+    }, [submenu]);
+
+    return (
+        <MenuSubProvider
+            value={{
+                submenuLevel,
+                parentLevel,
+                disabled: !!disabled,
+                openSubmenu,
+                closeSubmenu
+            }}
+        >
+            <div ref={ref} className={cx(className)} {...props}>
+                {children}
+            </div>
+        </MenuSubProvider>
+    );
+});
+
+MenuSub.displayName = "@refraktor/core/Menu.Sub";
+
+export default MenuSub;

package/src/components/menu/menu-sub-dropdown/index.ts

@@ -0,0 +1 @@
+export { default as MenuSubDropdown } from "./menu-sub-dropdown";