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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.52.0",
+  "version": "3.53.1",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/FiltersPane/FiltersPane.stories.tsx

@@ -70,7 +70,8 @@ type ConfigValues = {
   custom: string;
 };
 
-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;
@@ -81,7 +82,7 @@ interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps
   isClearableFields: boolean;
 }
 
-function FiltersPaneWithCustomProps<Values, Content>({
+function FiltersPaneWithCustomProps<Values extends Record<string, unknown>, Content>({
   containerWidth,
   isSearchDisabled,
   isSearchAutosizeable,
@@ -292,6 +293,7 @@ Default.args = {
   hasClearButton: true,
   isClearableFields: false,
   isDisabled: false,
+  shouldRenderDataId: false,
   containerWidth: 400,
   withFieldNameInLabel: true,
   isGroupingEnabled: true,

package/src/components/FiltersPane/FiltersPane.tsx

@@ -10,7 +10,7 @@ import { getLocale } from './helpers';
 import { ConfigType, IFilterLocaleKey, IPartialFilterLocale } from './types';
 import { useStyles, IFiltersPaneStyles, clearButtonStyles } from './FiltersPane.styles';
 
-export interface IFiltersPaneProps<Values, Content = Values>
+export interface IFiltersPaneProps<Values extends Record<string, unknown>, Content = Values>
   extends ICommonProps<IFiltersPaneStyles> {
   filtersConfig: ConfigType<Values>;
   enabledFilters?: Array<keyof ConfigType<Values>>;
@@ -23,6 +23,8 @@ export interface IFiltersPaneProps<Values, Content = Values>
   isDisabled?: boolean;
   /** @default true */
   hasClearButton?: boolean;
+  /** @default false */
+  shouldRenderDataId?: boolean;
   onChangeFilters: (values: Partial<Values>) => void;
   onSettingsButtonClick?: () => void;
   onClear?: () => void;
@@ -39,6 +41,7 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
   search,
   isDisabled = false,
   hasClearButton = true,
+  shouldRenderDataId = false,
   testId,
   onChangeFilters,
   onSettingsButtonClick,
@@ -61,7 +64,7 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
 
   const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
 
-  const filtersKeys = enabledFilters || Object.keys(filtersConfig);
+  const filtersKeys = enabledFilters ?? Object.keys(filtersConfig);
 
   const handleClear = () => {
     if (onClear !== undefined) {
@@ -122,10 +125,11 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
       {/* Filters */}
       {filtersKeys.map((key, index) => {
         const isLast = index === filtersKeys.length - 1;
-        const currentValue = values[key];
-        const filter = filtersConfig[key];
+        const filterKey = String(key);
+        const currentValue = values[filterKey];
+        const filter = filtersConfig[filterKey];
         if (filter === undefined) {
-          console.error(`enabledFilters содержит фильтр ${String(key)}, не описанный в конфиге`);
+          console.error(`enabledFilters содержит фильтр ${filterKey}, не описанный в конфиге`);
           if (isLast) {
             return clearButton;
           }
@@ -137,18 +141,19 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
             filter={filter}
             locale={locale}
             localeKey={localeKey}
-            onChange={(value) => onChangeFilters({ ...values, [key]: value })}
+            onChange={(value) => onChangeFilters({ ...values, [filterKey]: value })}
             value={currentValue}
-            key={key as string}
+            key={filterKey}
             isDisabled={isDisabled || filter?.requiredFilledFilters?.some((item) => !values[item])}
             tweakStyles={tweakFilterWrapperStyles}
-            testId={getTestId(testId, `filter-${String(key)}`)}
+            data={shouldRenderDataId ? { id: filterKey } : undefined}
+            testId={getTestId(testId, `filter-${filterKey}`)}
           />
         );
 
         if (isLast) {
           return (
-            <div className={classes.filterWithClearButton} key={key as string}>
+            <div className={classes.filterWithClearButton} key={filterKey}>
               {filterWrapper}
               {shouldShowClearButton && <>{clearButton}</>}
             </div>

package/src/components/FiltersPane/components/Filter/Filter.tsx

@@ -1,20 +1,20 @@
 import { useMemo } from 'react';
 import { getLocale } from '../../helpers';
-import { IFilterMultiSelectValues, IFilterWithDatesValue, IPeriod } from '../../types';
 import { FilterInterval } from '../FilterInterval';
 import { FilterMultiSelect } from '../FilterMultiSelect';
 import { FilterSelect } from '../FilterSelect';
 import { FilterWithDates } from '../FilterWithDates';
 import { FilterWithPeriod } from '../FilterWithPeriod';
 import type { IFilterWrapperProps } from '../FilterWrapper';
+import { isDatePeriodValue, isMultiSelectValue, isPeriodValue } from './helpers';
 
-export interface IFilterProps<Values, Key extends keyof Values>
+export interface IFilterProps<Values extends Record<string, unknown>, Key extends keyof Values>
   extends IFilterWrapperProps<Values, Key> {
   onChange: <V>(v: V) => void;
   onClose?: () => void;
 }
 
-export function Filter<Values, Key extends keyof Values>(
+export function Filter<Values extends Record<string, unknown>, Key extends keyof Values>(
   props: IFilterProps<Values, Key>,
 ): JSX.Element | null {
   const { filter, value, onChange, onClose, localeKey, locale, testId } = props;
@@ -39,9 +39,11 @@ export function Filter<Values, Key extends keyof Values>(
   }
 
   if (filter.type === 'dateRange') {
+    const preparedValue = isPeriodValue(value) ? { ...value } : undefined;
+
     return (
       <FilterWithPeriod
-        value={{ ...value } as IPeriod}
+        value={preparedValue}
         onChange={onChange}
         onClose={onClose}
         localeKey={translatesLocaleKey}
@@ -53,25 +55,27 @@ export function Filter<Values, Key extends keyof Values>(
   }
 
   if (filter.type === 'dateRangeWithoutPeriod') {
+    const preparedValue = isDatePeriodValue(value) ? value : undefined;
+
     return (
-      <div style={{ width: 320 }}>
-        <FilterWithDates
-          value={value as unknown as IFilterWithDatesValue}
-          onChange={(v) => onChange({ ...v, periodType: 'CUSTOM' })}
-          onEndBtnSubmit={() => onChange(undefined)}
-          localeKey={translatesLocaleKey}
-          locale={translates}
-          testId={testId !== undefined ? `${testId}-dates` : undefined}
-          {...filter}
-        />
-      </div>
+      <FilterWithDates
+        value={preparedValue}
+        onChange={(v) => onChange({ ...v, periodType: 'CUSTOM' })}
+        onEndBtnSubmit={() => onChange(undefined)}
+        localeKey={translatesLocaleKey}
+        locale={translates}
+        testId={testId !== undefined ? `${testId}-dates` : undefined}
+        {...filter}
+      />
     );
   }
 
   if (filter.type === 'multiSelect') {
+    const preparedValue = isMultiSelectValue<any>(value) ? value : undefined;
+
     return (
       <FilterMultiSelect
-        value={value as unknown as IFilterMultiSelectValues<any>}
+        value={preparedValue}
         onChange={onChange}
         onClose={onClose}
         localeKey={translatesLocaleKey}
@@ -83,9 +87,11 @@ export function Filter<Values, Key extends keyof Values>(
   }
 
   if (filter.type === 'interval') {
+    const preparedValue = Array.isArray(value) ? (value as number[]) : undefined;
+
     return (
       <FilterInterval
-        value={value as unknown as number[]}
+        value={preparedValue}
         onChange={onChange}
         localeKey={translatesLocaleKey}
         locale={translates}
@@ -102,6 +108,7 @@ export function Filter<Values, Key extends keyof Values>(
 
   if (filter.type === 'custom' && filter.component) {
     const Component = filter.component;
+
     return <Component {...props} filter={filter} />;
   }
 

package/src/components/FiltersPane/components/Filter/helpers.ts

@@ -0,0 +1,18 @@
+import { isEmpty, isString } from '@true-engineering/true-react-platform-helpers';
+import { IDatePeriod, IFilterMultiSelectValues, IPeriod } from '../../types';
+
+const isDateOrEmpty = (value: unknown): value is Date | null | undefined =>
+  isEmpty(value) || value instanceof Date;
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
+export const isDatePeriodValue = (value: any): value is IDatePeriod =>
+  isDateOrEmpty(value?.from) && isDateOrEmpty(value?.to);
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
+export const isPeriodValue = (value: any): value is IPeriod =>
+  isString(value?.periodType) && isDatePeriodValue(value);
+
+export const isMultiSelectValue = <T extends string>(
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
+  value: any,
+): value is IFilterMultiSelectValues<T> => Array.isArray(value?.include);

package/src/components/FiltersPane/components/FilterValueView/FilterValueView.tsx

@@ -9,14 +9,17 @@ import { IDateRangeConfigItem, IFilterWithDatesValue, IPeriod } from '../../type
 import type { IFilterWrapperProps } from '../FilterWrapper';
 import { IFilterValueViewStyles, useStyles } from './FilterValueView.styles';
 
-export function FilterValueView<Values, Key extends keyof Values>({
+export interface IFilterValueView<Values extends Record<string, unknown>, Key extends keyof Values>
+  extends Omit<IFilterWrapperProps<Values, Key>, 'filtersPaneRef' | 'tweakStyles' | 'onChange'>,
+    ICommonProps<IFilterValueViewStyles> {}
+
+export function FilterValueView<Values extends Record<string, unknown>, Key extends keyof Values>({
+  value,
+  filter,
   locale,
   localeKey,
-  filter,
-  value,
   tweakStyles,
-}: Omit<IFilterWrapperProps<Values, Key>, 'onChange' | 'filtersPaneRef' | 'tweakStyles'> &
-  ICommonProps<IFilterValueViewStyles>): JSX.Element {
+}: IFilterValueView<Values, Key>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
 
   const translatesLocaleKey = filter.localeKey ?? localeKey;

package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.styles.ts

@@ -6,6 +6,7 @@ import { innerTextButtonStyles } from '../../FiltersPane.styles';
 
 export const useStyles = createThemedStyles('FilterWithDates', {
   root: {
+    width: 320,
     background: colors.CLASSIC_WHITE,
     position: 'relative',
     zIndex: 20,

package/src/components/FiltersPane/components/FilterWithPeriod/FilterWithPeriod.tsx

@@ -151,7 +151,7 @@ export const FilterWithPeriod: FC<IFilterWithPeriodProps> = ({
         </div>
       )}
       {isDatePickerShown && (
-        <div className={classes.picker} style={{ width: 320 }} ref={refDatePicker}>
+        <div className={classes.picker} ref={refDatePicker}>
           <FilterWithDates
             onStartBtnSubmit={() => {
               setIsDatePickerShown(false);

package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.tsx

@@ -12,8 +12,10 @@ import { FilterValueView } from '../FilterValueView';
 import { isContentNotEmpty } from './helpers';
 import { useStyles, 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;
@@ -22,7 +24,7 @@ export interface IFilterWrapperProps<Values, Key extends keyof Values>
   onChange: <V>(value: V) => void;
 }
 
-export function FilterWrapper<Values, Key extends keyof Values>({
+export function FilterWrapper<Values extends Record<string, unknown>, Key extends keyof Values>({
   filter,
   value,
   isDisabled,
@@ -105,8 +107,8 @@ export function FilterWrapper<Values, Key extends keyof Values>({
                 <FilterValueView
                   value={value}
                   filter={filter}
-                  localeKey={localeKey}
                   locale={locale}
+                  localeKey={localeKey}
                   testId={getTestId(testId, 'value')}
                   tweakStyles={tweakFilterValueViewStyles}
                 />
@@ -137,8 +139,8 @@ export function FilterWrapper<Values, Key extends keyof Values>({
         <Filter
           value={value}
           filter={filter}
-          localeKey={localeKey}
           locale={locale}
+          localeKey={localeKey}
           onClose={onClose}
           onChange={onChange}
           testId={testId}

package/src/components/PhoneInput/PhoneInput.styles.ts

@@ -74,10 +74,6 @@ export const inputStyles: IInputStyles = {
   inputWrapper: {
     paddingLeft: COUNTRY_SELECT_WIDTH,
   },
-
-  label: {
-    marginLeft: COUNTRY_SELECT_WIDTH,
-  },
 };
 
 export type IPhoneInputStyles = ITweakStyles<

package/src/components/SearchInput/SearchInput.styles.ts

@@ -44,6 +44,8 @@ export const inputStyles: IInputStyles = {
   },
 
   label: {
+    '--label-max-width': '100%',
+
     left: 0,
     fontSize: 14,
   },