@trackunit/react-components 0.1.201 → 0.1.205

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([
@@ -1221,7 +1231,6 @@ const usePopoverContext = () => {
  *
  * To render the content of the popover, use the `<PopoverContent />` component.
  *
- 
  * @param {PopoverProps} props The props for the popover
  * @returns {JSX.Element} A Popover Context Provider containing the children
  */
@@ -1414,7 +1423,6 @@ var WorkerWithSign = "8df3d27593b5fba4.svg";
  * Component representing an empty state.
  * Use this component when there is no data to display or when an error occurs.
  *
- 
  * @param {EmptyStateProps} props props
  * @returns {JSX.Element} component
  * @example

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([
@@ -1192,7 +1202,6 @@ const usePopoverContext = () => {
  *
  * To render the content of the popover, use the `<PopoverContent />` component.
  *
- 
  * @param {PopoverProps} props The props for the popover
  * @returns {JSX.Element} A Popover Context Provider containing the children
  */
@@ -1385,7 +1394,6 @@ var WorkerWithSign = "8df3d27593b5fba4.svg";
  * Component representing an empty state.
  * Use this component when there is no data to display or when an error occurs.
  *
- 
  * @param {EmptyStateProps} props props
  * @returns {JSX.Element} component
  * @example

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.201",
+  "version": "0.1.205",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -11,15 +11,15 @@
     "react": "^18.2.0",
     "@trackunit/css-class-variance-utilities": "*",
     "react-use": "^17.4.0",
-    "react-day-picker": "^8.7.1",
-    "date-fns": "^2.29.3",
-    "@floating-ui/react": "^0.25.4",
+    "react-day-picker": "^8.9.1",
+    "date-fns": "^2.30.0",
+    "@floating-ui/react": "^0.26.2",
     "@trackunit/ui-icons": "*",
     "@trackunit/shared-utils": "*",
     "react-useportal": "1.0.18",
-    "react-router-dom": "6.11.2",
+    "react-router-dom": "6.18.0",
     "react-helmet-async": "^1.3.0",
-    "zod": "3.22.3",
+    "zod": "3.22.4",
     "lodash": "4.17.21",
     "jest-fetch-mock": "^3.0.3",
     "@testing-library/react": "14.0.0"

package/src/components/EmptyState/EmptyState.d.ts

@@ -14,7 +14,6 @@ export interface EmptyStateProps extends CommonProps {
  * Component representing an empty state.
  * Use this component when there is no data to display or when an error occurs.
  *
- 
  * @param {EmptyStateProps} props props
  * @returns {JSX.Element} component
  * @example

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

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

@@ -1,5 +1,5 @@
 export declare const cvaIcon: (props?: ({
-    color?: "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "moving" | "active" | "stopped" | "unknown" | "default" | "black" | "white" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status" | null | undefined;
+    color?: "default" | "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "moving" | "active" | "stopped" | "unknown" | "black" | "white" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status" | null | undefined;
     size?: "small" | "medium" | "large" | "font" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaIconComponent: (props?: ({

package/src/components/Menu/MenuItem/MenuItem.d.ts

@@ -33,20 +33,20 @@ export interface MenuItemProps extends CommonProps {
      * An boolean flag to turn on/off selected state
      * This is typically used highlight that item is selected
      *
-     * @memberof IMenuItemProps
+     * @memberof MenuItemProps
      */
     selected?: boolean;
     /**
      * OnClick event handler it is thrown on root element of the component tree
      *
-     * @memberof IMenuItemProps
+     * @memberof MenuItemProps
      */
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     /**
      * An boolean flag to turn on/off focused state
      * This is typically used for keyboard navigation
      *
-     * @memberof IMenuItemProps
+     * @memberof MenuItemProps
      */
     focused?: boolean;
     /**

package/src/components/Popover/Popover.d.ts

@@ -47,7 +47,7 @@ export declare const usePopoverContext: () => {
         update: () => void;
         floatingStyles: import("react").CSSProperties;
         open: boolean;
-        onOpenChange: (open: boolean, event?: Event | undefined) => void;
+        onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
         events: import("@floating-ui/react").FloatingEvents;
         dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
         nodeId: string | undefined;
@@ -68,7 +68,6 @@ export declare const usePopoverContext: () => {
  *
  * To render the content of the popover, use the `<PopoverContent />` component.
  *
- 
  * @param {PopoverProps} props The props for the popover
  * @returns {JSX.Element} A Popover Context Provider containing the children
  */

package/src/components/Popover/usePopover.d.ts

@@ -48,7 +48,7 @@ export declare const usePopover: ({ initialOpen, placement, isModal, isOpen: con
         update: () => void;
         floatingStyles: import("react").CSSProperties;
         open: boolean;
-        onOpenChange: (open: boolean, event?: Event | undefined) => void;
+        onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
         events: import("@floating-ui/react").FloatingEvents;
         dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
         nodeId: string | undefined;

package/src/components/Tag/Tag.variants.d.ts

@@ -1,6 +1,6 @@
 export declare const cvaTag: (props?: ({
     size?: "small" | "medium" | null | undefined;
-    layout?: "withIcon" | "default" | null | undefined;
+    layout?: "default" | "withIcon" | null | undefined;
     color?: "primary" | "secondary" | "accent" | "neutral" | "black" | "white" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "stopped" | "idle" | "unknown" | "moving" | "active" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaTagIconContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;