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

package/src/components/dropdown/Dropdown.tsx

@@ -44,16 +44,7 @@ import {
 } from "@floating-ui/react";
 import { mergeRefs } from "@react-fabric/utilities";
 import classNames from "classnames";
-import {
-  Children,
-  Fragment,
-  cloneElement,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { Children, Fragment, cloneElement, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 import { type ChildProp, type RefProp } from "../../types";
 
 export interface DropdownProps extends RefProp {
@@ -87,9 +78,13 @@ export interface DropdownProps extends RefProp {
    */
   dropdownClassName?: string;
   /**
-   * dropdown event
+   * dropdown trigger event, default is click
+   */
+  trigger?: "click" | "hover";
+  /**
+   * portal root element
    */
-  dropdownEvent?: "click" | "hover";
+  root?: HTMLElement;
   /**
    * open handler
    */
@@ -109,9 +104,10 @@ const DropdownElement = ({
   placement = "bottom",
   onClose,
   onOpen,
+  root,
   disabled,
   plainDropdown,
-  dropdownEvent,
+  trigger = "click",
   dropdownClassName,
 }: DropdownProps) => {
   const arrowRef = useRef(null);
@@ -119,10 +115,7 @@ const DropdownElement = ({
   const tree = useFloatingTree();
   const nodeId = useFloatingNodeId();
 
-  const [anchor, panel] = useMemo<AnyObject[]>(
-    () => Children.toArray(children as AnyObject),
-    [children],
-  );
+  const [anchor, panel] = useMemo<AnyObject[]>(() => Children.toArray(children as AnyObject), [children]);
 
   const { refs, floatingStyles, context } = useFloating({
     nodeId: `dropdown-${nodeId}`,
@@ -146,7 +139,7 @@ const DropdownElement = ({
     ],
   });
 
-  const handler = dropdownEvent === "hover" ? useHover : useClick;
+  const handler = trigger === "hover" ? useHover : useClick;
   const click = handler(context, {
     enabled: !disabled,
     handleClose: safePolygon({ blockPointerEvents: true }),
@@ -156,46 +149,34 @@ const DropdownElement = ({
     referencePress: true,
   });
 
-  const { getReferenceProps, getFloatingProps } = useInteractions([
-    dismiss,
-    click,
-  ]);
+  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, click]);
 
   const minWidth = useMemo(() => {
     if (fitToParent) {
       const el: HTMLElement =
         // @ts-expect-error ignore
-        refs.reference.current?.closest('[data-ref="buttonGroup"]') ??
-        refs.reference.current;
+        refs.reference.current?.closest('[data-ref="buttonGroup"]') ?? refs.reference.current;
       return el?.offsetWidth;
     }
     return undefined;
   }, [refs, isOpen, fitToParent]);
 
-  const dismissDropdown = useCallback(() => {
+  const dismissDropdown = useEffectEvent(() => {
     setIsOpen(false);
     onClose?.();
-  }, []);
+  });
 
-  const tryClosing = useCallback(
-    (e: React.MouseEvent) => {
-      if (
-        !refs.floating.current?.contains(
-          (e.target as HTMLElement).closest("[data-dropdown-dismiss='false']"),
-        ) &&
-        (!!closeOnClick ||
-          refs.floating.current?.contains(
-            (e.target as HTMLElement).closest("[data-dropdown-dismiss='true']"),
-          ))
-      ) {
-        setTimeout(() => {
-          setIsOpen(false);
-          onClose?.();
-        }, 100);
-      }
-    },
-    [closeOnClick, onClose],
-  );
+  const tryClosing = useEffectEvent((e: React.MouseEvent) => {
+    if (
+      !refs.floating.current?.contains((e.target as HTMLElement).closest("[data-dropdown-dismiss='false']")) &&
+      (!!closeOnClick || refs.floating.current?.contains((e.target as HTMLElement).closest("[data-dropdown-dismiss='true']")))
+    ) {
+      setTimeout(() => {
+        setIsOpen(false);
+        onClose?.();
+      }, 100);
+    }
+  });
 
   const innerRef = useMemo(
     () => mergeRefs(ref, anchor.props.ref, refs.setReference),
@@ -220,8 +201,7 @@ const DropdownElement = ({
     };
   }, [tree]);
 
-  if (!anchor || !panel)
-    throw Error("Dropdown requires two elements [Anchor, Panel]");
+  if (!anchor || !panel) throw Error("Dropdown requires two elements [Anchor, Panel]");
 
   return (
     <Fragment>
@@ -238,14 +218,9 @@ const DropdownElement = ({
         ref: innerRef,
       })}
       {isOpen && (
-        <FloatingPortal
-          root={
-            refs.domReference.current?.closest<HTMLElement>(".theme-base") ??
-            undefined
-          }
-        >
+        <FloatingPortal root={root ?? refs.domReference.current?.closest<HTMLElement>(".theme-base") ?? undefined}>
           <FloatingOverlay />
-          <FloatingFocusManager context={context} modal>
+          <FloatingFocusManager context={context} closeOnFocusOut>
             <div
               ref={refs.setFloating}
               style={{
@@ -263,22 +238,22 @@ const DropdownElement = ({
                 className={classNames(
                   "fabric-dropdownBody",
                   dropdownClassName,
-                  !plainDropdown && "shadow-lg bg-base ring-1 ring-tint-100",
-                  "rounded-capped overflow-auto scroll-thin grid max-h-[70vh]",
+                  !plainDropdown && "shadow-lg bg-default ring-1 ring-tint-100",
+                  "rounded-capped grid max-h-[70vh]",
                 )}
                 onMouseUpCapture={tryClosing}
               >
-                {cloneElement(panel, {
-                  dismiss: dismissDropdown,
-                })}
+                {cloneElement(
+                  panel,
+                  typeof panel.type === "string"
+                    ? {}
+                    : {
+                        dismiss: dismissDropdown,
+                      },
+                )}
               </div>
               {showArrow && (
-                <FloatingArrow
-                  ref={arrowRef}
-                  context={context}
-                  strokeWidth={0.5}
-                  className="fill-base stroke-dimmed"
-                />
+                <FloatingArrow ref={arrowRef} context={context} strokeWidth={0.5} className="fill-default stroke-dimmed" />
               )}
             </div>
           </FloatingFocusManager>
@@ -340,10 +315,7 @@ export const Dropdown = (props: DropdownProps) => {
  * @param dismiss - Whether to dismiss the dropdown on click (default: true).
  * @returns JSX Element
  */
-export const DropdownDismiss = ({
-  children,
-  dismiss = true,
-}: ChildProp & { dismiss?: boolean }) => {
+export const DropdownDismiss = ({ children, dismiss = true }: ChildProp & { dismiss?: boolean }) => {
   const tree = useFloatingTree();
 
   return (
@@ -351,9 +323,7 @@ export const DropdownDismiss = ({
       role="none"
       className="contents"
       data-dropdown-dismiss={dismiss}
-      onMouseUp={() =>
-        dismiss && setTimeout(() => tree?.events.emit("close"), 50)
-      }
+      onMouseUp={() => dismiss && setTimeout(() => tree?.events.emit("close"), 50)}
     >
       {children}
     </div>

package/src/components/dropdown/DropdownTool.tsx

@@ -37,7 +37,7 @@ import { Dropdown, type DropdownProps } from "./Dropdown";
  * @param {string} icon - The icon to be displayed in the dropdown.
  * @param {boolean} groupHover - If true, the dropdown will only be visible when the parent group is hovered.
  * @param {DropdownProps} props - Additional properties for the dropdown.
- * @returns {JSX.Element} The rendered DropdownTool component.
+ * @returns {React.ReactElement} The rendered DropdownTool component.
  *
  * @example
  * ```jsx

package/src/components/empty/EmptyContent.tsx

@@ -41,11 +41,11 @@ export interface EmptyContentProps
   /**
    * empty title
    */
-  title?: string | JSX.Element;
+  title?: string | React.ReactElement;
   /**
    * empty message
    */
-  message: string | JSX.Element;
+  message: string | React.ReactElement;
   /**
    * content size
    */
@@ -113,7 +113,7 @@ const DefaultIcon = () => (
  * such as in empty states of lists, tables, or other content areas.
  *
  * @param {EmptyContentProps} props - The properties for the EmptyContent component.
- * @returns {JSX.Element} The rendered EmptyContent component.
+ * @returns {React.ReactElement} The rendered EmptyContent component.
  *
  * @example
  * ```jsx

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
@@ -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

@@ -32,7 +32,7 @@ export {
 } 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";
@@ -48,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 { getIconProps, Icon } 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,10 @@ const MenuComponent = ({
   trigger = "hover",
   // @ts-expect-error ignore
   ref,
+  // @ts-expect-error ignore
+  onMouseUp,
+  // @ts-expect-error ignore
+  onMouseDown,
   forDropdown,
   ...rest
 }: Partial<MenuProps>) => {
@@ -91,15 +88,10 @@ const MenuComponent = ({
     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,
   });
 
@@ -127,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
@@ -164,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(() => {
@@ -227,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 }}
@@ -256,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,
@@ -283,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
@@ -310,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>
     );
   }