@react-fabric/core 1.0.0-beta.57 → 1.0.0-beta.58

package/src/components/button/Button.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { isNil, isString, mergeRefs } from "@react-fabric/utilities";
+import { isNil, isObject, isString, mergeRefs } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
   Fragment,
@@ -39,12 +39,11 @@ import { HotKey } from "../../hotkeys/HotKey";
 import { HotKeyLabel } from "../../hotkeys/HotKeyLabel";
 import { Tooltip } from "../../overlays/tooltip/Tooltip";
 import {
-  type ColorState,
   type AriaProps,
   type BadgeType,
   type CallbackReturn,
+  type ColorState,
   type CssProp,
-  type IconProps,
   type PolymorphicProps,
   type RefProp,
   type SizeType,
@@ -54,14 +53,9 @@ import {
 import { getColor } from "../../utils";
 import { AnimationIndicator } from "../animations/Animations";
 import { Badge, getBadgeProps } from "../badge/Badge";
-import { Icon } from "../icon/Icon";
+import { getIconProps, Icon, IconProps } from "../icon/Icon";
 
-export interface BaseProps
-  extends CssProp,
-    AriaProps,
-    IconProps,
-    RefProp,
-    TestProps {
+export interface BaseProps extends CssProp, AriaProps, RefProp, TestProps {
   /**
    * primary icon alignment
    */
@@ -78,6 +72,10 @@ export interface BaseProps
    * button color
    */
   color?: ColorState;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * button type
    */
@@ -191,11 +189,8 @@ export const Button = <Tag extends React.ElementType = "button">({
   active,
   color = "primary",
   icon,
-  iconBg,
-  iconColor,
   iconAlign = "start",
   altIcon,
-  rtlFlip,
   rounded,
   size,
   disabled,
@@ -323,11 +318,8 @@ export const Button = <Tag extends React.ElementType = "button">({
           {icon && (
             <Icon
               className={"fabric-buttonIcon"}
-              icon={icon}
-              bg={iconBg}
-              color={iconColor}
-              rtlFlip={rtlFlip}
               data-align={iconAlign}
+              {...getIconProps(icon)}
             />
           )}
           {isValidElement(children) && (
@@ -336,7 +328,7 @@ export const Button = <Tag extends React.ElementType = "button">({
           {isString(children) && (
             <label
               className={classNames("fabric-buttonLabel", "truncate")}
-              data-colored-icon={!!iconBg}
+              data-colored-icon={isObject(icon) && "bg" in icon}
             >
               {children}
             </label>

package/src/components/chip/Chip.tsx

@@ -29,7 +29,6 @@ import {
   type ChildProp,
   type ColorType,
   type CssProp,
-  type IconProps,
   type PaletteType,
   type PolymorphicProps,
   type RefProp,
@@ -37,12 +36,11 @@ import {
   type TestProps,
 } from "../../types";
 import { getColor } from "../../utils";
-import { Icon } from "../icon/Icon";
+import { getIconProps, Icon, IconProps } from "../icon/Icon";
 
 export interface ChipProps
   extends CssProp,
     AriaProps,
-    IconProps,
     TestProps,
     ChildProp<string | ReactElement>,
     RefProp<HTMLDivElement> {
@@ -62,6 +60,10 @@ export interface ChipProps
    * full rounded edges
    */
   rounded?: boolean;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * disabled state
    */
@@ -124,9 +126,6 @@ export const Chip = <Tag extends React.ElementType = "div">({
   color,
   variant,
   icon,
-  iconBg,
-  iconColor,
-  rtlFlip,
   disabled,
   onClick,
   onIconClick,
@@ -197,17 +196,14 @@ export const Chip = <Tag extends React.ElementType = "div">({
         <Icon
           data-ref="chipIcon"
           className={classNames("fabric-chipIcon", "m-1 flex-content")}
-          icon={icon}
-          bg={iconBg}
           onClick={onIconClick}
-          color={iconColor}
-          rtlFlip={rtlFlip}
+          {...getIconProps(icon)}
         />
       )}
       {children && (
         <label
           data-ref="chipLabel"
-          className={classNames("fabric-chipLabel", "truncate")}
+          className={classNames("fabric-chipLabel", "truncate flex-1")}
         >
           {children}
         </label>

package/src/components/icon/Icon.tsx

@@ -23,23 +23,27 @@
 
 import { isString, isSvgPath } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { useMemo } from "react";
+import { isValidElement, useEffect, useMemo, useState } from "react";
 import {
-  type PaletteType,
   type AriaProps,
   type ColorType,
   type CssProp,
+  type PaletteType,
   type RefProp,
   type SizeType,
   type TestProps,
 } from "../../types";
 import { getColor } from "../../utils";
 
-export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
+export interface Props extends CssProp, AriaProps, RefProp, TestProps {
   /**
    * svg path / webfont className / 1-4 letter text
    */
-  icon: string;
+  icon: string | JSX.Element;
+  /**
+   * icon image source URL, if failed to load then shows icon
+   */
+  iconSrc?: string;
   /**
    * background color (CSS color / tailwind color)
    */
@@ -75,6 +79,28 @@ export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
   onClick?: React.MouseEventHandler;
 }
 
+export type IconProps =
+  | string
+  | Pick<
+      Props,
+      | "icon"
+      | "iconSrc"
+      | "bg"
+      | "color"
+      | "size"
+      | "rtlFlip"
+      | "viewBox"
+      | "rounded"
+      | "animate"
+    >;
+
+export const getIconProps = (props: IconProps): Props => {
+  if (typeof props === "string") {
+    return { icon: props };
+  }
+  return props;
+};
+
 const SvgTextSize = ["", ".875em", ".525em", ".35em", ".25em"];
 const SizeMap: KeyValue<string> = {
   xs: "0.625rem",
@@ -116,6 +142,7 @@ const SizeMap: KeyValue<string> = {
 export const Icon = ({
   ref,
   icon,
+  iconSrc,
   bg,
   color,
   size = "",
@@ -127,7 +154,13 @@ export const Icon = ({
   className,
   onClick,
   ...rest
-}: IconProps) => {
+}: Props) => {
+  const [imageFailed, setImageFailed] = useState(false);
+
+  useEffect(() => {
+    setImageFailed(false);
+  }, [iconSrc]);
+
   /** ***************** style map *******************/
   const styles = useMemo(() => {
     const s: KeyValue = {};
@@ -153,6 +186,7 @@ export const Icon = ({
 
   /** ***************** render icon *******************/
   const iconEl = useMemo(() => {
+    if (isValidElement(icon)) return icon;
     if (!isString(icon)) {
       throw Error("Invalid icon expected string");
     }
@@ -203,7 +237,10 @@ export const Icon = ({
       data-clickable={!!onClick}
       data-inner-clickable={!!onClick}
     >
-      {iconEl}
+      {iconSrc && !imageFailed && (
+        <img src={iconSrc} onError={() => setImageFailed(true)} />
+      )}
+      {(!iconSrc || imageFailed) && iconEl}
     </dfn>
   );
 };

package/src/components/index.ts

@@ -47,7 +47,7 @@ export { Divider } from "./divider/Divider";
 export { Dropdown, DropdownDismiss } from "./dropdown/Dropdown";
 export { DropdownTool } from "./dropdown/DropdownTool";
 export { EmptyContent } from "./empty/EmptyContent";
-export { Icon } from "./icon/Icon";
+export { Icon, getIconProps } from "./icon/Icon";
 export { Image, Video } from "./media/Media";
 export { ContextMenu } from "./menu/ContextMenu";
 export { Menu } from "./menu/Menu";

package/src/components/menu/MenuItem.tsx

@@ -30,8 +30,9 @@ import { HotKeyLabel } from "../../hotkeys/HotKeyLabel";
 import { Tooltip } from "../../overlays";
 import { type PolymorphicProps } from "../../types";
 import { Badge, getBadgeProps } from "../badge/Badge";
-import { Icon } from "../icon/Icon";
+import { getIconProps, Icon } from "../icon/Icon";
 import { type MenuItemProps } from "./types";
+import { get } from "http";
 
 /**
  * A menu item component that can be used in a dropdown or menu.
@@ -60,10 +61,7 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
   color = "primary",
   className,
   icon,
-  iconBg,
-  iconColor,
   appendLabel,
-  rtlFlip,
   altIcon,
   id,
   active,
@@ -98,13 +96,10 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
     return (
       <Icon
         className={classNames("fabric-menuIcon", minimal && "minimal")}
-        icon={path ?? ""}
-        bg={iconBg}
-        color={iconColor}
-        rtlFlip={rtlFlip}
+        {...getIconProps(path ?? "")}
       />
     );
-  }, [icon, iconBg, iconColor, rtlFlip, minimal, label]);
+  }, [icon, minimal, label]);
 
   const Wrapper = useCallback(
     ({ children, ...rest }: AnyObject) => {

package/src/components/menu/types.ts

@@ -29,15 +29,11 @@ import {
   type ChildrenProp,
   type ColorState,
   type CssProp,
-  type IconProps,
   type TestProps,
 } from "../../types";
+import { IconProps } from "../icon/Icon";
 
-export interface MenuItemProps
-  extends CssProp,
-    AriaProps,
-    TestProps,
-    IconProps {
+export interface MenuItemProps extends CssProp, AriaProps, TestProps {
   /**
    * menu id passed via menu.onClick
    */
@@ -54,6 +50,10 @@ export interface MenuItemProps
    * menu color
    */
   color?: ColorState;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * item active
    */

package/src/components/panel/Panel.tsx

@@ -26,25 +26,23 @@ import { useMemo } from "react";
 import { type ContentProps } from "../../core/content/Content";
 import { type HeadFootProps } from "../../core/headfoot/HeadFoot";
 import { usePropToggle } from "../../hooks/usePropToggle";
+import { HotKey } from "../../hotkeys/HotKey";
 import {
   type AriaProps,
   type ChildrenProp,
   type CollapseProps,
   type CssProp,
   type ExpandProps,
-  type IconProps,
   type TestProps,
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { Loading } from "../animations/Animations";
-import { Icon } from "../icon/Icon";
-import { HotKey } from "../../hotkeys/HotKey";
+import { getIconProps, Icon, IconProps } from "../icon/Icon";
 
 export interface PanelProps
   extends CssProp,
     AriaProps,
     TestProps,
-    IconProps,
     ExpandProps,
     CollapseProps,
     ChildrenProp<HeadFootProps | ContentProps> {
@@ -68,6 +66,10 @@ export interface PanelProps
    * title css classname(s)
    */
   titleClassName?: string;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * loading state
    */
@@ -118,8 +120,6 @@ export interface PanelProps
  * <Panel
  *   title="Panel Title"
  *   icon={CoreIcons.info}
- *   iconBg="bg-blue-500"
- *   iconColor="text-white"
  *   actions={<button>Action</button>}
  *   expandable
  *   collapsable
@@ -147,9 +147,6 @@ export const Panel = ({
   title,
   actions,
   icon,
-  iconBg,
-  iconColor,
-  rtlFlip,
   panelId,
   height,
   width,
@@ -227,11 +224,8 @@ export const Panel = ({
         )}
         {icon && (
           <Icon
-            icon={icon}
-            bg={iconBg}
-            color={iconColor}
-            rtlFlip={rtlFlip}
             className="p-2 text-md select-none pointer-events-none"
+            {...getIconProps(icon)}
           />
         )}
         <div

package/src/components/tabpanel/Tab.tsx

@@ -32,7 +32,6 @@ import {
   type ChildrenProp,
   type ColorState,
   type CssProp,
-  type IconProps,
   type PolymorphicProps,
   type RefProp,
   type TestProps,
@@ -40,7 +39,7 @@ import {
 } from "../../types";
 import { Badge, getBadgeProps } from "../badge/Badge";
 import { DropdownTool } from "../dropdown/DropdownTool";
-import { Icon } from "../icon/Icon";
+import { getIconProps, Icon, IconProps } from "../icon/Icon";
 
 export interface TabProps
   extends Partial<ChildrenProp>,
@@ -48,7 +47,6 @@ export interface TabProps
     RefProp,
     AriaProps,
     TestProps,
-    IconProps,
     TooltipProp {
   /**
    * tab id
@@ -62,6 +60,10 @@ export interface TabProps
    * tab color
    */
   color?: ColorState;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * tab badge
    */
@@ -106,8 +108,6 @@ export interface TabProps
  *   id="tab1"
  *   label="Tab 1"
  *   icon="home"
- *   iconBg="bg-blue-500"
- *   iconColor="text-white"
  *   badge="New"
  *   onClick={(id) => console.log(`Tab clicked: ${id}`)}
  *   onClose={() => console.log("Tab closed")}
@@ -130,9 +130,6 @@ export const Tab = <Tag extends React.ElementType = "button">({
   className,
   label,
   icon,
-  iconBg,
-  iconColor,
-  rtlFlip,
   badge,
   disabled,
   onClose,
@@ -181,15 +178,7 @@ export const Tab = <Tag extends React.ElementType = "button">({
         ref={ref as AnyObject}
         {...aria}
       >
-        {icon && (
-          <Icon
-            icon={icon}
-            bg={iconBg}
-            color={iconColor}
-            rtlFlip={rtlFlip}
-            className="flex-content p-2"
-          />
-        )}
+        {icon && <Icon className="flex-content p-2" {...getIconProps(icon)} />}
         {!minimal && (
           <label className="flex-initial truncate text-center px-1 py-1">
             {label}

package/src/core/aside/Aside.tsx

@@ -31,7 +31,7 @@ import {
   type ReactNode,
 } from "react";
 import { Loading } from "../../components/animations/Animations";
-import { Icon } from "../../components/icon/Icon";
+import { getIconProps, Icon, IconProps } from "../../components/icon/Icon";
 import { useLayoutEffectDebugger } from "../../hooks/useEffectDebugger";
 import { usePropToggle } from "../../hooks/usePropToggle";
 import { useResize } from "../../hooks/useResize";
@@ -40,15 +40,13 @@ import {
   type CollapseProps,
   type CssProp,
   type Elements,
-  type IconProps,
   type TestProps,
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { ErrorBoundary } from "../boundary/ErrorBoundary";
 
 export interface AsideProps
-  extends IconProps,
-    ChildrenProp,
+  extends ChildrenProp,
     CollapseProps,
     CssProp,
     TestProps {
@@ -60,6 +58,10 @@ export interface AsideProps
    * align inline-end
    */
   align?: "start" | "end";
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * header actions
    */
@@ -117,8 +119,6 @@ export interface AsideProps
  * <Aside
  *   title="Sidebar Title"
  *   icon={CoreIcons.menu}
- *   iconBg="bg-gray-200"
- *   iconColor="text-gray-800"
  *   rtlFlip={true}
  *   className="custom-aside"
  *   bodyClassName="custom-aside-body"
@@ -148,9 +148,6 @@ export const Aside = ({
   children,
   title,
   icon,
-  iconBg,
-  iconColor,
-  rtlFlip,
   className,
   bodyClassName,
   headerClassName,
@@ -272,14 +269,11 @@ export const Aside = ({
         )}
         {icon && (
           <Icon
-            icon={icon}
-            bg={iconBg}
-            color={iconColor}
-            rtlFlip={rtlFlip}
             className={classNames(
               "fabric-asideIcon",
               "p-1 text-lg select-none pointer-events-none",
             )}
+            {...getIconProps(icon)}
           />
         )}
         {actions && <div className={"fabric-asideActions"}>{actions}</div>}

package/src/core/headfoot/HeadFoot.tsx

@@ -92,7 +92,7 @@ const HeadFoot = ({
  * ```
  */
 export const Header = (props: HeadFootProps) => (
-  <HeadFoot as="header" area="head" {...props} />
+  <HeadFoot as="header" area="head" data-ref="header" {...props} />
 );
 
 /**
@@ -117,5 +117,5 @@ export const Header = (props: HeadFootProps) => (
  * ```
  */
 export const Footer = (props: HeadFootProps) => (
-  <HeadFoot as="footer" area="foot" {...props} />
+  <HeadFoot as="footer" area="foot" data-ref="footer" {...props} />
 );

package/src/core/page/Page.tsx

@@ -23,17 +23,11 @@
 
 import classNames from "classnames";
 import { Loading } from "../../components/animations/Animations";
-import { Icon } from "../../components/icon/Icon";
-import {
-  type ChildrenProp,
-  type IconProps,
-  type RefProp,
-  type TestProps,
-} from "../../types";
+import { getIconProps, Icon, IconProps } from "../../components/icon/Icon";
+import { type ChildrenProp, type RefProp, type TestProps } from "../../types";
 
 export interface PageProps
-  extends IconProps,
-    ChildrenProp,
+  extends ChildrenProp,
     TestProps,
     RefProp<HTMLDivElement> {
   /**
@@ -48,6 +42,10 @@ export interface PageProps
    * paper style drop shadow
    */
   paper?: boolean;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * loading indicator
    */
@@ -68,8 +66,6 @@ export interface PageProps
  * <Page
  *   title="My Page"
  *   icon="home"
- *   iconBg="bg-blue-500"
- *   iconColor="text-white"
  *   loading={false}
  *   paper={true}
  *   data-testid="my-page"
@@ -89,9 +85,6 @@ export const Page = ({
   title,
   titleClassName,
   icon,
-  rtlFlip,
-  iconBg,
-  iconColor,
   loading,
   "data-testid": testId,
   "data-test-value": testValue,
@@ -119,15 +112,7 @@ export const Page = ({
             titleClassName,
           )}
         >
-          {icon && (
-            <Icon
-              icon={icon}
-              size="1.25em"
-              rtlFlip={rtlFlip}
-              bg={iconBg}
-              color={iconColor}
-            />
-          )}
+          {icon && <Icon size="1.25em" {...getIconProps(icon)} />}
           {title}
         </div>
       )}

package/src/overlays/alert/Alert.tsx

@@ -35,17 +35,29 @@ import { useCallback, useLayoutEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { AnimationIndicator } from "../../components/animations/Animations";
 import { Button } from "../../components/button/Button";
-import { Icon } from "../../components/icon/Icon";
-import { type ColorState, type Elements, type IconProps } from "../../types";
+import { Icon, IconProps } from "../../components/icon/Icon";
+import { type ColorState, type Elements } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { Title } from "../../typography/Title";
 import { getColor } from "../../utils";
 
-export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
+export interface AlertProps {
   /**
    * toast type
    */
   type?: "alert" | "confirm" | "prompt";
+  /**
+   * svg path / webfont className / 1-4 letter text
+   */
+  icon: string;
+  /**
+   * icon image source URL, if failed to load then shows icon
+   */
+  iconSrc?: string;
+  /**
+   * flip icon in rtl
+   */
+  rtlFlip?: boolean;
   /**
    * toast title
    */
@@ -85,6 +97,7 @@ export const Alert = ({
   message,
   color = "primary",
   icon,
+  iconSrc,
   rtlFlip,
   actions,
   // @ts-expect-error internal prop
@@ -115,7 +128,13 @@ export const Alert = ({
   const iconType = useMemo(() => {
     if (icon)
       return (
-        <Icon icon={icon} size="md" rtlFlip={rtlFlip} color={`${color}-600`} />
+        <Icon
+          icon={icon}
+          iconSrc={iconSrc}
+          size="md"
+          rtlFlip={rtlFlip}
+          color={`${color}-600`}
+        />
       );
     switch (color) {
       case "danger":
@@ -132,7 +151,7 @@ export const Alert = ({
           />
         );
     }
-  }, [color, type, icon]);
+  }, [color, type, icon, iconSrc, rtlFlip]);
 
   const handleClose = useCallback(
     (ret: AnyObject) => {