@refraktor/core 0.0.3 → 0.0.5

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

@@ -1,220 +0,0 @@
-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}
-                style={{ position: "relative", zIndex: 1000 }}
-                {...transitionProps}
-            >
-                <div
-                    ref={useMergeRefs([ref, level.menu.refs.setFloating])}
-                    role="menu"
-                    tabIndex={-1}
-                    style={{
-                        ...level.menu.floatingStyles,
-                        zIndex: 1000,
-                        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 = (
-            <FloatingFocusManager
-                context={level.menu.context}
-                modal={false}
-                initialFocus={-1}
-                disabled={!level.menu.opened}
-            >
-                {dropdownContent}
-            </FloatingFocusManager>
-        );
-
-        return withinPortal ? (
-            <FloatingPortal>{wrappedContent}</FloatingPortal>
-        ) : (
-            wrappedContent
-        );
-    }
-);
-
-MenuDropdown.displayName = "@refraktor/core/Menu.Dropdown";
-
-export default MenuDropdown;

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

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

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

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

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

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

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

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

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

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

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

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

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

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