@trackunit/react-components 0.1.151-alpha-b0920fa0dd.0 → 0.1.151

package/index.cjs.js

@@ -6,9 +6,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var uiIcons = require('@trackunit/ui-icons');
+var uiDesignTokens = require('@trackunit/ui-design-tokens');
 var ReactDOM = require('react-dom');
 var reactRouterDom = require('react-router-dom');
-var uiDesignTokens = require('@trackunit/ui-design-tokens');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -387,6 +387,32 @@ const cvaIcon = cssClassVarianceUtilities.cvaMerge(["aspect-square", "inline-gri
             default: "text-current",
             black: "text-black",
             white: "text-white",
+            unused: {
+                300: "text-red-300",
+                400: "text-red-400",
+            },
+            utilized: { 400: "text-blue-400", 600: "text-blue-600" },
+            heavily_utilized: { 300: "text-amber-300", 500: "text-amber-500" },
+            unknown_utilization: { 300: "text-neutral-300", 600: "text-neutral-600" },
+            site: {
+                area: "text-blue-600",
+                classic_poi: "text-neutral-500",
+                classic_zone: "text-neutral-500",
+                depot: "text-emerald-500",
+                work_place: "text-violet-600",
+                construction_site: "text-amber-500",
+                unknown: "text-neutral-500",
+            },
+            on_rent: { 100: uiDesignTokens.rentalStatusPalette.ON_RENT[100], 600: uiDesignTokens.rentalStatusPalette.ON_RENT[600] },
+            returned: { 100: uiDesignTokens.rentalStatusPalette.RETURNED[100], 600: uiDesignTokens.rentalStatusPalette.RETURNED[600] },
+            available: { 100: uiDesignTokens.rentalStatusPalette.AVAILABLE[100], 600: uiDesignTokens.rentalStatusPalette.AVAILABLE[600] },
+            pickup_ready: { 100: uiDesignTokens.rentalStatusPalette.PICKUP_READY[100], 600: uiDesignTokens.rentalStatusPalette.PICKUP_READY[600] },
+            transfer: { 100: uiDesignTokens.rentalStatusPalette.TRANSFER[100], 600: uiDesignTokens.rentalStatusPalette.TRANSFER[600] },
+            in_repair: { 100: uiDesignTokens.rentalStatusPalette.IN_REPAIR[100], 600: uiDesignTokens.rentalStatusPalette.IN_REPAIR[600] },
+            other_rental_status: {
+                100: uiDesignTokens.rentalStatusPalette.OTHER_RENTAL_STATUS[100],
+                600: uiDesignTokens.rentalStatusPalette.OTHER_RENTAL_STATUS[100],
+            },
         },
         size: {
             small: "w-4",
@@ -651,6 +677,7 @@ const cvaBadge = cssClassVarianceUtilities.cvaMerge([
         color: {
             primary: "bg-primary-600 text-white",
             danger: "bg-danger-700 text-white",
+            warning: "bg-warning-700 text-white",
         },
     },
     defaultVariants: {
@@ -18927,14 +18954,16 @@ const EmptyState = ({ title, description, altText, image, customImageSrc, action
     return (jsxRuntime.jsx("div", { className: `${cvaContainerStyles()} ${className}`, "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "empty-state", children: loading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spinner, { dataTestId: "spinner", size: "large", centering: "centered" }), jsxRuntime.jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: cvaImgStyles(), width: 200, height: 200, src: customImageSrc ? customImageSrc : imageSource, alt: altText }), jsxRuntime.jsxs("div", { className: cvaTextStyles(), children: [jsxRuntime.jsx(Heading, { variant: "secondary", children: title }), jsxRuntime.jsx(Text, { align: "center", children: description })] }), action] })) }));
 };
 
+const cvaExternalLink = cssClassVarianceUtilities.cvaMerge(["underline", "text-primary-600", "hover:text-primary-500"]);
+
 /**
  *  The external link component is used to link to an external page outside the Trackunit Manager.
  *
  * @param {ExternalLinkProps} props - The props for the external link component
  * @returns {JSX.Element} External Link component
  */
-const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className, children = href, title = href, dataTestId, }) => {
-    return (jsxRuntime.jsx("a", { "data-testid": dataTestId, className: className, title: title, href: href, rel: rel, target: target, children: children }));
+const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className, children = href, title = href, dataTestId, onClick, }) => {
+    return (jsxRuntime.jsx("a", { onClick: onClick, "data-testid": dataTestId, className: cvaExternalLink({ className }), title: title, href: href, rel: rel, target: target, children: children }));
 };
 
 const cvaTooltipFlexContainer = cssClassVarianceUtilities.cvaMerge("inline-flex");
@@ -19155,7 +19184,7 @@ const MenuItem = ({ className, dataTestId, label, children, selected, focused, p
 const cvaMenuList = cssClassVarianceUtilities.cvaMerge(["shadow-md", "rounded-lg", "z-20", "bg-white", "p-1", "border", "border-slate-300", "gap-1", "grid"], {
     variants: {
         stickyHeader: {
-            true: "grid grid-rows-min-fr !p-0",
+            true: "grid grid-rows-min-fr !p-0 overflow-y-hidden",
             false: "",
         },
     },

package/index.esm.js

@@ -3,10 +3,10 @@ import * as React from 'react';
 import React__default, { useRef, useCallback, useEffect, useState, useLayoutEffect, useMemo, createContext, forwardRef, useContext, isValidElement, cloneElement, memo, Children, useReducer, Component } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
+import { rentalStatusPalette, color } from '@trackunit/ui-design-tokens';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default, { createPortal } from 'react-dom';
 import { UNSAFE_NavigationContext } from 'react-router-dom';
-import { color } from '@trackunit/ui-design-tokens';
 
 const docs = {
     source: {
@@ -360,6 +360,32 @@ const cvaIcon = cvaMerge(["aspect-square", "inline-grid", "relative"], {
             default: "text-current",
             black: "text-black",
             white: "text-white",
+            unused: {
+                300: "text-red-300",
+                400: "text-red-400",
+            },
+            utilized: { 400: "text-blue-400", 600: "text-blue-600" },
+            heavily_utilized: { 300: "text-amber-300", 500: "text-amber-500" },
+            unknown_utilization: { 300: "text-neutral-300", 600: "text-neutral-600" },
+            site: {
+                area: "text-blue-600",
+                classic_poi: "text-neutral-500",
+                classic_zone: "text-neutral-500",
+                depot: "text-emerald-500",
+                work_place: "text-violet-600",
+                construction_site: "text-amber-500",
+                unknown: "text-neutral-500",
+            },
+            on_rent: { 100: rentalStatusPalette.ON_RENT[100], 600: rentalStatusPalette.ON_RENT[600] },
+            returned: { 100: rentalStatusPalette.RETURNED[100], 600: rentalStatusPalette.RETURNED[600] },
+            available: { 100: rentalStatusPalette.AVAILABLE[100], 600: rentalStatusPalette.AVAILABLE[600] },
+            pickup_ready: { 100: rentalStatusPalette.PICKUP_READY[100], 600: rentalStatusPalette.PICKUP_READY[600] },
+            transfer: { 100: rentalStatusPalette.TRANSFER[100], 600: rentalStatusPalette.TRANSFER[600] },
+            in_repair: { 100: rentalStatusPalette.IN_REPAIR[100], 600: rentalStatusPalette.IN_REPAIR[600] },
+            other_rental_status: {
+                100: rentalStatusPalette.OTHER_RENTAL_STATUS[100],
+                600: rentalStatusPalette.OTHER_RENTAL_STATUS[100],
+            },
         },
         size: {
             small: "w-4",
@@ -624,6 +650,7 @@ const cvaBadge = cvaMerge([
         color: {
             primary: "bg-primary-600 text-white",
             danger: "bg-danger-700 text-white",
+            warning: "bg-warning-700 text-white",
         },
     },
     defaultVariants: {
@@ -18900,14 +18927,16 @@ const EmptyState = ({ title, description, altText, image, customImageSrc, action
     return (jsx("div", { className: `${cvaContainerStyles()} ${className}`, "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "empty-state", children: loading ? (jsxs(Fragment, { children: [jsx(Spinner, { dataTestId: "spinner", size: "large", centering: "centered" }), jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxs(Fragment, { children: [jsx("img", { className: cvaImgStyles(), width: 200, height: 200, src: customImageSrc ? customImageSrc : imageSource, alt: altText }), jsxs("div", { className: cvaTextStyles(), children: [jsx(Heading, { variant: "secondary", children: title }), jsx(Text, { align: "center", children: description })] }), action] })) }));
 };
 
+const cvaExternalLink = cvaMerge(["underline", "text-primary-600", "hover:text-primary-500"]);
+
 /**
  *  The external link component is used to link to an external page outside the Trackunit Manager.
  *
  * @param {ExternalLinkProps} props - The props for the external link component
  * @returns {JSX.Element} External Link component
  */
-const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className, children = href, title = href, dataTestId, }) => {
-    return (jsx("a", { "data-testid": dataTestId, className: className, title: title, href: href, rel: rel, target: target, children: children }));
+const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className, children = href, title = href, dataTestId, onClick, }) => {
+    return (jsx("a", { onClick: onClick, "data-testid": dataTestId, className: cvaExternalLink({ className }), title: title, href: href, rel: rel, target: target, children: children }));
 };
 
 const cvaTooltipFlexContainer = cvaMerge("inline-flex");
@@ -19128,7 +19157,7 @@ const MenuItem = ({ className, dataTestId, label, children, selected, focused, p
 const cvaMenuList = cvaMerge(["shadow-md", "rounded-lg", "z-20", "bg-white", "p-1", "border", "border-slate-300", "gap-1", "grid"], {
     variants: {
         stickyHeader: {
-            true: "grid grid-rows-min-fr !p-0",
+            true: "grid grid-rows-min-fr !p-0 overflow-y-hidden",
             false: "",
         },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.151-alpha-b0920fa0dd.0",
+  "version": "0.1.151",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,10 +8,10 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.22.2",
-    "@trackunit/css-class-variance-utilities": "0.0.13-alpha-b0920fa0dd.0",
-    "@trackunit/css-core": "0.0.94-alpha-b0920fa0dd.0",
-    "@trackunit/ui-design-tokens": "0.0.76-alpha-b0920fa0dd.0",
-    "@trackunit/ui-icons": "0.0.74-alpha-b0920fa0dd.0",
+    "@trackunit/css-class-variance-utilities": "0.0.12",
+    "@trackunit/css-core": "0.0.93",
+    "@trackunit/ui-design-tokens": "0.0.75",
+    "@trackunit/ui-icons": "0.0.73",
     "date-fns": "2.29.3",
     "lodash": "4.17.21",
     "react": "18.2.0",

package/src/components/Badge/Badge.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ThemeColors } from "@trackunit/ui-design-tokens";
 import { CommonProps } from "../../common/CommonProps";
-type BadgeColors = Extract<ThemeColors, "primary" | "danger">;
+type BadgeColors = Extract<ThemeColors, "primary" | "danger" | "warning">;
 interface BaseBadgeProps extends CommonProps {
     /**
      * The color of the badge.
@@ -26,6 +26,10 @@ interface BaseBadgeProps extends CommonProps {
      * If enabled the badge is shown even if the count is 0.
      */
     hideZero?: boolean;
+    /**
+     * Child nodes.
+     */
+    children?: React.ReactNode;
 }
 export type BadgeProps = BaseBadgeProps;
 /**

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

@@ -1,3 +1,3 @@
 export declare const cvaBadge: (props?: ({
-    color?: "primary" | "danger" | null | undefined;
+    color?: "primary" | "danger" | "warning" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/ExternalLink/ExternalLink.d.ts

@@ -21,6 +21,7 @@ export interface ExternalLinkProps extends CommonProps {
      * Used to specify the relationship between the link and the current document. Defaults to "noreferrer".
      */
     rel?: string;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
 }
 /**
  *  The external link component is used to link to an external page outside the Trackunit Manager.
@@ -28,4 +29,4 @@ export interface ExternalLinkProps extends CommonProps {
  * @param {ExternalLinkProps} props - The props for the external link component
  * @returns {JSX.Element} External Link component
  */
-export declare const ExternalLink: ({ rel, target, href, className, children, title, dataTestId, }: ExternalLinkProps) => JSX.Element;
+export declare const ExternalLink: ({ rel, target, href, className, children, title, dataTestId, onClick, }: ExternalLinkProps) => JSX.Element;

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

@@ -0,0 +1 @@
+export declare const cvaExternalLink: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

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

@@ -1,8 +1,8 @@
-import { ActivityColors, CriticalityColors, GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
+import { ActivityColors, CriticalityColors, GeneralColors, IntentColors, RentalStatusColors, SitesColors, UtilizationColors } from "@trackunit/ui-design-tokens";
 import { HeroIconName, TrackunitIconName } from "@trackunit/ui-icons";
 import * as React from "react";
 import { CommonProps, Size } from "../../common/CommonProps";
-export type IconColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors;
+export type IconColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors | UtilizationColors | SitesColors | RentalStatusColors;
 export interface IconProps extends CommonProps {
     /**
      * The name of the icon to be rendered.

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" | null | undefined;
+    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;
     size?: "small" | "medium" | "large" | "font" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaIconComponent: (props?: ({