@trackunit/react-components 0.1.210 → 0.1.215

package/index.cjs.js

@@ -6,6 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var uiDesignTokens = require('@trackunit/ui-design-tokens');
 var uiIcons = require('@trackunit/ui-icons');
+var IconSpriteMini = require('@trackunit/ui-icons/icons-sprite-mini.svg');
 var IconSpriteOutline = require('@trackunit/ui-icons/icons-sprite-outline.svg');
 var IconSpriteSolid = require('@trackunit/ui-icons/icons-sprite-solid.svg');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
@@ -42,6 +43,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var IconSpriteMini__default = /*#__PURE__*/_interopDefaultLegacy(IconSpriteMini);
 var IconSpriteOutline__default = /*#__PURE__*/_interopDefaultLegacy(IconSpriteOutline);
 var IconSpriteSolid__default = /*#__PURE__*/_interopDefaultLegacy(IconSpriteSolid);
 var usePortal__default = /*#__PURE__*/_interopDefaultLegacy(usePortal);
@@ -208,13 +210,22 @@ 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, fillColor, type, style, forwardedRef, }) => {
+const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, forwardedRef, }) => {
     const useTagRef = React.useRef(null);
-    const correctIconType = React.useMemo(() => (type ? type : size === "large" ? "outline" : "solid"), [type, size]);
+    const correctIconType = React.useMemo(() => {
+        if (size === "small" || size === "medium") {
+            return "mini";
+        }
+        if (type === "solid") {
+            return "solid";
+        }
+        return "outline";
+    }, [type, size]);
     const iconName = uiIcons.iconNames[name];
     const href = React.useMemo(() => ({
         solid: `${IconSpriteSolid__default["default"]}#${iconName}`,
         outline: `${IconSpriteOutline__default["default"]}#${iconName}`,
+        mini: `${IconSpriteMini__default["default"]}#${iconName}`,
     }), [iconName]);
     React.useEffect(() => {
         if (isSafari() && useTagRef.current) {
@@ -224,7 +235,7 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, fil
     if (!iconName) {
         return null;
     }
-    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 }) }) }));
+    return (jsxRuntime.jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsxRuntime.jsx("svg", { viewBox: correctIconType === "mini" ? "0 0 20 20" : "0 0 24 24", "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, style: style, children: jsxRuntime.jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
 };
 
 const cvaTag = cssClassVarianceUtilities.cvaMerge([
@@ -665,7 +676,7 @@ const IconButton = React__namespace.forwardRef((_a, ref) => {
  * @returns {JSX.Element} StarButton component
  */
 const StarButton = ({ starred, onClick }) => {
-    return (jsxRuntime.jsx("div", { onClick: onClick, "data-test-id": "starred-filter", children: jsxRuntime.jsx(Icon, { name: "Star", color: starred ? "primary" : "neutral", type: starred ? "solid" : "outline", size: "medium" }) }));
+    return (jsxRuntime.jsx("div", { onClick: onClick, "data-test-id": "starred-filter", children: jsxRuntime.jsx(Icon, { name: "Star", color: starred ? "primary" : "neutral", size: "medium" }) }));
 };
 
 const cvaAlert = cssClassVarianceUtilities.cvaMerge(["flex", "relative", "p-4", "rounded"], {
@@ -1742,7 +1753,6 @@ const cvaMoreMenu = cssClassVarianceUtilities.cvaMerge(["p-4"]);
  */
 const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     size: "medium",
-    name: "EllipsisHorizontal",
 }, iconButtonProps = {
     size: "small",
     circular: true,
@@ -1750,7 +1760,7 @@ const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     color: "tertiary",
 }, customButton, customPortalId, children, }) => {
     const actionMenuRef = React.useRef(null);
-    return (jsxRuntime.jsx("div", { ref: actionMenuRef, className: cvaMoreMenu({ className }), "data-testid": dataTestId, children: jsxRuntime.jsxs(Popover, Object.assign({}, popoverProps, { children: [jsxRuntime.jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : (jsxRuntime.jsx(IconButton, Object.assign({}, iconButtonProps, { icon: iconProps.name ? jsxRuntime.jsx(Icon, Object.assign({}, iconProps, { name: iconProps.name })) : null }))) }), jsxRuntime.jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] })) }));
+    return (jsxRuntime.jsx("div", { ref: actionMenuRef, className: cvaMoreMenu({ className }), "data-testid": dataTestId, children: jsxRuntime.jsxs(Popover, Object.assign({}, popoverProps, { children: [jsxRuntime.jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : (jsxRuntime.jsx(IconButton, Object.assign({}, iconButtonProps, { icon: iconProps.name ? jsxRuntime.jsx(Icon, Object.assign({ name: "EllipsisHorizontal" }, iconProps)) : null }))) }), jsxRuntime.jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] })) }));
 };
 
 const cvaModalContainer = cssClassVarianceUtilities.cvaMerge(["h-full", "w-full", "flex", "items-center"]);
@@ -1923,7 +1933,7 @@ const cvaPaginationText = cssClassVarianceUtilities.cvaMerge("whitespace-nowrap"
 /**
  * Pagination Description. It could be used when you need navigation for your paging feature.
  
- * @param {IPaginationProps} props - The props for the Pagination component
+ * @param {PaginationProps} props - The props for the Pagination component
  * @returns {JSX.Element} Pagination component
  */
 const Pagination = ({ previousPage, nextPage, canPreviousPage, canNextPage, pageCount, pageIndex, loading, className, dataTestId, getTranslatedCount, onPageChange, cursorBase, }) => {
@@ -2410,7 +2420,17 @@ const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors
     return (jsxRuntime.jsx("svg", { className: cvaValueBar({ size, className }), "data-testid": dataTestId, children: jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("rect", { className: cvaValueBarProgress({ fill: "background" }), width: `${barWidth}%`, rx: "5" }), jsxRuntime.jsx("rect", { className: cvaValueBarProgress(), width: `${score * barWidth}%`, fill: barFillColor, rx: "5" }), showValue && size === "large" && (jsxRuntime.jsxs("text", { className: cvaValueBarText({ size }), x: "12", y: "23", fill: valueColor !== null && valueColor !== void 0 ? valueColor : "white", children: [Number(value.toFixed(1)), unit || ""] })), showValue && size === "small" && (jsxRuntime.jsxs("text", { className: cvaValueBarText({ size }), x: `${barWidth + 2}%`, y: "11", fill: valueColor !== null && valueColor !== void 0 ? valueColor : uiDesignTokens.color("NEUTRAL", 400, "CSS"), children: [Number(value.toFixed(1)), unit || ""] }))] }) }));
 };
 
-const cvaWidgetBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["@container", "flex", "flex-grow", "overflow-auto", "w-full", "h-full", "place-items-center", "overflow-hidden"], {
+const cvaWidgetBodyDensityContainer = cssClassVarianceUtilities.cvaMerge([
+    "@container",
+    "flex",
+    "flex-grow",
+    "overflow-auto",
+    "w-full",
+    "h-full",
+    "place-items-center",
+    "bg-white",
+    "overflow-hidden",
+], {
     variants: {
         disableGap: {
             true: "gap-0",
@@ -2427,7 +2447,7 @@ const cvaWidgetBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["@cont
             compact: "gap-3 p-3",
             comfortable: "gap-4 p-4",
             spacious: "gap-4 p-6",
-            auto: "",
+            auto: "p-2",
         },
     },
     defaultVariants: {

package/index.esm.js

@@ -3,6 +3,7 @@ import * as React 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 IconSpriteMini from '@trackunit/ui-icons/icons-sprite-mini.svg';
 import IconSpriteOutline from '@trackunit/ui-icons/icons-sprite-outline.svg';
 import IconSpriteSolid from '@trackunit/ui-icons/icons-sprite-solid.svg';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
@@ -179,13 +180,22 @@ 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, fillColor, type, style, forwardedRef, }) => {
+const Icon = ({ name, size = "large", className, dataTestId, color, onClick, type, style, forwardedRef, }) => {
     const useTagRef = useRef(null);
-    const correctIconType = useMemo(() => (type ? type : size === "large" ? "outline" : "solid"), [type, size]);
+    const correctIconType = useMemo(() => {
+        if (size === "small" || size === "medium") {
+            return "mini";
+        }
+        if (type === "solid") {
+            return "solid";
+        }
+        return "outline";
+    }, [type, size]);
     const iconName = iconNames[name];
     const href = useMemo(() => ({
         solid: `${IconSpriteSolid}#${iconName}`,
         outline: `${IconSpriteOutline}#${iconName}`,
+        mini: `${IconSpriteMini}#${iconName}`,
     }), [iconName]);
     useEffect(() => {
         if (isSafari() && useTagRef.current) {
@@ -195,7 +205,7 @@ const Icon = ({ name, size = "large", className, dataTestId, color, onClick, fil
     if (!iconName) {
         return null;
     }
-    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 }) }) }));
+    return (jsx("span", { className: cvaIcon({ color, size, className }), onClick: onClick, "data-testid": dataTestId, ref: forwardedRef, children: jsx("svg", { viewBox: correctIconType === "mini" ? "0 0 20 20" : "0 0 24 24", "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, style: style, children: jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
 };
 
 const cvaTag = cvaMerge([
@@ -636,7 +646,7 @@ const IconButton = React.forwardRef((_a, ref) => {
  * @returns {JSX.Element} StarButton component
  */
 const StarButton = ({ starred, onClick }) => {
-    return (jsx("div", { onClick: onClick, "data-test-id": "starred-filter", children: jsx(Icon, { name: "Star", color: starred ? "primary" : "neutral", type: starred ? "solid" : "outline", size: "medium" }) }));
+    return (jsx("div", { onClick: onClick, "data-test-id": "starred-filter", children: jsx(Icon, { name: "Star", color: starred ? "primary" : "neutral", size: "medium" }) }));
 };
 
 const cvaAlert = cvaMerge(["flex", "relative", "p-4", "rounded"], {
@@ -1713,7 +1723,6 @@ const cvaMoreMenu = cvaMerge(["p-4"]);
  */
 const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     size: "medium",
-    name: "EllipsisHorizontal",
 }, iconButtonProps = {
     size: "small",
     circular: true,
@@ -1721,7 +1730,7 @@ const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     color: "tertiary",
 }, customButton, customPortalId, children, }) => {
     const actionMenuRef = useRef(null);
-    return (jsx("div", { ref: actionMenuRef, className: cvaMoreMenu({ className }), "data-testid": dataTestId, children: jsxs(Popover, Object.assign({}, popoverProps, { children: [jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : (jsx(IconButton, Object.assign({}, iconButtonProps, { icon: iconProps.name ? jsx(Icon, Object.assign({}, iconProps, { name: iconProps.name })) : null }))) }), jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] })) }));
+    return (jsx("div", { ref: actionMenuRef, className: cvaMoreMenu({ className }), "data-testid": dataTestId, children: jsxs(Popover, Object.assign({}, popoverProps, { children: [jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : (jsx(IconButton, Object.assign({}, iconButtonProps, { icon: iconProps.name ? jsx(Icon, Object.assign({ name: "EllipsisHorizontal" }, iconProps)) : null }))) }), jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] })) }));
 };
 
 const cvaModalContainer = cvaMerge(["h-full", "w-full", "flex", "items-center"]);
@@ -1894,7 +1903,7 @@ const cvaPaginationText = cvaMerge("whitespace-nowrap");
 /**
  * Pagination Description. It could be used when you need navigation for your paging feature.
  
- * @param {IPaginationProps} props - The props for the Pagination component
+ * @param {PaginationProps} props - The props for the Pagination component
  * @returns {JSX.Element} Pagination component
  */
 const Pagination = ({ previousPage, nextPage, canPreviousPage, canNextPage, pageCount, pageIndex, loading, className, dataTestId, getTranslatedCount, onPageChange, cursorBase, }) => {
@@ -2381,7 +2390,17 @@ const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors
     return (jsx("svg", { className: cvaValueBar({ size, className }), "data-testid": dataTestId, children: jsxs("g", { children: [jsx("rect", { className: cvaValueBarProgress({ fill: "background" }), width: `${barWidth}%`, rx: "5" }), jsx("rect", { className: cvaValueBarProgress(), width: `${score * barWidth}%`, fill: barFillColor, rx: "5" }), showValue && size === "large" && (jsxs("text", { className: cvaValueBarText({ size }), x: "12", y: "23", fill: valueColor !== null && valueColor !== void 0 ? valueColor : "white", children: [Number(value.toFixed(1)), unit || ""] })), showValue && size === "small" && (jsxs("text", { className: cvaValueBarText({ size }), x: `${barWidth + 2}%`, y: "11", fill: valueColor !== null && valueColor !== void 0 ? valueColor : color("NEUTRAL", 400, "CSS"), children: [Number(value.toFixed(1)), unit || ""] }))] }) }));
 };
 
-const cvaWidgetBodyDensityContainer = cvaMerge(["@container", "flex", "flex-grow", "overflow-auto", "w-full", "h-full", "place-items-center", "overflow-hidden"], {
+const cvaWidgetBodyDensityContainer = cvaMerge([
+    "@container",
+    "flex",
+    "flex-grow",
+    "overflow-auto",
+    "w-full",
+    "h-full",
+    "place-items-center",
+    "bg-white",
+    "overflow-hidden",
+], {
     variants: {
         disableGap: {
             true: "gap-0",
@@ -2398,7 +2417,7 @@ const cvaWidgetBodyDensityContainer = cvaMerge(["@container", "flex", "flex-grow
             compact: "gap-3 p-3",
             comfortable: "gap-4 p-4",
             spacious: "gap-4 p-6",
-            auto: "",
+            auto: "p-2",
         },
     },
     defaultVariants: {

package/package.json

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

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

@@ -209,14 +209,7 @@ export declare const iconPalette: {
         readonly 400: "96 165 250";
         readonly 500: "59 130 246";
         readonly 600: "37 99 235";
-        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 700: "29 78 216";
         readonly 800: "30 64 175";
         readonly 900: "30 58 138";
     };
@@ -258,7 +251,24 @@ export declare const iconPalette: {
     };
 };
 export declare const iconColorNames: ("info" | "success" | "warning" | "danger" | "primary" | "secondary" | "accent" | "neutral" | "black" | "white" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "unknown" | "moving" | "active" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status")[];
-export interface IconProps extends CommonProps {
+type IconPropsFont = {
+    size?: "font";
+    type?: "solid" | "outline";
+};
+type IconPropsSmall = {
+    size?: "small";
+    type?: "solid";
+};
+type IconPropsMedium = {
+    size?: "medium";
+    type?: "solid";
+};
+type IconPropsLarge = {
+    size?: "large";
+    type?: "solid" | "outline";
+};
+type DiscriminatedIconProps = IconPropsFont | IconPropsSmall | IconPropsMedium | IconPropsLarge;
+export type IconProps = DiscriminatedIconProps & CommonProps & {
     /**
      * The name of the icon to be rendered.
      * HeroIconName and TrackunitIconName are supported.
@@ -282,12 +292,13 @@ export interface IconProps extends CommonProps {
      * Default value depends on the Size prop, small == solid, medium == solid, large == outline.
      * Trackunit icons might not support both outline and Solid.
      */
-    type?: "solid" | "outline";
+    type?: "solid" | "outline" | "mini";
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     /**
-     * @deprecated
+     * Ref forwarded to the span element
+     *
+     * @memberof IconProps
      */
-    fillColor?: string;
     forwardedRef?: React.RefObject<HTMLSpanElement>;
     /**
      * Custom styles object used to override existing styles or add some extra styling
@@ -295,7 +306,7 @@ export interface IconProps extends CommonProps {
      * @memberof IconProps
      */
     style?: Record<string, string>;
-}
+};
 /**
  * - 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.
@@ -304,4 +315,5 @@ export interface IconProps extends 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, fillColor, type, style, forwardedRef, }: IconProps) => JSX.Element | null;
+export declare const Icon: ({ name, size, className, dataTestId, color, onClick, type, style, forwardedRef, }: IconProps) => JSX.Element | null;
+export {};

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

@@ -1,10 +1,11 @@
+import { MakePropertyOptional, MappedOmit } from "@trackunit/shared-utils";
 import { ReactNode } from "react";
 import { CommonProps } from "../../../common/CommonProps";
 import { IconProps } from "../../Icon/Icon";
 import { PopoverContentChildren, PopoverProps } from "../../Popover";
 import { IconButtonProps } from "../../buttons";
 export type MenuPlacement = "above" | "below";
-type FilteredIconProps = Omit<IconProps, "onClick" | "name"> & Pick<Partial<IconProps>, "name">;
+type FilteredIconProps = MakePropertyOptional<MappedOmit<IconProps, "onClick">, "name">;
 type FilteredIconButtonProps = Omit<IconButtonProps, "icon" | "onClick">;
 export interface MoreMenuProps extends CommonProps {
     children: PopoverContentChildren;

package/src/components/Pagination/Pagination.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export interface IPaginationProps {
+export interface PaginationProps {
     /**
      * A go to previous page handler
      */
@@ -56,7 +56,7 @@ export interface IPaginationProps {
 /**
  * Pagination Description. It could be used when you need navigation for your paging feature.
  
- * @param {IPaginationProps} props - The props for the Pagination component
+ * @param {PaginationProps} props - The props for the Pagination component
  * @returns {JSX.Element} Pagination component
  */
-export declare const Pagination: ({ previousPage, nextPage, canPreviousPage, canNextPage, pageCount, pageIndex, loading, className, dataTestId, getTranslatedCount, onPageChange, cursorBase, }: IPaginationProps) => JSX.Element;
+export declare const Pagination: ({ previousPage, nextPage, canPreviousPage, canNextPage, pageCount, pageIndex, loading, className, dataTestId, getTranslatedCount, onPageChange, cursorBase, }: PaginationProps) => JSX.Element;

package/src/components/Tip/Tip.d.ts

@@ -1,3 +1,4 @@
+import { MakePropertyOptional, MappedOmit } from "@trackunit/shared-utils";
 import * as React from "react";
 import { CommonProps } from "../../common";
 import { IconProps } from "../Icon/Icon";
@@ -10,7 +11,7 @@ export interface TipProps extends CommonProps, Pick<TooltipProps, "placement" |
     /**
      * The props for setting the icon on this tip.
      */
-    iconProps?: Partial<IconProps>;
+    iconProps?: MakePropertyOptional<MappedOmit<IconProps, "size" | "type">, "name">;
     /**
      * Shows an icon with link as the href attribute inside the tip.
      */