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

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}

package/src/typography/Anchor.tsx

@@ -66,7 +66,7 @@ export interface AnchorProps extends ChildrenProp, CssProp, RefProp, AriaProps {
  *
  * @param {AnchorProps} props - The properties for the Anchor component.
  * @param {Tag} as - The HTML element type to render as (default is "a").
- * @returns {JSX.Element} - A styled anchor element with the specified properties.
+ * @returns {React.ReactElement} - A styled anchor element with the specified properties.
  *
  * @example
  * ```jsx

package/src/typography/Copy.tsx

@@ -22,7 +22,7 @@
  */
 
 import classNames from "classnames";
-import { useCallback } from "react";
+import { useEffectEvent } from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "../components/button/Button";
 import { Tooltip } from "../overlays/tooltip/Tooltip";
@@ -34,7 +34,7 @@ import { type CssProp, type SizeType } from "../types";
  * The button displays a tooltip feedback when the text is successfully copied.
  *
  * @param {CopyProps} props - The properties for the Copy component.
- * @returns {JSX.Element} The rendered Copy component.
+ * @returns {React.ReactElement} The rendered Copy component.
  *
  * @example
  * ```jsx
@@ -55,9 +55,9 @@ export const Copy = ({ text, size, className }: CopyProps) => {
   const { t } = useTranslation("core");
 
   /** ***************** handle copy *******************/
-  const doCopy = useCallback(() => {
+  const doCopy = useEffectEvent(() => {
     void navigator.clipboard.writeText(text);
-  }, [text]);
+  });
 
   return (
     <Tooltip content={t("action.copy")}>

package/src/typography/Mark.tsx

@@ -56,7 +56,7 @@ export interface MarkProps extends ChildProp<string> {
   /**
    * renderer callback
    */
-  renderer?: (part: string[]) => JSX.Element;
+  renderer?: (part: string[]) => React.ReactElement;
 }
 
 /**
@@ -67,7 +67,7 @@ export interface MarkProps extends ChildProp<string> {
  * allowing for greater flexibility in how the text is presented.
  *
  * @param {MarkProps} props - The properties for the Mark component.
- * @returns {JSX.Element} The rendered Mark component.
+ * @returns {React.ReactElement} The rendered Mark component.
  *
  * @example
  * <Mark
@@ -96,7 +96,6 @@ export const Mark = ({ children, mark, renderer }: MarkProps) => {
 
   /** ***************** tokenize text with abbr list *******************/
   const inner = useMemoDebugger(
-    // eslint-disable-next-line @typescript-eslint/promise-function-async
     () => {
       if (isString(children)) {
         if (!isEmpty(mark)) {

package/src/typography/Text.tsx

@@ -23,7 +23,7 @@
 
 import { isNumber } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { useCallback, useRef, useState } from "react";
+import { useEffectEvent, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   useLayoutEffectDebugger,
@@ -80,7 +80,7 @@ export interface TextProps extends ChildrenProp, CssProp, AriaProps, TestProps {
  * It leverages the ResizeObserver API to detect changes in the text container's size and adjust the line clamping accordingly.
  *
  * @param {TextProps} props - The properties for the Text component.
- * @returns {JSX.Element} The rendered Text component.
+ * @returns {React.ReactElement} The rendered Text component.
  *
  * @example
  * ```jsx
@@ -119,7 +119,7 @@ export const Text = ({
   const [showMore, toggleShowMore, refShowMore] = usePropToggle(false);
 
   /** ***************** check text height if clip enabled *******************/
-  const checkHeight = useCallback(() => {
+  const checkHeight = useEffectEvent(() => {
     const el = refContainer.current as HTMLElement;
     if (el && isNumber(clamp) && clamp > 0 && !refShowMore.current) {
       setClipped(
@@ -127,7 +127,7 @@ export const Text = ({
           el.offsetHeight,
       );
     }
-  }, [clamp]);
+  });
 
   /** ***************** observe element resize to recalculate height *******************/
   useLayoutEffectDebugger(
@@ -179,13 +179,15 @@ export const Text = ({
       <div
         ref={refContainer}
         style={
-          { "--text-clamp": showMore ? "unset" : clamp ?? "unset" } as AnyObject
+          {
+            "--text-clamp": showMore ? "unset" : (clamp ?? "unset"),
+          } as AnyObject
         }
       >
         <div
           className={classNames(
             "fabric-text",
-            "mixed-lang px-[2px] whitespace-pre-wrap",
+            "mixed-lang px-0.5 whitespace-pre-wrap",
             family && `font-${family}`,
             clamp && "line-clamp-1",
           )}

package/src/typography/Title.tsx

@@ -71,7 +71,7 @@ export interface TitleProps extends ChildrenProp, CssProp, AriaProps {
  * This component is useful for creating headings or titles in a consistent style across an application.
  *
  * @param {TitleProps} props - The properties for the Title component.
- * @returns {JSX.Element} The rendered Title component.
+ * @returns {React.ReactElement} The rendered Title component.
  *
  * @example
  * ```jsx

package/src/utils/getBadgeProps.ts

@@ -0,0 +1,45 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2026 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { isObject } from "@react-fabric/utilities";
+import { isValidElement } from "react";
+import { BadgeType } from "../types";
+
+/**
+ * Utility function to get badge properties from a badge value or object.
+ * It checks if the badge is an object and returns its properties,
+ *
+ * @param {string | number | BadgeType} badge - The badge value or object.
+ * @returns {AnyObject} An object containing badge properties.
+ */
+export const getBadgeProps = (badge?: string | number | BadgeType): AnyObject => {
+  if (isObject(badge) && !isValidElement(badge)) {
+    return Object.assign({ forButton: true, placement: "" }, badge);
+  } else {
+    return {
+      value: badge,
+      forButton: true,
+      placement: "",
+    };
+  }
+};

package/src/utils/getIconProps.ts

@@ -0,0 +1,35 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2026 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { isValidElement } from "react";
+import { IconProps, Props } from "../components/icon/Icon";
+
+export const getIconProps = (props: IconProps): Props => {
+  if (typeof props === "string") {
+    return { icon: props };
+  }
+  if (isValidElement(props)) {
+    return { icon: props };
+  }
+  return props as unknown as Props;
+};

package/src/utils/getTooltipProps.ts

@@ -0,0 +1,38 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2026 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { isObject, isString } from "@react-fabric/utilities";
+import { isValidElement } from "react";
+import { TooltipType } from "../types";
+
+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);
+  }
+};

package/src/utils/index.ts

@@ -25,5 +25,8 @@
 
 export * from "./calculateDimensions";
 export * from "./cloneElement";
+export * from "./getBadgeProps";
 export * from "./getColor";
+export * from "./getIconProps";
+export * from "./getTooltipProps";
 export * from "./nodeCheck";