@activecollab/components 1.0.115 → 1.0.118

package/dist/esm/components/Breadcrumbs/Styles.js

@@ -8,29 +8,36 @@ export var StyledNavElement = styled.nav.withConfig({
 })(["", " ", " ", " ", ""], {
   "width": "100%"
 }, {
-  "overflow": "visible"
+  "overflow": "hidden"
 }, FontStyle, BoxSizingStyle);
 StyledNavElement.displayName = "StyledNavElement";
-export var StyledOList = styled.ul.withConfig({
-  displayName: "Styles__StyledOList",
+export var StyledListWrapper = styled.div.withConfig({
+  displayName: "Styles__StyledListWrapper",
   componentId: "sc-rxaesd-1"
+})(["", ""], {
+  "display": "inline-block"
+});
+StyledListWrapper.displayName = "StyledListWrapper";
+export var StyledOList = styled.ol.withConfig({
+  displayName: "Styles__StyledOList",
+  componentId: "sc-rxaesd-2"
 })(["", " ", " ", " ", " ", " ", ""], {
   "display": "flex"
 }, {
   "alignItems": "flex-start"
+}, {
+  "alignItems": "center"
 }, {
   "listStyleType": "none"
 }, {
   "padding": "0px"
 }, {
   "margin": "0px"
-}, {
-  "alignItems": "center"
 });
 StyledOList.displayName = "StyledOList";
 export var StyledMenuList = styled(List).withConfig({
   displayName: "Styles__StyledMenuList",
-  componentId: "sc-rxaesd-2"
+  componentId: "sc-rxaesd-3"
 })(["", ""], {
   "paddingTop": "0.5rem",
   "paddingBottom": "0.5rem"
@@ -38,7 +45,7 @@ export var StyledMenuList = styled(List).withConfig({
 StyledMenuList.displayName = "StyledMenuList";
 export var StyledBreadcrumbListItem = styled.li.withConfig({
   displayName: "Styles__StyledBreadcrumbListItem",
-  componentId: "sc-rxaesd-3"
+  componentId: "sc-rxaesd-4"
 })(["", " ", ""], {
   "display": "flex"
 }, {

package/dist/esm/components/Breadcrumbs/Styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Breadcrumbs/Styles.ts"],"names":["styled","BoxSizingStyle","FontStyle","List","StyledNavElement","nav","displayName","StyledOList","ul","StyledMenuList","StyledBreadcrumbListItem","li"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AACA,SAASC,IAAT,QAAqB,SAArB;AAEA,OAAO,IAAMC,gBAAgB,GAAGJ,MAAM,CAACK,GAAV;AAAA;AAAA;AAAA,4BACvB;AAAA;AAAA,CADuB,EAEvB;AAAA;AAAA,CAFuB,EAGzBH,SAHyB,EAIzBD,cAJyB,CAAtB;AAOPG,gBAAgB,CAACE,WAAjB,GAA+B,kBAA/B;AAEA,OAAO,IAAMC,WAAW,GAAGP,MAAM,CAACQ,EAAV;AAAA;AAAA;AAAA,sCAClB;AAAA;AAAA,CADkB,EAElB;AAAA;AAAA,CAFkB,EAGlB;AAAA;AAAA,CAHkB,EAIlB;AAAA;AAAA,CAJkB,EAKlB;AAAA;AAAA,CALkB,EAMlB;AAAA;AAAA,CANkB,CAAjB;AASPD,WAAW,CAACD,WAAZ,GAA0B,aAA1B;AAEA,OAAO,IAAMG,cAAc,GAAGT,MAAM,CAACG,IAAD,CAAT;AAAA;AAAA;AAAA,aACrB;AAAA;AAAA;AAAA,CADqB,CAApB;AAIPM,cAAc,CAACH,WAAf,GAA6B,gBAA7B;AAEA,OAAO,IAAMI,wBAAwB,GAAGV,MAAM,CAACW,EAAV;AAAA;AAAA;AAAA,kBAC/B;AAAA;AAAA,CAD+B,EAE/B;AAAA;AAAA,CAF+B,CAA9B;AAKPD,wBAAwB,CAACJ,WAAzB,GAAuC,0BAAvC","sourcesContent":["import styled from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { List } from \"../List\";\n\nexport const StyledNavElement = styled.nav`\n  ${tw`tw-w-full`}\n  ${tw`tw-overflow-visible`}\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\n\nStyledNavElement.displayName = \"StyledNavElement\";\n\nexport const StyledOList = styled.ul`\n  ${tw`tw-flex`}\n  ${tw`tw-items-start`}\n  ${tw`tw-list-none`}\n  ${tw`tw-p-0`}\n  ${tw`tw-m-0`}\n  ${tw`tw-items-center`}\n`;\n\nStyledOList.displayName = \"StyledOList\";\n\nexport const StyledMenuList = styled(List)`\n  ${tw`tw-py-2`}\n`;\n\nStyledMenuList.displayName = \"StyledMenuList\";\n\nexport const StyledBreadcrumbListItem = styled.li`\n  ${tw`tw-flex`}\n  ${tw`tw-flex-shrink-0`}\n`;\n\nStyledBreadcrumbListItem.displayName = \"StyledBreadcrumbListItem\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/Breadcrumbs/Styles.ts"],"names":["styled","BoxSizingStyle","FontStyle","List","StyledNavElement","nav","displayName","StyledListWrapper","div","StyledOList","ol","StyledMenuList","StyledBreadcrumbListItem","li"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AACA,SAASC,IAAT,QAAqB,SAArB;AAEA,OAAO,IAAMC,gBAAgB,GAAGJ,MAAM,CAACK,GAAV;AAAA;AAAA;AAAA,4BACvB;AAAA;AAAA,CADuB,EAEvB;AAAA;AAAA,CAFuB,EAGzBH,SAHyB,EAIzBD,cAJyB,CAAtB;AAOPG,gBAAgB,CAACE,WAAjB,GAA+B,kBAA/B;AAEA,OAAO,IAAMC,iBAAiB,GAAGP,MAAM,CAACQ,GAAV;AAAA;AAAA;AAAA,aACxB;AAAA;AAAA,CADwB,CAAvB;AAIPD,iBAAiB,CAACD,WAAlB,GAAgC,mBAAhC;AAEA,OAAO,IAAMG,WAAW,GAAGT,MAAM,CAACU,EAAV;AAAA;AAAA;AAAA,sCAClB;AAAA;AAAA,CADkB,EAElB;AAAA;AAAA,CAFkB,EAGlB;AAAA;AAAA,CAHkB,EAIlB;AAAA;AAAA,CAJkB,EAKlB;AAAA;AAAA,CALkB,EAMlB;AAAA;AAAA,CANkB,CAAjB;AASPD,WAAW,CAACH,WAAZ,GAA0B,aAA1B;AAEA,OAAO,IAAMK,cAAc,GAAGX,MAAM,CAACG,IAAD,CAAT;AAAA;AAAA;AAAA,aACrB;AAAA;AAAA;AAAA,CADqB,CAApB;AAIPQ,cAAc,CAACL,WAAf,GAA6B,gBAA7B;AAEA,OAAO,IAAMM,wBAAwB,GAAGZ,MAAM,CAACa,EAAV;AAAA;AAAA;AAAA,kBAC/B;AAAA;AAAA,CAD+B,EAE/B;AAAA;AAAA,CAF+B,CAA9B;AAKPD,wBAAwB,CAACN,WAAzB,GAAuC,0BAAvC","sourcesContent":["import styled from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { List } from \"../List\";\n\nexport const StyledNavElement = styled.nav`\n  ${tw`tw-w-full`}\n  ${tw`tw-overflow-hidden`}\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\n\nStyledNavElement.displayName = \"StyledNavElement\";\n\nexport const StyledListWrapper = styled.div`\n  ${tw`tw-inline-block`}\n`;\n\nStyledListWrapper.displayName = \"StyledListWrapper\";\n\nexport const StyledOList = styled.ol`\n  ${tw`tw-flex`}\n  ${tw`tw-items-start`}\n  ${tw`tw-items-center`}\n  ${tw`tw-list-none`}\n  ${tw`tw-p-0`}\n  ${tw`tw-m-0`}\n`;\n\nStyledOList.displayName = \"StyledOList\";\n\nexport const StyledMenuList = styled(List)`\n  ${tw`tw-py-2`}\n`;\n\nStyledMenuList.displayName = \"StyledMenuList\";\n\nexport const StyledBreadcrumbListItem = styled.li`\n  ${tw`tw-flex`}\n  ${tw`tw-flex-shrink-0`}\n`;\n\nStyledBreadcrumbListItem.displayName = \"StyledBreadcrumbListItem\";\n"],"file":"Styles.js"}

package/dist/index.js

@@ -1,21 +1,21 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('classnames'), require('lodash.debounce'), require('resize-observer-polyfill'), require('react-focus-lock'), require('react-remove-scroll'), require('react-dom'), require('@popperjs/core'), require('react-transition-group'), require('moment'), require('react-day-picker/moment'), require('react-day-picker'), require('react-custom-scrollbars')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', 'classnames', 'lodash.debounce', 'resize-observer-polyfill', 'react-focus-lock', 'react-remove-scroll', 'react-dom', '@popperjs/core', 'react-transition-group', 'moment', 'react-day-picker/moment', 'react-day-picker', 'react-custom-scrollbars'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.components = {}, global.React, global.styled, global.classnames, global.debounce, global.ResizeObserver, global.FocusLock, global.reactRemoveScroll, global.ReactDOM, global.core, global.reactTransitionGroup, global.moment, global.MomentLocaleUtils, global.DayPicker, global.reactCustomScrollbars));
-})(this, (function (exports, React, styled, classnames, debounce, ResizeObserver, FocusLock, reactRemoveScroll, ReactDOM, core, reactTransitionGroup, moment, MomentLocaleUtils, DayPicker, reactCustomScrollbars) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('classnames'), require('resize-observer-polyfill'), require('react-focus-lock'), require('react-remove-scroll'), require('react-dom'), require('@popperjs/core'), require('react-transition-group'), require('moment'), require('react-day-picker/moment'), require('react-day-picker'), require('lodash.debounce'), require('react-custom-scrollbars')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', 'classnames', 'resize-observer-polyfill', 'react-focus-lock', 'react-remove-scroll', 'react-dom', '@popperjs/core', 'react-transition-group', 'moment', 'react-day-picker/moment', 'react-day-picker', 'lodash.debounce', 'react-custom-scrollbars'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.components = {}, global.React, global.styled, global.classnames, global.ResizeObserver, global.FocusLock, global.reactRemoveScroll, global.ReactDOM, global.core, global.reactTransitionGroup, global.moment, global.MomentLocaleUtils, global.DayPicker, global.debounce, global.reactCustomScrollbars));
+})(this, (function (exports, React, styled, classnames, ResizeObserver, FocusLock, reactRemoveScroll, ReactDOM, core, reactTransitionGroup, moment, MomentLocaleUtils, DayPicker, debounce, reactCustomScrollbars) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
   var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
-  var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
   var ResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(ResizeObserver);
   var FocusLock__default = /*#__PURE__*/_interopDefaultLegacy(FocusLock);
   var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
   var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
   var MomentLocaleUtils__default = /*#__PURE__*/_interopDefaultLegacy(MomentLocaleUtils);
   var DayPicker__default = /*#__PURE__*/_interopDefaultLegacy(DayPicker);
+  var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
   function ownKeys(object, enumerableOnly) {
     var keys = Object.keys(object);
@@ -3575,29 +3575,36 @@
   })(["", " ", " ", " ", ""], {
     "width": "100%"
   }, {
-    "overflow": "visible"
+    "overflow": "hidden"
   }, FontStyle, BoxSizingStyle);
   StyledNavElement.displayName = "StyledNavElement";
-  var StyledOList = styled__default["default"].ul.withConfig({
-    displayName: "Styles__StyledOList",
+  var StyledListWrapper = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledListWrapper",
     componentId: "sc-rxaesd-1"
+  })(["", ""], {
+    "display": "inline-block"
+  });
+  StyledListWrapper.displayName = "StyledListWrapper";
+  var StyledOList = styled__default["default"].ol.withConfig({
+    displayName: "Styles__StyledOList",
+    componentId: "sc-rxaesd-2"
   })(["", " ", " ", " ", " ", " ", ""], {
     "display": "flex"
   }, {
     "alignItems": "flex-start"
+  }, {
+    "alignItems": "center"
   }, {
     "listStyleType": "none"
   }, {
     "padding": "0px"
   }, {
     "margin": "0px"
-  }, {
-    "alignItems": "center"
   });
   StyledOList.displayName = "StyledOList";
   var StyledMenuList = styled__default["default"](List).withConfig({
     displayName: "Styles__StyledMenuList",
-    componentId: "sc-rxaesd-2"
+    componentId: "sc-rxaesd-3"
   })(["", ""], {
     "paddingTop": "0.5rem",
     "paddingBottom": "0.5rem"
@@ -3605,7 +3612,7 @@
   StyledMenuList.displayName = "StyledMenuList";
   var StyledBreadcrumbListItem = styled__default["default"].li.withConfig({
     displayName: "Styles__StyledBreadcrumbListItem",
-    componentId: "sc-rxaesd-3"
+    componentId: "sc-rxaesd-4"
   })(["", " ", ""], {
     "display": "flex"
   }, {
@@ -3613,35 +3620,35 @@
   });
   StyledBreadcrumbListItem.displayName = "StyledBreadcrumbListItem";
 
-  var _excluded$O = ["children", "className", "separator", "timeout"];
+  var _excluded$O = ["children", "className", "separator"];
   var Breadcrumbs = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+    var _dimensions$width, _childDimensions$widt;
+
     var children = _ref.children,
         className = _ref.className,
         _ref$separator = _ref.separator,
         separator = _ref$separator === void 0 ? "/" : _ref$separator,
-        _ref$timeout = _ref.timeout,
-        timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
         rest = _objectWithoutProperties(_ref, _excluded$O);
 
     var internalRef = React.useRef(null);
-    var prevWidth = React.useRef();
+    var listWrapperRef = React.useRef(null);
+    var olRef = React.useRef(null);
     var widthCollectionRef = React.useRef([]);
     var handleRef = useForkRef(ref, internalRef);
+
+    var _useState = React.useState(0),
+        _useState2 = _slicedToArray(_useState, 2),
+        menuBreadcrumbs = _useState2[0],
+        setMenuBreadcrumbs = _useState2[1];
+
     var dimensions = useResizeObserver$1(internalRef);
+    var childDimensions = useResizeObserver$1(listWrapperRef);
+    var parentWidth = (_dimensions$width = dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== null && _dimensions$width !== void 0 ? _dimensions$width : 0;
+    var childWidth = (_childDimensions$widt = childDimensions === null || childDimensions === void 0 ? void 0 : childDimensions.width) !== null && _childDimensions$widt !== void 0 ? _childDimensions$widt : 0;
     var childrenCollection = React.useMemo(function () {
       return React__default["default"].Children.toArray(children);
     }, [children]);
 
-    var _useState = React.useState(),
-        _useState2 = _slicedToArray(_useState, 2),
-        width = _useState2[0],
-        setWidth = _useState2[1];
-
-    var _useState3 = React.useState(0),
-        _useState4 = _slicedToArray(_useState3, 2),
-        menuBreadcrumbs = _useState4[0],
-        setMenuBreadcrumbs = _useState4[1];
-
     var _useMemo = React.useMemo(function () {
       return [childrenCollection.slice(0, menuBreadcrumbs), childrenCollection.slice(menuBreadcrumbs, childrenCollection.length)];
     }, [childrenCollection, menuBreadcrumbs]),
@@ -3650,27 +3657,31 @@
         listCollection = _useMemo2[1];
 
     React.useEffect(function () {
-      var _internalRef$current, _internalRef$current2, _prevWidth$current;
+      widthCollectionRef.current = [];
+      setMenuBreadcrumbs(0);
+    }, [childrenCollection.length]);
+    React.useEffect(function () {
+      var diffWidth = childWidth - parentWidth;
 
-      var actualWidth = ((_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.scrollWidth) || 0;
-      var breadcrumbItems = (_internalRef$current2 = internalRef.current) === null || _internalRef$current2 === void 0 ? void 0 : _internalRef$current2.firstElementChild;
-      var enabled = ((_prevWidth$current = prevWidth.current) !== null && _prevWidth$current !== void 0 ? _prevWidth$current : 0) > (width !== null && width !== void 0 ? width : 0);
+      if (diffWidth > 0) {
+        var _offsetWidth, _olRef$current, _olRef$current$queryS, _olRef$current$queryS2, _olRef$current2, _breadcrumbItems$leng;
 
-      if (enabled && width && actualWidth > width) {
-        var diffWidth = actualWidth - width;
+        var separatorWidth = (_offsetWidth = (_olRef$current = olRef.current) === null || _olRef$current === void 0 ? void 0 : (_olRef$current$queryS = _olRef$current.querySelectorAll("[data-role=\"separator\"]")[0]) === null || _olRef$current$queryS === void 0 ? void 0 : _olRef$current$queryS.offsetWidth) !== null && _offsetWidth !== void 0 ? _offsetWidth : 0;
+        var breadcrumbItems = (_olRef$current$queryS2 = (_olRef$current2 = olRef.current) === null || _olRef$current2 === void 0 ? void 0 : _olRef$current2.querySelectorAll("[data-role=\"item\"]")) !== null && _olRef$current$queryS2 !== void 0 ? _olRef$current$queryS2 : [];
         var childWidthCollection = [];
-        var childIndex = widthCollectionRef.current.length === 0 ? 0 : 2;
+        var maxIndex = ((_breadcrumbItems$leng = breadcrumbItems === null || breadcrumbItems === void 0 ? void 0 : breadcrumbItems.length) !== null && _breadcrumbItems$leng !== void 0 ? _breadcrumbItems$leng : 1) - 1;
+        var currentIndex = 0;
         var childSumWidth = 0;
 
-        while (diffWidth > childSumWidth) {
-          var _offsetWidth, _breadcrumbItems$chil, _offsetWidth2, _breadcrumbItems$chil2;
+        while (diffWidth > childSumWidth && maxIndex >= currentIndex) {
+          var _offsetWidth2, _breadcrumbItems$curr;
 
-          var childWidth = (_offsetWidth = breadcrumbItems === null || breadcrumbItems === void 0 ? void 0 : (_breadcrumbItems$chil = breadcrumbItems.children[childIndex]) === null || _breadcrumbItems$chil === void 0 ? void 0 : _breadcrumbItems$chil.offsetWidth) !== null && _offsetWidth !== void 0 ? _offsetWidth : 0;
-          var separatorWidth = (_offsetWidth2 = breadcrumbItems === null || breadcrumbItems === void 0 ? void 0 : (_breadcrumbItems$chil2 = breadcrumbItems.children[childIndex + 1]) === null || _breadcrumbItems$chil2 === void 0 ? void 0 : _breadcrumbItems$chil2.offsetWidth) !== null && _offsetWidth2 !== void 0 ? _offsetWidth2 : 0;
-          var result = separatorWidth + childWidth;
+          var _childWidth = (_offsetWidth2 = (_breadcrumbItems$curr = breadcrumbItems[currentIndex]) === null || _breadcrumbItems$curr === void 0 ? void 0 : _breadcrumbItems$curr.offsetWidth) !== null && _offsetWidth2 !== void 0 ? _offsetWidth2 : 0;
+
+          var result = separatorWidth + _childWidth;
           childWidthCollection.push(result);
           childSumWidth += result;
-          childIndex += 2;
+          currentIndex += 1;
         }
 
         if (childWidthCollection.length === listCollection.length) {
@@ -3682,16 +3693,11 @@
           return oldVal + childWidthCollection.length;
         });
       }
-    }, [listCollection.length, width]);
+    }, [listCollection.length, parentWidth, childWidth]);
     React.useEffect(function () {
-      var _internalRef$current3, _breadcrumbItems$last, _breadcrumbItems$last2, _prevWidth$current2;
-
-      var breadcrumbItems = (_internalRef$current3 = internalRef.current) === null || _internalRef$current3 === void 0 ? void 0 : _internalRef$current3.firstElementChild;
-      var nextWidth = (breadcrumbItems === null || breadcrumbItems === void 0 ? void 0 : (_breadcrumbItems$last = breadcrumbItems.lastElementChild) === null || _breadcrumbItems$last === void 0 ? void 0 : _breadcrumbItems$last.offsetWidth) + (breadcrumbItems === null || breadcrumbItems === void 0 ? void 0 : (_breadcrumbItems$last2 = breadcrumbItems.lastElementChild) === null || _breadcrumbItems$last2 === void 0 ? void 0 : _breadcrumbItems$last2.offsetLeft);
-      var enabled = ((_prevWidth$current2 = prevWidth.current) !== null && _prevWidth$current2 !== void 0 ? _prevWidth$current2 : 0) < (width !== null && width !== void 0 ? width : 0);
-      var diffWidth = (width !== null && width !== void 0 ? width : 0) - nextWidth;
+      var diffWidth = parentWidth - childWidth;
 
-      if (enabled && diffWidth > 0 && widthCollectionRef.current.length > 0) {
+      if (diffWidth > 0 && widthCollectionRef.current.length > 0) {
         var total = widthCollectionRef.current.length;
 
         var collection = _toConsumableArray(widthCollectionRef.current);
@@ -3714,30 +3720,23 @@
 
         var totalToDecrease = total - collection.length;
         setMenuBreadcrumbs(function (oldVal) {
-          return oldVal - totalToDecrease;
+          var newValue = oldVal - totalToDecrease;
+          return newValue > 0 ? newValue : 0;
         });
         var end = total - totalToDecrease;
         widthCollectionRef.current = end > 0 ? widthCollectionRef.current.slice(0, end) : [];
       }
-    }, [width]);
-    React.useEffect(function () {
-      var _dimensions$width;
-
-      var debounceWidth = debounce__default["default"](function (width) {
-        setWidth(function (prevState) {
-          prevWidth.current = prevState !== null && prevState !== void 0 ? prevState : width + 1;
-          return width;
-        });
-      }, timeout);
-      debounceWidth((_dimensions$width = dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== null && _dimensions$width !== void 0 ? _dimensions$width : 0);
-      return function () {
-        debounceWidth.cancel();
-      };
-    }, [timeout, dimensions === null || dimensions === void 0 ? void 0 : dimensions.width]);
+    }, [parentWidth, childWidth]);
     return /*#__PURE__*/React__default["default"].createElement(StyledNavElement, _extends({
       className: className,
       ref: handleRef
-    }, rest), /*#__PURE__*/React__default["default"].createElement(StyledOList, null, menuCollection.length > 0 ? /*#__PURE__*/React__default["default"].createElement(StyledBreadcrumbListItem, null, /*#__PURE__*/React__default["default"].createElement(Menu, {
+    }, rest), /*#__PURE__*/React__default["default"].createElement(StyledListWrapper, {
+      ref: listWrapperRef
+    }, /*#__PURE__*/React__default["default"].createElement(StyledOList, {
+      ref: olRef
+    }, menuCollection.length > 0 ? /*#__PURE__*/React__default["default"].createElement(StyledBreadcrumbListItem, {
+      "data-role": "menu"
+    }, /*#__PURE__*/React__default["default"].createElement(Menu, {
       target: /*#__PURE__*/React__default["default"].createElement(Button, {
         variant: "text gray"
       }, /*#__PURE__*/React__default["default"].createElement(TreeDotsIcon$1, null))
@@ -3748,8 +3747,12 @@
     })))) : null, listCollection.map(function (child, index) {
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         key: index
-      }, index > 0 || menuCollection.length > 0 ? /*#__PURE__*/React__default["default"].createElement(StyledBreadcrumbListItem, null, separator) : null, /*#__PURE__*/React__default["default"].createElement(StyledBreadcrumbListItem, null, child));
-    })));
+      }, index > 0 || menuCollection.length > 0 ? /*#__PURE__*/React__default["default"].createElement(StyledBreadcrumbListItem, {
+        "data-role": "separator"
+      }, separator) : null, /*#__PURE__*/React__default["default"].createElement(StyledBreadcrumbListItem, {
+        "data-role": "item"
+      }, child));
+    }))));
   });
   Breadcrumbs.displayName = "Breadcrumbs";