@react-fabric/core 1.0.0-beta.61 → 1.0.0-beta.63

package/src/components/icon/Icon.tsx

@@ -39,7 +39,7 @@ export interface Props extends CssProp, AriaProps, RefProp, TestProps {
   /**
    * svg path / webfont className / 1-4 letter text
    */
-  icon: string | JSX.Element;
+  icon: string | React.ReactElement;
   /**
    * icon image source URL, if failed to load then shows icon
    */
@@ -81,29 +81,8 @@ export interface Props extends CssProp, AriaProps, RefProp, TestProps {
 
 export type IconProps =
   | string
-  | JSX.Element
-  | Pick<
-      Props,
-      | "icon"
-      | "iconSrc"
-      | "bg"
-      | "color"
-      | "size"
-      | "rtlFlip"
-      | "viewBox"
-      | "rounded"
-      | "animate"
-    >;
-
-export const getIconProps = (props: IconProps): Props => {
-  if (typeof props === "string") {
-    return { icon: props };
-  }
-  if (isValidElement(props)) {
-    return { icon: props };
-  }
-  return props as unknown as Props;
-};
+  | React.ReactElement
+  | Pick<Props, "icon" | "iconSrc" | "bg" | "color" | "size" | "rtlFlip" | "viewBox" | "rounded" | "animate">;
 
 const SvgTextSize = ["", ".875em", ".525em", ".35em", ".25em"];
 const SizeMap: KeyValue<string> = {
@@ -123,7 +102,7 @@ const SizeMap: KeyValue<string> = {
  * These include `bg`, `color`, `size`, `rtlFlip`, `animate`, and `rounded`.
  *
  * @param {IconProps} props - The properties for the Icon component.
- * @returns {JSX.Element} The rendered Icon component.
+ * @returns {React.ReactElement} The rendered Icon component.
  *
  * @example
  * ```jsx
@@ -191,29 +170,29 @@ export const Icon = ({
   /** ***************** render icon *******************/
   const iconEl = useMemo(() => {
     if (isValidElement(icon)) return icon;
-    if (!isString(icon)) {
-      throw Error("Invalid icon expected string");
+    if (isString(icon)) {
+      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}`} />
+      );
     }
-    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}`} />
-    );
+    throw Error("Invalid icon expected string");
   }, [icon, isSvg, viewBox]);
 
   return (
@@ -241,13 +220,7 @@ export const Icon = ({
       data-clickable={!!onClick}
       data-inner-clickable={!!onClick}
     >
-      {iconSrc && !imageFailed && (
-        <img
-          src={iconSrc}
-          alt="fallback icon"
-          onError={() => setImageFailed(true)}
-        />
-      )}
+      {iconSrc && !imageFailed && <img src={iconSrc} alt="fallback icon" onError={() => setImageFailed(true)} />}
       {(!iconSrc || imageFailed) && iconEl}
     </dfn>
   );

package/src/components/index.ts

@@ -23,15 +23,16 @@
 
 export { ActionLabel } from "./actionLabel/ActionLabel";
 export {
-  LoadingBars,
   AnimationIndicator,
-  LoadingSpinner,
+  AnimationLoader,
+  LoadingBars,
   LoadingLine,
+  LoadingSpinner,
   Skeleton,
 } from "./animations/Animations";
 export { Avatar } from "./avatar/Avatar";
 export { AvatarGroup } from "./avatar/AvatarGroup";
-export { Badge, getBadgeProps } from "./badge/Badge";
+export { Badge } from "./badge/Badge";
 export { Breadcrumbs } from "./breadcrumbs/Breadcrumbs";
 export { Button } from "./button/Button";
 export { ButtonGroup } from "./button/ButtonGroup";
@@ -47,7 +48,7 @@ export { Divider } from "./divider/Divider";
 export { Dropdown, DropdownDismiss } from "./dropdown/Dropdown";
 export { DropdownTool } from "./dropdown/DropdownTool";
 export { EmptyContent } from "./empty/EmptyContent";
-export { Icon, getIconProps } from "./icon/Icon";
+export { Icon } from "./icon/Icon";
 export { Image, Video } from "./media/Media";
 export { ContextMenu } from "./menu/ContextMenu";
 export { Menu } from "./menu/Menu";

package/src/components/media/Media.tsx

@@ -89,7 +89,7 @@ const loadIndicator = (
  * It automatically adjusts the display based on the provided fit property, allowing for different styles such as cover, contain, or fill.
  *
  * @param {ImageProps | VideoProps} props - The properties for the Media component.
- * @returns {JSX.Element} The rendered Media component.
+ * @returns {React.ReactElement} The rendered Media component.
  *
  * @example
  * ```jsx
@@ -174,7 +174,7 @@ export const Image = ({
  * It also includes a reel decoration for a more engaging visual presentation.
  *
  * @param {VideoProps} props - The properties for the Video component.
- * @returns {JSX.Element} The rendered Video component.
+ * @returns {React.ReactElement} The rendered Video component.
  *
  * @example
  * ```jsx
@@ -264,7 +264,7 @@ export const Video = ({
             data-inner-clickable
             className={classNames(
               "fabric-mediaControls",
-              "absolute bottom-6 end-6 rounded-full flex flex-col",
+              "absolute bottom-6 inset-e-6 rounded-full flex flex-col",
             )}
           >
             <Button

package/src/components/menu/ContextMenu.tsx

@@ -22,6 +22,8 @@
  */
 
 import {
+  FloatingFocusManager,
+  FloatingOverlay,
   FloatingPortal,
   autoUpdate,
   flip,
@@ -48,7 +50,7 @@ export interface ContextMenuProps extends ChildrenProp {
  * This component is useful for creating custom context menus that can be triggered by right-clicking on elements.
  *
  * @param {ContextMenuProps} props - The properties for the ContextMenu component.
- * @returns {JSX.Element} The rendered ContextMenu component.
+ * @returns {React.ReactElement} The rendered ContextMenu component.
  *
  * @example
  * ```jsx
@@ -114,45 +116,43 @@ export const ContextMenu = ({ children, menu, disabled }: ContextMenuProps) => {
     if (el && !disabled) {
       el?.parentElement?.addEventListener("contextmenu", handleClick.current);
       return () => {
-        el?.parentElement?.removeEventListener(
-          "contextmenu",
-          handleClick.current,
-        );
+        el?.parentElement?.removeEventListener("contextmenu", handleClick.current);
       };
     }
   }, [disabled]);
 
   const tryClosing = useRef((e: React.MouseEvent) => {
-    if ((e.target as HTMLElement)?.closest("[data-dropdown-dismiss='true']"))
-      setTimeout(() => setIsOpen(false), 50);
+    if (!(e.target as HTMLElement)?.closest("[data-dropdown-dismiss='false']")) setTimeout(() => setIsOpen(false), 50);
   });
 
   return (
-    <div
-      className="contents"
-      ref={wrapperRef}
-      onMouseUpCapture={tryClosing.current}
-    >
+    <div className="contents" ref={wrapperRef}>
       {children}
       {isOpen && (
-        <FloatingPortal
-          root={
-            refs.domReference.current?.closest<HTMLElement>(".theme-base") ??
-            undefined
-          }
-        >
-          {cloneElement(menu as AnyObject, {
-            ...getFloatingProps(),
-            style: {
-              ...floatingStyles,
-              borderRadius: "var(--rounding)",
-              zIndex: "var(--z-popover)",
-              fontSize: "0.875rem",
-            },
-            className: "bg-base outline rounded-capped shadow-lg",
-            ref: refs.setFloating,
-            onMouseUp: tryClosing.current,
-          })}
+        <FloatingPortal root={refs.domReference.current?.closest<HTMLElement>(".theme-base") ?? undefined}>
+          <FloatingOverlay
+            lockScroll
+            style={{
+              zIndex: "var(--z-overlay-mask)",
+              position: "absolute",
+              overflow: "hidden",
+            }}
+          >
+            <FloatingFocusManager context={context}>
+              {cloneElement(menu as AnyObject, {
+                ...getFloatingProps(),
+                style: {
+                  ...floatingStyles,
+                  borderRadius: "var(--rounding)",
+                  zIndex: "var(--z-popover)",
+                  fontSize: "0.875rem",
+                },
+                className: "bg-default outline rounded-capped shadow-lg",
+                ref: refs.setFloating,
+                onMouseUp: tryClosing.current,
+              })}
+            </FloatingFocusManager>
+          </FloatingOverlay>
         </FloatingPortal>
       )}
     </div>

package/src/components/menu/Menu.tsx

@@ -47,14 +47,7 @@ import {
 } from "@floating-ui/react";
 import { mergeRefs } from "@react-fabric/utilities";
 import classNames from "classnames";
-import {
-  cloneElement,
-  Fragment,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { cloneElement, Fragment, useEffect, useEffectEvent, useRef, useState } from "react";
 import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
 import { cloneChildren, nodeCheck } from "../../utils";
 import { MenuItem } from "./MenuItem";
@@ -71,6 +64,11 @@ const MenuComponent = ({
   trigger = "hover",
   // @ts-expect-error ignore
   ref,
+  // @ts-expect-error ignore
+  onMouseUp,
+  // @ts-expect-error ignore
+  onMouseDown,
+  forDropdown,
   ...rest
 }: Partial<MenuProps>) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -83,22 +81,17 @@ 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 (reason === "outside-press" && trigger === "click")
-        tree?.events.emit("close");
+      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,
   });
 
@@ -126,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
@@ -163,33 +161,22 @@ 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 = useEffectEvent((e: React.MouseEvent) => {
+    const el = e.target as HTMLElement;
+    if (el.dataset.id) {
+      onClick?.(el.dataset.id as AnyObject);
+    }
+  });
 
   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,
-    );
+    setTimeout(() => refs.floating.current?.querySelector(`[data-active="true"]`)?.scrollIntoView({ block: "nearest" }), 100);
   }, [isOpen]);
 
   useEffect(() => {
@@ -226,23 +213,19 @@ const MenuComponent = ({
           <Wrapper {...wrapperProps}>
             {isNested && <FloatingOverlay />}
             <HotKeyWrapper>
-              <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-(--z-popover)",
+                    "flex flex-col 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,
+                    onMouseDown,
+                    onMouseUp,
                   })}
                   // @ts-expect-error ignore
                   {...{ style: !isNested ? rest.style : floatingStyles }}
@@ -255,8 +238,7 @@ const MenuComponent = ({
                         ? {
                             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,
                               tabIndex: activeIndex === index ? 0 : -1,
@@ -282,7 +264,7 @@ const MenuComponent = ({
  * 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.
+ * @returns {React.ReactElement} The rendered Menu component.
  *
  * @example
  * ```jsx
@@ -309,23 +291,13 @@ export const Menu = (props: MenuProps) => {
   const tree = useFloatingTree();
 
   if (tree) {
-    return (
-      <MenuComponent
-        {...(props as AnyObject)}
-        className=""
-        menuClassName={props.className}
-      />
-    );
+    return <MenuComponent {...(props as AnyObject)} className="" menuClassName={props.className} />;
   }
 
   if (parentId === null) {
     return (
       <FloatingTree>
-        <MenuComponent
-          {...(props as AnyObject)}
-          className=""
-          menuClassName={props.className}
-        />
+        <MenuComponent {...(props as AnyObject)} className="" menuClassName={props.className} />
       </FloatingTree>
     );
   }

package/src/components/menu/MenuItem.tsx

@@ -29,8 +29,9 @@ 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 { getIconProps, Icon } from "../icon/Icon";
+import { getBadgeProps, getIconProps } from "../../utils";
+import { Badge } from "../badge/Badge";
+import { Icon } from "../icon/Icon";
 import { type MenuItemProps } from "./types";
 
 /**
@@ -92,23 +93,13 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
     if (minimal && !path) {
       path = iconToken(label);
     }
-    return (
-      <Icon
-        className={classNames("fabric-menuIcon", minimal && "minimal")}
-        {...getIconProps(path ?? "")}
-      />
-    );
+    return <Icon className={classNames("fabric-menuIcon", minimal && "minimal")} {...getIconProps(path ?? "")} />;
   }, [icon, minimal, label]);
 
   const Wrapper = useCallback(
     ({ children, ...rest }: AnyObject) => {
       return minimal ? (
-        <Tooltip
-          content={label}
-          placement="right"
-          disabled={childOpen}
-          {...rest}
-        >
+        <Tooltip content={label} placement="right" disabled={childOpen} {...rest}>
           {children}
         </Tooltip>
       ) : (
@@ -122,9 +113,7 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
     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">{label}</label>}
         {appendLabel && (
           <span
             className={classNames(
@@ -138,16 +127,10 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
           </span>
         )}
         {badge && (
-          <Badge
-            {...badgeProps}
-            placement={minimal ? "end" : ""}
-            className={classNames("me-1", badgeProps.className)}
-          />
+          <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 />
-        )}
+        {!minimal && altIcon && <Icon className="text-muted px-1" icon={altIcon} rtlFlip />}
       </div>
     );
   }, [iconEl, minimal, appendLabel, label, badge, badgeProps, hotKey, active]);
@@ -177,9 +160,7 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
         }}
         {...(minimal ? {} : aria)}
       >
-        {hotKey && (
-          <HotKey keyCombo={hotKey} handler={() => elRef.current?.click?.()} />
-        )}
+        {!disabled && hotKey && <HotKey keyCombo={hotKey} handler={() => elRef.current?.click?.()} />}
         {menuLabel}
       </E>
     </Wrapper>

package/src/components/menu/types.ts

@@ -45,7 +45,7 @@ export interface MenuItemProps extends CssProp, AriaProps, TestProps {
   /**
    * append label badge text
    */
-  appendLabel?: string | false;
+  appendLabel?: React.ReactElement | string | number | false;
   /**
    * menu color
    */
@@ -83,6 +83,10 @@ export interface MenuItemProps extends CssProp, AriaProps, TestProps {
 export interface MenuRootProps extends CssProp {
   label?: never;
   minimal?: boolean;
+  /**
+   * use this create a dropdown button within menu-item
+   */
+  forDropdown?: boolean;
   menuClassName?: never;
   onClick?: (id: string) => CallbackReturn;
 }
@@ -91,6 +95,7 @@ export interface MenuInnerProps extends MenuItemProps {
   label: string;
   minimal?: never;
   trigger?: "hover" | "click";
+  forDropdown?: boolean;
   /**
    * floating menu className
    */

package/src/components/meter/Meter.tsx

@@ -45,7 +45,7 @@ export interface MeterProps extends CssProp, AriaProps, TestProps {
  * 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.
+ * @returns {React.ReactElement} The rendered Meter component.
  *
  * @example
  * ```jsx

package/src/components/navigator/Navigator.tsx

@@ -21,8 +21,9 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { isEmpty } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { useCallback } from "react";
+import { useEffectEvent } from "react";
 import { HotKey } from "../../hotkeys/HotKey";
 import {
   type AriaProps,
@@ -33,15 +34,18 @@ import {
   type TestProps,
 } from "../../types";
 import { Icon } from "../icon/Icon";
-import { isEmpty } from "@react-fabric/utilities";
 
 export interface NavigatorProps
-  extends CssProp,
-    AriaProps,
-    TestProps,
-    Partial<ChildProp> {
+  extends CssProp, AriaProps, TestProps, Partial<ChildProp> {
+  /**
+   * item list length (ignore to enable infinite navigation)
+   */
   length?: number;
+  /**
+   * current item index (ignore to enable infinite navigation)
+   */
   current?: number;
+
   disableKeyHandlers?: boolean;
   /**
    * navigator button color
@@ -58,7 +62,7 @@ export interface NavigatorProps
  * 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.
+ * @returns {React.ReactElement} The rendered Navigator component.
  *
  * @example
  * ```jsx
@@ -85,13 +89,11 @@ export const Navigator = ({
   disableKeyHandlers,
   ...aria
 }: NavigatorProps) => {
-  const navPrev = useCallback(
+  const navPrev = useEffectEvent(
     () => (isEmpty(current) || current !== 0) && onNavigate(-1),
-    [onNavigate, current],
   );
-  const navNext = useCallback(
+  const navNext = useEffectEvent(
     () => (isEmpty(current) || current + 1 < (length ?? 0)) && onNavigate(+1),
-    [onNavigate, current, length],
   );
   return (
     <div