@trackunit/react-components 0.1.296 → 0.1.298

package/index.cjs.js

@@ -268,13 +268,16 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([
             unknown: "bg-unknown-100 text-unknown-700",
             moving: "bg-neutral-100 text-neutral-700",
             active: "bg-neutral-100 text-neutral-700",
-            contractor: "bg-contractor-100 text-contractor-700",
-            dealer: "bg-dealer-100 text-dealer-700",
-            rental: "bg-rental-100 text-rental-700",
-            oem: "bg-oem-100 text-oem-700",
-            service: "bg-service-100 text-service-700",
-            distributor: "bg-distributor-100 text-distributor-700",
-            other_customer_type: "bg-other_customer_type-100 text-other_customer_type-700",
+            customer_type_contractor: "bg-customer_type_contractor-100 text-customer_type_contractor-700",
+            customer_type_dealer: "bg-customer_type_dealer-100 text-customer_type_dealer-700",
+            customer_type_rental: "bg-customer_type_rental-100 text-customer_type_rental-700",
+            customer_type_oem: "bg-customer_type_oem-100 text-customer_type_oem-700",
+            customer_type_service: "bg-customer_type_service-100 text-customer_type_service-700",
+            customer_type_distributor: "bg-customer_type_distributor-100 text-customer_type_distributor-700",
+            customer_type_other_customer_type: "bg-customer_type_other_customer_type-100 text-customer_type_other_customer_type-700",
+            customer_source_user_defined: "bg-customer_source_user_defined-100 text-customer_source_user_defined-700",
+            customer_source_classic_migration: "bg-customer_source_classic_migration-100 text-customer_source_classic_migration-700",
+            customer_source_system_defined: "bg-customer_source_system_defined-100 text-customer_source_system_defined-700",
         },
     },
     defaultVariants: {
@@ -4523,8 +4526,10 @@ const cvaVirtualizedListItem = cssClassVarianceUtilities.cvaMerge(["absolute", "
  * @property {RelayPagination | undefined} pagination - Pagination configuration for the list.
  * @property {separator} [separator="line"] - The separator style between items in the list.
  * @property {(index: number) => JSX.Element} children - A function that takes an index and returns the JSX element to be rendered at said index.
+ * @property {loadingIndicator} [loadingIndicator="spinner"] - The type of loading indicator in the list.
+ * @property {skeletonLinesHeight} [skeletonLinesHeight="2rem"] - The height of the skeleton lines.
  */
-const VirtualizedList = ({ count, rowHeight = 40, pagination, children, className, dataTestId, separator = "none", }) => {
+const VirtualizedList = ({ count, rowHeight = 40, pagination, children, className, dataTestId, separator = "none", loadingIndicator = "spinner", skeletonLinesHeight = "2rem", }) => {
     var _a;
     const containerRef = React.useRef(null);
     const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize, measureElement } = reactTablePagination.useInfiniteScroll({
@@ -4539,7 +4544,7 @@ const VirtualizedList = ({ count, rowHeight = 40, pagination, children, classNam
                 const isLoaderRow = virtualRow.index > count - 1;
                 return (jsxRuntime.jsx("li", { className: cvaVirtualizedListItem({ separator }), "data-index": virtualRow.index, ref: measureElement, style: {
                         transform: `translateY(${virtualRow.start}px)`,
-                    }, children: isLoaderRow ? ((pagination === null || pagination === void 0 ? void 0 : pagination.isLoading) ? (jsxRuntime.jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" })) : null) : (children(virtualRow.index)) }, virtualRow.key));
+                    }, children: isLoaderRow ? ((pagination === null || pagination === void 0 ? void 0 : pagination.isLoading) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [loadingIndicator === "spinner" && jsxRuntime.jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" }), loadingIndicator === "skeletonLines" && (jsxRuntime.jsx(SkeletonLines, { height: skeletonLinesHeight, lines: 3, width: "full" }))] })) : null) : (children(virtualRow.index)) }, virtualRow.key));
             }) }) }));
 };
 

package/index.esm.js

@@ -237,13 +237,16 @@ const cvaTag = cvaMerge([
             unknown: "bg-unknown-100 text-unknown-700",
             moving: "bg-neutral-100 text-neutral-700",
             active: "bg-neutral-100 text-neutral-700",
-            contractor: "bg-contractor-100 text-contractor-700",
-            dealer: "bg-dealer-100 text-dealer-700",
-            rental: "bg-rental-100 text-rental-700",
-            oem: "bg-oem-100 text-oem-700",
-            service: "bg-service-100 text-service-700",
-            distributor: "bg-distributor-100 text-distributor-700",
-            other_customer_type: "bg-other_customer_type-100 text-other_customer_type-700",
+            customer_type_contractor: "bg-customer_type_contractor-100 text-customer_type_contractor-700",
+            customer_type_dealer: "bg-customer_type_dealer-100 text-customer_type_dealer-700",
+            customer_type_rental: "bg-customer_type_rental-100 text-customer_type_rental-700",
+            customer_type_oem: "bg-customer_type_oem-100 text-customer_type_oem-700",
+            customer_type_service: "bg-customer_type_service-100 text-customer_type_service-700",
+            customer_type_distributor: "bg-customer_type_distributor-100 text-customer_type_distributor-700",
+            customer_type_other_customer_type: "bg-customer_type_other_customer_type-100 text-customer_type_other_customer_type-700",
+            customer_source_user_defined: "bg-customer_source_user_defined-100 text-customer_source_user_defined-700",
+            customer_source_classic_migration: "bg-customer_source_classic_migration-100 text-customer_source_classic_migration-700",
+            customer_source_system_defined: "bg-customer_source_system_defined-100 text-customer_source_system_defined-700",
         },
     },
     defaultVariants: {
@@ -4492,8 +4495,10 @@ const cvaVirtualizedListItem = cvaMerge(["absolute", "top-0", "left-0", "w-full"
  * @property {RelayPagination | undefined} pagination - Pagination configuration for the list.
  * @property {separator} [separator="line"] - The separator style between items in the list.
  * @property {(index: number) => JSX.Element} children - A function that takes an index and returns the JSX element to be rendered at said index.
+ * @property {loadingIndicator} [loadingIndicator="spinner"] - The type of loading indicator in the list.
+ * @property {skeletonLinesHeight} [skeletonLinesHeight="2rem"] - The height of the skeleton lines.
  */
-const VirtualizedList = ({ count, rowHeight = 40, pagination, children, className, dataTestId, separator = "none", }) => {
+const VirtualizedList = ({ count, rowHeight = 40, pagination, children, className, dataTestId, separator = "none", loadingIndicator = "spinner", skeletonLinesHeight = "2rem", }) => {
     var _a;
     const containerRef = useRef(null);
     const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize, measureElement } = useInfiniteScroll({
@@ -4508,7 +4513,7 @@ const VirtualizedList = ({ count, rowHeight = 40, pagination, children, classNam
                 const isLoaderRow = virtualRow.index > count - 1;
                 return (jsx("li", { className: cvaVirtualizedListItem({ separator }), "data-index": virtualRow.index, ref: measureElement, style: {
                         transform: `translateY(${virtualRow.start}px)`,
-                    }, children: isLoaderRow ? ((pagination === null || pagination === void 0 ? void 0 : pagination.isLoading) ? (jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" })) : null) : (children(virtualRow.index)) }, virtualRow.key));
+                    }, children: isLoaderRow ? ((pagination === null || pagination === void 0 ? void 0 : pagination.isLoading) ? (jsxs(Fragment, { children: [loadingIndicator === "spinner" && jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" }), loadingIndicator === "skeletonLines" && (jsx(SkeletonLines, { height: skeletonLinesHeight, lines: 3, width: "full" }))] })) : null) : (children(virtualRow.index)) }, virtualRow.key));
             }) }) }));
 };
 

package/package.json

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

package/src/components/PageHeader/PageHeader.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { TabListProps } from "../Tabs/TabList";
 import { TagColors } from "../Tag";
@@ -28,7 +28,7 @@ export interface PageHeaderProps extends CommonProps {
      * A RectNode passed into the tag will be rendered as such.
      * A string passed into the tag will render it using the tag component.
      */
-    tag?: string;
+    tag?: string | ReactNode;
     /**
      * A theme color value can be used for tag component
      */

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

@@ -1,8 +1,8 @@
-import { ActivityColors, CriticalityColors, CustomerTypeColors, GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
+import { ActivityColors, CriticalityColors, CustomerDataSourceColors, CustomerTypeColors, GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
 import * as React from "react";
 import { CommonProps, Size } from "../../common/CommonProps";
 export type TagSize = Extract<Size, "small" | "medium">;
-export type TagColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors | CustomerTypeColors;
+export type TagColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors | CustomerTypeColors | CustomerDataSourceColors;
 export interface TagProps extends CommonProps {
     /**
      * The color of the tag.

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

@@ -1,7 +1,7 @@
 export declare const cvaTag: (props?: ({
     size?: "small" | "medium" | 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" | "contractor" | "dealer" | "rental" | "oem" | "service" | "distributor" | "other_customer_type" | null | undefined;
+    color?: "primary" | "secondary" | "accent" | "neutral" | "black" | "white" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "stopped" | "idle" | "unknown" | "moving" | "active" | "customer_type_contractor" | "customer_type_dealer" | "customer_type_rental" | "customer_type_oem" | "customer_type_service" | "customer_type_distributor" | "customer_type_other_customer_type" | "customer_source_user_defined" | "customer_source_classic_migration" | "customer_source_system_defined" | 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;
 export declare const cvaTagIcon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/VirtualizedList/VirtualizedList.d.ts

@@ -4,12 +4,15 @@ import { RelayPagination } from "@trackunit/react-table-pagination";
 import { CommonProps } from "../../common/CommonProps";
 import { cvaVirtualizedListItem } from "./VirtualizedList.variants";
 type Separator = NonNullable<VariantProps<typeof cvaVirtualizedListItem>["separator"]>;
+type LoadingIndicator = "spinner" | "skeletonLines";
 export interface VirtualizedListProps extends CommonProps {
     count: number;
     rowHeight?: number;
     pagination?: RelayPagination;
     children: (index: number) => JSX.Element;
     separator?: Separator;
+    loadingIndicator?: LoadingIndicator;
+    skeletonLinesHeight?: string;
 }
 /**
  * Render a performant virtualized list of items. Optionally with infinite scrolling.
@@ -19,6 +22,8 @@ export interface VirtualizedListProps extends CommonProps {
  * @property {RelayPagination | undefined} pagination - Pagination configuration for the list.
  * @property {separator} [separator="line"] - The separator style between items in the list.
  * @property {(index: number) => JSX.Element} children - A function that takes an index and returns the JSX element to be rendered at said index.
+ * @property {loadingIndicator} [loadingIndicator="spinner"] - The type of loading indicator in the list.
+ * @property {skeletonLinesHeight} [skeletonLinesHeight="2rem"] - The height of the skeleton lines.
  */
-export declare const VirtualizedList: ({ count, rowHeight, pagination, children, className, dataTestId, separator, }: VirtualizedListProps) => JSX.Element;
+export declare const VirtualizedList: ({ count, rowHeight, pagination, children, className, dataTestId, separator, loadingIndicator, skeletonLinesHeight, }: VirtualizedListProps) => JSX.Element;
 export {};