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

package/README.md

@@ -11,6 +11,59 @@
 
 # Release Notes
 
+## 3.49.0
+
+### Changes
+
+- **FiltersPane**: Добавлен `getSelectedValue` для удобного рендера значения в `custom`-фильтре с `valueViewType: 'multiple'`
+- **FiltersPane**: Добавлен экспорт `ICustomComponentProps` для `CustomComponent` в `ICustomConfigItem`
+- **FiltersPane**: Кастомный фильтр разделён на два типа `ICustomRangeConfigItem` и `ICustomMultipleConfigItem`
+
+## 3.48.0
+
+### Changes
+
+- **FlexibleTable**: Добавлен rowRef
+
+## 3.47.0
+
+### Changes
+
+- **Select**: Добавлен ref в пропсу `searchInput` Select-а
+- **Select**: Добавлен shouldFocusOnMount в пропсу `searchInput` Select-а
+
+## 3.46.0
+
+### Changes
+
+- **SearchInput**: Добавлен forwardRef
+
+## 3.45.6
+
+- **phone.ts** Изменён алгоритм определения кода страны по номеру телефона
+- **phone-info.ts** Добавлены dialCode для Южной Осетии
+- **phone-info.ts** Актуализированы dialCode для Казахстана
+
+## 3.45.5
+
+### Changes
+
+- **Tooltip**: Добавлен вариант `custom` для `view`
+
+## 3.45.4
+
+### Changes
+
+- **Select**: Убирает лишние вызовы `onBlur` при использовании Popper, если поле не открыто
+
+## 3.45.3
+
+### Changes
+
+- **Flag**: Добавлены флаги для Абхазии и Южной Осетии
+- **PhoneInput**: Добавлены PhoneInfo для Абхазии и Южной осетии.
+- **PhoneInput**: Исправлен баг с невозможностью выбора стран с одинаковыми dialCode
+
 ## 3.45.2
 
 ### Changes

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

@@ -54,20 +54,30 @@ export type IDateRangeConfigItem<Value> = IConfigItemBasicBase<Value> & {
     type: 'dateRange';
     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 interface ICustomConfigItem<Value> extends IConfigItemBasicBase<Value> {
-    [key: string]: any;
+}
+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> {
+    [key: string & {}]: any;
+    type: 'custom';
+    component: CustomComponent<Value>;
+    valueViewType?: 'range';
+}
+export interface ICustomMultipleConfigItem<Value> extends IConfigItemBasicBase<Value> {
+    [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> | ICustomConfigItem<Value> | IDateRangeWithoutPeriodConfigItem<Value> | IDateRangeConfigItem<Value> | IIntervalConfigItem<Value> | IBooleanConfigItem<Value>;
 export type ConfigType<Values> = {
     [K in keyof Values]: ConfigItem<Values[K]>;

package/dist/components/Flag/customFlags/customFlags.d.ts

@@ -0,0 +1,10 @@
+export declare const customFlags: {
+    /**
+     * Абхазия
+     */
+    AB: string;
+    /**
+     * Южная осетия
+     */
+    OS: string;
+};

package/dist/components/Flag/customFlags/index.d.ts

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

package/dist/components/FlexibleTable/FlexibleTable.d.ts

@@ -3,7 +3,7 @@ import { ICommonProps } from '../../types';
 import { IFlexibleTableRowProps } from './components';
 import { ITableRow, IFlexibleTableConfigType, IInfinityScrollConfig, IFlexibleTableRenderMode, IHeaderContent } from './types';
 import { IFlexibleTableStyles } from './FlexibleTable.styles';
-export interface IFlexibleTableProps<Row extends ITableRow, HeaderContent extends IHeaderContent<Row>, UniqueField extends keyof Row> extends ICommonProps<IFlexibleTableStyles>, Pick<IFlexibleTableRowProps<Row, HeaderContent, UniqueField>, 'uniqueField' | 'rowAttributes' | 'isFirstColumnSticky' | 'isExpandableRowComponentInitiallyOpen' | 'expandableRowComponent' | 'onRowClick' | 'onRowHover'> {
+export interface IFlexibleTableProps<Row extends ITableRow, HeaderContent extends IHeaderContent<Row>, UniqueField extends keyof Row> extends ICommonProps<IFlexibleTableStyles>, Pick<IFlexibleTableRowProps<Row, HeaderContent, UniqueField>, 'uniqueField' | 'rowAttributes' | 'isFirstColumnSticky' | 'isExpandableRowComponentInitiallyOpen' | 'expandableRowComponent' | 'onRowClick' | 'onRowHover' | 'rowRef'> {
     content: Row[];
     /** @default 'table' */
     renderMode?: IFlexibleTableRenderMode;

package/dist/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.d.ts

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
-import { ICommonProps } from '../../../../types';
+import { ReactNode, RefCallback } from 'react';
+import { ITweakStylesProps } from '../../../../types';
 import { ITableRow, IFlexibleTableConfigType, IFlexibleTableRenderMode, IHeaderContent } from '../../types';
 import { IFlexibleTableRowStyles } from './FlexibleTableRow.styles';
-export interface IFlexibleTableRowProps<Row extends ITableRow, HeaderContent extends IHeaderContent<Row>, UniqueField extends keyof Row> extends Pick<ICommonProps<IFlexibleTableRowStyles>, 'tweakStyles'> {
+export interface IFlexibleTableRowProps<Row extends ITableRow, HeaderContent extends IHeaderContent<Row>, UniqueField extends keyof Row> extends ITweakStylesProps<IFlexibleTableRowStyles> {
     item: Row;
     index: number;
     uniqueField?: UniqueField;
@@ -21,11 +21,12 @@ export interface IFlexibleTableRowProps<Row extends ITableRow, HeaderContent ext
     rowAttributes?: Array<keyof Row>;
     /** @default false */
     isExpandableRowComponentInitiallyOpen?: boolean | ((row: Row, index: number) => boolean);
+    rowRef?: RefCallback<HTMLTableRowElement>;
     /** Возвращает React-элемент, который отрисуется под строкой при нажатии на неё  */
     expandableRowComponent?: (item: Row, isOpen: boolean, close: () => void) => ReactNode;
     onRowHover?: (id?: Row[UniqueField]) => void;
     onRowClick?: (id: Row[UniqueField]) => void;
 }
-declare function FlexibleTableRowInner<Row extends ITableRow, HeaderContent extends IHeaderContent<Row>, UniqueField extends keyof Row>({ item, index, config, columns, uniqueField, renderMode, isActive, isFocusable, isFirstColumnSticky, isLoading, rowAttributes, isExpandableRowComponentInitiallyOpen, tweakStyles, expandableRowComponent, onRowHover, onRowClick, }: IFlexibleTableRowProps<Row, HeaderContent, UniqueField>): JSX.Element;
+declare function FlexibleTableRowInner<Row extends ITableRow, HeaderContent extends IHeaderContent<Row>, UniqueField extends keyof Row>({ item, index, config, columns, uniqueField, renderMode, isActive, isFocusable, isFirstColumnSticky, isLoading, rowAttributes, isExpandableRowComponentInitiallyOpen, rowRef, tweakStyles, expandableRowComponent, onRowHover, onRowClick, }: IFlexibleTableRowProps<Row, HeaderContent, UniqueField>): JSX.Element;
 export declare const FlexibleTableRow: typeof FlexibleTableRowInner;
 export {};

package/dist/components/FlexibleTable/constants.d.ts

@@ -1,3 +1,19 @@
-import { IFlexibleTableRenderMode, IFlexibleTableRender } from './types';
 export declare const DEFAULT_DATE_FORMAT = "dd.MM.yyyy";
-export declare const TableRenders: Record<IFlexibleTableRenderMode, IFlexibleTableRender>;
+export declare const TableRenders: {
+    table: {
+        Root: "table";
+        Head: "thead";
+        Body: "tbody";
+        Row: "tr";
+        Header: "th";
+        Cell: "td";
+    };
+    divs: {
+        Root: "div";
+        Head: "div";
+        Body: "div";
+        Row: "div";
+        Header: "div";
+        Cell: "div";
+    };
+};

package/dist/components/FlexibleTable/types.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties, MouseEvent, ReactNode } from 'react';
 import { IRenderNode } from '../../types';
 export type IFlexibleTableRenderMode = 'table' | 'divs';
-export type IFlexibleTableRender = Record<'Root' | 'Head' | 'Body' | 'Row' | 'Header' | 'Cell', keyof JSX.IntrinsicElements>;
+export type IFlexibleTableRenderElement = 'Root' | 'Head' | 'Body' | 'Row' | 'Header' | 'Cell';
 export type ITableRow = Record<string, any>;
 export type IHeaderContent<T extends ITableRow> = Partial<Record<keyof T, unknown>>;
 export interface ITitleComponentProps<Value> {

package/dist/components/SearchInput/SearchInput.d.ts

@@ -1,6 +1,6 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import { ICommonProps } from '../../types';
 import { IInputProps } from '../Input';
 import { ISearchInputStyles } from './SearchInput.styles';
 export type ISearchInputProps = Omit<IInputProps, 'type' | 'label' | 'isInvalid' | 'errorMessage' | 'isActive' | 'tweakStyles'> & ICommonProps<ISearchInputStyles>;
-export declare const SearchInput: FC<ISearchInputProps>;
+export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<IInputProps, "tweakStyles" | "label" | "isInvalid" | "type" | "isActive" | "errorMessage"> & import("../../types").IDataAttributesProps & import("../../types").ITweakStylesProps<ISearchInputStyles> & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 declare const _default: {
     title: string;
-    component: import("react").FC<import("./SearchInput").ISearchInputProps>;
+    component: import("react").ForwardRefExoticComponent<Omit<import("..").IInputProps, "tweakStyles" | "label" | "isInvalid" | "type" | "isActive" | "errorMessage"> & import("../..").IDataAttributesProps & import("../..").ITweakStylesProps<import("./SearchInput.styles").ISearchInputStyles> & import("react").RefAttributes<HTMLInputElement>>;
 };
 export default _default;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, Omit<import("..").IInputProps, "tweakStyles" | "label" | "isInvalid" | "type" | "isActive" | "errorMessage"> & import("../..").IDataAttributesProps & import("../..").ITweakStylesProps<import("./SearchInput.styles").ISearchInputStyles>>;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, Omit<import("..").IInputProps, "tweakStyles" | "label" | "isInvalid" | "type" | "isActive" | "errorMessage"> & import("../..").IDataAttributesProps & import("../..").ITweakStylesProps<import("./SearchInput.styles").ISearchInputStyles> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Select/Select.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, SyntheticEvent } from 'react';
+import { ReactNode, Ref, SyntheticEvent } from 'react';
 import { ICommonProps, IDropdownWithPopperOptions } from '../../types';
 import { IIcon } from '../Icon';
 import { IInputProps } from '../Input';
@@ -27,8 +27,10 @@ export interface ISelectProps<Value> extends Omit<IInputProps, 'value' | 'onChan
     shouldScrollToList?: boolean;
     isMultiSelect?: false;
     searchInput?: {
-        shouldRenderInList: true;
-    } & Pick<ISearchInputProps, 'placeholder'>;
+        /** @default false */
+        shouldRenderInList?: boolean;
+        ref?: Ref<HTMLInputElement>;
+    } & Pick<ISearchInputProps, 'placeholder' | 'shouldFocusOnMount'>;
     isOptionDisabled?: (option: Value) => boolean;
     onChange: (value: Value | undefined, event: IChangeSelectEvent) => void;
     onBlur?: (event: Event | SyntheticEvent) => void;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -4,7 +4,7 @@ import { ITooltipStyles } from './Tooltip.styles';
 export interface ITooltipProps extends ICommonProps<ITooltipStyles> {
     text: ReactNode;
     /** @default 'tooltip' */
-    view?: 'tooltip' | 'hint';
+    view?: 'tooltip' | 'hint' | 'custom';
     /** @default 'info' */
     type?: 'info' | 'error';
 }

package/dist/components/Tooltip/Tooltip.styles.d.ts

@@ -1,3 +1,3 @@
 import { ITweakStyles } from '../../theme';
-export declare const useStyles: import("../../theme").IUseStyles<"error" | "root" | "tooltip" | "info" | "hint", unknown>;
+export declare const useStyles: import("../../theme").IUseStyles<"error" | "root" | "tooltip" | "custom" | "info" | "hint", unknown>;
 export type ITooltipStyles = ITweakStyles<typeof useStyles>;

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

@@ -1,6 +1,6 @@
 import React, { createContext, useRef, useEffect, useCallback, useState, useMemo, useContext, createElement, Fragment as Fragment$1, forwardRef, createRef, PureComponent, memo } from "react";
 import { createUseStyles } from "react-jss";
-import { mergeStyles, isNotEmpty, isArrayNotEmpty, isEmpty, isString, isStringNotEmpty, mergeRefs, addDataTestId, applyAction, addDataAttributes as addDataAttributes$1, stopPropagation, isReactNodeNotEmpty, addClickHandler, getTestId, getSelectKeyHandler, getArray, createFilter, isFunction as isFunction$1, isObject as isObject$1, getTransition, indexMap, isNumberInteger, hasDuplicates, isArrayEmpty } from "@true-engineering/true-react-platform-helpers";
+import { mergeStyles, isNotEmpty, isArrayNotEmpty, isStringEmpty, isString, isStringNotEmpty, isEmpty, mergeRefs, addDataTestId, applyAction, addDataAttributes as addDataAttributes$1, stopPropagation, isReactNodeNotEmpty, addClickHandler, getTestId, getSelectKeyHandler, getArray, createFilter, isFunction as isFunction$1, isObject as isObject$1, getTransition, indexMap, isNumberInteger, hasDuplicates, isArrayEmpty } from "@true-engineering/true-react-platform-helpers";
 import { CSSTransition } from "react-transition-group";
 import clsx from "clsx";
 import hexToRgba from "hex-to-rgba";
@@ -2007,6 +2007,17 @@ var minWidthModifier = {
   }
 };
 var phoneInfo = [
+  {
+    countryEn: "Abkhazia",
+    countryRu: "Абхазия",
+    countryCode: "AB",
+    phoneMask: "(999) 999-99-99",
+    dialCode: "7",
+    dialCodePriority: 1,
+    fullCodes: [
+      "7"
+    ]
+  },
   {
     countryEn: "Afghanistan",
     countryRu: "Афганистан",
@@ -3003,39 +3014,10 @@ var phoneInfo = [
     countryRu: "Казахстан",
     countryCode: "KZ",
     dialCode: "7",
-    phoneMask: "999 999-99-99",
+    phoneMask: "(999) 999-99-99",
     dialCodePriority: 1,
-    areaCodes: [
-      "310",
-      "311",
-      "312",
-      "313",
-      "315",
-      "318",
-      "321",
-      "324",
-      "325",
-      "326",
-      "327",
-      "336",
-      "7172",
-      "73622"
-    ],
     fullCodes: [
-      "7310",
-      "7311",
-      "7312",
-      "7313",
-      "7315",
-      "7318",
-      "7321",
-      "7324",
-      "7325",
-      "7326",
-      "7327",
-      "7336",
-      "77172",
-      "773622"
+      "7"
     ]
   },
   {
@@ -3804,6 +3786,17 @@ var phoneInfo = [
       "82"
     ]
   },
+  {
+    countryCode: "OS",
+    countryEn: "South Ossetia",
+    countryRu: "Южная Осетия",
+    phoneMask: "(999) 999-99-99",
+    dialCode: "7",
+    dialCodePriority: 1,
+    fullCodes: [
+      "7"
+    ]
+  },
   {
     countryEn: "South Sudan",
     countryRu: "Южный Судан",
@@ -4761,22 +4754,25 @@ var getFullPhone = function(phone) {
   return ((_phone_dialCode = phone === null || phone === void 0 ? void 0 : phone.dialCode) !== null && _phone_dialCode !== void 0 ? _phone_dialCode : "") + ((_phone_phoneNumber = phone === null || phone === void 0 ? void 0 : phone.phoneNumber) !== null && _phone_phoneNumber !== void 0 ? _phone_phoneNumber : "");
 };
 var getCountryCodeFromPhone = function(phoneWithCode) {
-  var _phoneInfo_find;
-  var countryCode = (_phoneInfo_find = phoneInfo.find(function(info) {
-    return info.fullCodes.some(function(code) {
-      return phoneWithCode.startsWith(code);
-    });
-  })) === null || _phoneInfo_find === void 0 ? void 0 : _phoneInfo_find.countryCode;
-  if (isEmpty(countryCode) && isNotEmpty(phoneWithCode)) {
-    var _phoneInfo_filter_sort_;
-    countryCode = (_phoneInfo_filter_sort_ = phoneInfo.filter(function(info) {
-      return phoneWithCode.startsWith(info.dialCode);
-    }).sort(function(infoA, infoB) {
-      var _infoA_dialCodePriority, _infoB_dialCodePriority;
-      return ((_infoA_dialCodePriority = infoA.dialCodePriority) !== null && _infoA_dialCodePriority !== void 0 ? _infoA_dialCodePriority : 1e3) - ((_infoB_dialCodePriority = infoB.dialCodePriority) !== null && _infoB_dialCodePriority !== void 0 ? _infoB_dialCodePriority : 1e3);
-    })[0]) === null || _phoneInfo_filter_sort_ === void 0 ? void 0 : _phoneInfo_filter_sort_.countryCode;
-  }
-  return countryCode;
+  var _highestPriorityCountries_at;
+  if (isStringEmpty(phoneWithCode)) {
+    return;
+  }
+  var matchedCountries = phoneInfo.filter(function(info) {
+    return info.fullCodes.some(function(fullCode) {
+      return phoneWithCode.startsWith(fullCode);
+    });
+  });
+  if (matchedCountries.length === 1) {
+    return matchedCountries[0].countryCode;
+  }
+  var highestPriorityCountries = phoneInfo.filter(function(info) {
+    return phoneWithCode.startsWith(info.dialCode);
+  }).sort(function(a, b) {
+    var _a_dialCodePriority, _b_dialCodePriority;
+    return ((_a_dialCodePriority = a.dialCodePriority) !== null && _a_dialCodePriority !== void 0 ? _a_dialCodePriority : 1e3) - ((_b_dialCodePriority = b.dialCodePriority) !== null && _b_dialCodePriority !== void 0 ? _b_dialCodePriority : 1e3);
+  });
+  return (_highestPriorityCountries_at = highestPriorityCountries.at(0)) === null || _highestPriorityCountries_at === void 0 ? void 0 : _highestPriorityCountries_at.countryCode;
 };
 var getPhoneObjFromString = function(fullPhone, countryCode) {
   var _findCountryByCode;
@@ -10893,7 +10889,7 @@ function _object_without_properties_loose$f(source, excluded) {
   }
   return target;
 }
-var SearchInput = function(_param) {
+var SearchInput = /* @__PURE__ */ forwardRef(function(_param, ref) {
   var _param_isClearable = _param.isClearable, isClearable = _param_isClearable === void 0 ? true : _param_isClearable, placeholder = _param.placeholder, value = _param.value, testId = _param.testId, tweakStyles = _param.tweakStyles;
   _param.data;
   var props = _object_without_properties$f(_param, [
@@ -10911,6 +10907,7 @@ var SearchInput = function(_param) {
     currentComponentName: "SearchInput"
   });
   return /* @__PURE__ */ jsx(Input, _object_spread$N({
+    ref,
     value,
     placeholder,
     icon: "search",
@@ -10918,7 +10915,7 @@ var SearchInput = function(_param) {
     testId: getTestId(testId, "input"),
     tweakStyles: tweakInputStyles
   }, props));
-};
+});
 var ScrollIntoViewIfNeededDefaultElementType = "div";
 var ScrollIntoViewIfNeededDefaultProps = {
   active: true,
@@ -12022,9 +12019,13 @@ function Select(props) {
     dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.shouldUsePopper
   ]);
   var handleListClose = useCallback(function(event) {
+    if (!isListOpen) {
+      return;
+    }
     closeList();
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
   }, [
+    isListOpen,
     closeList,
     onBlur
   ]);
@@ -13592,6 +13593,7 @@ var useStyles$x = createThemedStyles("Tooltip", {
     color: colors.CLASSIC_WHITE,
     letterSpacing: 0.2
   },
+  custom: {},
   info: {},
   error: {
     "&$tooltip": {
@@ -19227,7 +19229,7 @@ function FilterValueView(param) {
   if (isEmpty(value)) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
-  if (filter.getSelectedValueView !== void 0) {
+  if (isNotEmpty(filter.getSelectedValueView)) {
     return /* @__PURE__ */ jsx("span", {
       className: classes.text,
       children: filter.getSelectedValueView(value)
@@ -19296,22 +19298,6 @@ function FilterValueView(param) {
       children: intervals.join(" ")
     });
   }
-  if (isMultiple) {
-    return /* @__PURE__ */ jsx(Fragment, {
-      children: Array.isArray(value) && value.length > 0 && /* @__PURE__ */ jsxs(Fragment, {
-        children: [
-          /* @__PURE__ */ jsx("span", {
-            className: classes.text,
-            children: displayValue(value[0])
-          }),
-          /* @__PURE__ */ jsx("span", {
-            className: classes.count,
-            children: value.length > 1 && " (+".concat(value.length - 1, ")")
-          })
-        ]
-      })
-    });
-  }
   if (isDate) {
     var from = value.from, to = value.to, periodType = value.periodType, label = value.label;
     var hasFrom = from !== void 0 && from !== null;
@@ -19342,6 +19328,24 @@ function FilterValueView(param) {
       children: range.join(" ")
     });
   }
+  if (isMultiple) {
+    var _filter_getSelectedValue;
+    var convertValue = (_filter_getSelectedValue = filter.getSelectedValue) !== null && _filter_getSelectedValue !== void 0 ? _filter_getSelectedValue : displayValue;
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: Array.isArray(value) && value.length > 0 && /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: classes.text,
+            children: convertValue(value[0])
+          }),
+          /* @__PURE__ */ jsx("span", {
+            className: classes.count,
+            children: value.length > 1 && " (+".concat(value.length - 1, ")")
+          })
+        ]
+      })
+    });
+  }
   if (isRange && Array.isArray(value)) {
     var rangeValue = value;
     var rangeValueFrom = rangeValue[0];
@@ -25889,8 +25893,24 @@ const Flags = {
   ZM,
   ZW
 };
+const AB = '<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>';
+const OS = '<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>';
+var customFlags = {
+  /**
+  * Абхазия
+  */
+  AB,
+  /**
+  * Южная осетия
+  */
+  OS
+};
 var useStyles$l = createThemedStyles("Flag", {
   root: {
+    display: "flex",
+    width: "100%",
+    height: "100%",
+    boxSizing: "border-box",
     // приходится хардкодить в компоненте, тк либа Flags выдает флаги с 2-3 пиксельным отступом снизу
     // если будет нужно, то можно вынести border на уровень пропсов
     border: [
@@ -25910,17 +25930,29 @@ var Flag = function(param) {
   var classes = useStyles$l({
     theme: tweakStyles
   });
-  var CC3 = countryCode.toUpperCase();
-  var TheFlag = hasFlag(CC3) ? Flags[CC3] : function() {
+  var countryFlagKey = countryCode.toUpperCase();
+  var hasFlagInLibrary = hasFlag(countryFlagKey);
+  if (hasFlagInLibrary) {
+    var FlagComponent = Flags[countryFlagKey];
     return /* @__PURE__ */ jsx("div", {
-      className: classes.noFlag,
-      children: /* @__PURE__ */ jsx(Icon, {
-        type: "minus"
-      })
+      className: classes.root,
+      children: /* @__PURE__ */ jsx(FlagComponent, {})
     });
-  };
-  return /* @__PURE__ */ jsx(TheFlag, {
-    className: classes.root
+  }
+  var CustomFlag = customFlags[countryFlagKey];
+  if (CustomFlag !== void 0) {
+    return /* @__PURE__ */ jsx("div", {
+      className: classes.root,
+      dangerouslySetInnerHTML: {
+        __html: CustomFlag
+      }
+    });
+  }
+  return /* @__PURE__ */ jsx("div", {
+    className: classes.noFlag,
+    children: /* @__PURE__ */ jsx(Icon, {
+      type: "minus"
+    })
   });
 };
 var DEFAULT_DATE_FORMAT = "dd.MM.yyyy";
@@ -26435,7 +26467,7 @@ function _unsupported_iterable_to_array$7(o, minLen) {
     return _array_like_to_array$7(o, minLen);
 }
 function FlexibleTableRowInner(param) {
-  var item = param.item, index = param.index, config = param.config, columns = param.columns, uniqueField = param.uniqueField, renderMode = param.renderMode, _param_isActive = param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isFocusable = param.isFocusable, isFocusable = _param_isFocusable === void 0 ? false : _param_isFocusable, _param_isFirstColumnSticky = param.isFirstColumnSticky, isFirstColumnSticky = _param_isFirstColumnSticky === void 0 ? false : _param_isFirstColumnSticky, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, rowAttributes = param.rowAttributes, _param_isExpandableRowComponentInitiallyOpen = param.isExpandableRowComponentInitiallyOpen, isExpandableRowComponentInitiallyOpen = _param_isExpandableRowComponentInitiallyOpen === void 0 ? false : _param_isExpandableRowComponentInitiallyOpen, tweakStyles = param.tweakStyles, expandableRowComponent = param.expandableRowComponent, onRowHover = param.onRowHover, onRowClick = param.onRowClick;
+  var item = param.item, index = param.index, config = param.config, columns = param.columns, uniqueField = param.uniqueField, renderMode = param.renderMode, _param_isActive = param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isFocusable = param.isFocusable, isFocusable = _param_isFocusable === void 0 ? false : _param_isFocusable, _param_isFirstColumnSticky = param.isFirstColumnSticky, isFirstColumnSticky = _param_isFirstColumnSticky === void 0 ? false : _param_isFirstColumnSticky, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, rowAttributes = param.rowAttributes, _param_isExpandableRowComponentInitiallyOpen = param.isExpandableRowComponentInitiallyOpen, isExpandableRowComponentInitiallyOpen = _param_isExpandableRowComponentInitiallyOpen === void 0 ? false : _param_isExpandableRowComponentInitiallyOpen, rowRef = param.rowRef, tweakStyles = param.tweakStyles, expandableRowComponent = param.expandableRowComponent, onRowHover = param.onRowHover, onRowClick = param.onRowClick;
   var classes = useStyles$h({
     theme: tweakStyles
   });
@@ -26512,6 +26544,7 @@ function FlexibleTableRowInner(param) {
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
       /* @__PURE__ */ jsx(Table.Row, _object_spread_props$k(_object_spread$l({
+        ref: rowRef,
         className: clsx(classes.root, (_obj2 = {}, _define_property$m(_obj2, classes.active, isActive), _define_property$m(_obj2, classes.editable, isEditable), _define_property$m(_obj2, classes.clickable, isClickable), _obj2))
       }, !isLoading && {
         onClick: handleRowClick,
@@ -28893,6 +28926,7 @@ var PhoneInput = function(_param) {
     var _value_countryCode;
     return (_value_countryCode = value === null || value === void 0 ? void 0 : value.countryCode) !== null && _value_countryCode !== void 0 ? _value_countryCode : getCountryCodeFromPhone(phoneWithCode);
   }, [
+    value.countryCode,
     value.dialCode,
     value.phoneNumber
   ]);
@@ -28923,7 +28957,7 @@ var PhoneInput = function(_param) {
   var handleSelect = function(newPhoneInfo, event) {
     if (newPhoneInfo.countryCode !== countryCode) {
       onChange({
-        phoneNumber: "",
+        phoneNumber: newPhoneInfo.dialCode !== value.dialCode ? "" : getPhoneObjFromString(phoneWithCode).phoneNumber,
         dialCode: newPhoneInfo.dialCode,
         countryCode: newPhoneInfo.countryCode
       }, event);