@react-fabric/core 1.0.0-beta.3 → 1.0.0-beta.30

package/src/components/divider/Divider.tsx

@@ -30,6 +30,7 @@ import {
   type PaletteType,
 } from "../../types";
 import { getBgClass, getBorderClass, getColorClass } from "../../utils";
+import classes from "./Divider.module.css";
 
 export interface DividerProps extends CssProp, Partial<ChildProp> {
   /**
@@ -67,7 +68,7 @@ export const Divider = ({
             className,
             vertical && "vertical",
             !flex && "self-stretch",
-            vertical ? "mx-1" : "my-1",
+            vertical ? classes.vertical : classes.horizontal,
             color && getBorderClass(color + "-200"),
           )}
         />
@@ -88,7 +89,7 @@ export const Divider = ({
       <div
         className={classNames(
           "px-2 whitespace-nowrap",
-          vertical ? "mx-1" : "my-1",
+          vertical ? classes.vertical : classes.horizontal,
           fill && getBgClass((color ?? "tint") + "-200"),
           !fill && getColorClass((color ?? "tint") + "-600"),
           "rounded-full text-[0.75em]",

package/src/components/dropdown/Dropdown.tsx

@@ -224,6 +224,7 @@ const DropdownElement = ({
             e.stopPropagation();
           },
         }),
+        "data-inner-clickable": "true",
         "data-dropdown-open": isOpen ? true : undefined,
         ref: innerRef,
       })}
@@ -248,6 +249,7 @@ const DropdownElement = ({
                 zIndex: "var(--z-popover)",
                 ...floatingStyles,
               }}
+              data-ref="dropdownBody"
               {...getFloatingProps({
                 onClick: (e) => e.stopPropagation(),
               })}
@@ -257,8 +259,7 @@ const DropdownElement = ({
                 className={classNames(
                   classes.dropdownBody,
                   dropdownClassName,
-                  !plainDropdown &&
-                    "shadow-lg shadow-base bg-base ring-1 ring-tint-100",
+                  !plainDropdown && "shadow-lg bg-base ring-1 ring-tint-100",
                   "rounded-capped overflow-auto scroll-thin grid max-h-[70vh]",
                 )}
                 onMouseUpCapture={tryClosing}

package/src/components/dropdown/DropdownTool.tsx

@@ -31,10 +31,12 @@ export const DropdownTool = ({
   children,
   className,
   groupHover,
+  icon,
   ...props
 }: ChildProp &
   CssProp &
   Omit<DropdownProps, "children"> & {
+    icon?: string;
     /**
      * hide until group hovered
      */
@@ -43,12 +45,12 @@ export const DropdownTool = ({
   return (
     <Dropdown {...props}>
       <Icon
-        icon={CoreIcons.caretDown}
+        icon={icon ?? CoreIcons.caretDown}
         className={classNames(
           className,
           "outline bg-base flex-content pointer-events-auto cursor-pointer",
           groupHover &&
-            "hidden group-hover:inline-block data-[dropdown-open]:inline-block",
+            "hidden group-hover/tool:inline-block data-[dropdown-open]:inline-block",
         )}
       />
       {children}

package/src/components/icon/Icon.module.css

@@ -42,7 +42,6 @@
       line-height: 1;
 
       object-fit: cover;
-      border-radius: inherit;
 
       fill: currentcolor;
     }

package/src/components/icon/Icon.tsx

@@ -23,7 +23,7 @@
 
 import { isString, isSvgPath } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { useMemoDebugger } from "../../hooks/useEffectDebugger";
+import { useMemo } from "react";
 import {
   type AriaProps,
   type ColorType,
@@ -101,71 +101,60 @@ export const Icon = ({
   ...rest
 }: IconProps) => {
   /** ***************** style map *******************/
-  const styles = useMemoDebugger(
-    () => {
-      const s: KeyValue = {};
-      if (bg) {
-        s.backgroundColor = getColor(bg);
-      }
-      if (color) {
-        s.color = getColor(color);
-      }
-      if (size && !(size in SizeMap)) {
-        s.fontSize = size;
-      }
-      if (size && size in SizeMap) {
-        s.fontSize = SizeMap[size];
-      }
-      return s;
-    },
-    [bg, color, size],
-    "Icon styles",
-  );
+  const styles = useMemo(() => {
+    const s: KeyValue = {};
+    if (bg) {
+      s.backgroundColor = getColor(bg);
+    }
+    if (color) {
+      s.color = getColor(color);
+    }
+    if (size && !(size in SizeMap)) {
+      s.fontSize = size;
+    }
+    if (size && size in SizeMap) {
+      s.fontSize = SizeMap[size];
+    }
+    return s;
+  }, [bg, color, size]);
 
   /** ***************** check if icon is svg path *******************/
-  const isSvg = useMemoDebugger(
-    () => {
-      return isSvgPath(icon);
-    },
-    [icon],
-    "Icon isSvg",
-  );
+  const isSvg = useMemo(() => {
+    return isSvgPath(icon);
+  }, [icon]);
 
   /** ***************** render icon *******************/
-  const iconEl = useMemoDebugger(
-    () => {
-      if (!isString(icon)) {
-        throw Error("Invalid icon expected string");
-      }
-      return isSvg ? (
-        <svg viewBox={viewBox}>
-          <path fill="currentColor" d={icon.toString()} />
-        </svg>
-      ) : icon?.toString().length <= 4 ? (
-        <svg role="img">
-          <text
-            x="50%"
-            y="50%"
-            dy=".1em"
-            dominantBaseline="middle"
-            textAnchor="middle"
-            style={{ fontSize: SvgTextSize[icon.length] ?? "1em" }}
-          >
-            {icon}
-          </text>
-        </svg>
-      ) : (
-        <i className={`${icon}`} />
-      );
-    },
-    [icon, isSvg, viewBox],
-    "Icon el",
-  );
+  const iconEl = useMemo(() => {
+    if (!isString(icon)) {
+      throw Error("Invalid icon expected string");
+    }
+    return isSvg ? (
+      <svg viewBox={viewBox}>
+        <path fill="currentColor" d={icon.toString()} />
+      </svg>
+    ) : icon?.toString().length <= 4 ? (
+      <svg role="img">
+        <text
+          x="50%"
+          y="50%"
+          dy=".1em"
+          dominantBaseline="middle"
+          textAnchor="middle"
+          style={{ fontSize: SvgTextSize[icon.length] }}
+        >
+          {icon}
+        </text>
+      </svg>
+    ) : (
+      <i className={`${icon}`} />
+    );
+  }, [icon, isSvg, viewBox]);
 
   return (
     <dfn
-      {...rest}
+      data-ref="icon"
       ref={ref}
+      {...rest}
       role="presentation"
       className={classNames(
         classes.icon,
@@ -181,6 +170,7 @@ export const Icon = ({
       data-flip={rtlFlip}
       style={styles}
       data-clickable={!!onClick}
+      data-inner-clickable={!!onClick}
     >
       {iconEl}
     </dfn>

package/src/components/media/Media.tsx

@@ -24,12 +24,12 @@
 import { getImageColorset } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { useMemo, useRef, useState } from "react";
-import { type AriaProps, type CssProp } from "../../types";
+import { type AriaProps, type CssProp, type TestProps } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { Button } from "../button/Button";
 import classes from "./Media.module.css";
 
-export interface BaseProps extends CssProp, AriaProps {
+export interface BaseProps extends CssProp, TestProps, AriaProps {
   /**
    * media source
    */

package/src/components/menu/ContextMenu.tsx

@@ -29,30 +29,41 @@ import {
   useClick,
   useDismiss,
   useFloating,
+  useFloatingNodeId,
   useInteractions,
 } from "@floating-ui/react";
-import { cloneElement, useRef, useState } from "react";
+import { cloneElement, useEffect, useRef, useState } from "react";
 import { type ChildrenProp } from "../../types";
 import { type Menu } from "./Menu";
 
 export interface ContextMenuProps extends ChildrenProp {
   menu: React.ReactElement<typeof Menu>;
+
+  disabled?: boolean;
 }
 
-export const ContextMenu = ({ children, menu }: ContextMenuProps) => {
+export const ContextMenu = ({ children, menu, disabled }: ContextMenuProps) => {
   const [isOpen, setIsOpen] = useState(false);
+  const nodeId = useFloatingNodeId();
 
   const { refs, floatingStyles, context } = useFloating({
     open: isOpen,
-    onOpenChange: setIsOpen,
+    nodeId,
+    onOpenChange: (open, evt, reason) => {
+      const target = evt?.target as HTMLElement;
+      if (!target?.closest(".menu-list")) setIsOpen(open);
+    },
     strategy: "fixed",
     placement: "bottom-start",
     whileElementsMounted: autoUpdate,
     middleware: [offset(8), flip()],
   });
 
-  const click = useClick(context, {});
-  const dismiss = useDismiss(context, {});
+  const click = useClick(context, {
+    toggle: true,
+    ignoreMouse: true,
+  });
+  const dismiss = useDismiss(context, { bubbles: true });
 
   const { getFloatingProps } = useInteractions([dismiss, click]);
 
@@ -78,10 +89,19 @@ export const ContextMenu = ({ children, menu }: ContextMenuProps) => {
     return false;
   });
 
-  const wrapperRef = useRef((el: HTMLElement) => {
-    el?.parentElement?.removeEventListener("contextmenu", handleClick.current);
-    el?.parentElement?.addEventListener("contextmenu", handleClick.current);
-  });
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const el = wrapperRef.current;
+    if (el && !disabled) {
+      el?.parentElement?.addEventListener("contextmenu", handleClick.current);
+      return () => {
+        el?.parentElement?.removeEventListener(
+          "contextmenu",
+          handleClick.current,
+        );
+      };
+    }
+  }, [disabled]);
 
   const tryClosing = useRef((e: React.MouseEvent) => {
     if ((e.target as HTMLElement)?.closest("[data-dropdown-dismiss='true']"))
@@ -91,12 +111,17 @@ export const ContextMenu = ({ children, menu }: ContextMenuProps) => {
   return (
     <div
       className="contents"
-      ref={wrapperRef.current as AnyObject}
+      ref={wrapperRef}
       onMouseUpCapture={tryClosing.current}
     >
       {children}
       {isOpen && (
-        <FloatingPortal>
+        <FloatingPortal
+          root={
+            refs.domReference.current?.closest<HTMLElement>(".theme-base") ??
+            undefined
+          }
+        >
           {cloneElement(menu as AnyObject, {
             ...getFloatingProps(),
             style: {

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";
 
@@ -104,8 +104,9 @@ const MenuComponent = ({
     handleClose: safePolygon({ blockPointerEvents: true }),
   });
   const click = useClick(context, {
-    toggle: true,
-    ignoreMouse: true,
+    event: "mousedown",
+    toggle: !isNested,
+    ignoreMouse: isNested,
   });
   const role = useRole(context, { role: "menu" });
   const dismiss = useDismiss(context, { bubbles: true });
@@ -187,6 +188,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 +221,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(refs.setFloating, isNested ? undefined : 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-[var(--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 +260,10 @@ const MenuComponent = ({
                           }
                         : {},
                     );
-                  }
-                })}
-              </div>
-            </FloatingFocusManager>
+                  })}
+                </div>
+              </FloatingFocusManager>
+            </HotKeyWrapper>
           </Wrapper>
         )}
       </FloatingList>
@@ -262,6 +273,7 @@ const MenuComponent = ({
 
 export const Menu = (props: MenuProps) => {
   const parentId = useFloatingParentNodeId();
+  const tree = useFloatingTree();
 
   if (parentId === null) {
     return (
@@ -274,5 +286,14 @@ export const Menu = (props: MenuProps) => {
     );
   }
 
+  if (tree) {
+    return (
+      <MenuComponent
+        {...(props as AnyObject)}
+        menuClassName={props.className}
+      />
+    );
+  }
+
   return <MenuComponent {...props} />;
 };

package/src/components/menu/MenuItem.tsx

@@ -22,9 +22,10 @@
  */
 
 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";
@@ -50,6 +51,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 +60,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) {
@@ -135,7 +142,7 @@ 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(
@@ -150,11 +157,15 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
         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/navigator/Navigator.tsx

@@ -24,6 +24,7 @@
 import classNames from "classnames";
 import { HotKey } from "../../hotkeys/HotKey";
 import {
+  type ChildProp,
   type AriaProps,
   type ColorType,
   type CssProp,
@@ -31,8 +32,13 @@ import {
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { Icon } from "../icon/Icon";
+import { useCallback } from "react";
 
-export interface NavigatorProps extends CssProp, AriaProps, TestProps {
+export interface NavigatorProps
+  extends CssProp,
+    AriaProps,
+    TestProps,
+    Partial<ChildProp> {
   /**
    * navigator button color
    */
@@ -47,28 +53,35 @@ export const Navigator = ({
   className,
   onNavigate,
   color,
+  children,
   ...aria
 }: NavigatorProps) => {
+  const navPrev = useCallback(() => onNavigate(-1), [onNavigate]);
+  const navNext = useCallback(() => onNavigate(+1), [onNavigate]);
   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)} />
+      <HotKey keyCombo="left" handler={navPrev} />
+      <HotKey keyCombo="right" handler={navNext} />
       <Icon
         rtlFlip
         color={color}
         className="text-[1em] p-1"
         aria-label="previous"
+        data-ref="previous"
         icon={CoreIcons.chevronLeft}
         onClick={(e) => [e.stopPropagation(), onNavigate(-1)]}
       />
+      {children}
       <Icon
         rtlFlip
         className="text-[1em] p-1"
         color={color}
         aria-label="next"
+        data-ref="next"
         icon={CoreIcons.chevronRight}
         onClick={(e) => [e.stopPropagation(), onNavigate(1)]}
       />

package/src/components/panel/Panel.tsx

@@ -176,6 +176,7 @@ export const Panel = ({
           headerClassName,
           "flex flex-nowrap items-center area-head",
         )}
+        data-ref="panelHeader"
         onClick={collapsable ? toggleCollapse : undefined}
       >
         {onBack && (
@@ -204,7 +205,7 @@ export const Panel = ({
         >
           {title}
         </div>
-        <div className="px-1">{actions}</div>
+        <div className="px-1 leading-none">{actions}</div>
         {hasTools && (
           <div
             role="none"
@@ -240,6 +241,7 @@ export const Panel = ({
       </header>
       {(!collapsed || expanded) && (
         <div
+          data-ref="panelBody"
           className={classNames(
             classes.panelBody,
             "area-content grid overflow-hidden",