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

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";