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

package/src/components/empty/EmptyContent.tsx

@@ -24,7 +24,14 @@
 import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { isValidElement } from "react";
-import { type ChildrenProp, type CssProp, type TestProps } from "../../types";
+import {
+  type ChildrenProp,
+  type ColorType,
+  type CssProp,
+  type PaletteType,
+  type TestProps,
+} from "../../types";
+import { getColor } from "../../utils";
 import { Icon } from "../icon/Icon";
 
 export interface EmptyContentProps
@@ -47,6 +54,10 @@ export interface EmptyContentProps
    * empty icon
    */
   icon?: string | React.ReactElement;
+  /**
+   * icon color
+   */
+  iconColor?: ColorType | PaletteType;
 }
 
 const SizeMap: KeyValue = {
@@ -101,6 +112,7 @@ export const EmptyContent = ({
   icon,
   className,
   size,
+  iconColor,
   ...test
 }: EmptyContentProps) => {
   return (
@@ -116,25 +128,28 @@ export const EmptyContent = ({
       }
       {...test}
     >
-      <div className="leading-none" style={{ fontSize: "4em" }}>
+      <div
+        className="leading-none"
+        style={{ fontSize: "4em", color: getColor(iconColor ?? "tint-700") }}
+      >
         {isString(icon) && <Icon icon={icon} />}
         {isValidElement(icon) && icon}
         {!icon && <DefaultIcon />}
       </div>
       {title && (
-        <p
+        <div
           className="font-medium text-center text-dimmed"
           style={{ fontSize: "1.5em" }}
         >
           {title}
-        </p>
+        </div>
       )}
-      <p
+      <div
         className="font-medium text-center text-muted"
         style={{ fontSize: "0.875em" }}
       >
         {message}
-      </p>
+      </div>
       <div className="flex gap-1 pt-6">{children}</div>
     </div>
   );

package/src/components/icon/Icon.tsx

@@ -23,8 +23,9 @@
 
 import { isString, isSvgPath } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { useMemoDebugger } from "../../hooks/useEffectDebugger";
+import { useMemo } from "react";
 import {
+  type PaletteType,
   type AriaProps,
   type ColorType,
   type CssProp,
@@ -32,8 +33,7 @@ import {
   type SizeType,
   type TestProps,
 } from "../../types";
-import { getBgClass, getColor, getColorClass } from "../../utils";
-import classes from "./Icon.module.css";
+import { getColor } from "../../utils";
 
 export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
   /**
@@ -43,11 +43,11 @@ export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
   /**
    * background color (CSS color / tailwind color)
    */
-  bg?: ColorType | string;
+  bg?: ColorType | PaletteType | string;
   /**
    * icon color (CSS color / tailwind color)
    */
-  color?: ColorType | string;
+  color?: ColorType | PaletteType | string;
   /**
    * flip icon in rtl
    */
@@ -68,6 +68,7 @@ export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
    * apply animation
    */
   animate?: "spin" | "pulse" | "bounce";
+  disabled?: boolean;
   /**
    * click handler
    */
@@ -95,92 +96,82 @@ export const Icon = ({
   rtlFlip,
   animate,
   rounded,
+  disabled,
   viewBox = "0 0 24 24",
   className,
   onClick,
   ...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,
-        className,
-        "select-none overflow-hidden inline-block box-content leading-none not-italic text-center",
-        bg && getBgClass(bg),
-        color && getColorClass(color),
+        "fabric-icon",
+        "select-none overflow-hidden box-content leading-none not-italic text-center",
         !rounded && "rounded",
         rounded && "rounded-full",
         animate && `animate-${animate}`,
+        !!onClick && disabled && "opacity-30 pointer-events-none",
+        className,
       )}
       onClick={onClick}
       data-flip={rtlFlip}
       style={styles}
       data-clickable={!!onClick}
+      data-inner-clickable={!!onClick}
     >
       {iconEl}
     </dfn>

package/src/components/index.ts

@@ -26,8 +26,8 @@ export {
   AnimationBars,
   AnimationIndicator,
   AnimationSpinner,
-  Skeleton,
   Loading,
+  Skeleton,
 } from "./animations/Animations";
 export { Avatar } from "./avatar/Avatar";
 export { AvatarGroup } from "./avatar/AvatarGroup";
@@ -40,6 +40,7 @@ export { ToggleButtonGroup } from "./button/ToggleButtonGroup";
 export { Callout } from "./callout/Callout";
 export { Card } from "./card/Card";
 export { CardCover } from "./card/CardCover";
+export { FlipContent, type FlipContentRef } from "./card/FlipContent";
 export { Chip } from "./chip/Chip";
 export { Collapsable } from "./collapsable/Collapsable";
 export { Divider } from "./divider/Divider";

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,17 @@ 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>
+);
+
 export const Image = ({
   src,
   alt,
@@ -74,47 +91,50 @@ 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>
   );
 };
@@ -130,17 +150,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 +181,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,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: {