@true-engineering/true-react-common-ui-kit 4.0.0-alpha27 → 4.0.0-alpha29

package/dist/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.styles.d.ts

@@ -1,7 +1,7 @@
 import { ITweakStyles } from '../../../../theme';
 import { ISearchInputStyles } from '../../../SearchInput';
 import { ISelectStyles } from '../../../Select';
-export declare const useStyles: import("../../../../theme").IUseStyles<"root" | "open" | "active" | "disabled" | "dropdownInput" | "chevronIcon" | "dropdown" | "focused" | "selectWrapper" | "selectBlock" | "selectLabel", unknown>;
+export declare const useStyles: import("../../../../theme").IUseStyles<"root" | "open" | "active" | "disabled" | "dropdownInput" | "chevronIcon" | "dropdown" | "focused" | "hasValue" | "selectWrapper" | "selectBlock" | "selectLabel", unknown>;
 export declare const searchInputStyles: ISearchInputStyles;
 export declare const selectStyles: ISelectStyles;
 export type IFiltersPaneSearchStyles = ITweakStyles<typeof useStyles, {

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/true-react-common-ui-kit.js

@@ -8192,17 +8192,18 @@ var WithPopup = function(param) {
     theme: tweakStyles
   });
   var _useState = _sliced_to_array$m(useState(false), 2), isOpen = _useState[0], setIsOpen = _useState[1];
+  var isActive = isOpen && !isDisabled;
   var arrowRef = useRef(null);
-  var handleToggle = function(isActive, event) {
+  var handleToggle = function(next, event) {
     event === null || event === void 0 ? void 0 : event.stopPropagation();
-    onToggle === null || onToggle === void 0 ? void 0 : onToggle(isActive, event);
-    setIsOpen(isActive);
+    onToggle === null || onToggle === void 0 ? void 0 : onToggle(next, event);
+    setIsOpen(next);
   };
   var handleClose = function(event) {
     handleToggle(false, event);
   };
   var _useFloating = useFloating({
-    open: isOpen && !isDisabled,
+    open: isActive,
     middleware: [
       offset$2(popupOffset),
       canBeFlipped && flip$2({
@@ -8255,7 +8256,7 @@ var WithPopup = function(param) {
   var triggerElement = applyAction(trigger, {
     referenceProps: !isTriggerWrapped ? referenceProps : void 0,
     triggerProps: _object_spread$12({
-      isActive: isOpen,
+      isActive,
       isDisabled
     }, !isTriggerWrapped && _object_spread$12({
       data,
@@ -8266,7 +8267,7 @@ var WithPopup = function(param) {
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
       isTriggerWrapped ? /* @__PURE__ */ jsx("div", _object_spread_props$S(_object_spread$12({
-        className: clsx(classes.trigger, (_obj2 = {}, _define_property$14(_obj2, classes.clickable, eventType === "click"), _define_property$14(_obj2, classes.disabled, isDisabled), _define_property$14(_obj2, classes.active, isOpen), _obj2))
+        className: clsx(classes.trigger, (_obj2 = {}, _define_property$14(_obj2, classes.clickable, eventType === "click"), _define_property$14(_obj2, classes.disabled, isDisabled), _define_property$14(_obj2, classes.active, isActive), _obj2))
       }, referenceProps, addDataAttributes$1(data, testId)), {
         children: triggerElement
       })) : triggerElement,
@@ -19802,7 +19803,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", {
@@ -19824,7 +19825,7 @@ var FilterWithPeriod = function(param) {
           onChange: handleCustomDateChange,
           localeKey,
           locale: translates,
-          testId: testId !== void 0 ? "".concat(testId, "-dates") : void 0
+          testId: getTestId(testId, "dates")
         })
       })
     ]
@@ -19919,7 +19920,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") {
@@ -19930,7 +19931,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") {
@@ -19947,7 +19948,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") {
@@ -19958,7 +19959,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") {
@@ -19969,19 +19970,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", {
@@ -20008,6 +20009,10 @@ var useStyles$o = createThemedStyles("FiltersPaneSearch", {
       cursor: "default"
     }
   },
+  hasValue: {
+    backgroundColor: colors.CLASSIC_WHITE,
+    borderColor: colors.BORDER_MAIN
+  },
   selectWrapper: {
     position: "relative",
     display: "flex",
@@ -20235,17 +20240,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)), {
+    className: clsx(classes.root, (_obj2 = {}, _define_property$r(_obj2, classes.focused, isInputFocused), _define_property$r(_obj2, classes.disabled, isDisabled), _define_property$r(_obj2, classes.hasValue, isArrayLikeNotEmpty(value)), _obj2)),
+    ref: refRoot
+  }, addDataAttributes$1(data, testId)), {
     children: [
       /* @__PURE__ */ jsx(SearchInput, {
         value,
@@ -20258,23 +20257,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", {
+          isArrayNotEmpty(fields) && /* @__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),
@@ -20283,7 +20282,7 @@ function FiltersPaneSearch(param) {
                 })
               })
             ]
-          }),
+          })),
           isOpen && /* @__PURE__ */ jsx("div", {
             className: classes.dropdown,
             children: /* @__PURE__ */ jsx(FilterSelect, {
@@ -20298,7 +20297,7 @@ function FiltersPaneSearch(param) {
               onChange: handleFieldsChange,
               isSearchEnabled: isSelectSearchEnabled,
               hasClearButton: hasClearSelectButton,
-              testId: testId !== void 0 ? "".concat(testId, "-dropdown") : void 0
+              testId: getTestId(testId, "dropdown")
             })
           })
         ]
@@ -20683,7 +20682,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)),
@@ -20692,7 +20691,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,
@@ -20810,7 +20809,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;
     }
@@ -20819,9 +20818,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, {
@@ -20837,7 +20836,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,