@refraktor/core 0.0.4 → 0.0.5

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

@@ -1,221 +0,0 @@
-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}
-                style={{ position: "relative", zIndex: 1000 }}
-                {...transitionProps}
-            >
-                <MenuLevelProvider value={submenuLevel}>
-                    <div
-                        ref={useMergeRefs([
-                            ref,
-                            submenuLevel.menu.refs.setFloating
-                        ])}
-                        role="menu"
-                        tabIndex={-1}
-                        style={{
-                            ...submenuLevel.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"),
-                            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

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

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

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

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

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

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

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