@trackunit/react-components 1.17.6 → 1.17.7

package/index.cjs.js

@@ -1289,15 +1289,15 @@ const useViewportBreakpoints = (options = {}) => {
 
 const cvaBreadcrumb = cssClassVarianceUtilities.cvaMerge(["my-4", "flex", "place-items-center"]);
 const cvaBreadcrumbItem = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
-const cvaBreadcrumbForLargeScreen = cssClassVarianceUtilities.cvaMerge(["flex", "flex-nowrap"]);
-const cvaBreadcrumbForMediumScreen = cssClassVarianceUtilities.cvaMerge(["flex"], {
+const cvaBreadcrumbForLargeScreen = cssClassVarianceUtilities.cvaMerge(["flex", "flex-nowrap", "items-center"]);
+const cvaBreadcrumbForMediumScreen = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"], {
     variants: {
         expanded: {
             true: "flex-wrap",
             false: "flex-nowrap",
         },
-        defaultVariants: { expanded: false },
     },
+    defaultVariants: { expanded: false },
 });
 
 /**
@@ -1322,7 +1322,7 @@ const BreadcrumbForMediumScreen = ({ "data-testid": dataTestId, breadcrumbItems,
     const [expanded, setExpanded] = react.useState(false);
     const getReducedArray = react.useCallback(() => {
         let reducedArrayElements = [];
-        const collapsibleButton = (jsxRuntime.jsxs("div", { className: cvaBreadcrumbItem(), children: [jsxRuntime.jsx(IconButton, { "data-testid": `collapsibleButton-${dataTestId}`, icon: jsxRuntime.jsx(Icon, { name: "EllipsisHorizontal", size: "small" }), onClick: () => setExpanded(true), size: "small", variant: "ghost-neutral" }), jsxRuntime.jsx(Icon, { color: "neutral", name: "Slash", size: "small" })] }));
+        const collapsibleButton = (jsxRuntime.jsxs("div", { className: cvaBreadcrumbItem(), children: [jsxRuntime.jsx(IconButton, { "data-testid": `collapsibleButton-${dataTestId}`, icon: jsxRuntime.jsx(Icon, { name: "EllipsisHorizontal" }), onClick: () => setExpanded(true), size: "small", variant: "ghost-neutral" }), jsxRuntime.jsx(Icon, { className: "text-neutral-300", name: "Slash", size: "small" })] }));
         const firstBreadcrumbItem = breadcrumbItems[0];
         if (firstBreadcrumbItem && breadcrumbItems.length > 3) {
             const lastTwoBreadcrumbItem = breadcrumbItems.slice(-2);
@@ -1349,9 +1349,9 @@ const useBreadcrumbItemsToRender = (breadcrumbItems) => {
     const breadCrumbItemsToJSX = breadcrumbItems.map((item, index, array) => {
         const isLast = index === array.length - 1;
         if (!isLast) {
-            return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Button, { asChild: true, size: "small", variant: "ghost-neutral", children: jsxRuntime.jsx(reactRouter.Link, { to: item.to, children: item.label }) }), jsxRuntime.jsx(Icon, { className: "text-neutral-300", name: "Slash", size: "small" })] }, index));
+            return (jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx(Button, { asChild: true, size: "small", variant: "ghost-neutral", children: jsxRuntime.jsx(reactRouter.Link, { to: item.to, children: item.label }) }), jsxRuntime.jsx(Icon, { className: "text-neutral-300", name: "Slash", size: "small" })] }, index));
         }
-        return (jsxRuntime.jsx(Text, { className: "text-nowrap", size: "small", children: item.label }, index));
+        return (jsxRuntime.jsx(Text, { className: "text-nowrap pl-2 font-medium", size: "small", children: item.label }, index));
     });
     return breadCrumbItemsToJSX;
 };
@@ -1359,6 +1359,9 @@ const useBreadcrumbItemsToRender = (breadcrumbItems) => {
 /**
  * The breadcrumb component shows a user's location in a website or application. Breadcrumbs are particularly useful when a large amount of content is organized in a hierarchical manner. They streamline navigation, minimize the steps required to revisit previous pages, and offer contextual insights to the users.
  *
+ * All items except the last are rendered as clickable links. The last item is rendered as plain text representing the current page.
+ * The component automatically adapts to the screen size: on large screens all items are visible, on medium screens middle items collapse behind an ellipsis button, and on small screens only the current page is shown.
+ *
  * ### When to use
  * Use breadcrumbs when deep navigation is available, on apps or pages where users might dive into content and could benefit from a quick way to return to higher levels. Breadcrumbs display the current screen as the final item in the list to make it clear where the user is.
  *
@@ -1381,7 +1384,7 @@ const useBreadcrumbItemsToRender = (breadcrumbItems) => {
  *         { label: "Assets", to: "/fleet/assets" },
  *         { label: "Excavator 001", to: "/fleet/assets/123" },
  *       ]}
- *       back={() => navigate({ to: "/fleet/assets" })}
+ *       onClickBack={() => navigate({ to: "/fleet/assets" })}
  *     />
  *   );
  * };

package/index.esm.js

@@ -1287,15 +1287,15 @@ const useViewportBreakpoints = (options = {}) => {
 
 const cvaBreadcrumb = cvaMerge(["my-4", "flex", "place-items-center"]);
 const cvaBreadcrumbItem = cvaMerge(["flex", "items-center"]);
-const cvaBreadcrumbForLargeScreen = cvaMerge(["flex", "flex-nowrap"]);
-const cvaBreadcrumbForMediumScreen = cvaMerge(["flex"], {
+const cvaBreadcrumbForLargeScreen = cvaMerge(["flex", "flex-nowrap", "items-center"]);
+const cvaBreadcrumbForMediumScreen = cvaMerge(["flex", "items-center"], {
     variants: {
         expanded: {
             true: "flex-wrap",
             false: "flex-nowrap",
         },
-        defaultVariants: { expanded: false },
     },
+    defaultVariants: { expanded: false },
 });
 
 /**
@@ -1320,7 +1320,7 @@ const BreadcrumbForMediumScreen = ({ "data-testid": dataTestId, breadcrumbItems,
     const [expanded, setExpanded] = useState(false);
     const getReducedArray = useCallback(() => {
         let reducedArrayElements = [];
-        const collapsibleButton = (jsxs("div", { className: cvaBreadcrumbItem(), children: [jsx(IconButton, { "data-testid": `collapsibleButton-${dataTestId}`, icon: jsx(Icon, { name: "EllipsisHorizontal", size: "small" }), onClick: () => setExpanded(true), size: "small", variant: "ghost-neutral" }), jsx(Icon, { color: "neutral", name: "Slash", size: "small" })] }));
+        const collapsibleButton = (jsxs("div", { className: cvaBreadcrumbItem(), children: [jsx(IconButton, { "data-testid": `collapsibleButton-${dataTestId}`, icon: jsx(Icon, { name: "EllipsisHorizontal" }), onClick: () => setExpanded(true), size: "small", variant: "ghost-neutral" }), jsx(Icon, { className: "text-neutral-300", name: "Slash", size: "small" })] }));
         const firstBreadcrumbItem = breadcrumbItems[0];
         if (firstBreadcrumbItem && breadcrumbItems.length > 3) {
             const lastTwoBreadcrumbItem = breadcrumbItems.slice(-2);
@@ -1347,9 +1347,9 @@ const useBreadcrumbItemsToRender = (breadcrumbItems) => {
     const breadCrumbItemsToJSX = breadcrumbItems.map((item, index, array) => {
         const isLast = index === array.length - 1;
         if (!isLast) {
-            return (jsxs("div", { children: [jsx(Button, { asChild: true, size: "small", variant: "ghost-neutral", children: jsx(Link, { to: item.to, children: item.label }) }), jsx(Icon, { className: "text-neutral-300", name: "Slash", size: "small" })] }, index));
+            return (jsxs("div", { className: "flex items-center", children: [jsx(Button, { asChild: true, size: "small", variant: "ghost-neutral", children: jsx(Link, { to: item.to, children: item.label }) }), jsx(Icon, { className: "text-neutral-300", name: "Slash", size: "small" })] }, index));
         }
-        return (jsx(Text, { className: "text-nowrap", size: "small", children: item.label }, index));
+        return (jsx(Text, { className: "text-nowrap pl-2 font-medium", size: "small", children: item.label }, index));
     });
     return breadCrumbItemsToJSX;
 };
@@ -1357,6 +1357,9 @@ const useBreadcrumbItemsToRender = (breadcrumbItems) => {
 /**
  * The breadcrumb component shows a user's location in a website or application. Breadcrumbs are particularly useful when a large amount of content is organized in a hierarchical manner. They streamline navigation, minimize the steps required to revisit previous pages, and offer contextual insights to the users.
  *
+ * All items except the last are rendered as clickable links. The last item is rendered as plain text representing the current page.
+ * The component automatically adapts to the screen size: on large screens all items are visible, on medium screens middle items collapse behind an ellipsis button, and on small screens only the current page is shown.
+ *
  * ### When to use
  * Use breadcrumbs when deep navigation is available, on apps or pages where users might dive into content and could benefit from a quick way to return to higher levels. Breadcrumbs display the current screen as the final item in the list to make it clear where the user is.
  *
@@ -1379,7 +1382,7 @@ const useBreadcrumbItemsToRender = (breadcrumbItems) => {
  *         { label: "Assets", to: "/fleet/assets" },
  *         { label: "Excavator 001", to: "/fleet/assets/123" },
  *       ]}
- *       back={() => navigate({ to: "/fleet/assets" })}
+ *       onClickBack={() => navigate({ to: "/fleet/assets" })}
  *     />
  *   );
  * };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.17.6",
+  "version": "1.17.7",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,10 +14,10 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.11.35",
-    "@trackunit/css-class-variance-utilities": "1.11.35",
-    "@trackunit/shared-utils": "1.13.35",
-    "@trackunit/ui-icons": "1.11.34",
+    "@trackunit/ui-design-tokens": "1.11.36",
+    "@trackunit/css-class-variance-utilities": "1.11.36",
+    "@trackunit/shared-utils": "1.13.36",
+    "@trackunit/ui-icons": "1.11.35",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12",

package/src/components/Breadcrumb/Breadcrumb.d.ts

@@ -3,6 +3,9 @@ import { BreadcrumbContainerProps, BreadcrumbProps } from "./utils/types";
 /**
  * The breadcrumb component shows a user's location in a website or application. Breadcrumbs are particularly useful when a large amount of content is organized in a hierarchical manner. They streamline navigation, minimize the steps required to revisit previous pages, and offer contextual insights to the users.
  *
+ * All items except the last are rendered as clickable links. The last item is rendered as plain text representing the current page.
+ * The component automatically adapts to the screen size: on large screens all items are visible, on medium screens middle items collapse behind an ellipsis button, and on small screens only the current page is shown.
+ *
  * ### When to use
  * Use breadcrumbs when deep navigation is available, on apps or pages where users might dive into content and could benefit from a quick way to return to higher levels. Breadcrumbs display the current screen as the final item in the list to make it clear where the user is.
  *
@@ -25,7 +28,7 @@ import { BreadcrumbContainerProps, BreadcrumbProps } from "./utils/types";
  *         { label: "Assets", to: "/fleet/assets" },
  *         { label: "Excavator 001", to: "/fleet/assets/123" },
  *       ]}
- *       back={() => navigate({ to: "/fleet/assets" })}
+ *       onClickBack={() => navigate({ to: "/fleet/assets" })}
  *     />
  *   );
  * };

package/src/components/Breadcrumb/Breadcrumb.variant.d.ts

@@ -3,5 +3,4 @@ export declare const cvaBreadcrumbItem: (props?: import("class-variance-authorit
 export declare const cvaBreadcrumbForLargeScreen: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaBreadcrumbForMediumScreen: (props?: ({
     expanded?: boolean | null | undefined;
-    defaultVariants?: "expanded" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Breadcrumb/utils/types.d.ts

@@ -1,11 +1,20 @@
 import { MouseEventHandler, ReactElement } from "react";
 import { CommonProps } from "../../../common/CommonProps";
 export interface BreadcrumbItemProps {
+    /** The display text for this breadcrumb item. */
     label: string;
+    /** The route path this breadcrumb item links to. */
     to: string;
 }
 export interface BreadcrumbProps extends CommonProps {
+    /**
+     * The ordered list of breadcrumb items representing the navigation hierarchy.
+     * The last item is rendered as plain text (the current page), all preceding items are rendered as clickable links.
+     */
     breadcrumbItems: Array<BreadcrumbItemProps>;
+    /**
+     * Click handler for the back arrow button. Typically navigates to the previous breadcrumb item (second-to-last in the list).
+     */
     onClickBack: MouseEventHandler<HTMLButtonElement>;
 }
 export interface BreadcrumbContainerProps extends CommonProps {