@trackunit/react-components 0.1.297 → 0.1.299

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: {
@@ -1664,30 +1667,52 @@ const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose,
 
 const cvaCollapse = cssClassVarianceUtilities.cvaMerge([
     "block",
-    "w-full",
     "border",
     "border-solid",
     "border-secondary-200",
-    "rounded",
+    "rounded-md",
     "overflow-hidden",
 ]);
 const cvaCollapseHeader = cssClassVarianceUtilities.cvaMerge([
     "flex",
-    "w-full",
     "items-center",
     "justify-between",
     "cursor-pointer",
     "bg-secondary-50",
-    "px-4",
+    "hover:bg-secondary-200",
+    "px-3",
     "gap-4",
-    "py-2",
+    "py-1.5",
     "transition-all",
 ], {
     variants: { expanded: { true: ["border-secondary-200", "border-b", "border-solid"], false: "" } },
 });
 const cvaCollapseLabelContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-2"]);
-const cvaCollapsible = cssClassVarianceUtilities.cvaMerge(["block", "relative", "w-full", "p-4"]);
-const cvaCollapseAnimated = cssClassVarianceUtilities.cvaMerge(["overflow-y-hidden", "transition-all"]);
+const cvaCollapsible = cssClassVarianceUtilities.cvaMerge(["block", "relative", "p-4"]);
+const cvaCollapseAnimated = cssClassVarianceUtilities.cvaMerge(["overflow-y-hidden", "transition-all"], {
+    variants: {
+        expanded: {
+            true: "block",
+            false: "hidden",
+        },
+    },
+    defaultVariants: {
+        expanded: false,
+    },
+});
+const cvaChevronIcon = cssClassVarianceUtilities.cvaMerge([
+    "transition-transform"
+], {
+    variants: {
+        expanded: {
+            true: "rotate-90",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        expanded: false,
+    },
+});
 
 /**
  * The Collapse component is used to condense non-important information.
@@ -1703,11 +1728,11 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxRuntime.jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, className: headerClassName }), onClick: handleClick, role: "button", children: [jsxRuntime.jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsxRuntime.jsx(Text, { type: "span", weight: "bold", children: label }), jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(Icon, { name: "ChevronUpDown", size: "small" }), size: "medium", variant: "ghost-neutral" })] }), headerAddon ? headerAddon : null] }), jsxRuntime.jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, className: headerClassName }), onClick: handleClick, role: "button", children: [jsxRuntime.jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsxRuntime.jsx(Icon, { className: cvaChevronIcon({ expanded }), name: "ChevronRight", size: "small" }), jsxRuntime.jsx(Text, { type: "span", weight: "bold", children: label })] }), headerAddon ? headerAddon : null] }), jsxRuntime.jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
 };
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = reactUse.useMeasure();
-    return (jsxRuntime.jsx("div", { className: cvaCollapseAnimated(), id: id, style: { height: expanded ? height : "0" }, children: jsxRuntime.jsx("div", { ref: ref, children: jsxRuntime.jsx("div", { className: cvaCollapsible(), children: children }) }) }));
+    return (jsxRuntime.jsx("div", { className: cvaCollapseAnimated({ expanded }), id: id, style: { height: expanded ? height : "0" }, children: jsxRuntime.jsx("div", { ref: ref, children: jsxRuntime.jsx("div", { className: cvaCollapsible(), children: children }) }) }));
 };
 
 const cvaCopyableText = cssClassVarianceUtilities.cvaMerge([

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: {
@@ -1633,30 +1636,52 @@ const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose,
 
 const cvaCollapse = cvaMerge([
     "block",
-    "w-full",
     "border",
     "border-solid",
     "border-secondary-200",
-    "rounded",
+    "rounded-md",
     "overflow-hidden",
 ]);
 const cvaCollapseHeader = cvaMerge([
     "flex",
-    "w-full",
     "items-center",
     "justify-between",
     "cursor-pointer",
     "bg-secondary-50",
-    "px-4",
+    "hover:bg-secondary-200",
+    "px-3",
     "gap-4",
-    "py-2",
+    "py-1.5",
     "transition-all",
 ], {
     variants: { expanded: { true: ["border-secondary-200", "border-b", "border-solid"], false: "" } },
 });
 const cvaCollapseLabelContainer = cvaMerge(["flex", "items-center", "gap-2"]);
-const cvaCollapsible = cvaMerge(["block", "relative", "w-full", "p-4"]);
-const cvaCollapseAnimated = cvaMerge(["overflow-y-hidden", "transition-all"]);
+const cvaCollapsible = cvaMerge(["block", "relative", "p-4"]);
+const cvaCollapseAnimated = cvaMerge(["overflow-y-hidden", "transition-all"], {
+    variants: {
+        expanded: {
+            true: "block",
+            false: "hidden",
+        },
+    },
+    defaultVariants: {
+        expanded: false,
+    },
+});
+const cvaChevronIcon = cvaMerge([
+    "transition-transform"
+], {
+    variants: {
+        expanded: {
+            true: "rotate-90",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        expanded: false,
+    },
+});
 
 /**
  * The Collapse component is used to condense non-important information.
@@ -1672,11 +1697,11 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxs("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, className: headerClassName }), onClick: handleClick, role: "button", children: [jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsx(Text, { type: "span", weight: "bold", children: label }), jsx(IconButton, { icon: jsx(Icon, { name: "ChevronUpDown", size: "small" }), size: "medium", variant: "ghost-neutral" })] }), headerAddon ? headerAddon : null] }), jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
+    return (jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxs("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, className: headerClassName }), onClick: handleClick, role: "button", children: [jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsx(Icon, { className: cvaChevronIcon({ expanded }), name: "ChevronRight", size: "small" }), jsx(Text, { type: "span", weight: "bold", children: label })] }), headerAddon ? headerAddon : null] }), jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
 };
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = useMeasure();
-    return (jsx("div", { className: cvaCollapseAnimated(), id: id, style: { height: expanded ? height : "0" }, children: jsx("div", { ref: ref, children: jsx("div", { className: cvaCollapsible(), children: children }) }) }));
+    return (jsx("div", { className: cvaCollapseAnimated({ expanded }), id: id, style: { height: expanded ? height : "0" }, children: jsx("div", { ref: ref, children: jsx("div", { className: cvaCollapsible(), children: children }) }) }));
 };
 
 const cvaCopyableText = cvaMerge([

package/package.json

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

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

@@ -4,4 +4,9 @@ export declare const cvaCollapseHeader: (props?: ({
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaCollapseLabelContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaCollapsible: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaCollapseAnimated: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCollapseAnimated: (props?: ({
+    expanded?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaChevronIcon: (props?: ({
+    expanded?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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;