@react-fabric/core 1.0.0-beta.6 → 1.0.0-beta.60

package/src/overlays/flyout/Flyout.tsx

@@ -30,15 +30,11 @@ import {
   useInteractions,
   useRole,
 } from "@floating-ui/react";
+import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
-import {
-  Fragment,
-  useCallback,
-  useEffect,
-  type PropsWithChildren,
-} from "react";
+import { isValidElement, useCallback, useEffect } from "react";
 import { Loading } from "../../components/animations/Animations";
-import { Icon } from "../../components/icon/Icon";
+import { getIconProps, Icon, type IconProps } from "../../components/icon/Icon";
 import { Header } from "../../core/headfoot/HeadFoot";
 import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
 import {
@@ -46,17 +42,12 @@ import {
   type CallbackReturn,
   type ChildrenProp,
   type Elements,
-  type IconProps,
   type TestProps,
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
-import classes from "./Flyout.module.css";
 
-export interface FlyoutProps
-  extends AriaProps,
-    TestProps,
-    IconProps,
-    ChildrenProp {
+export interface FlyoutProps extends AriaProps, TestProps, ChildrenProp {
+  icon?: IconProps;
   /**
    * flyout alignment
    */
@@ -93,6 +84,10 @@ export interface FlyoutProps
    * minimum width
    */
   minWidth?: string | number;
+  /**
+   * portal root element
+   */
+  root?: HTMLElement;
   /**
    * hide backdrop mask
    */
@@ -113,10 +108,7 @@ export interface FlyoutProps
 
 export const Flyout = ({
   icon,
-  iconBg,
-  iconColor,
   iconClassName,
-  rtlFlip,
   title,
   actions,
   closeOnClick,
@@ -128,6 +120,7 @@ export const Flyout = ({
   size,
   width,
   minWidth,
+  root,
   hideMask,
   align = "start",
   ...aria
@@ -140,6 +133,7 @@ export const Flyout = ({
   });
   const dismiss = useDismiss(context, {
     outsidePressEvent: "mousedown",
+    outsidePress: !hideMask,
     escapeKey: true,
   });
   const role = useRole(context);
@@ -173,9 +167,6 @@ export const Flyout = ({
   useEffect(() => {
     setTimeout(() => {
       refs.floating.current && (refs.floating.current.dataset.show = "true");
-      refs.floating.current
-        ?.querySelector<HTMLElement>('[role="dialog"]')
-        ?.focus();
     }, 50);
   }, []);
 
@@ -193,91 +184,76 @@ export const Flyout = ({
     [closeOnClick, handleClose],
   );
 
-  const Wrapper = useCallback(
-    ({ children }: PropsWithChildren) => {
-      if (hideMask) return <Fragment>{children}</Fragment>;
-
-      return (
+  return (
+    <FloatingPortal root={root}>
+      {!hideMask && (
         <FloatingOverlay
           lockScroll
-          style={{ zIndex: "var(--z-overlay-mask)" }}
-          className="bg-base/10 backdrop-blur-sm transition-all"
+          style={{ zIndex: "var(--z-overlay-mask)", overflow: "hidden" }}
+          className="bg-tint-100/10 backdrop-blur-sm transition-all"
+        />
+      )}
+      <FloatingFocusManager context={context}>
+        <div
+          data-align={align}
+          className={classNames(
+            "fabric-flyout",
+            "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl",
+            align === "start" ? "start-0" : "end-0",
+            size === "sm" && "w-[20rem]",
+            size === "md" && "w-[40rem]",
+            size === "lg" && "w-[60vw]",
+            size === "xl" && "w-[80vw]",
+          )}
+          style={{
+            width,
+            minWidth,
+          }}
+          onMouseUpCapture={tryClosing}
+          ref={refs.setFloating}
+          {...getFloatingProps()}
+          {...aria}
+          {...aria}
         >
-          {children}
-        </FloatingOverlay>
-      );
-    },
-    [hideMask, handleClose],
-  );
-
-  return (
-    <FloatingPortal>
-      <Wrapper>
-        <FloatingFocusManager context={context}>
-          <Wrapper>
+          <HotKeyWrapper>
+            <Header
+              flex
+              align="center"
+              className={classNames("fabric-flyoutHeader", headerClassName)}
+            >
+              {isString(icon) && (
+                <Icon
+                  className={classNames(iconClassName, "p-1")}
+                  {...getIconProps(icon)}
+                />
+              )}
+              {isValidElement(icon) && icon}
+              <label className="flex-1 truncate py-2 px-1">{title}</label>
+              {actions}
+              <Icon
+                data-ref="panelClose"
+                className={classNames(
+                  "fabric-panelAction",
+                  "cursor-pointer p-1 text-xl self-center",
+                )}
+                icon={CoreIcons.close}
+                onClick={() => handleClose(false)}
+              />
+            </Header>
+            {loading && <Loading />}
             <div
-              data-align={align}
+              role="dialog"
               className={classNames(
-                classes.flyout,
-                "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl",
-                align === "start" ? "start-0" : "end-0",
-                size === "sm" && "w-[20rem]",
-                size === "md" && "w-[40rem]",
-                size === "lg" && "w-[60vw]",
-                size === "xl" && "w-[80vw]",
+                "fabric-flyoutBody",
+                "flex-1 grid overflow-hidden",
               )}
-              style={{
-                width,
-                minWidth,
-              }}
-              onMouseUpCapture={tryClosing}
-              ref={refs.setFloating}
-              {...getFloatingProps()}
-              {...aria}
-              {...aria}
+              {...({ tabIndex: 0 } as AnyObject)}
             >
-              <HotKeyWrapper>
-                <Header
-                  flex
-                  className={classNames(classes.flyoutHeader, headerClassName)}
-                >
-                  {icon && (
-                    <Icon
-                      icon={icon}
-                      bg={iconBg}
-                      color={iconColor}
-                      className={classNames(iconClassName, "p-1")}
-                      rtlFlip={rtlFlip}
-                    />
-                  )}
-                  <label className="flex-1 truncate py-2 px-1">{title}</label>
-                  {actions}
-                  <Icon
-                    data-ref="panelClose"
-                    className={classNames(
-                      classes.panelAction,
-                      "cursor-pointer p-1 text-xl self-stretch",
-                    )}
-                    icon={CoreIcons.close}
-                    onClick={() => handleClose(false)}
-                  />
-                </Header>
-                {loading && <Loading />}
-                <div
-                  role="dialog"
-                  className={classNames(
-                    classes.flyoutBody,
-                    "flex-1 grid overflow-hidden",
-                  )}
-                  {...({ tabIndex: 0 } as AnyObject)}
-                >
-                  {children}
-                </div>
-              </HotKeyWrapper>
+              {children}
             </div>
-          </Wrapper>
-        </FloatingFocusManager>
-      </Wrapper>
+          </HotKeyWrapper>
+        </div>
+      </FloatingFocusManager>
     </FloatingPortal>
   );
 };

package/src/overlays/message/Message.tsx

@@ -24,11 +24,22 @@
 import classNames from "classnames";
 import { useCallback, useLayoutEffect, useRef } from "react";
 import { Icon } from "../../components/icon/Icon";
-import { type ColorType, type Elements, type IconProps } from "../../types";
-import { getBgClass, getColorClass } from "../../utils";
-import classes from "./Message.module.css";
+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
    */
@@ -40,7 +51,7 @@ export interface MessageProps extends Omit<IconProps, "iconBg" | "iconColor"> {
   /**
    * theme color
    */
-  color?: ColorType;
+  color?: ColorState;
   /**
    * extra action button
    */
@@ -52,9 +63,11 @@ export const Message = ({
   message,
   color,
   icon,
+  iconSrc,
   rtlFlip,
   actions,
   // @ts-expect-error internal prop
+  // eslint-disable-next-line react/prop-types --- IGNORE ---
   onClose,
 }: MessageProps) => {
   const elRef = useRef<HTMLDivElement>(null);
@@ -77,14 +90,20 @@ export const Message = ({
   return (
     <div
       className={classNames(
-        classes.message,
-        color ? getBgClass(color + "-300") : "bg-invert",
-        color ? getColorClass(color + "-900") : "text-invert",
+        "fabric-message",
         "flex flex-nowrap gap-1 px-8 relative justify-center max-w-md pointer-events-auto rounded mb-2 select-none",
       )}
+      style={{
+        backgroundColor: color
+          ? getColor(color + "-300")
+          : "var(--bg-color-invert)",
+        color: color ? getColor(color + "-900") : "var(--text-color-invert)",
+      }}
       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

@@ -30,10 +30,11 @@ import {
   useInteractions,
   useRole,
 } from "@floating-ui/react";
+import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { 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, type IconProps } from "../../components/icon/Icon";
 import { Header } from "../../core/headfoot/HeadFoot";
 import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
 import {
@@ -41,17 +42,12 @@ import {
   type CallbackReturn,
   type ChildrenProp,
   type Elements,
-  type IconProps,
   type TestProps,
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
-import classes from "./Modal.module.css";
 
-export interface ModalProps
-  extends AriaProps,
-    TestProps,
-    IconProps,
-    ChildrenProp {
+export interface ModalProps extends AriaProps, TestProps, ChildrenProp {
+  icon?: IconProps;
   /**
    * header className
    */
@@ -92,6 +88,14 @@ export interface ModalProps
    * minimum width
    */
   minWidth?: string | number;
+  /**
+   * portal root element
+   */
+  root?: HTMLElement;
+  /**
+   * hide mask background
+   */
+  hideMask?: boolean;
   /**
    * close handler
    */
@@ -104,10 +108,7 @@ export interface ModalProps
 
 export const Modal = ({
   icon,
-  iconBg,
-  iconColor,
   iconClassName,
-  rtlFlip,
   title,
   actions,
   headerClassName,
@@ -115,7 +116,9 @@ export const Modal = ({
   onBeforeClose,
   children,
   loading,
+  root,
   size,
+  hideMask,
   width,
   height,
   minHeight,
@@ -163,27 +166,31 @@ export const Modal = ({
   useEffect(() => {
     setTimeout(() => {
       refs.floating.current && (refs.floating.current.dataset.show = "true");
-      refs.floating.current
-        ?.querySelector<HTMLElement>("[role='dialog']")
-        ?.focus();
     }, 50);
   }, []);
 
   return (
-    <FloatingPortal>
+    <FloatingPortal root={root}>
       <FloatingOverlay
         lockScroll
-        style={{ zIndex: "var(--z-overlay-mask)" }}
-        className="bg-base/50 backdrop-blur-sm grid place-items-center"
+        style={{
+          zIndex: "var(--z-overlay-mask)",
+          position: "absolute",
+          overflow: "hidden",
+        }}
+        className={classNames(
+          "grid place-items-center p-16",
+          !hideMask && "bg-tint-100/20 backdrop-blur-sm",
+        )}
       >
         <FloatingFocusManager context={context}>
           <dialog
             className={classNames(
-              classes.modal,
+              "fabric-modal",
               "rounded-capped relative overflow-hidden flex flex-col flex-nowrap",
-              "ring-1 ring-tint-100 ring-offset-1 focus-within:ring-primary-300 shadow-xl",
+              "ring-2 ring-offset-2 ring-tint-100 focus-within:ring-primary-300 shadow-xl",
               size === "sm" && "w-[20rem]",
-              size === "md" && "w-[40rem]",
+              size === "md" && "w-160",
               size === "lg" && "w-[60vw]",
               size === "xl" && "w-[80vw]",
               size === "screen" && "w-screen h-screen",
@@ -201,24 +208,23 @@ export const Modal = ({
             <HotKeyWrapper>
               <Header
                 flex
-                className={classNames(classes.modalHeader, headerClassName)}
+                align="center"
+                className={classNames("fabric-modalHeader", headerClassName)}
               >
-                {icon && (
+                {isString(icon) && (
                   <Icon
-                    icon={icon}
-                    bg={iconBg}
-                    color={iconColor}
                     className={classNames(iconClassName, "p-1")}
-                    rtlFlip={rtlFlip}
+                    {...getIconProps(icon)}
                   />
                 )}
+                {isValidElement(icon) && icon}
                 <label className="flex-1 truncate py-2 px-1">{title}</label>
                 {actions}
                 <Icon
                   data-ref="panelClose"
                   className={classNames(
-                    classes.panelAction,
-                    "cursor-pointer p-1 text-xl self-stretch",
+                    "fabric-panelAction",
+                    "cursor-pointer p-1 text-xl self-center",
                   )}
                   icon={CoreIcons.close}
                   onClick={() => handleClose(false)}
@@ -228,7 +234,7 @@ export const Modal = ({
               <div
                 role="dialog"
                 className={classNames(
-                  classes.modalBody,
+                  "fabric-modalBody",
                   "flex-1 grid overflow-hidden",
                 )}
                 {...({ tabIndex: 0 } as AnyObject)}

package/src/overlays/toast/Toast.tsx

@@ -27,16 +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 ColorType, type Elements, type IconProps } from "../../types";
+import { type ColorState, type Elements } from "../../types";
 import { CoreIcons } from "../../types/icons";
-import { getBgClass, getBorderClass, getColorClass } from "../../utils";
-import classes from "./Toast.module.css";
+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
    */
@@ -48,7 +59,7 @@ export interface ToastProps extends Omit<IconProps, "iconBg" | "iconColor"> {
   /**
    * theme color
    */
-  color?: ColorType;
+  color?: ColorState;
   /**
    * extra action button
    */
@@ -68,11 +79,14 @@ export const Toast = ({
   message,
   color = "primary",
   icon,
+  iconSrc,
   rtlFlip,
   actions,
   // @ts-expect-error internal prop
+  // eslint-disable-next-line react/prop-types --- IGNORE ---
   onClose,
   // @ts-expect-error internal prop
+  // eslint-disable-next-line react/prop-types --- IGNORE ---
   onCloseAll,
   type,
   okLabel,
@@ -83,39 +97,30 @@ 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":
-        return (
-          <AnimationIndicator
-            type="cross"
-            className={getColorClass(color + "-600")}
-          />
-        );
+        return <AnimationIndicator type="cross" color={"danger-600"} />;
       case "success":
-        return (
-          <AnimationIndicator
-            type="check"
-            className={getColorClass(color + "-600")}
-          />
-        );
+        return <AnimationIndicator type="check" color={"success-600"} />;
       case "warning":
-        return (
-          <AnimationIndicator
-            type="exclaim"
-            className={getColorClass(color + "-600")}
-          />
-        );
+        return <AnimationIndicator type="exclaim" color={"warning-600"} />;
       default:
         return (
           <AnimationIndicator
             type={type === "confirm" ? "question" : "info"}
-            className={getColorClass(color + "-600")}
+            color={`${color}-600`}
           />
         );
     }
-  }, [color, type, icon]);
+  }, [color, type, icon, iconSrc, rtlFlip]);
 
   const elRef = useRef<HTMLDivElement>(null);
   const handleClose = useCallback(
@@ -138,22 +143,29 @@ export const Toast = ({
     <div
       role="alert"
       className={classNames(
-        classes.toast,
-        getBorderClass(color + "-300"),
+        "fabric-toast",
         "flex flex-nowrap max-w-sm bg-base min-w-72 border pointer-events-auto relative overflow-hidden rounded-capped mt-4 select-none",
       )}
+      style={{
+        borderColor: getColor(color + "-300"),
+      }}
       ref={elRef}
     >
       <div
-        className={classNames("flex-initial p-2", getBgClass(color + "-100"))}
+        className={classNames("flex-initial p-2")}
+        style={{
+          backgroundColor: getColor(color + "-300"),
+        }}
       >
         {iconType}
       </div>
       <div
         className={classNames(
-          getBgClass(color + "-50/50"),
           "flex flex-col flex-1 flex-nowrap overflow-hidden p-2",
         )}
+        style={{
+          backgroundColor: getColor(color + "-50"),
+        }}
       >
         <div className="flex flex-nowrap gap-2 items-start">
           <div className="font-medium flex-1">{title}</div>