@true-engineering/true-react-common-ui-kit 4.0.0-alpha5 → 4.0.0-alpha7

package/dist/types.d.ts

@@ -1,5 +1,6 @@
 import { FocusEventHandler, type KeyboardEvent, KeyboardEventHandler, MouseEvent, MouseEventHandler, PointerEventHandler, ReactNode } from 'react';
 import { Modifier, Placement } from 'react-overlays/usePopper';
+import type { IMaybeArray } from './theme';
 export interface ITestIdProps {
     testId?: string;
 }
@@ -10,7 +11,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 {

package/package.json

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

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;
@@ -242,7 +247,7 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
           ref={ref}
           minDate={minDate}
           maxDate={maxDate}
-          locale={locale}
+          locale={preparateDatePickerLocale(locale)}
           dateFormat={dateFormat}
           placeholderText={placeholder}
           calendarStartDay={calendarStartDay}

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,8 +1,11 @@
 import { ReactDatePickerProps } from 'react-datepicker';
-import { IDateInputProps } from '../DateInput';
+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,
   | 'startDate'

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

@@ -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;
@@ -29,7 +32,7 @@ export function FilterValueView<Values, Key extends keyof Values>({
     return <></>;
   }
 
-  if (filter.getSelectedValueView !== undefined) {
+  if (isNotEmpty(filter.getSelectedValueView)) {
     return <span className={classes.text}>{filter.getSelectedValueView(value)}</span>;
   }
 
@@ -94,7 +97,7 @@ export function FilterValueView<Values, Key extends keyof Values>({
     const intervalValueFrom = intervalValue[0];
     const intervalValueTo = intervalValue[1];
 
-    const intervals = [];
+    const intervals: string[] = [];
     if (intervalValueFrom !== undefined) {
       intervals.push(`${translates.from.toLowerCase()} ${String(intervalValueFrom)}`);
     }
@@ -105,19 +108,6 @@ export function FilterValueView<Values, Key extends keyof Values>({
     return <span className={classes.text}>{intervals.join(' ')}</span>;
   }
 
-  if (isMultiple) {
-    return (
-      <>
-        {Array.isArray(value) && value.length > 0 && (
-          <>
-            <span className={classes.text}>{displayValue(value[0])}</span>
-            <span className={classes.count}>{value.length > 1 && ` (+${value.length - 1})`}</span>
-          </>
-        )}
-      </>
-    );
-  }
-
   if (isDate) {
     const { from, to, periodType, label } = value as unknown as IPeriod;
     const hasFrom = from !== undefined && from !== null;
@@ -127,7 +117,7 @@ export function FilterValueView<Values, Key extends keyof Values>({
       return <span className={classes.text}>{displayValue(label)}</span>;
     }
 
-    const range = [];
+    const range: string[] = [];
     if (hasFrom) {
       if (!hasTo) {
         range.push(translates.from.toLowerCase());
@@ -146,12 +136,27 @@ export function FilterValueView<Values, Key extends keyof Values>({
     return <span className={classes.text}>{range.join(' ')}</span>;
   }
 
+  if (isMultiple) {
+    const convertValue = filter.getSelectedValue ?? displayValue;
+
+    return (
+      <>
+        {Array.isArray(value) && value.length > 0 && (
+          <>
+            <span className={classes.text}>{convertValue(value[0])}</span>
+            <span className={classes.count}>{value.length > 1 && ` (+${value.length - 1})`}</span>
+          </>
+        )}
+      </>
+    );
+  }
+
   if (isRange && Array.isArray(value)) {
     const rangeValue = value as unknown as number[];
     const rangeValueFrom = rangeValue[0];
     const rangeValueTo = rangeValue[1];
 
-    const range = [];
+    const range: string[] = [];
     if (rangeValueFrom !== undefined) {
       range.push(`${translates.from.toLowerCase()} ${String(rangeValueFrom)}`);
     }

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/FiltersPane/types.ts

@@ -84,22 +84,40 @@ export type IDateRangeConfigItem<Value> = IConfigItemBasicBase<Value> & {
   dateFormat?: string;
 } & Omit<IFilterWithPeriodProps, 'value' | 'onChange' | 'setIsOpen'>;
 
-export type CustomComponent<Value> = FC<{
+export interface ICustomComponentProps<Value> {
   value?: Value;
   onChange: (v?: Value) => void;
   onClose?: () => void;
   filter: ICustomConfigItem<Value>;
   localeKey?: IFilterLocaleKey;
   locale?: IPartialFilterLocale;
-}>;
+}
+
+export type CustomComponent<Value> = FC<ICustomComponentProps<Value>>;
+
+export type ICustomValue<V> = V extends Array<infer T> ? T : never;
+
+export interface ICustomRangeConfigItem<Value> extends IConfigItemBasicBase<Value> {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  [key: string & {}]: any;
+  type: 'custom';
+  component: CustomComponent<Value>;
+  valueViewType?: 'range';
+}
 
-export interface ICustomConfigItem<Value> extends IConfigItemBasicBase<Value> {
-  [key: string]: any;
+export interface ICustomMultipleConfigItem<Value> extends IConfigItemBasicBase<Value> {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  [key: string & {}]: any;
   type: 'custom';
   component: CustomComponent<Value>;
-  valueViewType?: 'range' | 'multiple';
+  valueViewType?: 'multiple';
+  getSelectedValue?: (v: ICustomValue<Value>) => ReactNode;
 }
 
+export type ICustomConfigItem<Value> =
+  | ICustomRangeConfigItem<Value>
+  | ICustomMultipleConfigItem<Value>;
+
 export type ConfigItem<Value> =
   | ISelectConfigItem<Value>
   | IMultiSelectConfigItem<Value>

package/src/components/Flag/Flag.stories.tsx

@@ -1,12 +1,13 @@
 import { countries } from 'country-flag-icons';
 import { ComponentStory } from '@storybook/react';
 import { Flag } from './Flag';
+import { customFlags } from './customFlags';
 
 export default {
   title: 'Data Display/Flag',
   component: Flag,
   argTypes: {
-    countryCode: { control: 'select', options: countries },
+    countryCode: { control: 'select', options: [...countries, ...Object.keys(customFlags)] },
   },
 };
 

package/src/components/Flag/Flag.styles.ts

@@ -2,6 +2,10 @@ import { colors, ITweakStyles, createThemedStyles } from '../../theme';
 
 export const useStyles = createThemedStyles('Flag', {
   root: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    boxSizing: 'border-box',
     // приходится хардкодить в компоненте, тк либа Flags выдает флаги с 2-3 пиксельным отступом снизу
     // если будет нужно, то можно вынести border на уровень пропсов
     border: [1, 'solid', colors.BORDER_MAIN],

package/src/components/Flag/Flag.tsx

@@ -3,6 +3,7 @@ import { hasFlag } from 'country-flag-icons';
 import Flags from 'country-flag-icons/react/3x2';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
+import { customFlags } from './customFlags';
 import { useStyles, IFlagStyles } from './Flag.styles';
 
 export interface IFlagProps extends Pick<ICommonProps<IFlagStyles>, 'tweakStyles'> {
@@ -12,15 +13,28 @@ export interface IFlagProps extends Pick<ICommonProps<IFlagStyles>, 'tweakStyles
 
 export const Flag: FC<IFlagProps> = ({ countryCode = '', tweakStyles }) => {
   const classes = useStyles({ theme: tweakStyles });
-  const CC = countryCode.toUpperCase();
+  const countryFlagKey = countryCode.toUpperCase();
 
-  const TheFlag = hasFlag(CC)
-    ? Flags[CC as keyof typeof Flags]
-    : () => (
-        <div className={classes.noFlag}>
-          <Icon type="minus" />
-        </div>
-      );
+  const hasFlagInLibrary = hasFlag(countryFlagKey);
 
-  return <TheFlag className={classes.root} />;
+  if (hasFlagInLibrary) {
+    const FlagComponent = Flags[countryFlagKey as keyof typeof Flags];
+    return (
+      <div className={classes.root}>
+        <FlagComponent />
+      </div>
+    );
+  }
+
+  const CustomFlag = customFlags[countryFlagKey as keyof typeof customFlags];
+
+  if (CustomFlag !== undefined) {
+    return <div className={classes.root} dangerouslySetInnerHTML={{ __html: CustomFlag }} />;
+  }
+
+  return (
+    <div className={classes.noFlag}>
+      <Icon type="minus" />
+    </div>
+  );
 };

package/src/components/Flag/customFlags/AB.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#FFF" d="M0 0h512v341.3H0z"/><g fill="#6DA544"><path d="M0 0h512v48.8H0zM0 97.5h512v48.8H0zM0 195h512v48.8H0zM0 292.6h512v48.8H0z"/></g><path fill="#D80027" d="M0 0h256v146.3H0z"/><path fill="#FFF" d="m116.9 114.4-7.5-14.8V69.9L128 59l18.6 10.9v22.3l7.4-7.4 4.2 3-4.2 11.8-14.9 14.8z"/><circle fill="#FFF" cx="82" cy="82.8" r="5.4"/><circle fill="#FFF" cx="90.8" cy="61.7" r="5.4"/><circle fill="#FFF" cx="106.6" cy="46.2" r="5.4"/><circle fill="#FFF" cx="128" cy="40.8" r="5.4"/><circle fill="#FFF" cx="149.4" cy="46.2" r="5.4"/><circle fill="#FFF" cx="165.2" cy="61.7" r="5.4"/><circle fill="#FFF" cx="174" cy="82.8" r="5.4"/></svg>

package/src/components/Flag/customFlags/OS.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 300"><path fill="#FFF" d="M0 0h450v300H0z"/><path fill="red" d="M0 100h450v200H0z"/><path fill="#FFDF00" d="M0 200h450v100H0z"/></svg>

package/src/components/Flag/customFlags/augment.d.ts

@@ -0,0 +1 @@
+declare module '*.svg?raw';

package/src/components/Flag/customFlags/customFlags.ts

@@ -0,0 +1,13 @@
+import AB from './AB.svg?raw';
+import OS from './OS.svg?raw';
+
+export const customFlags = {
+  /**
+   * Абхазия
+   */
+  AB,
+  /**
+   * Южная осетия
+   */
+  OS,
+};

package/src/components/Flag/customFlags/index.ts

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