@dust-tt/sparkle 0.2.214 → 0.2.216

package/dist/cjs/components/Breadcrumbs.d.ts

@@ -1,13 +1,14 @@
 import type { ComponentType } from "react";
 import React from "react";
+type BreadcrumbItem = {
+    label: string;
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    href?: string;
+};
 type BreadcrumbProps = {
-    items: {
-        label: string;
-        icon?: ComponentType<{
-            className?: string;
-        }>;
-        href?: string;
-    }[];
+    items: BreadcrumbItem[];
 };
 export declare function Breadcrumbs({ items }: BreadcrumbProps): React.JSX.Element;
 export {};

package/dist/cjs/index.js

@@ -129182,18 +129182,43 @@ DataTable.Caption = function Caption(_a) {
     return (React.createElement("caption", __assign({ className: className }, props), children));
 };
 
+var LABEL_TRUNCATE_LENGTH_MIDDLE = 15;
+var LABEL_TRUNCATE_LENGTH_END = 30;
+var ELLIPSIS_STRING = "...";
 function Breadcrumbs(_a) {
     var items = _a.items;
     var components = React.useContext(SparkleContext).components;
-    var Link = components.link;
-    return (React.createElement("div", { className: "gap-2 s-flex s-flex-row s-items-center" }, items.map(function (item, index) { return (React.createElement("div", { key: index, className: "s-flex s-flex-row s-items-center s-gap-1" },
-        React.createElement(Icon, { visual: item.icon, className: "s-text-brand" }),
-        React.createElement("div", null, item.href ? (React.createElement(Link, { href: item.href, className: index === items.length - 1
-                ? "s-text-element-900"
-                : "s-text-element-700" }, item.label)) : (React.createElement("span", { className: index === items.length - 1
-                ? "s-text-element-900"
-                : "s-text-element-700" }, item.label))),
-        index === items.length - 1 ? null : (React.createElement(SvgChevronRight$1, { className: "s-text-element-500" })))); })));
+    var _b = items.reduce(function (acc, item, index) {
+        if (items.length <= 5 || index < 2 || index >= items.length - 2) {
+            acc.itemsShown.push(item);
+        }
+        else if (index === 2) {
+            acc.itemsShown.push({ label: ELLIPSIS_STRING });
+        }
+        else {
+            acc.itemsHidden.push(item);
+        }
+        return acc;
+    }, { itemsShown: [], itemsHidden: [] }), itemsShown = _b.itemsShown, itemsHidden = _b.itemsHidden;
+    return (React.createElement("div", { className: "gap-2 s-flex s-flex-row s-items-center" }, itemsShown.map(function (item, index) {
+        return (React.createElement("div", { key: "breadcrumbs-".concat(index), className: "s-flex s-flex-row s-items-center s-gap-1" },
+            React.createElement(Icon, { visual: item.icon, className: "s-text-brand" }),
+            item.label === ELLIPSIS_STRING ? (React.createElement(DropdownMenu, null,
+                React.createElement(DropdownMenu.Button, null,
+                    "$",
+                    ELLIPSIS_STRING),
+                React.createElement(DropdownMenu.Items, { origin: "topLeft" }, itemsHidden.map(function (item, index) { return (React.createElement(DropdownMenu.Item, { key: "breadcrumbs-hidden-".concat(index), icon: item.icon, label: item.label }, getLinkForItem(item, false, components.link))); })))) : (React.createElement("div", null, getLinkForItem(item, index === itemsShown.length - 1, components.link))),
+            index === itemsShown.length - 1 ? null : (React.createElement(SvgChevronRight$1, { className: "s-text-element-500" }))));
+    })));
+}
+function getLinkForItem(item, isLast, link) {
+    var Link = item.href ? link : noHrefLink;
+    return (React.createElement(Link, { href: item.href || "#", className: isLast ? "s-text-element-900" : "s-text-element-700" }, isLast
+        ? truncateWithTooltip(item.label, LABEL_TRUNCATE_LENGTH_END)
+        : truncateWithTooltip(item.label, LABEL_TRUNCATE_LENGTH_MIDDLE)));
+}
+function truncateWithTooltip(text, length) {
+    return text.length > length ? (React.createElement(Tooltip, { label: text, position: "below" }, "".concat(text.substring(0, length - 1), "\u2026"))) : (text);
 }
 
 var SvgLogoHorizontalColor = function (props) { return (React__namespace.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 96 24" }, props),