@true-engineering/true-react-common-ui-kit 4.0.0-alpha26 → 4.0.0-alpha28

package/dist/components/FiltersPane/types.d.ts

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from 'react';
+import { ITestIdProps } from '../../types';
 import { IDatePickerProps } from '../DatePicker';
 import { IMultiSelectListValues } from '../MultiSelectList';
 import type { IFilterIntervalProps, IFilterMultiSelectProps, IFilterSelectProps, IFilterWithDatesProps, IFilterWithPeriodProps } from './components';
@@ -54,7 +55,7 @@ export type IDateRangeConfigItem<Value> = IConfigItemBasicBase<Value> & {
     type: 'dateRange';
     dateFormat?: string;
 } & Omit<IFilterWithPeriodProps, 'value' | 'onChange' | 'setIsOpen'>;
-export interface ICustomComponentProps<Value> {
+export interface ICustomComponentProps<Value> extends ITestIdProps {
     value?: Value;
     onChange: (v?: Value) => void;
     onClose?: () => void;

package/dist/components/Select/components/SelectListItem/SelectListItem.d.ts

@@ -1,6 +1,7 @@
 import { type ChangeEvent, type FC, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';
 import { type Classes } from 'jss';
-export interface ISelectListItemProps {
+import { IDataAttributesProps } from '../../../../types';
+export interface ISelectListItemProps extends IDataAttributesProps {
     index: number;
     isSemiChecked?: boolean;
     isDisabled?: boolean;

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

@@ -11474,7 +11474,7 @@ function _object_spread_props$F(target, source) {
   return target;
 }
 var SelectListItem = function(param) {
-  var classes = param.classes, index = param.index, isSemiChecked = param.isSemiChecked, isDisabled = param.isDisabled, isActive = param.isActive, children = param.children, isFocused = param.isFocused, isMultiSelect = param.isMultiSelect, onOptionSelect = param.onOptionSelect, onToggleCheckbox = param.onToggleCheckbox;
+  var classes = param.classes, index = param.index, isSemiChecked = param.isSemiChecked, isDisabled = param.isDisabled, isActive = param.isActive, children = param.children, isFocused = param.isFocused, isMultiSelect = param.isMultiSelect, data = param.data, onOptionSelect = param.onOptionSelect, onToggleCheckbox = param.onToggleCheckbox;
   var multiSelectContent = isMultiSelect && /* @__PURE__ */ jsx(Checkbox, {
     isChecked: isActive || isSemiChecked,
     isSemiChecked,
@@ -11493,11 +11493,11 @@ var SelectListItem = function(param) {
       block: "nearest"
     },
     className: clsx(classes.cell, (_obj2 = {}, _define_property$N(_obj2, classes.cellWithCheckbox, isMultiSelect), _define_property$N(_obj2, classes.focused, isFocused), _define_property$N(_obj2, classes.active, isActive && !isMultiSelect), _define_property$N(_obj2, classes.disabled, isDisabled), _obj2))
-  }, addDataAttributes({
+  }, addDataAttributes$1(_object_spread$L({
     disabled: isDisabled,
     active: isActive,
     focused: isFocused
-  })), {
+  }, data))), {
     onClick: !isDisabled && !isMultiSelect ? function(event) {
       return onOptionSelect(index, event);
     } : void 0,
@@ -11626,8 +11626,9 @@ function SelectList(param) {
             }),
             listOptions.map(function(opt, i) {
               var optionValue = options[i];
+              var id = convertValueToId(optionValue);
               var isFocused = focusedIndex === i;
-              var isActive = activeOptionsIds.has(convertValueToId(optionValue));
+              var isActive = activeOptionsIds.has(id);
               var isDisabled = optionsDisableMap[i];
               return /* @__PURE__ */ jsx(SelectListItem, {
                 classes,
@@ -11638,6 +11639,9 @@ function SelectList(param) {
                 isMultiSelect,
                 onOptionSelect,
                 onToggleCheckbox,
+                data: {
+                  id
+                },
                 children: opt
               }, i);
             }),
@@ -19077,7 +19081,7 @@ function FilterSelect(param) {
   }, []);
   return /* @__PURE__ */ jsxs("div", _object_spread_props$t(_object_spread$u({
     className: classes.root
-  }, addDataAttributes(data)), {
+  }, addDataAttributes$1(data, testId)), {
     children: [
       isSearchEnabled && /* @__PURE__ */ jsx("div", {
         className: classes.dropdownInput,
@@ -19086,20 +19090,20 @@ function FilterSelect(param) {
           placeholder: translates.searchPlaceholder,
           onChange: handleOnChange,
           tweakStyles: tweakSearchInputStyles,
-          testId: testId !== void 0 ? "".concat(testId, "-search") : void 0,
+          testId: getTestId(testId, "search"),
           shouldFocusOnMount: true
         })
       }),
       !isLoading && /* @__PURE__ */ jsxs(Fragment, {
         children: [
-          allOptions.length !== 0 && /* @__PURE__ */ jsxs("div", {
-            className: clsx(classes.list, hasClearButton && classes.withClearButton),
-            "data-testid": testId !== void 0 ? "".concat(testId, "-list") : void 0,
+          isArrayNotEmpty(allOptions) && /* @__PURE__ */ jsxs("div", _object_spread_props$t(_object_spread$u({
+            className: clsx(classes.list, _define_property$v({}, classes.withClearButton, hasClearButton))
+          }, addDataTestId(testId, "list")), {
             children: [
-              isGroupingEnabled && value !== void 0 && /* @__PURE__ */ jsxs(Fragment, {
+              isGroupingEnabled && isNotEmpty(value) && /* @__PURE__ */ jsxs(Fragment, {
                 children: [
                   /* @__PURE__ */ jsx("div", {
-                    className: clsx(classes.label, classes.labelChosen, !isSearchEnabled && classes.withoutTopGap),
+                    className: clsx(classes.label, classes.labelChosen, _define_property$v({}, classes.withoutTopGap, !isSearchEnabled)),
                     children: translates.chosen
                   }),
                   /* @__PURE__ */ jsxs("div", {
@@ -19127,7 +19131,7 @@ function FilterSelect(param) {
                 ]
               }),
               allOptions.map(function(item, index) {
-                var isActive = value !== void 0 && getValueId(value) === getValueId(item);
+                var isActive = isNotEmpty(value) && getValueId(value) === getValueId(item);
                 if (isGroupingEnabled && isActive) {
                   return null;
                 }
@@ -19140,11 +19144,14 @@ function FilterSelect(param) {
                     return handleChange(item);
                   },
                   children: [
-                    /* @__PURE__ */ jsx("div", {
-                      className: classes.option,
-                      "data-option": id,
+                    /* @__PURE__ */ jsx("div", _object_spread_props$t(_object_spread$u({
+                      className: classes.option
+                    }, addDataAttributes$1({
+                      id,
+                      option: id
+                    })), {
                       children: view
-                    }),
+                    })),
                     isActive && /* @__PURE__ */ jsx("div", {
                       className: classes.icon,
                       children: /* @__PURE__ */ jsx(Icon, {
@@ -19163,14 +19170,14 @@ function FilterSelect(param) {
                 }
               })
             ]
-          }),
+          })),
           shouldShowPreloader && /* @__PURE__ */ jsx("div", {
             className: classes.preloader,
             children: /* @__PURE__ */ jsx(ThemedPreloader, {
               type: "dots"
             })
           }),
-          allOptions.length === 0 && /* @__PURE__ */ jsx("div", {
+          !isArrayNotEmpty(allOptions) && /* @__PURE__ */ jsx("div", {
             className: classes.nothingFound,
             children: translates.nothingFound
           }),
@@ -19187,7 +19194,7 @@ function FilterSelect(param) {
                   onClick: handleClear,
                   size: "s",
                   view: "text",
-                  testId: testId !== void 0 ? "".concat(testId, "-clear-button") : void 0,
+                  testId: getTestId(testId, "clear-button"),
                   tweakStyles: tweakClearButtonStyles,
                   children: translates.clear
                 })
@@ -19795,7 +19802,7 @@ var FilterWithPeriod = function(param) {
           locale: translates,
           tweakStyles: tweakSelectStyles,
           getValueView: getPeriodTranslate,
-          testId: testId !== void 0 ? "".concat(testId, "-select") : void 0
+          testId: getTestId(testId, "select")
         })
       }),
       isDatePickerShown && /* @__PURE__ */ jsx("div", {
@@ -19817,7 +19824,7 @@ var FilterWithPeriod = function(param) {
           onChange: handleCustomDateChange,
           localeKey,
           locale: translates,
-          testId: testId !== void 0 ? "".concat(testId, "-dates") : void 0
+          testId: getTestId(testId, "dates")
         })
       })
     ]
@@ -19912,7 +19919,7 @@ function Filter(props) {
       onClose,
       localeKey: translatesLocaleKey,
       locale: translates,
-      testId: testId !== void 0 ? "".concat(testId, "-select") : void 0
+      testId: getTestId(testId, "select")
     }, filter));
   }
   if (filter.type === "dateRange") {
@@ -19923,7 +19930,7 @@ function Filter(props) {
       onClose,
       localeKey: translatesLocaleKey,
       locale: translates,
-      testId: testId !== void 0 ? "".concat(testId, "-period") : void 0
+      testId: getTestId(testId, "period")
     }, filter));
   }
   if (filter.type === "dateRangeWithoutPeriod") {
@@ -19940,7 +19947,7 @@ function Filter(props) {
       },
       localeKey: translatesLocaleKey,
       locale: translates,
-      testId: testId !== void 0 ? "".concat(testId, "-dates") : void 0
+      testId: getTestId(testId, "dates")
     }, filter));
   }
   if (filter.type === "multiSelect") {
@@ -19951,7 +19958,7 @@ function Filter(props) {
       onClose,
       localeKey: translatesLocaleKey,
       locale: translates,
-      testId: testId !== void 0 ? "".concat(testId, "-multiSelect") : void 0
+      testId: getTestId(testId, "multiSelect")
     }, filter));
   }
   if (filter.type === "interval") {
@@ -19962,19 +19969,19 @@ function Filter(props) {
       localeKey: translatesLocaleKey,
       locale: translates,
       labelName: filter.name,
-      testId: testId !== void 0 ? "".concat(testId, "-interval") : void 0
+      testId: getTestId(testId, "interval")
     }, filter));
   }
-  if (filter.type === "boolean") {
-    return null;
-  }
   if (filter.type === "custom" && filter.component) {
     var Component = filter.component;
     return /* @__PURE__ */ jsx(Component, _object_spread_props$q(_object_spread$r({}, props), {
-      filter
+      filter,
+      testId: getTestId(testId, "dropdown")
     }));
   }
-  console.warn("%cДля фильтра ".concat(filter.name, " не задан тип или component"), "background: red; color: black");
+  if (filter.type !== "boolean") {
+    console.warn("%cДля фильтра ".concat(filter.name, " не задан тип или component"), "background: red; color: black");
+  }
   return null;
 }
 var useStyles$o = createThemedStyles("FiltersPaneSearch", {
@@ -20228,17 +20235,11 @@ function FiltersPaneSearch(param) {
     });
     setIsOpen(false);
   };
-  var selectedFieldLabel = useMemo(function() {
-    return field !== void 0 && getValueView !== void 0 ? getValueView(field) : void 0;
-  }, [
-    field
-  ]);
   var _obj2;
   return /* @__PURE__ */ jsxs("div", _object_spread_props$p(_object_spread$q({
     className: clsx(classes.root, (_obj2 = {}, _define_property$r(_obj2, classes.focused, isInputFocused), _define_property$r(_obj2, classes.disabled, isDisabled), _obj2)),
-    ref: refRoot,
-    "data-testid": testId
-  }, addDataAttributes(data)), {
+    ref: refRoot
+  }, addDataAttributes$1(data, testId)), {
     children: [
       /* @__PURE__ */ jsx(SearchInput, {
         value,
@@ -20251,23 +20252,23 @@ function FiltersPaneSearch(param) {
         onBlur: function() {
           return setIsInputFocused(false);
         },
-        testId: testId !== void 0 ? "".concat(testId, "-input") : void 0,
+        testId: getTestId(testId, "input"),
         maxLength,
         isDisabled
       }),
       /* @__PURE__ */ jsxs("div", {
         className: classes.selectWrapper,
         children: [
-          fields.length > 0 && /* @__PURE__ */ jsxs("div", {
+          fields.length > 0 && /* @__PURE__ */ jsxs("div", _object_spread_props$p(_object_spread$q({
             className: classes.selectBlock,
             onClick: !isDisabled ? function() {
               return setIsOpen(!isOpen);
-            } : void 0,
-            "data-testid": testId !== void 0 ? "".concat(testId, "-select") : void 0,
+            } : void 0
+          }, addDataTestId(testId, "select")), {
             children: [
               /* @__PURE__ */ jsx("div", {
-                className: clsx(classes.selectLabel, selectedFieldLabel !== void 0 && classes.active),
-                children: selectedFieldLabel !== null && selectedFieldLabel !== void 0 ? selectedFieldLabel : translates.displayedFields
+                className: clsx(classes.selectLabel, _define_property$r({}, classes.active, isNotEmpty(field))),
+                children: isNotEmpty(field) ? getValueView === null || getValueView === void 0 ? void 0 : getValueView(field) : translates.displayedFields
               }),
               /* @__PURE__ */ jsx("div", {
                 className: clsx(classes.chevronIcon, isOpen && classes.open),
@@ -20276,7 +20277,7 @@ function FiltersPaneSearch(param) {
                 })
               })
             ]
-          }),
+          })),
           isOpen && /* @__PURE__ */ jsx("div", {
             className: classes.dropdown,
             children: /* @__PURE__ */ jsx(FilterSelect, {
@@ -20291,7 +20292,7 @@ function FiltersPaneSearch(param) {
               onChange: handleFieldsChange,
               isSearchEnabled: isSelectSearchEnabled,
               hasClearButton: hasClearSelectButton,
-              testId: testId !== void 0 ? "".concat(testId, "-dropdown") : void 0
+              testId: getTestId(testId, "dropdown")
             })
           })
         ]
@@ -20676,7 +20677,7 @@ function FilterWrapper(param) {
       var _obj2;
       return /* @__PURE__ */ jsx("div", _object_spread_props$o(_object_spread$p({
         className: clsx(classes.root, (_obj2 = {}, _define_property$q(_obj2, classes.noValue, !hasValue), _define_property$q(_obj2, classes.openNoValue, isActive && !hasValue), _define_property$q(_obj2, classes.withValue, !isActive && hasValue), _define_property$q(_obj2, classes.openWithValue, isActive && hasValue), _define_property$q(_obj2, classes.boolean, isBoolean), _define_property$q(_obj2, classes.disabled, isDisabled), _obj2))
-      }, addDataTestId(testId), addDataAttributes(data), referenceProps), {
+      }, addDataAttributes$1(data, testId), referenceProps), {
         children: /* @__PURE__ */ jsxs("div", {
           onClick: handleLabelClick,
           className: clsx(classes.item, _define_property$q({}, classes.booleanItem, isBoolean)),
@@ -20685,7 +20686,7 @@ function FilterWrapper(param) {
               className: classes.name,
               children: filter.name
             }),
-            !isBoolean && value !== void 0 && value !== null && /* @__PURE__ */ jsx("div", {
+            !isBoolean && isNotEmpty(value) && /* @__PURE__ */ jsx("div", {
               className: classes.value,
               children: /* @__PURE__ */ jsx(FilterValueView, {
                 value,
@@ -20803,7 +20804,7 @@ function FiltersPane(param) {
   ]);
   var filtersKeys = enabledFilters !== null && enabledFilters !== void 0 ? enabledFilters : Object.keys(filtersConfig);
   var handleClear = function() {
-    if (onClear !== void 0) {
+    if (isNotEmpty(onClear)) {
       onClear();
       return;
     }
@@ -20812,9 +20813,9 @@ function FiltersPane(param) {
       search.onChange({});
     }
   };
-  var shouldShowClearButton = hasClearButton && (search !== void 0 || filtersKeys.filter(function(key) {
-    return filtersConfig[key] !== void 0;
-  }).length > 0);
+  var shouldShowClearButton = hasClearButton && (isNotEmpty(search) || filtersKeys.some(function(key) {
+    return isNotEmpty(filtersConfig[key]);
+  }));
   var clearButton = /* @__PURE__ */ jsx("div", {
     className: classes.clear,
     children: /* @__PURE__ */ jsx(Button, {
@@ -20830,7 +20831,7 @@ function FiltersPane(param) {
   var _search_localeKey, _search_localeKey1, _search_isDisabled;
   return /* @__PURE__ */ jsxs("div", _object_spread_props$n(_object_spread$o({
     className: classes.root
-  }, addDataTestId(testId), addDataAttributes(data)), {
+  }, addDataAttributes$1(data, testId)), {
     children: [
       onSettingsButtonClick !== void 0 && /* @__PURE__ */ jsx("div", _object_spread_props$n(_object_spread$o({
         className: classes.settings,