@true-engineering/true-react-common-ui-kit 4.0.0-alpha2 → 4.0.0-alpha21

package/dist/types.d.ts

@@ -1,5 +1,7 @@
-import { FocusEventHandler, type KeyboardEvent, KeyboardEventHandler, MouseEvent, MouseEventHandler, PointerEventHandler, ReactNode } from 'react';
-import { Modifier, Placement } from 'react-overlays/usePopper';
+import type { FocusEventHandler, KeyboardEvent, KeyboardEventHandler, MouseEvent, MouseEventHandler, PointerEventHandler, ReactNode } from 'react';
+import type { Modifier, Placement } from 'react-overlays/usePopper';
+import type { JssStyle } from 'jss';
+import type { IMaybeArray } from './theme';
 export interface ITestIdProps {
     testId?: string;
 }
@@ -10,7 +12,7 @@ export interface IDataAttributesProps extends ITestIdProps {
     data?: IDataAttributes;
 }
 export interface ITweakStylesProps<TweakStyles> {
-    tweakStyles?: TweakStyles;
+    tweakStyles?: IMaybeArray<TweakStyles>;
 }
 export type ICommonProps<TweakStyles> = IDataAttributesProps & ITweakStylesProps<TweakStyles>;
 export interface IDropdownWithPopperOptions {
@@ -43,3 +45,8 @@ export interface IDomElementInteractions<T> {
     onPointerUp?: PointerEventHandler<T>;
 }
 export type IRenderNode<T> = ReactNode | ((props: T) => ReactNode);
+export type IExtendableProps<T extends string | readonly string[]> = Record<T extends ReadonlyArray<infer P> ? P : T, JssStyle>;
+export type IDefaultExtendableProps = IExtendableProps<'custom'>;
+export type IWithPrefix<T, P extends string> = {
+    [K in keyof T as `${P}${K & string}`]: T[K];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha2",
+  "version": "4.0.0-alpha21",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [
@@ -42,17 +42,17 @@
     "types-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@floating-ui/react": "0.26.12",
+    "@floating-ui/react": "0.27.13",
     "@true-engineering/true-react-platform-helpers": "0.4.4",
     "clsx": "1.2.1",
     "country-flag-icons": "1.5.5",
-    "date-fns": "2.29.3",
+    "date-fns": "4.1.0",
     "filesize": "10.1.1",
     "hex-to-rgba": "2.0.1",
     "jss": "10.10.0",
     "lodash-es": "4.17.21",
     "react": "18.2.0",
-    "react-datepicker": "4.25.0",
+    "react-datepicker": "8.4.0",
     "react-dom": "18.2.0",
     "react-input-mask": "3.0.0-alpha.2",
     "react-jss": "10.10.0",
@@ -73,7 +73,6 @@
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
     "@types/lodash-es": "4.17.11",
     "@types/react": "18.2.79",
-    "@types/react-datepicker": "4.19.4",
     "@types/react-dom": "18.2.25",
     "@types/react-input-mask": "3.0.2",
     "@types/react-transition-group": "4.4.10",

package/src/components/ControlWrapper/ControlWrapper.stories.tsx

@@ -4,7 +4,7 @@ import { iconsList } from '../Icon';
 import { ControlWrapper } from './ControlWrapper';
 
 export default {
-  title: 'ControlWrapper',
+  title: 'Controls/ControlWrapper',
   component: ControlWrapper,
 };
 

package/src/components/ControlWrapper/ControlWrapper.styles.ts

@@ -1,5 +1,6 @@
 import { animations, createThemedStyles, dimensions, ITweakStyles } from '../../theme';
 import { IThemedPreloaderStyles } from '../ThemedPreloader';
+import { IControlWrapperSizes } from './types';
 
 const { CONTROL, Z_INDEX } = dimensions;
 
@@ -20,10 +21,6 @@ export const useStyles = createThemedStyles('ControlWrapper', {
     zIndex: 0,
   },
 
-  invalid: {
-    zIndex: Z_INDEX.CONTROL_INVALID,
-  },
-
   disabled: {},
 
   focused: {
@@ -31,6 +28,10 @@ export const useStyles = createThemedStyles('ControlWrapper', {
     zIndex: Z_INDEX.CONTROL_FOCUS,
   },
 
+  invalid: {
+    zIndex: Z_INDEX.CONTROL_INVALID,
+  },
+
   withValue: {},
 
   loading: {},
@@ -43,7 +44,7 @@ export const useStyles = createThemedStyles('ControlWrapper', {
     position: 'absolute',
     pointerEvents: 'none',
     left: 'var(--control-padding)',
-    top: '50%',
+    top: 'calc(var(--control-height) / 2)',
     transformOrigin: 'top left',
     transform: 'translateY(-50%)',
     transition: animations.defaultTransition,
@@ -181,5 +182,5 @@ export const useStyles = createThemedStyles('ControlWrapper', {
 
 export type IControlWrapperStyles = ITweakStyles<
   typeof useStyles,
-  { tweakPreloader: IThemedPreloaderStyles }
+  { tweakPreloader: IThemedPreloaderStyles } & IControlWrapperSizes
 >;

package/src/components/ControlWrapper/ControlWrapper.tsx

@@ -12,12 +12,14 @@ import { useTweakStyles } from '../../hooks';
 import { IClickHandlerEvent, ICommonProps } from '../../types';
 import { Icon, IIcon, renderIcon } from '../Icon';
 import { ThemedPreloader } from '../ThemedPreloader';
+import { IControlWrapperSize } from './types';
 import { IControlWrapperStyles, useStyles } from './ControlWrapper.styles';
 
 export interface IControlWrapperProps extends ICommonProps<IControlWrapperStyles> {
   children: ReactNode;
   label?: ReactNode;
   icon?: IIcon;
+  size?: IControlWrapperSize;
   groupPlacement?:
     | 'left'
     | 'right'
@@ -57,6 +59,7 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
   isFullWidth,
   isDisabled,
   hasValue,
+  size,
   testId,
   children,
   tweakStyles,
@@ -70,6 +73,8 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
   const hasClearButton = !isDisabled && !isLoading && hasValue && isNotEmpty(onClear);
   const hasControls = hasEndIcon || hasClearButton || isLoading;
 
+  const isActive = isFocused || hasValue;
+
   const tweakPreloaderStyles = useTweakStyles({
     tweakStyles,
     className: 'tweakPreloader',
@@ -80,7 +85,8 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
     <div
       className={clsx(
         classes.controlWrapper,
-        isNotEmpty(groupPlacement) && [classes[`placement-${groupPlacement}`]],
+        isNotEmpty(groupPlacement) && classes[`placement-${groupPlacement}`],
+        isNotEmpty(size) && classes[size],
         {
           [classes.invalid]: isInvalid,
           [classes.focused]: isFocused,
@@ -97,7 +103,7 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
           className={clsx(classes.label, {
             [classes.requiredLabel]: isRequired,
             [classes.disabledLabel]: isDisabled,
-            [classes.activeLabel]: isFocused || hasValue,
+            [classes.activeLabel]: isActive,
           })}
         >
           {label}

package/src/components/ControlWrapper/index.ts

@@ -1,2 +1,3 @@
 export * from './ControlWrapper';
+export * from './types';
 export type { IControlWrapperStyles } from './ControlWrapper.styles';

package/src/components/ControlWrapper/types.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface IControlWrapperSizes {}
+
+export type IControlWrapperSize = keyof IControlWrapperSizes;

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import ru from 'date-fns/locale/ru';
+import { ru } from 'date-fns/locale';
 import { ComponentStory } from '@storybook/react';
 import { DatePicker } from './DatePicker';
 
@@ -52,6 +52,7 @@ const Template: ComponentStory<typeof DatePicker> = (args) => {
           selectedDate={date}
           startDate={startDate}
           endDate={endDate}
+          minDate={new Date()}
           onChangeDate={setDate}
           onChangeRange={(dates) => {
             setStartDate(dates?.[0] ?? null);

package/src/components/DatePicker/DatePicker.styles.ts

@@ -1,4 +1,4 @@
-import { ITweakStyles, createThemedStyles } from '../../theme';
+import { createThemedStyles, ITweakStyles } from '../../theme';
 import { IDateInputStyles } from '../DateInput';
 
 export const useStyles = createThemedStyles('DatePicker', {
@@ -9,6 +9,8 @@ export const useStyles = createThemedStyles('DatePicker', {
 
   day: {},
 
+  dayInner: {},
+
   datepicker: {},
 
   popper: {

package/src/components/DatePicker/DatePicker.tsx

@@ -14,13 +14,18 @@ import { ICommonProps } from '../../types';
 import { DateInput, EMPTY_DATE_INPUT_VALUE, IDateInputProps } from '../DateInput';
 import { DatePickerHeader, PopperContainer } from './components';
 import { DatePickerComponent, DEFAULT_DATE_FORMAT } from './constants';
-import { areDatesEquals, getDateFormatter, getDateValueParser } from './helpers';
-import { IDatePickerBaseProps, IRange } from './types';
+import {
+  areDatesEquals,
+  getDateFormatter,
+  getDateValueParser,
+  preparateDatePickerLocale,
+} from './helpers';
+import { IDatePickerBaseProps, IDatePickerLocale, IRange } from './types';
 import { IDatePickerStyles, useStyles } from './DatePicker.styles';
 
 export interface IDatePickerProps extends IDatePickerBaseProps, ICommonProps<IDatePickerStyles> {
   selectedDate?: Date | null;
-  locale: Locale;
+  locale: IDatePickerLocale;
   months?: string[];
   /** @default 'dd.MM.yyyy' */
   dateFormat?: string;
@@ -58,7 +63,6 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
       isClearable,
       strictParsing,
       fixedHeight,
-      excludeScrollbar,
       focusSelectedMonth,
       disabledKeyboardNavigation,
       shouldRenderPopperInBody = false,
@@ -153,6 +157,7 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
       }
     };
 
+    // TODO: кажется это можно улучшить, т.к проблему пофиксили (https://github.com/Hacker0x01/react-datepicker/pull/5060)
     const handleChangeDateRangeInput = (value: string) => {
       const newStartDateValue = value.slice(0, 10);
       let newStart = parseDateValue(newStartDateValue);
@@ -242,14 +247,13 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
           ref={ref}
           minDate={minDate}
           maxDate={maxDate}
-          locale={locale}
+          locale={preparateDatePickerLocale(locale)}
           dateFormat={dateFormat}
           placeholderText={placeholder}
           calendarStartDay={calendarStartDay}
           inline={isInline}
           disabled={isDisabled}
           fixedHeight={fixedHeight}
-          excludeScrollbar={excludeScrollbar}
           showPreviousMonths={showPreviousMonths}
           focusSelectedMonth={focusSelectedMonth}
           monthsShown={monthsShown}
@@ -262,12 +266,12 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
           popperContainer={shouldRenderPopperInBody ? PopperContainer : undefined}
           popperModifiers={popperModifiers}
           popperPlacement={popperPlacement}
-          selectsRange={isRange}
           strictParsing={strictParsing}
           preventOpenOnFocus={preventOpenOnFocus}
           shouldCloseOnSelect={shouldCloseOnSelect}
           customInputRef={customInputRef}
           customInput={<CustomInput {...dateInputProps} />}
+          renderDayContents={(day) => <div className={classes.dayInner}>{day}</div>}
           renderCustomHeader={
             renderCustomHeader ??
             ((baseProps) => <DatePickerHeader {...baseProps} months={months} />)
@@ -299,6 +303,7 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
                 startDate: start,
                 endDate: end,
                 selected: start,
+                selectsRange: true,
                 onBlur: handleDateRangeInputBlur,
                 onChange: handleChangeRange,
               }

package/src/components/DatePicker/components/PopperContainer/PopperContainer.tsx

@@ -1,6 +1,6 @@
-import { FC, ReactElement, ReactNode } from 'react';
-import { Portal } from 'react-overlays';
+import { FC, PropsWithChildren } from 'react';
+import { FloatingPortal } from '@floating-ui/react';
 
-export const PopperContainer: FC<{ children: ReactNode }> = ({ children }) => (
-  <Portal container={document.body}>{children as ReactElement}</Portal>
+export const PopperContainer: FC<PropsWithChildren> = (props) => (
+  <FloatingPortal root={document.body} {...props} />
 );

package/src/components/DatePicker/helpers.ts

@@ -1,10 +1,12 @@
-import { parse, format, isSameDay } from 'date-fns';
+import { parse, format, isSameDay, type Locale } from 'date-fns';
+import { ru as ruLocale, enUS as enLocale } from 'date-fns/locale';
 import {
   isEmpty,
   isNotEmpty,
   isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { EMPTY_DATE_INPUT_VALUE } from '../DateInput';
+import { IDatePickerLocale } from './types';
 
 export const getDateFormatter =
   (dateFormat: string) =>
@@ -21,3 +23,13 @@ export const getDateValueParser =
 export const areDatesEquals = (date1?: Date | null, date2?: Date | null): boolean =>
   (isEmpty(date1) && isEmpty(date2)) ||
   (isNotEmpty(date1) && isNotEmpty(date2) && isSameDay(date1, date2));
+
+export const preparateDatePickerLocale = (locale: IDatePickerLocale): Locale => {
+  if (locale === 'ru') {
+    return ruLocale;
+  }
+  if (locale === 'en') {
+    return enLocale;
+  }
+  return locale;
+};

package/src/components/DatePicker/types.ts

@@ -1,10 +1,13 @@
-import { ReactDatePickerProps } from 'react-datepicker';
-import { IDateInputProps } from '../DateInput';
+import { DatePickerProps } from 'react-datepicker';
+import { type Locale } from 'date-fns';
+import { type IDateInputProps } from '../DateInput';
 
 export type IRange = [Date | null, Date | null] | null;
 
+export type IDatePickerLocale = 'ru' | 'en' | Locale;
+
 export type IDatePickerBaseProps = Pick<
-  ReactDatePickerProps,
+  DatePickerProps,
   | 'startDate'
   | 'endDate'
   | 'minDate'
@@ -31,7 +34,8 @@ export type IDatePickerBaseProps = Pick<
   | 'strictParsing'
   | 'highlightDates'
   | 'fixedHeight'
-  | 'excludeScrollbar'
+  | 'swapRange'
+  | 'onKeyDown'
 > &
   Omit<
     IDateInputProps,
@@ -45,4 +49,5 @@ export type IDatePickerBaseProps = Pick<
     | 'onChange'
     | 'onClick'
     | 'tweakStyles'
+    | 'onKeyDown'
   >;

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;
   shouldShowSettingsButton: boolean;
@@ -80,7 +81,7 @@ interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps
   isClearableFields: boolean;
 }
 
-function FiltersPaneWithCustomProps<Values, Content>({
+function FiltersPaneWithCustomProps<Values extends Record<string, unknown>, Content>({
   containerWidth,
   isSearchDisabled,
   shouldShowSettingsButton,
@@ -288,6 +289,7 @@ Default.args = {
   hasClearButton: true,
   isClearableFields: false,
   isDisabled: false,
+  shouldRenderDataId: false,
   containerWidth: 400,
   withFieldNameInLabel: true,
   isGroupingEnabled: true,

package/src/components/FiltersPane/FiltersPane.tsx

@@ -4,13 +4,13 @@ import { addDataAttributes } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Button } from '../Button';
-import { Icon } from '../Icon';
+import { IIcon, renderIcon } from '../Icon';
 import { FilterWrapper, IFiltersPaneSearchProps, FiltersPaneSearch } from './components';
 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,10 @@ export interface IFiltersPaneProps<Values, Content = Values>
   isDisabled?: boolean;
   /** @default true */
   hasClearButton?: boolean;
+  /** @default false */
+  shouldRenderDataId?: boolean;
+  /** @default 'filter' */
+  settingsIcon?: IIcon;
   onChangeFilters: (values: Partial<Values>) => void;
   onSettingsButtonClick?: () => void;
   onClear?: () => void;
@@ -39,6 +43,8 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
   search,
   isDisabled = false,
   hasClearButton = true,
+  shouldRenderDataId = false,
+  settingsIcon = 'filter',
   testId,
   onChangeFilters,
   onSettingsButtonClick,
@@ -61,7 +67,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) {
@@ -104,9 +110,7 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
           {...addDataTestId(testId, 'settings-button')}
           onClick={!isDisabled ? onSettingsButtonClick : undefined}
         >
-          <div className={classes.settingsIcon}>
-            <Icon type="filter" />
-          </div>
+          <div className={classes.settingsIcon}>{renderIcon(settingsIcon)}</div>
         </div>
       )}
       {/* Search */}
@@ -122,10 +126,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 +142,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);