@trackunit/react-components 0.1.202 → 0.1.206

package/index.cjs.js

@@ -195,6 +195,10 @@ cssClassVarianceUtilities.cvaMerge([
 
 const iconPalette = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, uiDesignTokens.intentPalette), uiDesignTokens.generalPalette), uiDesignTokens.criticalityPalette), uiDesignTokens.activityPalette), uiDesignTokens.utilizationPalette), uiDesignTokens.sitesPalette), uiDesignTokens.rentalStatusPalette);
 const iconColorNames = Object.keys(iconPalette).map(key => key.toLowerCase()); // This users the object in the Object.keys() to infer the type of the keys.
+const isSafari = () => {
+    const ua = navigator.userAgent.toLowerCase();
+    return ua.includes("safari") && !ua.includes("chrome");
+};
 /**
  * - The Icon component is used to display an Icon.
  * - Icons are semantic vector graphics that adds character and improves the visual appeal of elements when combined with.
@@ -204,16 +208,22 @@ const iconColorNames = Object.keys(iconPalette).map(key => key.toLowerCase()); /
  * @returns {JSX.Element} Icon component
  */
 const Icon = ({ name, size = "large", className, dataTestId, color, onClick, fillColor, type, style, forwardedRef, }) => {
-    const correctIconType = React__namespace.useMemo(() => (type ? type : size === "large" ? "outline" : "solid"), [type, size]);
+    const useTagRef = React.useRef(null);
+    const correctIconType = React.useMemo(() => (type ? type : size === "large" ? "outline" : "solid"), [type, size]);
     const iconName = uiIcons.iconNames[name];
+    const href = React.useMemo(() => ({
+        solid: `${IconSpriteSolid__default["default"]}#${iconName}`,
+        outline: `${IconSpriteOutline__default["default"]}#${iconName}`,
+    }), [iconName]);
+    React.useEffect(() => {
+        if (isSafari() && useTagRef.current) {
+            useTagRef.current.setAttribute("href", href[correctIconType]);
+        }
+    }, [correctIconType, href]);
     if (!iconName) {
         return null;
     }
-    const href = {
-        solid: `${IconSpriteSolid__default["default"]}#${iconName}`,
-        outline: `${IconSpriteOutline__default["default"]}#${iconName}`,
-    };
-    return (jsxRuntime.jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style), children: jsxRuntime.jsx("use", { href: href[correctIconType] }) }) }));
+    return (jsxRuntime.jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style), children: jsxRuntime.jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
 };
 
 const cvaTag = cssClassVarianceUtilities.cvaMerge([

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useState, useMemo, createContext, useContext, forwardRef, isValidElement, cloneElement, useCallback, useEffect, memo, Children, useRef, useReducer } from 'react';
+import React__default, { useRef, useMemo, useEffect, useState, createContext, useContext, forwardRef, isValidElement, cloneElement, useCallback, memo, Children, useReducer } from 'react';
 import { rentalStatusPalette, intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, color } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
 import IconSpriteOutline from '@trackunit/ui-icons/icons-sprite-outline.svg';
@@ -166,6 +166,10 @@ cvaMerge([
 
 const iconPalette = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, intentPalette), generalPalette), criticalityPalette), activityPalette), utilizationPalette), sitesPalette), rentalStatusPalette);
 const iconColorNames = Object.keys(iconPalette).map(key => key.toLowerCase()); // This users the object in the Object.keys() to infer the type of the keys.
+const isSafari = () => {
+    const ua = navigator.userAgent.toLowerCase();
+    return ua.includes("safari") && !ua.includes("chrome");
+};
 /**
  * - The Icon component is used to display an Icon.
  * - Icons are semantic vector graphics that adds character and improves the visual appeal of elements when combined with.
@@ -175,16 +179,22 @@ const iconColorNames = Object.keys(iconPalette).map(key => key.toLowerCase()); /
  * @returns {JSX.Element} Icon component
  */
 const Icon = ({ name, size = "large", className, dataTestId, color, onClick, fillColor, type, style, forwardedRef, }) => {
-    const correctIconType = React.useMemo(() => (type ? type : size === "large" ? "outline" : "solid"), [type, size]);
+    const useTagRef = useRef(null);
+    const correctIconType = useMemo(() => (type ? type : size === "large" ? "outline" : "solid"), [type, size]);
     const iconName = iconNames[name];
+    const href = useMemo(() => ({
+        solid: `${IconSpriteSolid}#${iconName}`,
+        outline: `${IconSpriteOutline}#${iconName}`,
+    }), [iconName]);
+    useEffect(() => {
+        if (isSafari() && useTagRef.current) {
+            useTagRef.current.setAttribute("href", href[correctIconType]);
+        }
+    }, [correctIconType, href]);
     if (!iconName) {
         return null;
     }
-    const href = {
-        solid: `${IconSpriteSolid}#${iconName}`,
-        outline: `${IconSpriteOutline}#${iconName}`,
-    };
-    return (jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsx("svg", { viewBox: "0 0 24 24", "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style), children: jsx("use", { href: href[correctIconType] }) }) }));
+    return (jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsx("svg", { viewBox: "0 0 24 24", "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style), children: jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
 };
 
 const cvaTag = cvaMerge([

package/package.json

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

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

@@ -1,6 +1,6 @@
+/// <reference types="react" />
 import { ActivityColors, CriticalityColors, GeneralColors, IntentColors, RentalStatusColors, SitesColors, UtilizationColors } from "@trackunit/ui-design-tokens";
 import { IconName } from "@trackunit/ui-icons";
-import * as React from "react";
 import { CommonProps, Size } from "../../common/CommonProps";
 export type IconColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors | UtilizationColors | SitesColors | RentalStatusColors;
 export declare const iconPalette: {
@@ -190,12 +190,7 @@ export declare const iconPalette: {
         readonly 300: "212 212 212";
         readonly 400: "163 163 163";
         readonly 500: "115 115 115";
-        readonly 600: "82 82 82"; /**
-         * The size of the icon.
-         * Small = 16x16px, medium = 20x20px, Large = 24x24px.
-         * Default value is Large.
-         * If a custom size is needed, set it in the className.
-         */
+        readonly 600: "82 82 82";
         readonly 700: "64 64 64";
         readonly 800: "38 38 38";
         readonly 900: "23 23 23";
@@ -214,7 +209,14 @@ export declare const iconPalette: {
         readonly 400: "96 165 250";
         readonly 500: "59 130 246";
         readonly 600: "37 99 235";
-        readonly 700: "29 78 216";
+        readonly 700: "29 78 216"; /**
+         * - The Icon component is used to display an Icon.
+         * - Icons are semantic vector graphics that adds character and improves the visual appeal of elements when combined with.
+         * - All the [HeroIcons](https://heroicons.dev/) as well as custom Trackunit icons are available.
+         
+         * @param {IconProps} props - The props for the Icon component
+         * @returns {JSX.Element} Icon component
+         */
         readonly 800: "30 64 175";
         readonly 900: "30 58 138";
     };