@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/baseui/tree-view/styled-components.js

@@ -7,32 +7,31 @@ LICENSE file in the root directory of this source tree.
 */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledLabelInteractable = exports.StyledNoIconContainer = exports.StyledIconContainer = exports.StyledItemContent = exports.StyledTreeItem = exports.StyledTreeItemList = void 0;
+var tslib_1 = require("tslib");
 var style_1 = require("../../style");
-exports.StyledTreeItemList = (0, style_1.styled)('ul', 'my-0 overflow-auto py-0 relative outline-none', function (_, _a) {
+var classNames_1 = tslib_1.__importDefault(require("../../classNames"));
+exports.StyledTreeItemList = (0, style_1.styled)('ul', 'my-0 overflow-auto py-0 relative outline-none border-0', function (_, _a) {
     var $indentGuides = _a.$indentGuides, $isChildNode = _a.$isChildNode, _b = _a.$expanded, $expanded = _b === void 0 ? true : _b;
-    return {
-        marginLeft: $isChildNode ? '14px' : 0,
-        paddingLeft: $isChildNode ? '6px' : 0,
-        display: $expanded ? 'block' : 'none',
-        borderLeftWidth: $indentGuides && $isChildNode ? '1px' : 'none',
-        borderLeftStyle: $indentGuides && $isChildNode ? 'solid' : 'none',
-        borderLeftColor: $indentGuides && $isChildNode ? 'transparent' : 'none',
-    };
+    return (0, classNames_1.default)([
+        $isChildNode ? 'ml-3.5' : 'ml-0',
+        $isChildNode ? 'pl-1.5' : 'pl-0',
+        $expanded ? 'block' : 'hidden',
+        $indentGuides && $isChildNode ? 'border-l-1' : 'border-l-0',
+        $indentGuides && $isChildNode ? 'border-solid' : 'border-none',
+        $indentGuides && $isChildNode ? 'border-l-transparent' : '',
+    ]);
 });
 exports.StyledTreeItemList.displayName = 'StyledTreeItemList';
 exports.StyledTreeItem = (0, style_1.styled)('li', 'm-0 overflow-auto p-0 relative outline-none', function (_, _a) {
     var $isLeafNode = _a.$isLeafNode;
-    return ({
-        cursor: $isLeafNode ? 'auto' : 'pointer',
-    });
+    return $isLeafNode ? 'cursor-auto' : 'cursor-pointer';
 });
 exports.StyledTreeItem.displayName = 'StyledTreeItem';
-exports.StyledItemContent = (0, style_1.styled)('div', 'text-14 leading-10 px-1.5 py-1 items-center flex border-box m-0', {
-    outlineOffset: '-3px',
-});
+exports.StyledItemContent = (0, style_1.styled)('div', 'text-14 leading-6.25 px-1.5 py-1 items-center flex border-box m-0 -outline-offset-3');
 exports.StyledItemContent.displayName = 'StyledItemContent';
 exports.StyledIconContainer = (0, style_1.styled)('div', 'flex items-center my-0 mr-1.5 h-4 w-4 justify-center');
 exports.StyledIconContainer.displayName = 'StyledIconContainer';
+// @ts-expect-error TS(2345): Argument of type '() => { height: string; }' is no... Remove this comment to see the full error message
 exports.StyledNoIconContainer = (0, style_1.styled)('div', 'my-0 w-0 mr-1.5 items-center flex justify-center', function () { return ({
     height: '1em',
 }); });

package/baseui/tree-view/tree-label-interactable.d.ts

@@ -1,8 +1,8 @@
-import type { Override } from '../helpers/overrides';
+import { Overrides } from '../../overrides';
 import type { ComponentType, PropsWithChildren } from 'react';
 declare const TreeLabelInteractable: ComponentType<PropsWithChildren<{
     overrides?: {
-        LabelInteractable: Override;
+        LabelInteractable: Overrides<Record<string, any>>;
     };
 }>>;
 export default TreeLabelInteractable;

package/baseui/tree-view/tree-label-interactable.js

@@ -3,18 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = require("./styled-components");
-var overrides_1 = require("../helpers/overrides");
+var overrides_1 = require("../../overrides");
 var TreeLabelInteractable = function (_a) {
-    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, props = (0, tslib_1.__rest)(_a, ["overrides"]);
-    var LabelInteractable = (0, overrides_1.getOverride)(overrides.LabelInteractable) || styled_components_1.StyledLabelInteractable;
+    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, props = tslib_1.__rest(_a, ["overrides"]);
+    var _c = tslib_1.__read((0, overrides_1.getOverrides)(overrides.LabelInteractable, styled_components_1.StyledLabelInteractable), 1), LabelInteractable = _c[0];
     return (
     // $FlowExpectedError[cannot-spread-inexact]
     (0, jsx_runtime_1.jsx)(LabelInteractable
     // @ts-ignore
-    , (0, tslib_1.__assign)({ 
+    , tslib_1.__assign({ 
         // @ts-ignore
         onClick: function (e) { return e.stopPropagation(); }, 
         // @ts-ignore
-        onKeyDown: function (e) { return e.stopPropagation(); } }, props), void 0));
+        onKeyDown: function (e) { return e.stopPropagation(); } }, props)));
 };
 exports.default = TreeLabelInteractable;

package/baseui/tree-view/tree-label.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = require("./styled-components");
-var chevron_right_1 = (0, tslib_1.__importDefault)(require("../../icon/components/chevron-right"));
-var chevron_down_1 = (0, tslib_1.__importDefault)(require("../../icon/components/chevron-down"));
-var overrides_1 = require("../helpers/overrides");
+var chevron_right_1 = tslib_1.__importDefault(require("../../icon/components/chevron-right"));
+var chevron_down_1 = tslib_1.__importDefault(require("../../icon/components/chevron-down"));
 var box_1 = require("../../box");
+var overrides_1 = require("../../overrides");
 var TreeLabel = function (_a) {
-    var hasChildren = _a.hasChildren, isExpanded = _a.isExpanded, label = _a.label, _b = _a.overrides, overrides = _b === void 0 ? {} : _b, node = _a.node, isSelected = _a.isSelected, isFocusVisible = _a.isFocusVisible, props = (0, tslib_1.__rest)(_a, ["hasChildren", "isExpanded", "label", "overrides", "node", "isSelected", "isFocusVisible"]);
+    var hasChildren = _a.hasChildren, isExpanded = _a.isExpanded, label = _a.label, _b = _a.overrides, overrides = _b === void 0 ? {} : _b, node = _a.node, isSelected = _a.isSelected, isFocusVisible = _a.isFocusVisible, props = tslib_1.__rest(_a, ["hasChildren", "isExpanded", "label", "overrides", "node", "isSelected", "isFocusVisible"]);
     var sharedProps = {
         $isExpanded: !!isExpanded,
         $isSelected: !!isSelected,
@@ -16,13 +16,13 @@ var TreeLabel = function (_a) {
         $hasChildren: !!hasChildren,
     };
     var IconContainerOverride = overrides.IconContainer, ExpandIconOverride = overrides.ExpandIcon, CollapseIconOverride = overrides.CollapseIcon, LeafIconContainerOverride = overrides.LeafIconContainer, LeafIconOverride = overrides.LeafIcon, TreeItemContentOverride = overrides.TreeItemContent;
-    var IconContainer = (0, overrides_1.getOverride)(IconContainerOverride) || styled_components_1.StyledIconContainer;
-    var _c = (0, tslib_1.__read)((0, overrides_1.getOverrides)(ExpandIconOverride, chevron_right_1.default), 2), Right = _c[0], RightProps = _c[1];
-    var CollapseIcon = (0, overrides_1.getOverride)(CollapseIconOverride) || chevron_down_1.default;
-    var LeafIconContainer = (0, overrides_1.getOverride)(LeafIconContainerOverride) || styled_components_1.StyledIconContainer;
-    var TreeItemContent = (0, overrides_1.getOverride)(TreeItemContentOverride) || styled_components_1.StyledItemContent;
+    var _c = tslib_1.__read((0, overrides_1.useOverrides)(IconContainerOverride, styled_components_1.StyledIconContainer), 2), IconContainer = _c[0], iconContainerProps = _c[1];
+    var _d = tslib_1.__read((0, overrides_1.useOverrides)(ExpandIconOverride, chevron_right_1.default), 2), Right = _d[0], RightProps = _d[1];
+    var _e = tslib_1.__read((0, overrides_1.useOverrides)(CollapseIconOverride, chevron_down_1.default), 2), CollapseIcon = _e[0], collpaseProps = _e[1];
+    var _f = tslib_1.__read((0, overrides_1.useOverrides)(LeafIconContainerOverride, styled_components_1.StyledIconContainer), 2), LeafIconContainer = _f[0], leftIconContainerProps = _f[1];
+    var _g = tslib_1.__read((0, overrides_1.useOverrides)(TreeItemContentOverride, styled_components_1.StyledItemContent), 1), TreeItemContent = _g[0];
     return (
     // $FlowExpectedError[cannot-spread-inexact]
-    (0, jsx_runtime_1.jsxs)(TreeItemContent, (0, tslib_1.__assign)({}, sharedProps, props, { children: [hasChildren && ((0, jsx_runtime_1.jsx)(IconContainer, (0, tslib_1.__assign)({}, sharedProps, (0, overrides_1.getOverrideProps)(IconContainerOverride), { children: !isExpanded ? ((0, jsx_runtime_1.jsx)(Right, (0, tslib_1.__assign)({ size: 8 }, sharedProps, RightProps), void 0)) : ((0, jsx_runtime_1.jsx)(CollapseIcon, (0, tslib_1.__assign)({ size: 8 }, sharedProps, (0, overrides_1.getOverrideProps)(CollapseIconOverride)), void 0)) }), void 0)), !hasChildren && ((0, jsx_runtime_1.jsx)(LeafIconContainer, (0, tslib_1.__assign)({}, sharedProps, (0, overrides_1.getOverrideProps)(LeafIconContainerOverride), { children: (0, jsx_runtime_1.jsx)(box_1.Box, { className: "h-4 w-4 bg-white" }, void 0) }), void 0)), typeof label === 'function' ? label(node) : label] }), void 0));
+    (0, jsx_runtime_1.jsxs)(TreeItemContent, tslib_1.__assign({}, sharedProps, props, { children: [hasChildren && ((0, jsx_runtime_1.jsx)(IconContainer, tslib_1.__assign({}, sharedProps, iconContainerProps, { children: !isExpanded ? ((0, jsx_runtime_1.jsx)(Right, tslib_1.__assign({ size: 8 }, sharedProps, RightProps))) : ((0, jsx_runtime_1.jsx)(CollapseIcon, tslib_1.__assign({ size: 8 }, sharedProps, collpaseProps))) }))), !hasChildren && ((0, jsx_runtime_1.jsx)(LeafIconContainer, tslib_1.__assign({}, sharedProps, leftIconContainerProps, { children: (0, jsx_runtime_1.jsx)(box_1.Box, { className: "h-4 w-4" }) }))), typeof label === 'function' ? label(node) : label] })));
 };
 exports.default = TreeLabel;

package/baseui/tree-view/tree-node.js

@@ -8,12 +8,12 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-var React = (0, tslib_1.__importStar)(require("react"));
+var React = tslib_1.__importStar(require("react"));
 var styled_components_1 = require("./styled-components");
-var tree_label_1 = (0, tslib_1.__importDefault)(require("./tree-label"));
-var overrides_1 = require("../helpers/overrides");
+var tree_label_1 = tslib_1.__importDefault(require("./tree-label"));
+var overrides_1 = require("../../overrides");
 var TreeNode = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(TreeNode, _super);
+    tslib_1.__extends(TreeNode, _super);
     function TreeNode() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.treeItemRef = React.createRef();
@@ -40,14 +40,15 @@ var TreeNode = /** @class */ (function (_super) {
         this.props.removeRef(this.props.getId(this.props.node));
     };
     TreeNode.prototype.render = function () {
-        var _a = this.props, indentGuides = _a.indentGuides, node = _a.node, getId = _a.getId, onToggle = _a.onToggle, _b = _a.overrides, overrides = _b === void 0 ? {} : _b, renderAll = _a.renderAll, selectedNodeId = _a.selectedNodeId, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, addRef = _a.addRef, removeRef = _a.removeRef, isFocusVisible = _a.isFocusVisible;
+        var _a;
+        var _b = this.props, indentGuides = _b.indentGuides, node = _b.node, getId = _b.getId, onToggle = _b.onToggle, _c = _b.overrides, overrides = _c === void 0 ? {} : _c, renderAll = _b.renderAll, selectedNodeId = _b.selectedNodeId, onKeyDown = _b.onKeyDown, onFocus = _b.onFocus, onBlur = _b.onBlur, addRef = _b.addRef, removeRef = _b.removeRef, isFocusVisible = _b.isFocusVisible;
         var children = node.children, isExpanded = node.isExpanded, label = node.label;
-        var hasChildren = children && children.length !== 0;
+        var hasChildren = (_a = (children && children.length !== 0)) !== null && _a !== void 0 ? _a : false;
         var TreeItemListOverride = overrides.TreeItemList, TreeItemOverride = overrides.TreeItem, TreeLabelOverride = overrides.TreeLabel;
-        var TreeItemList = (0, overrides_1.getOverride)(TreeItemListOverride) || styled_components_1.StyledTreeItemList;
-        var TreeItem = (0, overrides_1.getOverride)(TreeItemOverride) || styled_components_1.StyledTreeItem;
-        var TreeLabel = (0, overrides_1.getOverride)(TreeLabelOverride) || tree_label_1.default;
-        return ((0, jsx_runtime_1.jsxs)(TreeItem, (0, tslib_1.__assign)({ role: "treeitem", ref: this.treeItemRef, "data-nodeid": getId(node), tabIndex: selectedNodeId === getId(node) ? 0 : -1, onKeyDown: function (e) { return onKeyDown && onKeyDown(e, node); }, onBlur: onBlur, onFocus: this.onFocus, "aria-expanded": isExpanded, "$isLeafNode": !hasChildren }, (0, overrides_1.getOverrideProps)(TreeItemOverride), { children: [(0, jsx_runtime_1.jsx)(TreeLabel, (0, tslib_1.__assign)({ onClick: this.onToggle, node: node, hasChildren: hasChildren, isExpanded: isExpanded, isSelected: selectedNodeId === getId(node), isFocusVisible: isFocusVisible, label: label, overrides: overrides }, (0, overrides_1.getOverrideProps)(TreeLabelOverride)), void 0), children && (isExpanded || renderAll) && ((0, jsx_runtime_1.jsx)(TreeItemList, (0, tslib_1.__assign)({ role: "group", "$indentGuides": !!indentGuides, "$isChildNode": true, "$expanded": !!isExpanded }, (0, overrides_1.getOverrideProps)(TreeItemListOverride), { children: children.map(function (node, index) { return ((0, jsx_runtime_1.jsx)(TreeNode, { indentGuides: !!indentGuides, renderAll: renderAll, node: node, getId: getId, onToggle: onToggle, overrides: overrides, selectedNodeId: selectedNodeId, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, addRef: addRef, removeRef: removeRef, isFocusVisible: isFocusVisible }, index)); }) }), void 0))] }), void 0));
+        var _d = tslib_1.__read((0, overrides_1.getOverrides)(TreeItemListOverride, styled_components_1.StyledTreeItemList), 2), TreeItemList = _d[0], treeItemListProps = _d[1];
+        var _e = tslib_1.__read((0, overrides_1.getOverrides)(TreeItemOverride, styled_components_1.StyledTreeItem), 2), TreeItem = _e[0], treeItemProps = _e[1];
+        var _f = tslib_1.__read((0, overrides_1.getOverrides)(TreeLabelOverride, tree_label_1.default), 2), TreeLabel = _f[0], treeLabelProps = _f[1];
+        return ((0, jsx_runtime_1.jsxs)(TreeItem, tslib_1.__assign({ role: "treeitem", ref: this.treeItemRef, "data-nodeid": getId(node), tabIndex: selectedNodeId === getId(node) ? 0 : -1, onKeyDown: function (e) { return onKeyDown && onKeyDown(e, node); }, onBlur: onBlur, onFocus: this.onFocus, "aria-expanded": isExpanded, "$isLeafNode": !hasChildren, "$node": node }, treeItemProps, { children: [(0, jsx_runtime_1.jsx)(TreeLabel, tslib_1.__assign({ onClick: this.onToggle, node: node, hasChildren: hasChildren, isExpanded: isExpanded, isSelected: selectedNodeId === getId(node), isFocusVisible: isFocusVisible, label: label, overrides: overrides }, treeLabelProps)), children && (isExpanded || renderAll) && ((0, jsx_runtime_1.jsx)(TreeItemList, tslib_1.__assign({ role: "group", "$indentGuides": !!indentGuides, "$isChildNode": true, "$expanded": !!isExpanded }, treeItemListProps, { children: children.map(function (childNode, index) { return ((0, jsx_runtime_1.jsx)(TreeNode, { indentGuides: !!indentGuides, renderAll: renderAll, node: childNode, getId: getId, onToggle: onToggle, overrides: overrides, selectedNodeId: selectedNodeId, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, addRef: addRef, removeRef: removeRef, isFocusVisible: isFocusVisible }, getId(childNode))); }) })))] })));
     };
     return TreeNode;
 }(React.Component));

package/baseui/tree-view/tree-view.js

@@ -8,20 +8,20 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-var React = (0, tslib_1.__importStar)(require("react"));
-var tree_node_1 = (0, tslib_1.__importDefault)(require("./tree-node"));
+var React = tslib_1.__importStar(require("react"));
+var tree_node_1 = tslib_1.__importDefault(require("./tree-node"));
 var styled_components_1 = require("./styled-components");
 var utils_1 = require("./utils");
 var focusVisible_1 = require("../utils/focusVisible");
-var overrides_1 = require("../helpers/overrides");
+var overrides_1 = require("../../overrides");
 function TreeView(props) {
     var data = props.data, _a = props.indentGuides, indentGuides = _a === void 0 ? false : _a, onToggle = props.onToggle, _b = props.overrides, overrides = _b === void 0 ? {} : _b, renderAll = props.renderAll, _c = props.getId, getId = _c === void 0 ? utils_1.defaultGetId : _c;
     var RootOverride = overrides.Root;
-    var Root = (0, overrides_1.getOverride)(RootOverride) || styled_components_1.StyledTreeItemList;
+    var _d = tslib_1.__read((0, overrides_1.useOverrides)(RootOverride, styled_components_1.StyledTreeItemList), 2), Root = _d[0], rootProps = _d[1];
     var firstId = data.length > 0 ? getId(data[0]) : 0;
-    var _d = (0, tslib_1.__read)(React.useState(firstId), 2), selectedNodeId = _d[0], setSelectedNodeId = _d[1];
-    var _e = (0, tslib_1.__read)(React.useState(false), 2), focusVisible = _e[0], setFocusVisible = _e[1];
-    var _f = (0, tslib_1.__read)(React.useState(''), 2), typeAheadChars = _f[0], setTypeAheadChars = _f[1];
+    var _e = tslib_1.__read(React.useState(firstId), 2), selectedNodeId = _e[0], setSelectedNodeId = _e[1];
+    var _f = tslib_1.__read(React.useState(false), 2), focusVisible = _f[0], setFocusVisible = _f[1];
+    var _g = tslib_1.__read(React.useState(''), 2), typeAheadChars = _g[0], setTypeAheadChars = _g[1];
     var timeOutRef = React.useRef(null);
     var treeItemRefs = {};
     var focusTreeItem = function (id) {
@@ -117,13 +117,13 @@ function TreeView(props) {
             setFocusVisible(false);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(Root, (0, tslib_1.__assign)({ role: "tree" }, (0, overrides_1.getOverrideProps)(RootOverride), { children: data.map(function (node) { return ((0, jsx_runtime_1.jsx)(tree_node_1.default, { indentGuides: indentGuides, node: node, getId: getId, onToggle: function (node) {
+    return ((0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ role: "tree" }, rootProps, { children: data.map(function (node) { return ((0, jsx_runtime_1.jsx)(tree_node_1.default, { indentGuides: indentGuides, node: node, getId: getId, onToggle: function (node) {
                 onToggle && onToggle(node);
                 focusTreeItem(getId(node));
             }, overrides: overrides, renderAll: renderAll, selectedNodeId: selectedNodeId, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, addRef: function (id, ref) {
                 treeItemRefs[id] = ref;
             }, removeRef: function (id) {
                 delete treeItemRefs[id];
-            }, isFocusVisible: focusVisible }, getId(node))); }) }), void 0));
+            }, isFocusVisible: focusVisible }, getId(node))); }) })));
 }
 exports.default = TreeView;

package/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/baseui/tree-view/utils.js

@@ -140,7 +140,7 @@ exports.getExpandableSiblings = getExpandableSiblings;
 var toggleIsExpanded = function (arr, toggledNode, getId) {
     if (getId === void 0) { getId = function (node) { return (node.id ? node.id : ''); }; }
     return arr.map(function (node) {
-        var newNode = (0, tslib_1.__assign)({}, node);
+        var newNode = tslib_1.__assign({}, node);
         if (getId(newNode) === getId(toggledNode)) {
             newNode.isExpanded = !newNode.isExpanded;
         }

package/baseui/utils/react-18.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.startTransition = void 0;
 var tslib_1 = require("tslib");
-var React = (0, tslib_1.__importStar)(require("react"));
+var React = tslib_1.__importStar(require("react"));
 var startTransition = function (cb) {
     if (React.startTransition) {
         React.startTransition(cb);

package/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/box/Box.js

@@ -7,9 +7,9 @@ var overrides_1 = require("../overrides");
 var style_1 = require("../style");
 var StyledBox = (0, style_1.styled)('div');
 var Box = (0, react_1.forwardRef)(function (props, ref) {
-    var _a = props.overrides, overrides = _a === void 0 ? {} : _a, boxProps = (0, tslib_1.__rest)(props, ["overrides"]);
-    var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Box, StyledBox), 2), Comp = _b[0], overrideProps = _b[1];
-    return (0, jsx_runtime_1.jsx)(Comp, (0, tslib_1.__assign)({ "data-spaceweb": "box", "data-testid": "box" }, boxProps, overrideProps, { ref: ref }), void 0);
+    var _a = props.overrides, overrides = _a === void 0 ? {} : _a, boxProps = tslib_1.__rest(props, ["overrides"]);
+    var _b = tslib_1.__read((0, overrides_1.useOverrides)(overrides.Box, StyledBox), 2), Comp = _b[0], overrideProps = _b[1];
+    return (0, jsx_runtime_1.jsx)(Comp, tslib_1.__assign({ "data-spaceweb": "box", "data-testid": "box" }, boxProps, overrideProps, { ref: ref }));
 });
 Box.displayName = 'Box';
 exports.default = Box;

package/box/index.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Box = void 0;
 var tslib_1 = require("tslib");
 var Box_1 = require("./Box");
-Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Box_1).default; } });
-(0, tslib_1.__exportStar)(require("./types"), exports);
+Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return tslib_1.__importDefault(Box_1).default; } });
+tslib_1.__exportStar(require("./types"), exports);

package/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/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/breadcrumb/breadcrumb-ellipsis.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var popover_1 = require("../popover");
+var menu_1 = require("../menu");
+var button_1 = require("../button");
+var options_1 = tslib_1.__importDefault(require("../icon/components/options"));
+var BreadcrumbEllipsis = function (_a) {
+    var focusBreadcrumbContainer = _a.focusBreadcrumbContainer, collapsedItems = _a.collapsedItems, collapsedItemsTooltip = _a.collapsedItemsTooltip;
+    return ((0, jsx_runtime_1.jsx)(popover_1.StatefulPopover, tslib_1.__assign({ placement: "bottom", returnFocus: focusBreadcrumbContainer, content: (0, jsx_runtime_1.jsx)(menu_1.Menu, { children: collapsedItems.map(function (item, itemIndex) {
+                var _a;
+                return ((0, jsx_runtime_1.jsx)(menu_1.MenuItem, tslib_1.__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: (0, jsx_runtime_1.jsx)(button_1.IconButton, tslib_1.__assign({ size: "xxxs", tooltipContent: collapsedItemsTooltip }, { children: (0, jsx_runtime_1.jsx)(options_1.default, {}) })) })));
+};
+exports.default = BreadcrumbEllipsis;

package/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/breadcrumb/breadcrumb-item.js

@@ -2,24 +2,32 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
+// libs
+var react_1 = tslib_1.__importStar(require("react"));
+var noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+// components
 var typography_1 = require("../typography");
 var link_1 = require("../link");
-var styled_components_1 = require("./styled-components");
+var breadcrumb_ellipsis_1 = tslib_1.__importDefault(require("./breadcrumb-ellipsis"));
+// hooks
 var overrides_1 = require("../overrides");
+var style_1 = require("../style");
+// styles
+var styled_components_1 = require("./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_1.default : _c, _d = _a.index, index = _d === void 0 ? 0 : _d, startEnhancer = _a.startEnhancer, endEnhancer = _a.endEnhancer, _e = _a.separator, separator = _e === void 0 ? styled_components_1.DEFAULT_SEPARATOR : _e, _f = _a.gap, gap = _f === void 0 ? 4 : _f, restProps = (0, tslib_1.__rest)(_a, ["children", "isLastChild", "overrides", "onClick", "index", "startEnhancer", "endEnhancer", "separator", "gap"]);
+var BreadcrumbItem = react_1.default.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_1.default : _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 ? styled_components_1.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 = tslib_1.__rest(_a, ["children", "isLastChild", "overrides", "menuSeparator", "onClick", "containerRef", "index", "startEnhancer", "endEnhancer", "separator", "gap", "collapsedItems", "collapsedItemsTooltip"]);
+    var px2rem = (0, style_1.useStyle)().px2rem;
     var sharedProps = {
         $gap: gap,
         $withStartEnhancer: !!startEnhancer,
@@ -27,15 +35,26 @@ var BreadcrumbItem = function (_a) {
         $isLastChild: isLastChild,
     };
     var mergedOverrides = (0, overrides_1.mergeOverrides)(breadcrumbItemOverrides, overrides);
-    var _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.ListItem, styled_components_1.StyledListItem), 2), ListItem = _g[0], listItemProps = _g[1];
-    var _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Link, !isLastChild ? link_1.Link : typography_1.Typography), 2), LinkOverride = _h[0], linkOverrideProps = _h[1];
-    var _j = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.StartEnhancer, styled_components_1.StyledStartEnhancer), 2), StartEnhancer = _j[0], startEnhancerProps = _j[1];
-    var _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.EndEnhancer, styled_components_1.StyledEndEnhancer), 2), EndEnhancer = _k[0], endEnhancerProps = _k[1];
-    var _l = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Separator, styled_components_1.StyledSeparator), 2), BreadcrumbSeparator = _l[0], separatorWrapperProps = _l[1];
+    var _k = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.ListItem, styled_components_1.StyledListItem), 2), ListItem = _k[0], listItemProps = _k[1];
+    var _l = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Link, !isLastChild ? link_1.Link : typography_1.Typography), 2), LinkOverride = _l[0], linkOverrideProps = _l[1];
+    var _m = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.StartEnhancer, styled_components_1.StyledStartEnhancer), 2), StartEnhancer = _m[0], startEnhancerProps = _m[1];
+    var _o = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.EndEnhancer, styled_components_1.StyledEndEnhancer), 2), EndEnhancer = _o[0], endEnhancerProps = _o[1];
+    var _p = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Separator, styled_components_1.StyledSeparator), 2), BreadcrumbSeparator = _p[0], separatorWrapperProps = _p[1];
     var renderEnhancer = function (enhancer) {
         return typeof enhancer === 'function' ? enhancer(sharedProps) : enhancer;
     };
-    return ((0, jsx_runtime_1.jsxs)(ListItem, (0, tslib_1.__assign)({ "data-testid": "breadcrumb-list-item-".concat(index) }, sharedProps, listItemProps, { children: [(0, jsx_runtime_1.jsxs)(LinkOverride, (0, tslib_1.__assign)({ "data-testid": "breadcrumb-item-link-".concat(index), onClick: function (e) { return onClick(e, index); } }, sharedProps, restProps, linkOverrideProps, { children: [startEnhancer && ((0, jsx_runtime_1.jsx)(StartEnhancer, (0, tslib_1.__assign)({ "data-testid": "breadcrumb-item-startenhancer-".concat(index) }, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }), void 0)), children, endEnhancer && ((0, jsx_runtime_1.jsx)(EndEnhancer, (0, tslib_1.__assign)({ "data-testid": "breadcrumb-item-endenhancer-".concat(index) }, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) }), void 0))] }), void 0), !isLastChild && ((0, jsx_runtime_1.jsx)(BreadcrumbSeparator, (0, tslib_1.__assign)({ "data-testid": "breadcrumb-item-separator-".concat(index), "aria-hidden": true }, sharedProps, separatorWrapperProps, { children: separator }), void 0))] }), void 0));
-};
+    var focusBreadcrumbContainer = (0, react_1.useCallback)(function () {
+        if (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) {
+            containerRef.current.focus();
+        }
+        return true;
+    }, [containerRef]);
+    var handleClick = (0, react_1.useCallback)(function (e) {
+        onClick(e, index);
+        focusBreadcrumbContainer();
+    }, [focusBreadcrumbContainer, index, onClick]);
+    return ((0, jsx_runtime_1.jsxs)(ListItem, tslib_1.__assign({ ref: ref, "data-testid": "breadcrumb-list-item-".concat(index) }, sharedProps, listItemProps, { children: [menuSeparator ? ((0, jsx_runtime_1.jsx)(breadcrumb_ellipsis_1.default, { focusBreadcrumbContainer: focusBreadcrumbContainer, collapsedItems: collapsedItems, collapsedItemsTooltip: collapsedItemsTooltip })) : ((0, jsx_runtime_1.jsxs)(LinkOverride, tslib_1.__assign({ "data-testid": "breadcrumb-item-link-".concat(index), onClick: handleClick }, sharedProps, restProps, linkOverrideProps, { children: [startEnhancer && ((0, jsx_runtime_1.jsx)(StartEnhancer, tslib_1.__assign({ "data-testid": "breadcrumb-item-startenhancer-".concat(index) }, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }))), children, endEnhancer && ((0, jsx_runtime_1.jsx)(EndEnhancer, tslib_1.__assign({ "data-testid": "breadcrumb-item-endenhancer-".concat(index) }, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) })))] }))), !isLastChild && ((0, jsx_runtime_1.jsx)(BreadcrumbSeparator, tslib_1.__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';
 exports.default = BreadcrumbItem;

package/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/breadcrumb/breadcrumb.js

@@ -3,27 +3,56 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var react_2 = (0, tslib_1.__importDefault)(require("react"));
-var breadcrumb_item_1 = (0, tslib_1.__importDefault)(require("./breadcrumb-item"));
+// libs
+var react_2 = require("react");
+// components
+var breadcrumb_item_1 = tslib_1.__importDefault(require("./breadcrumb-item"));
+// hooks
 var overrides_1 = require("../overrides");
+var useBreadCrumbWidths_1 = require("./hooks/useBreadCrumbWidths");
+var locale_1 = require("../locale");
+// styles
 var styled_components_1 = require("./styled-components");
 var Breadcrumb = function (_a) {
-    var children = _a.children, _b = _a.separator, separator = _b === void 0 ? styled_components_1.DEFAULT_SEPARATOR : _b, _c = _a.gap, gap = _c === void 0 ? 4 : _c, _d = _a.overrides, overrides = _d === void 0 ? {} : _d;
-    var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_components_1.StyledWrapper), 2), Root = _e[0], rootProps = _e[1];
+    var children = _a.children, _b = _a.separator, separator = _b === void 0 ? styled_components_1.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 = (0, locale_1.useLocale)().breadCrumb;
+    var _e = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_components_1.StyledWrapper), 2), Root = _e[0], rootProps = _e[1];
+    var validChildren = react_2.Children.toArray(children).filter(react_2.isValidElement);
     var sharedProps = { $gap: gap };
-    var validChildren = react_2.default.Children.toArray(children).filter(react_2.default.isValidElement);
-    var breadcrumbItems = validChildren.map(function (child, index) {
-        var _a, _b, _c;
-        return child.type === breadcrumb_item_1.default ? (react_2.default.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,
-        })) : ((0, react_1.createElement)(breadcrumb_item_1.default, (0, tslib_1.__assign)({}, sharedProps, { key: "breadcrumbItem-".concat(index), separator: separator, gap: gap }), child));
-    });
-    return ((0, jsx_runtime_1.jsx)("nav", { children: (0, jsx_runtime_1.jsx)(Root, (0, tslib_1.__assign)({ "data-testid": "breadcrumb-root" }, sharedProps, rootProps, { children: react_2.default.Children.map(breadcrumbItems, function (breadcrumbItem, index) {
-                var isLastChild = index === breadcrumbItems.length - 1;
-                return react_2.default.cloneElement(breadcrumbItem, { isLastChild: isLastChild, index: index });
-            }) }), void 0) }, void 0));
+    var _f = (0, useBreadCrumbWidths_1.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 = tslib_1.__spreadArray([0], tslib_1.__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 = ((0, react_1.createElement)(breadcrumb_item_1.default, tslib_1.__assign({}, sharedProps, { key: "breadcrumbItem-".concat(actualIndex), separator: separator, gap: gap, index: actualIndex, isLastChild: actualIndex === totalItems - 1 }, (child.type === breadcrumb_item_1.default ? child.props : {}), { containerRef: containerRef }), child.type === breadcrumb_item_1.default ? child.props.children : child));
+            if (idx === 0 && totalItems > maxDisplayItems) {
+                var hiddenItems = validChildren.slice(1, totalItems - (maxDisplayItems - 1));
+                var menuItem = ((0, jsx_runtime_1.jsx)(breadcrumb_item_1.default, tslib_1.__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 ((0, react_1.createElement)(breadcrumb_item_1.default, tslib_1.__assign({}, sharedProps, { key: child.key || "item-".concat(index), separator: separator, gap: gap, isLastChild: index === totalItems - 1, index: index }, (child.type === breadcrumb_item_1.default ? child.props : {}), { containerRef: containerRef, ref: function (el) {
+                    itemRefs.current[index] = el;
+                } }), child.type === breadcrumb_item_1.default ? child.props.children : child)); });
+        }
+        var effectiveMaxItems = maxItems || (visibleItemsCount !== null && visibleItemsCount !== void 0 ? visibleItemsCount : 2);
+        return renderCondensedBreadcrumbs(Math.max(2, effectiveMaxItems));
+    };
+    return ((0, jsx_runtime_1.jsx)("nav", tslib_1.__assign({ className: "w-full flex items-center justify-center" }, { children: (0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ ref: containerRef, "data-testid": "breadcrumb-root", className: className, style: style, tabIndex: -1 }, sharedProps, rootProps, { children: renderBreadcrumbs() })) })));
 };
 Breadcrumb.displayName = 'Breadcrumb';
+Breadcrumb.__standard = 'Component';
 exports.default = Breadcrumb;

package/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;
+};