@true-engineering/true-react-common-ui-kit 2.3.1 → 2.4.0

package/dist/types.d.ts

@@ -20,7 +20,7 @@ export interface IDropdownWithPopperOptions {
 }
 export declare type IIcon = IIconType | ReactElement;
 export declare type ComponentStyles<StyleSheet, Props = unknown> = Partial<Styles<keyof StyleSheet, Props>>;
-export declare type ComponentName = 'AccountInfo' | 'AddButton' | 'Button' | 'CloseButton' | 'Checkbox' | 'CssBaseline' | 'Colors' | 'DateInput' | 'DatePicker' | 'DatePickerHeader' | 'Description' | 'DotsPreloader' | 'SvgPreloader' | 'FiltersPane' | 'FilterInterval' | 'FilterSelect' | 'FilterWithDates' | 'FilterWithPeriod' | 'FilterWrapper' | 'FiltersPaneSearch' | 'Flag' | 'FlexibleTable' | 'Icon' | 'IncrementInput' | 'Input' | 'List' | 'Modal' | 'MoreMenu' | 'MultiSelect' | 'MultiSelectInput' | 'MultiSelectList' | 'Notification' | 'PhoneInput' | 'PhoneInputCountryList' | 'RadioButton' | 'SearchInput' | 'Select' | 'SelectList' | 'ScrollIntoViewIfNeeded' | 'Switch' | 'TextArea' | 'TextWithInfo' | 'TextWithTooltip' | 'ThemedPreloader' | 'Tooltip' | 'Toaster';
+export declare type ComponentName = 'AccountInfo' | 'AddButton' | 'Button' | 'CloseButton' | 'Checkbox' | 'CssBaseline' | 'Colors' | 'DateInput' | 'DatePicker' | 'DatePickerHeader' | 'Description' | 'DotsPreloader' | 'SvgPreloader' | 'FiltersPane' | 'FilterInterval' | 'FilterSelect' | 'FilterWithDates' | 'FilterWithPeriod' | 'FilterWrapper' | 'FilterValueView' | 'FiltersPaneSearch' | 'Flag' | 'FlexibleTable' | 'Icon' | 'IncrementInput' | 'Input' | 'List' | 'Modal' | 'MoreMenu' | 'MultiSelect' | 'MultiSelectInput' | 'MultiSelectList' | 'Notification' | 'PhoneInput' | 'PhoneInputCountryList' | 'RadioButton' | 'SearchInput' | 'Select' | 'SelectList' | 'ScrollIntoViewIfNeeded' | 'Switch' | 'TextArea' | 'TextWithInfo' | 'TextWithTooltip' | 'ThemedPreloader' | 'Tooltip' | 'Toaster';
 export declare type UiKitAnimations = Record<string, any>;
 export declare type UiKitHelpers = Record<string, Styles | (() => Styles)>;
 export interface UiKitTheme {

package/package.json

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

package/src/components/AccountInfo/AccountInfo.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, useRef, useState } from 'react';
+import { FC, ReactNode, useRef, useState, MouseEvent } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import clsx from 'clsx';
 import { addDataAttributes } from '../../helpers';
@@ -6,6 +6,7 @@ import { useOnClickOutsideWithRef, useTheme, useTweakStyles } from '../../hooks'
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
 import { IListProps, List } from '../List';
+import { ANIMATION_TIMEOUT } from './constants';
 import { AccountInfoStyles, styles } from './AccountInfo.styles';
 
 export interface IAccountInfoProps extends ICommonProps {
@@ -15,8 +16,6 @@ export interface IAccountInfoProps extends ICommonProps {
   options: IListProps['items'];
 }
 
-const ANIMATION_TIMEOUT = 150;
-
 export const AccountInfo: FC<IAccountInfoProps> = ({
   data,
   avatar,
@@ -33,7 +32,7 @@ export const AccountInfo: FC<IAccountInfoProps> = ({
 
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
-  const toggleMenu = (event: React.MouseEvent<HTMLDivElement>) => {
+  const toggleMenu = (event: MouseEvent<HTMLDivElement>) => {
     event.stopPropagation();
     setIsMenuOpen((v) => !v);
   };

package/src/components/AccountInfo/constants.ts

@@ -0,0 +1 @@
+export const ANIMATION_TIMEOUT = 150;

package/src/components/Button/Button.stories.tsx

@@ -1,12 +1,16 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { IIconType } from '../Icon';
+import { IIconType, iconsList } from '../Icon';
 import { complexIcons } from '../Icon/complexIcons';
-import { icons } from '../Icon/icons';
-import { Button, BUTTON_VIEWS, IButtonProps } from './Button';
+import { Button, IButtonProps } from './Button';
+import { BUTTON_VIEWS } from './constants';
 
 const sizeTypes: Array<IButtonProps['size']> = ['s', 'm', 'l', 'xl'];
 
-const iconTypes = [undefined, ...Object.keys(icons), ...Object.keys(complexIcons)] as IIconType[];
+const iconTypes = [
+  undefined,
+  ...Object.keys(iconsList),
+  ...Object.keys(complexIcons),
+] as IIconType[];
 
 const preloaderTypes: Array<IButtonProps['preloaderType']> = ['dots', 'default', 'logo'];
 

package/src/components/Button/Button.tsx

@@ -7,22 +7,9 @@ import { renderIcon } from '../../helpers/snippets';
 import { useTheme } from '../../hooks';
 import { ICommonProps, IIcon } from '../../types';
 import { ThemedPreloader, IThemedPreloaderProps, ThemedPreloaderStyles } from '../ThemedPreloader';
+import { IButtonSize, IButtonView } from './types';
 import { ButtonStyles, styles, dotsPreloaderStyles } from './Button.styles';
 
-export type IButtonSize = 's' | 'm' | 'l' | 'xl';
-
-export const BUTTON_VIEWS = [
-  'primary',
-  'secondary',
-  'outline',
-  'warning',
-  'destructive',
-  'text',
-  'custom', // специальный стиль для кастомизации на своем проекте
-] as const;
-
-export type IButtonView = (typeof BUTTON_VIEWS)[number];
-
 export interface IButtonProps extends ICommonProps {
   tweakStyles?: ButtonStyles;
   children?: ReactNode;

package/src/components/Button/constants.ts

@@ -0,0 +1,9 @@
+export const BUTTON_VIEWS = [
+  'primary',
+  'secondary',
+  'outline',
+  'warning',
+  'destructive',
+  'text',
+  'custom', // специальный стиль для кастомизации на своем проекте
+] as const;

package/src/components/Button/index.ts

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

package/src/components/Button/types.ts

@@ -0,0 +1,5 @@
+import { BUTTON_VIEWS } from './constants';
+
+export type IButtonSize = 's' | 'm' | 'l' | 'xl';
+
+export type IButtonView = (typeof BUTTON_VIEWS)[number];

package/src/components/DateInput/DateInput.tsx

@@ -3,8 +3,8 @@ import clsx from 'clsx';
 import { addDataAttributes } from '../../helpers';
 import { useTheme, useTweakStyles } from '../../hooks';
 import { IInputProps, Input } from '../Input';
-import { DateInputStyles, styles } from './DateInput.styles';
 import { EMPTY_DATE_INPUT_VALUE, EMPTY_DATE_RANGE_INPUT_VALUE } from './constants';
+import { DateInputStyles, styles } from './DateInput.styles';
 
 export interface IDateInputProps
   extends Omit<IInputProps, 'value' | 'beforeMaskedStateChange' | 'onChange'> {

package/src/components/DatePicker/DatePicker.tsx

@@ -1,17 +1,6 @@
-import {
-  useState,
-  useEffect,
-  FC,
-  ReactElement,
-  ReactNode,
-  FocusEvent,
-  SyntheticEvent,
-  forwardRef,
-  useMemo,
-} from 'react';
+import { useState, useEffect, FC, FocusEvent, SyntheticEvent, forwardRef, useMemo } from 'react';
 import ReactDatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
-import { Portal } from 'react-overlays';
 import clsx from 'clsx';
 import { isAfter, isBefore, isValid } from 'date-fns';
 import {
@@ -22,14 +11,11 @@ import {
 import { addDataAttributes } from '../../helpers';
 import { useTheme, useTweakStyles } from '../../hooks';
 import { DateInput, EMPTY_DATE_INPUT_VALUE, IDateInputProps } from '../DateInput';
-import { DatePickerStyles, styles } from './DatePicker.styles';
-import { DatePickerHeader } from './DatePickerHeader';
-import { DEFAULT_DATE_FORMAT } from './constants';
+import { DatePickerHeader, PopperContainer } from './components';
+import { DatePickerComponent, DEFAULT_DATE_FORMAT } from './constants';
 import { areDatesEquals, getDateFormatter, getDateValueParser } from './helpers';
 import { IDatePickerBaseProps, IRange } from './types';
-
-const DatePickerComponent =
-  (ReactDatePicker as unknown as { default: typeof ReactDatePicker }).default ?? ReactDatePicker;
+import { DatePickerStyles, styles } from './DatePicker.styles';
 
 export interface IDatePickerProps extends IDatePickerBaseProps {
   selectedDate?: Date | null;
@@ -51,10 +37,6 @@ export interface IDatePickerProps extends IDatePickerBaseProps {
   onChangeRange?: (date: IRange, event?: SyntheticEvent) => void;
 }
 
-const PopperContainer: FC<{ children: ReactNode }> = ({ children }) => (
-  <Portal container={document.body}>{children as ReactElement}</Portal>
-);
-
 export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
   (
     {

package/src/components/DatePicker/{DatePickerHeader → components/DatePickerHeader}/DatePickerHeader.styles.ts

@@ -1,4 +1,4 @@
-import { ComponentStyles } from '../../../types';
+import { ComponentStyles } from '../../../../types';
 
 const SELECT_PADDING_LEFT = 12;
 const SELECT_PADDING_RIGHT = 24;

package/src/components/DatePicker/{DatePickerHeader → components/DatePickerHeader}/DatePickerHeader.tsx

@@ -1,9 +1,9 @@
 import { FC, useMemo } from 'react';
 import { ReactDatePickerCustomHeaderProps as BaseProps } from 'react-datepicker';
 import { getYear, getMonth } from 'date-fns';
-import { useTheme } from '../../../hooks';
-import { Icon } from '../../Icon';
-import { Select } from '../../Select';
+import { useTheme } from '../../../../hooks';
+import { Icon } from '../../../Icon';
+import { Select } from '../../../Select';
 import { DatePickerHeaderStyles, styles } from './DatePickerHeader.styles';
 
 export interface IDatePickerHeaderProps extends BaseProps {

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

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

package/src/components/DatePicker/components/PopperContainer/index.ts

@@ -0,0 +1 @@
+export * from './PopperContainer';

package/src/components/DatePicker/components/index.ts

@@ -0,0 +1,2 @@
+export * from './DatePickerHeader';
+export * from './PopperContainer';

package/src/components/DatePicker/constants.ts

@@ -1 +1,6 @@
+import ReactDatePicker from 'react-datepicker';
+
 export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
+
+export const DatePickerComponent =
+  (ReactDatePicker as unknown as { default: typeof ReactDatePicker }).default ?? ReactDatePicker;

package/src/components/DatePicker/index.ts

@@ -1,3 +1,4 @@
 export * from './DatePicker';
+export * from './types';
 export type { DatePickerStyles } from './DatePicker.styles';
-export type { DatePickerHeaderStyles } from './DatePickerHeader';
+export type { DatePickerHeaderStyles } from './components';

package/src/components/Description/Description.tsx

@@ -2,6 +2,7 @@ import { FC, useState } from 'react';
 import { addDataAttributes } from '../../helpers';
 import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
+import { LINK_REGEXP } from './constants';
 import { DescriptionStyles, styles } from './Description.styles';
 
 export interface IDescriptionProps extends ICommonProps {
@@ -13,8 +14,6 @@ export interface IDescriptionProps extends ICommonProps {
   isAlwaysOpen?: boolean;
 }
 
-const LINK_REGEXP = /(http(s?):\/\/(.*))(\s?)/;
-
 export const Description: FC<IDescriptionProps> = ({
   text,
   moreTitle,

package/src/components/Description/constants.ts

@@ -0,0 +1 @@
+export const LINK_REGEXP = /(http(s?):\/\/(.*))(\s?)/;

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

@@ -1,8 +1,8 @@
 import { ReactNode, useState } from 'react';
 import { ComponentStory } from '@storybook/react';
 import { IMultiSelectListValues } from '../MultiSelectList';
-import { FilterSelect } from './FilterSelect';
 import { FiltersPane, IFiltersPaneProps } from './FiltersPane';
+import { FilterSelect } from './components';
 import { ConfigType, IDatePeriod, IFiltersPaneSearchPayload, IPeriod } from './types';
 
 const LONG_STRING = 'or veeeeeeeeery looooooooooooooooooooooooooooooooooooooooong';

package/src/components/FiltersPane/FiltersPane.tsx

@@ -4,11 +4,10 @@ import { useTheme, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
-import { FilterWrapper } from './FilterWrapper';
+import { FilterWrapper, IFiltersPaneSearchProps, FiltersPaneSearch } from './components';
+import { getLocale } from './helpers';
+import { ConfigType, IFilterLocaleKey, IPartialFilterLocale } from './types';
 import { FiltersPaneStyles, styles } from './FiltersPane.styles';
-import { IFiltersPaneSearchProps, FiltersPaneSearch } from './FiltersPaneSearch';
-import { getLocale, IFilterLocaleKey, IPartialFilterLocale } from './locales';
-import { ConfigType } from './types';
 
 export interface IFiltersPaneProps<Values, Content = Values> extends ICommonProps {
   tweakStyles?: FiltersPaneStyles;

package/src/components/FiltersPane/{FilterWrapper/FilterWrapper.tsx → components/Filter/Filter.tsx}

@@ -1,167 +1,24 @@
 import { useState, useRef, useMemo, useLayoutEffect, RefObject } from 'react';
-import { CSSTransition } from 'react-transition-group';
 import clsx from 'clsx';
 import { Classes } from 'jss';
-import { useTheme, useOnClickOutsideWithRef } from '../../../hooks';
-import { Icon } from '../../Icon';
+import { useOnClickOutsideWithRef } from '../../../../hooks';
+import { getLocale } from '../../helpers';
+import { IFilterMultiSelectValues, IFilterWithDatesValue, IPeriod } from '../../types';
 import { FilterInterval } from '../FilterInterval';
 import { FilterMultiSelect } from '../FilterMultiSelect';
 import { FilterSelect } from '../FilterSelect';
-import { FilterValueView } from '../FilterValueView';
 import { FilterWithDates } from '../FilterWithDates';
 import { FilterWithPeriod } from '../FilterWithPeriod';
-import { IFilterLocaleKey, getLocale, IPartialFilterLocale } from '../locales';
-import { ConfigItem, IFilterMultiSelectValues, IFilterWithDatesValue, IPeriod } from '../types';
-import { FilterWrapperStyles, styles } from './FilterWrapper.styles';
+import { IFilterWrapperProps } from '../FilterWrapper';
 
-export interface IFilterWrapperProps<Values, Key extends keyof Values> {
-  tweakStyles?: FilterWrapperStyles;
-  filter: ConfigItem<Values[Key]>;
-  value?: Values[Key];
-  onChange: <V>(value: V) => void;
-  isDisabled?: boolean;
-  localeKey?: IFilterLocaleKey;
-  locale?: IPartialFilterLocale;
-  testId?: string;
-  filtersPaneRef: RefObject<HTMLDivElement> | null;
-}
-
-interface IFilterOtherProps<Values, Key extends keyof Values>
+export interface IFilterProps<Values, Key extends keyof Values>
   extends IFilterWrapperProps<Values, Key> {
   parentRef?: RefObject<HTMLElement>;
   isInline?: boolean;
-  onChange: <V>(v: V) => void;
-  onClose?: () => void;
   filtersPaneRef: RefObject<HTMLDivElement> | null;
   classes: Classes<'left' | 'right' | 'dropdown'>;
-}
-
-export function FilterWrapper<Values, Key extends keyof Values>({
-  filter,
-  value,
-  isDisabled,
-  onChange,
-  locale,
-  localeKey,
-  testId,
-  filtersPaneRef,
-  tweakStyles,
-}: IFilterWrapperProps<Values, Key>): JSX.Element {
-  const { classes } = useTheme('FilterWrapper', styles, tweakStyles);
-  const [isOpen, setIsOpen] = useState(false);
-  const refItem = useRef<HTMLDivElement>(null);
-
-  const { type } = filter;
-
-  let hasValue = false;
-
-  if (Array.isArray(value) && value.length > 0) {
-    hasValue = true;
-  } else if (
-    typeof value === 'object' &&
-    Object.values(value as unknown as Record<any, any>).some((v) =>
-      Array.isArray(v) ? v.length > 0 : Boolean(v),
-    )
-  ) {
-    hasValue = true;
-  } else if (!Array.isArray(value) && typeof value !== 'object') {
-    hasValue = Boolean(value);
-  }
-
-  // Для того, чтобы фильтр закрывался, если мы работаем с простыми значениями, типа селекта
-  function handleChange<V>(v: V) {
-    if (type === 'select') {
-      setIsOpen(false);
-    }
-    onChange(v);
-  }
-
-  const handleLabelClick = () => {
-    if (!isBoolean && !isDisabled) {
-      setIsOpen(!isOpen);
-    }
-
-    if (isBoolean) {
-      onChange(!value);
-    }
-  };
-
-  const handleOnClose = () => {
-    setIsOpen(false);
-  };
-
-  const isBoolean = filter.type === 'boolean';
-
-  return !filter.isInline ? (
-    <div
-      className={clsx(classes.root, {
-        [classes.noValue]: !hasValue,
-        [classes.openNoValue]: isOpen && !hasValue,
-        [classes.withValue]: !isOpen && hasValue,
-        [classes.openWithValue]: isOpen && hasValue,
-        [classes.boolean]: isBoolean,
-        [classes.disabled]: isDisabled,
-      })}
-      data-testid={testId}
-    >
-      <div
-        ref={refItem}
-        onClick={handleLabelClick}
-        className={clsx(classes.item, {
-          [classes.booleanItem]: isBoolean,
-        })}
-      >
-        <div className={classes.name}>{filter.name}</div>
-        {!isBoolean && value !== undefined && value !== null && (
-          <div className={classes.value}>
-            <FilterValueView value={value} filter={filter} localeKey={localeKey} locale={locale} />
-          </div>
-        )}
-        {!isBoolean && (
-          <div className={clsx(classes.iconContainer, isOpen && classes.open)}>
-            <Icon type="chevron-down" />
-          </div>
-        )}
-      </div>
-      <CSSTransition
-        in={isOpen}
-        timeout={150}
-        unmountOnExit
-        classNames={{
-          enter: classes['dropdown-enter'],
-          enterActive: classes['dropdown-enter-active'],
-          exit: classes['dropdown-exit'],
-          exitActive: classes['dropdown-exit-active'],
-        }}
-      >
-        <Filter
-          value={value}
-          filter={filter}
-          localeKey={localeKey}
-          locale={locale}
-          onClose={handleOnClose}
-          onChange={handleChange}
-          parentRef={refItem}
-          filtersPaneRef={filtersPaneRef}
-          testId={testId}
-          classes={classes}
-        />
-      </CSSTransition>
-    </div>
-  ) : (
-    <Filter
-      value={value}
-      filter={filter}
-      localeKey={localeKey}
-      locale={locale}
-      onClose={handleOnClose}
-      onChange={onChange}
-      isInline={true}
-      filtersPaneRef={filtersPaneRef}
-      testId={testId}
-      classes={classes}
-    />
-  );
+  onChange: <V>(v: V) => void;
+  onClose?: () => void;
 }
 
 export function Filter<Values, Key extends keyof Values>({
@@ -176,7 +33,7 @@ export function Filter<Values, Key extends keyof Values>({
   filtersPaneRef,
   testId,
   classes,
-}: IFilterOtherProps<Values, Key>): JSX.Element | null {
+}: IFilterProps<Values, Key>): JSX.Element | null {
   const ref = useRef<HTMLDivElement>(null);
   const [dropdownPosition, setDropdownPosition] = useState<'left' | 'right'>('left');
   const translatesLocaleKey = filter.localeKey ?? localeKey;

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

@@ -0,0 +1 @@
+export * from './Filter';

package/src/components/FiltersPane/{FilterInterval → components/FilterInterval}/FilterInterval.styles.ts

@@ -1,5 +1,5 @@
-import { colors } from '../../../theme';
-import { ComponentStyles } from '../../../types';
+import { colors } from '../../../../theme';
+import { ComponentStyles } from '../../../../types';
 
 export const styles = {
   root: {

package/src/components/FiltersPane/{FilterInterval → components/FilterInterval}/FilterInterval.tsx

@@ -1,10 +1,11 @@
 import { FC, useMemo } from 'react';
-import { addDataAttributes } from '../../../helpers';
-import { useTheme, useTweakStyles } from '../../../hooks';
-import { ICommonProps } from '../../../types';
-import { Button } from '../../Button';
-import { NumberInput } from '../../NumberInput';
-import { getLocale, IFilterLocaleKey, IPartialFilterLocale } from '../locales';
+import { addDataAttributes } from '../../../../helpers';
+import { useTheme, useTweakStyles } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
+import { Button } from '../../../Button';
+import { NumberInput } from '../../../NumberInput';
+import { getLocale, sortValues } from '../../helpers';
+import { IFilterLocaleKey, IPartialFilterLocale } from '../../types';
 import { FilterIntervalStyles, styles } from './FilterInterval.styles';
 
 export interface IFilterIntervalProps extends ICommonProps {
@@ -30,9 +31,6 @@ export interface IFilterIntervalProps extends ICommonProps {
   testId?: string;
 }
 
-const sortValues = (arr: Array<number | undefined>) =>
-  arr.includes(undefined) ? arr : (arr as number[]).sort((a, b) => (a < b ? -1 : 1));
-
 export const FilterInterval: FC<IFilterIntervalProps> = ({
   data,
   tweakStyles,

package/src/components/FiltersPane/components/FilterInterval/index.ts

@@ -0,0 +1,2 @@
+export * from './FilterInterval';
+export type { FilterIntervalStyles } from './FilterInterval.styles';

package/src/components/FiltersPane/{FilterMultiSelect → components/FilterMultiSelect}/FilterMultiSelect.tsx

@@ -1,5 +1,5 @@
-import { IMultiSelectListProps, MultiSelectList } from '../../MultiSelectList';
-import { IFilterMultiSelectValues } from '../types';
+import { IMultiSelectListProps, MultiSelectList } from '../../../MultiSelectList';
+import { IFilterMultiSelectValues } from '../../types';
 
 export type IFilterMultiSelectProps<Value, Option = string> = IMultiSelectListProps<Value, Option>;
 

package/src/components/FiltersPane/{FilterSelect → components/FilterSelect}/FilterSelect.styles.ts

@@ -1,5 +1,5 @@
-import { colors, helpers } from '../../../theme';
-import { ComponentStyles } from '../../../types';
+import { colors, helpers } from '../../../../theme';
+import { ComponentStyles } from '../../../../types';
 
 const ITEM_HEIGHT = 40;
 const LIST_GAP = 12;

package/src/components/FiltersPane/{FilterSelect → components/FilterSelect}/FilterSelect.tsx

@@ -2,17 +2,17 @@ import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 're
 import clsx from 'clsx';
 import { debounce } from 'ts-debounce';
 import { isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../helpers';
-import { useIsMounted, useTheme, useTweakStyles } from '../../../hooks';
-import { ICommonProps } from '../../../types';
-import { Button } from '../../Button';
-import { Icon } from '../../Icon';
-import { ScrollIntoViewIfNeeded } from '../../ScrollIntoViewIfNeeded';
-import { SearchInput } from '../../SearchInput';
-import { ThemedPreloader } from '../../ThemedPreloader';
-import { IFilterLocaleKey } from '../locales';
+import { addDataAttributes } from '../../../../helpers';
+import { useIsMounted, useTheme, useTweakStyles } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
+import { Button } from '../../../Button';
+import { Icon } from '../../../Icon';
+import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
+import { SearchInput } from '../../../SearchInput';
+import { ThemedPreloader } from '../../../ThemedPreloader';
+import { defaultConvertFunction, getSelectLocale } from '../../helpers';
+import { IFilterLocaleKey, ISelectLocale } from '../../types';
 import { FilterSelectStyles, styles } from './FilterSelect.styles';
-import { getLocale, ISelectLocale } from './locales';
 
 export interface IFilterSelectProps<Value> extends ICommonProps {
   tweakStyles?: FilterSelectStyles;
@@ -45,8 +45,6 @@ export interface IFilterSelectProps<Value> extends ICommonProps {
   testId?: string;
 }
 
-export const defaultConvertFunction = (val: unknown): string => String(val);
-
 export function FilterSelect<Value>({
   data,
   tweakStyles,
@@ -70,7 +68,7 @@ export function FilterSelect<Value>({
 
   const { classes, componentStyles } = useTheme('FilterSelect', styles, tweakStyles, { width });
 
-  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
+  const translates = useMemo(() => getSelectLocale(localeKey, locale), [localeKey, locale]);
 
   const observer = useRef<IntersectionObserver>();
 

package/src/components/FiltersPane/components/FilterSelect/index.ts

@@ -0,0 +1,2 @@
+export * from './FilterSelect';
+export type { FilterSelectStyles } from './FilterSelect.styles';

package/src/components/FiltersPane/{FilterValueView → components/FilterValueView}/FilterValueView.styles.tsx

@@ -1,4 +1,4 @@
-import { ComponentStyles } from '../../../types';
+import { ComponentStyles } from '../../../../types';
 
 export const styles = {
   text: {

package/src/components/FiltersPane/{FilterValueView → components/FilterValueView}/FilterValueView.tsx

@@ -1,23 +1,20 @@
 import { useMemo } from 'react';
 import { format } from 'date-fns';
-import { useTheme } from '../../../hooks';
-import { IMultiSelectListValues } from '../../MultiSelectList';
+import { useTheme } from '../../../../hooks';
+import { IMultiSelectListValues } from '../../../MultiSelectList';
+import { DEFAULT_DATE_FORMAT } from '../../constants';
+import { defaultConvertFunction, getLocale } from '../../helpers';
+import { IDateRangeConfigItem, IFilterWithDatesValue, IPeriod } from '../../types';
 import { IFilterWrapperProps } from '../FilterWrapper';
-import { getLocale } from '../locales';
-import { IDateRangeConfigItem, IFilterWithDatesValue, IPeriod } from '../types';
 import { styles } from './FilterValueView.styles';
 
-const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
-
-const defaultGetValueView = <T,>(v: T): string => String(v);
-
 export function FilterValueView<Values, Key extends keyof Values>({
   locale,
   localeKey,
   filter,
   value,
 }: Omit<IFilterWrapperProps<Values, Key>, 'onChange' | 'filtersPaneRef'>): JSX.Element {
-  const { classes } = useTheme('FilterWrapper', styles);
+  const { classes } = useTheme('FilterValueView', styles);
 
   if (value === undefined || value === null) {
     return <></>;
@@ -66,13 +63,13 @@ export function FilterValueView<Values, Key extends keyof Values>({
   };
 
   if (filter.type === 'select') {
-    const getView = filter.getValueView ?? defaultGetValueView;
+    const getView = filter.getValueView ?? defaultConvertFunction;
     return <span className={classes.text}>{getView(value)}</span>;
   }
 
   if (filter.type === 'multiSelect') {
     const multiSelectValue = value as unknown as IMultiSelectListValues<any>;
-    const getView = filter.getValueView ?? defaultGetValueView;
+    const getView = filter.getValueView ?? defaultConvertFunction;
     const { include } = multiSelectValue;
 
     return (

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

@@ -0,0 +1,2 @@
+export * from './FilterValueView';
+export type { FilterValueViewStyles } from './FilterValueView.styles';