@luminati-io/uikit 6.3.74 → 6.3.76

package/dist/umd/uikit.development.js

@@ -38696,7 +38696,9 @@ var Breadcrumbs = function Breadcrumbs(props) {
       item: item,
       isLastItem: visibleItems.length - 1 == index,
       minItemWidth: minItemWidth,
-      maxItemWidth: maxItemWidth
+      maxItemWidth: maxItemWidth,
+      ref: visibleItems.length - 1 == index ? lastItemRef : null,
+      isCompactMode: visibleItems.length <= 1
     });
   });
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(BreadcrumbsContainer, _extends({
@@ -38715,9 +38717,7 @@ var Breadcrumbs = function Breadcrumbs(props) {
   }) : /*#__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, {
     ref: moreRef,
     items: hiddenItems
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", {
-    ref: lastItemRef
-  }, itemsList.slice(-1))));
+  }), itemsList.slice(-1)));
 };
 Breadcrumbs.displayName = 'Breadcrumbs';
 Breadcrumbs.defaultValues = {
@@ -38766,18 +38766,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _tooltip__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../tooltip */ "./src/tooltip/index.js");
 /* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
 /* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
-/* harmony import */ var _divider__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./divider */ "./src/breadcrumbs/divider.js");
+/* harmony import */ var _use_overflow__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./use_overflow */ "./src/breadcrumbs/use_overflow.js");
+/* harmony import */ var _divider__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./divider */ "./src/breadcrumbs/divider.js");
 // LICENSE_CODE ZON
 
 
 /*jslint react:true*/
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+
 
 
 
@@ -38792,19 +38788,14 @@ var BreadcrumbsItem = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forward
     isLastItem = props.isLastItem,
     active = props.active,
     minItemWidth = props.minItemWidth,
-    maxItemWidth = props.maxItemWidth;
+    maxItemWidth = props.maxItemWidth,
+    isCompactMode = props.isCompactMode;
   var labelRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isOverflown = _useState2[0],
-    setIsOverflown = _useState2[1];
-  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-    var element = labelRef.current;
-    var compare = element ? element.offsetWidth < element.scrollWidth || element.offsetHeight < element.scrollHeight : false;
-    setIsOverflown(compare);
-  }, [item.text, maxItemWidth]);
+  var isOverflown = (0,_use_overflow__WEBPACK_IMPORTED_MODULE_7__.useIsOverflow)(labelRef, [minItemWidth, maxItemWidth]);
+  var minWidth = isCompactMode ? 0 : undefined;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_2__.Flex, {
-    ref: ref
+    ref: ref,
+    min_width: minWidth
   }, isLastItem && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_tooltip__WEBPACK_IMPORTED_MODULE_4__.Tooltip, {
     tooltip: isOverflown ? item.text : undefined
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledLabel, {
@@ -38825,7 +38816,7 @@ var BreadcrumbsItem = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forward
     iconPlacement: "left",
     variant: "secondary",
     size: "sm"
-  })), !isBackItem && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_divider__WEBPACK_IMPORTED_MODULE_7__.Divider, null)));
+  })), !isBackItem && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_divider__WEBPACK_IMPORTED_MODULE_8__.Divider, null)));
 });
 BreadcrumbsItem.displayName = 'BreadcrumbsItem';
 var StyledLabel = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(_typography__WEBPACK_IMPORTED_MODULE_5__.Label).withConfig({
@@ -38856,19 +38847,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
 /* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../icon */ "./src/icon.js");
 /* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
-/* harmony import */ var _divider__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./divider */ "./src/breadcrumbs/divider.js");
+/* harmony import */ var _use_overflow_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./use_overflow.js */ "./src/breadcrumbs/use_overflow.js");
+/* harmony import */ var _divider__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./divider */ "./src/breadcrumbs/divider.js");
 // LICENSE_CODE ZON
 
 
 /*jslint react:true*/
-var _excluded = ["icon"];
+var _excluded = ["icon", "text"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 
@@ -38880,27 +38866,40 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 
 
+
 var BreadcrumbsItem = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function (props, ref) {
   var _item = props.item,
     isLastItem = props.isLastItem,
     active = props.active,
     minItemWidth = props.minItemWidth,
-    maxItemWidth = props.maxItemWidth;
-  var icon = _item.icon,
-    item = _objectWithoutProperties(_item, _excluded);
+    maxItemWidth = props.maxItemWidth,
+    isCompactMode = props.isCompactMode;
+  var _useMemo = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+      var _icon = _item.icon,
+        _text = _item.text,
+        rest = _objectWithoutProperties(_item, _excluded);
+      return {
+        icon: _icon,
+        text: _text,
+        item: rest
+      };
+    }, [_item]),
+    icon = _useMemo.icon,
+    text = _useMemo.text,
+    item = _useMemo.item;
   var labelRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isOverflown = _useState2[0],
-    setIsOverflown = _useState2[1];
-  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-    var element = labelRef.current;
-    var compare = element ? element.offsetWidth < element.scrollWidth || element.offsetHeight < element.scrollHeight : false;
-    setIsOverflown(compare);
-  }, [item.text, maxItemWidth]);
+  var isOverflown = (0,_use_overflow_js__WEBPACK_IMPORTED_MODULE_8__.useIsOverflow)(labelRef, [minItemWidth, maxItemWidth]);
+  var minWidth = isCompactMode ? 0 : undefined;
+  var labelStyle = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    return isLastItem ? {
+      minWidth: (0,_util__WEBPACK_IMPORTED_MODULE_7__.px)(minItemWidth),
+      maxWidth: (0,_util__WEBPACK_IMPORTED_MODULE_7__.px)(maxItemWidth)
+    } : null;
+  }, [isLastItem, minItemWidth, maxItemWidth]);
   var content = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_2__.Flex, {
     gap: "03",
-    align_items: "center"
+    align_items: "center",
+    min_width: minWidth
   }, icon && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_6__.Icon, {
     name: icon.name,
     color: icon.color,
@@ -38909,29 +38908,26 @@ var BreadcrumbsItem = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forward
     ref: labelRef,
     "data-role": "item",
     "data-testid": active ? 'active-item' : 'item',
-    style: {
-      minWidth: (0,_util__WEBPACK_IMPORTED_MODULE_7__.px)(minItemWidth),
-      maxWidth: (0,_util__WEBPACK_IMPORTED_MODULE_7__.px)(maxItemWidth)
-    },
+    style: labelStyle,
     variant: isLastItem ? 'lg' : 'base',
     color: isLastItem ? 'text' : 'text_quaternary',
     $isLastItem: isLastItem
-  }, item.text));
+  }, text));
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_layout__WEBPACK_IMPORTED_MODULE_2__.Flex, {
     ref: ref,
-    align_items: "center"
+    align_items: "center",
+    min_width: minWidth
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(ItemWrapper, {
     isLastItem: isLastItem,
     isOverflown: isOverflown,
-    text: item.text
+    text: text
   }, isLastItem ? content : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledLink, _extends({
     "data-role": "item",
     "data-testid": active ? 'active-item' : 'item'
   }, item, {
-    text: content,
     variant: "secondary",
     size: "md"
-  }))), !isLastItem && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_divider__WEBPACK_IMPORTED_MODULE_8__.Divider, {
+  }), content)), !isLastItem && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_divider__WEBPACK_IMPORTED_MODULE_9__.Divider, {
     variant: "new"
   }));
 });
@@ -38949,11 +38945,11 @@ var ItemWrapper = function ItemWrapper(props) {
 var StyledLabel = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(_typography__WEBPACK_IMPORTED_MODULE_5__.Label).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-tw31i3-0"
-})(["white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:15px;"]);
+})(["white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:17px;"]);
 var StyledLink = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(_link__WEBPACK_IMPORTED_MODULE_3__.Link).withConfig({
   displayName: "StyledLink",
   componentId: "sc-tw31i3-1"
-})(["&:hover ", "{overflow:visible;text-decoration:underline;}"], StyledLabel);
+})(["&:hover ", "{text-decoration:underline;}"], StyledLabel);
 
 /***/ }),
 
@@ -39114,6 +39110,53 @@ __webpack_require__.r(__webpack_exports__);
 /*jslint react:true*/
 
 
+/***/ }),
+
+/***/ "./src/breadcrumbs/use_overflow.js":
+/*!*****************************************!*\
+  !*** ./src/breadcrumbs/use_overflow.js ***!
+  \*****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   useIsOverflow: () => (/* binding */ useIsOverflow)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../hooks */ "./src/hooks/index.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+
+
+var useIsOverflow = function useIsOverflow(ref) {
+  var deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasOverflow = _useState2[0],
+    setHasOverflow = _useState2[1];
+  var checkOverflow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
+    var element = ref.current;
+    if (!element) return;
+    var isOverflowing = element.scrollWidth > element.offsetWidth;
+    setHasOverflow(isOverflowing);
+  }, [ref]);
+  (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useResize)(checkOverflow);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    setTimeout(checkOverflow, 0);
+  }, [deps]);
+  return hasOverflow;
+};
+
 /***/ }),
 
 /***/ "./src/button/button.js":
@@ -52989,7 +53032,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /*jslint react:true*/
-var _excluded = ["className", "classNamePrefix", "style", "trigger", "placement", "popover", "onVisibleChange", "afterVisibleChange", "children", "hideOnScroll", "getScrollDOMNode", "destroyOnClose", "zIndex"];
+var _excluded = ["className", "classNamePrefix", "style", "trigger", "placement", "customPlacement", "popover", "onVisibleChange", "afterVisibleChange", "children", "hideOnScroll", "getScrollDOMNode", "destroyOnClose", "zIndex"];
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -53013,6 +53056,7 @@ var _Popover = function Popover(_ref) {
     trigger = _ref.trigger,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
+    customPlacement = _ref.customPlacement,
     popover = _ref.popover,
     onVisibleChange = _ref.onVisibleChange,
     afterVisibleChange = _ref.afterVisibleChange,
@@ -53055,6 +53099,7 @@ var _Popover = function Popover(_ref) {
     prefixCls: classNamePrefix,
     mask: true,
     action: trigger,
+    popupAlign: customPlacement,
     popupPlacement: placement,
     popupMotion: popupMotion,
     popupClassName: className,