@trackunit/react-components 0.1.256 → 0.1.257

package/index.cjs.js

@@ -176,7 +176,7 @@ const isSafari = () => {
  * @param {IconProps} props - The props for the Icon component
  * @returns {JSX.Element} Icon component
  */
-const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, forwardedRef, }) => {
+const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, forwardedRef, title, }) => {
     const useTagRef = React.useRef(null);
     const correctIconType = React.useMemo(() => {
         if (size === "small" || size === "medium") {
@@ -198,7 +198,7 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, typ
             useTagRef.current.setAttribute("href", href[correctIconType]);
         }
     }, [correctIconType, href]);
-    return (jsxRuntime.jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsxRuntime.jsxs("svg", { viewBox: correctIconType === "mini" ? "0 0 20 20" : "0 0 24 24", "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, style: style, role: "img", children: [jsxRuntime.jsx("title", { children: iconName }), jsxRuntime.jsx("use", { href: href[correctIconType], ref: useTagRef })] }) }));
+    return (jsxRuntime.jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsxRuntime.jsxs("svg", { viewBox: correctIconType === "mini" ? "0 0 20 20" : "0 0 24 24", "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, style: style, role: "img", children: [jsxRuntime.jsx("title", { children: title ? title : iconName }), jsxRuntime.jsx("use", { href: href[correctIconType], ref: useTagRef })] }) }));
 };
 
 const cvaTag = cssClassVarianceUtilities.cvaMerge([

package/index.esm.js

@@ -145,7 +145,7 @@ const isSafari = () => {
  * @param {IconProps} props - The props for the Icon component
  * @returns {JSX.Element} Icon component
  */
-const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, forwardedRef, }) => {
+const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, forwardedRef, title, }) => {
     const useTagRef = useRef(null);
     const correctIconType = useMemo(() => {
         if (size === "small" || size === "medium") {
@@ -167,7 +167,7 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, typ
             useTagRef.current.setAttribute("href", href[correctIconType]);
         }
     }, [correctIconType, href]);
-    return (jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsxs("svg", { viewBox: correctIconType === "mini" ? "0 0 20 20" : "0 0 24 24", "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, style: style, role: "img", children: [jsx("title", { children: iconName }), jsx("use", { href: href[correctIconType], ref: useTagRef })] }) }));
+    return (jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsxs("svg", { viewBox: correctIconType === "mini" ? "0 0 20 20" : "0 0 24 24", "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, style: style, role: "img", children: [jsx("title", { children: title ? title : iconName }), jsx("use", { href: href[correctIconType], ref: useTagRef })] }) }));
 };
 
 const cvaTag = cvaMerge([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.256",
+  "version": "0.1.257",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/Icon/Icon.d.ts

@@ -310,6 +310,12 @@ export type IconProps = DiscriminatedIconProps & CommonProps & {
      * @memberof IconProps
      */
     style?: CSSProperties;
+    /**
+     * The title (text) to show in the tooltip when hovering over an icon
+     * Default title is the name of the icon.
+     * If a custom title is needed, set it using this prop.
+     */
+    title?: string;
 };
 /**
  * - The Icon component is used to display an Icon.
@@ -319,5 +325,5 @@ export type IconProps = DiscriminatedIconProps & CommonProps & {
  * @param {IconProps} props - The props for the Icon component
  * @returns {JSX.Element} Icon component
  */
-export declare const Icon: ({ name, size, className, dataTestId, color, onClick, type, style, forwardedRef, }: IconProps) => JSX.Element;
+export declare const Icon: ({ name, size, className, dataTestId, color, onClick, type, style, forwardedRef, title, }: IconProps) => JSX.Element;
 export {};