@react-fabric/core 1.0.0-beta.5 → 1.0.0-beta.52

package/src/components/media/Media.tsx

@@ -23,13 +23,13 @@
 
 import { getImageColorset } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { useMemo, useRef, useState } from "react";
-import { type AriaProps, type CssProp } from "../../types";
+import { Fragment, useEffect, useRef, useState } from "react";
+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";
+import { Icon } from "../icon/Icon";
 
-export interface BaseProps extends CssProp, AriaProps {
+export interface BaseProps extends CssProp, TestProps, AriaProps {
   /**
    * media source
    */
@@ -44,6 +44,12 @@ export interface BaseProps extends CssProp, AriaProps {
   fit?: "cover" | "contain" | "fill";
 }
 
+const cover = {
+  fill: "object-fill",
+  cover: "object-cover",
+  contain: "object-contain",
+};
+
 export interface ImageProps extends BaseProps {
   /**
    * image alt text
@@ -65,6 +71,41 @@ export interface VideoProps extends BaseProps {
   playOnHover?: boolean;
 }
 
+const loadIndicator = (
+  <div
+    className={classNames(
+      "fabric-mediaPlaceholder",
+      "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-gray animate-pulse",
+    )}
+  >
+    ●●●
+  </div>
+);
+
+/**
+ * Component for displaying images with optional reel decoration.
+ * A versatile media component that supports images and videos with various display options.
+ * It can display images with a reel decoration, handle loading states, and show error icons if the media fails to load.
+ * This component is useful for displaying images in a visually appealing way, with support for lazy loading and error handling.
+ * 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.
+ *
+ * @example
+ * ```jsx
+ * <Image
+ *   src="image.jpg"
+ *   alt="Example Image"
+ *   reel={true}
+ *   fit="cover"
+ *   className="custom-class"
+ * />
+ * // Renders an image with reel decoration, cover fit, and a custom class name.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-media--docs} for more details.
+ */
 export const Image = ({
   src,
   alt,
@@ -74,51 +115,84 @@ export const Image = ({
   ...aria
 }: ImageProps) => {
   const [colorSet, setColorSet] = useState("light");
-  const loadIndicator = useMemo(
-    () => (
-      <div
-        className={classNames(
-          classes.mediaPlaceholder,
-          "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-gray animate-pulse",
-        )}
-      >
-        ●●●
-      </div>
-    ),
-    [src],
-  );
+  const [loaded, setLoaded] = useState(false);
+  const [errored, setErrored] = useState(false);
+  useEffect(() => {
+    setLoaded(false);
+    setErrored(false);
+  }, [src]);
   return (
     <div
       data-ref="image"
       className={classNames(
-        classes.mediaContainer,
-        "relative overflow-hidden bg-gray inline-block",
-        reel && classes.mediaReel,
+        "fabric-mediaContainer",
+        "relative overflow-hidden inline-block",
+        reel && "fabric-mediaReel",
         className,
       )}
       data-colorset={colorSet}
       {...aria}
     >
-      {loadIndicator}
-      <img
-        alt={alt ?? src}
-        src={src}
-        loading="lazy"
-        crossOrigin="anonymous"
-        className={classNames(
-          classes.media,
-          "pointer-events-none w-full h-full",
-          fit && `object-${fit}`,
-        )}
-        onLoad={(e) => {
-          e.currentTarget.previousElementSibling?.remove();
-          setColorSet(getImageColorset(e.currentTarget));
-        }}
-      />
+      {!loaded && !errored && loadIndicator}
+      {!errored && (
+        <img
+          alt={alt ?? src}
+          src={src}
+          loading="lazy"
+          crossOrigin="anonymous"
+          className={classNames(
+            "fabric-media",
+            "pointer-events-none w-full h-full",
+            cover[fit],
+          )}
+          onLoad={(e) => {
+            setLoaded(true);
+            setColorSet(getImageColorset(e.currentTarget));
+          }}
+          onError={() => setErrored(true)}
+        />
+      )}
+      {errored && (
+        <Icon
+          size="2rem"
+          className="absolute text-tint-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+          icon={CoreIcons.mediaImageBroken}
+        />
+      )}
     </div>
   );
 };
 
+/**
+ * Component for displaying videos with optional controls and reel decoration.
+ * A versatile video component that supports autoplay, hover play, and various display options.
+ * It can display videos with a reel decoration, handle loading states, and show error icons if the video fails to load.
+ * This component is useful for displaying videos in a visually appealing way, with support for controls, autoplay, and error handling.
+ * It automatically adjusts the display based on the provided fit property, allowing for different styles such as cover, contain, or fill.
+ * It also includes controls for play/pause and volume, enhancing user interaction with the video content.
+ * This component is ideal for media-rich applications where video content needs to be displayed with user-friendly controls and visual effects.
+ * It supports features like autoplay, play on hover, and custom fit options for the video display.
+ * 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.
+ *
+ * @example
+ * ```jsx
+ * <Video
+ *   src="video.mp4"
+ *   poster="poster.jpg"
+ *   reel={true}
+ *   autoPlay={true}
+ *   playOnHover={true}
+ *   fit="cover"
+ *   className="custom-class"
+ * />
+ * // Renders a video with reel decoration, autoplay, play on hover, cover fit, and a custom class name.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-video--docs} for more details.
+ */
 export const Video = ({
   src,
   poster,
@@ -130,17 +204,27 @@ export const Video = ({
   ...aria
 }: VideoProps) => {
   const videoRef = useRef<HTMLVideoElement>(null);
+  const [loaded, setLoaded] = useState(false);
+  const [errored, setErrored] = useState(false);
+  useEffect(() => {
+    setLoaded(false);
+    setErrored(false);
+  }, [src]);
 
   const [state, setState] = useState(true);
   const [volume, setVolume] = useState(false);
 
+  useEffect(() => {
+    setErrored(false);
+  }, [src]);
+
   return (
     <div
       data-ref="video"
       className={classNames(
-        classes.mediaContainer,
-        "relative overflow-hidden bg-gray inline-block",
-        reel && classes.mediaReel,
+        "fabric-mediaContainer",
+        "relative overflow-hidden inline-block",
+        reel && "fabric-mediaReel",
         className,
       )}
       onMouseEnter={() => {
@@ -151,74 +235,79 @@ export const Video = ({
       }}
       {...aria}
     >
-      <div
-        className={classNames(
-          classes.mediaPlaceholder,
-          "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-5xl animate-pulse",
-        )}
-      >
-        ●●●
-      </div>
-      <video
-        loop
-        ref={videoRef}
-        controls={false}
-        poster={poster}
-        autoPlay={autoPlay}
-        className={classNames(
-          classes.media,
-          "pointer-events-none w-full h-full",
-          fit && `object-${fit}`,
-        )}
-        onPlay={() => setState(true)}
-        onPause={() => setState(false)}
-        onVolumeChange={(e) => setVolume(!!e.currentTarget.volume)}
-        onLoadedData={(e) => {
-          e.currentTarget.volume = 0;
-          e.currentTarget.previousElementSibling?.remove();
-        }}
-      >
-        <source src={src} />
-        <track kind="captions" />
-      </video>
-      <div
-        data-inner-clickable
-        className={classNames(
-          classes.mediaControls,
-          "absolute bottom-6 end-6 rounded-full flex flex-col",
-        )}
-      >
-        <Button
-          rounded
-          variant="link"
-          className={classes.mediaControlPlaceholder}
-          icon={CoreIcons.ellipsis}
-          aria-label="controls"
-        />
-        <Button
-          rounded
-          variant="link"
-          aria-label="controls"
-          className={classes.mediaControlAction}
-          onClick={() => {
-            videoRef.current &&
-              (videoRef.current.volume = videoRef.current.volume ? 0 : 1);
-          }}
-          icon={volume ? CoreIcons.volumeOn : CoreIcons.volumeOff}
-        />
-        <Button
-          rounded
-          variant="link"
-          aria-label="controls"
-          className={classes.mediaControlAction}
-          onClick={() => {
-            videoRef.current?.paused
-              ? videoRef.current?.play()
-              : videoRef.current?.pause();
-          }}
-          icon={state ? CoreIcons.pause : CoreIcons.play}
+      {!loaded && !errored && loadIndicator}
+      {!errored && (
+        <Fragment>
+          <video
+            loop
+            ref={videoRef}
+            controls={false}
+            poster={poster}
+            autoPlay={autoPlay}
+            className={classNames(
+              "fabric-media",
+              "pointer-events-none w-full h-full",
+              fit && `object-${fit}`,
+            )}
+            onPlay={() => setState(true)}
+            onPause={() => setState(false)}
+            onVolumeChange={(e) => setVolume(!!e.currentTarget.volume)}
+            onLoadedData={(e) => {
+              e.currentTarget.volume = 0;
+              setLoaded(true);
+            }}
+            onError={() => setErrored(true)}
+          >
+            <source src={src} />
+            <track kind="captions" />
+          </video>
+          <div
+            data-inner-clickable
+            className={classNames(
+              "fabric-mediaControls",
+              "absolute bottom-6 end-6 rounded-full flex flex-col",
+            )}
+          >
+            <Button
+              rounded
+              variant="link"
+              className={"fabric-mediaControlPlaceholder"}
+              icon={CoreIcons.ellipsis}
+              aria-label="controls"
+            />
+            <Button
+              rounded
+              variant="link"
+              aria-label="controls"
+              className={"fabric-mediaControlAction"}
+              onClick={() => {
+                videoRef.current &&
+                  (videoRef.current.volume = videoRef.current.volume ? 0 : 1);
+              }}
+              icon={volume ? CoreIcons.volumeOn : CoreIcons.volumeOff}
+            />
+            <Button
+              rounded
+              variant="link"
+              aria-label="controls"
+              className={"fabric-mediaControlAction"}
+              onClick={() => {
+                videoRef.current?.paused
+                  ? videoRef.current?.play()
+                  : videoRef.current?.pause();
+              }}
+              icon={state ? CoreIcons.pause : CoreIcons.play}
+            />
+          </div>
+        </Fragment>
+      )}
+      {errored && (
+        <Icon
+          size="2rem"
+          className="absolute text-tint-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+          icon={CoreIcons.mediaVideoBroken}
         />
-      </div>
+      )}
     </div>
   );
 };

package/src/components/menu/ContextMenu.tsx

@@ -29,30 +29,60 @@ 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) => {
+/**
+ * A component that provides a context menu that appears on right-click.
+ * It uses the Floating UI library to manage the positioning and interactions of the menu.
+ * 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.
+ *
+ * @example
+ * ```jsx
+ * <ContextMenu
+ *   menu={<Menu items={[{ label: "Option 1" }, { label: "Option 2" }]} />}
+ * >
+ *   <div className="context-menu-target">Right-click me!</div>
+ * </ContextMenu>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-menu--docs}
+ */
+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 +108,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 +130,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";
 
@@ -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(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-(--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,8 +276,47 @@ 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)}
+        menuClassName={props.className}
+      />
+    );
+  }
 
   if (parentId === null) {
     return (