@refraktor/core 0.0.1

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

@@ -0,0 +1,219 @@
+import { useEffect, useRef } from "react";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { MenuSubDropdownFactoryPayload } from "../menu.types";
+import {
+    findFocusedMenuItemIndex,
+    findTypeaheadMatch,
+    focusMenuItem,
+    getNavigableMenuItems,
+    MenuLevelProvider,
+    useMenuRootContext,
+    useMenuSubContext
+} from "../menu.context";
+import { Transition } from "../../transition";
+import {
+    FloatingFocusManager,
+    FloatingPortal,
+    useMergeRefs
+} from "@floating-ui/react";
+
+const MenuSubDropdown = factory<MenuSubDropdownFactoryPayload>(
+    ({ children, className, style, ...props }, ref) => {
+        const { cx, getRadius } = useTheme();
+        const { radius, withinPortal, transitionProps, getStyles } =
+            useMenuRootContext();
+        const { submenuLevel } = useMenuSubContext();
+
+        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(submenuLevel.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") {
+                event.preventDefault();
+                submenuLevel.closeMenu();
+                submenuLevel.menu.refs.reference.current?.focus();
+                return;
+            }
+
+            if (event.key === "Escape") {
+                event.preventDefault();
+                submenuLevel.closeMenu();
+                submenuLevel.menu.refs.reference.current?.focus();
+                return;
+            }
+
+            if (event.key === "Tab") {
+                submenuLevel.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={submenuLevel.menu.opened}
+                {...transitionProps}
+            >
+                <MenuLevelProvider value={submenuLevel}>
+                    <div
+                        ref={useMergeRefs([
+                            ref,
+                            submenuLevel.menu.refs.setFloating
+                        ])}
+                        role="menu"
+                        tabIndex={-1}
+                        style={{
+                            ...submenuLevel.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"),
+                            getStyles("subDropdown"),
+                            className
+                        )}
+                        {...submenuLevel.menu.getFloatingProps({
+                            onKeyDown: handleKeyDown
+                        })}
+                        {...props}
+                    >
+                        {children}
+                    </div>
+                </MenuLevelProvider>
+            </Transition>
+        );
+
+        const wrappedContent = submenuLevel.menu.opened ? (
+            <FloatingFocusManager
+                context={submenuLevel.menu.context}
+                modal={false}
+                initialFocus={-1}
+            >
+                {dropdownContent}
+            </FloatingFocusManager>
+        ) : (
+            dropdownContent
+        );
+
+        return withinPortal ? (
+            <FloatingPortal>{wrappedContent}</FloatingPortal>
+        ) : (
+            wrappedContent
+        );
+    }
+);
+
+MenuSubDropdown.displayName = "@refraktor/core/Menu.SubDropdown";
+
+export default MenuSubDropdown;

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

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

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

@@ -0,0 +1,164 @@
+import { useId } from "@refraktor/utils";
+import { useEffect, useRef } from "react";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { ChevronIcon } from "../../../icons";
+import { MenuSubTriggerFactoryPayload } from "../menu.types";
+import {
+    getNodeTextValue,
+    useMenuRootContext,
+    useMenuSubContext
+} from "../menu.context";
+
+const MenuSubTrigger = factory<MenuSubTriggerFactoryPayload>(
+    (
+        {
+            id,
+            children,
+            className,
+            disabled,
+            textValue,
+            leftSection,
+            rightSection,
+            onClick,
+            onMouseMove,
+            onKeyDown,
+            ...props
+        },
+        ref
+    ) => {
+        const { cx } = useTheme();
+        const { getStyles } = useMenuRootContext();
+        const { submenuLevel, parentLevel, disabled: parentDisabled, openSubmenu } =
+            useMenuSubContext();
+
+        const isDisabled = !!disabled || parentDisabled;
+        const _id = useId(id);
+        const itemRef = useRef<HTMLButtonElement | null>(null);
+        const resolvedTextValue = getNodeTextValue(children, textValue);
+
+        useEffect(() => {
+            return parentLevel.registerItem({
+                id: _id,
+                ref: itemRef as React.MutableRefObject<HTMLElement | null>,
+                disabled: isDisabled,
+                textValue: resolvedTextValue,
+                hasSubmenu: true,
+                openSubmenu: (focusFirstItem?: boolean) => {
+                    openSubmenu(focusFirstItem);
+                }
+            });
+        }, [parentLevel, _id, isDisabled, resolvedTextValue, openSubmenu]);
+
+        return (
+            <button
+                ref={(node) => {
+                    itemRef.current = node;
+                    submenuLevel.menu.refs.setReference(node);
+
+                    if (typeof ref === "function") {
+                        ref(node);
+                    } else if (ref) {
+                        ref.current = node;
+                    }
+                }}
+                type="button"
+                role="menuitem"
+                tabIndex={-1}
+                disabled={isDisabled}
+                data-disabled={isDisabled}
+                data-opened={submenuLevel.menu.opened}
+                aria-disabled={isDisabled}
+                aria-haspopup="menu"
+                aria-expanded={submenuLevel.menu.opened}
+                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"),
+                    getStyles("subTrigger"),
+                    className
+                )}
+                {...submenuLevel.menu.getReferenceProps({
+                    onMouseMove: (event) => {
+                        onMouseMove?.(event as any);
+
+                        if (isDisabled) {
+                            return;
+                        }
+
+                        if (document.activeElement !== event.currentTarget) {
+                            event.currentTarget.focus();
+                        }
+
+                        openSubmenu(false);
+                    },
+                    onClick: (event) => {
+                        onClick?.(event as any);
+
+                        if (event.defaultPrevented || isDisabled) {
+                            return;
+                        }
+
+                        submenuLevel.menu.toggle();
+                    },
+                    onKeyDown: (event) => {
+                        onKeyDown?.(event as any);
+
+                        if (event.defaultPrevented || isDisabled) {
+                            return;
+                        }
+
+                        if (
+                            event.key === "ArrowRight" ||
+                            event.key === "Enter" ||
+                            event.key === " "
+                        ) {
+                            event.preventDefault();
+                            openSubmenu(true);
+                        }
+                    }
+                })}
+                {...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>
+                )}
+
+                <span
+                    className={cx(
+                        "inline-flex items-center shrink-0 text-[var(--refraktor-text-secondary)]",
+                        getStyles("subIndicator")
+                    )}
+                >
+                    <ChevronIcon direction="right" size={14} />
+                </span>
+            </button>
+        );
+    }
+);
+
+MenuSubTrigger.displayName = "@refraktor/core/Menu.SubTrigger";
+
+export default MenuSubTrigger;

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

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

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

@@ -0,0 +1,98 @@
+import { cloneElement, ComponentProps, isValidElement } from "react";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { MenuTriggerFactoryPayload } from "../menu.types";
+import {
+    focusMenuItem,
+    getNavigableMenuItems,
+    useMenuLevelContext,
+    useMenuRootContext
+} from "../menu.context";
+
+const MenuTrigger = factory<MenuTriggerFactoryPayload>(
+    ({ children, className, ...props }, ref) => {
+        const { cx } = useTheme();
+        const { getStyles } = useMenuRootContext();
+        const level = useMenuLevelContext();
+
+        const focusFirstItem = () => {
+            const items = getNavigableMenuItems(level.getItems());
+            focusMenuItem(items[0]);
+        };
+
+        const focusLastItem = () => {
+            const items = getNavigableMenuItems(level.getItems());
+            focusMenuItem(items[items.length - 1]);
+        };
+
+        const triggerElement = isValidElement(children)
+            ? cloneElement(children as any, {
+                  ref: (node: HTMLElement | null) => {
+                      level.menu.refs.setReference(node);
+
+                      const childRef = (children as any).ref;
+
+                      if (typeof childRef === "function") {
+                          childRef(node);
+                      } else if (childRef) {
+                          childRef.current = node;
+                      }
+
+                      if (typeof ref === "function") {
+                          ref(node as HTMLDivElement);
+                      } else if (ref) {
+                          ref.current = node as HTMLDivElement;
+                      }
+                  },
+                  ...level.menu.getReferenceProps({
+                      ...(children.props as ComponentProps<any>),
+                      "aria-haspopup": "menu",
+                      "aria-expanded": level.menu.opened,
+                      onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {
+                          (children.props as ComponentProps<any>)?.onKeyDown?.(
+                              event
+                          );
+
+                          if (event.defaultPrevented) {
+                              return;
+                          }
+
+                          if (event.key === "ArrowDown") {
+                              event.preventDefault();
+
+                              if (!level.menu.opened) {
+                                  level.menu.open();
+                              }
+
+                              requestAnimationFrame(focusFirstItem);
+                          }
+
+                          if (event.key === "ArrowUp") {
+                              event.preventDefault();
+
+                              if (!level.menu.opened) {
+                                  level.menu.open();
+                              }
+
+                              requestAnimationFrame(focusLastItem);
+                          }
+                      }
+                  })
+              })
+            : children;
+
+        return (
+            <div
+                className={cx("inline-block", getStyles("trigger"), className)}
+                data-opened={level.menu.opened}
+                {...props}
+            >
+                {triggerElement}
+            </div>
+        );
+    }
+);
+
+MenuTrigger.displayName = "@refraktor/core/Menu.Trigger";
+
+export default MenuTrigger;

package/src/components/menu/menu.context.ts

@@ -0,0 +1,162 @@
+import { createSafeContext } from "@refraktor/utils";
+import { useCallback, useRef } from "react";
+import { RefraktorRadius } from "../../theme";
+import { TransitionProps } from "../transition";
+import { MenuClassNames } from "./menu.types";
+import { UseMenuReturn } from "./use-menu";
+
+export interface MenuItemRegistration {
+    id: string;
+    ref: React.MutableRefObject<HTMLElement | null>;
+    disabled: boolean;
+    textValue: string;
+    hasSubmenu?: boolean;
+    openSubmenu?: (focusFirstItem?: boolean) => void;
+}
+
+export interface MenuRootContextValue {
+    radius: RefraktorRadius;
+    withinPortal: boolean;
+    closeOnItemClick: boolean;
+    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
+    classNames?: MenuClassNames;
+    getStyles: (part: keyof MenuClassNames) => string | undefined;
+}
+
+export interface MenuLevelContextValue {
+    menu: UseMenuReturn;
+    isSubmenu: boolean;
+    registerItem: (item: MenuItemRegistration) => () => void;
+    getItems: () => MenuItemRegistration[];
+    closeMenu: () => void;
+    closeAllMenus: () => void;
+}
+
+export interface MenuSubContextValue {
+    submenuLevel: MenuLevelContextValue;
+    parentLevel: MenuLevelContextValue;
+    disabled: boolean;
+    openSubmenu: (focusFirstItem?: boolean) => void;
+    closeSubmenu: () => void;
+}
+
+export const [MenuRootProvider, useMenuRootContext] =
+    createSafeContext<MenuRootContextValue>(
+        "Menu component was not found in tree. Make sure Menu components are wrapped with Menu."
+    );
+
+export const [MenuLevelProvider, useMenuLevelContext] =
+    createSafeContext<MenuLevelContextValue>(
+        "Menu dropdown context was not found in tree. Make sure Menu.Item and related components are inside Menu.Dropdown or Menu.SubDropdown."
+    );
+
+export const [MenuSubProvider, useMenuSubContext] =
+    createSafeContext<MenuSubContextValue>(
+        "Menu.Sub context was not found in tree. Make sure Menu.SubTrigger and Menu.SubDropdown are inside Menu.Sub."
+    );
+
+export function useMenuItemsRegistry() {
+    const itemsRef = useRef<MenuItemRegistration[]>([]);
+
+    const registerItem = useCallback((item: MenuItemRegistration) => {
+        itemsRef.current = [...itemsRef.current.filter((x) => x.id !== item.id), item];
+
+        return () => {
+            itemsRef.current = itemsRef.current.filter((x) => x.id !== item.id);
+        };
+    }, []);
+
+    const getItems = useCallback(() => sortMenuItems(itemsRef.current), []);
+
+    return {
+        registerItem,
+        getItems
+    };
+}
+
+export function sortMenuItems(items: MenuItemRegistration[]) {
+    return [...items].sort((a, b) => {
+        const aNode = a.ref.current;
+        const bNode = b.ref.current;
+
+        if (!aNode || !bNode || aNode === bNode) {
+            return 0;
+        }
+
+        const position = aNode.compareDocumentPosition(bNode);
+
+        if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+            return -1;
+        }
+
+        if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+            return 1;
+        }
+
+        return 0;
+    });
+}
+
+export function getNavigableMenuItems(items: MenuItemRegistration[]) {
+    return items.filter((item) => !item.disabled);
+}
+
+export function findFocusedMenuItemIndex(items: MenuItemRegistration[]) {
+    return items.findIndex((item) => item.ref.current === document.activeElement);
+}
+
+export function focusMenuItem(item?: MenuItemRegistration) {
+    item?.ref.current?.focus();
+}
+
+export function findTypeaheadMatch(
+    items: MenuItemRegistration[],
+    search: string,
+    currentIndex: number
+) {
+    if (!items.length || !search) {
+        return -1;
+    }
+
+    const normalizedSearch = search.trim().toLowerCase();
+
+    if (!normalizedSearch) {
+        return -1;
+    }
+
+    const getNormalizedText = (item: MenuItemRegistration) =>
+        item.textValue.trim().toLowerCase();
+
+    for (let index = currentIndex + 1; index < items.length; index++) {
+        const item = items[index];
+
+        if (getNormalizedText(item).startsWith(normalizedSearch)) {
+            return index;
+        }
+    }
+
+    for (let index = 0; index <= currentIndex; index++) {
+        const item = items[index];
+
+        if (getNormalizedText(item).startsWith(normalizedSearch)) {
+            return index;
+        }
+    }
+
+    return -1;
+}
+
+export function getNodeTextValue(
+    children: React.ReactNode,
+    explicitTextValue?: string
+) {
+    if (explicitTextValue) {
+        return explicitTextValue;
+    }
+
+    if (typeof children === "string" || typeof children === "number") {
+        return String(children);
+    }
+
+    return "";
+}