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

package/dist/true-react-common-ui-kit.umd.cjs

@@ -6718,63 +6718,63 @@
       return trueReactPlatformHelpers.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
@@ -9099,12 +9099,12 @@
     });
     var _useState = _sliced_to_array$o(React.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);
     };
     React.useEffect(function() {
@@ -10840,8 +10840,8 @@
         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
@@ -10963,7 +10963,7 @@
                 },
                 children: defaultOptionLabel
               }),
-              trueReactPlatformHelpers.isStringNotEmpty(allOptionsLabel) && /* @__PURE__ */ jsx(SelectListItem, {
+              trueReactPlatformHelpers.isReactNodeNotEmpty(allOptionsLabel) && /* @__PURE__ */ jsx(SelectListItem, {
                 classes,
                 index: ALL_OPTION_INDEX,
                 isSemiChecked: selectedOptionsCount > 0 && !areAllOptionsSelected,
@@ -11444,7 +11444,9 @@
     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;
@@ -11523,7 +11525,11 @@
         return acc;
       }, []));
     }, [
-      filteredOptions
+      filteredOptions,
+      hasDefaultOption,
+      isOptionDisabled,
+      shouldShowAllOption,
+      shouldShowDefaultOption
     ]);
     var stringValue = trueReactPlatformHelpers.isNotEmpty(strValue) ? convertValueToString(strValue) : void 0;
     var showedStringValue = areAllOptionsSelected && trueReactPlatformHelpers.isNotEmpty(allOptionsLabel) ? allOptionsLabel : stringValue;
@@ -11566,9 +11572,9 @@
         handleListClose(event);
       }
     };
-    var handleOnChange = React.useCallback(function(newValue) {
+    var handleOnChange = React.useCallback(function(newValue, event) {
       if (!compareValuesOnChange(value, newValue)) {
-        onChange(newValue);
+        onChange(newValue, event);
       }
     }, [
       value,
@@ -11577,7 +11583,7 @@
     ]);
     var handleOptionSelect = React.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();
     }, [
@@ -11585,16 +11591,16 @@
       handleListClose,
       filteredOptions
     ]);
-    var handleToggleOptionCheckbox = React.useCallback(function(index, isSelected) {
+    var handleToggleOptionCheckbox = React.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];
@@ -11608,12 +11614,14 @@
         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 = React.useCallback(function() {
       var _ref2 = _async_to_generator$4(function(v) {
@@ -11650,14 +11658,17 @@
         return _ref2.apply(this, arguments);
       };
     }(), [
+      isMounted,
       onType,
       optionsMode
     ]);
-    var debounceHandleOnType = React.useCallback(tsDebounce.debounce(handleOnType, debounceTime), [
+    var debounceHandleOnType = React.useMemo(function() {
+      return tsDebounce.debounce(handleOnType, debounceTime);
+    }, [
       handleOnType,
       debounceTime
     ]);
-    var handleInputChange = function(v) {
+    var handleInputChange = function(v, event) {
       if (onType !== void 0) {
         debounceHandleOnType(v);
       }
@@ -11665,7 +11676,7 @@
         setShouldShowDefaultOption(v === "");
       }
       if (v === "" && !hasSearchInputInList) {
-        handleOnChange(void 0);
+        handleOnChange(void 0, event);
       }
       setSearchValue(v);
     };
@@ -11695,7 +11706,7 @@
                 return convertToId(opt) === valueIdToSelect;
               })) !== null && _value_some !== void 0 ? _value_some : false;
             }
-            handleToggleOptionCheckbox(indexToSelect, !isThisValueAlreadySelected);
+            handleToggleOptionCheckbox(indexToSelect, !isThisValueAlreadySelected, event);
           } else {
             handleOptionSelect(indexToSelect, event);
           }
@@ -11737,7 +11748,7 @@
       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,
@@ -11776,15 +11787,15 @@
     }, 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,
@@ -30075,6 +30086,9 @@
     },
     trigger: {
       cursor: "pointer"
+    },
+    popup: {
+      zIndex: 5
     }
   });
   function _array_like_to_array(arr, len) {
@@ -30266,6 +30280,7 @@
           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: trueReactPlatformHelpers.isFunction(Popup) ? /* @__PURE__ */ jsx(Popup, {
@@ -30277,7 +30292,6 @@
     }));
   };
   var useStyles = createThemedStyles("NewMoreMenu", {
-    root: {},
     hasCircle: {},
     button: {
       display: "flex",
@@ -30300,8 +30314,7 @@
     active: {},
     disabled: {
       cursor: "default"
-    },
-    menu: {}
+    }
   });
   function _define_property(obj, key, value) {
     if (key in obj) {
@@ -30360,6 +30373,16 @@
     var classes = useStyles({
       theme: tweakStyles
     });
+    var tweakWithPopupStyles = useTweakStyles({
+      tweakStyles,
+      className: "tweakWithPopup",
+      currentComponentName: "NewMoreMenu"
+    });
+    var tweakListStyles = useTweakStyles({
+      tweakStyles,
+      className: "tweakList",
+      currentComponentName: "NewMoreMenu"
+    });
     var isButtonDisabled = isDisabled || !trueReactPlatformHelpers.isArrayNotEmpty(items);
     return /* @__PURE__ */ jsx(WithPopup, {
       placement,
@@ -30367,6 +30390,7 @@
       shouldHideOnScroll,
       shouldRenderInBody,
       isDisabled: isButtonDisabled,
+      tweakStyles: tweakWithPopupStyles,
       trigger: function(param2) {
         var isActive = param2.isActive;
         var _obj;
@@ -30386,6 +30410,7 @@
         var onClose = param2.onClose;
         return /* @__PURE__ */ jsx(List, {
           items,
+          tweakStyles: tweakListStyles,
           onClick: onClose
         });
       }