@true-engineering/true-react-common-ui-kit 3.52.0 → 3.53.1

package/README.md

@@ -12,6 +12,20 @@
 
 # Release Notes
 
+## 3.53.1
+
+### Changes
+
+- **PhoneInput**: Исправлено обрезание лейбла многоточием
+- **SearchInput**: Исправлено обрезание лейбла многоточием
+
+## 3.53.0
+
+### Changes
+
+- **FiltersPane**: Добавлен проп `shouldRenderDataId`, который добавляет атрибут `data-id` со значением из конфига.
+- **FiltersPane**: Изменена типизация дженериков, добавлены тайпгарды
+
 ## 3.52.0
 
 ### Changes
@@ -41,7 +55,8 @@
 
   - **DateInput**
   - **NumberInput**
-  - **PhoneInput**
+  - **PhoneInput** – если вы переопределяли через твик-стайлы правило `margin-left` для класса `label`,
+    это переопределение нужно удалить, т.к. `margin-left` теперь в стандартном случае не должно быть
   - **PhoneInputCountryList**
   - **SearchInput** – если вы переопределяли через твик-стайлы правило `left` для класса `label`,
     это переопределение нужно удалить, т.к. `left` теперь в стандартном случае должно быть равно `0`

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

@@ -3,7 +3,7 @@ import { ICommonProps } from '../../types';
 import { IFiltersPaneSearchProps } from './components';
 import { ConfigType, IFilterLocaleKey, IPartialFilterLocale } from './types';
 import { IFiltersPaneStyles } from './FiltersPane.styles';
-export interface IFiltersPaneProps<Values, Content = Values> extends ICommonProps<IFiltersPaneStyles> {
+export interface IFiltersPaneProps<Values extends Record<string, unknown>, Content = Values> extends ICommonProps<IFiltersPaneStyles> {
     filtersConfig: ConfigType<Values>;
     enabledFilters?: Array<keyof ConfigType<Values>>;
     /** @default {} */
@@ -15,8 +15,10 @@ export interface IFiltersPaneProps<Values, Content = Values> extends ICommonProp
     isDisabled?: boolean;
     /** @default true */
     hasClearButton?: boolean;
+    /** @default false */
+    shouldRenderDataId?: boolean;
     onChangeFilters: (values: Partial<Values>) => void;
     onSettingsButtonClick?: () => void;
     onClear?: () => void;
 }
-export declare function FiltersPane<Values extends Record<string, unknown>, Content = Values>({ data, tweakStyles, filtersConfig, enabledFilters, values, localeKey, locale, search, isDisabled, hasClearButton, testId, onChangeFilters, onSettingsButtonClick, onClear, }: IFiltersPaneProps<Values, Content>): JSX.Element;
+export declare function FiltersPane<Values extends Record<string, unknown>, Content = Values>({ data, tweakStyles, filtersConfig, enabledFilters, values, localeKey, locale, search, isDisabled, hasClearButton, shouldRenderDataId, testId, onChangeFilters, onSettingsButtonClick, onClear, }: IFiltersPaneProps<Values, Content>): JSX.Element;

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

@@ -1,5 +1,5 @@
 import { IFiltersPaneProps } from './FiltersPane';
-interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps<Values, Content> {
+interface IFiltersPaneWithCustomProps<Values extends Record<string, unknown>, Content> extends IFiltersPaneProps<Values, Content> {
     containerWidth: number;
     isSearchDisabled: boolean;
     isSearchAutosizeable: boolean;
@@ -9,7 +9,7 @@ interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps
     checkboxPosition: 'left' | 'right';
     isClearableFields: boolean;
 }
-declare function FiltersPaneWithCustomProps<Values, Content>({ containerWidth, isSearchDisabled, isSearchAutosizeable, shouldShowSettingsButton, withFieldNameInLabel, isGroupingEnabled, checkboxPosition, isClearableFields, ...args }: IFiltersPaneWithCustomProps<Values, Content>): import("react/jsx-runtime").JSX.Element;
+declare function FiltersPaneWithCustomProps<Values extends Record<string, unknown>, Content>({ containerWidth, isSearchDisabled, isSearchAutosizeable, shouldShowSettingsButton, withFieldNameInLabel, isGroupingEnabled, checkboxPosition, isClearableFields, ...args }: IFiltersPaneWithCustomProps<Values, Content>): import("react/jsx-runtime").JSX.Element;
 declare const _default: {
     title: string;
     component: typeof FiltersPaneWithCustomProps;
@@ -29,4 +29,4 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, IFiltersPaneWithCustomProps<unknown, unknown>>;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, IFiltersPaneWithCustomProps<Record<string, unknown>, unknown>>;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { IFilterWrapperProps } from '../FilterWrapper';
-export interface IFilterProps<Values, Key extends keyof Values> extends IFilterWrapperProps<Values, Key> {
+export interface IFilterProps<Values extends Record<string, unknown>, Key extends keyof Values> extends IFilterWrapperProps<Values, Key> {
     onChange: <V>(v: V) => void;
     onClose?: () => void;
 }
-export declare function Filter<Values, Key extends keyof Values>(props: IFilterProps<Values, Key>): JSX.Element | null;
+export declare function Filter<Values extends Record<string, unknown>, Key extends keyof Values>(props: IFilterProps<Values, Key>): JSX.Element | null;

package/dist/components/FiltersPane/components/Filter/helpers.d.ts

@@ -0,0 +1,4 @@
+import { IDatePeriod, IFilterMultiSelectValues, IPeriod } from '../../types';
+export declare const isDatePeriodValue: (value: any) => value is IDatePeriod;
+export declare const isPeriodValue: (value: any) => value is IPeriod;
+export declare const isMultiSelectValue: <T extends string>(value: any) => value is IFilterMultiSelectValues<T>;

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

@@ -2,4 +2,6 @@
 import { ICommonProps } from '../../../../types';
 import type { IFilterWrapperProps } from '../FilterWrapper';
 import { IFilterValueViewStyles } from './FilterValueView.styles';
-export declare function FilterValueView<Values, Key extends keyof Values>({ locale, localeKey, filter, value, tweakStyles, }: Omit<IFilterWrapperProps<Values, Key>, 'onChange' | 'filtersPaneRef' | 'tweakStyles'> & ICommonProps<IFilterValueViewStyles>): JSX.Element;
+export interface IFilterValueView<Values extends Record<string, unknown>, Key extends keyof Values> extends Omit<IFilterWrapperProps<Values, Key>, 'filtersPaneRef' | 'tweakStyles' | 'onChange'>, ICommonProps<IFilterValueViewStyles> {
+}
+export declare function FilterValueView<Values extends Record<string, unknown>, Key extends keyof Values>({ value, filter, locale, localeKey, tweakStyles, }: IFilterValueView<Values, Key>): JSX.Element;

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

@@ -2,7 +2,7 @@
 import { ICommonProps } from '../../../../types';
 import { ConfigItem, IFilterLocaleKey, IPartialFilterLocale } from '../../types';
 import { IFilterWrapperStyles } from './FilterWrapper.styles';
-export interface IFilterWrapperProps<Values, Key extends keyof Values> extends ICommonProps<IFilterWrapperStyles> {
+export interface IFilterWrapperProps<Values extends Record<string, unknown>, Key extends keyof Values> extends ICommonProps<IFilterWrapperStyles> {
     filter: ConfigItem<Values[Key]>;
     value?: Values[Key];
     isDisabled?: boolean;
@@ -10,4 +10,4 @@ export interface IFilterWrapperProps<Values, Key extends keyof Values> extends I
     locale?: IPartialFilterLocale;
     onChange: <V>(value: V) => void;
 }
-export declare function FilterWrapper<Values, Key extends keyof Values>({ filter, value, isDisabled, locale, localeKey, data, testId, tweakStyles, onChange, }: IFilterWrapperProps<Values, Key>): JSX.Element;
+export declare function FilterWrapper<Values extends Record<string, unknown>, Key extends keyof Values>({ filter, value, isDisabled, locale, localeKey, data, testId, tweakStyles, onChange, }: IFilterWrapperProps<Values, Key>): JSX.Element;

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

@@ -10593,6 +10593,7 @@ var inputStyles$4 = {
     paddingLeft: 0
   },
   label: {
+    "--label-max-width": "100%",
     left: 0,
     fontSize: 14
   }
@@ -18006,6 +18007,7 @@ function FilterSelect(param) {
 }
 var useStyles$q = createThemedStyles("FilterWithDates", {
   root: {
+    width: 320,
     background: colors.CLASSIC_WHITE,
     position: "relative",
     zIndex: 20
@@ -18600,9 +18602,6 @@ var FilterWithPeriod = function(param) {
       }),
       isDatePickerShown && /* @__PURE__ */ jsx("div", {
         className: classes.picker,
-        style: {
-          width: 320
-        },
         ref: refDatePicker,
         children: /* @__PURE__ */ jsx(FilterWithDates, {
           onStartBtnSubmit: function() {
@@ -18626,6 +18625,25 @@ var FilterWithPeriod = function(param) {
     ]
   });
 };
+function _instanceof$2(left2, right2) {
+  if (right2 != null && typeof Symbol !== "undefined" && right2[Symbol.hasInstance]) {
+    return !!right2[Symbol.hasInstance](left2);
+  } else {
+    return left2 instanceof right2;
+  }
+}
+var isDateOrEmpty = function(value) {
+  return isEmpty(value) || _instanceof$2(value, Date);
+};
+var isDatePeriodValue = function(value) {
+  return isDateOrEmpty(value === null || value === void 0 ? void 0 : value.from) && isDateOrEmpty(value === null || value === void 0 ? void 0 : value.to);
+};
+var isPeriodValue = function(value) {
+  return isString(value === null || value === void 0 ? void 0 : value.periodType) && isDatePeriodValue(value);
+};
+var isMultiSelectValue = function(value) {
+  return Array.isArray(value === null || value === void 0 ? void 0 : value.include);
+};
 function _define_property$s(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -18700,8 +18718,9 @@ function Filter(props) {
     }, filter));
   }
   if (filter.type === "dateRange") {
+    var preparedValue = isPeriodValue(value) ? _object_spread$r({}, value) : void 0;
     return /* @__PURE__ */ jsx(FilterWithPeriod, _object_spread$r({
-      value: _object_spread$r({}, value),
+      value: preparedValue,
       onChange,
       onClose,
       localeKey: translatesLocaleKey,
@@ -18710,29 +18729,26 @@ function Filter(props) {
     }, filter));
   }
   if (filter.type === "dateRangeWithoutPeriod") {
-    return /* @__PURE__ */ jsx("div", {
-      style: {
-        width: 320
+    var preparedValue1 = isDatePeriodValue(value) ? value : void 0;
+    return /* @__PURE__ */ jsx(FilterWithDates, _object_spread$r({
+      value: preparedValue1,
+      onChange: function(v) {
+        return onChange(_object_spread_props$q(_object_spread$r({}, v), {
+          periodType: "CUSTOM"
+        }));
       },
-      children: /* @__PURE__ */ jsx(FilterWithDates, _object_spread$r({
-        value,
-        onChange: function(v) {
-          return onChange(_object_spread_props$q(_object_spread$r({}, v), {
-            periodType: "CUSTOM"
-          }));
-        },
-        onEndBtnSubmit: function() {
-          return onChange(void 0);
-        },
-        localeKey: translatesLocaleKey,
-        locale: translates,
-        testId: testId !== void 0 ? "".concat(testId, "-dates") : void 0
-      }, filter))
-    });
+      onEndBtnSubmit: function() {
+        return onChange(void 0);
+      },
+      localeKey: translatesLocaleKey,
+      locale: translates,
+      testId: testId !== void 0 ? "".concat(testId, "-dates") : void 0
+    }, filter));
   }
   if (filter.type === "multiSelect") {
+    var preparedValue2 = isMultiSelectValue(value) ? value : void 0;
     return /* @__PURE__ */ jsx(FilterMultiSelect, _object_spread$r({
-      value,
+      value: preparedValue2,
       onChange,
       onClose,
       localeKey: translatesLocaleKey,
@@ -18741,8 +18757,9 @@ function Filter(props) {
     }, filter));
   }
   if (filter.type === "interval") {
+    var preparedValue3 = Array.isArray(value) ? value : void 0;
     return /* @__PURE__ */ jsx(FilterInterval, _object_spread$r({
-      value,
+      value: preparedValue3,
       onChange,
       localeKey: translatesLocaleKey,
       locale: translates,
@@ -19102,7 +19119,7 @@ function _instanceof$1(left2, right2) {
   }
 }
 function FilterValueView(param) {
-  var locale2 = param.locale, localeKey = param.localeKey, filter = param.filter, value = param.value, tweakStyles = param.tweakStyles;
+  var value = param.value, filter = param.filter, locale2 = param.locale, localeKey = param.localeKey, tweakStyles = param.tweakStyles;
   var classes = useStyles$n({
     theme: tweakStyles
   });
@@ -19475,8 +19492,8 @@ function FilterWrapper(param) {
               children: /* @__PURE__ */ jsx(FilterValueView, {
                 value,
                 filter,
-                localeKey,
                 locale: locale2,
+                localeKey,
                 testId: getTestId(testId, "value"),
                 tweakStyles: tweakFilterValueViewStyles
               })
@@ -19503,8 +19520,8 @@ function FilterWrapper(param) {
       return /* @__PURE__ */ jsx(Filter, {
         value,
         filter,
-        localeKey,
         locale: locale2,
+        localeKey,
         onClose,
         onChange,
         testId
@@ -19565,7 +19582,7 @@ function _object_spread_props$n(target, source) {
   return target;
 }
 function FiltersPane(param) {
-  var data = param.data, tweakStyles = param.tweakStyles, filtersConfig = param.filtersConfig, enabledFilters = param.enabledFilters, _param_values = param.values, values = _param_values === void 0 ? {} : _param_values, localeKey = param.localeKey, locale2 = param.locale, search = param.search, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_hasClearButton = param.hasClearButton, hasClearButton = _param_hasClearButton === void 0 ? true : _param_hasClearButton, testId = param.testId, onChangeFilters = param.onChangeFilters, onSettingsButtonClick = param.onSettingsButtonClick, onClear = param.onClear;
+  var data = param.data, tweakStyles = param.tweakStyles, filtersConfig = param.filtersConfig, enabledFilters = param.enabledFilters, _param_values = param.values, values = _param_values === void 0 ? {} : _param_values, localeKey = param.localeKey, locale2 = param.locale, search = param.search, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_hasClearButton = param.hasClearButton, hasClearButton = _param_hasClearButton === void 0 ? true : _param_hasClearButton, _param_shouldRenderDataId = param.shouldRenderDataId, shouldRenderDataId = _param_shouldRenderDataId === void 0 ? false : _param_shouldRenderDataId, testId = param.testId, onChangeFilters = param.onChangeFilters, onSettingsButtonClick = param.onSettingsButtonClick, onClear = param.onClear;
   var classes = useStyles$u({
     theme: tweakStyles
   });
@@ -19586,7 +19603,7 @@ function FiltersPane(param) {
     localeKey,
     locale2
   ]);
-  var filtersKeys = enabledFilters || Object.keys(filtersConfig);
+  var filtersKeys = enabledFilters !== null && enabledFilters !== void 0 ? enabledFilters : Object.keys(filtersConfig);
   var handleClear = function() {
     if (onClear !== void 0) {
       onClear();
@@ -19638,10 +19655,11 @@ function FiltersPane(param) {
       filtersKeys.map(function(key, index) {
         var _filter_requiredFilledFilters;
         var isLast = index === filtersKeys.length - 1;
-        var currentValue = values[key];
-        var filter = filtersConfig[key];
+        var filterKey = String(key);
+        var currentValue = values[filterKey];
+        var filter = filtersConfig[filterKey];
         if (filter === void 0) {
-          console.error("enabledFilters содержит фильтр ".concat(String(key), ", не описанный в конфиге"));
+          console.error("enabledFilters содержит фильтр ".concat(filterKey, ", не описанный в конфиге"));
           if (isLast) {
             return clearButton;
           }
@@ -19652,15 +19670,18 @@ function FiltersPane(param) {
           locale: locale2,
           localeKey,
           onChange: function(value) {
-            return onChangeFilters(_object_spread_props$n(_object_spread$o({}, values), _define_property$p({}, key, value)));
+            return onChangeFilters(_object_spread_props$n(_object_spread$o({}, values), _define_property$p({}, filterKey, value)));
           },
           value: currentValue,
           isDisabled: isDisabled || (filter === null || filter === void 0 ? void 0 : (_filter_requiredFilledFilters = filter.requiredFilledFilters) === null || _filter_requiredFilledFilters === void 0 ? void 0 : _filter_requiredFilledFilters.some(function(item) {
             return !values[item];
           })),
           tweakStyles: tweakFilterWrapperStyles,
-          testId: getTestId(testId, "filter-".concat(String(key)))
-        }, key);
+          data: shouldRenderDataId ? {
+            id: filterKey
+          } : void 0,
+          testId: getTestId(testId, "filter-".concat(filterKey))
+        }, filterKey);
         if (isLast) {
           return /* @__PURE__ */ jsxs("div", {
             className: classes.filterWithClearButton,
@@ -19670,7 +19691,7 @@ function FiltersPane(param) {
                 children: clearButton
               })
             ]
-          }, key);
+          }, filterKey);
         }
         return filterWrapper;
       })
@@ -28626,9 +28647,6 @@ var useStyles$9 = createThemedStyles("PhoneInput", {
 var inputStyles = {
   inputWrapper: {
     paddingLeft: COUNTRY_SELECT_WIDTH
-  },
-  label: {
-    marginLeft: COUNTRY_SELECT_WIDTH
   }
 };
 function _array_like_to_array$2(arr, len) {