@activecollab/components 1.0.116 → 1.0.117

package/dist/cjs/components/Breadcrumbs/Breadcrumbs.js

@@ -19,13 +19,9 @@ var _Button = require("../Button");
 
 var _Icons = require("../Icons");
 
-var _lodash = _interopRequireDefault(require("lodash.debounce"));
-
 var _Styles = require("./Styles");
 
-var _excluded = ["children", "className", "separator", "timeout"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _excluded = ["children", "className", "separator"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -58,33 +54,33 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 var Breadcrumbs = /*#__PURE__*/_react.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);
 
   var internalRef = (0, _react.useRef)(null);
-  var prevWidth = (0, _react.useRef)();
+  var listWrapperRef = (0, _react.useRef)(null);
+  var olRef = (0, _react.useRef)(null);
   var widthCollectionRef = (0, _react.useRef)([]);
   var handleRef = (0, _utils.useForkRef)(ref, internalRef);
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      menuBreadcrumbs = _useState2[0],
+      setMenuBreadcrumbs = _useState2[1];
+
   var dimensions = (0, _utils.useResizeObserver)(internalRef);
+  var childDimensions = (0, _utils.useResizeObserver)(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 = (0, _react.useMemo)(function () {
     return _react.default.Children.toArray(children);
   }, [children]);
 
-  var _useState = (0, _react.useState)(),
-      _useState2 = _slicedToArray(_useState, 2),
-      width = _useState2[0],
-      setWidth = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      menuBreadcrumbs = _useState4[0],
-      setMenuBreadcrumbs = _useState4[1];
-
   var _useMemo = (0, _react.useMemo)(function () {
     return [childrenCollection.slice(0, menuBreadcrumbs), childrenCollection.slice(menuBreadcrumbs, childrenCollection.length)];
   }, [childrenCollection, menuBreadcrumbs]),
@@ -93,27 +89,31 @@ var Breadcrumbs = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       listCollection = _useMemo2[1];
 
   (0, _react.useEffect)(function () {
-    var _internalRef$current, _internalRef$current2, _prevWidth$current;
+    widthCollectionRef.current = [];
+    setMenuBreadcrumbs(0);
+  }, [childrenCollection.length]);
+  (0, _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) {
@@ -125,16 +125,11 @@ var Breadcrumbs = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         return oldVal + childWidthCollection.length;
       });
     }
-  }, [listCollection.length, width]);
+  }, [listCollection.length, parentWidth, childWidth]);
   (0, _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);
@@ -157,30 +152,23 @@ var Breadcrumbs = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
       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]);
-  (0, _react.useEffect)(function () {
-    var _dimensions$width;
-
-    var debounceWidth = (0, _lodash.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.createElement(_Styles.StyledNavElement, _extends({
     className: className,
     ref: handleRef
-  }, rest), /*#__PURE__*/_react.default.createElement(_Styles.StyledOList, null, menuCollection.length > 0 ? /*#__PURE__*/_react.default.createElement(_Styles.StyledBreadcrumbListItem, null, /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
+  }, rest), /*#__PURE__*/_react.default.createElement(_Styles.StyledListWrapper, {
+    ref: listWrapperRef
+  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledOList, {
+    ref: olRef
+  }, menuCollection.length > 0 ? /*#__PURE__*/_react.default.createElement(_Styles.StyledBreadcrumbListItem, {
+    "data-role": "menu"
+  }, /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
     target: /*#__PURE__*/_react.default.createElement(_Button.Button, {
       variant: "text gray"
     }, /*#__PURE__*/_react.default.createElement(_Icons.TreeDotsIcon, null))
@@ -191,8 +179,12 @@ var Breadcrumbs = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   })))) : null, listCollection.map(function (child, index) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: index
-    }, index > 0 || menuCollection.length > 0 ? /*#__PURE__*/_react.default.createElement(_Styles.StyledBreadcrumbListItem, null, separator) : null, /*#__PURE__*/_react.default.createElement(_Styles.StyledBreadcrumbListItem, null, child));
-  })));
+    }, index > 0 || menuCollection.length > 0 ? /*#__PURE__*/_react.default.createElement(_Styles.StyledBreadcrumbListItem, {
+      "data-role": "separator"
+    }, separator) : null, /*#__PURE__*/_react.default.createElement(_Styles.StyledBreadcrumbListItem, {
+      "data-role": "item"
+    }, child));
+  }))));
 });
 
 exports.Breadcrumbs = Breadcrumbs;

package/dist/cjs/components/Breadcrumbs/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":["Breadcrumbs","React","forwardRef","ref","children","className","separator","timeout","rest","internalRef","prevWidth","widthCollectionRef","handleRef","dimensions","childrenCollection","Children","toArray","width","setWidth","menuBreadcrumbs","setMenuBreadcrumbs","slice","length","menuCollection","listCollection","actualWidth","current","scrollWidth","breadcrumbItems","firstElementChild","enabled","diffWidth","childWidthCollection","childIndex","childSumWidth","childWidth","offsetWidth","separatorWidth","result","push","pop","oldVal","nextWidth","lastElementChild","offsetLeft","total","collection","sumWidth","lastWidth","totalToDecrease","end","debounceWidth","prevState","cancel","map","child","index","displayName"],"mappings":";;;;;;;;;AAAA;;AAOA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,IAAMA,WAAW,gBAAGC,eAAMC,UAAN,CAIzB,gBAAmEC,GAAnE,EAA2E;AAAA,MAAxEC,QAAwE,QAAxEA,QAAwE;AAAA,MAA9DC,SAA8D,QAA9DA,SAA8D;AAAA,4BAAnDC,SAAmD;AAAA,MAAnDA,SAAmD,+BAAvC,GAAuC;AAAA,0BAAlCC,OAAkC;AAAA,MAAlCA,OAAkC,6BAAxB,GAAwB;AAAA,MAAhBC,IAAgB;;AAC3E,MAAMC,WAAW,GAAG,mBAA2B,IAA3B,CAApB;AACA,MAAMC,SAAS,GAAG,oBAAlB;AACA,MAAMC,kBAAkB,GAAG,mBAAiB,EAAjB,CAA3B;AACA,MAAMC,SAAS,GAAG,uBAAWT,GAAX,EAAgBM,WAAhB,CAAlB;AACA,MAAMI,UAAU,GAAG,8BAAkBJ,WAAlB,CAAnB;AAEA,MAAMK,kBAAkB,GAAG,oBACzB;AAAA,WAAMb,eAAMc,QAAN,CAAeC,OAAf,CAAuBZ,QAAvB,CAAN;AAAA,GADyB,EAEzB,CAACA,QAAD,CAFyB,CAA3B;;AAKA,kBAA0B,sBAA1B;AAAA;AAAA,MAAOa,KAAP;AAAA,MAAcC,QAAd;;AACA,mBAA8C,qBAAS,CAAT,CAA9C;AAAA;AAAA,MAAOC,eAAP;AAAA,MAAwBC,kBAAxB;;AAEA,iBAAyC,oBAAQ,YAAM;AACrD,WAAO,CACLN,kBAAkB,CAACO,KAAnB,CAAyB,CAAzB,EAA4BF,eAA5B,CADK,EAELL,kBAAkB,CAACO,KAAnB,CAAyBF,eAAzB,EAA0CL,kBAAkB,CAACQ,MAA7D,CAFK,CAAP;AAID,GALwC,EAKtC,CAACR,kBAAD,EAAqBK,eAArB,CALsC,CAAzC;AAAA;AAAA,MAAOI,cAAP;AAAA,MAAuBC,cAAvB;;AAOA,wBAAU,YAAM;AAAA;;AACd,QAAMC,WAAW,GAAG,yBAAAhB,WAAW,CAACiB,OAAZ,8EAAqBC,WAArB,KAAoC,CAAxD;AACA,QAAMC,eAAe,4BAAGnB,WAAW,CAACiB,OAAf,0DAAG,sBAAqBG,iBAA7C;AAEA,QAAMC,OAAO,GAAG,uBAACpB,SAAS,CAACgB,OAAX,mEAAsB,CAAtB,KAA4BT,KAA5B,aAA4BA,KAA5B,cAA4BA,KAA5B,GAAqC,CAArC,CAAhB;;AAEA,QAAIa,OAAO,IAAIb,KAAX,IAAoBQ,WAAW,GAAGR,KAAtC,EAA6C;AAC3C,UAAMc,SAAS,GAAGN,WAAW,GAAGR,KAAhC;AACA,UAAMe,oBAA8B,GAAG,EAAvC;AAEA,UAAIC,UAAU,GAAGtB,kBAAkB,CAACe,OAAnB,CAA2BJ,MAA3B,KAAsC,CAAtC,GAA0C,CAA1C,GAA8C,CAA/D;AACA,UAAIY,aAAa,GAAG,CAApB;;AAEA,aAAOH,SAAS,GAAGG,aAAnB,EAAkC;AAAA;;AAChC,YAAMC,UAAU,mBACbP,eADa,aACbA,eADa,gDACbA,eAAe,CAAExB,QAAjB,CAA0B6B,UAA1B,CADa,0DACd,sBACIG,WAFU,uDAEK,CAFrB;AAGA,YAAMC,cAAc,oBACjBT,eADiB,aACjBA,eADiB,iDACjBA,eAAe,CAAExB,QAAjB,CAA0B6B,UAAU,GAAG,CAAvC,CADiB,2DAClB,uBACIG,WAFc,yDAEC,CAFrB;AAGA,YAAME,MAAM,GAAGD,cAAc,GAAGF,UAAhC;AACAH,QAAAA,oBAAoB,CAACO,IAArB,CAA0BD,MAA1B;AACAJ,QAAAA,aAAa,IAAII,MAAjB;AACAL,QAAAA,UAAU,IAAI,CAAd;AACD;;AAED,UAAID,oBAAoB,CAACV,MAArB,KAAgCE,cAAc,CAACF,MAAnD,EAA2D;AACzDU,QAAAA,oBAAoB,CAACQ,GAArB;AACD;;AAED7B,MAAAA,kBAAkB,CAACe,OAAnB,gCACKf,kBAAkB,CAACe,OADxB,GAEKM,oBAFL;AAKAZ,MAAAA,kBAAkB,CAAC,UAACqB,MAAD;AAAA,eAAYA,MAAM,GAAGT,oBAAoB,CAACV,MAA1C;AAAA,OAAD,CAAlB;AACD;AACF,GArCD,EAqCG,CAACE,cAAc,CAACF,MAAhB,EAAwBL,KAAxB,CArCH;AAuCA,wBAAU,YAAM;AAAA;;AACd,QAAMW,eAAe,4BAAGnB,WAAW,CAACiB,OAAf,0DAAG,sBAAqBG,iBAA7C;AACA,QAAMa,SAAS,GACb,CAACd,eAAD,aAACA,eAAD,gDAACA,eAAe,CAAEe,gBAAlB,gFAAsDP,WAAtD,KACCR,eADD,aACCA,eADD,iDACCA,eAAe,CAAEe,gBADlB,2DACA,uBAAsDC,UADtD,CADF;AAIA,QAAMd,OAAO,GAAG,wBAACpB,SAAS,CAACgB,OAAX,qEAAsB,CAAtB,KAA4BT,KAA5B,aAA4BA,KAA5B,cAA4BA,KAA5B,GAAqC,CAArC,CAAhB;AACA,QAAMc,SAAS,GAAG,CAACd,KAAD,aAACA,KAAD,cAACA,KAAD,GAAU,CAAV,IAAeyB,SAAjC;;AAEA,QAAIZ,OAAO,IAAIC,SAAS,GAAG,CAAvB,IAA4BpB,kBAAkB,CAACe,OAAnB,CAA2BJ,MAA3B,GAAoC,CAApE,EAAuE;AACrE,UAAMuB,KAAK,GAAGlC,kBAAkB,CAACe,OAAnB,CAA2BJ,MAAzC;;AACA,UAAMwB,UAAU,sBAAOnC,kBAAkB,CAACe,OAA1B,CAAhB;;AAEA,UAAIqB,QAAQ,GAAG,CAAf;;AAEA,aAAOhB,SAAS,GAAGgB,QAAZ,IAAwBD,UAAU,CAACxB,MAAX,GAAoB,CAAnD,EAAsD;AAAA;;AACpD,YAAM0B,SAAS,kBAAGF,UAAU,CAACA,UAAU,CAACxB,MAAX,GAAoB,CAArB,CAAb,qDAAwC,CAAvD;;AACA,YAAIS,SAAS,GAAGiB,SAAS,GAAGD,QAA5B,EAAsC;AACpCA,UAAAA,QAAQ,GAAGhB,SAAX;AACD,SAFD,MAEO;AAAA;;AACLgB,UAAAA,QAAQ,uBAAID,UAAU,CAACN,GAAX,EAAJ,6DAAwB,CAAhC;AACD;AACF;;AAED,UAAMS,eAAe,GAAGJ,KAAK,GAAGC,UAAU,CAACxB,MAA3C;AAEAF,MAAAA,kBAAkB,CAAC,UAACqB,MAAD;AAAA,eAAYA,MAAM,GAAGQ,eAArB;AAAA,OAAD,CAAlB;AAEA,UAAMC,GAAG,GAAGL,KAAK,GAAGI,eAApB;AAEAtC,MAAAA,kBAAkB,CAACe,OAAnB,GACEwB,GAAG,GAAG,CAAN,GAAUvC,kBAAkB,CAACe,OAAnB,CAA2BL,KAA3B,CAAiC,CAAjC,EAAoC6B,GAApC,CAAV,GAAqD,EADvD;AAED;AACF,GAjCD,EAiCG,CAACjC,KAAD,CAjCH;AAmCA,wBAAU,YAAM;AAAA;;AACd,QAAMkC,aAAa,GAAG,qBAAS,UAAClC,KAAD,EAAmB;AAChDC,MAAAA,QAAQ,CAAC,UAACkC,SAAD,EAAe;AACtB1C,QAAAA,SAAS,CAACgB,OAAV,GAAoB0B,SAApB,aAAoBA,SAApB,cAAoBA,SAApB,GAAiCnC,KAAK,GAAG,CAAzC;AACA,eAAOA,KAAP;AACD,OAHO,CAAR;AAID,KALqB,EAKnBV,OALmB,CAAtB;AAOA4C,IAAAA,aAAa,sBAACtC,UAAD,aAACA,UAAD,uBAACA,UAAU,CAAEI,KAAb,iEAAsB,CAAtB,CAAb;AAEA,WAAO,YAAY;AACjBkC,MAAAA,aAAa,CAACE,MAAd;AACD,KAFD;AAGD,GAbD,EAaG,CAAC9C,OAAD,EAAUM,UAAV,aAAUA,UAAV,uBAAUA,UAAU,CAAEI,KAAtB,CAbH;AAeA,sBACE,6BAAC,wBAAD;AAAkB,IAAA,SAAS,EAAEZ,SAA7B;AAAwC,IAAA,GAAG,EAAEO;AAA7C,KAA4DJ,IAA5D,gBACE,6BAAC,mBAAD,QACGe,cAAc,CAACD,MAAf,GAAwB,CAAxB,gBACC,6BAAC,gCAAD,qBACE,6BAAC,UAAD;AACE,IAAA,MAAM,eACJ,6BAAC,cAAD;AAAQ,MAAA,OAAO,EAAC;AAAhB,oBACE,6BAAC,mBAAD,OADF;AAFJ,kBAOE,6BAAC,sBAAD,QACGC,cAAc,CAAC+B,GAAf,CAAmB,UAACC,KAAD,EAAQC,KAAR;AAAA,wBAClB,6BAAC,cAAD;AAAU,MAAA,GAAG,EAAEA;AAAf,OAAuBD,KAAvB,CADkB;AAAA,GAAnB,CADH,CAPF,CADF,CADD,GAgBG,IAjBN,EAkBG/B,cAAc,CAAC8B,GAAf,CAAmB,UAACC,KAAD,EAAQC,KAAR,EAAkB;AACpC,wBACE,6BAAC,cAAD,CAAO,QAAP;AAAgB,MAAA,GAAG,EAAEA;AAArB,OACGA,KAAK,GAAG,CAAR,IAAajC,cAAc,CAACD,MAAf,GAAwB,CAArC,gBACC,6BAAC,gCAAD,QAA2BhB,SAA3B,CADD,GAEG,IAHN,eAIE,6BAAC,gCAAD,QAA2BiD,KAA3B,CAJF,CADF;AAQD,GATA,CAlBH,CADF,CADF;AAiCD,CApJ0B,CAApB;;;AAsJPvD,WAAW,CAACyD,WAAZ,GAA0B,aAA1B","sourcesContent":["import React, {\n  ReactElement,\n  useRef,\n  useMemo,\n  useEffect,\n  useState,\n} from \"react\";\nimport { useForkRef, useResizeObserver } from \"../../utils\";\nimport { Menu } from \"../Menu\";\nimport { ListItem } from \"../List\";\nimport { Button } from \"../Button\";\nimport { TreeDotsIcon } from \"../Icons\";\nimport debounce from \"lodash.debounce\";\nimport {\n  StyledNavElement,\n  StyledOList,\n  StyledBreadcrumbListItem,\n  StyledMenuList,\n} from \"./Styles\";\n\nexport interface BreadcrumbsProps {\n  /** Separator element */\n  separator?: ReactElement | string;\n  /** Resize update timeout */\n  timeout?: number;\n}\n\nexport const Breadcrumbs = React.forwardRef<\n  HTMLElement,\n  BreadcrumbsProps &\n    Omit<React.ComponentPropsWithoutRef<\"nav\">, keyof BreadcrumbsProps>\n>(({ children, className, separator = \"/\", timeout = 300, ...rest }, ref) => {\n  const internalRef = useRef<HTMLElement | null>(null);\n  const prevWidth = useRef<number | undefined>();\n  const widthCollectionRef = useRef<number[]>([]);\n  const handleRef = useForkRef(ref, internalRef);\n  const dimensions = useResizeObserver(internalRef);\n\n  const childrenCollection = useMemo(\n    () => React.Children.toArray(children),\n    [children]\n  );\n\n  const [width, setWidth] = useState<number | undefined>();\n  const [menuBreadcrumbs, setMenuBreadcrumbs] = useState(0);\n\n  const [menuCollection, listCollection] = useMemo(() => {\n    return [\n      childrenCollection.slice(0, menuBreadcrumbs),\n      childrenCollection.slice(menuBreadcrumbs, childrenCollection.length),\n    ];\n  }, [childrenCollection, menuBreadcrumbs]);\n\n  useEffect(() => {\n    const actualWidth = internalRef.current?.scrollWidth || 0;\n    const breadcrumbItems = internalRef.current?.firstElementChild;\n\n    const enabled = (prevWidth.current ?? 0) > (width ?? 0);\n\n    if (enabled && width && actualWidth > width) {\n      const diffWidth = actualWidth - width;\n      const childWidthCollection: number[] = [];\n\n      let childIndex = widthCollectionRef.current.length === 0 ? 0 : 2;\n      let childSumWidth = 0;\n\n      while (diffWidth > childSumWidth) {\n        const childWidth =\n          (breadcrumbItems?.children[childIndex] as HTMLLIElement)\n            ?.offsetWidth ?? 0;\n        const separatorWidth =\n          (breadcrumbItems?.children[childIndex + 1] as HTMLLIElement)\n            ?.offsetWidth ?? 0;\n        const result = separatorWidth + childWidth;\n        childWidthCollection.push(result);\n        childSumWidth += result;\n        childIndex += 2;\n      }\n\n      if (childWidthCollection.length === listCollection.length) {\n        childWidthCollection.pop();\n      }\n\n      widthCollectionRef.current = [\n        ...widthCollectionRef.current,\n        ...childWidthCollection,\n      ];\n\n      setMenuBreadcrumbs((oldVal) => oldVal + childWidthCollection.length);\n    }\n  }, [listCollection.length, width]);\n\n  useEffect(() => {\n    const breadcrumbItems = internalRef.current?.firstElementChild;\n    const nextWidth =\n      (breadcrumbItems?.lastElementChild as HTMLLIElement)?.offsetWidth +\n      (breadcrumbItems?.lastElementChild as HTMLLIElement)?.offsetLeft;\n\n    const enabled = (prevWidth.current ?? 0) < (width ?? 0);\n    const diffWidth = (width ?? 0) - nextWidth;\n\n    if (enabled && diffWidth > 0 && widthCollectionRef.current.length > 0) {\n      const total = widthCollectionRef.current.length;\n      const collection = [...widthCollectionRef.current];\n\n      let sumWidth = 0;\n\n      while (diffWidth > sumWidth && collection.length > 0) {\n        const lastWidth = collection[collection.length - 1] ?? 0;\n        if (diffWidth < lastWidth + sumWidth) {\n          sumWidth = diffWidth;\n        } else {\n          sumWidth += collection.pop() ?? 0;\n        }\n      }\n\n      const totalToDecrease = total - collection.length;\n\n      setMenuBreadcrumbs((oldVal) => oldVal - totalToDecrease);\n\n      const end = total - totalToDecrease;\n\n      widthCollectionRef.current =\n        end > 0 ? widthCollectionRef.current.slice(0, end) : [];\n    }\n  }, [width]);\n\n  useEffect(() => {\n    const debounceWidth = debounce((width: number) => {\n      setWidth((prevState) => {\n        prevWidth.current = prevState ?? width + 1;\n        return width;\n      });\n    }, timeout);\n\n    debounceWidth(dimensions?.width ?? 0);\n\n    return (): void => {\n      debounceWidth.cancel();\n    };\n  }, [timeout, dimensions?.width]);\n\n  return (\n    <StyledNavElement className={className} ref={handleRef} {...rest}>\n      <StyledOList>\n        {menuCollection.length > 0 ? (\n          <StyledBreadcrumbListItem>\n            <Menu\n              target={\n                <Button variant=\"text gray\">\n                  <TreeDotsIcon />\n                </Button>\n              }\n            >\n              <StyledMenuList>\n                {menuCollection.map((child, index) => (\n                  <ListItem key={index}>{child}</ListItem>\n                ))}\n              </StyledMenuList>\n            </Menu>\n          </StyledBreadcrumbListItem>\n        ) : null}\n        {listCollection.map((child, index) => {\n          return (\n            <React.Fragment key={index}>\n              {index > 0 || menuCollection.length > 0 ? (\n                <StyledBreadcrumbListItem>{separator}</StyledBreadcrumbListItem>\n              ) : null}\n              <StyledBreadcrumbListItem>{child}</StyledBreadcrumbListItem>\n            </React.Fragment>\n          );\n        })}\n      </StyledOList>\n    </StyledNavElement>\n  );\n});\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"],"file":"Breadcrumbs.js"}
+{"version":3,"sources":["../../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":["Breadcrumbs","React","forwardRef","ref","children","className","separator","rest","internalRef","listWrapperRef","olRef","widthCollectionRef","handleRef","menuBreadcrumbs","setMenuBreadcrumbs","dimensions","childDimensions","parentWidth","width","childWidth","childrenCollection","Children","toArray","slice","length","menuCollection","listCollection","current","diffWidth","separatorWidth","querySelectorAll","offsetWidth","breadcrumbItems","childWidthCollection","maxIndex","currentIndex","childSumWidth","result","push","pop","oldVal","total","collection","sumWidth","lastWidth","totalToDecrease","newValue","end","map","child","index","displayName"],"mappings":"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","sourcesContent":["import React, {\n  ReactElement,\n  useRef,\n  useMemo,\n  useEffect,\n  useState,\n} from \"react\";\nimport { useForkRef, useResizeObserver } from \"../../utils\";\nimport { Menu } from \"../Menu\";\nimport { ListItem } from \"../List\";\nimport { Button } from \"../Button\";\nimport { TreeDotsIcon } from \"../Icons\";\nimport {\n  StyledNavElement,\n  StyledOList,\n  StyledMenuList,\n  StyledListWrapper,\n  StyledBreadcrumbListItem,\n} from \"./Styles\";\n\nexport interface BreadcrumbsProps {\n  /** Separator element */\n  separator?: ReactElement | string;\n}\n\nexport const Breadcrumbs = React.forwardRef<\n  HTMLElement,\n  BreadcrumbsProps &\n    Omit<React.ComponentPropsWithoutRef<\"nav\">, keyof BreadcrumbsProps>\n>(({ children, className, separator = \"/\", ...rest }, ref) => {\n  const internalRef = useRef<HTMLElement | null>(null);\n  const listWrapperRef = useRef<HTMLDivElement | null>(null);\n  const olRef = useRef<HTMLOListElement | null>(null);\n  const widthCollectionRef = useRef<number[]>([]);\n  const handleRef = useForkRef(ref, internalRef);\n  const [menuBreadcrumbs, setMenuBreadcrumbs] = useState(0);\n  const dimensions = useResizeObserver(internalRef);\n  const childDimensions = useResizeObserver(listWrapperRef);\n\n  const parentWidth = dimensions?.width ?? 0;\n  const childWidth = childDimensions?.width ?? 0;\n\n  const childrenCollection = useMemo(\n    () => React.Children.toArray(children),\n    [children]\n  );\n\n  const [menuCollection, listCollection] = useMemo(() => {\n    return [\n      childrenCollection.slice(0, menuBreadcrumbs),\n      childrenCollection.slice(menuBreadcrumbs, childrenCollection.length),\n    ];\n  }, [childrenCollection, menuBreadcrumbs]);\n\n  useEffect(() => {\n    widthCollectionRef.current = [];\n    setMenuBreadcrumbs(0);\n  }, [childrenCollection.length]);\n\n  useEffect(() => {\n    const diffWidth = childWidth - parentWidth;\n\n    if (diffWidth > 0) {\n      const separatorWidth =\n        (\n          olRef.current?.querySelectorAll(\n            `[data-role=\"separator\"]`\n          )[0] as HTMLLIElement\n        )?.offsetWidth ?? 0;\n      const breadcrumbItems =\n        olRef.current?.querySelectorAll(`[data-role=\"item\"]`) ?? [];\n      const childWidthCollection: number[] = [];\n\n      const maxIndex = (breadcrumbItems?.length ?? 1) - 1;\n      let currentIndex = 0;\n      let childSumWidth = 0;\n\n      while (diffWidth > childSumWidth && maxIndex >= currentIndex) {\n        const childWidth =\n          (breadcrumbItems[currentIndex] as HTMLLIElement)?.offsetWidth ?? 0;\n        const result = separatorWidth + childWidth;\n        childWidthCollection.push(result);\n        childSumWidth += result;\n        currentIndex += 1;\n      }\n\n      if (childWidthCollection.length === listCollection.length) {\n        childWidthCollection.pop();\n      }\n\n      widthCollectionRef.current = [\n        ...widthCollectionRef.current,\n        ...childWidthCollection,\n      ];\n\n      setMenuBreadcrumbs((oldVal) => oldVal + childWidthCollection.length);\n    }\n  }, [listCollection.length, parentWidth, childWidth]);\n\n  useEffect(() => {\n    const diffWidth = parentWidth - childWidth;\n\n    if (diffWidth > 0 && widthCollectionRef.current.length > 0) {\n      const total = widthCollectionRef.current.length;\n      const collection = [...widthCollectionRef.current];\n\n      let sumWidth = 0;\n\n      while (diffWidth > sumWidth && collection.length > 0) {\n        const lastWidth = collection[collection.length - 1] ?? 0;\n        if (diffWidth < lastWidth + sumWidth) {\n          sumWidth = diffWidth;\n        } else {\n          sumWidth += collection.pop() ?? 0;\n        }\n      }\n\n      const totalToDecrease = total - collection.length;\n\n      setMenuBreadcrumbs((oldVal) => {\n        const newValue = oldVal - totalToDecrease;\n        return newValue > 0 ? newValue : 0;\n      });\n\n      const end = total - totalToDecrease;\n\n      widthCollectionRef.current =\n        end > 0 ? widthCollectionRef.current.slice(0, end) : [];\n    }\n  }, [parentWidth, childWidth]);\n\n  return (\n    <StyledNavElement className={className} ref={handleRef} {...rest}>\n      <StyledListWrapper ref={listWrapperRef}>\n        <StyledOList ref={olRef}>\n          {menuCollection.length > 0 ? (\n            <StyledBreadcrumbListItem data-role=\"menu\">\n              <Menu\n                target={\n                  <Button variant=\"text gray\">\n                    <TreeDotsIcon />\n                  </Button>\n                }\n              >\n                <StyledMenuList>\n                  {menuCollection.map((child, index) => (\n                    <ListItem key={index}>{child}</ListItem>\n                  ))}\n                </StyledMenuList>\n              </Menu>\n            </StyledBreadcrumbListItem>\n          ) : null}\n          {listCollection.map((child, index) => {\n            return (\n              <React.Fragment key={index}>\n                {index > 0 || menuCollection.length > 0 ? (\n                  <StyledBreadcrumbListItem data-role=\"separator\">\n                    {separator}\n                  </StyledBreadcrumbListItem>\n                ) : null}\n                <StyledBreadcrumbListItem data-role=\"item\">\n                  {child}\n                </StyledBreadcrumbListItem>\n              </React.Fragment>\n            );\n          })}\n        </StyledOList>\n      </StyledListWrapper>\n    </StyledNavElement>\n  );\n});\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"],"file":"Breadcrumbs.js"}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledOList = exports.StyledNavElement = exports.StyledMenuList = exports.StyledBreadcrumbListItem = void 0;
+exports.StyledOList = exports.StyledNavElement = exports.StyledMenuList = exports.StyledListWrapper = exports.StyledBreadcrumbListItem = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -21,34 +21,44 @@ var StyledNavElement = _styledComponents.default.nav.withConfig({
 })(["", " ", " ", " ", ""], {
   "width": "100%"
 }, {
-  "overflow": "visible"
+  "overflow": "hidden"
 }, _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle);
 
 exports.StyledNavElement = StyledNavElement;
 StyledNavElement.displayName = "StyledNavElement";
 
-var StyledOList = _styledComponents.default.ul.withConfig({
-  displayName: "Styles__StyledOList",
+var StyledListWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Styles__StyledListWrapper",
   componentId: "sc-rxaesd-1"
+})(["", ""], {
+  "display": "inline-block"
+});
+
+exports.StyledListWrapper = StyledListWrapper;
+StyledListWrapper.displayName = "StyledListWrapper";
+
+var StyledOList = _styledComponents.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"
 });
 
 exports.StyledOList = StyledOList;
 StyledOList.displayName = "StyledOList";
 var StyledMenuList = (0, _styledComponents.default)(_List.List).withConfig({
   displayName: "Styles__StyledMenuList",
-  componentId: "sc-rxaesd-2"
+  componentId: "sc-rxaesd-3"
 })(["", ""], {
   "paddingTop": "0.5rem",
   "paddingBottom": "0.5rem"
@@ -58,10 +68,8 @@ StyledMenuList.displayName = "StyledMenuList";
 
 var StyledBreadcrumbListItem = _styledComponents.default.li.withConfig({
   displayName: "Styles__StyledBreadcrumbListItem",
-  componentId: "sc-rxaesd-3"
-})(["", " ", ""], {
-  "display": "flex"
-}, {
+  componentId: "sc-rxaesd-4"
+})(["", ""], {
   "flexShrink": "0"
 });
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Breadcrumbs/Styles.ts"],"names":["StyledNavElement","styled","nav","FontStyle","BoxSizingStyle","displayName","StyledOList","ul","StyledMenuList","List","StyledBreadcrumbListItem","li"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;AAEO,IAAMA,gBAAgB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,4BACvB;AAAA;AAAA,CADuB,EAEvB;AAAA;AAAA,CAFuB,EAGzBC,oBAHyB,EAIzBC,8BAJyB,CAAtB;;;AAOPJ,gBAAgB,CAACK,WAAjB,GAA+B,kBAA/B;;AAEO,IAAMC,WAAW,GAAGL,0BAAOM,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;AAEO,IAAMG,cAAc,GAAG,+BAAOC,UAAP,CAAH;AAAA;AAAA;AAAA,aACrB;AAAA;AAAA;AAAA,CADqB,CAApB;;AAIPD,cAAc,CAACH,WAAf,GAA6B,gBAA7B;;AAEO,IAAMK,wBAAwB,GAAGT,0BAAOU,EAAV;AAAA;AAAA;AAAA,kBAC/B;AAAA;AAAA,CAD+B,EAE/B;AAAA;AAAA,CAF+B,CAA9B;;;AAKPD,wBAAwB,CAACL,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":["StyledNavElement","styled","nav","FontStyle","BoxSizingStyle","displayName","StyledListWrapper","div","StyledOList","ol","StyledMenuList","List","StyledBreadcrumbListItem","li"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;AAEO,IAAMA,gBAAgB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,4BACvB;AAAA;AAAA,CADuB,EAEvB;AAAA;AAAA,CAFuB,EAGzBC,oBAHyB,EAIzBC,8BAJyB,CAAtB;;;AAOPJ,gBAAgB,CAACK,WAAjB,GAA+B,kBAA/B;;AAEO,IAAMC,iBAAiB,GAAGL,0BAAOM,GAAV;AAAA;AAAA;AAAA,aACxB;AAAA;AAAA,CADwB,CAAvB;;;AAIPD,iBAAiB,CAACD,WAAlB,GAAgC,mBAAhC;;AAEO,IAAMG,WAAW,GAAGP,0BAAOQ,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;AAEO,IAAMK,cAAc,GAAG,+BAAOC,UAAP,CAAH;AAAA;AAAA;AAAA,aACrB;AAAA;AAAA;AAAA,CADqB,CAApB;;AAIPD,cAAc,CAACL,WAAf,GAA6B,gBAA7B;;AAEO,IAAMO,wBAAwB,GAAGX,0BAAOY,EAAV;AAAA;AAAA;AAAA,aAC/B;AAAA;AAAA,CAD+B,CAA9B;;;AAIPD,wBAAwB,CAACP,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-shrink-0`}\n`;\n\nStyledBreadcrumbListItem.displayName = \"StyledBreadcrumbListItem\";\n"],"file":"Styles.js"}

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

@@ -1,7 +1,6 @@
 import React, { ReactElement } from "react";
 export interface BreadcrumbsProps {
     separator?: ReactElement | string;
-    timeout?: number;
 }
-export declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof React.HTMLAttributes<HTMLElement>>, keyof BreadcrumbsProps> & React.RefAttributes<HTMLElement>>;
+export declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof React.HTMLAttributes<HTMLElement>>, "separator"> & React.RefAttributes<HTMLElement>>;
 //# sourceMappingURL=Breadcrumbs.d.ts.map

package/dist/esm/components/Breadcrumbs/Breadcrumbs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,YAAY,EAKb,MAAM,OAAO,CAAC;AAcf,MAAM,WAAW,gBAAgB;IAE/B,SAAS,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAElC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,WAAW,qPAoJtB,CAAC"}
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,YAAY,EAKb,MAAM,OAAO,CAAC;AAcf,MAAM,WAAW,gBAAgB;IAE/B,SAAS,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;CACnC;AAED,eAAO,MAAM,WAAW,0OAiJtB,CAAC"}

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

@@ -1,40 +1,40 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["children", "className", "separator", "timeout"];
+var _excluded = ["children", "className", "separator"];
 import React, { useRef, useMemo, useEffect, useState } from "react";
 import { useForkRef, useResizeObserver } from "../../utils";
 import { Menu } from "../Menu";
 import { ListItem } from "../List";
 import { Button } from "../Button";
 import { TreeDotsIcon } from "../Icons";
-import debounce from "lodash.debounce";
-import { StyledNavElement, StyledOList, StyledBreadcrumbListItem, StyledMenuList } from "./Styles";
+import { StyledNavElement, StyledOList, StyledMenuList, StyledListWrapper, StyledBreadcrumbListItem } from "./Styles";
 export var Breadcrumbs = /*#__PURE__*/React.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 = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var internalRef = useRef(null);
-  var prevWidth = useRef();
+  var listWrapperRef = useRef(null);
+  var olRef = useRef(null);
   var widthCollectionRef = useRef([]);
   var handleRef = useForkRef(ref, internalRef);
+
+  var _useState = useState(0),
+      menuBreadcrumbs = _useState[0],
+      setMenuBreadcrumbs = _useState[1];
+
   var dimensions = useResizeObserver(internalRef);
+  var childDimensions = useResizeObserver(listWrapperRef);
+  var parentWidth = (_dimensions$width = dimensions == null ? void 0 : dimensions.width) != null ? _dimensions$width : 0;
+  var childWidth = (_childDimensions$widt = childDimensions == null ? void 0 : childDimensions.width) != null ? _childDimensions$widt : 0;
   var childrenCollection = useMemo(function () {
     return React.Children.toArray(children);
   }, [children]);
 
-  var _useState = useState(),
-      width = _useState[0],
-      setWidth = _useState[1];
-
-  var _useState2 = useState(0),
-      menuBreadcrumbs = _useState2[0],
-      setMenuBreadcrumbs = _useState2[1];
-
   var _useMemo = useMemo(function () {
     return [childrenCollection.slice(0, menuBreadcrumbs), childrenCollection.slice(menuBreadcrumbs, childrenCollection.length)];
   }, [childrenCollection, menuBreadcrumbs]),
@@ -42,27 +42,31 @@ export var Breadcrumbs = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       listCollection = _useMemo[1];
 
   useEffect(function () {
-    var _internalRef$current, _internalRef$current2, _prevWidth$current;
+    widthCollectionRef.current = [];
+    setMenuBreadcrumbs(0);
+  }, [childrenCollection.length]);
+  useEffect(function () {
+    var diffWidth = childWidth - parentWidth;
 
-    var actualWidth = ((_internalRef$current = internalRef.current) == null ? void 0 : _internalRef$current.scrollWidth) || 0;
-    var breadcrumbItems = (_internalRef$current2 = internalRef.current) == null ? void 0 : _internalRef$current2.firstElementChild;
-    var enabled = ((_prevWidth$current = prevWidth.current) != null ? _prevWidth$current : 0) > (width != null ? 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 ? void 0 : (_olRef$current$queryS = _olRef$current.querySelectorAll("[data-role=\"separator\"]")[0]) == null ? void 0 : _olRef$current$queryS.offsetWidth) != null ? _offsetWidth : 0;
+      var breadcrumbItems = (_olRef$current$queryS2 = (_olRef$current2 = olRef.current) == null ? void 0 : _olRef$current2.querySelectorAll("[data-role=\"item\"]")) != null ? _olRef$current$queryS2 : [];
       var childWidthCollection = [];
-      var childIndex = widthCollectionRef.current.length === 0 ? 0 : 2;
+      var maxIndex = ((_breadcrumbItems$leng = breadcrumbItems == null ? void 0 : breadcrumbItems.length) != null ? _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 ? void 0 : (_breadcrumbItems$chil = breadcrumbItems.children[childIndex]) == null ? void 0 : _breadcrumbItems$chil.offsetWidth) != null ? _offsetWidth : 0;
-        var separatorWidth = (_offsetWidth2 = breadcrumbItems == null ? void 0 : (_breadcrumbItems$chil2 = breadcrumbItems.children[childIndex + 1]) == null ? void 0 : _breadcrumbItems$chil2.offsetWidth) != null ? _offsetWidth2 : 0;
-        var result = separatorWidth + childWidth;
+        var _childWidth = (_offsetWidth2 = (_breadcrumbItems$curr = breadcrumbItems[currentIndex]) == null ? void 0 : _breadcrumbItems$curr.offsetWidth) != null ? _offsetWidth2 : 0;
+
+        var result = separatorWidth + _childWidth;
         childWidthCollection.push(result);
         childSumWidth += result;
-        childIndex += 2;
+        currentIndex += 1;
       }
 
       if (childWidthCollection.length === listCollection.length) {
@@ -74,16 +78,11 @@ export var Breadcrumbs = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         return oldVal + childWidthCollection.length;
       });
     }
-  }, [listCollection.length, width]);
+  }, [listCollection.length, parentWidth, childWidth]);
   useEffect(function () {
-    var _internalRef$current3, _breadcrumbItems$last, _breadcrumbItems$last2, _prevWidth$current2;
-
-    var breadcrumbItems = (_internalRef$current3 = internalRef.current) == null ? void 0 : _internalRef$current3.firstElementChild;
-    var nextWidth = (breadcrumbItems == null ? void 0 : (_breadcrumbItems$last = breadcrumbItems.lastElementChild) == null ? void 0 : _breadcrumbItems$last.offsetWidth) + (breadcrumbItems == null ? void 0 : (_breadcrumbItems$last2 = breadcrumbItems.lastElementChild) == null ? void 0 : _breadcrumbItems$last2.offsetLeft);
-    var enabled = ((_prevWidth$current2 = prevWidth.current) != null ? _prevWidth$current2 : 0) < (width != null ? width : 0);
-    var diffWidth = (width != null ? 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 = [].concat(widthCollectionRef.current);
       var sumWidth = 0;
@@ -104,30 +103,23 @@ export var Breadcrumbs = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
       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]);
-  useEffect(function () {
-    var _dimensions$width;
-
-    var debounceWidth = debounce(function (width) {
-      setWidth(function (prevState) {
-        prevWidth.current = prevState != null ? prevState : width + 1;
-        return width;
-      });
-    }, timeout);
-    debounceWidth((_dimensions$width = dimensions == null ? void 0 : dimensions.width) != null ? _dimensions$width : 0);
-    return function () {
-      debounceWidth.cancel();
-    };
-  }, [timeout, dimensions == null ? void 0 : dimensions.width]);
+  }, [parentWidth, childWidth]);
   return /*#__PURE__*/React.createElement(StyledNavElement, _extends({
     className: className,
     ref: handleRef
-  }, rest), /*#__PURE__*/React.createElement(StyledOList, null, menuCollection.length > 0 ? /*#__PURE__*/React.createElement(StyledBreadcrumbListItem, null, /*#__PURE__*/React.createElement(Menu, {
+  }, rest), /*#__PURE__*/React.createElement(StyledListWrapper, {
+    ref: listWrapperRef
+  }, /*#__PURE__*/React.createElement(StyledOList, {
+    ref: olRef
+  }, menuCollection.length > 0 ? /*#__PURE__*/React.createElement(StyledBreadcrumbListItem, {
+    "data-role": "menu"
+  }, /*#__PURE__*/React.createElement(Menu, {
     target: /*#__PURE__*/React.createElement(Button, {
       variant: "text gray"
     }, /*#__PURE__*/React.createElement(TreeDotsIcon, null))
@@ -138,8 +130,12 @@ export var Breadcrumbs = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   })))) : null, listCollection.map(function (child, index) {
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: index
-    }, index > 0 || menuCollection.length > 0 ? /*#__PURE__*/React.createElement(StyledBreadcrumbListItem, null, separator) : null, /*#__PURE__*/React.createElement(StyledBreadcrumbListItem, null, child));
-  })));
+    }, index > 0 || menuCollection.length > 0 ? /*#__PURE__*/React.createElement(StyledBreadcrumbListItem, {
+      "data-role": "separator"
+    }, separator) : null, /*#__PURE__*/React.createElement(StyledBreadcrumbListItem, {
+      "data-role": "item"
+    }, child));
+  }))));
 });
 Breadcrumbs.displayName = "Breadcrumbs";
 //# sourceMappingURL=Breadcrumbs.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":["React","useRef","useMemo","useEffect","useState","useForkRef","useResizeObserver","Menu","ListItem","Button","TreeDotsIcon","debounce","StyledNavElement","StyledOList","StyledBreadcrumbListItem","StyledMenuList","Breadcrumbs","forwardRef","ref","children","className","separator","timeout","rest","internalRef","prevWidth","widthCollectionRef","handleRef","dimensions","childrenCollection","Children","toArray","width","setWidth","menuBreadcrumbs","setMenuBreadcrumbs","slice","length","menuCollection","listCollection","actualWidth","current","scrollWidth","breadcrumbItems","firstElementChild","enabled","diffWidth","childWidthCollection","childIndex","childSumWidth","childWidth","offsetWidth","separatorWidth","result","push","pop","oldVal","nextWidth","lastElementChild","offsetLeft","total","collection","sumWidth","lastWidth","totalToDecrease","end","debounceWidth","prevState","cancel","map","child","index","displayName"],"mappings":"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","sourcesContent":["import React, {\n  ReactElement,\n  useRef,\n  useMemo,\n  useEffect,\n  useState,\n} from \"react\";\nimport { useForkRef, useResizeObserver } from \"../../utils\";\nimport { Menu } from \"../Menu\";\nimport { ListItem } from \"../List\";\nimport { Button } from \"../Button\";\nimport { TreeDotsIcon } from \"../Icons\";\nimport debounce from \"lodash.debounce\";\nimport {\n  StyledNavElement,\n  StyledOList,\n  StyledBreadcrumbListItem,\n  StyledMenuList,\n} from \"./Styles\";\n\nexport interface BreadcrumbsProps {\n  /** Separator element */\n  separator?: ReactElement | string;\n  /** Resize update timeout */\n  timeout?: number;\n}\n\nexport const Breadcrumbs = React.forwardRef<\n  HTMLElement,\n  BreadcrumbsProps &\n    Omit<React.ComponentPropsWithoutRef<\"nav\">, keyof BreadcrumbsProps>\n>(({ children, className, separator = \"/\", timeout = 300, ...rest }, ref) => {\n  const internalRef = useRef<HTMLElement | null>(null);\n  const prevWidth = useRef<number | undefined>();\n  const widthCollectionRef = useRef<number[]>([]);\n  const handleRef = useForkRef(ref, internalRef);\n  const dimensions = useResizeObserver(internalRef);\n\n  const childrenCollection = useMemo(\n    () => React.Children.toArray(children),\n    [children]\n  );\n\n  const [width, setWidth] = useState<number | undefined>();\n  const [menuBreadcrumbs, setMenuBreadcrumbs] = useState(0);\n\n  const [menuCollection, listCollection] = useMemo(() => {\n    return [\n      childrenCollection.slice(0, menuBreadcrumbs),\n      childrenCollection.slice(menuBreadcrumbs, childrenCollection.length),\n    ];\n  }, [childrenCollection, menuBreadcrumbs]);\n\n  useEffect(() => {\n    const actualWidth = internalRef.current?.scrollWidth || 0;\n    const breadcrumbItems = internalRef.current?.firstElementChild;\n\n    const enabled = (prevWidth.current ?? 0) > (width ?? 0);\n\n    if (enabled && width && actualWidth > width) {\n      const diffWidth = actualWidth - width;\n      const childWidthCollection: number[] = [];\n\n      let childIndex = widthCollectionRef.current.length === 0 ? 0 : 2;\n      let childSumWidth = 0;\n\n      while (diffWidth > childSumWidth) {\n        const childWidth =\n          (breadcrumbItems?.children[childIndex] as HTMLLIElement)\n            ?.offsetWidth ?? 0;\n        const separatorWidth =\n          (breadcrumbItems?.children[childIndex + 1] as HTMLLIElement)\n            ?.offsetWidth ?? 0;\n        const result = separatorWidth + childWidth;\n        childWidthCollection.push(result);\n        childSumWidth += result;\n        childIndex += 2;\n      }\n\n      if (childWidthCollection.length === listCollection.length) {\n        childWidthCollection.pop();\n      }\n\n      widthCollectionRef.current = [\n        ...widthCollectionRef.current,\n        ...childWidthCollection,\n      ];\n\n      setMenuBreadcrumbs((oldVal) => oldVal + childWidthCollection.length);\n    }\n  }, [listCollection.length, width]);\n\n  useEffect(() => {\n    const breadcrumbItems = internalRef.current?.firstElementChild;\n    const nextWidth =\n      (breadcrumbItems?.lastElementChild as HTMLLIElement)?.offsetWidth +\n      (breadcrumbItems?.lastElementChild as HTMLLIElement)?.offsetLeft;\n\n    const enabled = (prevWidth.current ?? 0) < (width ?? 0);\n    const diffWidth = (width ?? 0) - nextWidth;\n\n    if (enabled && diffWidth > 0 && widthCollectionRef.current.length > 0) {\n      const total = widthCollectionRef.current.length;\n      const collection = [...widthCollectionRef.current];\n\n      let sumWidth = 0;\n\n      while (diffWidth > sumWidth && collection.length > 0) {\n        const lastWidth = collection[collection.length - 1] ?? 0;\n        if (diffWidth < lastWidth + sumWidth) {\n          sumWidth = diffWidth;\n        } else {\n          sumWidth += collection.pop() ?? 0;\n        }\n      }\n\n      const totalToDecrease = total - collection.length;\n\n      setMenuBreadcrumbs((oldVal) => oldVal - totalToDecrease);\n\n      const end = total - totalToDecrease;\n\n      widthCollectionRef.current =\n        end > 0 ? widthCollectionRef.current.slice(0, end) : [];\n    }\n  }, [width]);\n\n  useEffect(() => {\n    const debounceWidth = debounce((width: number) => {\n      setWidth((prevState) => {\n        prevWidth.current = prevState ?? width + 1;\n        return width;\n      });\n    }, timeout);\n\n    debounceWidth(dimensions?.width ?? 0);\n\n    return (): void => {\n      debounceWidth.cancel();\n    };\n  }, [timeout, dimensions?.width]);\n\n  return (\n    <StyledNavElement className={className} ref={handleRef} {...rest}>\n      <StyledOList>\n        {menuCollection.length > 0 ? (\n          <StyledBreadcrumbListItem>\n            <Menu\n              target={\n                <Button variant=\"text gray\">\n                  <TreeDotsIcon />\n                </Button>\n              }\n            >\n              <StyledMenuList>\n                {menuCollection.map((child, index) => (\n                  <ListItem key={index}>{child}</ListItem>\n                ))}\n              </StyledMenuList>\n            </Menu>\n          </StyledBreadcrumbListItem>\n        ) : null}\n        {listCollection.map((child, index) => {\n          return (\n            <React.Fragment key={index}>\n              {index > 0 || menuCollection.length > 0 ? (\n                <StyledBreadcrumbListItem>{separator}</StyledBreadcrumbListItem>\n              ) : null}\n              <StyledBreadcrumbListItem>{child}</StyledBreadcrumbListItem>\n            </React.Fragment>\n          );\n        })}\n      </StyledOList>\n    </StyledNavElement>\n  );\n});\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"],"file":"Breadcrumbs.js"}
+{"version":3,"sources":["../../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":["React","useRef","useMemo","useEffect","useState","useForkRef","useResizeObserver","Menu","ListItem","Button","TreeDotsIcon","StyledNavElement","StyledOList","StyledMenuList","StyledListWrapper","StyledBreadcrumbListItem","Breadcrumbs","forwardRef","ref","children","className","separator","rest","internalRef","listWrapperRef","olRef","widthCollectionRef","handleRef","menuBreadcrumbs","setMenuBreadcrumbs","dimensions","childDimensions","parentWidth","width","childWidth","childrenCollection","Children","toArray","slice","length","menuCollection","listCollection","current","diffWidth","separatorWidth","querySelectorAll","offsetWidth","breadcrumbItems","childWidthCollection","maxIndex","currentIndex","childSumWidth","result","push","pop","oldVal","total","collection","sumWidth","lastWidth","totalToDecrease","newValue","end","map","child","index","displayName"],"mappings":"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","sourcesContent":["import React, {\n  ReactElement,\n  useRef,\n  useMemo,\n  useEffect,\n  useState,\n} from \"react\";\nimport { useForkRef, useResizeObserver } from \"../../utils\";\nimport { Menu } from \"../Menu\";\nimport { ListItem } from \"../List\";\nimport { Button } from \"../Button\";\nimport { TreeDotsIcon } from \"../Icons\";\nimport {\n  StyledNavElement,\n  StyledOList,\n  StyledMenuList,\n  StyledListWrapper,\n  StyledBreadcrumbListItem,\n} from \"./Styles\";\n\nexport interface BreadcrumbsProps {\n  /** Separator element */\n  separator?: ReactElement | string;\n}\n\nexport const Breadcrumbs = React.forwardRef<\n  HTMLElement,\n  BreadcrumbsProps &\n    Omit<React.ComponentPropsWithoutRef<\"nav\">, keyof BreadcrumbsProps>\n>(({ children, className, separator = \"/\", ...rest }, ref) => {\n  const internalRef = useRef<HTMLElement | null>(null);\n  const listWrapperRef = useRef<HTMLDivElement | null>(null);\n  const olRef = useRef<HTMLOListElement | null>(null);\n  const widthCollectionRef = useRef<number[]>([]);\n  const handleRef = useForkRef(ref, internalRef);\n  const [menuBreadcrumbs, setMenuBreadcrumbs] = useState(0);\n  const dimensions = useResizeObserver(internalRef);\n  const childDimensions = useResizeObserver(listWrapperRef);\n\n  const parentWidth = dimensions?.width ?? 0;\n  const childWidth = childDimensions?.width ?? 0;\n\n  const childrenCollection = useMemo(\n    () => React.Children.toArray(children),\n    [children]\n  );\n\n  const [menuCollection, listCollection] = useMemo(() => {\n    return [\n      childrenCollection.slice(0, menuBreadcrumbs),\n      childrenCollection.slice(menuBreadcrumbs, childrenCollection.length),\n    ];\n  }, [childrenCollection, menuBreadcrumbs]);\n\n  useEffect(() => {\n    widthCollectionRef.current = [];\n    setMenuBreadcrumbs(0);\n  }, [childrenCollection.length]);\n\n  useEffect(() => {\n    const diffWidth = childWidth - parentWidth;\n\n    if (diffWidth > 0) {\n      const separatorWidth =\n        (\n          olRef.current?.querySelectorAll(\n            `[data-role=\"separator\"]`\n          )[0] as HTMLLIElement\n        )?.offsetWidth ?? 0;\n      const breadcrumbItems =\n        olRef.current?.querySelectorAll(`[data-role=\"item\"]`) ?? [];\n      const childWidthCollection: number[] = [];\n\n      const maxIndex = (breadcrumbItems?.length ?? 1) - 1;\n      let currentIndex = 0;\n      let childSumWidth = 0;\n\n      while (diffWidth > childSumWidth && maxIndex >= currentIndex) {\n        const childWidth =\n          (breadcrumbItems[currentIndex] as HTMLLIElement)?.offsetWidth ?? 0;\n        const result = separatorWidth + childWidth;\n        childWidthCollection.push(result);\n        childSumWidth += result;\n        currentIndex += 1;\n      }\n\n      if (childWidthCollection.length === listCollection.length) {\n        childWidthCollection.pop();\n      }\n\n      widthCollectionRef.current = [\n        ...widthCollectionRef.current,\n        ...childWidthCollection,\n      ];\n\n      setMenuBreadcrumbs((oldVal) => oldVal + childWidthCollection.length);\n    }\n  }, [listCollection.length, parentWidth, childWidth]);\n\n  useEffect(() => {\n    const diffWidth = parentWidth - childWidth;\n\n    if (diffWidth > 0 && widthCollectionRef.current.length > 0) {\n      const total = widthCollectionRef.current.length;\n      const collection = [...widthCollectionRef.current];\n\n      let sumWidth = 0;\n\n      while (diffWidth > sumWidth && collection.length > 0) {\n        const lastWidth = collection[collection.length - 1] ?? 0;\n        if (diffWidth < lastWidth + sumWidth) {\n          sumWidth = diffWidth;\n        } else {\n          sumWidth += collection.pop() ?? 0;\n        }\n      }\n\n      const totalToDecrease = total - collection.length;\n\n      setMenuBreadcrumbs((oldVal) => {\n        const newValue = oldVal - totalToDecrease;\n        return newValue > 0 ? newValue : 0;\n      });\n\n      const end = total - totalToDecrease;\n\n      widthCollectionRef.current =\n        end > 0 ? widthCollectionRef.current.slice(0, end) : [];\n    }\n  }, [parentWidth, childWidth]);\n\n  return (\n    <StyledNavElement className={className} ref={handleRef} {...rest}>\n      <StyledListWrapper ref={listWrapperRef}>\n        <StyledOList ref={olRef}>\n          {menuCollection.length > 0 ? (\n            <StyledBreadcrumbListItem data-role=\"menu\">\n              <Menu\n                target={\n                  <Button variant=\"text gray\">\n                    <TreeDotsIcon />\n                  </Button>\n                }\n              >\n                <StyledMenuList>\n                  {menuCollection.map((child, index) => (\n                    <ListItem key={index}>{child}</ListItem>\n                  ))}\n                </StyledMenuList>\n              </Menu>\n            </StyledBreadcrumbListItem>\n          ) : null}\n          {listCollection.map((child, index) => {\n            return (\n              <React.Fragment key={index}>\n                {index > 0 || menuCollection.length > 0 ? (\n                  <StyledBreadcrumbListItem data-role=\"separator\">\n                    {separator}\n                  </StyledBreadcrumbListItem>\n                ) : null}\n                <StyledBreadcrumbListItem data-role=\"item\">\n                  {child}\n                </StyledBreadcrumbListItem>\n              </React.Fragment>\n            );\n          })}\n        </StyledOList>\n      </StyledListWrapper>\n    </StyledNavElement>\n  );\n});\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"],"file":"Breadcrumbs.js"}

package/dist/esm/components/Breadcrumbs/Styles.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export declare const StyledNavElement: import("styled-components").StyledComponent<"nav", any, {}, never>;
-export declare const StyledOList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const StyledListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledOList: import("styled-components").StyledComponent<"ol", any, {}, never>;
 export declare const StyledMenuList: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../List").IList & import("react").HTMLAttributes<HTMLUListElement> & import("react").RefAttributes<HTMLUListElement>>, any, {}, never>;
 export declare const StyledBreadcrumbListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
 //# sourceMappingURL=Styles.d.ts.map

package/dist/esm/components/Breadcrumbs/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/Styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,gBAAgB,oEAK5B,CAAC;AAIF,eAAO,MAAM,WAAW,mEAOvB,CAAC;AAIF,eAAO,MAAM,cAAc,sOAE1B,CAAC;AAIF,eAAO,MAAM,wBAAwB,mEAGpC,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/Styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,gBAAgB,oEAK5B,CAAC;AAIF,eAAO,MAAM,iBAAiB,oEAE7B,CAAC;AAIF,eAAO,MAAM,WAAW,mEAOvB,CAAC;AAIF,eAAO,MAAM,cAAc,sOAE1B,CAAC;AAIF,eAAO,MAAM,wBAAwB,mEAEpC,CAAC"}