@react-fabric/core 1.0.0-beta.6 → 1.0.0-beta.60

package/src/components/menu/Menu.tsx

@@ -48,7 +48,6 @@ import {
 import { mergeRefs } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
-  Children,
   cloneElement,
   Fragment,
   useCallback,
@@ -56,8 +55,9 @@ import {
   useRef,
   useState,
 } from "react";
+import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
 import { CoreIcons } from "../../types/icons";
-import { nodeCheck } from "../../utils";
+import { cloneChildren, nodeCheck } from "../../utils";
 import { MenuItem } from "./MenuItem";
 import { type MenuProps } from "./types";
 
@@ -69,6 +69,8 @@ const MenuComponent = ({
   menuClassName,
   onClick,
   // @ts-expect-error ignore
+  trigger = "hover",
+  // @ts-expect-error ignore
   ref,
   ...rest
 }: Partial<MenuProps>) => {
@@ -89,6 +91,8 @@ const MenuComponent = ({
     open: !isNested || isOpen,
     onOpenChange(open, event, reason) {
       isNested && setIsOpen(open);
+      if (reason === "outside-press" && trigger === "click")
+        tree?.events.emit("close");
     },
     placement: isNested ? "right-start" : "bottom-start",
     middleware: [
@@ -100,12 +104,14 @@ const MenuComponent = ({
   });
 
   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 });
@@ -187,6 +193,16 @@ const MenuComponent = ({
     );
   }, [isOpen]);
 
+  useEffect(() => {
+    if ((!isNested || isOpen) && activeIndex) {
+      setTimeout(() => {
+        elementsRef.current[activeIndex]?.scrollIntoView({
+          block: "nearest",
+        });
+      }, 100);
+    }
+  }, [isOpen, activeIndex]);
+
   return (
     <FloatingNode id={nodeId}>
       {isNested && (
@@ -210,29 +226,29 @@ const MenuComponent = ({
         {(!isNested || isOpen) && (
           <Wrapper {...wrapperProps}>
             {isNested && <FloatingOverlay />}
-            <FloatingFocusManager
-              context={context}
-              modal={!isNested}
-              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)]",
-                )}
-                autoFocus
-                ref={mergeRefs(isNested ? refs.setFloating : ref)}
-                {...getFloatingProps({
-                  onClick: isNested ? undefined : handleClick,
-                })}
-                // @ts-expect-error ignore
-                {...{ style: !isNested ? rest.style : floatingStyles }}
+            <HotKeyWrapper>
+              <FloatingFocusManager
+                context={context}
+                modal={!isNested}
+                initialFocus={isNested ? -1 : 0}
+                returnFocus={!isNested}
               >
-                {Children.map(children, (child: AnyObject, index) => {
-                  if (child) {
+                <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-(--z-popover)",
+                  )}
+                  autoFocus
+                  ref={mergeRefs(isNested ? refs.setFloating : ref)}
+                  {...getFloatingProps({
+                    onClick: isNested ? undefined : handleClick,
+                  })}
+                  // @ts-expect-error ignore
+                  {...{ style: !isNested ? rest.style : floatingStyles }}
+                >
+                  {cloneChildren(children, (child: AnyObject, index) => {
                     labelsRef.current[index] = child.props.label;
                     return cloneElement(
                       child,
@@ -249,10 +265,10 @@ const MenuComponent = ({
                           }
                         : {},
                     );
-                  }
-                })}
-              </div>
-            </FloatingFocusManager>
+                  })}
+                </div>
+              </FloatingFocusManager>
+            </HotKeyWrapper>
           </Wrapper>
         )}
       </FloatingList>
@@ -260,14 +276,55 @@ const MenuComponent = ({
   );
 };
 
+/**
+ * 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.
+ *
+ * @param {MenuProps} props - The properties for the Menu component.
+ * @returns {JSX.Element} The rendered Menu component.
+ *
+ * @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>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-menu--docs} for more details.
+ */
 export const Menu = (props: MenuProps) => {
   const parentId = useFloatingParentNodeId();
+  const tree = useFloatingTree();
+
+  if (tree) {
+    return (
+      <MenuComponent
+        {...(props as AnyObject)}
+        className=""
+        menuClassName={props.className}
+      />
+    );
+  }
 
   if (parentId === null) {
     return (
       <FloatingTree>
         <MenuComponent
           {...(props as AnyObject)}
+          className=""
           menuClassName={props.className}
         />
       </FloatingTree>

package/src/components/menu/MenuItem.tsx

@@ -22,27 +22,45 @@
  */
 
 import { useFloatingTree } from "@floating-ui/react";
-import { iconToken } from "@react-fabric/utilities";
+import { iconToken, mergeRefs } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { Fragment, useCallback, useMemo } from "react";
+import { Fragment, useCallback, useEffect, useMemo, useRef } from "react";
+import { HotKey } from "../../hotkeys/HotKey";
 import { HotKeyLabel } from "../../hotkeys/HotKeyLabel";
 import { Tooltip } from "../../overlays";
 import { type PolymorphicProps } from "../../types";
 import { Badge, getBadgeProps } from "../badge/Badge";
-import { Icon } from "../icon/Icon";
-import classes from "./Menu.module.css";
+import { getIconProps, Icon } from "../icon/Icon";
 import { type MenuItemProps } from "./types";
 
+/**
+ * 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.
+ *
+ * @param {MenuItemProps} props
+ * @returns A JSX element representing the menu item.
+ *
+ * @example
+ * ```jsx
+ * <MenuItem
+ *   label="Settings"
+ *   icon="settings"
+ *   onClick={() => console.log("Settings clicked")}
+ *   hotKey="Ctrl+S"
+ *   badge={{ count: 3, color: "red" }}
+ * />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-menu--docs} for documentation.
+ */
 export const MenuItem = <Tag extends React.ElementType = "button">({
   as,
   label,
   color = "primary",
   className,
   icon,
-  iconBg,
-  iconColor,
   appendLabel,
-  rtlFlip,
   altIcon,
   id,
   active,
@@ -50,6 +68,7 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
   onClick,
   badge,
   hotKey,
+  tabIndex = -1,
   // @ts-expect-error ignore
   minimal,
   // @ts-expect-error ignore
@@ -58,11 +77,16 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
   ref,
   ...aria
 }: MenuItemProps & PolymorphicProps<Tag>) => {
+  const elRef = useRef<HTMLElement>(null);
   const tree = useFloatingTree();
   const badgeProps = useMemo(() => {
     return getBadgeProps(badge);
   }, [badge]);
 
+  useEffect(() => {
+    tabIndex === 0 && elRef.current?.focus();
+  }, [tabIndex]);
+
   const iconEl = useMemo(() => {
     let path = icon;
     if (minimal && !path) {
@@ -70,14 +94,11 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
     }
     return (
       <Icon
-        className={classNames(classes.menuIcon, minimal && classes.minimal)}
-        icon={path ?? ""}
-        bg={iconBg}
-        color={iconColor}
-        rtlFlip={rtlFlip}
+        className={classNames("fabric-menuIcon", minimal && "minimal")}
+        {...getIconProps(path ?? "")}
       />
     );
-  }, [icon, iconBg, iconColor, rtlFlip, minimal, label]);
+  }, [icon, minimal, label]);
 
   const Wrapper = useCallback(
     ({ children, ...rest }: AnyObject) => {
@@ -135,26 +156,30 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
   return (
     <Wrapper {...aria}>
       <E
-        ref={ref}
+        ref={mergeRefs(ref, elRef)}
         data-dropdown-dismiss
         data-color={color}
         className={classNames(
-          classes.menuItem,
+          "fabric-menuItem cursor-pointer",
           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] my-0.5",
         )}
         data-active={active}
         data-open={childOpen}
         disabled={disabled}
         data-id={id}
+        tabIndex={tabIndex}
         onClick={(e) => {
           onClick?.(e) !== false && tree?.events.emit("click");
         }}
         {...(minimal ? {} : aria)}
       >
+        {hotKey && (
+          <HotKey keyCombo={hotKey} handler={() => elRef.current?.click?.()} />
+        )}
         {menuLabel}
       </E>
     </Wrapper>

package/src/components/menu/types.ts

@@ -27,17 +27,13 @@ import {
   type BadgeType,
   type CallbackReturn,
   type ChildrenProp,
-  type ColorType,
+  type ColorState,
   type CssProp,
-  type IconProps,
   type TestProps,
 } from "../../types";
+import { type IconProps } from "../icon/Icon";
 
-export interface MenuItemProps
-  extends CssProp,
-    AriaProps,
-    TestProps,
-    IconProps {
+export interface MenuItemProps extends CssProp, AriaProps, TestProps {
   /**
    * menu id passed via menu.onClick
    */
@@ -53,7 +49,11 @@ export interface MenuItemProps
   /**
    * menu color
    */
-  color?: ColorType;
+  color?: ColorState;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * item active
    */
@@ -90,6 +90,7 @@ export interface MenuRootProps extends CssProp {
 export interface MenuInnerProps extends MenuItemProps {
   label: string;
   minimal?: never;
+  trigger?: "hover" | "click";
   /**
    * floating menu className
    */

package/src/components/meter/Meter.tsx

@@ -25,7 +25,6 @@ import { Format } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { useMemoDebugger } from "../../hooks/useEffectDebugger";
 import { type AriaProps, type CssProp, type TestProps } from "../../types";
-import classes from "./Meter.module.css";
 
 export interface MeterProps extends CssProp, AriaProps, TestProps {
   /**
@@ -38,6 +37,30 @@ export interface MeterProps extends CssProp, AriaProps, TestProps {
   hideLabel?: boolean;
 }
 
+/**
+ * A component that displays a visual representation of a value as a series of dots.
+ * It is useful for showing progress or completion status in a compact form.
+ * The meter consists of 6 dots, each representing approximately 16.67% of the total value.
+ * The active dots are filled based on the value provided, and the remaining dots are empty.
+ * The component can also display a label showing the percentage value.
+ *
+ * @param {MeterProps} props - The properties for the Meter component.
+ * @returns {JSX.Element} The rendered Meter component.
+ *
+ * @example
+ * ```jsx
+ * <Meter value={75} />
+ * // Renders a meter with 4 active dots and a label showing "75%"
+ *
+ * <Meter value={50} hideLabel />
+ * // Renders a meter with 3 active dots and no label
+ *
+ * <Meter value={100} className="custom-meter" />
+ * // Renders a meter with all 6 active dots and a custom class name
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-meter--docs} for more details.
+ */
 export const Meter = ({ value, hideLabel, className, ...aria }: MeterProps) => {
   /** ***************** calculate active meter dots *******************/
   const activeCount = useMemoDebugger(
@@ -51,9 +74,9 @@ export const Meter = ({ value, hideLabel, className, ...aria }: MeterProps) => {
   return (
     <div
       className={classNames(
-        classes.meter,
+        "fabric-meter",
         className,
-        "flex flex-nowrap items-center gap-[2px]",
+        "flex flex-nowrap items-center gap-0.5",
       )}
       {...aria}
     >
@@ -61,7 +84,7 @@ export const Meter = ({ value, hideLabel, className, ...aria }: MeterProps) => {
         <div
           key={step}
           className={classNames(
-            classes.meterBar,
+            "fabric-meterBar",
             "first-of-type:rounded-s last-of-type:rounded-e bg-tint-100 relative outline -outline-offset-1 outline-muted overflow-hidden after:absolute after:inset-0",
           )}
           data-active={activeCount >= step}

package/src/components/navigator/Navigator.tsx

@@ -22,57 +22,106 @@
  */
 
 import classNames from "classnames";
+import { useCallback } from "react";
 import { HotKey } from "../../hotkeys/HotKey";
 import {
   type AriaProps,
+  type ChildProp,
   type ColorType,
   type CssProp,
+  type PaletteType,
   type TestProps,
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { Icon } from "../icon/Icon";
+import { isEmpty } from "@react-fabric/utilities";
 
-export interface NavigatorProps extends CssProp, AriaProps, TestProps {
+export interface NavigatorProps
+  extends CssProp,
+    AriaProps,
+    TestProps,
+    Partial<ChildProp> {
+  length?: number;
+  current?: number;
+  disableKeyHandlers?: boolean;
   /**
    * navigator button color
    */
-  color?: ColorType | string;
+  color?: ColorType | PaletteType | string;
   /**
    * navigation handler
    */
   onNavigate: (dir: -1 | 1) => void;
 }
 
+/**
+ * A component that provides navigation controls for traversing through items.
+ * It includes previous and next buttons, and supports keyboard navigation.
+ *
+ * @param {NavigatorProps} props - The properties for the Navigator component.
+ * @returns {JSX.Element} The rendered Navigator component.
+ *
+ * @example
+ * ```jsx
+ * <Navigator
+ *   className="my-navigator"
+ *   onNavigate={(dir) => console.log(`Navigate ${dir === -1 ? 'previous' : 'next'}`)}
+ *   color="blue"
+ *   length={10}
+ *   current={0}
+ * >
+ *   <span>Current Item: 1</span>
+ * </Navigator>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-navigator--docs} for more details.
+ */
 export const Navigator = ({
   className,
   onNavigate,
   color,
+  children,
+  length,
+  current,
+  disableKeyHandlers,
   ...aria
 }: NavigatorProps) => {
+  const navPrev = useCallback(
+    () => (isEmpty(current) || current !== 0) && onNavigate(-1),
+    [onNavigate, current],
+  );
+  const navNext = useCallback(
+    () => (isEmpty(current) || current + 1 < (length ?? 0)) && onNavigate(+1),
+    [onNavigate, current, length],
+  );
   return (
     <div
-      className={classNames(className, "inline-block leading-none")}
+      data-ref="navigator"
+      className={classNames(className, "inline-flex items-center leading-none")}
       {...aria}
     >
-      <HotKey keyCombo="left" handler={() => onNavigate(-1)} />
-      <HotKey keyCombo="right" handler={() => onNavigate(1)} />
+      {!disableKeyHandlers && <HotKey keyCombo="left" handler={navPrev} />}
+      {!disableKeyHandlers && <HotKey keyCombo="right" handler={navNext} />}
       <Icon
         rtlFlip
         color={color}
         className="text-[1em] p-1"
         aria-label="previous"
-        data-testid="previous"
+        data-ref="previous"
         icon={CoreIcons.chevronLeft}
-        onClick={(e) => [e.stopPropagation(), onNavigate(-1)]}
+        disabled={!isEmpty(current) && current === 0}
+        onClick={(e) => [e.stopPropagation(), navPrev()]}
       />
+      {children}
       <Icon
         rtlFlip
         className="text-[1em] p-1"
         color={color}
         aria-label="next"
-        data-testid="next"
+        data-ref="next"
         icon={CoreIcons.chevronRight}
-        onClick={(e) => [e.stopPropagation(), onNavigate(1)]}
+        disabled={!isEmpty(current) && current + 1 === length}
+        onClick={(e) => [e.stopPropagation(), navNext()]}
       />
     </div>
   );