@luminati-io/uikit 6.3.112 → 6.3.113

package/dist/umd/uikit.development.js

@@ -40894,7 +40894,6 @@ var Breadcrumbs = function Breadcrumbs(props) {
     activeIndex = _useState2[0],
     setActiveIndex = _useState2[1];
   var containerRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
-  var lastItemRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
   var moreRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
   var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(items),
     _useState4 = _slicedToArray(_useState3, 2),
@@ -40909,33 +40908,60 @@ var Breadcrumbs = function Breadcrumbs(props) {
     recalculationRender = _useState8[0],
     setRecalculationRender = _useState8[1];
   var calculateVisibleItems = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function () {
-    var _lastItemRef$current, _moreRef$current;
-    var lastItem = items[items.length - 1];
-    var tempVisibleItems = [];
-    var tempHiddenItems = [];
-    var containerWidth = containerRef.current.offsetWidth;
-    var containerChild = Array.from(containerRef.current.children);
-    var containerChildrenWidth = containerChild.reduce(function (acc, child) {
-      return acc + child.offsetWidth;
+    var container = containerRef.current;
+    if (!container) return {
+      visible: items,
+      hidden: []
+    };
+    var containerWidth = container.offsetWidth;
+    var moreButton = moreRef.current;
+    var itemElements = Array.from(container.children).filter(function (child) {
+      return child !== moreButton;
+    });
+    var itemWidths = itemElements.map(function (el) {
+      return el.offsetWidth;
+    });
+    var totalWidth = itemWidths.reduce(function (sum, width) {
+      return sum + width;
     }, 0);
-    var lastItemWidth = ((_lastItemRef$current = lastItemRef.current) === null || _lastItemRef$current === void 0 ? void 0 : _lastItemRef$current.offsetWidth) || 0;
-    var moreRefWidth = ((_moreRef$current = moreRef.current) === null || _moreRef$current === void 0 ? void 0 : _moreRef$current.offsetWidth) || 0;
-    if (containerWidth < containerChildrenWidth - moreRefWidth) {
-      var stopWidth = 0;
-      containerChild.splice(-2);
-      containerChild.forEach(function (item, index) {
-        stopWidth += item.offsetWidth;
-        if (containerWidth - lastItemWidth - moreRefWidth >= stopWidth) tempVisibleItems.push(items[index]);else tempHiddenItems.push(items[index]);
-      });
-      tempVisibleItems.push(lastItem);
+    if (containerWidth >= totalWidth) return {
+      visible: items,
+      hidden: []
+    };
+    if (items.length === 0) return {
+      visible: [],
+      hidden: []
+    };
+    var availableWidth = Math.max(0, containerWidth - ((moreButton === null || moreButton === void 0 ? void 0 : moreButton.offsetWidth) || 0));
+    var lastIndex = items.length - 1;
+    var lastWidth = itemWidths[lastIndex];
+    var firstWidth = itemWidths[0];
+    if (lastWidth > availableWidth) {
       return {
-        visible: tempVisibleItems,
-        hidden: tempHiddenItems
+        visible: [items[lastIndex]],
+        hidden: items.slice(0, lastIndex)
       };
     }
+    var visibleIndices = new Set([lastIndex]);
+    var usedWidth = lastWidth;
+    if (firstWidth <= availableWidth - usedWidth) {
+      visibleIndices.add(0);
+      usedWidth += firstWidth;
+      for (var i = lastIndex - 1; i >= 1; i--) {
+        var width = itemWidths[i];
+        if (usedWidth + width <= availableWidth) {
+          visibleIndices.add(i);
+          usedWidth += width;
+        }
+      }
+    }
     return {
-      visible: items,
-      hidden: []
+      visible: items.filter(function (_, idx) {
+        return visibleIndices.has(idx);
+      }),
+      hidden: items.filter(function (_, idx) {
+        return !visibleIndices.has(idx);
+      })
     };
   }, [items]);
   (0,react__WEBPACK_IMPORTED_MODULE_1__.useLayoutEffect)(function () {
@@ -41002,10 +41028,12 @@ var Breadcrumbs = function Breadcrumbs(props) {
       isLastItem: visibleItems.length - 1 == index,
       minItemWidth: minItemWidth,
       maxItemWidth: maxItemWidth,
-      ref: visibleItems.length - 1 == index ? lastItemRef : null,
       isCompactMode: visibleItems.length <= 1
     });
   });
+  var firstIsHidden = hiddenItems.some(function (h) {
+    return h === items[0];
+  });
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(BreadcrumbsContainer, _extends({
     ref: containerRef
   }, (0,_util__WEBPACK_IMPORTED_MODULE_4__.pickAttrs)(rest), {
@@ -41021,10 +41049,13 @@ var Breadcrumbs = function Breadcrumbs(props) {
     isCompactMode: visibleItems.length <= 1,
     active: activeIndex === 0,
     item: items[0]
-  }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null, itemsList.slice(0, -1), (recalculationRender || hiddenItems.length > 0) && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_collapsed_items__WEBPACK_IMPORTED_MODULE_8__.CollapsedItems, {
+  }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null, firstIsHidden && (recalculationRender || hiddenItems.length > 0) && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_collapsed_items__WEBPACK_IMPORTED_MODULE_8__.CollapsedItems, {
+    ref: moreRef,
+    items: hiddenItems
+  }), !firstIsHidden && itemsList[0], !firstIsHidden && (recalculationRender || hiddenItems.length > 0) && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_collapsed_items__WEBPACK_IMPORTED_MODULE_8__.CollapsedItems, {
     ref: moreRef,
     items: hiddenItems
-  }), itemsList.slice(-1)));
+  }), firstIsHidden ? itemsList : itemsList.slice(1)));
 };
 Breadcrumbs.displayName = 'Breadcrumbs';
 Breadcrumbs.defaultValues = {