@react-fabric/core 1.0.0-beta.61 → 1.0.0-beta.63

package/src/overlays/flyout/Flyout.tsx

@@ -32,18 +32,13 @@ import {
 } from "@floating-ui/react";
 import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { isValidElement, useCallback, useEffect } from "react";
+import { isValidElement, useEffect, useEffectEvent } from "react";
 import { LoadingLine } from "../../components/animations/Animations";
-import { getIconProps, Icon, type IconProps } from "../../components/icon/Icon";
+import { Icon, type IconProps } from "../../components/icon/Icon";
 import { Header } from "../../core/headfoot/HeadFoot";
 import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
-import {
-  type AriaProps,
-  type CallbackReturn,
-  type ChildrenProp,
-  type Elements,
-  type TestProps,
-} from "../../types";
+import { type AriaProps, type CallbackReturn, type ChildrenProp, type Elements, type TestProps } from "../../types";
+import { getIconProps } from "../../utils";
 
 export interface FlyoutProps extends AriaProps, TestProps, ChildrenProp {
   icon?: IconProps;
@@ -66,11 +61,11 @@ export interface FlyoutProps extends AriaProps, TestProps, ChildrenProp {
   /**
    * modal title
    */
-  title?: JSX.Element | string | false;
+  title?: React.ReactElement | string | false;
   /**
    * header actions
    */
-  actions?: Elements<JSX.Element>;
+  actions?: Elements<React.ReactElement>;
   /**
    * modal size
    */
@@ -140,28 +135,17 @@ export const Flyout = ({
   // Merge all the interactions into prop getters
   const { getFloatingProps } = useInteractions([dismiss, role]);
 
-  const handleClose = useCallback(
-    (...args: AnyObject) => {
-      void Promise.resolve(onBeforeClose?.(...args)).then((ret) => {
-        if (ret !== false) {
-          refs.floating.current &&
-            (refs.floating.current.dataset.show = "false");
-          setTimeout(() => {
-            onClose?.(...args);
-          }, 250);
-        }
-        ret === false &&
-          setTimeout(
-            () =>
-              refs.floating.current
-                ?.querySelector<HTMLElement>('[role="dialog"]')
-                ?.focus(),
-            50,
-          );
-      });
-    },
-    [onBeforeClose, onClose],
-  );
+  const handleClose = useEffectEvent((...args: AnyObject) => {
+    void Promise.resolve(onBeforeClose?.(...args)).then((ret) => {
+      if (ret !== false) {
+        refs.floating.current && (refs.floating.current.dataset.show = "false");
+        setTimeout(() => {
+          onClose?.(...args);
+        }, 250);
+      }
+      ret === false && setTimeout(() => refs.floating.current?.querySelector<HTMLElement>('[role="dialog"]')?.focus(), 50);
+    });
+  });
 
   useEffect(() => {
     setTimeout(() => {
@@ -169,19 +153,13 @@ export const Flyout = ({
     }, 50);
   }, []);
 
-  const tryClosing = useCallback(
-    (e: React.MouseEvent) => {
-      if (
-        !!closeOnClick ||
-        (e.target as HTMLElement).closest("[data-flyout-dismiss='true']")
-      ) {
-        setTimeout(() => {
-          handleClose();
-        }, 100);
-      }
-    },
-    [closeOnClick, handleClose],
-  );
+  const tryClosing = useEffectEvent((e: React.MouseEvent) => {
+    if (!!closeOnClick || (e.target as HTMLElement).closest("[data-flyout-dismiss='true']")) {
+      setTimeout(() => {
+        handleClose();
+      }, 100);
+    }
+  });
 
   return (
     <FloatingPortal root={root}>
@@ -192,15 +170,15 @@ export const Flyout = ({
           className="bg-tint-100/10 backdrop-blur-sm transition-all"
         />
       )}
-      <FloatingFocusManager context={context}>
+      <FloatingFocusManager context={context} modal>
         <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]",
+            align === "start" ? "inset-s-0" : "inset-e-0",
+            size === "sm" && "w-80",
+            size === "md" && "w-160",
             size === "lg" && "w-[60vw]",
             size === "xl" && "w-[80vw]",
           )}
@@ -215,26 +193,14 @@ export const Flyout = ({
           {...aria}
         >
           <HotKeyWrapper>
-            <Header
-              flex
-              align="center"
-              className={classNames("fabric-flyoutHeader", headerClassName)}
-            >
-              {isString(icon) && (
-                <Icon
-                  className={classNames(iconClassName, "p-1")}
-                  {...getIconProps(icon)}
-                />
-              )}
+            <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",
-                )}
+                className={classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-center")}
                 icon="icon-[mdi--close]"
                 onClick={() => handleClose(false)}
               />
@@ -242,10 +208,7 @@ export const Flyout = ({
             {loading && <LoadingLine />}
             <div
               role="dialog"
-              className={classNames(
-                "fabric-flyoutBody",
-                "flex-1 grid overflow-hidden",
-              )}
+              className={classNames("fabric-flyoutBody", "flex-1 grid overflow-hidden")}
               {...({ tabIndex: 0 } as AnyObject)}
             >
               {children}

package/src/overlays/message/Message.tsx

@@ -22,7 +22,7 @@
  */
 
 import classNames from "classnames";
-import { useCallback, useLayoutEffect, useRef } from "react";
+import { useEffectEvent, useLayoutEffect, useRef } from "react";
 import { Icon } from "../../components/icon/Icon";
 import { type ColorState, type Elements } from "../../types";
 import { getColor } from "../../utils";
@@ -47,7 +47,7 @@ export interface MessageProps {
   /**
    * message text
    */
-  message: string | JSX.Element;
+  message: string | React.ReactElement;
   /**
    * theme color
    */
@@ -55,7 +55,7 @@ export interface MessageProps {
   /**
    * extra action button
    */
-  actions?: Elements<JSX.Element>;
+  actions?: Elements<React.ReactElement>;
 }
 
 export const Message = ({
@@ -67,19 +67,15 @@ export const Message = ({
   rtlFlip,
   actions,
   // @ts-expect-error internal prop
-  // eslint-disable-next-line react/prop-types --- IGNORE ---
   onClose,
 }: MessageProps) => {
   const elRef = useRef<HTMLDivElement>(null);
-  const handleClose = useCallback(
-    (ret?: AnyObject) => {
-      elRef.current && (elRef.current.dataset.show = "false");
-      setTimeout(() => {
-        onClose(ret);
-      }, 250);
-    },
-    [onClose],
-  );
+  const handleClose = useEffectEvent((ret?: AnyObject) => {
+    elRef.current && (elRef.current.dataset.show = "false");
+    setTimeout(() => {
+      onClose(ret);
+    }, 250);
+  });
   useLayoutEffect(() => {
     setTimeout(
       () => elRef.current && (elRef.current.dataset.show = "true"),
@@ -91,7 +87,7 @@ export const Message = ({
     <div
       className={classNames(
         "fabric-message",
-        "flex flex-nowrap gap-1 px-8 relative justify-center max-w-md pointer-events-auto rounded mb-2 select-none",
+        "flex flex-nowrap gap-1 px-8 relative justify-center items-center max-w-md pointer-events-auto rounded mb-2 select-none",
       )}
       style={{
         backgroundColor: color
@@ -116,7 +112,7 @@ export const Message = ({
       )}
       <div
         role="none"
-        className="cursor-pointer opacity-65 absolute end-1 hover:opacity-90"
+        className="cursor-pointer opacity-65 absolute inset-e-1 hover:opacity-90"
         onClick={() => handleClose()}
       >
         &times;

package/src/overlays/modal/Modal.tsx

@@ -32,18 +32,13 @@ import {
 } from "@floating-ui/react";
 import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { isValidElement, useCallback, useEffect } from "react";
+import { isValidElement, useEffect, useEffectEvent } from "react";
 import { LoadingLine } from "../../components/animations/Animations";
-import { getIconProps, Icon, type IconProps } from "../../components/icon/Icon";
+import { Icon, type IconProps } from "../../components/icon/Icon";
 import { Header } from "../../core/headfoot/HeadFoot";
 import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
-import {
-  type AriaProps,
-  type CallbackReturn,
-  type ChildrenProp,
-  type Elements,
-  type TestProps,
-} from "../../types";
+import { type AriaProps, type CallbackReturn, type ChildrenProp, type Elements, type TestProps } from "../../types";
+import { getIconProps } from "../../utils";
 
 export interface ModalProps extends AriaProps, TestProps, ChildrenProp {
   icon?: IconProps;
@@ -62,11 +57,11 @@ export interface ModalProps extends AriaProps, TestProps, ChildrenProp {
   /**
    * modal title
    */
-  title?: JSX.Element | string | false;
+  title?: React.ReactElement | string | false;
   /**
    * header actions
    */
-  actions?: Elements<JSX.Element>;
+  actions?: Elements<React.ReactElement>;
   /**
    * modal size
    */
@@ -139,28 +134,17 @@ export const Modal = ({
   // Merge all the interactions into prop getters
   const { getFloatingProps } = useInteractions([dismiss, role]);
 
-  const handleClose = useCallback(
-    (...args: AnyObject) => {
-      void Promise.resolve(onBeforeClose?.(...args)).then((ret) => {
-        if (ret !== false) {
-          refs.floating.current &&
-            (refs.floating.current.dataset.show = "false");
-          setTimeout(() => {
-            onClose?.(...args);
-          }, 250);
-        }
-        ret === false &&
-          setTimeout(
-            () =>
-              refs.floating.current
-                ?.querySelector<HTMLElement>("[role='dialog']")
-                ?.focus(),
-            50,
-          );
-      });
-    },
-    [onBeforeClose, onClose],
-  );
+  const handleClose = useEffectEvent((...args: AnyObject) => {
+    void Promise.resolve(onBeforeClose?.(...args)).then((ret) => {
+      if (ret !== false) {
+        refs.floating.current && (refs.floating.current.dataset.show = "false");
+        setTimeout(() => {
+          onClose?.(...args);
+        }, 250);
+      }
+      ret === false && setTimeout(() => refs.floating.current?.querySelector<HTMLElement>("[role='dialog']")?.focus(), 50);
+    });
+  });
 
   useEffect(() => {
     setTimeout(() => {
@@ -177,12 +161,9 @@ export const Modal = ({
           position: "absolute",
           overflow: "hidden",
         }}
-        className={classNames(
-          "grid place-items-center p-16",
-          !hideMask && "bg-tint-100/20 backdrop-blur-sm",
-        )}
+        className={classNames("grid place-items-center p-16", !hideMask && "bg-tint-100/20 backdrop-blur-sm")}
       >
-        <FloatingFocusManager context={context}>
+        <FloatingFocusManager context={context} modal>
           <dialog
             className={classNames(
               "fabric-modal",
@@ -205,26 +186,14 @@ export const Modal = ({
             {...aria}
           >
             <HotKeyWrapper>
-              <Header
-                flex
-                align="center"
-                className={classNames("fabric-modalHeader", headerClassName)}
-              >
-                {isString(icon) && (
-                  <Icon
-                    className={classNames(iconClassName, "p-1")}
-                    {...getIconProps(icon)}
-                  />
-                )}
+              <Header flex align="center" className={classNames("fabric-modalHeader", 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",
-                  )}
+                  className={classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-center")}
                   icon="icon-[mdi--close]"
                   onClick={() => handleClose(false)}
                 />
@@ -232,10 +201,7 @@ export const Modal = ({
               {loading && <LoadingLine />}
               <div
                 role="dialog"
-                className={classNames(
-                  "fabric-modalBody",
-                  "flex-1 grid overflow-hidden",
-                )}
+                className={classNames("fabric-modalBody", "flex-1 grid overflow-hidden")}
                 {...({ tabIndex: 0 } as AnyObject)}
               >
                 {children}

package/src/overlays/toast/Toast.tsx

@@ -22,7 +22,13 @@
  */
 
 import classNames from "classnames";
-import { Fragment, useCallback, useLayoutEffect, useMemo, useRef } from "react";
+import {
+  Fragment,
+  useEffectEvent,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from "react";
 import { useTranslation } from "react-i18next";
 import { AnimationIndicator } from "../../components/animations/Animations";
 import { Button } from "../../components/button/Button";
@@ -54,7 +60,7 @@ export interface ToastProps {
   /**
    * toast text
    */
-  message: string | JSX.Element;
+  message: string | React.ReactElement;
   /**
    * theme color
    */
@@ -62,7 +68,7 @@ export interface ToastProps {
   /**
    * extra action button
    */
-  actions?: Elements<JSX.Element>;
+  actions?: Elements<React.ReactElement>;
   /**
    * ok label
    */
@@ -82,10 +88,8 @@ export const Toast = ({
   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,
@@ -122,15 +126,12 @@ export const Toast = ({
   }, [color, type, icon, iconSrc, rtlFlip]);
 
   const elRef = useRef<HTMLDivElement>(null);
-  const handleClose = useCallback(
-    (ret?: AnyObject) => {
-      elRef.current && (elRef.current.dataset.show = "false");
-      setTimeout(() => {
-        onClose(ret);
-      }, 250);
-    },
-    [onClose],
-  );
+  const handleClose = useEffectEvent((ret?: AnyObject) => {
+    elRef.current && (elRef.current.dataset.show = "false");
+    setTimeout(() => {
+      onClose(ret);
+    }, 250);
+  });
   useLayoutEffect(() => {
     setTimeout(
       () => elRef.current && (elRef.current.dataset.show = "true"),
@@ -143,7 +144,7 @@ export const Toast = ({
       role="alert"
       className={classNames(
         "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",
+        "flex flex-nowrap max-w-sm bg-default min-w-72 border pointer-events-auto relative overflow-hidden rounded-capped mt-4 select-none",
       )}
       style={{
         borderColor: getColor(color + "-300"),

package/src/overlays/tooltip/Tooltip.tsx

@@ -35,7 +35,7 @@ import {
   useInteractions,
   type Placement,
 } from "@floating-ui/react";
-import { isObject, isString, mergeRefs } from "@react-fabric/utilities";
+import { isString, mergeRefs } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
   Fragment,
@@ -66,18 +66,6 @@ export interface TooltipProps extends TooltipType, RefProp {
   children: ReactElement<KeyValue>;
 }
 
-export const getTooltipProps = (
-  tooltip?: string | TooltipType,
-  innerRef?: AnyObject,
-): (TooltipType & { ref: AnyObject }) | undefined => {
-  if (isString(tooltip) || isValidElement(tooltip)) {
-    return { ref: innerRef, placement: "top", content: tooltip };
-  }
-  if (isObject(tooltip)) {
-    return Object.assign({ ref: innerRef, placement: "top" }, tooltip);
-  }
-};
-
 export const Tooltip = ({
   ref,
   children,
@@ -101,9 +89,7 @@ export const Tooltip = ({
   const placement = useMemo<Placement>(() => {
     if (isRtl)
       return (
-        _placement?.includes("left")
-          ? _placement.replace("left", "right")
-          : _placement?.replace("right", "left") ?? "top"
+        _placement?.includes("left") ? _placement.replace("left", "right") : (_placement?.replace("right", "left") ?? "top")
       ) as Placement;
 
     return _placement ?? "top";
@@ -131,9 +117,7 @@ export const Tooltip = ({
     handleClose: copyContent ? safePolygon({ buffer: 1 }) : undefined,
   });
 
-  const { getReferenceProps, getFloatingProps } = useInteractions([
-    open ? undefined : hover,
-  ]);
+  const { getReferenceProps, getFloatingProps } = useInteractions([open ? undefined : hover]);
 
   useEffect(() => {
     context.update();
@@ -172,7 +156,7 @@ export const Tooltip = ({
         ...(open ? {} : getReferenceProps(rest)),
       })}
       {isOpen && content && (
-        <FloatingPortal>
+        <FloatingPortal root={refs.domReference.current?.closest<HTMLElement>(".theme-base") ?? undefined}>
           <dfn
             data-ref="tooltip"
             className={classNames(
@@ -190,16 +174,9 @@ export const Tooltip = ({
             {isValidElement(content) && content}
             {isString(content) && (
               <span
-                className={classNames(
-                  "font-medium flex-1 break-all whitespace-pre-wrap mixed-lang",
-                  !textColor && "contrast",
-                )}
+                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)",
+                  color: textColor ? undefined : color ? getColor(color) : "var(--bg-color-muted)",
                 }}
               >
                 {content}

package/src/types/global.d.ts

@@ -53,6 +53,10 @@ declare module "*.jpeg" {
   const content: any;
   export default content;
 }
+declare module "*.webp" {
+  const content: any;
+  export default content;
+}
 declare module "*.svg" {
   const content: any;
   export default content;
@@ -69,6 +73,14 @@ declare module "*.css" {
   const content: any;
   export default content;
 }
+declare module "*.txt" {
+  const content: any;
+  export default content;
+}
+declare module "*.vtt" {
+  const content: any;
+  export default content;
+}
 
 interface HDate extends Date {
   toGregorian: () => Date;

package/src/types/index.ts

@@ -23,7 +23,7 @@
 /* istanbul ignore file */
 
 import { type Placement } from "@floating-ui/react";
-import { type JSXElementConstructor, type Ref } from "react";
+import { type JSX, type JSXElementConstructor, type Ref } from "react";
 
 export type ModalProps<P = unknown> = P & {
   onClose: (...args: AnyObject) => void;
@@ -299,7 +299,7 @@ export interface TooltipType {
   /**
    * tooltip content
    */
-  content?: string | JSX.Element;
+  content?: string | React.ReactElement;
   /**
    * tooltip color
    */

package/src/typography/Abbr.tsx

@@ -25,14 +25,9 @@ import { isEmpty, isString, tokenize } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { Fragment, useCallback, useMemo } from "react";
 import { useMemoDebugger } from "../hooks/useEffectDebugger";
-import { Tooltip, getTooltipProps } from "../overlays/tooltip/Tooltip";
-import {
-  type ChildProp,
-  type ColorType,
-  type CssProp,
-  type PaletteType,
-} from "../types";
-import { getColor } from "../utils";
+import { Tooltip } from "../overlays/tooltip/Tooltip";
+import { type ChildProp, type ColorType, type CssProp, type PaletteType } from "../types";
+import { getColor, getTooltipProps } from "../utils";
 
 interface AbbrTextProps {
   children: string;
@@ -42,10 +37,7 @@ interface AbbrTextProps {
 }
 
 const AbbrText = ({ color, children, tooltip, content }: AbbrTextProps) => {
-  const TooltipWrapper = useMemo(
-    () => (tooltip ? Tooltip : Fragment),
-    [tooltip],
-  );
+  const TooltipWrapper = useMemo(() => (tooltip ? Tooltip : Fragment), [tooltip]);
   const tooltipProps = useMemo(() => {
     return tooltip ? { ...getTooltipProps(tooltip), copyContent: content } : {};
   }, [tooltip, content]);
@@ -54,9 +46,7 @@ const AbbrText = ({ color, children, tooltip, content }: AbbrTextProps) => {
     <TooltipWrapper {...tooltipProps}>
       <abbr
         className={classNames("fabric-abbr", "whitespace-nowrap")}
-        style={
-          color ? ({ "--abbr-color": getColor(color) } as AnyObject) : undefined
-        }
+        style={color ? ({ "--abbr-color": getColor(color) } as AnyObject) : undefined}
       >
         {children}
       </abbr>
@@ -74,17 +64,11 @@ export interface AbbrProps extends ChildProp<string>, CssProp {
    *
    * [textPart, tooltip, color (class name or color string)]
    */
-  abbr: Array<
-    [
-      textPart: string,
-      tooltip: string,
-      color?: ColorType | PaletteType | string,
-    ]
-  >;
+  abbr: Array<[textPart: string, tooltip: string, color?: ColorType | PaletteType | string]>;
   /**
    * renderer callback
    */
-  renderer?: (part: string[]) => JSX.Element;
+  renderer?: (part: string[]) => React.ReactElement;
 }
 
 /**
@@ -96,7 +80,7 @@ export interface AbbrProps extends ChildProp<string>, CssProp {
  * while providing additional context through tooltips.
  *
  * @param {AbbrProps} props - The properties for the Abbr component.
- * @returns {JSX.Element} The rendered Abbr component.
+ * @returns {React.ReactElement} The rendered Abbr component.
  *
  * @example
  * ```jsx
@@ -117,22 +101,12 @@ export interface AbbrProps extends ChildProp<string>, CssProp {
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--abbr} for more details.
  */
-export const Abbr = ({
-  children,
-  abbr,
-  className,
-  renderer,
-  copyContent = "text",
-}: AbbrProps) => {
+export const Abbr = ({ children, abbr, className, renderer, copyContent = "text" }: AbbrProps) => {
   /** ***************** abbr text renderer *******************/
   const abbrRender = useCallback(
     (text: string, tooltip: string, color = "") => {
       return (
-        <AbbrText
-          color={color}
-          tooltip={tooltip}
-          content={copyContent === "tooltip" ? tooltip : text}
-        >
+        <AbbrText color={color} tooltip={tooltip} content={copyContent === "tooltip" ? tooltip : text}>
           {(renderer?.([text, tooltip, color]) ?? text) as string}
         </AbbrText>
       );
@@ -142,7 +116,6 @@ export const Abbr = ({
 
   /** ***************** tokenize text with abbr list *******************/
   const inner = useMemoDebugger(
-    // eslint-disable-next-line @typescript-eslint/promise-function-async
     () => {
       if (isString(children)) {
         if (!isEmpty(abbr)) {
@@ -163,8 +136,7 @@ export const Abbr = ({
           return (
             <Fragment>
               {tokens.map(([start, text], i) => {
-                const { tooltip = "", color = "" } =
-                  titles[text.toLowerCase()] ?? {};
+                const { tooltip = "", color = "" } = titles[text.toLowerCase()] ?? {};
                 return (
                   <Fragment key={i}>
                     {start}