@react-fabric/core 1.0.0-beta.9 → 1.0.2

package/src/components/menu/Menu.tsx

@@ -45,33 +45,32 @@ import {
   useRole,
   useTypeahead,
 } from "@floating-ui/react";
-import { mergeRefs } from "@react-fabric/utilities";
-import classNames from "classnames";
-import {
-  Children,
-  cloneElement,
-  Fragment,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { CoreIcons } from "../../types/icons";
-import { nodeCheck } from "../../utils";
+import { cn, mergeRefs } from "@react-fabric/utilities";
+import { cloneElement, Fragment, isValidElement, useEffect, useRef, useState } from "react";
+import { cloneChildren, nodeCheck } from "../../utils";
 import { MenuItem } from "./MenuItem";
-import { type MenuProps } from "./types";
+import type { MenuItemProps, MenuProps } from "./types";
 
 // FIXME: refactor menu implementation to differentiate between static and floating menus, implement context wrapper for each menu level
 
-const MenuComponent = ({
+function MenuComponent({
   children,
   minimal,
-  menuClassName,
+  className,
+  forDropdown,
   onClick,
   // @ts-expect-error ignore
+  trigger = "hover",
+  // @ts-expect-error ignore
   ref,
+  // @ts-expect-error ignore
+  onMouseUp,
+  // @ts-expect-error ignore
+  onMouseDown,
+  // @ts-expect-error ignore
+  style,
   ...rest
-}: Partial<MenuProps>) => {
+}: Partial<MenuProps>) {
   const [isOpen, setIsOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
 
@@ -82,30 +81,29 @@ const MenuComponent = ({
   const nodeId = useFloatingNodeId();
   const parentId = useFloatingParentNodeId();
 
-  const isNested = parentId !== null;
+  const isNested = parentId !== null && !forDropdown;
 
   const { floatingStyles, refs, context } = useFloating<HTMLButtonElement>({
-    nodeId,
+    nodeId: `menu-${nodeId}`,
     open: !isNested || isOpen,
     onOpenChange(open, event, reason) {
-      isNested && setIsOpen(open);
+      if (isNested) setIsOpen(open);
+      if (reason === "outside-press" && trigger === "click") tree?.events.emit("close");
     },
     placement: isNested ? "right-start" : "bottom-start",
-    middleware: [
-      offset({ mainAxis: isNested ? 0 : 4, alignmentAxis: isNested ? -4 : 0 }),
-      flip(),
-      shift(),
-    ],
+    middleware: [offset({ mainAxis: isNested ? 0 : 4, alignmentAxis: isNested ? -4 : 0 }), flip(), shift()],
     whileElementsMounted: autoUpdate,
   });
 
   const hover = useHover(context, {
+    enabled: trigger === "hover",
     delay: { open: 75 },
     handleClose: safePolygon({ blockPointerEvents: true }),
   });
   const click = useClick(context, {
-    toggle: true,
-    ignoreMouse: true,
+    event: "mousedown",
+    toggle: trigger === "click" || !isNested,
+    ignoreMouse: trigger === "hover" && !isNested,
   });
   const role = useRole(context, { role: "menu" });
   const dismiss = useDismiss(context, { bubbles: true });
@@ -121,9 +119,14 @@ const MenuComponent = ({
     activeIndex,
   });
 
-  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
-    [click, hover, role, dismiss, listNavigation, typeahead],
-  );
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+    click,
+    hover,
+    role,
+    dismiss,
+    listNavigation,
+    typeahead,
+  ]);
 
   // Event emitter allows you to communicate across tree components.
   // This effect closes all menus when an item gets clicked anywhere
@@ -158,92 +161,100 @@ const MenuComponent = ({
     }
   }, [tree, isOpen, nodeId, parentId]);
 
-  const handleClick = useCallback(
-    (e: React.MouseEvent) => {
-      const el = e.target as HTMLElement;
-      if (el.dataset.id) {
-        onClick?.(el.dataset.id as AnyObject);
-      }
-    },
-    [onClick],
-  );
+  const handleClick = (e: React.MouseEvent) => {
+    const el = e.target as HTMLElement;
+    if (el.dataset.id) {
+      onClick?.(el.dataset.id);
+    }
+  };
 
   const Wrapper = isNested ? FloatingPortal : Fragment;
   const wrapperProps = isNested
     ? {
-        root:
-          refs.domReference.current?.closest<HTMLElement>(".theme-base") ??
-          undefined,
+        root: refs.domReference.current?.closest<HTMLElement>(".theme-base") ?? undefined,
       }
     : {};
 
   useEffect(() => {
-    setTimeout(
-      () =>
-        refs.floating.current
-          ?.querySelector(`[data-active="true"]`)
-          ?.scrollIntoView({ block: "nearest" }),
-      100,
-    );
-  }, [isOpen]);
+    const tmr = setTimeout(() => {
+      elementsRef.current[0]?.focus();
+      refs.floating.current?.querySelector(`[data-active="true"]`)?.scrollIntoView({ block: "nearest" });
+    }, 100);
+    return () => {
+      clearTimeout(tmr);
+    };
+  }, [isOpen, refs.floating]);
+
+  useEffect(() => {
+    if ((!isNested || isOpen) && activeIndex) {
+      const tmr = setTimeout(() => {
+        elementsRef.current[activeIndex]?.scrollIntoView({
+          block: "nearest",
+        });
+      }, 100);
+      return () => {
+        clearTimeout(tmr);
+      };
+    }
+  }, [isOpen, activeIndex, isNested]);
 
   return (
     <FloatingNode id={nodeId}>
       {isNested && (
         <MenuItem
-          {...(getReferenceProps({
+          {...getReferenceProps({
             ...rest,
             id: undefined,
+            // @ts-expect-error ignore
             "data-dropdown-dismiss": false,
-            onClick: (e: AnyObject) => {
+            onClick: (e: React.MouseEvent) => {
               e.stopPropagation();
               return false;
             },
-          } as AnyObject) as AnyObject)}
+          })}
           data-open={isOpen}
+          // @ts-expect-error ignore
           minimal={minimal}
-          altIcon={CoreIcons.chevronRight}
-          ref={mergeRefs(refs.setReference, ref)}
+          altIcon="icon-[mdi--menu-right]"
+          ref={mergeRefs(refs.reference, ref)}
         />
       )}
       <FloatingList elementsRef={elementsRef} labelsRef={labelsRef}>
         {(!isNested || isOpen) && (
           <Wrapper {...wrapperProps}>
             {isNested && <FloatingOverlay />}
-            <FloatingFocusManager
-              context={context}
-              modal={!isNested}
-              initialFocus={isNested ? -1 : 0}
-              returnFocus={!isNested}
-            >
+            <FloatingFocusManager context={context} closeOnFocusOut initialFocus={isNested ? -1 : 0} returnFocus={!isNested}>
               <div
-                className={classNames(
-                  menuClassName,
-                  "flex flex-col bg-base p-1 menu-list",
-                  isNested &&
-                    "outline shadow-lg rounded-capped max-h-96 overflow-auto scroll-thin z-[var(--z-popover)]",
+                className={cn(
+                  className,
+                  "flex flex-col p-1 menu-list",
+                  isNested && "outline shadow-lg rounded-capped max-h-[60vh] overflow-auto scroll-thin z-(--z-popover)",
                 )}
-                autoFocus
-                ref={mergeRefs(isNested ? refs.setFloating : ref)}
+                ref={mergeRefs(isNested ? refs.floating : ref)}
                 {...getFloatingProps({
                   onClick: isNested ? undefined : handleClick,
+                  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                  onMouseDown,
+                  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                  onMouseUp,
                 })}
-                // @ts-expect-error ignore
-                {...{ style: !isNested ? rest.style : floatingStyles }}
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                {...{ style: !isNested ? style : floatingStyles }}
               >
-                {Children.map(children, (child: AnyObject, index) => {
-                  if (child) {
-                    labelsRef.current[index] = child.props.label;
+                {cloneChildren(children)?.map((child, index) => {
+                  if (isValidElement(child)) {
+                    const childEl = child as React.ReactElement<MenuItemProps>;
+                    labelsRef.current[index] = childEl.props.label;
                     return cloneElement(
-                      child,
+                      childEl,
                       nodeCheck(child, MenuItem, Menu, MenuComponent)
                         ? {
+                            // @ts-expect-error ignore
                             minimal: !isNested && minimal,
                             "data-focus": activeIndex === index,
-                            ref: (el: HTMLElement) =>
-                              (elementsRef.current[index] = el),
+                            ref: (el: HTMLElement) => (elementsRef.current[index] = el),
                             ...getItemProps({
-                              onClick: child.props.onClick,
+                              onClick: childEl.props.onClick,
                               tabIndex: activeIndex === index ? 0 : -1,
                             }),
                           }
@@ -258,21 +269,47 @@ const MenuComponent = ({
       </FloatingList>
     </FloatingNode>
   );
-};
+}
 
-export const Menu = (props: MenuProps) => {
+/**
+ * A component that displays a menu with items, supports nested menus and various interactions.
+ * It can be triggered by hover or click events, and allows for custom styling and behavior.
+ * This component is designed to be used within a Floating UI context, allowing for dynamic positioning and interaction handling.
+ * It can be nested within other menus to create complex menu structures.
+ *
+ * @example
+ * ```jsx
+ * <Menu
+ *   className="my-menu"
+ *   trigger="click"
+ *   onClick={(id) => console.log(`Clicked item with id: ${id}`)}
+ * >
+ *   <MenuItem id="item1" label="Item 1" />
+ *   <MenuItem id="item2" label="Item 2" />
+ *   <MenuItem id="item3" label="Item 3">
+ *     <Menu>
+ *       <MenuItem id="subitem1" label="Sub Item 1" />
+ *       <MenuItem id="subitem2" label="Sub Item 2" />
+ *     </Menu>
+ *   </MenuItem>
+ * </Menu>
+ * ```
+ */
+export function Menu(props: MenuProps) {
   const parentId = useFloatingParentNodeId();
+  const tree = useFloatingTree();
+
+  if (tree) {
+    return <MenuComponent {...props} />;
+  }
 
   if (parentId === null) {
     return (
       <FloatingTree>
-        <MenuComponent
-          {...(props as AnyObject)}
-          menuClassName={props.className}
-        />
+        <MenuComponent {...props} />
       </FloatingTree>
     );
   }
 
   return <MenuComponent {...props} />;
-};
+}

package/src/components/menu/MenuItem.tsx

@@ -22,27 +22,62 @@
  */
 
 import { useFloatingTree } from "@floating-ui/react";
-import { iconToken } from "@react-fabric/utilities";
-import classNames from "classnames";
-import { Fragment, useCallback, useMemo } from "react";
-import { HotKeyLabel } from "../../hotkeys/HotKeyLabel";
-import { Tooltip } from "../../overlays";
-import { type PolymorphicProps } from "../../types";
-import { Badge, getBadgeProps } from "../badge/Badge";
+import { cn, EMPTY_ARRAY, iconToken, mergeRefs } from "@react-fabric/utilities";
+import { useHotkeySequence } from "@tanstack/react-hotkeys";
+import { Fragment, useEffect, useMemo, useRef } from "react";
+import type { PolymorphicProps } from "../../types";
+import { Kbd } from "../../typography/Kbd";
+import { getBadgeProps, getIconProps } from "../../utils";
+import { Badge } from "../badge/Badge";
 import { Icon } from "../icon/Icon";
-import classes from "./Menu.module.css";
-import { type MenuItemProps } from "./types";
+import { Tooltip } from "../tooltip/Tooltip";
+import type { MenuItemProps } from "./types";
 
-export const MenuItem = <Tag extends React.ElementType = "button">({
+function Wrapper({
+  children,
+  minimal,
+  label,
+  childOpen,
+  ...rest
+}: {
+  label?: string;
+  minimal?: boolean;
+  childOpen?: boolean;
+  children: React.ReactElement<KeyValue>;
+}) {
+  return minimal ? (
+    <Tooltip content={label} placement="right" disabled={childOpen} {...rest}>
+      {children}
+    </Tooltip>
+  ) : (
+    <Fragment>{children}</Fragment>
+  );
+}
+
+/**
+ * A menu item component that can be used in a dropdown or menu.
+ * It supports various features such as icons, badges, hotkeys, and more.
+ * It can be customized with different colors, icons, and behaviors.
+ *
+ * @example
+ * ```jsx
+ * <MenuItem
+ *   label="Settings"
+ *   icon="settings"
+ *   onClick={() => console.log("Settings clicked")}
+ *   hotKey="Ctrl+S"
+ *   badge={{ count: 3, color: "red" }}
+ * />
+ * ```
+ */
+export function MenuItem<Tag extends React.ElementType = "button">({
   as,
   label,
   color = "primary",
   className,
   icon,
-  iconBg,
-  iconColor,
+  labelRender,
   appendLabel,
-  rtlFlip,
   altIcon,
   id,
   active,
@@ -50,65 +85,43 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
   onClick,
   badge,
   hotKey,
+  tabIndex = -1,
   // @ts-expect-error ignore
-  minimal,
+  minimal = false,
   // @ts-expect-error ignore
   "data-open": childOpen,
   // @ts-expect-error ignore
   ref,
   ...aria
-}: MenuItemProps & PolymorphicProps<Tag>) => {
+}: MenuItemProps & PolymorphicProps<Tag>) {
+  const elRef = useRef<HTMLElement>(null);
   const tree = useFloatingTree();
   const badgeProps = useMemo(() => {
     return getBadgeProps(badge);
   }, [badge]);
 
+  useEffect(() => {
+    if (tabIndex === 0) elRef.current?.focus();
+  }, [tabIndex]);
+
   const iconEl = useMemo(() => {
     let path = icon;
     if (minimal && !path) {
       path = iconToken(label);
     }
-    return (
-      <Icon
-        className={classNames(classes.menuIcon, minimal && classes.minimal)}
-        icon={path ?? ""}
-        bg={iconBg}
-        color={iconColor}
-        rtlFlip={rtlFlip}
-      />
-    );
-  }, [icon, iconBg, iconColor, rtlFlip, minimal, label]);
-
-  const Wrapper = useCallback(
-    ({ children, ...rest }: AnyObject) => {
-      return minimal ? (
-        <Tooltip
-          content={label}
-          placement="right"
-          disabled={childOpen}
-          {...rest}
-        >
-          {children}
-        </Tooltip>
-      ) : (
-        <Fragment>{children}</Fragment>
-      );
-    },
-    [minimal, label, childOpen],
-  );
+    return <Icon className={cn("fabric-menuIcon", !!minimal && "minimal")} {...getIconProps(path ?? "")} />;
+  }, [icon, minimal, label]);
 
   const menuLabel = useMemo(() => {
     return (
       <div className="flex flex-nowrap text-start items-center">
         {iconEl}
-        {!minimal && (
-          <label className="flex-1 pe-4 py-[0.375em] truncate">{label}</label>
-        )}
+        {!minimal && <label className="flex-1 pe-4 py-[0.375em] truncate">{labelRender ?? label}</label>}
         {appendLabel && (
           <span
-            className={classNames(
+            className={cn(
               "font-bold whitespace-nowrap text-center leading-none mx-1",
-              minimal && "absolute inset-x-0 bottom-0 overflow-clip",
+              !!minimal && "absolute inset-x-0 bottom-0 overflow-clip",
               minimal ? "text-[0.5rem]" : "text-[0.625rem]",
               active ? "text-white/50" : "text-tint-600/50",
             )}
@@ -117,41 +130,46 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
           </span>
         )}
         {badge && (
-          <Badge
-            {...badgeProps}
-            placement={minimal ? "end" : ""}
-            className={classNames("me-1", badgeProps.className)}
-          />
-        )}
-        {hotKey && <HotKeyLabel keyCombo={hotKey} />}
-        {!minimal && altIcon && (
-          <Icon className="text-muted px-1" icon={altIcon} rtlFlip />
+          <Badge {...(badgeProps as AnyObject)} inline={!minimal} placement={minimal ? "end" : undefined} className="mx-1" />
         )}
+        {hotKey && <Kbd keys={hotKey} />}
+        {!minimal && altIcon && <Icon className="text-muted px-1" icon={altIcon} rtlFlip />}
       </div>
     );
-  }, [iconEl, minimal, appendLabel, label, badge, badgeProps, hotKey, active]);
+  }, [iconEl, minimal, labelRender, label, appendLabel, active, badge, badgeProps, hotKey, altIcon]);
+
+  useHotkeySequence(
+    hotKey ? [hotKey].flat() : EMPTY_ARRAY,
+    () => {
+      void elRef.current?.click?.();
+    },
+    {
+      enabled: !disabled,
+    },
+  );
 
   const E = as ?? "button";
   return (
-    <Wrapper {...aria}>
+    <Wrapper {...aria} childOpen={!!childOpen} label={label} minimal={!!minimal}>
       <E
-        ref={ref}
+        ref={mergeRefs(ref, elRef)}
         data-dropdown-dismiss
         data-color={color}
-        className={classNames(
-          classes.menuItem,
+        className={cn(
+          "fabric-menuItem cursor-pointer outline-none",
           className,
-          active && classes.active,
-          minimal && classes.minimal,
-          disabled && classes.disabled,
-          "rounded-capped relative max-w-[50vw] my-0.5",
+          active && "active",
+          !!minimal && "minimal",
+          disabled && "disabled",
+          "rounded relative max-w-[50vw]",
         )}
         data-active={active}
-        data-open={childOpen}
+        data-open={!!childOpen}
         disabled={disabled}
         data-id={id}
+        tabIndex={tabIndex}
         onClick={(e) => {
-          onClick?.(e) !== false && tree?.events.emit("click");
+          if (onClick?.(e) !== false) tree?.events.emit("click");
         }}
         {...(minimal ? {} : aria)}
       >
@@ -159,4 +177,4 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
       </E>
     </Wrapper>
   );
-};
+}

package/src/components/menu/types.ts

@@ -21,23 +21,12 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { type ElementType, type MouseEvent } from "react";
-import {
-  type AriaProps,
-  type BadgeType,
-  type CallbackReturn,
-  type ChildrenProp,
-  type ColorType,
-  type CssProp,
-  type IconProps,
-  type TestProps,
-} from "../../types";
+import type { Hotkey } from "@tanstack/react-hotkeys";
+import type { CallbackReturn, ChildrenProp, ColorBase, CssProp, TestProps } from "../../types";
+import type { BadgeType } from "../badge/Badge";
+import type { IconProps } from "../icon/Icon";
 
-export interface MenuItemProps
-  extends CssProp,
-    AriaProps,
-    TestProps,
-    IconProps {
+export interface MenuItemProps extends CssProp, TestProps {
   /**
    * menu id passed via menu.onClick
    */
@@ -46,14 +35,19 @@ export interface MenuItemProps
    * item label
    */
   label: string;
+  labelRender?: React.ReactElement;
   /**
    * append label badge text
    */
-  appendLabel?: string | false;
+  appendLabel?: React.ReactElement | string | number | false;
   /**
    * menu color
    */
-  color?: ColorType;
+  color?: ColorBase;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * item active
    */
@@ -69,7 +63,7 @@ export interface MenuItemProps
   /**
    * keyboard shortcut label
    */
-  hotKey?: string;
+  hotKey?: Hotkey | Hotkey[];
   /**
    * alternate icon align end (caret, arrow)
    */
@@ -77,24 +71,25 @@ export interface MenuItemProps
   /**
    * click handler
    */
-  onClick?: (e: MouseEvent) => CallbackReturn;
+  onClick?: (e: React.MouseEvent) => CallbackReturn;
 }
 
 export interface MenuRootProps extends CssProp {
   label?: never;
   minimal?: boolean;
-  menuClassName?: never;
+  /**
+   * use this create a dropdown button within menu-item
+   */
+  forDropdown?: boolean;
   onClick?: (id: string) => CallbackReturn;
 }
 
-export interface MenuInnerProps extends MenuItemProps {
+export interface MenuInnerProps extends Omit<MenuItemProps, "onClick"> {
   label: string;
   minimal?: never;
-  /**
-   * floating menu className
-   */
-  menuClassName?: string;
+  trigger?: "hover" | "click";
+  forDropdown?: boolean;
+  onClick?: (id: string) => CallbackReturn;
 }
 
-export type MenuProps = ChildrenProp<ElementType<MenuItemProps>> &
-  (MenuRootProps | MenuInnerProps);
+export type MenuProps = ChildrenProp<MenuItemProps> & (MenuRootProps | MenuInnerProps);