@luminati-io/uikit 6.3.112 → 6.3.114

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 = {
@@ -47203,7 +47234,7 @@ __webpack_require__.r(__webpack_exports__);
 /*jslint react:true*/
 var _excluded = ["onChange", "disabledDays", "isRange", "defaultMonth", "month", "onMonthChange", "renderPopover", "format", "size", "value", "popoverPlacement", "captionLayout", "hideOnChange", "isOpen", "pickerProps"],
   _excluded2 = ["popoverPlacement", "popoverProps", "size", "placeholder", "onOpenChange", "isOpen", "inputEditable", "onChange"],
-  _excluded3 = ["mode", "selected", "onChange", "renderPopover", "hidePopover", "captionLayout", "hideOnChange", "isOpen", "pickerProps"],
+  _excluded3 = ["mode", "selected", "onChange", "renderPopover", "hidePopover", "captionLayout", "hideOnChange", "isOpen", "pickerProps", "onMonthChange"],
   _excluded4 = ["options"],
   _excluded5 = ["modifiers", "tabIndex"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
@@ -47442,6 +47473,11 @@ var PickerField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forw
   })));
 });
 PickerField.displayName = 'PickerField';
+function clampToMonthDay(day, year, monthIndex) {
+  var daysInMonth = new Date(year, monthIndex + 1, 0).getDate();
+  var d = Math.min(day, daysInMonth);
+  return new Date(year, monthIndex, d);
+}
 var PickerPopover = function PickerPopover(_ref) {
   var mode = _ref.mode,
     selected = _ref.selected,
@@ -47452,6 +47488,7 @@ var PickerPopover = function PickerPopover(_ref) {
     hideOnChange = _ref.hideOnChange,
     isOpen = _ref.isOpen,
     pickerProps = _ref.pickerProps,
+    onMonthChange = _ref.onMonthChange,
     rest = _objectWithoutProperties(_ref, _excluded3);
   var onSelect = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (_, day, modifiers) {
     if (modifiers.disabled) return;
@@ -47473,6 +47510,13 @@ var PickerPopover = function PickerPopover(_ref) {
     onChange(value);
     if (hideOnChange && (mode != 'range' || value.from && value.to)) hidePopover();
   }, [mode, selected]);
+  var _onMonthChange = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (_m) {
+    onMonthChange === null || onMonthChange === void 0 || onMonthChange(_m);
+    if (mode == 'range') return;
+    if (selected) {
+      onChange(clampToMonthDay(selected.getDate(), _m.getFullYear(), _m.getMonth()));
+    }
+  }, [onMonthChange, selected, mode, onChange]);
   var render = typeof renderPopover == 'function' ? renderPopover : function (_ref2) {
     var picker = _ref2.picker;
     return picker;
@@ -47485,6 +47529,7 @@ var PickerPopover = function PickerPopover(_ref) {
   }, render({
     picker: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(StyledDayPicker, _extends({}, rest, pickerProps, {
       captionLayout: captionLayout,
+      onMonthChange: _onMonthChange,
       onSelect: onSelect,
       mode: mode,
       selected: selected