@true-engineering/true-react-common-ui-kit 3.8.1 → 3.9.0

package/dist/true-react-common-ui-kit.js

@@ -6729,63 +6729,63 @@ var useMergedRefs = function(refs) {
     return mergeRefs(refs);
   }, refs);
 };
-const avatarGreen = `  <svg\r
-    width="100%"\r
-    height="100%"\r
-    viewBox="0 0 32 32"\r
-    fill="none"\r
-    xmlns="http://www.w3.org/2000/svg"\r
-  >\r
-    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />\r
-    <mask\r
-      id="mask0_0_12744"\r
-      style="mask-type: 'alpha';"\r
-      maskUnits="userSpaceOnUse"\r
-      x="0"\r
-      y="0"\r
-      width="32"\r
-      height="32"\r
-    >\r
-      <circle cx="16" cy="16" r="16" fill="white" />\r
-    </mask>\r
-    <g mask="url(#mask0_0_12744)">\r
-      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />\r
-      <mask\r
-        id="mask1_0_12744"\r
-        style="mask-type: 'alpha';"\r
-        maskUnits="userSpaceOnUse"\r
-        x="3"\r
-        y="16"\r
-        width="26"\r
-        height="26"\r
-      >\r
-        <circle cx="16" cy="29" r="13" fill="white" />\r
-      </mask>\r
-      <g mask="url(#mask1_0_12744)">\r
-        <ellipse\r
-          cx="16"\r
-          cy="17.5"\r
-          rx="6"\r
-          ry="7.5"\r
-          fill="#505F79"\r
-          fill-opacity="0.204983"\r
-        />\r
-      </g>\r
-    </g>\r
-    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />\r
-    <defs>\r
-      <linearGradient\r
-        id="paint0_linear_0_12744"\r
-        x1="13.347"\r
-        y1="46.279"\r
-        x2="33.5318"\r
-        y2="30.8088"\r
-        gradientUnits="userSpaceOnUse"\r
-      >\r
-        <stop stop-color="#ABD229" />\r
-        <stop offset="1" stop-color="#9CD03F" />\r
-      </linearGradient>\r
-    </defs>\r
+const avatarGreen = `  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
+    <mask
+      id="mask0_0_12744"
+      style="mask-type: 'alpha';"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="32"
+      height="32"
+    >
+      <circle cx="16" cy="16" r="16" fill="white" />
+    </mask>
+    <g mask="url(#mask0_0_12744)">
+      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
+      <mask
+        id="mask1_0_12744"
+        style="mask-type: 'alpha';"
+        maskUnits="userSpaceOnUse"
+        x="3"
+        y="16"
+        width="26"
+        height="26"
+      >
+        <circle cx="16" cy="29" r="13" fill="white" />
+      </mask>
+      <g mask="url(#mask1_0_12744)">
+        <ellipse
+          cx="16"
+          cy="17.5"
+          rx="6"
+          ry="7.5"
+          fill="#505F79"
+          fill-opacity="0.204983"
+        />
+      </g>
+    </g>
+    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
+    <defs>
+      <linearGradient
+        id="paint0_linear_0_12744"
+        x1="13.347"
+        y1="46.279"
+        x2="33.5318"
+        y2="30.8088"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#ABD229" />
+        <stop offset="1" stop-color="#9CD03F" />
+      </linearGradient>
+    </defs>
   </svg>`;
 var complexIcons = {
   avatar: avatarGreen
@@ -9110,12 +9110,12 @@ function Checkbox(param) {
   });
   var _useState = _sliced_to_array$o(useState(false), 2), isSelected = _useState[0], setIsSelected = _useState[1];
   var hasAction = !isDisabled && !isReadonly;
-  var onToggle = function() {
+  var onToggle = function(event) {
     var isSelectedNext = !isSelected;
     onSelect({
       value,
       isSelected: isSelectedNext
-    });
+    }, event);
     setIsSelected(isSelectedNext);
   };
   useEffect(function() {
@@ -10851,8 +10851,8 @@ var SelectListItem = function(param) {
       isSemiChecked,
       isDisabled,
       tweakStyles: checkboxStyles$1,
-      onSelect: function(v) {
-        return onToggleCheckbox(index, v.isSelected);
+      onSelect: function(v, event) {
+        return onToggleCheckbox(index, v.isSelected, event);
       },
       children
     }) : children
@@ -10974,7 +10974,7 @@ function SelectList(param) {
               },
               children: defaultOptionLabel
             }),
-            isStringNotEmpty(allOptionsLabel) && /* @__PURE__ */ jsx(SelectListItem, {
+            isReactNodeNotEmpty(allOptionsLabel) && /* @__PURE__ */ jsx(SelectListItem, {
               classes,
               index: ALL_OPTION_INDEX,
               isSemiChecked: selectedOptionsCount > 0 && !areAllOptionsSelected,
@@ -11455,7 +11455,9 @@ function Select(props) {
   var classes = useStyles$B({
     theme: tweakStyles
   });
-  var shouldRenderSearchInputInList = (searchInput === null || searchInput === void 0 ? void 0 : searchInput.shouldRenderInList) === true;
+  var _ref = searchInput !== null && searchInput !== void 0 ? searchInput : {}, tmp = _ref.shouldRenderInList, shouldRenderSearchInputInList = tmp === void 0 ? false : tmp, searchInputProps = _object_without_properties$9(_ref, [
+    "shouldRenderInList"
+  ]);
   var hasSearchInputInList = optionsMode !== "normal" && shouldRenderSearchInputInList;
   var isMultiSelect = isMultiSelectValue(props);
   var hasReadonlyInput = isReadonly || optionsMode === "normal" || shouldRenderSearchInputInList;
@@ -11534,7 +11536,11 @@ function Select(props) {
       return acc;
     }, []));
   }, [
-    filteredOptions
+    filteredOptions,
+    hasDefaultOption,
+    isOptionDisabled,
+    shouldShowAllOption,
+    shouldShowDefaultOption
   ]);
   var stringValue = isNotEmpty(strValue) ? convertValueToString(strValue) : void 0;
   var showedStringValue = areAllOptionsSelected && isNotEmpty(allOptionsLabel) ? allOptionsLabel : stringValue;
@@ -11577,9 +11583,9 @@ function Select(props) {
       handleListClose(event);
     }
   };
-  var handleOnChange = useCallback(function(newValue) {
+  var handleOnChange = useCallback(function(newValue, event) {
     if (!compareValuesOnChange(value, newValue)) {
-      onChange(newValue);
+      onChange(newValue, event);
     }
   }, [
     value,
@@ -11588,7 +11594,7 @@ function Select(props) {
   ]);
   var handleOptionSelect = useCallback(function(index, event) {
     var _input_current;
-    handleOnChange(index === DEFAULT_OPTION_INDEX ? void 0 : filteredOptions[index]);
+    handleOnChange(index === DEFAULT_OPTION_INDEX ? void 0 : filteredOptions[index], event);
     handleListClose(event);
     (_input_current = input.current) === null || _input_current === void 0 ? void 0 : _input_current.blur();
   }, [
@@ -11596,16 +11602,16 @@ function Select(props) {
     handleListClose,
     filteredOptions
   ]);
-  var handleToggleOptionCheckbox = useCallback(function(index, isSelected) {
+  var handleToggleOptionCheckbox = useCallback(function(index, isSelected, event) {
     if (!isMultiSelect) {
       return;
     }
     if (index === DEFAULT_OPTION_INDEX || index === ALL_OPTION_INDEX && !isSelected) {
-      handleOnChange(void 0);
+      handleOnChange(void 0, event);
       return;
     }
     if (index === ALL_OPTION_INDEX && isSelected) {
-      handleOnChange(availableOptions);
+      handleOnChange(availableOptions, event);
       return;
     }
     var option = filteredOptions[index];
@@ -11619,12 +11625,14 @@ function Select(props) {
       value === null || value === void 0 ? void 0 : value.filter(function(o) {
         return convertToId(o) !== convertToId(option);
       })
-    ));
+    ), event);
   }, [
-    handleOnChange,
-    filteredOptions,
     isMultiSelect,
-    value
+    filteredOptions,
+    handleOnChange,
+    value,
+    availableOptions,
+    convertToId
   ]);
   var handleOnType = useCallback(function() {
     var _ref2 = _async_to_generator$4(function(v) {
@@ -11661,14 +11669,17 @@ function Select(props) {
       return _ref2.apply(this, arguments);
     };
   }(), [
+    isMounted,
     onType,
     optionsMode
   ]);
-  var debounceHandleOnType = useCallback(debounce$1(handleOnType, debounceTime), [
+  var debounceHandleOnType = useMemo(function() {
+    return debounce$1(handleOnType, debounceTime);
+  }, [
     handleOnType,
     debounceTime
   ]);
-  var handleInputChange = function(v) {
+  var handleInputChange = function(v, event) {
     if (onType !== void 0) {
       debounceHandleOnType(v);
     }
@@ -11676,7 +11687,7 @@ function Select(props) {
       setShouldShowDefaultOption(v === "");
     }
     if (v === "" && !hasSearchInputInList) {
-      handleOnChange(void 0);
+      handleOnChange(void 0, event);
     }
     setSearchValue(v);
   };
@@ -11706,7 +11717,7 @@ function Select(props) {
               return convertToId(opt) === valueIdToSelect;
             })) !== null && _value_some !== void 0 ? _value_some : false;
           }
-          handleToggleOptionCheckbox(indexToSelect, !isThisValueAlreadySelected);
+          handleToggleOptionCheckbox(indexToSelect, !isThisValueAlreadySelected, event);
         } else {
           handleOptionSelect(indexToSelect, event);
         }
@@ -11748,7 +11759,7 @@ function Select(props) {
     hasSearchInputInList) && // Последняя проверка на случай, если мы че то ищем в опциях
     (optionsMode === "normal" || hasEnoughSymbolsToSearch)
   );
-  var _ref = dropdownOptions !== null && dropdownOptions !== void 0 ? dropdownOptions : {}, _ref_shouldUsePopper = _ref.shouldUsePopper, shouldUsePopper = _ref_shouldUsePopper === void 0 ? false : _ref_shouldUsePopper, _ref_shouldRenderInBody = _ref.shouldRenderInBody, shouldRenderInBody = _ref_shouldRenderInBody === void 0 ? false : _ref_shouldRenderInBody, _ref_shouldHideOnScroll = _ref.shouldHideOnScroll, shouldHideOnScroll = _ref_shouldHideOnScroll === void 0 ? false : _ref_shouldHideOnScroll;
+  var _ref1 = dropdownOptions !== null && dropdownOptions !== void 0 ? dropdownOptions : {}, _ref_shouldUsePopper = _ref1.shouldUsePopper, shouldUsePopper = _ref_shouldUsePopper === void 0 ? false : _ref_shouldUsePopper, _ref_shouldRenderInBody = _ref1.shouldRenderInBody, shouldRenderInBody = _ref_shouldRenderInBody === void 0 ? false : _ref_shouldRenderInBody, _ref_shouldHideOnScroll = _ref1.shouldHideOnScroll, shouldHideOnScroll = _ref_shouldHideOnScroll === void 0 ? false : _ref_shouldHideOnScroll;
   var popperData = useDropdown({
     isOpen,
     onDropdownClose: handleListClose,
@@ -11787,15 +11798,15 @@ function Select(props) {
   }, popperData === null || popperData === void 0 ? void 0 : popperData.attributes.popper), {
     children: isOpen && /* @__PURE__ */ jsx(SelectList, {
       options: filteredOptions,
-      defaultOptionLabel: hasDefaultOption && shouldShowDefaultOption ? defaultOptionLabel : void 0,
-      allOptionsLabel: shouldShowAllOption ? allOptionsLabel : void 0,
+      defaultOptionLabel: hasDefaultOption && shouldShowDefaultOption && defaultOptionLabel,
+      allOptionsLabel: shouldShowAllOption && allOptionsLabel,
       areAllOptionsSelected,
-      customListHeader: hasSearchInputInList ? /* @__PURE__ */ jsx(SearchInput, _object_spread$D({
+      customListHeader: hasSearchInputInList && /* @__PURE__ */ jsx(SearchInput, _object_spread$D({
         value: searchValue,
         onChange: handleInputChange,
         tweakStyles: tweakSearchInputStyles,
         placeholder: "Поиск"
-      }, searchInput)) : void 0,
+      }, searchInputProps)),
       noMatchesLabel,
       focusedIndex: focusedListCellIndex,
       activeValue: value,
@@ -30086,6 +30097,9 @@ var useStyles$1 = createThemedStyles("WithPopup", {
   },
   trigger: {
     cursor: "pointer"
+  },
+  popup: {
+    zIndex: 5
   }
 });
 function _array_like_to_array(arr, len) {
@@ -30277,6 +30291,7 @@ var WithPopup = function(param) {
         root: !shouldRenderInBody ? refs.reference.current : void 0,
         children: /* @__PURE__ */ jsx("div", _object_spread_props$1(_object_spread$1({
           style: floatingStyles,
+          className: classes.popup,
           ref: refs.setFloating
         }, getFloatingProps()), {
           children: isFunction$1(Popup) ? /* @__PURE__ */ jsx(Popup, {
@@ -30288,7 +30303,6 @@ var WithPopup = function(param) {
   }));
 };
 var useStyles = createThemedStyles("NewMoreMenu", {
-  root: {},
   hasCircle: {},
   button: {
     display: "flex",
@@ -30311,8 +30325,7 @@ var useStyles = createThemedStyles("NewMoreMenu", {
   active: {},
   disabled: {
     cursor: "default"
-  },
-  menu: {}
+  }
 });
 function _define_property(obj, key, value) {
   if (key in obj) {
@@ -30371,6 +30384,16 @@ var NewMoreMenu = function(param) {
   var classes = useStyles({
     theme: tweakStyles
   });
+  var tweakWithPopupStyles = useTweakStyles({
+    tweakStyles,
+    className: "tweakWithPopup",
+    currentComponentName: "NewMoreMenu"
+  });
+  var tweakListStyles = useTweakStyles({
+    tweakStyles,
+    className: "tweakList",
+    currentComponentName: "NewMoreMenu"
+  });
   var isButtonDisabled = isDisabled || !isArrayNotEmpty(items);
   return /* @__PURE__ */ jsx(WithPopup, {
     placement,
@@ -30378,6 +30401,7 @@ var NewMoreMenu = function(param) {
     shouldHideOnScroll,
     shouldRenderInBody,
     isDisabled: isButtonDisabled,
+    tweakStyles: tweakWithPopupStyles,
     trigger: function(param2) {
       var isActive = param2.isActive;
       var _obj;
@@ -30397,6 +30421,7 @@ var NewMoreMenu = function(param) {
       var onClose = param2.onClose;
       return /* @__PURE__ */ jsx(List, {
         items,
+        tweakStyles: tweakListStyles,
         onClick: onClose
       });
     }