@react-fabric/core 1.0.0-beta.40 → 1.0.0-beta.42

package/dist/types/overlays/modal/Modal.d.ts

@@ -42,6 +42,14 @@ export interface ModalProps extends AriaProps, TestProps, Omit<IconProps, "icon"
      * minimum width
      */
     minWidth?: string | number;
+    /**
+     * portal root element
+     */
+    root?: HTMLElement;
+    /**
+     * hide mask background
+     */
+    noMask?: boolean;
     /**
      * close handler
      */
@@ -51,4 +59,4 @@ export interface ModalProps extends AriaProps, TestProps, Omit<IconProps, "icon"
      */
     onBeforeClose?: (...args: AnyObject) => CallbackReturn;
 }
-export declare const Modal: ({ icon, iconBg, iconColor, iconClassName, rtlFlip, title, actions, headerClassName, onClose, onBeforeClose, children, loading, size, width, height, minHeight, minWidth, ...aria }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ icon, iconBg, iconColor, iconClassName, rtlFlip, title, actions, headerClassName, onClose, onBeforeClose, children, loading, root, size, noMask, width, height, minHeight, minWidth, ...aria }: ModalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/types/index.d.ts

@@ -6,8 +6,8 @@ export type ModalProps<P = unknown> = P & {
 export type SizeType = "xs" | "sm" | "md" | "lg" | "xl";
 export type SizeTypeWithZero = "xs" | "sm" | "md" | "lg" | "xl" | 0;
 export type ColorState = "primary" | "accent" | "info" | "danger" | "success" | "warning";
-export type ColorType = "primary-50" | "accent-50" | "info-50" | "danger-50" | "success-50" | "warning-50" | "primary-100" | "accent-100" | "info-100" | "danger-100" | "success-100" | "warning-100" | "primary-200" | "accent-200" | "info-200" | "danger-200" | "success-200" | "warning-200" | "primary-300" | "accent-300" | "info-300" | "danger-300" | "success-300" | "warning-300" | "primary-400" | "accent-400" | "info-400" | "danger-400" | "success-400" | "warning-400" | "primary-500" | "accent-500" | "info-500" | "danger-500" | "success-500" | "warning-500" | "primary-600" | "accent-600" | "info-600" | "danger-600" | "success-600" | "warning-600" | "primary-700" | "accent-700" | "info-700" | "danger-700" | "success-700" | "warning-700" | "primary-800" | "accent-800" | "info-800" | "danger-800" | "success-800" | "warning-800" | "primary-900" | "accent-900" | "info-900" | "danger-900" | "success-900" | "warning-900" | "primary-950" | "accent-950" | "info-950" | "danger-950" | "success-950" | "warning-950";
-export type PaletteType = "scarlet-50" | "pumpkin-50" | "marigold-50" | "avacado-50" | "jade-50" | "denim-50" | "iris-50" | "lilac-50" | "coral-50" | "wood-50" | "silver-50" | "steel-50" | "olive-50" | "sand-50" | "scarlet-100" | "pumpkin-100" | "marigold-100" | "avacado-100" | "jade-100" | "denim-100" | "iris-100" | "lilac-100" | "coral-100" | "wood-100" | "silver-100" | "steel-100" | "olive-100" | "sand-100" | "scarlet-200" | "pumpkin-200" | "marigold-200" | "avacado-200" | "jade-200" | "denim-200" | "iris-200" | "lilac-200" | "coral-200" | "wood-200" | "silver-200" | "steel-200" | "olive-200" | "sand-200" | "scarlet-300" | "pumpkin-300" | "marigold-300" | "avacado-300" | "jade-300" | "denim-300" | "iris-300" | "lilac-300" | "coral-300" | "wood-300" | "silver-300" | "steel-300" | "olive-300" | "sand-300" | "scarlet-400" | "pumpkin-400" | "marigold-400" | "avacado-400" | "jade-400" | "denim-400" | "iris-400" | "lilac-400" | "coral-400" | "wood-400" | "silver-400" | "steel-400" | "olive-400" | "sand-400" | "scarlet-500" | "pumpkin-500" | "marigold-500" | "avacado-500" | "jade-500" | "denim-500" | "iris-500" | "lilac-500" | "coral-500" | "wood-500" | "silver-500" | "steel-500" | "olive-500" | "sand-500" | "scarlet-600" | "pumpkin-600" | "marigold-600" | "avacado-600" | "jade-600" | "denim-600" | "iris-600" | "lilac-600" | "coral-600" | "wood-600" | "silver-600" | "steel-600" | "olive-600" | "sand-600" | "scarlet-700" | "pumpkin-700" | "marigold-700" | "avacado-700" | "jade-700" | "denim-700" | "iris-700" | "lilac-700" | "coral-700" | "wood-700" | "silver-700" | "steel-700" | "olive-700" | "sand-700" | "scarlet-800" | "pumpkin-800" | "marigold-800" | "avacado-800" | "jade-800" | "denim-800" | "iris-800" | "lilac-800" | "coral-800" | "wood-800" | "silver-800" | "steel-800" | "olive-800" | "sand-800" | "scarlet-900" | "pumpkin-900" | "marigold-900" | "avacado-900" | "jade-900" | "denim-900" | "iris-900" | "lilac-900" | "coral-900" | "wood-900" | "silver-900" | "steel-900" | "olive-900" | "sand-900" | "scarlet-950" | "pumpkin-950" | "marigold-950" | "avacado-950" | "jade-950" | "denim-950" | "iris-950" | "lilac-950" | "coral-950" | "wood-950" | "silver-950" | "steel-950" | "olive-950" | "sand-950";
+export type ColorType = "primary-50" | "primary-100" | "primary-200" | "primary-300" | "primary-400" | "primary-500" | "primary-600" | "primary-700" | "primary-800" | "primary-900" | "primary-950" | "accent-50" | "accent-100" | "accent-200" | "accent-300" | "accent-400" | "accent-500" | "accent-600" | "accent-700" | "accent-800" | "accent-900" | "accent-950" | "info-50" | "info-100" | "info-200" | "info-300" | "info-400" | "info-500" | "info-600" | "info-700" | "info-800" | "info-900" | "info-950" | "danger-50" | "danger-100" | "danger-200" | "danger-300" | "danger-400" | "danger-500" | "danger-600" | "danger-700" | "danger-800" | "danger-900" | "danger-950" | "success-50" | "success-100" | "success-200" | "success-300" | "success-400" | "success-500" | "success-600" | "success-700" | "success-800" | "success-900" | "success-950" | "warning-50" | "warning-100" | "warning-200" | "warning-300" | "warning-400" | "warning-500" | "warning-600" | "warning-700" | "warning-800" | "warning-900" | "warning-950";
+export type PaletteType = "scarlet-50" | "scarlet-100" | "scarlet-200" | "scarlet-300" | "scarlet-400" | "scarlet-500" | "scarlet-600" | "scarlet-700" | "scarlet-800" | "scarlet-900" | "scarlet-950" | "pumpkin-50" | "pumpkin-100" | "pumpkin-200" | "pumpkin-300" | "pumpkin-400" | "pumpkin-500" | "pumpkin-600" | "pumpkin-700" | "pumpkin-800" | "pumpkin-900" | "pumpkin-950" | "marigold-50" | "marigold-100" | "marigold-200" | "marigold-300" | "marigold-400" | "marigold-500" | "marigold-600" | "marigold-700" | "marigold-800" | "marigold-900" | "marigold-950" | "avacado-50" | "avacado-100" | "avacado-200" | "avacado-300" | "avacado-400" | "avacado-500" | "avacado-600" | "avacado-700" | "avacado-800" | "avacado-900" | "avacado-950" | "jade-50" | "jade-100" | "jade-200" | "jade-300" | "jade-400" | "jade-500" | "jade-600" | "jade-700" | "jade-800" | "jade-900" | "jade-950" | "denim-50" | "denim-100" | "denim-200" | "denim-300" | "denim-400" | "denim-500" | "denim-600" | "denim-700" | "denim-800" | "denim-900" | "denim-950" | "iris-50" | "iris-100" | "iris-200" | "iris-300" | "iris-400" | "iris-500" | "iris-600" | "iris-700" | "iris-800" | "iris-900" | "iris-950" | "lilac-50" | "lilac-100" | "lilac-200" | "lilac-300" | "lilac-400" | "lilac-500" | "lilac-600" | "lilac-700" | "lilac-800" | "lilac-900" | "lilac-950" | "coral-50" | "coral-100" | "coral-200" | "coral-300" | "coral-400" | "coral-500" | "coral-600" | "coral-700" | "coral-800" | "coral-900" | "coral-950" | "wood-50" | "wood-100" | "wood-200" | "wood-300" | "wood-400" | "wood-500" | "wood-600" | "wood-700" | "wood-800" | "wood-900" | "wood-950" | "silver-50" | "silver-100" | "silver-200" | "silver-300" | "silver-400" | "silver-500" | "silver-600" | "silver-700" | "silver-800" | "silver-900" | "silver-950" | "steel-50" | "steel-100" | "steel-200" | "steel-300" | "steel-400" | "steel-500" | "steel-600" | "steel-700" | "steel-800" | "steel-900" | "steel-950" | "olive-50" | "olive-100" | "olive-200" | "olive-300" | "olive-400" | "olive-500" | "olive-600" | "olive-700" | "olive-800" | "olive-900" | "olive-950" | "sand-50" | "sand-100" | "sand-200" | "sand-300" | "sand-400" | "sand-500" | "sand-600" | "sand-700" | "sand-800" | "sand-900" | "sand-950" | "tint-50" | "tint-100" | "tint-200" | "tint-300" | "tint-400" | "tint-500" | "tint-600" | "tint-700" | "tint-800" | "tint-900" | "tint-950";
 export type ColorWithGrays = ColorType | "invert" | "dimmed" | "muted";
 export declare const ThemeColors: string[];
 export interface TooltipType {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.40",
+  "version": "1.0.0-beta.42",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@react-fabric/utilities": "^1.0.0-beta.40",
+    "@react-fabric/utilities": "^1.0.0-beta.42",
     "@tailwindcss/postcss": "~4.0.14",
     "boring-avatars": "^1.10.2",
     "classnames": "^2.5.1",
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "ede05c84683697d85e28a0ae380cb9b74d693f51"
+  "gitHead": "61c9612bb2c7bc9a807f46922881432748c9e7a3"
 }

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,7 +128,10 @@ 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 />}

package/src/core/page/Page.tsx

@@ -24,9 +24,18 @@
 import classNames from "classnames";
 import { Loading } from "../../components/animations/Animations";
 import { Icon } from "../../components/icon/Icon";
-import { type ChildrenProp, type IconProps, type TestProps } from "../../types";
+import {
+  type ChildrenProp,
+  type IconProps,
+  type RefProp,
+  type TestProps,
+} from "../../types";
 
-export interface PageProps extends IconProps, ChildrenProp, TestProps {
+export interface PageProps
+  extends IconProps,
+    ChildrenProp,
+    TestProps,
+    RefProp<HTMLDivElement> {
   /**
    * page title
    */
@@ -49,6 +58,7 @@ export interface PageProps extends IconProps, ChildrenProp, TestProps {
  * The page component used typically for routes, is a structured layout used within an application to organize and display content in a sectioned format, ensuring a consistent and intuitive user experience.
  */
 export const Page = ({
+  ref,
   children,
   paper,
   title,
@@ -60,6 +70,7 @@ export const Page = ({
   loading,
   "data-testid": testId,
   "data-test-value": testValue,
+  ...rest
 }: PageProps) => {
   return (
     <div
@@ -67,10 +78,12 @@ export const Page = ({
       data-test-value={testValue}
       data-loading={loading}
       className={classNames(
-        "fabric-page",
+        "fabric-page relative",
         "overflow-hidden grid area-content",
         paper && "shadow-paper m-[6px] rounded-capped",
       )}
+      ref={ref}
+      {...rest}
     >
       {title && (
         <div

package/src/overlays/flyout/Flyout.tsx

@@ -33,12 +33,10 @@ import {
 import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
-  Fragment,
   isValidElement,
   useCallback,
   useEffect,
   type ElementType,
-  type PropsWithChildren,
 } from "react";
 import { Loading } from "../../components/animations/Animations";
 import { Icon } from "../../components/icon/Icon";
@@ -194,91 +192,79 @@ export const Flyout = ({
     [closeOnClick, handleClose],
   );
 
-  const Wrapper = useCallback(
-    ({ children }: PropsWithChildren) => {
-      if (hideMask) return <Fragment>{children}</Fragment>;
-
-      return (
+  return (
+    <FloatingPortal>
+      {!hideMask && (
         <FloatingOverlay
           lockScroll
-          style={{ zIndex: "var(--z-overlay-mask)" }}
+          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}>
-          <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}
-          >
-            <HotKeyWrapper>
-              <Header
-                flex
-                align="center"
-                className={classNames("fabric-flyoutHeader", headerClassName)}
-              >
-                {isString(icon) && (
-                  <Icon
-                    icon={icon}
-                    bg={iconBg}
-                    color={iconColor}
-                    className={classNames(iconClassName, "p-1")}
-                    rtlFlip={rtlFlip}
-                  />
-                )}
-                {isValidElement(icon) && icon}
-                <label className="flex-1 truncate py-2 px-1">{title}</label>
-                {actions}
+          <HotKeyWrapper>
+            <Header
+              flex
+              align="center"
+              className={classNames("fabric-flyoutHeader", headerClassName)}
+            >
+              {isString(icon) && (
                 <Icon
-                  data-ref="panelClose"
-                  className={classNames(
-                    "fabric-panelAction",
-                    "cursor-pointer p-1 text-xl self-stretch",
-                  )}
-                  icon={CoreIcons.close}
-                  onClick={() => handleClose(false)}
+                  icon={icon}
+                  bg={iconBg}
+                  color={iconColor}
+                  className={classNames(iconClassName, "p-1")}
+                  rtlFlip={rtlFlip}
                 />
-              </Header>
-              {loading && <Loading />}
-              <div
-                role="dialog"
+              )}
+              {isValidElement(icon) && icon}
+              <label className="flex-1 truncate py-2 px-1">{title}</label>
+              {actions}
+              <Icon
+                data-ref="panelClose"
                 className={classNames(
-                  "fabric-flyoutBody",
-                  "flex-1 grid overflow-hidden",
+                  "fabric-panelAction",
+                  "cursor-pointer p-1 text-xl self-stretch",
                 )}
-                {...({ tabIndex: 0 } as AnyObject)}
-              >
-                {children}
-              </div>
-            </HotKeyWrapper>
-          </div>
-        </FloatingFocusManager>
-      </Wrapper>
+                icon={CoreIcons.close}
+                onClick={() => handleClose(false)}
+              />
+            </Header>
+            {loading && <Loading />}
+            <div
+              role="dialog"
+              className={classNames(
+                "fabric-flyoutBody",
+                "flex-1 grid overflow-hidden",
+              )}
+              {...({ tabIndex: 0 } as AnyObject)}
+            >
+              {children}
+            </div>
+          </HotKeyWrapper>
+        </div>
+      </FloatingFocusManager>
     </FloatingPortal>
   );
 };

package/src/overlays/modal/Modal.tsx

@@ -98,6 +98,14 @@ export interface ModalProps
    * minimum width
    */
   minWidth?: string | number;
+  /**
+   * portal root element
+   */
+  root?: HTMLElement;
+  /**
+   * hide mask background
+   */
+  noMask?: boolean;
   /**
    * close handler
    */
@@ -121,7 +129,9 @@ export const Modal = ({
   onBeforeClose,
   children,
   loading,
+  root,
   size,
+  noMask,
   width,
   height,
   minHeight,
@@ -173,18 +183,25 @@ export const Modal = ({
   }, []);
 
   return (
-    <FloatingPortal>
+    <FloatingPortal root={root}>
       <FloatingOverlay
         lockScroll
-        style={{ zIndex: "var(--z-overlay-mask)" }}
-        className="bg-tint-100/20 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",
+          !noMask && "bg-tint-100/20 backdrop-blur-sm",
+        )}
       >
         <FloatingFocusManager context={context}>
           <dialog
             className={classNames(
               "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 === "lg" && "w-[60vw]",

package/src/overlays/tooltip/Tooltip.tsx

@@ -186,22 +186,24 @@ export const Tooltip = ({
             }}
             {...getFloatingProps()}
           >
-            <span
-              className={classNames(
-                "font-medium flex-1 break-all",
-                !textColor && "contrast",
-                isString(content) && "whitespace-pre-wrap mixed-lang",
-              )}
-              style={{
-                color: textColor
-                  ? undefined
-                  : color
-                    ? getColor(color)
-                    : "var(--bg-color-muted)",
-              }}
-            >
-              {content}
-            </span>
+            {isValidElement(content) && content}
+            {isString(content) && (
+              <span
+                className={classNames(
+                  "font-medium flex-1 break-all whitespace-pre-wrap mixed-lang",
+                  !textColor && "contrast",
+                )}
+                style={{
+                  color: textColor
+                    ? undefined
+                    : color
+                      ? getColor(color)
+                      : "var(--bg-color-muted)",
+                }}
+              >
+                {content}
+              </span>
+            )}
             {copyEl}
             <FloatingArrow
               ref={arrowRef}