@react-fabric/core 1.0.0-beta.8 → 1.0.1

package/src/components/media/Media.tsx

@@ -1,35 +1,36 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
  *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
  */
 
-import { getImageColorset } from "@react-fabric/utilities";
-import classNames from "classnames";
-import { useMemo, useRef, useState } from "react";
-import { type AriaProps, type CssProp, type TestProps } from "../../types";
-import { CoreIcons } from "../../types/icons";
+import { cn, getImageColorset } from "@react-fabric/utilities";
+import { Fragment, useRef, useState } from "react";
+import { usePropWatcher } from "../../hooks/usePropState";
+import type { CssProp, TestProps } from "../../types";
 import { Button } from "../button/Button";
-import classes from "./Media.module.css";
+import { Icon } from "../icon/Icon";
 
-export interface BaseProps extends CssProp, TestProps, AriaProps {
+export interface BaseProps extends CssProp, TestProps {
   /**
    * media source
    */
@@ -44,12 +45,19 @@ export interface BaseProps extends CssProp, TestProps, AriaProps {
   fit?: "cover" | "contain" | "fill";
 }
 
+const cover = {
+  fill: "object-fill",
+  cover: "object-cover",
+  contain: "object-contain",
+};
+
 export interface ImageProps extends BaseProps {
   /**
    * image alt text
    */
   alt?: string;
 }
+
 export interface VideoProps extends BaseProps {
   /**
    * video poster
@@ -65,71 +73,103 @@ export interface VideoProps extends BaseProps {
   playOnHover?: boolean;
 }
 
-export const Image = ({
-  src,
-  alt,
-  reel,
-  fit = "cover",
-  className,
-  ...aria
-}: ImageProps) => {
+const loadIndicator = (
+  <div
+    className={cn(
+      "fabric-mediaPlaceholder",
+      "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-sm text-gray",
+    )}
+  >
+    <i className="icon-[svg-spinners--pulse-rings-2]" />
+  </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.
+ *
+ * @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.
+ * ```
+ */
+export function Image({ src, alt, reel, fit = "cover", className, ...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] = usePropWatcher(false, src);
+  const [errored, setErrored] = usePropWatcher(false, src);
+
   return (
     <div
       data-ref="image"
-      className={classNames(
-        classes.mediaContainer,
-        "relative overflow-hidden bg-gray inline-block",
-        reel && classes.mediaReel,
-        className,
-      )}
+      className={cn("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={cn("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="icon-[mdi--image-off-outline]"
+        />
+      )}
     </div>
   );
-};
+}
 
-export const Video = ({
-  src,
-  poster,
-  reel,
-  autoPlay,
-  playOnHover,
-  fit = "cover",
-  className,
-  ...aria
-}: VideoProps) => {
+/**
+ * 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.
+ *
+ * @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.
+ * ```
+ */
+export function Video({ src, poster, reel, autoPlay, playOnHover, fit = "cover", className, ...aria }: VideoProps) {
   const videoRef = useRef<HTMLVideoElement>(null);
+  const [loaded, setLoaded] = usePropWatcher(false, src);
+  const [errored, setErrored] = usePropWatcher(false, src);
 
   const [state, setState] = useState(true);
   const [volume, setVolume] = useState(false);
@@ -137,88 +177,78 @@ export const Video = ({
   return (
     <div
       data-ref="video"
-      className={classNames(
-        classes.mediaContainer,
-        "relative overflow-hidden bg-gray inline-block",
-        reel && classes.mediaReel,
-        className,
-      )}
+      className={cn("fabric-mediaContainer", "relative overflow-hidden inline-block", reel && "fabric-mediaReel", className)}
       onMouseEnter={() => {
-        playOnHover && videoRef.current?.play();
+        if (playOnHover) void videoRef.current?.play();
       }}
       onMouseLeave={() => {
-        playOnHover && videoRef.current?.pause();
+        if (playOnHover) videoRef.current?.pause();
       }}
       {...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={cn("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={cn("fabric-mediaControls", "absolute bottom-6 inset-e-6 rounded-full flex flex-col")}
+          >
+            <Button
+              rounded
+              variant="link"
+              className={"fabric-mediaControlPlaceholder"}
+              icon="icon-[mdi--dots-vertical]"
+              aria-label="controls"
+            />
+            <Button
+              rounded
+              variant="link"
+              aria-label="controls"
+              className={"fabric-mediaControlAction"}
+              onClick={() => {
+                if (videoRef.current) videoRef.current.volume = videoRef.current.volume ? 0 : 1;
+              }}
+              icon={volume ? "icon-[mdi--volume]" : "icon-[mdi--volume-mute]"}
+            />
+            <Button
+              rounded
+              variant="link"
+              aria-label="controls"
+              className={"fabric-mediaControlAction"}
+              onClick={() => {
+                void (videoRef.current?.paused ? videoRef.current?.play() : videoRef.current?.pause());
+              }}
+              icon={state ? "icon-[mdi--pause]" : "icon-[mdi--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="icon-[mdi--video-off-outline]"
         />
-      </div>
+      )}
     </div>
   );
-};
+}

package/src/components/menu/ContextMenu.tsx

@@ -22,9 +22,11 @@
  */
 
 import {
-  FloatingPortal,
   autoUpdate,
   flip,
+  FloatingFocusManager,
+  FloatingOverlay,
+  FloatingPortal,
   offset,
   useClick,
   useDismiss,
@@ -33,23 +35,39 @@ import {
   useInteractions,
 } from "@floating-ui/react";
 import { cloneElement, useEffect, useRef, useState } from "react";
-import { type ChildrenProp } from "../../types";
-import { type Menu } from "./Menu";
+import type { ChildrenProp } from "../../types";
+import type { MenuProps } from "./types";
 
 export interface ContextMenuProps extends ChildrenProp {
-  menu: React.ReactElement<typeof Menu>;
+  menu: React.ReactElement<
+    MenuProps & { style: React.CSSProperties; onMouseUp: (e: React.MouseEvent) => void; ref: React.RefObject<HTMLElement> }
+  >;
 
   disabled?: boolean;
 }
 
-export const ContextMenu = ({ children, menu, disabled }: 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.
+ *
+ * @example
+ * ```jsx
+ * <ContextMenu
+ *   menu={<Menu items={[{ label: "Option 1" }, { label: "Option 2" }]} />}
+ * >
+ *   <div className="context-menu-target">Right-click me!</div>
+ * </ContextMenu>
+ * ```
+ */
+export function ContextMenu({ children, menu, disabled }: ContextMenuProps) {
   const [isOpen, setIsOpen] = useState(false);
   const nodeId = useFloatingNodeId();
 
   const { refs, floatingStyles, context } = useFloating({
     open: isOpen,
     nodeId,
-    onOpenChange: (open, evt, reason) => {
+    onOpenChange: (open, evt) => {
       const target = evt?.target as HTMLElement;
       if (!target?.closest(".menu-list")) setIsOpen(open);
     },
@@ -67,7 +85,7 @@ export const ContextMenu = ({ children, menu, disabled }: ContextMenuProps) => {
 
   const { getFloatingProps } = useInteractions([dismiss, click]);
 
-  const handleClick = useRef((e: MouseEvent) => {
+  const handleClickRef = useRef((e: MouseEvent) => {
     const virtual = {
       getBoundingClientRect() {
         return {
@@ -92,50 +110,49 @@ export const ContextMenu = ({ children, menu, disabled }: ContextMenuProps) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     const el = wrapperRef.current;
+    const handler = handleClickRef.current;
     if (el && !disabled) {
-      el?.parentElement?.addEventListener("contextmenu", handleClick.current);
+      el?.parentElement?.addEventListener("contextmenu", handler);
       return () => {
-        el?.parentElement?.removeEventListener(
-          "contextmenu",
-          handleClick.current,
-        );
+        el?.parentElement?.removeEventListener("contextmenu", handler);
       };
     }
   }, [disabled]);
 
-  const tryClosing = useRef((e: React.MouseEvent) => {
-    if ((e.target as HTMLElement)?.closest("[data-dropdown-dismiss='true']"))
-      setTimeout(() => setIsOpen(false), 50);
+  const tryClosingRef = useRef((e: React.MouseEvent) => {
+    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, {
+                ...getFloatingProps(),
+                style: {
+                  ...floatingStyles,
+                  borderRadius: "var(--rounding)",
+                  zIndex: "var(--z-popover)",
+                  fontSize: "0.875rem",
+                },
+                className: "bg-default outline rounded-capped shadow-lg",
+                ref: refs.floating as React.RefObject<HTMLElement>,
+                onMouseUp: tryClosingRef.current,
+              })}
+            </FloatingFocusManager>
+          </FloatingOverlay>
         </FloatingPortal>
       )}
     </div>
   );
-};
+}