@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/esm/baseui/tree-view/types.d.ts

@@ -1,21 +1,21 @@
 import type * as React from 'react';
-import type { Override } from '../helpers/overrides';
-export declare type TreeLabelOverrides = {
-    TreeItemContent?: Override;
-    IconContainer?: Override;
-    ExpandIcon?: Override;
-    CollapseIcon?: Override;
-    LeafIconContainer?: Override;
-    LeafIcon?: Override;
+import type { Override } from '../../overrides';
+export type TreeLabelOverrides = {
+    TreeItemContent?: Override<Record<string, any>>;
+    IconContainer?: Override<Record<string, any>>;
+    ExpandIcon?: Override<Record<string, any>>;
+    CollapseIcon?: Override<Record<string, any>>;
+    LeafIconContainer?: Override<Record<string, any>>;
+    LeafIcon?: Override<Record<string, any>>;
 };
-export declare type TreeViewOverrides = {
-    Root?: Override;
-    TreeItemList?: Override;
-    TreeItem?: Override;
-    TreeLabel?: Override;
+export type TreeViewOverrides = {
+    Root?: Override<Record<string, any>>;
+    TreeItemList?: Override<Record<string, any>>;
+    TreeItem?: Override<Record<string, any>>;
+    TreeLabel?: Override<Record<string, any>>;
 } & TreeLabelOverrides;
-export declare type TreeNodeId = number | string;
-export declare type TreeNodeData<T = any> = {
+export type TreeNodeId = number | string;
+export type TreeNodeData<T = any> = {
     id?: TreeNodeId;
     children?: TreeNodeData[];
     isExpanded?: boolean;
@@ -23,7 +23,7 @@ export declare type TreeNodeData<T = any> = {
     info?: T;
     [key: string]: any;
 };
-export declare type TreeLabelProps = {
+export type TreeLabelProps = {
     hasChildren: boolean;
     isExpanded?: boolean;
     isSelected?: boolean;
@@ -32,13 +32,13 @@ export declare type TreeLabelProps = {
     overrides?: TreeLabelOverrides;
     node: TreeNodeData;
 };
-export declare type SharedStyleProps = {
+export type SharedStyleProps = {
     $hasChildren: boolean;
     $isExpanded: boolean;
     $isSelected: boolean;
     $isFocusVisible: boolean;
 };
-export declare type TreeNodeProps = {
+export type TreeNodeProps = {
     node: TreeNodeData;
     getId: (node: TreeNodeData) => TreeNodeId;
     onToggle?: (node: TreeNodeData) => void;
@@ -53,10 +53,10 @@ export declare type TreeNodeProps = {
     isFocusVisible?: boolean;
     indentGuides?: boolean;
 };
-export declare type StatefulContainerProps = {
+export type StatefulContainerProps = {
     children: (props: TreeViewProps) => React.ReactNode;
 } & TreeViewProps;
-export declare type TreeViewProps = {
+export type TreeViewProps = {
     data: TreeNodeData[];
     indentGuides?: boolean;
     onToggle?: (node: TreeNodeData) => void;

package/esm/box/Box.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-declare const Box: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
-    $as?: import("react").ElementType<any> | undefined;
-    className?: import("..").Styles;
+declare const Box: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
+    $as?: import("react").ElementType | undefined;
+    className?: import("..").ClassName;
     style?: import("..").Styles;
 } & {
     overrides?: {

package/esm/box/Box.js

@@ -7,7 +7,7 @@ var StyledBox = styled('div');
 var Box = forwardRef(function (props, ref) {
     var _a = props.overrides, overrides = _a === void 0 ? {} : _a, boxProps = __rest(props, ["overrides"]);
     var _b = __read(useOverrides(overrides.Box, StyledBox), 2), Comp = _b[0], overrideProps = _b[1];
-    return _jsx(Comp, __assign({ "data-spaceweb": "box", "data-testid": "box" }, boxProps, overrideProps, { ref: ref }), void 0);
+    return _jsx(Comp, __assign({ "data-spaceweb": "box", "data-testid": "box" }, boxProps, overrideProps, { ref: ref }));
 });
 Box.displayName = 'Box';
 export default Box;

package/esm/box/types.d.ts

@@ -1,6 +1,6 @@
 import { Override } from '../overrides';
 import { SpacewebComponentProps } from '../types';
-export declare type BoxProps = SpacewebComponentProps & {
+export type BoxProps = SpacewebComponentProps & {
     overrides?: {
         Box?: Override<Record<string, any>>;
     };

package/esm/breadcrumb/breadcrumb-ellipsis.d.ts

@@ -0,0 +1,3 @@
+import { BreadcrumbEllipsisProps } from './types';
+declare const BreadcrumbEllipsis: ({ focusBreadcrumbContainer, collapsedItems, collapsedItemsTooltip, }: BreadcrumbEllipsisProps) => import("react/jsx-runtime").JSX.Element;
+export default BreadcrumbEllipsis;

package/esm/breadcrumb/breadcrumb-ellipsis.js

@@ -0,0 +1,19 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StatefulPopover } from '../popover';
+import { Menu, MenuItem } from '../menu';
+import { IconButton } from '../button';
+import Options from '../icon/components/options';
+var BreadcrumbEllipsis = function (_a) {
+    var focusBreadcrumbContainer = _a.focusBreadcrumbContainer, collapsedItems = _a.collapsedItems, collapsedItemsTooltip = _a.collapsedItemsTooltip;
+    return (_jsx(StatefulPopover, __assign({ placement: "bottom", returnFocus: focusBreadcrumbContainer, content: _jsx(Menu, { children: collapsedItems.map(function (item, itemIndex) {
+                var _a;
+                return (_jsx(MenuItem, __assign({ onClick: function (e) {
+                        var _a;
+                        if ((_a = item.props) === null || _a === void 0 ? void 0 : _a.onClick) {
+                            item.props.onClick(e, itemIndex + 1);
+                        }
+                    } }, { children: ((_a = item.props) === null || _a === void 0 ? void 0 : _a.children) || item }), "collapsed-item-".concat(itemIndex)));
+            }) }) }, { children: _jsx(IconButton, __assign({ size: "xxxs", tooltipContent: collapsedItemsTooltip }, { children: _jsx(Options, {}) })) })));
+};
+export default BreadcrumbEllipsis;

package/esm/breadcrumb/breadcrumb-item.d.ts

@@ -1,6 +1,24 @@
-import { BreadcrumbItemProps } from './types';
-declare const BreadcrumbItem: {
-    ({ children, isLastChild, overrides, onClick, index, startEnhancer, endEnhancer, separator, gap, ...restProps }: BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+import React from 'react';
+import { BreadcrumbItemSharedProps, Enhancer } from './types';
+declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<import("../link").LinkProps, "onClick"> & {
+    isLastChild?: boolean | undefined;
+    menuSeparator?: boolean | undefined;
+    containerRef?: React.RefObject<HTMLElement> | undefined;
+    gap?: number | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLElement, MouseEvent>, index: number) => void) | undefined;
+    index?: number | undefined;
+    separator?: React.ReactNode;
+    startEnhancer?: Enhancer<BreadcrumbItemSharedProps>;
+    endEnhancer?: Enhancer<BreadcrumbItemSharedProps>;
+    collapsedItems?: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
+    collapsedItemsTooltip?: string | undefined;
+    overrides?: {
+        Link?: import("../overrides").Override<Record<string, any>> | undefined;
+        StartEnhancer?: import("../overrides").Override<Record<string, any>> | undefined;
+        EndEnhancer?: import("../overrides").Override<Record<string, any>> | undefined;
+        ListItem?: import("../overrides").Override<Record<string, any>> | undefined;
+        Separator?: import("../overrides").Override<Record<string, any>> | undefined;
+    } | undefined;
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLLIElement>>;
 export default BreadcrumbItem;

package/esm/breadcrumb/breadcrumb-item.js

@@ -1,23 +1,31 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// libs
+import React, { useCallback } from 'react';
 import _noop from 'lodash/noop';
+// components
 import { Typography } from '../typography';
 import { Link } from '../link';
-import { StyledStartEnhancer, StyledEndEnhancer, StyledListItem, StyledSeparator, DEFAULT_SEPARATOR, } from './styled-components';
+import BreadcrumbEllipsis from './breadcrumb-ellipsis';
+// hooks
 import { useOverrides, mergeOverrides } from '../overrides';
+import { useStyle } from '../style';
+// styles
+import { StyledStartEnhancer, StyledEndEnhancer, StyledListItem, StyledSeparator, DEFAULT_SEPARATOR, } from './styled-components';
 var breadcrumbItemOverrides = {
     Link: {
-        style: [
-            'inline-flex text-16 leading-10',
+        className: [
+            'inline-flex text-16 leading-6.25 text-inherit',
             function (_, _a) {
                 var $isLastChild = _a.$isLastChild;
-                return !$isLastChild ? { color: 'inherit', ':focus': { textDecoration: 'underline' } } : {};
+                return (!$isLastChild ? 'focus:underline text-inherit' : '');
             },
         ],
     },
 };
-var BreadcrumbItem = function (_a) {
-    var children = _a.children, _b = _a.isLastChild, isLastChild = _b === void 0 ? false : _b, overrides = _a.overrides, _c = _a.onClick, onClick = _c === void 0 ? _noop : _c, _d = _a.index, index = _d === void 0 ? 0 : _d, startEnhancer = _a.startEnhancer, endEnhancer = _a.endEnhancer, _e = _a.separator, separator = _e === void 0 ? DEFAULT_SEPARATOR : _e, _f = _a.gap, gap = _f === void 0 ? 4 : _f, restProps = __rest(_a, ["children", "isLastChild", "overrides", "onClick", "index", "startEnhancer", "endEnhancer", "separator", "gap"]);
+var BreadcrumbItem = React.forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.isLastChild, isLastChild = _b === void 0 ? false : _b, overrides = _a.overrides, _c = _a.menuSeparator, menuSeparator = _c === void 0 ? false : _c, _d = _a.onClick, onClick = _d === void 0 ? _noop : _d, containerRef = _a.containerRef, _e = _a.index, index = _e === void 0 ? 0 : _e, startEnhancer = _a.startEnhancer, endEnhancer = _a.endEnhancer, _f = _a.separator, separator = _f === void 0 ? DEFAULT_SEPARATOR : _f, _g = _a.gap, gap = _g === void 0 ? 4 : _g, _h = _a.collapsedItems, collapsedItems = _h === void 0 ? [] : _h, _j = _a.collapsedItemsTooltip, collapsedItemsTooltip = _j === void 0 ? 'Show path' : _j, restProps = __rest(_a, ["children", "isLastChild", "overrides", "menuSeparator", "onClick", "containerRef", "index", "startEnhancer", "endEnhancer", "separator", "gap", "collapsedItems", "collapsedItemsTooltip"]);
+    var px2rem = useStyle().px2rem;
     var sharedProps = {
         $gap: gap,
         $withStartEnhancer: !!startEnhancer,
@@ -25,15 +33,26 @@ var BreadcrumbItem = function (_a) {
         $isLastChild: isLastChild,
     };
     var mergedOverrides = mergeOverrides(breadcrumbItemOverrides, overrides);
-    var _g = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.ListItem, StyledListItem), 2), ListItem = _g[0], listItemProps = _g[1];
-    var _h = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Link, !isLastChild ? Link : Typography), 2), LinkOverride = _h[0], linkOverrideProps = _h[1];
-    var _j = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.StartEnhancer, StyledStartEnhancer), 2), StartEnhancer = _j[0], startEnhancerProps = _j[1];
-    var _k = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.EndEnhancer, StyledEndEnhancer), 2), EndEnhancer = _k[0], endEnhancerProps = _k[1];
-    var _l = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Separator, StyledSeparator), 2), BreadcrumbSeparator = _l[0], separatorWrapperProps = _l[1];
+    var _k = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.ListItem, StyledListItem), 2), ListItem = _k[0], listItemProps = _k[1];
+    var _l = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Link, !isLastChild ? Link : Typography), 2), LinkOverride = _l[0], linkOverrideProps = _l[1];
+    var _m = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.StartEnhancer, StyledStartEnhancer), 2), StartEnhancer = _m[0], startEnhancerProps = _m[1];
+    var _o = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.EndEnhancer, StyledEndEnhancer), 2), EndEnhancer = _o[0], endEnhancerProps = _o[1];
+    var _p = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Separator, StyledSeparator), 2), BreadcrumbSeparator = _p[0], separatorWrapperProps = _p[1];
     var renderEnhancer = function (enhancer) {
         return typeof enhancer === 'function' ? enhancer(sharedProps) : enhancer;
     };
-    return (_jsxs(ListItem, __assign({ "data-testid": "breadcrumb-list-item-".concat(index) }, sharedProps, listItemProps, { children: [_jsxs(LinkOverride, __assign({ "data-testid": "breadcrumb-item-link-".concat(index), onClick: function (e) { return onClick(e, index); } }, sharedProps, restProps, linkOverrideProps, { children: [startEnhancer && (_jsx(StartEnhancer, __assign({ "data-testid": "breadcrumb-item-startenhancer-".concat(index) }, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }), void 0)), children, endEnhancer && (_jsx(EndEnhancer, __assign({ "data-testid": "breadcrumb-item-endenhancer-".concat(index) }, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) }), void 0))] }), void 0), !isLastChild && (_jsx(BreadcrumbSeparator, __assign({ "data-testid": "breadcrumb-item-separator-".concat(index), "aria-hidden": true }, sharedProps, separatorWrapperProps, { children: separator }), void 0))] }), void 0));
-};
+    var focusBreadcrumbContainer = useCallback(function () {
+        if (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) {
+            containerRef.current.focus();
+        }
+        return true;
+    }, [containerRef]);
+    var handleClick = useCallback(function (e) {
+        onClick(e, index);
+        focusBreadcrumbContainer();
+    }, [focusBreadcrumbContainer, index, onClick]);
+    return (_jsxs(ListItem, __assign({ ref: ref, "data-testid": "breadcrumb-list-item-".concat(index) }, sharedProps, listItemProps, { children: [menuSeparator ? (_jsx(BreadcrumbEllipsis, { focusBreadcrumbContainer: focusBreadcrumbContainer, collapsedItems: collapsedItems, collapsedItemsTooltip: collapsedItemsTooltip })) : (_jsxs(LinkOverride, __assign({ "data-testid": "breadcrumb-item-link-".concat(index), onClick: handleClick }, sharedProps, restProps, linkOverrideProps, { children: [startEnhancer && (_jsx(StartEnhancer, __assign({ "data-testid": "breadcrumb-item-startenhancer-".concat(index) }, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }))), children, endEnhancer && (_jsx(EndEnhancer, __assign({ "data-testid": "breadcrumb-item-endenhancer-".concat(index) }, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) })))] }))), !isLastChild && (_jsx(BreadcrumbSeparator, __assign({ style: { '--sw-margin-inline': px2rem(gap * 4) }, "data-testid": "breadcrumb-item-separator-".concat(index), "aria-hidden": true }, sharedProps, separatorWrapperProps, { children: separator })))] })));
+});
 BreadcrumbItem.displayName = 'BreadcrumbItem';
+BreadcrumbItem.__standard = 'Component';
 export default BreadcrumbItem;

package/esm/breadcrumb/breadcrumb.d.ts

@@ -1,6 +1,8 @@
+import { type ReactElement } from 'react';
 import { BreadcrumbProps } from './types';
 declare const Breadcrumb: {
-    ({ children, separator, gap, overrides, }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, separator, gap, maxItems, className, style, overrides, }: BreadcrumbProps): ReactElement;
     displayName: string;
+    __standard: string;
 };
 export default Breadcrumb;

package/esm/breadcrumb/breadcrumb.js

@@ -1,27 +1,56 @@
-import { __assign, __read } from "tslib";
+import { __assign, __read, __spreadArray } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import React from 'react';
+// libs
+import { Children, isValidElement } from 'react';
+// components
 import BreadcrumbItem from './breadcrumb-item';
+// hooks
 import { useOverrides } from '../overrides';
+import { useBreadcrumbWidths } from './hooks/useBreadCrumbWidths';
+import { useLocale } from '../locale';
+// styles
 import { DEFAULT_SEPARATOR, StyledWrapper } from './styled-components';
 var Breadcrumb = function (_a) {
-    var children = _a.children, _b = _a.separator, separator = _b === void 0 ? DEFAULT_SEPARATOR : _b, _c = _a.gap, gap = _c === void 0 ? 4 : _c, _d = _a.overrides, overrides = _d === void 0 ? {} : _d;
+    var children = _a.children, _b = _a.separator, separator = _b === void 0 ? DEFAULT_SEPARATOR : _b, _c = _a.gap, gap = _c === void 0 ? 4 : _c, maxItems = _a.maxItems, className = _a.className, style = _a.style, _d = _a.overrides, overrides = _d === void 0 ? {} : _d;
+    var breadCrumb = useLocale().breadCrumb;
     var _e = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledWrapper), 2), Root = _e[0], rootProps = _e[1];
+    var validChildren = Children.toArray(children).filter(isValidElement);
     var sharedProps = { $gap: gap };
-    var validChildren = React.Children.toArray(children).filter(React.isValidElement);
-    var breadcrumbItems = validChildren.map(function (child, index) {
-        var _a, _b, _c;
-        return child.type === BreadcrumbItem ? (React.cloneElement(child, {
-            key: (_a = child.key) !== null && _a !== void 0 ? _a : "breadcrumbItem-".concat(index),
-            separator: (_b = child.props.separator) !== null && _b !== void 0 ? _b : separator,
-            gap: (_c = child.props.gap) !== null && _c !== void 0 ? _c : gap,
-        })) : (_createElement(BreadcrumbItem, __assign({}, sharedProps, { key: "breadcrumbItem-".concat(index), separator: separator, gap: gap }), child));
-    });
-    return (_jsx("nav", { children: _jsx(Root, __assign({ "data-testid": "breadcrumb-root" }, sharedProps, rootProps, { children: React.Children.map(breadcrumbItems, function (breadcrumbItem, index) {
-                var isLastChild = index === breadcrumbItems.length - 1;
-                return React.cloneElement(breadcrumbItem, { isLastChild: isLastChild, index: index });
-            }) }), void 0) }, void 0));
+    var _f = useBreadcrumbWidths(validChildren.length), containerRef = _f.containerRef, itemRefs = _f.itemRefs, menuButtonWidthRef = _f.menuButtonWidthRef, visibleItemsCount = _f.visibleItemsCount, isCollapsed = _f.isCollapsed;
+    var renderCondensedBreadcrumbs = function (maxDisplayItems) {
+        var totalItems = validChildren.length;
+        var indices = __spreadArray([0], __read(Array.from({ length: maxDisplayItems - 1 }, function (_, i) { return totalItems - maxDisplayItems + 1 + i; })), false);
+        return indices.flatMap(function (actualIndex, idx) {
+            var child = validChildren[actualIndex];
+            var breadcrumbItem = (_createElement(BreadcrumbItem, __assign({}, sharedProps, { key: "breadcrumbItem-".concat(actualIndex), separator: separator, gap: gap, index: actualIndex, isLastChild: actualIndex === totalItems - 1 }, (child.type === BreadcrumbItem ? child.props : {}), { containerRef: containerRef }), child.type === BreadcrumbItem ? child.props.children : child));
+            if (idx === 0 && totalItems > maxDisplayItems) {
+                var hiddenItems = validChildren.slice(1, totalItems - (maxDisplayItems - 1));
+                var menuItem = (_jsx(BreadcrumbItem, __assign({ ref: function (el) {
+                        if (el && el.offsetWidth > 0) {
+                            menuButtonWidthRef.current = el.offsetWidth;
+                        }
+                    }, separator: separator, gap: gap, index: 1, menuSeparator: true, collapsedItems: hiddenItems, collapsedItemsTooltip: breadCrumb.collapsedItemsTooltip, containerRef: containerRef }, { children: "..." }), "breadcrumb-menu"));
+                return [breadcrumbItem, menuItem];
+            }
+            return [breadcrumbItem];
+        });
+    };
+    var renderBreadcrumbs = function () {
+        var totalItems = validChildren.length;
+        var shouldCondense = maxItems
+            ? totalItems > maxItems
+            : isCollapsed && visibleItemsCount !== null && totalItems > visibleItemsCount;
+        if (!shouldCondense) {
+            return validChildren.map(function (child, index) { return (_createElement(BreadcrumbItem, __assign({}, sharedProps, { key: child.key || "item-".concat(index), separator: separator, gap: gap, isLastChild: index === totalItems - 1, index: index }, (child.type === BreadcrumbItem ? child.props : {}), { containerRef: containerRef, ref: function (el) {
+                    itemRefs.current[index] = el;
+                } }), child.type === BreadcrumbItem ? child.props.children : child)); });
+        }
+        var effectiveMaxItems = maxItems || (visibleItemsCount !== null && visibleItemsCount !== void 0 ? visibleItemsCount : 2);
+        return renderCondensedBreadcrumbs(Math.max(2, effectiveMaxItems));
+    };
+    return (_jsx("nav", __assign({ className: "w-full flex items-center justify-center" }, { children: _jsx(Root, __assign({ ref: containerRef, "data-testid": "breadcrumb-root", className: className, style: style, tabIndex: -1 }, sharedProps, rootProps, { children: renderBreadcrumbs() })) })));
 };
 Breadcrumb.displayName = 'Breadcrumb';
+Breadcrumb.__standard = 'Component';
 export default Breadcrumb;

package/esm/breadcrumb/hooks/useBreadCrumbWidths.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const useBreadcrumbWidths: (totalItems: number) => {
+    containerRef: import("react").RefObject<HTMLDivElement>;
+    itemRefs: import("react").MutableRefObject<(HTMLElement | null)[]>;
+    menuButtonWidthRef: import("react").MutableRefObject<number>;
+    visibleItemsCount: number | null;
+    isCollapsed: boolean;
+};

package/esm/breadcrumb/hooks/useBreadCrumbWidths.js

@@ -0,0 +1,45 @@
+import { __read } from "tslib";
+import { useMemo, useRef, useState, useCallback, useEffect } from 'react';
+import { calculateVisibleItems as computeVisibleItemsCount } from '../utils/calculateVisibleItems';
+import _debounce from 'lodash/debounce';
+export var useBreadcrumbWidths = function (totalItems) {
+    var containerRef = useRef(null);
+    var itemRefs = useRef([]);
+    var itemWidthsRef = useRef([]);
+    var menuButtonWidthRef = useRef(40);
+    var _a = __read(useState(null), 2), visibleItemsCount = _a[0], setVisibleItemsCount = _a[1];
+    var measureAndUpdateVisibility = useCallback(function () {
+        if (!containerRef.current)
+            return;
+        itemRefs.current = itemRefs.current.slice(0, totalItems);
+        if (itemWidthsRef.current.length === 0 || itemWidthsRef.current.length !== totalItems) {
+            var hasAllRefs = itemRefs.current.length === totalItems && itemRefs.current.every(function (ref) { return ref !== null; });
+            if (!hasAllRefs)
+                return;
+            itemWidthsRef.current = itemRefs.current.map(function (ref) { return (ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0; });
+        }
+        var containerWidth = containerRef.current.clientWidth;
+        var visibleCount = computeVisibleItemsCount(containerWidth, itemWidthsRef.current, menuButtonWidthRef.current, totalItems);
+        setVisibleItemsCount(visibleCount);
+    }, [totalItems]);
+    // Debounced measure events to prevent exessive updates
+    var debouncedMeasureAndUpdateVisibility = useMemo(function () { return _debounce(measureAndUpdateVisibility, 100); }, [measureAndUpdateVisibility]);
+    useEffect(function () {
+        if (!containerRef.current)
+            return;
+        // reset whenever totalItems changes
+        setVisibleItemsCount(null);
+        var resizeObserver = new ResizeObserver(debouncedMeasureAndUpdateVisibility);
+        resizeObserver.observe(containerRef.current);
+        return function () {
+            resizeObserver.disconnect();
+        };
+    }, [debouncedMeasureAndUpdateVisibility, totalItems]);
+    return {
+        containerRef: containerRef,
+        itemRefs: itemRefs,
+        menuButtonWidthRef: menuButtonWidthRef,
+        visibleItemsCount: visibleItemsCount,
+        isCollapsed: visibleItemsCount !== null ? visibleItemsCount < totalItems : false,
+    };
+};

package/esm/breadcrumb/styled-components.d.ts

@@ -1,6 +1,6 @@
-export declare const StyledStartEnhancer: import("../style/styled").StyledComponent;
-export declare const StyledEndEnhancer: import("../style/styled").StyledComponent;
-export declare const StyledWrapper: import("../style/styled").StyledComponent;
-export declare const StyledSeparator: import("../style/styled").StyledComponent;
-export declare const StyledListItem: import("../style/styled").StyledComponent;
+export declare const StyledStartEnhancer: import("../style").StyledComponent;
+export declare const StyledEndEnhancer: import("../style").StyledComponent;
+export declare const StyledWrapper: import("../style").StyledComponent;
+export declare const StyledSeparator: import("../style").StyledComponent;
+export declare const StyledListItem: import("../style").StyledComponent;
 export declare const DEFAULT_SEPARATOR: import("react/jsx-runtime").JSX.Element;

package/esm/breadcrumb/styled-components.js

@@ -3,13 +3,7 @@ import { styled } from '../style';
 import ChevronRightIcon from '../icon/components/chevron-right';
 export var StyledStartEnhancer = styled('div', 'inline-flex items-center mr-1');
 export var StyledEndEnhancer = styled('div', 'inline-flex items-center ml-1');
-export var StyledWrapper = styled('ul', 'm-0 p-0 inline-flex items-center flex-wrap');
-export var StyledSeparator = styled('span', 'inline-flex items-center', function (_, _a) {
-    var $gap = _a.$gap;
-    return {
-        marginLeft: "".concat($gap * 4, "px"),
-        marginRight: "".concat($gap * 4, "px"),
-    };
-});
-export var StyledListItem = styled('li', 'm-0 inline-flex items-center');
-export var DEFAULT_SEPARATOR = _jsx(ChevronRightIcon, { size: 10 }, void 0);
+export var StyledWrapper = styled('ul', 'w-full m-0 p-0 inline-flex items-center flex-nowrap');
+export var StyledSeparator = styled('span', 'inline-flex items-center mx-[--sw-margin-inline]');
+export var StyledListItem = styled('li', 'm-0 inline-flex items-center whitespace-nowrap');
+export var DEFAULT_SEPARATOR = _jsx(ChevronRightIcon, { size: 10 });

package/esm/breadcrumb/types.d.ts

@@ -1,32 +1,44 @@
 import React, { ReactNode } from 'react';
 import { Override } from '../overrides';
 import { LinkProps } from '../link';
-export declare type Enhancer<SharedProps> = ReactNode | ((props: SharedProps) => ReactNode);
-export declare type BreadcrumbItemSharedProps = {
+import { SpacewebComponentProps } from '../types';
+export type Enhancer<SharedProps> = ReactNode | ((props: SharedProps) => ReactNode);
+export type BreadcrumbItemSharedProps = {
     $isLastChild?: boolean;
     $withStartEnhancer: boolean;
     $withEndEnhancer: boolean;
     $gap: number;
 };
-export declare type BreadcrumbSharedProps = {
+export type BreadcrumbSharedProps = {
     $gap: number;
 };
-export declare type BreadcrumbProps = {
+export type BreadcrumbProps = SpacewebComponentProps<{
     separator?: ReactNode;
     gap?: number;
+    maxItems?: number;
+    collapsedItemsTooltip?: string;
     overrides?: {
         Root?: Override<Record<string, any>>;
     };
     children: ReactNode;
+}>;
+export type BreadcrumbEllipsisProps = {
+    focusBreadcrumbContainer: () => boolean;
+    collapsedItems: React.ReactElement[];
+    collapsedItemsTooltip: string;
 };
-export declare type BreadcrumbItemProps = Omit<LinkProps, 'onClick'> & {
+export type BreadcrumbItemProps = Omit<LinkProps, 'onClick'> & {
     isLastChild?: boolean;
+    menuSeparator?: boolean;
+    containerRef?: React.RefObject<HTMLElement>;
     gap?: number;
     onClick?: (event: React.MouseEvent<HTMLElement>, index: number) => void;
     index?: number;
     separator?: ReactNode;
     startEnhancer?: Enhancer<BreadcrumbItemSharedProps>;
     endEnhancer?: Enhancer<BreadcrumbItemSharedProps>;
+    collapsedItems?: React.ReactElement[];
+    collapsedItemsTooltip?: string;
     overrides?: {
         Link?: Override<Record<string, any>>;
         StartEnhancer?: Override<Record<string, any>>;

package/esm/breadcrumb/utils/calculateVisibleItems.d.ts

@@ -0,0 +1,2 @@
+export declare const BUFFER = 10;
+export declare function calculateVisibleItems(containerWidth: number, itemWidths: number[], menuButtonWidth: number, totalItems: number): number;

package/esm/breadcrumb/utils/calculateVisibleItems.js

@@ -0,0 +1,18 @@
+export var BUFFER = 10;
+export function calculateVisibleItems(containerWidth, itemWidths, menuButtonWidth, totalItems) {
+    if (totalItems <= 1)
+        return totalItems;
+    var availableWidth = containerWidth - menuButtonWidth;
+    var usedWidth = itemWidths[0] + itemWidths[itemWidths.length - 1];
+    var visibleCount = 2;
+    for (var i = itemWidths.length - 2; i > 0; i--) {
+        var nextWidth = usedWidth + itemWidths[i];
+        if (nextWidth <= availableWidth) {
+            usedWidth = nextWidth;
+            visibleCount += 1;
+        }
+        else
+            break;
+    }
+    return Math.max(2, visibleCount);
+}

package/esm/button/Button.d.ts

@@ -1,33 +1,32 @@
-import * as React from 'react';
-declare const Button: React.ForwardRefExoticComponent<Omit<{
-    $as?: React.ElementType<any> | undefined;
-    className?: import("..").Styles;
-    style?: import("..").Styles;
+import { type MouseEvent } from 'react';
+import type { Styles } from '../types';
+declare const Button: import("react").ForwardRefExoticComponent<Omit<{
     size?: import("./types").Size | undefined;
     shape?: import("./types").Shape | undefined;
-    variant?: import("..").Variant | undefined;
-    intent?: import("..").Intent | undefined;
+    variant?: import("../types").Variant | undefined;
+    intent?: import("../types").Intent | undefined;
     isLoading?: boolean | undefined;
     isSelected?: boolean | undefined;
     animate?: boolean | undefined;
+    dropdownContent?: import("react").ReactNode | import("../baseui/popover").StatefulContentRenderProp;
     disabled?: boolean | undefined;
     fullWidth?: boolean | undefined;
     autoFocus?: boolean | undefined;
-    role?: React.AriaRole | undefined;
+    role?: import("react").AriaRole | undefined;
     href?: string | undefined;
     target?: string | undefined;
     rel?: string | undefined;
-    children?: React.ReactNode;
-    endEnhancer?: React.ReactNode | React.ComponentType<any>;
-    onClick?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => any) | undefined;
+    children?: import("react").ReactNode;
+    endEnhancer?: import("react").ReactNode | import("react").ComponentType<any>;
+    onClick?: ((event: MouseEvent<HTMLElement, globalThis.MouseEvent>) => any) | undefined;
     overrides?: import("./types").ButtonOverrides | undefined;
-    startEnhancer?: React.ReactNode | React.ComponentType<any>;
+    startEnhancer?: import("react").ReactNode | import("react").ComponentType<any>;
     type?: "button" | "reset" | "submit" | undefined;
-    tooltipContent?: React.ReactNode | import("../baseui/popover").ContentRenderProp;
+    tooltipContent?: import("react").ReactNode | import("../baseui/popover").ContentRenderProp;
     tabIndex?: number | undefined;
-}, "style" | "className"> & {
-    $as?: React.ElementType<any> | undefined;
-    className?: import("..").Styles;
-    style?: import("..").Styles;
-} & React.RefAttributes<HTMLButtonElement>>;
+}, "className" | "style"> & {
+    $as?: import("react").ElementType | undefined;
+    className?: import("../types").ClassName;
+    style?: Styles;
+} & import("react").RefAttributes<unknown>>;
 export default Button;