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

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,
@@ -174,22 +171,14 @@ export const Tab = <Tag extends React.ElementType = "button">({
           active && activeClassName,
           disabled && "text-tint-500 pointer-events-none",
           tabFlex ? "flex-1" : "flex-initial max-w-36",
-          minimal ? "min-w-6 rounded" : "min-w-18 rounded-capped",
-          "flex items-center justify-center px-1 overflow-hidden cursor-pointer",
+          minimal ? "min-w-6 rounded" : "rounded-capped",
+          "flex items-center justify-center overflow-hidden cursor-pointer",
         )}
         onClick={() => !active && onClick?.(id)}
         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/components/tabpanel/TabPanel.tsx

@@ -52,6 +52,10 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
    * tab button flex to fill tabs
    */
   tabFlex?: boolean;
+  /**
+   * rotate tab sideways for start/end orientation
+   */
+  tabRotate?: boolean;
   /**
    * tab button gap
    */
@@ -132,6 +136,7 @@ export const TabPanel = ({
   tabFlex,
   append,
   prepend,
+  tabRotate,
   gap,
   onBeforeChange,
   onChange,
@@ -182,6 +187,7 @@ export const TabPanel = ({
         className={classNames(
           "fabric-tabHeader",
           headerClassName,
+          tabRotate && "tab-rotate",
           justify && `justify-${justify}`,
           ["start", "end"].includes(orientation) && "flex-col",
           "flex flex-nowrap overflow-hidden items-center",

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) => {

package/src/overlays/flyout/Flyout.tsx

@@ -32,14 +32,9 @@ import {
 } from "@floating-ui/react";
 import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
-import {
-  isValidElement,
-  useCallback,
-  useEffect,
-  type ElementType,
-} from "react";
+import { isValidElement, useCallback, useEffect } from "react";
 import { Loading } from "../../components/animations/Animations";
-import { Icon } from "../../components/icon/Icon";
+import { getIconProps, Icon, IconProps } from "../../components/icon/Icon";
 import { Header } from "../../core/headfoot/HeadFoot";
 import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
 import {
@@ -47,17 +42,12 @@ import {
   type CallbackReturn,
   type ChildrenProp,
   type Elements,
-  type IconProps,
   type TestProps,
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
 
-export interface FlyoutProps
-  extends AriaProps,
-    TestProps,
-    Omit<IconProps, "icon">,
-    ChildrenProp {
-  icon?: string | ElementType<IconProps>;
+export interface FlyoutProps extends AriaProps, TestProps, ChildrenProp {
+  icon?: IconProps;
   /**
    * flyout alignment
    */
@@ -94,6 +84,10 @@ export interface FlyoutProps
    * minimum width
    */
   minWidth?: string | number;
+  /**
+   * portal root element
+   */
+  root?: HTMLElement;
   /**
    * hide backdrop mask
    */
@@ -114,10 +108,7 @@ export interface FlyoutProps
 
 export const Flyout = ({
   icon,
-  iconBg,
-  iconColor,
   iconClassName,
-  rtlFlip,
   title,
   actions,
   closeOnClick,
@@ -129,6 +120,7 @@ export const Flyout = ({
   size,
   width,
   minWidth,
+  root,
   hideMask,
   align = "start",
   ...aria
@@ -193,7 +185,7 @@ export const Flyout = ({
   );
 
   return (
-    <FloatingPortal>
+    <FloatingPortal root={root}>
       {!hideMask && (
         <FloatingOverlay
           lockScroll
@@ -231,11 +223,8 @@ export const Flyout = ({
             >
               {isString(icon) && (
                 <Icon
-                  icon={icon}
-                  bg={iconBg}
-                  color={iconColor}
                   className={classNames(iconClassName, "p-1")}
-                  rtlFlip={rtlFlip}
+                  {...getIconProps(icon)}
                 />
               )}
               {isValidElement(icon) && icon}

package/src/overlays/message/Message.tsx

@@ -24,10 +24,22 @@
 import classNames from "classnames";
 import { useCallback, useLayoutEffect, useRef } from "react";
 import { Icon } from "../../components/icon/Icon";
-import { type ColorState, type Elements, type IconProps } from "../../types";
+import { type ColorState, type Elements } from "../../types";
 import { getColor } from "../../utils";
 
-export interface MessageProps extends Omit<IconProps, "iconBg" | "iconColor"> {
+export interface MessageProps {
+  /**
+   * 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;
   /**
    * message title
    */
@@ -51,6 +63,7 @@ export const Message = ({
   message,
   color,
   icon,
+  iconSrc,
   rtlFlip,
   actions,
   // @ts-expect-error internal prop
@@ -87,7 +100,9 @@ export const Message = ({
       }}
       ref={elRef}
     >
-      {icon && <Icon icon={icon} size="md" rtlFlip={rtlFlip} />}
+      {icon && (
+        <Icon icon={icon} iconSrc={iconSrc} size="md" rtlFlip={rtlFlip} />
+      )}
       {title && <div className="font-medium">{title}</div>}
       <div className="truncate flex-initial">{message}</div>
       {actions && (

package/src/overlays/modal/Modal.tsx

@@ -32,14 +32,9 @@ import {
 } from "@floating-ui/react";
 import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
-import {
-  type ElementType,
-  isValidElement,
-  useCallback,
-  useEffect,
-} from "react";
+import { isValidElement, useCallback, useEffect } from "react";
 import { Loading } from "../../components/animations/Animations";
-import { Icon } from "../../components/icon/Icon";
+import { getIconProps, Icon, IconProps } from "../../components/icon/Icon";
 import { Header } from "../../core/headfoot/HeadFoot";
 import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
 import {
@@ -47,17 +42,12 @@ import {
   type CallbackReturn,
   type ChildrenProp,
   type Elements,
-  type IconProps,
   type TestProps,
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
 
-export interface ModalProps
-  extends AriaProps,
-    TestProps,
-    Omit<IconProps, "icon">,
-    ChildrenProp {
-  icon?: string | ElementType<IconProps>;
+export interface ModalProps extends AriaProps, TestProps, ChildrenProp {
+  icon?: IconProps;
   /**
    * header className
    */
@@ -105,7 +95,7 @@ export interface ModalProps
   /**
    * hide mask background
    */
-  noMask?: boolean;
+  hideMask?: boolean;
   /**
    * close handler
    */
@@ -118,10 +108,7 @@ export interface ModalProps
 
 export const Modal = ({
   icon,
-  iconBg,
-  iconColor,
   iconClassName,
-  rtlFlip,
   title,
   actions,
   headerClassName,
@@ -131,7 +118,7 @@ export const Modal = ({
   loading,
   root,
   size,
-  noMask,
+  hideMask,
   width,
   height,
   minHeight,
@@ -193,7 +180,7 @@ export const Modal = ({
         }}
         className={classNames(
           "grid place-items-center p-16",
-          !noMask && "bg-tint-100/20 backdrop-blur-sm",
+          !hideMask && "bg-tint-100/20 backdrop-blur-sm",
         )}
       >
         <FloatingFocusManager context={context}>
@@ -226,11 +213,8 @@ export const Modal = ({
               >
                 {isString(icon) && (
                   <Icon
-                    icon={icon}
-                    bg={iconBg}
-                    color={iconColor}
                     className={classNames(iconClassName, "p-1")}
-                    rtlFlip={rtlFlip}
+                    {...getIconProps(icon)}
                   />
                 )}
                 {isValidElement(icon) && icon}

package/src/overlays/toast/Toast.tsx

@@ -27,15 +27,27 @@ 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 { type ColorState, type Elements } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { getColor } from "../../utils";
 
-export interface ToastProps extends Omit<IconProps, "iconBg" | "iconColor"> {
+export interface ToastProps {
   /**
    * toast type
    */
   type?: "alert" | "confirm";
+  /**
+   * 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
    */
@@ -67,6 +79,7 @@ export const Toast = ({
   message,
   color = "primary",
   icon,
+  iconSrc,
   rtlFlip,
   actions,
   // @ts-expect-error internal prop
@@ -82,7 +95,13 @@ export const Toast = ({
   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":
@@ -99,7 +118,7 @@ export const Toast = ({
           />
         );
     }
-  }, [color, type, icon]);
+  }, [color, type, icon, iconSrc, rtlFlip]);
 
   const elRef = useRef<HTMLDivElement>(null);
   const handleClose = useCallback(

package/src/types/global.d.ts

@@ -45,6 +45,14 @@ declare module "*.png" {
   const content: any;
   export default content;
 }
+declare module "*.jpg" {
+  const content: any;
+  export default content;
+}
+declare module "*.jpeg" {
+  const content: any;
+  export default content;
+}
 declare module "*.svg" {
   const content: any;
   export default content;