From cd0e41802ecf6a6c9292e871e67f077187c9995e Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Thu, 26 May 2022 11:33:15 +0300
Subject: [PATCH 01/40] chore: add data-tid and export

---
 .../components/Autocomplete/Autocomplete.tsx  | 11 +++++++-
 .../react-ui/components/Button/Button.tsx     |  6 +++-
 .../react-ui/components/Center/Center.tsx     |  5 ++++
 .../react-ui/components/Checkbox/Checkbox.tsx |  5 ++++
 .../react-ui/components/ComboBox/ComboBox.tsx |  6 +++-
 .../CurrencyInput/CurrencyInput.tsx           |  5 ++++
 .../CurrencyLabel/CurrencyLabel.tsx           |  6 +++-
 .../components/DateInput/DateInput.tsx        |  5 +++-
 .../components/DatePicker/DatePicker.tsx      | 11 +++++++-
 .../react-ui/components/DatePicker/Picker.tsx |  9 ++++--
 .../react-ui/components/Dropdown/Dropdown.tsx |  5 ++++
 .../components/DropdownMenu/DropdownMenu.tsx  |  6 +++-
 .../components/FileUploader/FileUploader.tsx  | 12 ++++++--
 .../react-ui/components/FxInput/FxInput.tsx   |  6 +++-
 .../react-ui/components/Gapped/Gapped.tsx     |  9 ++++--
 .../components/GlobalLoader/GlobalLoader.tsx  |  6 +++-
 packages/react-ui/components/Group/Group.tsx  |  6 +++-
 packages/react-ui/components/Hint/Hint.tsx    |  9 ++++--
 packages/react-ui/components/Input/Input.tsx  |  6 +++-
 packages/react-ui/components/Kebab/Kebab.tsx  |  6 +++-
 packages/react-ui/components/Link/Link.tsx    |  6 +++-
 .../react-ui/components/Loader/Loader.tsx     | 12 ++++++--
 .../components/MenuHeader/MenuHeader.tsx      |  5 ++++
 .../react-ui/components/MenuItem/MenuItem.tsx |  8 +++++-
 .../MenuSeparator/MenuSeparator.tsx           |  6 +++-
 packages/react-ui/components/Modal/Modal.tsx  | 12 ++++++--
 .../react-ui/components/Modal/ModalBody.tsx   |  6 +++-
 .../react-ui/components/Modal/ModalClose.tsx  |  6 +++-
 .../react-ui/components/Modal/ModalFooter.tsx |  5 ++++
 .../react-ui/components/Modal/ModalHeader.tsx |  6 ++++
 .../react-ui/components/Paging/Paging.tsx     | 18 ++++++++----
 .../PasswordInput/PasswordInput.tsx           | 14 ++++++++--
 packages/react-ui/components/Radio/Radio.tsx  |  6 +++-
 .../components/RadioGroup/RadioGroup.tsx      |  6 +++-
 .../ResponsiveLayout/ResponsiveLayout.tsx     |  6 +++-
 .../ScrollContainer/ScrollContainer.tsx       | 14 ++++++++--
 .../react-ui/components/Select/Select.tsx     | 10 ++++++-
 .../react-ui/components/SidePage/SidePage.tsx |  9 ++++--
 .../components/SidePage/SidePageBody.tsx      |  6 +++-
 .../components/SidePage/SidePageContainer.tsx |  6 +++-
 .../components/SidePage/SidePageFooter.tsx    |  6 +++-
 .../components/SidePage/SidePageHeader.tsx    |  9 ++++--
 .../react-ui/components/Spinner/Spinner.tsx   |  6 +++-
 .../react-ui/components/Sticky/Sticky.tsx     |  6 +++-
 .../react-ui/components/Switcher/Switcher.tsx |  6 +++-
 .../react-ui/components/Tabs/Indicator.tsx    |  5 ++++
 packages/react-ui/components/Tabs/Tab.tsx     |  6 +++-
 packages/react-ui/components/Tabs/Tabs.tsx    |  6 +++-
 .../react-ui/components/Textarea/Textarea.tsx |  6 +++-
 .../components/Textarea/TextareaCounter.tsx   |  6 +++-
 packages/react-ui/components/Toast/Toast.tsx  |  6 +++-
 .../react-ui/components/Toast/ToastStatic.tsx |  6 +++-
 .../react-ui/components/Toast/ToastView.tsx   | 12 ++++++--
 .../react-ui/components/Toggle/Toggle.tsx     |  6 +++-
 packages/react-ui/components/Token/Token.tsx  |  6 +++-
 .../components/TokenInput/TokenInput.tsx      |  6 +++-
 .../components/TokenInput/TokenInputMenu.tsx  |  5 ++++
 .../react-ui/components/Tooltip/Tooltip.tsx   |  6 +++-
 .../components/TooltipMenu/TooltipMenu.tsx    |  6 +++-
 .../react-ui/internal/Calendar/Calendar.tsx   | 14 +++++-----
 .../react-ui/internal/Calendar/MonthView.tsx  | 12 ++++++--
 .../internal/CustomComboBox/ComboBoxMenu.tsx  | 28 +++++++++++++++----
 .../internal/DateSelect/DateSelect.tsx        |  9 ++++--
 .../FileUploaderFile/FileUploaderFile.tsx     | 18 ++++++++----
 .../FileUploaderFileList.tsx                  |  6 +++-
 .../internal/InputLikeText/InputLikeText.tsx  |  8 +++++-
 .../internal/InternalMenu/InternalMenu.tsx    |  5 ++++
 .../internal/MaskedInput/MaskedInput.tsx      |  6 +++-
 packages/react-ui/internal/Menu/Menu.tsx      |  5 ++++
 .../internal/MobilePopup/MobilePopup.tsx      |  7 +++++
 packages/react-ui/internal/Popup/Popup.tsx    | 12 ++++++--
 packages/react-ui/internal/Popup/PopupPin.tsx |  6 +++-
 .../react-ui/internal/PopupMenu/PopupMenu.tsx | 11 ++++++--
 73 files changed, 473 insertions(+), 102 deletions(-)

diff --git a/packages/react-ui/components/Autocomplete/Autocomplete.tsx b/packages/react-ui/components/Autocomplete/Autocomplete.tsx
index c045bfe4e3f..dcaad53ad74 100644
--- a/packages/react-ui/components/Autocomplete/Autocomplete.tsx
+++ b/packages/react-ui/components/Autocomplete/Autocomplete.tsx
@@ -77,6 +77,10 @@ export interface AutocompleteState {
   isMobileOpened: boolean;
 }
 
+export const autocompleteDataTid = {
+  root: 'Autocomplete__root',
+};
+
 /**
  * Стандартный инпут с подсказками.
  *
@@ -209,7 +213,12 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
 
     return (
       <RenderLayer onFocusOutside={this.handleBlur} onClickOutside={this.handleClickOutside} active={focused}>
-        <span className={styles.root(this.theme)} style={{ width }} ref={this.refRootSpan}>
+        <span
+          data-tid={autocompleteDataTid.root}
+          className={styles.root(this.theme)}
+          style={{ width }}
+          ref={this.refRootSpan}
+        >
           <Input {...inputProps} />
           {isMobile ? this.renderMobileMenu() : this.renderMenu()}
         </span>
diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx
index d236856ff88..96805c093a4 100644
--- a/packages/react-ui/components/Button/Button.tsx
+++ b/packages/react-ui/components/Button/Button.tsx
@@ -164,6 +164,10 @@ export interface ButtonState {
   focusedByTab: boolean;
 }
 
+export const buttonDataTid = {
+  root: 'Button__root',
+};
+
 @rootNode
 export class Button extends React.Component<ButtonProps, ButtonState> {
   public static __KONTUR_REACT_UI__ = 'Button';
@@ -382,7 +386,7 @@ export class Button extends React.Component<ButtonProps, ButtonState> {
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <span {...wrapProps}>
-          <button ref={this._ref} {...rootProps}>
+          <button data-tid={buttonDataTid.root} ref={this._ref} {...rootProps}>
             {innerShadowNode}
             {outlineNode}
             {loadingNode}
diff --git a/packages/react-ui/components/Center/Center.tsx b/packages/react-ui/components/Center/Center.tsx
index 71a1b944106..917f2b269c4 100644
--- a/packages/react-ui/components/Center/Center.tsx
+++ b/packages/react-ui/components/Center/Center.tsx
@@ -23,6 +23,10 @@ export interface CenterProps
       }
     > {}
 
+export const centerDataTid = {
+  root: 'Center__root',
+};
+
 /**
  * Контейнер, который центрирует элементы внутри себя.
  */
@@ -47,6 +51,7 @@ export class Center extends React.Component<CenterProps> {
 
     return (
       <div
+        data-tid={centerDataTid.root}
         {...rest}
         className={cx({
           [styles.root()]: true,
diff --git a/packages/react-ui/components/Checkbox/Checkbox.tsx b/packages/react-ui/components/Checkbox/Checkbox.tsx
index 93059559ecc..78969722852 100644
--- a/packages/react-ui/components/Checkbox/Checkbox.tsx
+++ b/packages/react-ui/components/Checkbox/Checkbox.tsx
@@ -62,6 +62,10 @@ export interface CheckboxState {
   focusedByTab: boolean;
   indeterminate: boolean;
 }
+
+export const checkboxDataTid = {
+  root: 'Checkbox__root',
+};
 @rootNode
 export class Checkbox extends React.PureComponent<CheckboxProps, CheckboxState> {
   public static __KONTUR_REACT_UI__ = 'Checkbox';
@@ -222,6 +226,7 @@ export class Checkbox extends React.PureComponent<CheckboxProps, CheckboxState>
 
     return (
       <label
+        data-tid={checkboxDataTid.root}
         className={rootClass}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
diff --git a/packages/react-ui/components/ComboBox/ComboBox.tsx b/packages/react-ui/components/ComboBox/ComboBox.tsx
index 5c9e2479cab..90f37ffe6d6 100644
--- a/packages/react-ui/components/ComboBox/ComboBox.tsx
+++ b/packages/react-ui/components/ComboBox/ComboBox.tsx
@@ -166,6 +166,10 @@ export interface ComboBoxItem {
   label: string;
 }
 
+export const comboBoxDataTid = {
+  root: 'ComboBox__root',
+};
+
 @rootNode
 export class ComboBox<T = ComboBoxItem> extends React.Component<ComboBoxProps<T>> {
   public static __KONTUR_REACT_UI__ = 'ComboBox';
@@ -262,7 +266,7 @@ export class ComboBox<T = ComboBoxItem> extends React.Component<ComboBoxProps<T>
   }
 
   public render() {
-    return <CustomComboBox {...this.props} ref={this.customComboBoxRef} />;
+    return <CustomComboBox data-tid={comboBoxDataTid.root} {...this.props} ref={this.customComboBoxRef} />;
   }
 
   private customComboBoxRef = (element: Nullable<CustomComboBox<T>>) => {
diff --git a/packages/react-ui/components/CurrencyInput/CurrencyInput.tsx b/packages/react-ui/components/CurrencyInput/CurrencyInput.tsx
index 2b2af81e8e5..61eeff61f2d 100644
--- a/packages/react-ui/components/CurrencyInput/CurrencyInput.tsx
+++ b/packages/react-ui/components/CurrencyInput/CurrencyInput.tsx
@@ -46,6 +46,10 @@ export interface CurrencyInputState {
   focused: boolean;
 }
 
+export const currencyInputDataTid = {
+  root: 'CurrencyInput__root',
+};
+
 /**
  * Поле для денежных сумм (и других числовых значений).
  * Принимает любые свойства `Input`.
@@ -144,6 +148,7 @@ export class CurrencyInput extends React.PureComponent<CurrencyInputProps, Curre
 
     return (
       <Input
+        data-tid={currencyInputDataTid.root}
         {...rest}
         value={this.state.formatted}
         onBlur={this.handleBlur}
diff --git a/packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx b/packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx
index 891585a3d2e..fcef2c82786 100644
--- a/packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx
+++ b/packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx
@@ -18,10 +18,14 @@ export const defaultProps = {
   fractionDigits: 2,
 };
 
+export const currencyLabelDataTid = {
+  root: 'CurrencyLabel__root',
+};
+
 export const CurrencyLabel = (props: CurrencyLabelProps): JSX.Element => {
   const { value, fractionDigits, currencySymbol } = props;
   return (
-    <CommonWrapper {...props}>
+    <CommonWrapper {...props} data-tid={currencyLabelDataTid.root}>
       <span>
         {CurrencyHelper.format(value, { fractionDigits })}
         {currencySymbol && String.fromCharCode(0xa0) /* &nbsp; */}
diff --git a/packages/react-ui/components/DateInput/DateInput.tsx b/packages/react-ui/components/DateInput/DateInput.tsx
index e2cf8b36bdb..7110e9b1b4a 100644
--- a/packages/react-ui/components/DateInput/DateInput.tsx
+++ b/packages/react-ui/components/DateInput/DateInput.tsx
@@ -70,6 +70,9 @@ export interface DateInputProps extends CommonProps {
   onValueChange?: (value: string) => void;
   onKeyDown?: (x0: React.KeyboardEvent<HTMLElement>) => void;
 }
+export const dataInputDataTid = {
+  root: 'DateInput__root',
+};
 
 @rootNode
 @locale('DatePicker', DatePickerLocaleHelper)
@@ -190,7 +193,7 @@ export class DateInput extends React.Component<DateInputProps, DateInputState> {
     const showValue = Boolean(focused || valueFormatted);
 
     return (
-      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper data-tid={dataInputDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
         <InputLikeText
           width={this.props.width}
           ref={this.inputLikeTextRef}
diff --git a/packages/react-ui/components/DatePicker/DatePicker.tsx b/packages/react-ui/components/DatePicker/DatePicker.tsx
index 293931ec30c..4c3874a8ce2 100644
--- a/packages/react-ui/components/DatePicker/DatePicker.tsx
+++ b/packages/react-ui/components/DatePicker/DatePicker.tsx
@@ -85,6 +85,10 @@ export interface DatePickerState {
 
 type DatePickerValue = string;
 
+export const dataPickerDataTid = {
+  root: 'DatePicker__root',
+};
+
 @rootNode
 export class DatePicker extends React.PureComponent<DatePickerProps<DatePickerValue>, DatePickerState> {
   public static __KONTUR_REACT_UI__ = 'DatePicker';
@@ -250,7 +254,12 @@ export class DatePicker extends React.PureComponent<DatePickerProps<DatePickerVa
 
     if (this.state.opened) {
       picker = (
-        <DropdownContainer getParent={this.getParent} offsetY={2} align={this.props.menuAlign}>
+        <DropdownContainer
+          data-tid={dataPickerDataTid.root}
+          getParent={this.getParent}
+          offsetY={2}
+          align={this.props.menuAlign}
+        >
           <Picker
             value={date}
             minDate={formattedMinDate}
diff --git a/packages/react-ui/components/DatePicker/Picker.tsx b/packages/react-ui/components/DatePicker/Picker.tsx
index 6044abb7830..84dfd9238ff 100644
--- a/packages/react-ui/components/DatePicker/Picker.tsx
+++ b/packages/react-ui/components/DatePicker/Picker.tsx
@@ -36,6 +36,11 @@ const getTodayCalendarDate = () => {
   };
 };
 
+export const pickerDataTid = {
+  root: 'Picker__root',
+  todayWrapper: 'Picker__todayWrapper',
+};
+
 @locale('DatePicker', DatePickerLocaleHelper)
 export class Picker extends React.Component<Props, State> {
   public static __KONTUR_REACT_UI__ = 'Picker';
@@ -75,7 +80,7 @@ export class Picker extends React.Component<Props, State> {
     const { date } = this.state;
 
     return (
-      <div className={styles.root(this.theme)} onMouseDown={(e) => e.preventDefault()}>
+      <div data-tid={pickerDataTid.root} className={styles.root(this.theme)} onMouseDown={(e) => e.preventDefault()}>
         <Calendar
           ref={(c) => (this.calendar = c)}
           value={this.props.value}
@@ -102,7 +107,7 @@ export class Picker extends React.Component<Props, State> {
     const today = new InternalDate({ order, separator }).setComponents(InternalDateGetter.getTodayComponents());
     return (
       <button
-        data-tid="Picker__todayWrapper"
+        data-tid={pickerDataTid.todayWrapper}
         className={styles.todayWrapper(this.theme)}
         onClick={this.handleSelectToday(today)}
         tabIndex={-1}
diff --git a/packages/react-ui/components/Dropdown/Dropdown.tsx b/packages/react-ui/components/Dropdown/Dropdown.tsx
index bc2a63a8bb9..37ebeb71a17 100644
--- a/packages/react-ui/components/Dropdown/Dropdown.tsx
+++ b/packages/react-ui/components/Dropdown/Dropdown.tsx
@@ -87,6 +87,10 @@ export interface DropdownProps extends CommonProps {
 
 type DropdownSelectType = Select<React.ReactNode, React.ReactNode>;
 
+export const dropdownDataTid = {
+  root: 'Dropdown__root',
+};
+
 /**
  * Выпадающее меню.
  *
@@ -178,6 +182,7 @@ export class Dropdown extends React.Component<DropdownProps> {
 
     return (
       <Select<React.ReactNode, React.ReactNode>
+        data-tid={dropdownDataTid.root}
         ref={this._refSelect}
         {...filterProps(props, PASS_PROPS)}
         value={caption}
diff --git a/packages/react-ui/components/DropdownMenu/DropdownMenu.tsx b/packages/react-ui/components/DropdownMenu/DropdownMenu.tsx
index 5396d8f2bc0..c4010fc0252 100644
--- a/packages/react-ui/components/DropdownMenu/DropdownMenu.tsx
+++ b/packages/react-ui/components/DropdownMenu/DropdownMenu.tsx
@@ -56,6 +56,10 @@ export interface DropdownMenuProps extends CommonProps {
   disableAnimations: boolean;
 }
 
+export const dropdownMenuDataTid = {
+  root: 'DropdownMenu__root',
+};
+
 /**
  * Меню, раскрывающееся по клику на переданный в `caption` элемент
  */
@@ -105,7 +109,7 @@ export class DropdownMenu extends React.Component<DropdownMenuProps> {
       return null;
     }
     return (
-      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper data-tid={dropdownMenuDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
         <PopupMenu
           ref={this.refPopupMenu}
           caption={this.props.caption}
diff --git a/packages/react-ui/components/FileUploader/FileUploader.tsx b/packages/react-ui/components/FileUploader/FileUploader.tsx
index 04d64adbe0a..b5cae543a3b 100644
--- a/packages/react-ui/components/FileUploader/FileUploader.tsx
+++ b/packages/react-ui/components/FileUploader/FileUploader.tsx
@@ -61,6 +61,12 @@ export interface FileUploaderRef {
   reset: () => void;
 }
 
+export const fileUploaderDataTid = {
+  root: 'FileUploader__root',
+  content: 'FileUploader__content',
+  link: 'FileUploader__link',
+};
+
 const defaultRenderFile = (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => fileNode;
 
 const _FileUploader = React.forwardRef<FileUploaderRef, _FileUploaderProps>((props: _FileUploaderProps, ref) => {
@@ -225,7 +231,7 @@ const _FileUploader = React.forwardRef<FileUploaderRef, _FileUploaderProps>((pro
 
   return (
     <CommonWrapper {...props}>
-      <div className={jsStyles.root(theme)} style={useMemoObject({ width })}>
+      <div data-tid={fileUploaderDataTid.root} className={jsStyles.root(theme)} style={useMemoObject({ width })}>
         {!hideFiles && !isSingleMode && !!files.length && <FileUploaderFileList renderFile={renderFile} />}
         <div className={uploadButtonWrapperClassNames}>
           <label
@@ -234,8 +240,8 @@ const _FileUploader = React.forwardRef<FileUploaderRef, _FileUploaderProps>((pro
             ref={labelRef}
             className={uploadButtonClassNames}
           >
-            <div data-tid={'FileUploader__content'} className={jsStyles.content()}>
-              <span data-tid={'FileUploader__link'} className={linkClassNames}>
+            <div data-tid={fileUploaderDataTid.content} className={jsStyles.content()}>
+              <span data-tid={fileUploaderDataTid.link} className={linkClassNames}>
                 {hasOneFileForSingle ? locale.choosedFile : locale.chooseFile}
               </span>
               &nbsp;
diff --git a/packages/react-ui/components/FxInput/FxInput.tsx b/packages/react-ui/components/FxInput/FxInput.tsx
index b7fa770025a..8089b7932ae 100644
--- a/packages/react-ui/components/FxInput/FxInput.tsx
+++ b/packages/react-ui/components/FxInput/FxInput.tsx
@@ -33,6 +33,10 @@ export interface FxInputProps
       }
     > {}
 
+export const fxInputDataTid = {
+  root: 'FxInput__root',
+};
+
 /** Принимает все свойства `Input`'a */
 @rootNode
 export class FxInput extends React.Component<FxInputProps> {
@@ -87,7 +91,7 @@ export class FxInput extends React.Component<FxInputProps> {
     }
 
     return (
-      <Group width={this.props.width}>
+      <Group data-tid={fxInputDataTid.root} width={this.props.width}>
         {button}
         {this.getProps().type === 'currency' ? (
           <CurrencyInput
diff --git a/packages/react-ui/components/Gapped/Gapped.tsx b/packages/react-ui/components/Gapped/Gapped.tsx
index c5ffd886f75..39385707d6c 100644
--- a/packages/react-ui/components/Gapped/Gapped.tsx
+++ b/packages/react-ui/components/Gapped/Gapped.tsx
@@ -28,6 +28,11 @@ export interface GappedProps extends CommonProps {
   children: React.ReactNode;
 }
 
+export const gappedDataTid = {
+  vertical: 'Gapped__vertical',
+  horizontal: 'Gapped__horizontal',
+};
+
 /**
  * Контейнер, расстояние между элементами в котором равно `gap`.
  */
@@ -93,7 +98,7 @@ export class Gapped extends React.Component<GappedProps> {
         );
       });
 
-    return <div>{children}</div>;
+    return <div data-tid={gappedDataTid.vertical}>{children}</div>;
   }
 
   private renderHorizontal() {
@@ -108,7 +113,7 @@ export class Gapped extends React.Component<GappedProps> {
     const contStyle: React.CSSProperties = wrap ? { marginTop: -gap - 1, marginLeft: -gap } : { whiteSpace: 'nowrap' };
 
     return (
-      <div style={rootStyle}>
+      <div data-tid={gappedDataTid.horizontal} style={rootStyle}>
         <div style={contStyle}>
           {React.Children.toArray(children)
             .filter(this.filterChildren)
diff --git a/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx b/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx
index bbfeca62672..7e1f165b3c2 100644
--- a/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx
+++ b/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx
@@ -72,6 +72,10 @@ interface DefaultProps {
 }
 export type GlobalLoaderComponentProps = GlobalLoaderProps & DefaultProps;
 
+export const globalLoaderDataTid = {
+  root: 'GlobalLoader',
+};
+
 let currentGlobalLoader: GlobalLoader;
 
 @rootNode
@@ -160,7 +164,7 @@ export class GlobalLoader extends React.Component<GlobalLoaderComponentProps, Gl
             expectedResponseTime={this.state.expectedResponseTime}
             delayBeforeHide={this.props.delayBeforeHide}
             status={status}
-            data-tid="GlobalLoader"
+            data-tid={globalLoaderDataTid.root}
             disableAnimations={this.props.disableAnimations}
           />
         </CommonWrapper>
diff --git a/packages/react-ui/components/Group/Group.tsx b/packages/react-ui/components/Group/Group.tsx
index c48faecc81b..3f7afff44e8 100644
--- a/packages/react-ui/components/Group/Group.tsx
+++ b/packages/react-ui/components/Group/Group.tsx
@@ -20,6 +20,10 @@ interface GroupChildProps {
   corners?: number;
 }
 
+export const groupDataTid = {
+  root: 'Group__root',
+};
+
 @rootNode
 export class Group extends React.Component<GroupProps> {
   public static __KONTUR_REACT_UI__ = 'Group';
@@ -46,7 +50,7 @@ export class Group extends React.Component<GroupProps> {
 
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-        <span className={styles.root()} style={style}>
+        <span data-tid={groupDataTid.root} className={styles.root()} style={style}>
           {React.Children.map(this.props.children, (child) => {
             if (!child || !React.isValidElement<GroupChildProps>(child)) {
               return null;
diff --git a/packages/react-ui/components/Hint/Hint.tsx b/packages/react-ui/components/Hint/Hint.tsx
index 0f0e72f1995..eb4c0187903 100644
--- a/packages/react-ui/components/Hint/Hint.tsx
+++ b/packages/react-ui/components/Hint/Hint.tsx
@@ -84,6 +84,11 @@ const Positions: PopupPositionsType[] = [
   'right bottom',
 ];
 
+export const hintDataTid = {
+  root: 'Hint__root',
+  modal: 'Hint__modal',
+};
+
 /**
  * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
  */
@@ -160,7 +165,7 @@ export class Hint extends React.PureComponent<HintProps, HintState> implements I
 
   public renderMobile() {
     return (
-      <CommonWrapper {...this.props}>
+      <CommonWrapper data-tid={hintDataTid.modal} {...this.props}>
         <Popup
           opened={this.state.opened}
           anchorElement={this.props.children}
@@ -176,7 +181,7 @@ export class Hint extends React.PureComponent<HintProps, HintState> implements I
 
   public renderMain() {
     return (
-      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper data-tid={hintDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
         <Popup
           hasPin
           opened={this.state.opened}
diff --git a/packages/react-ui/components/Input/Input.tsx b/packages/react-ui/components/Input/Input.tsx
index 2992f103eea..b04f1964cd2 100644
--- a/packages/react-ui/components/Input/Input.tsx
+++ b/packages/react-ui/components/Input/Input.tsx
@@ -107,6 +107,10 @@ export interface InputState {
   needsPolyfillPlaceholder: boolean;
 }
 
+export const inputDataTid = {
+  root: 'Input__root',
+};
+
 /**
  * Интерфейс пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
  *  Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`
@@ -328,7 +332,7 @@ export class Input extends React.Component<InputProps, InputState> {
     const input = mask ? this.renderMaskedInput(inputProps, mask) : React.createElement('input', inputProps);
 
     return (
-      <label {...labelProps}>
+      <label data-tid={inputDataTid.root} {...labelProps}>
         <span className={styles.sideContainer()}>
           {this.renderLeftIcon()}
           {this.renderPrefix()}
diff --git a/packages/react-ui/components/Kebab/Kebab.tsx b/packages/react-ui/components/Kebab/Kebab.tsx
index 5679f3f2938..d006792e061 100644
--- a/packages/react-ui/components/Kebab/Kebab.tsx
+++ b/packages/react-ui/components/Kebab/Kebab.tsx
@@ -57,6 +57,10 @@ export interface KebabState {
   opened: boolean;
 }
 
+export const kebabDataTid = {
+  root: 'Kebab__root',
+};
+
 @rootNode
 export class Kebab extends React.Component<KebabProps, KebabState> {
   public static __KONTUR_REACT_UI__ = 'Kebab';
@@ -123,7 +127,7 @@ export class Kebab extends React.Component<KebabProps, KebabState> {
   private renderMain() {
     const { disabled, positions } = this.props;
     return (
-      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper data-tid={kebabDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
         <PopupMenu
           popupHasPin
           positions={positions}
diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx
index e5026373798..3b93ddc50c0 100644
--- a/packages/react-ui/components/Link/Link.tsx
+++ b/packages/react-ui/components/Link/Link.tsx
@@ -61,6 +61,10 @@ export interface LinkState {
   focusedByTab: boolean;
 }
 
+export const linkDataTid = {
+  root: 'Link__root',
+};
+
 /**
  * Элемент ссылки из HTML.
  */
@@ -149,7 +153,7 @@ export class Link extends React.Component<LinkProps, LinkState> {
     };
 
     return (
-      <a {...rest} {...linkProps}>
+      <a data-tid={linkDataTid.root} {...rest} {...linkProps}>
         {iconElement}
         {this.props.children}
         {arrow}
diff --git a/packages/react-ui/components/Loader/Loader.tsx b/packages/react-ui/components/Loader/Loader.tsx
index 9be565ebfbc..16ec1ee7d97 100644
--- a/packages/react-ui/components/Loader/Loader.tsx
+++ b/packages/react-ui/components/Loader/Loader.tsx
@@ -51,6 +51,12 @@ export interface LoaderState {
   spinnerStyle?: object;
 }
 
+export const loaderDataTid = {
+  root: 'Loader__root',
+  vail: 'Loader__Veil',
+  spinner: 'Loader__Spinner',
+};
+
 /**
  * DRAFT - лоадер-контейнер
  */
@@ -216,8 +222,8 @@ export class Loader extends React.Component<LoaderProps, LoaderState> {
     const { isLoaderActive } = this.state;
 
     return (
-      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-        <div className={styles.loader()} data-tid={isLoaderActive ? 'Loader__Veil' : ''}>
+      <CommonWrapper data-tid={loaderDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
+        <div className={styles.loader()} data-tid={isLoaderActive ? loaderDataTid.vail : ''}>
           <ZIndex
             priority={'Loader'}
             applyZIndex={isLoaderActive}
@@ -254,7 +260,7 @@ export class Loader extends React.Component<LoaderProps, LoaderState> {
   private renderSpinner(type?: 'mini' | 'normal' | 'big', caption?: React.ReactNode, component?: React.ReactNode) {
     return (
       <span
-        data-tid={'Loader__Spinner'}
+        data-tid={loaderDataTid.spinner}
         className={cx(styles.spinnerContainer(), { [styles.spinnerContainerSticky()]: this.state.isStickySpinner })}
         style={this.state.spinnerStyle}
       >
diff --git a/packages/react-ui/components/MenuHeader/MenuHeader.tsx b/packages/react-ui/components/MenuHeader/MenuHeader.tsx
index f67fa19b256..9533a5b05af 100644
--- a/packages/react-ui/components/MenuHeader/MenuHeader.tsx
+++ b/packages/react-ui/components/MenuHeader/MenuHeader.tsx
@@ -11,6 +11,10 @@ export interface MenuHeaderProps extends CommonProps {
   children: ReactNode;
 }
 
+export const menuHeaderDataTid = {
+  root: 'MenuHeader__root',
+};
+
 /**
  * `Заголовок меню` используется для того, чтобы разделить `элементы меню` на категории в рамках одного меню.
  *
@@ -24,6 +28,7 @@ function MenuHeader({ _enableIconPadding = false, children, ...rest }: MenuHeade
   return (
     <CommonWrapper {...rest}>
       <div
+        data-tid={menuHeaderDataTid.root}
         className={cx({
           [styles.root(theme)]: true,
           [styles.withLeftPadding(theme)]: _enableIconPadding,
diff --git a/packages/react-ui/components/MenuItem/MenuItem.tsx b/packages/react-ui/components/MenuItem/MenuItem.tsx
index 9ff3e4de19f..fdbad2279b2 100644
--- a/packages/react-ui/components/MenuItem/MenuItem.tsx
+++ b/packages/react-ui/components/MenuItem/MenuItem.tsx
@@ -76,6 +76,11 @@ export interface MenuItemProps extends CommonProps {
   isMobile?: boolean;
 }
 
+export const menuItemDataTid = {
+  root: 'MenuItem__root',
+  comment: 'MenuItem__comment',
+};
+
 /**
  *
  * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.
@@ -168,6 +173,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
 
     return (
       <Component
+        data-tid={menuItemDataTid.root}
         {...rest}
         state={state}
         onMouseOver={this.handleMouseEnterFix}
@@ -179,7 +185,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
         {content}
         {this.props.comment && (
           <div
-            data-tid="MenuItem__comment"
+            data-tid={menuItemDataTid.comment}
             className={cx({
               [styles.comment(this.theme)]: true,
               [styles.commentHover(this.theme)]: hover,
diff --git a/packages/react-ui/components/MenuSeparator/MenuSeparator.tsx b/packages/react-ui/components/MenuSeparator/MenuSeparator.tsx
index 542a811bedb..c8649370c54 100644
--- a/packages/react-ui/components/MenuSeparator/MenuSeparator.tsx
+++ b/packages/react-ui/components/MenuSeparator/MenuSeparator.tsx
@@ -6,6 +6,10 @@ import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';
 import { styles } from './MenuSeparator.styles';
 
 export type MenuSeparatorProps = CommonProps;
+
+export const menuSeparatorDataTid = {
+  root: 'MenuSeparator__root',
+};
 /**
  * Добавляет разделительную линию между элементами меню.
  *
@@ -16,7 +20,7 @@ function MenuSeparator(props: MenuSeparatorProps) {
 
   return (
     <CommonWrapper {...props}>
-      <div className={styles.root(theme)} />
+      <div data-tid={menuSeparatorDataTid.root} className={styles.root(theme)} />
     </CommonWrapper>
   );
 }
diff --git a/packages/react-ui/components/Modal/Modal.tsx b/packages/react-ui/components/Modal/Modal.tsx
index a1f1fbab657..654bdc4cab3 100644
--- a/packages/react-ui/components/Modal/Modal.tsx
+++ b/packages/react-ui/components/Modal/Modal.tsx
@@ -70,6 +70,12 @@ export interface ModalState {
   hasPanel: boolean;
 }
 
+export const modalDataTid = {
+  root: 'modal__root',
+  container: 'modal-container',
+  content: 'modal-content',
+};
+
 /**
  * Модальное окно
  *
@@ -189,7 +195,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
 
     return (
       <RenderContainer>
-        <CommonWrapper {...this.props}>
+        <CommonWrapper data-tid={modalDataTid.root} {...this.props}>
           <ZIndex priority={'Modal'} className={styles.root()}>
             <HideBodyVerticalScroll />
             {this.state.hasBackground && <div className={styles.bg(this.theme)} />}
@@ -199,7 +205,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
               onMouseDown={this.handleContainerMouseDown}
               onMouseUp={this.handleContainerMouseUp}
               onClick={this.handleContainerClick}
-              data-tid="modal-container"
+              data-tid={modalDataTid.container}
             >
               <ResponsiveLayout>
                 {({ isMobile }) => {
@@ -211,7 +217,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
                         [styles.alignTop()]: Boolean(this.props.alignTop),
                       })}
                       style={isMobile ? undefined : containerStyle}
-                      data-tid="modal-content"
+                      data-tid={modalDataTid.content}
                     >
                       <div
                         className={cx({ [styles.window(this.theme)]: true, [styles.mobileWindow()]: isMobile })}
diff --git a/packages/react-ui/components/Modal/ModalBody.tsx b/packages/react-ui/components/Modal/ModalBody.tsx
index f8ac55efec7..3fada6e9d55 100644
--- a/packages/react-ui/components/Modal/ModalBody.tsx
+++ b/packages/react-ui/components/Modal/ModalBody.tsx
@@ -20,6 +20,10 @@ export interface ModalBodyProps extends CommonProps {
   noPadding?: boolean;
 }
 
+export const modalBodyDataTid = {
+  root: 'ModalBody__root',
+};
+
 /**
  * Контейнер с отступами от края модалки
  *
@@ -55,7 +59,7 @@ export class ModalBody extends React.Component<ModalBodyProps> {
     return (
       <ModalContext.Consumer>
         {({ additionalPadding, hasHeader }) => (
-          <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+          <CommonWrapper data-tid={modalBodyDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
             <ZIndex
               priority={'ModalBody'}
               createStackingContext
diff --git a/packages/react-ui/components/Modal/ModalClose.tsx b/packages/react-ui/components/Modal/ModalClose.tsx
index 22ac2e538c2..e2a2a28a7e1 100644
--- a/packages/react-ui/components/Modal/ModalClose.tsx
+++ b/packages/react-ui/components/Modal/ModalClose.tsx
@@ -10,6 +10,10 @@ import { CommonWrapper } from '../../internal/CommonWrapper';
 import { CloseProps } from './ModalContext';
 import { styles } from './Modal.styles';
 
+export const modalCloseDataTid = {
+  close: 'modal-close',
+};
+
 export function ModalClose({ disableClose, requestClose, ...otherProps }: CloseProps) {
   const theme = useContext(ThemeContext);
   const [focusedByTab, setFocusedByTab] = React.useState(false);
@@ -42,7 +46,7 @@ export function ModalClose({ disableClose, requestClose, ...otherProps }: CloseP
             onClick={requestClose}
             onFocus={handleFocus}
             onBlur={handleBlur}
-            data-tid="modal-close"
+            data-tid={modalCloseDataTid.close}
             tabIndex={disableClose ? -1 : 0}
           >
             <CrossIcon />
diff --git a/packages/react-ui/components/Modal/ModalFooter.tsx b/packages/react-ui/components/Modal/ModalFooter.tsx
index 5abc7e39759..67461049738 100644
--- a/packages/react-ui/components/Modal/ModalFooter.tsx
+++ b/packages/react-ui/components/Modal/ModalFooter.tsx
@@ -20,6 +20,10 @@ export interface ModalFooterProps extends CommonProps {
   children?: ReactNode;
 }
 
+export const modalFooterDataTid = {
+  root: 'ModalFooter__root',
+};
+
 /**
  * Футер модального окна.
  *
@@ -45,6 +49,7 @@ function ModalFooter(props: ModalFooterProps) {
   const renderContent = (fixed = false) => {
     return (
       <div
+        data-tid={modalFooterDataTid.root}
         className={cx({
           [styles.footer(theme)]: true,
           [styles.fixedFooter(theme)]: fixed,
diff --git a/packages/react-ui/components/Modal/ModalHeader.tsx b/packages/react-ui/components/Modal/ModalHeader.tsx
index 723faef2636..b5a5510152a 100644
--- a/packages/react-ui/components/Modal/ModalHeader.tsx
+++ b/packages/react-ui/components/Modal/ModalHeader.tsx
@@ -15,6 +15,11 @@ export interface ModalHeaderProps extends CommonProps {
   sticky?: boolean;
   children?: ReactNode;
 }
+
+export const modalHeaderDataTid = {
+  root: 'ModalHeader__root',
+};
+
 /**
  * Шапка модального окна
  *
@@ -36,6 +41,7 @@ function ModalHeader(props: ModalHeaderProps) {
   const renderContent = (fixed = false) => {
     return (
       <div
+        data-tid={modalHeaderDataTid.root}
         className={cx({
           [styles.header(theme)]: true,
           [styles.mobileHeader(theme)]: layout.isMobile,
diff --git a/packages/react-ui/components/Paging/Paging.tsx b/packages/react-ui/components/Paging/Paging.tsx
index 2f4d3d268b1..4c7f815ef34 100644
--- a/packages/react-ui/components/Paging/Paging.tsx
+++ b/packages/react-ui/components/Paging/Paging.tsx
@@ -74,6 +74,14 @@ export interface PagingState {
 
 export type ItemType = number | '.' | 'forward';
 
+export const pagingDataTid = {
+  root: 'Paging__root',
+  dots: 'Paging__dots',
+  forwardLink: 'Paging__forwardLink',
+  pageLinkWrapper: 'Paging__pageLinkWrapper',
+  pageLink: 'Paging__pageLink',
+};
+
 @rootNode
 @locale('Paging', PagingLocaleHelper)
 export class Paging extends React.PureComponent<PagingProps, PagingState> {
@@ -83,7 +91,7 @@ export class Paging extends React.PureComponent<PagingProps, PagingState> {
     component: PagingDefaultComponent,
     shouldBeVisibleWithLessThanTwoPages: true,
     useGlobalListener: false,
-    ['data-tid']: 'Paging__root',
+    ['data-tid']: pagingDataTid.root,
   };
 
   public static propTypes = {};
@@ -185,7 +193,7 @@ export class Paging extends React.PureComponent<PagingProps, PagingState> {
 
   private renderDots = (key: string) => {
     return (
-      <span data-tid="Paging__dots" key={key} className={styles.dots(this.theme)}>
+      <span data-tid={pagingDataTid.dots} key={key} className={styles.dots(this.theme)}>
         {'...'}
       </span>
     );
@@ -203,7 +211,7 @@ export class Paging extends React.PureComponent<PagingProps, PagingState> {
     return (
       <Component
         key={'forward'}
-        data-tid="Paging__forwardLink"
+        data-tid={pagingDataTid.forwardLink}
         active={false}
         className={classes}
         onClick={disabled ? emptyHandler : this.goForward}
@@ -229,13 +237,13 @@ export class Paging extends React.PureComponent<PagingProps, PagingState> {
 
     return (
       <span
-        data-tid="Paging__pageLinkWrapper"
+        data-tid={pagingDataTid.pageLinkWrapper}
         key={pageNumber}
         className={styles.pageLinkWrapper()}
         onMouseDown={this.handleMouseDownPageLink}
       >
         <Component
-          data-tid="Paging__pageLink"
+          data-tid={pagingDataTid.pageLink}
           active={active}
           className={classes}
           onClick={handleClick}
diff --git a/packages/react-ui/components/PasswordInput/PasswordInput.tsx b/packages/react-ui/components/PasswordInput/PasswordInput.tsx
index 9511a058e05..e087fd792a0 100644
--- a/packages/react-ui/components/PasswordInput/PasswordInput.tsx
+++ b/packages/react-ui/components/PasswordInput/PasswordInput.tsx
@@ -24,6 +24,12 @@ export interface PasswordInputState {
   capsLockEnabled?: boolean | null;
 }
 
+export const passwordInputDataTid = {
+  root: 'PasswordInput',
+  capsLockDetector: 'PasswordInputCapsLockDetector',
+  eyeIcon: 'PasswordInputEyeIcon',
+};
+
 /**
  * Компонент для ввода пароля
  */
@@ -180,9 +186,11 @@ export class PasswordInput extends React.PureComponent<PasswordInputProps, Passw
 
     return (
       <span className={styles.iconWrapper()}>
-        {capsLockEnabled && <span className={styles.capsLockDetector()} data-tid="PasswordInputCapsLockDetector" />}
+        {capsLockEnabled && (
+          <span className={styles.capsLockDetector()} data-tid={passwordInputDataTid.capsLockDetector} />
+        )}
         <span
-          data-tid="PasswordInputEyeIcon"
+          data-tid={passwordInputDataTid.eyeIcon}
           className={cx(styles.toggleVisibility(this.theme), this.getEyeWrapperClassname())}
           onClick={this.handleToggleVisibility}
         >
@@ -207,7 +215,7 @@ export class PasswordInput extends React.PureComponent<PasswordInputProps, Passw
     };
 
     return (
-      <div className={styles.root()}>
+      <div data-tid={passwordInputDataTid.root} className={styles.root()}>
         <Input ref={this.refInput} type={this.state.visible ? 'text' : 'password'} {...inputProps} />
       </div>
     );
diff --git a/packages/react-ui/components/Radio/Radio.tsx b/packages/react-ui/components/Radio/Radio.tsx
index e5f20bc66ae..2c4d7a3c3ae 100644
--- a/packages/react-ui/components/Radio/Radio.tsx
+++ b/packages/react-ui/components/Radio/Radio.tsx
@@ -57,6 +57,10 @@ export interface RadioState {
   focusedByKeyboard: boolean;
 }
 
+export const radioDataTid = {
+  root: 'Radio__root',
+};
+
 /**
  * Радио-кнопки используются, когда может быть выбран только один вариант из нескольких.
  */
@@ -180,7 +184,7 @@ export class Radio<T> extends React.Component<RadioProps<T>, RadioState> {
     }
 
     return (
-      <label {...labelProps}>
+      <label data-tid={radioDataTid.root} {...labelProps}>
         <input {...inputProps} />
         <span {...radioProps}>
           <span className={styles.placeholder()} />
diff --git a/packages/react-ui/components/RadioGroup/RadioGroup.tsx b/packages/react-ui/components/RadioGroup/RadioGroup.tsx
index ad60b9c5b05..cb5b941f956 100644
--- a/packages/react-ui/components/RadioGroup/RadioGroup.tsx
+++ b/packages/react-ui/components/RadioGroup/RadioGroup.tsx
@@ -81,6 +81,10 @@ export interface RadioGroupState<T> {
   activeItem?: T;
 }
 
+export const radioGroupDataTid = {
+  root: 'RadioGroup__root',
+};
+
 /**
  *
  * `children` может содержать любую разметку с компонентами Radio,
@@ -163,7 +167,7 @@ export class RadioGroup<T> extends React.Component<RadioGroupProps<T>, RadioGrou
     };
 
     return (
-      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper data-tid={radioGroupDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
         <FocusTrap onBlur={onBlur}>
           <span ref={this.ref} style={style} className={styles.root()} {...handlers}>
             <RadioGroupContext.Provider value={this.getRadioGroupContextValue()}>
diff --git a/packages/react-ui/components/ResponsiveLayout/ResponsiveLayout.tsx b/packages/react-ui/components/ResponsiveLayout/ResponsiveLayout.tsx
index 06274ef1f60..8b74f441958 100644
--- a/packages/react-ui/components/ResponsiveLayout/ResponsiveLayout.tsx
+++ b/packages/react-ui/components/ResponsiveLayout/ResponsiveLayout.tsx
@@ -12,6 +12,10 @@ interface ResponsiveLayoutProps {
   children?: React.ReactNode | ((currentLayout: ResponsiveLayoutFlags) => React.ReactNode);
 }
 
+export const responsiveLayoutDataTid = {
+  root: 'ResponsiveLayout_root',
+};
+
 /**
  * Компонент для определения текущего лэйаута.
  */
@@ -26,7 +30,7 @@ export const ResponsiveLayout: React.FC<ResponsiveLayoutProps> = (props) => {
   }, [layoutFlags]);
 
   return (
-    <CommonWrapper {...props}>
+    <CommonWrapper data-tid={responsiveLayoutDataTid.root} {...props}>
       {isFunction(props.children) ? props.children(layoutFlags) ?? null : props.children ?? null}
     </CommonWrapper>
   );
diff --git a/packages/react-ui/components/ScrollContainer/ScrollContainer.tsx b/packages/react-ui/components/ScrollContainer/ScrollContainer.tsx
index ae0469fac4b..4cf7dc93f63 100644
--- a/packages/react-ui/components/ScrollContainer/ScrollContainer.tsx
+++ b/packages/react-ui/components/ScrollContainer/ScrollContainer.tsx
@@ -50,6 +50,11 @@ export interface ScrollContainerProps extends CommonProps {
   disabled?: boolean;
 }
 
+export const scrollContainerDataTid = {
+  root: 'ScrollContainer__root',
+  inner: 'ScrollContainer__inner',
+};
+
 @rootNode
 export class ScrollContainer extends React.Component<ScrollContainerProps> {
   public static __KONTUR_REACT_UI__ = 'ScrollContainer';
@@ -108,14 +113,19 @@ export class ScrollContainer extends React.Component<ScrollContainerProps> {
 
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-        <div className={styles.root()} onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}>
+        <div
+          data-tid={scrollContainerDataTid.root}
+          className={styles.root()}
+          onMouseMove={this.handleMouseMove}
+          onMouseLeave={this.handleMouseLeave}
+        >
           {scrollbarY}
           {scrollbarX}
           <div
             style={innerStyle}
             ref={this.refInner}
             className={cx(styles.inner(), globalClasses.inner, isIE11 && styles.innerIE11())}
-            data-tid="ScrollContainer__inner"
+            data-tid={scrollContainerDataTid.inner}
             onScroll={this.handleNativeScroll}
           >
             {props.children}
diff --git a/packages/react-ui/components/Select/Select.tsx b/packages/react-ui/components/Select/Select.tsx
index ead0b260aa3..3713995516c 100644
--- a/packages/react-ui/components/Select/Select.tsx
+++ b/packages/react-ui/components/Select/Select.tsx
@@ -58,6 +58,10 @@ const PASS_BUTTON_PROPS = {
   onMouseOver: true,
 };
 
+export const selectDataTid = {
+  root: 'Select__root',
+};
+
 type SelectItem<TValue, TItem> =
   | [TValue, TItem, React.ReactNode?]
   | TItem
@@ -307,7 +311,11 @@ export class Select<TValue = {}, TItem = {}> extends React.Component<SelectProps
     };
 
     const root = (
-      <span className={cx({ [styles.root()]: true, [styles.rootMobile(this.theme)]: isMobile })} style={style}>
+      <span
+        data-tid={selectDataTid.root}
+        className={cx({ [styles.root()]: true, [styles.rootMobile(this.theme)]: isMobile })}
+        style={style}
+      >
         {button}
         {this.getMenuRenderer()}
       </span>
diff --git a/packages/react-ui/components/SidePage/SidePage.tsx b/packages/react-ui/components/SidePage/SidePage.tsx
index 959c98044d3..8e1650c4c30 100644
--- a/packages/react-ui/components/SidePage/SidePage.tsx
+++ b/packages/react-ui/components/SidePage/SidePage.tsx
@@ -84,6 +84,11 @@ export interface SidePageState {
   hasPanel: boolean;
 }
 
+export const sidePageDataTid = {
+  root: 'SidePage__root',
+  container: 'SidePage__container',
+};
+
 const TRANSITION_TIMEOUT = 200;
 
 /**
@@ -196,7 +201,7 @@ export class SidePage extends React.Component<SidePageProps, SidePageState> {
     return (
       <ZIndex
         priority={'Sidepage'}
-        data-tid="SidePage__root"
+        data-tid={sidePageDataTid.root}
         className={cx({
           [styles.root()]: true,
           [styles.mobileRoot()]: isMobile,
@@ -217,7 +222,7 @@ export class SidePage extends React.Component<SidePageProps, SidePageState> {
         <FocusLock disabled={disableFocusLock || !blockBackground} autoFocus={false} className={styles.focusLock()}>
           <RenderLayer onClickOutside={this.handleClickOutside} active>
             <div
-              data-tid="SidePage__container"
+              data-tid={sidePageDataTid.container}
               className={cx(styles.wrapper(this.theme), {
                 [styles.wrapperLeft()]: fromLeft,
                 [styles.wrapperMarginLeft()]: this.state.hasMargin && fromLeft,
diff --git a/packages/react-ui/components/SidePage/SidePageBody.tsx b/packages/react-ui/components/SidePage/SidePageBody.tsx
index e1dc24bdea1..9921d171412 100644
--- a/packages/react-ui/components/SidePage/SidePageBody.tsx
+++ b/packages/react-ui/components/SidePage/SidePageBody.tsx
@@ -12,6 +12,10 @@ import { SidePageContext, SidePageContextType } from './SidePageContext';
 export interface SidePageBodyProps extends CommonProps {
   children?: React.ReactNode;
 }
+
+export const sidePageBodyDataTid = {
+  root: 'SidePageBody__root',
+};
 /**
  * Тело для сайдпейджа
  *
@@ -36,7 +40,7 @@ export class SidePageBody extends React.Component<SidePageBodyProps> {
       <ThemeContext.Consumer>
         {(theme) => {
           return (
-            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+            <CommonWrapper data-tid={sidePageBodyDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
               <div className={cx(styles.body(theme), { [styles.mobileBody()]: this.isMobileLayout })}>
                 {this.props.children}
               </div>
diff --git a/packages/react-ui/components/SidePage/SidePageContainer.tsx b/packages/react-ui/components/SidePage/SidePageContainer.tsx
index ab64584f877..e7a90cd9508 100644
--- a/packages/react-ui/components/SidePage/SidePageContainer.tsx
+++ b/packages/react-ui/components/SidePage/SidePageContainer.tsx
@@ -12,6 +12,10 @@ import { SidePageContext } from './SidePageContext';
 
 export type SidePageContainerProps = CommonProps;
 
+export const sidePageContainerDataTid = {
+  root: 'SidePageContainer__root',
+};
+
 /**
  * Контейнер с отступами
  *
@@ -41,7 +45,7 @@ export class SidePageContainer extends React.Component<SidePageContainerProps> {
     return (
       <SidePageContext.Consumer>
         {({ hasHeader, hasFooter, hasPanel }) => (
-          <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+          <CommonWrapper data-tid={sidePageContainerDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
             <div
               className={cx({
                 [styles.container(this.theme)]: true,
diff --git a/packages/react-ui/components/SidePage/SidePageFooter.tsx b/packages/react-ui/components/SidePage/SidePageFooter.tsx
index a3721a356d0..6ed02c1c221 100644
--- a/packages/react-ui/components/SidePage/SidePageFooter.tsx
+++ b/packages/react-ui/components/SidePage/SidePageFooter.tsx
@@ -21,6 +21,10 @@ export interface SidePageFooterProps extends CommonProps {
   sticky?: boolean;
 }
 
+export const sidePageFooterDataTid = {
+  root: 'SidePageFooter__root',
+};
+
 /**
  * Футер сайдпейджа.
  *
@@ -94,7 +98,7 @@ export class SidePageFooter extends React.Component<SidePageFooterProps> {
 
   private renderMain() {
     return (
-      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper data-tid={sidePageFooterDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
         <div style={{ height: this.getContentHeight() }} className={styles.footerWrapper()}>
           <SidePageContext.Consumer>
             {({ getWidth }) => (
diff --git a/packages/react-ui/components/SidePage/SidePageHeader.tsx b/packages/react-ui/components/SidePage/SidePageHeader.tsx
index ff216c42673..33546557a25 100644
--- a/packages/react-ui/components/SidePage/SidePageHeader.tsx
+++ b/packages/react-ui/components/SidePage/SidePageHeader.tsx
@@ -25,6 +25,11 @@ export interface SidePageHeaderState {
   focusedByTab: boolean;
 }
 
+export const sidePageHeaderDataTid = {
+  root: 'SidePageHeader__root',
+  close: 'SidePage__close',
+};
+
 /**
  * Шапка сайдпейджа
  *
@@ -114,7 +119,7 @@ export class SidePageHeader extends React.Component<SidePageHeaderProps, SidePag
     const isStickyMobile = this.isMobileLayout && this.getStickyProp();
 
     return (
-      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper data-tid={sidePageHeaderDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
         <div ref={this.wrapperRef} className={styles.headerWrapper()}>
           {isStickyDesktop || isStickyMobile ? (
             <Sticky ref={this.stickyRef} side="top">
@@ -179,7 +184,7 @@ export class SidePageHeader extends React.Component<SidePageHeaderProps, SidePag
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
           onClick={requestClose}
-          data-tid="SidePage__close"
+          data-tid={sidePageHeaderDataTid.close}
           tabIndex={0}
         >
           <CrossIcon />
diff --git a/packages/react-ui/components/Spinner/Spinner.tsx b/packages/react-ui/components/Spinner/Spinner.tsx
index e519583a0cd..b2607e9b916 100644
--- a/packages/react-ui/components/Spinner/Spinner.tsx
+++ b/packages/react-ui/components/Spinner/Spinner.tsx
@@ -39,6 +39,10 @@ export interface SpinnerProps extends CommonProps {
   color?: React.CSSProperties['color'];
 }
 
+export const spinnerDataTid = {
+  root: 'Spinner__root',
+};
+
 /**
  * DRAFT - инлайн-лоадер
  */
@@ -96,7 +100,7 @@ export class Spinner extends React.Component<SpinnerProps> {
     const { type, caption = this.locale.loading, dimmed, inline } = this.props;
 
     return (
-      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper data-tid={spinnerDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
         <div className={styles.spinner()}>
           <span className={styles.inner()}>{this.renderSpinner(type, dimmed, inline)}</span>
           {caption && this.renderCaption(type, caption)}
diff --git a/packages/react-ui/components/Sticky/Sticky.tsx b/packages/react-ui/components/Sticky/Sticky.tsx
index b1c8b8bfd74..11f2758ec38 100644
--- a/packages/react-ui/components/Sticky/Sticky.tsx
+++ b/packages/react-ui/components/Sticky/Sticky.tsx
@@ -36,6 +36,10 @@ export interface StickyState {
   relativeTop: number;
 }
 
+export const stickyDataTid = {
+  root: 'Spinner__root',
+};
+
 @rootNode
 export class Sticky extends React.Component<StickyProps, StickyState> {
   public static __KONTUR_REACT_UI__ = 'Sticky';
@@ -116,7 +120,7 @@ export class Sticky extends React.Component<StickyProps, StickyState> {
     }
 
     return (
-      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper data-tid={stickyDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
         <div ref={this.refWrapper} className={styles.wrapper()}>
           <ZIndex
             priority="Sticky"
diff --git a/packages/react-ui/components/Switcher/Switcher.tsx b/packages/react-ui/components/Switcher/Switcher.tsx
index d98432a2aed..5aab8d4ab94 100644
--- a/packages/react-ui/components/Switcher/Switcher.tsx
+++ b/packages/react-ui/components/Switcher/Switcher.tsx
@@ -17,6 +17,10 @@ import { getSwitcherTheme } from './switcherTheme';
 export type SwitcherSize = ButtonSize;
 type SwitcherItems = string | SwitcherItem;
 
+export const switcherDataTid = {
+  root: 'Switcher__root',
+};
+
 export interface SwitcherProps extends CommonProps {
   /**
    * Список строк или список элементов типа `{ label: string, value: string }`
@@ -101,7 +105,7 @@ export class Switcher extends React.Component<SwitcherProps, SwitcherState> {
     const captionClassName = cx(styles.caption(this.theme), this.getLabelSizeClassName());
 
     return (
-      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper data-tid={switcherDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
         <div className={styles.root()}>
           {this.props.caption ? <div className={captionClassName}>{this.props.caption}</div> : null}
           <div className={styles.wrap()}>
diff --git a/packages/react-ui/components/Tabs/Indicator.tsx b/packages/react-ui/components/Tabs/Indicator.tsx
index 0bdb4bff97f..8c8937a916f 100644
--- a/packages/react-ui/components/Tabs/Indicator.tsx
+++ b/packages/react-ui/components/Tabs/Indicator.tsx
@@ -25,6 +25,10 @@ export interface IndicatorState {
   styles: React.CSSProperties;
 }
 
+export const indicatorDataTid = {
+  root: 'Indicator__root',
+};
+
 @rootNode
 export class Indicator extends React.Component<IndicatorProps, IndicatorState> {
   public static contextType = TabsContext;
@@ -87,6 +91,7 @@ export class Indicator extends React.Component<IndicatorProps, IndicatorState> {
     };
     return (
       <div
+        data-tid={indicatorDataTid.root}
         className={cx(
           styles.root(this.theme),
           indicators.primary && styles.primary(this.theme),
diff --git a/packages/react-ui/components/Tabs/Tab.tsx b/packages/react-ui/components/Tabs/Tab.tsx
index 2e52126def8..86e54d8a65c 100644
--- a/packages/react-ui/components/Tabs/Tab.tsx
+++ b/packages/react-ui/components/Tabs/Tab.tsx
@@ -24,6 +24,10 @@ export interface TabIndicators {
   disabled: boolean;
 }
 
+export const tabDataTid = {
+  root: 'Tab__root',
+};
+
 export interface TabProps<T extends string = string> extends CommonProps {
   /**
    * Tab content
@@ -204,7 +208,7 @@ export class Tab<T extends string = string> extends React.Component<TabProps<T>,
     const orientationStyles = isVertical ? verticalStyles : horizontalStyles;
 
     return (
-      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper data-tid={tabDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
         <Component
           className={cx({
             [styles.root(this.theme)]: true,
diff --git a/packages/react-ui/components/Tabs/Tabs.tsx b/packages/react-ui/components/Tabs/Tabs.tsx
index deedf052a3b..97835fe040e 100644
--- a/packages/react-ui/components/Tabs/Tabs.tsx
+++ b/packages/react-ui/components/Tabs/Tabs.tsx
@@ -53,6 +53,10 @@ export interface TabsProps<T extends ValueBaseType = string> extends CommonProps
   width?: number | string;
 }
 
+export const tabsDataTid = {
+  root: 'Tabs__root',
+};
+
 /**
  * Tabs wrapper
  *
@@ -99,7 +103,7 @@ export class Tabs<T extends string = string> extends React.Component<TabsProps<T
         {(theme) => {
           this.theme = theme;
           return (
-            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+            <CommonWrapper data-tid={tabsDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
               <div className={cx(styles.root(this.theme), vertical && styles.vertical())} style={{ width }}>
                 <TabsContext.Provider
                   value={{
diff --git a/packages/react-ui/components/Textarea/Textarea.tsx b/packages/react-ui/components/Textarea/Textarea.tsx
index e28ab45d799..54cde7c3cf7 100644
--- a/packages/react-ui/components/Textarea/Textarea.tsx
+++ b/packages/react-ui/components/Textarea/Textarea.tsx
@@ -111,6 +111,10 @@ export interface TextareaState {
   isCounterVisible: boolean;
 }
 
+export const textareaDataTid = {
+  root: 'Textarea__root',
+};
+
 /**
  * Компонент для ввода многострочного текста.
  *
@@ -391,7 +395,7 @@ export class Textarea extends React.Component<TextareaProps, TextareaState> {
         onClickOutside={this.handleCloseCounterHelp}
         active={this.state.isCounterVisible}
       >
-        <label {...rootProps} className={styles.root(this.theme)}>
+        <label data-tid={textareaDataTid.root} {...rootProps} className={styles.root(this.theme)}>
           {placeholderPolyfill}
           <ResizeDetector onResize={this.reflowCounter}>
             <textarea
diff --git a/packages/react-ui/components/Textarea/TextareaCounter.tsx b/packages/react-ui/components/Textarea/TextareaCounter.tsx
index a55ef211f8e..5ee9b437b79 100644
--- a/packages/react-ui/components/Textarea/TextareaCounter.tsx
+++ b/packages/react-ui/components/Textarea/TextareaCounter.tsx
@@ -22,6 +22,10 @@ export interface TextareaCounterRef {
   reflow: () => void;
 }
 
+export const textareaCounterDataTid = {
+  root: 'TextareaCounter__root',
+};
+
 const handleHelpMouseDown = (e: SyntheticEvent) => e.preventDefault();
 
 export const TextareaCounter = React.forwardRef<TextareaCounterRef, TextareaCounterProps>(function TextareaCounter(
@@ -49,7 +53,7 @@ export const TextareaCounter = React.forwardRef<TextareaCounterRef, TextareaCoun
   );
 
   return (
-    <div className={styles.counterContainer(theme)} style={{ width, height }}>
+    <div data-tid={textareaCounterDataTid.root} className={styles.counterContainer(theme)} style={{ width, height }}>
       <span
         className={cx(styles.counter(theme), {
           [styles.counterError(theme)]: counterValue < 0,
diff --git a/packages/react-ui/components/Toast/Toast.tsx b/packages/react-ui/components/Toast/Toast.tsx
index f20bd86bb2d..3311ce6ec36 100644
--- a/packages/react-ui/components/Toast/Toast.tsx
+++ b/packages/react-ui/components/Toast/Toast.tsx
@@ -27,6 +27,10 @@ export interface ToastProps extends CommonProps {
   onClose?: (notification: string, action?: Action) => void;
 }
 
+export const toastDataTid = {
+  root: 'Toast__root',
+};
+
 /**
  * Показывает уведомления.
  *
@@ -134,7 +138,7 @@ export class Toast extends React.Component<ToastProps, ToastState> {
         exit={!isTestEnv}
         nodeRef={this.rootRef}
       >
-        <CommonWrapper rootNodeRef={this.setRootRef} {...this.props}>
+        <CommonWrapper data-tid={toastDataTid.root} rootNodeRef={this.setRootRef} {...this.props}>
           <ToastView ref={this._refToast} {...toastProps} />
         </CommonWrapper>
       </CSSTransition>
diff --git a/packages/react-ui/components/Toast/ToastStatic.tsx b/packages/react-ui/components/Toast/ToastStatic.tsx
index 3e1e9d0492a..e9e1898d246 100644
--- a/packages/react-ui/components/Toast/ToastStatic.tsx
+++ b/packages/react-ui/components/Toast/ToastStatic.tsx
@@ -5,6 +5,10 @@ import { Nullable } from '../../typings/utility-types';
 
 import { Toast, Action } from './Toast';
 
+export const toastStaticDataTid = {
+  root: 'StaticToast',
+};
+
 export class ToastStatic {
   public static push = (notification: string, action?: Action) => {
     if (!ToastStatic.node) {
@@ -16,7 +20,7 @@ export class ToastStatic {
       body.appendChild(ToastStatic.node);
 
       ReactDOM.render(
-        <Toast data-tid="StaticToast" ref={(el) => (ToastStatic.instance = el)} />,
+        <Toast data-tid={toastStaticDataTid.root} ref={(el) => (ToastStatic.instance = el)} />,
         ToastStatic.node,
         () => ToastStatic._push(notification, action),
       );
diff --git a/packages/react-ui/components/Toast/ToastView.tsx b/packages/react-ui/components/Toast/ToastView.tsx
index 6124eed4f6b..7c88c139827 100644
--- a/packages/react-ui/components/Toast/ToastView.tsx
+++ b/packages/react-ui/components/Toast/ToastView.tsx
@@ -27,6 +27,12 @@ export interface ToastViewProps extends CommonProps {
   onMouseLeave?: () => void;
 }
 
+export const toastViewDataTid = {
+  root: 'ToastView__root',
+  action: 'ToastView__action',
+  close: 'ToastView__close',
+};
+
 @rootNode
 export class ToastView extends React.Component<ToastViewProps> {
   public static propTypes = {
@@ -62,14 +68,14 @@ export class ToastView extends React.Component<ToastViewProps> {
     const { action, onClose, ...rest } = props;
 
     const link = action ? (
-      <span data-tid="ToastView__action" className={styles.link(this.theme)} onClick={action.handler}>
+      <span data-tid={toastViewDataTid.action} className={styles.link(this.theme)} onClick={action.handler}>
         {action.label}
       </span>
     ) : null;
 
     const close = action ? (
       <span className={styles.closeWrapper(this.theme)}>
-        <span data-tid="ToastView__close" className={styles.close(this.theme)} onClick={onClose}>
+        <span data-tid={toastViewDataTid.close} className={styles.close(this.theme)} onClick={onClose}>
           <CrossIcon />
         </span>
       </span>
@@ -77,7 +83,7 @@ export class ToastView extends React.Component<ToastViewProps> {
 
     return (
       <ZIndex priority="Toast" className={styles.wrapper(this.theme)}>
-        <div data-tid="ToastView__root" {...rest} className={styles.root(this.theme)} ref={this.setRootNode}>
+        <div data-tid={toastViewDataTid.root} {...rest} className={styles.root(this.theme)} ref={this.setRootNode}>
           <span>{this.props.children}</span>
           {link}
           {close}
diff --git a/packages/react-ui/components/Toggle/Toggle.tsx b/packages/react-ui/components/Toggle/Toggle.tsx
index 128cb582955..2dc33446feb 100644
--- a/packages/react-ui/components/Toggle/Toggle.tsx
+++ b/packages/react-ui/components/Toggle/Toggle.tsx
@@ -82,6 +82,10 @@ export interface ToggleState {
   focusByTab?: boolean;
 }
 
+export const toggleDataTid = {
+  root: 'Toggle__root',
+};
+
 /**
  * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
  */
@@ -180,7 +184,7 @@ export class Toggle extends React.Component<ToggleProps, ToggleState> {
     }
 
     return (
-      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper data-tid={toggleDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
         <label className={labelClassNames}>
           <div
             className={cx(styles.button(this.theme), {
diff --git a/packages/react-ui/components/Token/Token.tsx b/packages/react-ui/components/Token/Token.tsx
index bf24c748701..b77a4a6a69d 100644
--- a/packages/react-ui/components/Token/Token.tsx
+++ b/packages/react-ui/components/Token/Token.tsx
@@ -39,6 +39,10 @@ export interface TokenProps extends CommonProps {
   onBlur?: React.FocusEventHandler<HTMLDivElement>;
 }
 
+export const tokenDataTid = {
+  root: 'Token__root',
+};
+
 @rootNode
 export class Token extends React.Component<TokenProps> {
   public static __KONTUR_REACT_UI__ = 'Token';
@@ -96,7 +100,7 @@ export class Token extends React.Component<TokenProps> {
     });
 
     return (
-      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper data-tid={tokenDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
         <div
           className={tokenClassNames}
           onClick={onClick}
diff --git a/packages/react-ui/components/TokenInput/TokenInput.tsx b/packages/react-ui/components/TokenInput/TokenInput.tsx
index 1e81a1faac0..fdd5c69c08b 100644
--- a/packages/react-ui/components/TokenInput/TokenInput.tsx
+++ b/packages/react-ui/components/TokenInput/TokenInput.tsx
@@ -151,6 +151,10 @@ export const DefaultState = {
   inputValueHeight: 22,
 };
 
+export const tokenInputDataTid = {
+  root: 'TokenInput__root',
+};
+
 const defaultToKey = <T extends {}>(item: T): string => item.toString();
 const identity = <T extends {}>(item: T): T => item;
 const defaultRenderToken = <T extends {}>(
@@ -323,7 +327,7 @@ export class TokenInput<T = string> extends React.PureComponent<TokenInputProps<
     });
 
     return (
-      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper data-tid={tokenInputDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
         <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
           <label
             ref={this.wrapperRef}
diff --git a/packages/react-ui/components/TokenInput/TokenInputMenu.tsx b/packages/react-ui/components/TokenInput/TokenInputMenu.tsx
index 678236c2948..f2c0bcded64 100644
--- a/packages/react-ui/components/TokenInput/TokenInputMenu.tsx
+++ b/packages/react-ui/components/TokenInput/TokenInputMenu.tsx
@@ -15,6 +15,10 @@ export interface TokenInputMenuProps<T> extends ComboBoxMenuProps<T> {
   menuAlign: TokenInputMenuAlign;
 }
 
+export const tokenInputMenuDataTid = {
+  root: 'TokenInputMenu__root',
+};
+
 export class TokenInputMenu<T = string> extends React.Component<TokenInputMenuProps<T>> {
   public static __KONTUR_REACT_UI__ = 'TokenInputMenu';
 
@@ -65,6 +69,7 @@ export class TokenInputMenu<T = string> extends React.Component<TokenInputMenuPr
 
     return (
       <Popup
+        data-tid={tokenInputMenuDataTid.root}
         opened={opened!}
         positions={['bottom left', 'top left']}
         anchorElement={anchorElement}
diff --git a/packages/react-ui/components/Tooltip/Tooltip.tsx b/packages/react-ui/components/Tooltip/Tooltip.tsx
index 97f6ce15c46..a26b2a56b2e 100644
--- a/packages/react-ui/components/Tooltip/Tooltip.tsx
+++ b/packages/react-ui/components/Tooltip/Tooltip.tsx
@@ -134,6 +134,10 @@ export interface TooltipState {
   focused: boolean;
 }
 
+export const tooltipDataTid = {
+  root: 'Tooltip__root',
+};
+
 const Positions: PopupPositionsType[] = [
   'right bottom',
   'right middle',
@@ -323,7 +327,7 @@ export class Tooltip extends React.PureComponent<TooltipProps, TooltipState> imp
     content: JSX.Element | null,
   ) {
     return (
-      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper data-tid={tooltipDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
         <Popup
           anchorElement={anchorElement}
           hasPin
diff --git a/packages/react-ui/components/TooltipMenu/TooltipMenu.tsx b/packages/react-ui/components/TooltipMenu/TooltipMenu.tsx
index 8edb3aa4e35..7d593feaa43 100644
--- a/packages/react-ui/components/TooltipMenu/TooltipMenu.tsx
+++ b/packages/react-ui/components/TooltipMenu/TooltipMenu.tsx
@@ -50,6 +50,10 @@ export interface TooltipMenuProps extends CommonProps {
   disableAnimations: boolean;
 }
 
+export const tooltipMenuDataTid = {
+  root: 'TooltipMenu__root',
+};
+
 /**
  * Меню, раскрывающееся по клику на переданный в `caption` элемент.
  *
@@ -106,7 +110,7 @@ export class TooltipMenu extends React.Component<TooltipMenuProps> {
     }
 
     return (
-      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper data-tid={tooltipMenuDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
         <PopupMenu
           menuMaxHeight={this.props.menuMaxHeight}
           menuWidth={this.props.menuWidth}
diff --git a/packages/react-ui/internal/Calendar/Calendar.tsx b/packages/react-ui/internal/Calendar/Calendar.tsx
index 836cc7116d6..172f379b6f7 100644
--- a/packages/react-ui/internal/Calendar/Calendar.tsx
+++ b/packages/react-ui/internal/Calendar/Calendar.tsx
@@ -36,6 +36,10 @@ export interface CalendarState {
   touchStart: number;
 }
 
+export const calendarDataTid = {
+  root: 'Calendar',
+};
+
 const getTodayDate = () => {
   const date = new Date();
   return {
@@ -212,7 +216,7 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
     const positions = this.getMonthPositions();
     const wrapperStyle = { height: themeConfig(this.theme).WRAPPER_HEIGHT };
     return (
-      <div ref={this.refRoot} className={styles.root(this.theme)} data-tid="Calendar">
+      <div ref={this.refRoot} className={styles.root(this.theme)} data-tid={calendarDataTid.root}>
         <div style={wrapperStyle} className={styles.wrapper()}>
           {this.state.months
             .map<[number, MonthViewModel]>((x, i) => [positions[i], x])
@@ -277,12 +281,8 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
 
   private executeAnimations = (pixelY: number) => {
     this.setState(({ months, scrollPosition }) => {
-      const targetPosition = CalendarUtils.calculateScrollPosition(
-        months,
-        scrollPosition,
-        pixelY,
-        this.theme,
-      ).scrollPosition;
+      const targetPosition = CalendarUtils.calculateScrollPosition(months, scrollPosition, pixelY, this.theme)
+        .scrollPosition;
       return { scrollTarget: targetPosition };
     }, this.handleWheelEnd);
 
diff --git a/packages/react-ui/internal/Calendar/MonthView.tsx b/packages/react-ui/internal/Calendar/MonthView.tsx
index d243d9bcdf0..e86cab993c4 100644
--- a/packages/react-ui/internal/Calendar/MonthView.tsx
+++ b/packages/react-ui/internal/Calendar/MonthView.tsx
@@ -26,6 +26,12 @@ interface MonthViewProps {
   yearSelectRef: (select: DateSelect | null) => void;
 }
 
+export const monthViewDataTid = {
+  month: 'MonthView__month',
+  headerMonth: 'MonthView__headerMonth',
+  headerYear: 'MonthView__headerYear',
+};
+
 export function MonthView(props: MonthViewProps) {
   const theme = useContext(ThemeContext);
 
@@ -78,7 +84,7 @@ export function MonthView(props: MonthViewProps) {
   };
 
   return (
-    <div data-tid="MonthView__month" className={styles.month(theme)} style={{ top }} key={month + '-' + year}>
+    <div data-tid={monthViewDataTid.month} className={styles.month(theme)} style={{ top }} key={month + '-' + year}>
       <div
         style={{ top: headerTop }}
         className={cx({
@@ -87,7 +93,7 @@ export function MonthView(props: MonthViewProps) {
         })}
       >
         <div style={{ borderBottomColor }} className={styles.monthTitle(theme)}>
-          <div data-tid="MonthView__headerMonth" className={styles.headerMonth(theme)}>
+          <div data-tid={monthViewDataTid.headerMonth} className={styles.headerMonth(theme)}>
             <DateSelect
               disabled={monthSelectDisabled}
               width={85}
@@ -100,7 +106,7 @@ export function MonthView(props: MonthViewProps) {
             />
           </div>
           {isYearVisible && (
-            <div data-tid="MonthView__headerYear" className={styles.headerYear(theme)} style={{ top: yearTop }}>
+            <div data-tid={monthViewDataTid.headerYear} className={styles.headerYear(theme)} style={{ top: yearTop }}>
               <DateSelect
                 disabled={yearSelectDisabled}
                 width={50}
diff --git a/packages/react-ui/internal/CustomComboBox/ComboBoxMenu.tsx b/packages/react-ui/internal/CustomComboBox/ComboBoxMenu.tsx
index 4fd358a3aec..8a39cbf1de0 100644
--- a/packages/react-ui/internal/CustomComboBox/ComboBoxMenu.tsx
+++ b/packages/react-ui/internal/CustomComboBox/ComboBoxMenu.tsx
@@ -28,6 +28,14 @@ export interface ComboBoxMenuProps<T> {
   isMobile?: boolean;
 }
 
+export const comboBoxMenuDataTid = {
+  loading: 'ComboBoxMenu__loading',
+  failed: 'ComboBoxMenu__failed',
+  notFound: 'ComboBoxMenu__notFound',
+  items: 'ComboBoxMenu__items',
+  item: 'ComboBoxMenu__item',
+};
+
 @locale('ComboBox', CustomComboBoxLocaleHelper)
 export class ComboBoxMenu<T> extends Component<ComboBoxMenuProps<T>> {
   public static __KONTUR_REACT_UI__ = 'ComboBoxMenu';
@@ -68,7 +76,12 @@ export class ComboBoxMenu<T> extends Component<ComboBoxMenuProps<T>> {
 
     if (loading && (!items || !items.length)) {
       return (
-        <Menu maxHeight={maxHeight} ref={refMenu} disableScrollContainer={isMobile} data-tid="ComboBoxMenu__loading">
+        <Menu
+          maxHeight={maxHeight}
+          ref={refMenu}
+          disableScrollContainer={isMobile}
+          data-tid={comboBoxMenuDataTid.loading}
+        >
           <MenuItem disabled isMobile={isMobile}>
             <Spinner type="mini" dimmed />
           </MenuItem>
@@ -78,7 +91,12 @@ export class ComboBoxMenu<T> extends Component<ComboBoxMenuProps<T>> {
 
     if (items === null && requestStatus === ComboBoxRequestStatus.Failed) {
       return (
-        <Menu ref={refMenu} maxHeight={maxHeight} disableScrollContainer={isMobile} data-tid="ComboBoxMenu__failed">
+        <Menu
+          ref={refMenu}
+          maxHeight={maxHeight}
+          disableScrollContainer={isMobile}
+          data-tid={comboBoxMenuDataTid.failed}
+        >
           <MenuItem disabled key="message" isMobile={isMobile}>
             <div style={{ maxWidth: 300, whiteSpace: 'normal' }}>{errorNetworkMessage}</div>
           </MenuItem>
@@ -100,7 +118,7 @@ export class ComboBoxMenu<T> extends Component<ComboBoxMenuProps<T>> {
       if (notFoundValue)
         return (
           <Menu maxHeight={maxHeight} ref={refMenu} disableScrollContainer={isMobile}>
-            <MenuItem data-tid="ComboBoxMenu__notFound" disabled isMobile={isMobile}>
+            <MenuItem data-tid={comboBoxMenuDataTid.notFound} disabled isMobile={isMobile}>
               {notFoundValue}
             </MenuItem>
           </Menu>
@@ -122,7 +140,7 @@ export class ComboBoxMenu<T> extends Component<ComboBoxMenuProps<T>> {
     }
 
     return (
-      <Menu data-tid="ComboBoxMenu__items" ref={refMenu} maxHeight={maxHeight} disableScrollContainer={isMobile}>
+      <Menu data-tid={comboBoxMenuDataTid.items} ref={refMenu} maxHeight={maxHeight} disableScrollContainer={isMobile}>
         {renderedItems}
         {total}
         {renderAddButton && [<MenuSeparator key="separator" />, renderAddButton]}
@@ -149,7 +167,7 @@ export class ComboBoxMenu<T> extends Component<ComboBoxMenuProps<T>> {
 
     return (
       <MenuItem
-        data-tid="ComboBoxMenu__item"
+        data-tid={comboBoxMenuDataTid.item}
         onClick={() => onValueChange(item)}
         key={index}
         isMobile={this.props.isMobile}
diff --git a/packages/react-ui/internal/DateSelect/DateSelect.tsx b/packages/react-ui/internal/DateSelect/DateSelect.tsx
index 5b13636784f..63e995d3019 100644
--- a/packages/react-ui/internal/DateSelect/DateSelect.tsx
+++ b/packages/react-ui/internal/DateSelect/DateSelect.tsx
@@ -45,6 +45,11 @@ export interface DateSelectState {
   nodeTop: number;
 }
 
+export const dateSelectDataTid = {
+  caption: 'DateSelect__caption',
+  menuItem: 'DateSelect__menuItem',
+};
+
 @locale('DatePicker', DatePickerLocaleHelper)
 export class DateSelect extends React.PureComponent<DateSelectProps, DateSelectState> {
   public static __KONTUR_REACT_UI__ = 'DateSelect';
@@ -173,7 +178,7 @@ export class DateSelect extends React.PureComponent<DateSelectProps, DateSelectS
     };
     return (
       <span {...rootProps}>
-        <div data-tid="DateSelect__caption" className={styles.caption()} onClick={this.open}>
+        <div data-tid={dateSelectDataTid.caption} className={styles.caption()} onClick={this.open}>
           {this.getItem(0)}
           <div
             className={cx({
@@ -247,7 +252,7 @@ export class DateSelect extends React.PureComponent<DateSelectProps, DateSelectS
       };
       items.push(
         <div
-          data-tid="DateSelect__menuItem"
+          data-tid={dateSelectDataTid.menuItem}
           data-prop-disabled={disableItems}
           key={i}
           className={className}
diff --git a/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx b/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx
index 73842194865..5fc7a1e0dc9 100644
--- a/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx
+++ b/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx
@@ -25,6 +25,14 @@ interface FileUploaderFileProps {
   error?: boolean;
 }
 
+export const fileUploaderFileDataTid = {
+  file: 'FileUploader__file',
+  fileTooltip: 'FileUploader__fileTooltip',
+  fileName: 'FileUploader__fileName',
+  fileSize: 'FileUploader__fileSize',
+  fileIcon: 'FileUploader__fileIcon',
+};
+
 const getTruncatedName = (fileNameWidth: number, fileNameElementWidth: number, name: string) => {
   if (!fileNameWidth && !fileNameElementWidth) {
     return null;
@@ -151,27 +159,27 @@ export const FileUploaderFile = (props: FileUploaderFileProps) => {
 
   return (
     <div
-      data-tid="FileUploader__file"
+      data-tid={fileUploaderFileDataTid.file}
       className={jsStyles.root()}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
-      <Tooltip data-tid="FileUploader__fileTooltip" pos="right middle" render={renderTooltipContent}>
+      <Tooltip data-tid={fileUploaderFileDataTid.fileTooltip} pos="right middle" render={renderTooltipContent}>
         <div className={contentClassNames}>
           <TextWidthHelper ref={textHelperRef} text={name} />
           <Hint maxWidth={'100%'} text={isTruncated ? name : null}>
-            <span data-tid="FileUploader__fileName" ref={fileNameElementRef} className={jsStyles.name()}>
+            <span data-tid={fileUploaderFileDataTid.fileName} ref={fileNameElementRef} className={jsStyles.name()}>
               {truncatedFileName}
             </span>
           </Hint>
           {!!showSize && formattedSize && (
-            <span data-tid="FileUploader__fileSize" className={jsStyles.size()}>
+            <span data-tid={fileUploaderFileDataTid.fileSize} className={jsStyles.size()}>
               {formattedSize}
             </span>
           )}
           <div
             className={iconClassNames}
-            data-tid="FileUploader__fileIcon"
+            data-tid={fileUploaderFileDataTid.fileIcon}
             tabIndex={0}
             onClick={handleRemove}
             onFocus={handleFocus}
diff --git a/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx b/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx
index cfea108e465..461ea5be51b 100644
--- a/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx
+++ b/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx
@@ -11,13 +11,17 @@ interface FileUploaderFileListProps {
   renderFile: (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => React.ReactNode;
 }
 
+export const fileUploaderFileListDataTid = {
+  fileList: 'FileUploader__fileList',
+};
+
 export const FileUploaderFileList = (props: FileUploaderFileListProps) => {
   const { renderFile } = props;
   const { files } = useContext(FileUploaderControlContext);
   const theme = useContext(ThemeContext);
 
   return (
-    <div data-tid="FileUploader__fileList">
+    <div data-tid={fileUploaderFileListDataTid.fileList}>
       {files.map((file) => (
         <div key={file.id} className={jsStyles.fileWrapper(theme)}>
           <div className={jsStyles.file()}>{renderFile(file, <FileUploaderFile file={file} showSize />)}</div>
diff --git a/packages/react-ui/internal/InputLikeText/InputLikeText.tsx b/packages/react-ui/internal/InputLikeText/InputLikeText.tsx
index b80aa9855af..075b2da8cab 100644
--- a/packages/react-ui/internal/InputLikeText/InputLikeText.tsx
+++ b/packages/react-ui/internal/InputLikeText/InputLikeText.tsx
@@ -30,6 +30,11 @@ export interface InputLikeTextProps extends CommonProps, InputProps {
 
 export type InputLikeTextState = Omit<InputState, 'needsPolyfillPlaceholder'>;
 
+export const inputLikeTextDataTid = {
+  root: 'InputLikeText__root',
+  input: 'InputLikeText__input',
+};
+
 @rootNode
 export class InputLikeText extends React.Component<InputLikeTextProps, InputLikeTextState> {
   public static __KONTUR_REACT_UI__ = 'InputLikeText';
@@ -182,6 +187,7 @@ export class InputLikeText extends React.Component<InputLikeTextProps, InputLike
 
     return (
       <span
+        data-tid={inputLikeTextDataTid.root}
         {...rest}
         className={className}
         style={{ width, textAlign: align }}
@@ -196,7 +202,7 @@ export class InputLikeText extends React.Component<InputLikeTextProps, InputLike
         {leftSide}
         <span className={wrapperClass}>
           <span
-            data-tid="InputLikeText__input"
+            data-tid={inputLikeTextDataTid.input}
             className={cx(jsInputStyles.input(this.theme), {
               [styles.absolute()]: !takeContentWidth,
               [jsInputStyles.inputFocus(this.theme)]: focused,
diff --git a/packages/react-ui/internal/InternalMenu/InternalMenu.tsx b/packages/react-ui/internal/InternalMenu/InternalMenu.tsx
index 3b7e36cd6b9..8cfe8ffd3a4 100644
--- a/packages/react-ui/internal/InternalMenu/InternalMenu.tsx
+++ b/packages/react-ui/internal/InternalMenu/InternalMenu.tsx
@@ -43,6 +43,10 @@ interface MenuState {
   scrollState: ScrollContainerScrollState;
 }
 
+export const internalMenuDataTid = {
+  root: 'InternalMenu__root',
+};
+
 @rootNode
 export class InternalMenu extends React.PureComponent<MenuProps, MenuState> {
   public static __KONTUR_REACT_UI__ = 'InternalMenu';
@@ -113,6 +117,7 @@ export class InternalMenu extends React.PureComponent<MenuProps, MenuState> {
 
     return (
       <div
+        data-tid={internalMenuDataTid.root}
         className={cx({
           [styles.root(this.theme)]: true,
           [styles.shadow(this.theme)]: this.props.hasShadow,
diff --git a/packages/react-ui/internal/MaskedInput/MaskedInput.tsx b/packages/react-ui/internal/MaskedInput/MaskedInput.tsx
index 2b3d5d688a0..ffaf1b892c3 100644
--- a/packages/react-ui/internal/MaskedInput/MaskedInput.tsx
+++ b/packages/react-ui/internal/MaskedInput/MaskedInput.tsx
@@ -25,6 +25,10 @@ interface MaskedInputState {
   focused: boolean;
 }
 
+export const maskedInputDataTid = {
+  root: 'MaskedInput__root',
+};
+
 export class MaskedInput extends React.PureComponent<MaskedInputProps, MaskedInputState> {
   public static __KONTUR_REACT_UI__ = 'MaskedInput';
 
@@ -98,7 +102,7 @@ export class MaskedInput extends React.PureComponent<MaskedInputProps, MaskedInp
       .map((_char, i) => (_char === '_' ? <MaskCharLowLine key={i} /> : _char));
 
     return (
-      <span className={styles.container()} x-ms-format-detection="none">
+      <span data-tid={maskedInputDataTid.root} className={styles.container()} x-ms-format-detection="none">
         <ReactInputMask
           {...inputProps}
           maskChar={null}
diff --git a/packages/react-ui/internal/Menu/Menu.tsx b/packages/react-ui/internal/Menu/Menu.tsx
index bb8e707059f..0adda0d32eb 100644
--- a/packages/react-ui/internal/Menu/Menu.tsx
+++ b/packages/react-ui/internal/Menu/Menu.tsx
@@ -31,6 +31,10 @@ export interface MenuState {
   highlightedIndex: number;
 }
 
+export const menuDataTid = {
+  root: 'Menu__root',
+};
+
 @rootNode
 export class Menu extends React.Component<MenuProps, MenuState> {
   public static __KONTUR_REACT_UI__ = 'Menu';
@@ -114,6 +118,7 @@ export class Menu extends React.Component<MenuProps, MenuState> {
 
     return (
       <div
+        data-tid={menuDataTid.root}
         className={cx(getAlignRightClass(this.props), {
           [styles.root(this.theme)]: true,
           [styles.shadow(this.theme)]: this.props.hasShadow,
diff --git a/packages/react-ui/internal/MobilePopup/MobilePopup.tsx b/packages/react-ui/internal/MobilePopup/MobilePopup.tsx
index 104d066c702..2a8d366be7d 100644
--- a/packages/react-ui/internal/MobilePopup/MobilePopup.tsx
+++ b/packages/react-ui/internal/MobilePopup/MobilePopup.tsx
@@ -35,6 +35,11 @@ interface MobilePopupState {
   isScrolled: boolean;
 }
 
+export const mobilePopupDataTid = {
+  root: 'MobilePopup__root',
+  container: 'MobilePopup__container',
+};
+
 export class MobilePopup extends React.Component<MobilePopupProps, MobilePopupState> {
   public static __KONTUR_REACT_UI__ = 'MobileMenuHeader';
 
@@ -70,12 +75,14 @@ export class MobilePopup extends React.Component<MobilePopupProps, MobilePopupSt
           {(state) => (
             <>
               <div
+                data-tid={mobilePopupDataTid.container}
                 className={cx({
                   [jsStyles.container(this.theme)]: true,
                   [jsStyles.containerOpened()]: state === 'entered',
                 })}
               >
                 <div
+                  data-tid={mobilePopupDataTid.root}
                   className={cx({
                     [jsStyles.root(this.theme)]: true,
                     [jsStyles.rootFullHeight(this.theme)]: this.props.useFullHeight,
diff --git a/packages/react-ui/internal/Popup/Popup.tsx b/packages/react-ui/internal/Popup/Popup.tsx
index eca2fa51e50..5110376189d 100644
--- a/packages/react-ui/internal/Popup/Popup.tsx
+++ b/packages/react-ui/internal/Popup/Popup.tsx
@@ -113,6 +113,12 @@ export interface PopupState {
   location: Nullable<PopupLocation>;
 }
 
+export const popupDataTid = {
+  root: 'Popup__root',
+  content: 'PopupContent',
+  contentInner: 'PopupContentInner',
+};
+
 @responsiveLayout
 @rootNode
 export class Popup extends React.Component<PopupProps, PopupState> {
@@ -392,11 +398,11 @@ export class Popup extends React.Component<PopupProps, PopupState> {
     const { backgroundColor, width } = this.props;
 
     return (
-      <div className={styles.content(this.theme)} data-tid={'PopupContent'} ref={this.refForTransition}>
+      <div className={styles.content(this.theme)} data-tid={popupDataTid.content} ref={this.refForTransition}>
         <div
           className={styles.contentInner(this.theme)}
           style={{ backgroundColor, width: this.calculateWidth(width) }}
-          data-tid={'PopupContentInner'}
+          data-tid={popupDataTid.contentInner}
         >
           {children}
         </div>
@@ -426,7 +432,7 @@ export class Popup extends React.Component<PopupProps, PopupState> {
         nodeRef={this.refForTransition}
       >
         {(state: string) => (
-          <CommonWrapper {...this.props}>
+          <CommonWrapper data-tid={popupDataTid.root} {...this.props}>
             <ZIndex
               wrapperRef={this.refPopupElement}
               priority={'Popup'}
diff --git a/packages/react-ui/internal/Popup/PopupPin.tsx b/packages/react-ui/internal/Popup/PopupPin.tsx
index 306324be1ef..70dcdca4906 100644
--- a/packages/react-ui/internal/Popup/PopupPin.tsx
+++ b/packages/react-ui/internal/Popup/PopupPin.tsx
@@ -25,6 +25,10 @@ interface Props {
   size: number;
 }
 
+export const popupPinDataTid = {
+  root: 'PopupPin__root',
+};
+
 export class PopupPin extends React.Component<Props> {
   public static __KONTUR_REACT_UI__ = 'PopupPin';
 
@@ -95,7 +99,7 @@ export class PopupPin extends React.Component<Props> {
     const styleWrapper = this.getWrapperStyle(options.outerLeft, options.outerTop, options.outerSize);
 
     return (
-      <div className={styles.wrapper()} style={styleWrapper}>
+      <div data-tid={popupPinDataTid.root} className={styles.wrapper()} style={styleWrapper}>
         <div style={styleOuter}>
           <div style={styleInner} />
         </div>
diff --git a/packages/react-ui/internal/PopupMenu/PopupMenu.tsx b/packages/react-ui/internal/PopupMenu/PopupMenu.tsx
index 073d3245ff8..18bce60d8f9 100644
--- a/packages/react-ui/internal/PopupMenu/PopupMenu.tsx
+++ b/packages/react-ui/internal/PopupMenu/PopupMenu.tsx
@@ -67,6 +67,11 @@ export const PopupMenuType = {
   Tooltip: 'tooltip',
 };
 
+export const popupMenuDataTid = {
+  root: 'PopupMenu_root',
+  caption: 'PopupMenu__caption',
+};
+
 const Positions: PopupPositionsType[] = [
   'top left',
   'top center',
@@ -110,7 +115,7 @@ export class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {
 
   public render() {
     return (
-      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper data-tid={popupMenuDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
         <RenderLayer
           onClickOutside={this.hideMenuWithoutFocusing}
           onFocusOutside={this.hideMenuWithoutFocusing}
@@ -175,7 +180,7 @@ export class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {
 
       return (
         <span
-          data-tid="PopupMenu__caption"
+          data-tid={popupMenuDataTid.caption}
           className={styles.caption()}
           ref={(element) => (this.captionWrapper = element)}
         >
@@ -186,7 +191,7 @@ export class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {
 
     return (
       <span
-        data-tid="PopupMenu__caption"
+        data-tid={popupMenuDataTid.caption}
         onClick={this.handleCaptionClick}
         onKeyDown={this.handleCaptionKeyDown}
         ref={(element) => (this.captionWrapper = element)}

From 0608b6699bbce3f459b4ad8215a78bedfc0736cc Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Thu, 26 May 2022 12:40:56 +0300
Subject: [PATCH 02/40] chore: fix prettier

---
 packages/react-ui/internal/Calendar/Calendar.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-ui/internal/Calendar/Calendar.tsx b/packages/react-ui/internal/Calendar/Calendar.tsx
index 172f379b6f7..0f5bbf0c6fc 100644
--- a/packages/react-ui/internal/Calendar/Calendar.tsx
+++ b/packages/react-ui/internal/Calendar/Calendar.tsx
@@ -281,8 +281,12 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
 
   private executeAnimations = (pixelY: number) => {
     this.setState(({ months, scrollPosition }) => {
-      const targetPosition = CalendarUtils.calculateScrollPosition(months, scrollPosition, pixelY, this.theme)
-        .scrollPosition;
+      const targetPosition = CalendarUtils.calculateScrollPosition(
+        months,
+        scrollPosition,
+        pixelY,
+        this.theme,
+      ).scrollPosition;
       return { scrollTarget: targetPosition };
     }, this.handleWheelEnd);
 

From 4c608df8578a349027a0d260fb13e54d02b928af Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Mon, 30 May 2022 11:58:09 +0300
Subject: [PATCH 03/40] chore: delete data-tid from CommonWrapper

---
 packages/react-ui/components/ComboBox/ComboBox.tsx       | 6 +-----
 .../react-ui/components/CurrencyLabel/CurrencyLabel.tsx  | 4 ++--
 packages/react-ui/components/DateInput/DateInput.tsx     | 5 +----
 .../react-ui/components/DropdownMenu/DropdownMenu.tsx    | 6 +-----
 packages/react-ui/components/Hint/Hint.tsx               | 9 ++-------
 packages/react-ui/components/Kebab/Kebab.tsx             | 6 +-----
 packages/react-ui/components/Loader/Loader.tsx           | 3 +--
 packages/react-ui/components/Modal/Modal.tsx             | 3 +--
 packages/react-ui/components/Modal/ModalBody.tsx         | 6 +-----
 packages/react-ui/components/RadioGroup/RadioGroup.tsx   | 4 ++--
 .../components/ResponsiveLayout/ResponsiveLayout.tsx     | 6 +-----
 packages/react-ui/components/SidePage/SidePageBody.tsx   | 7 +++++--
 .../react-ui/components/SidePage/SidePageContainer.tsx   | 3 ++-
 packages/react-ui/components/SidePage/SidePageFooter.tsx | 8 ++++++--
 packages/react-ui/components/SidePage/SidePageHeader.tsx | 4 ++--
 packages/react-ui/components/Spinner/Spinner.tsx         | 4 ++--
 packages/react-ui/components/Sticky/Sticky.tsx           | 4 ++--
 packages/react-ui/components/Switcher/Switcher.tsx       | 4 ++--
 packages/react-ui/components/Tabs/Tab.tsx                | 3 ++-
 packages/react-ui/components/Tabs/Tabs.tsx               | 8 ++++++--
 packages/react-ui/components/Toast/Toast.tsx             | 6 +-----
 packages/react-ui/components/Toggle/Toggle.tsx           | 4 ++--
 packages/react-ui/components/Token/Token.tsx             | 3 ++-
 packages/react-ui/components/TokenInput/TokenInput.tsx   | 4 ++--
 packages/react-ui/components/Tooltip/Tooltip.tsx         | 3 ++-
 packages/react-ui/components/TooltipMenu/TooltipMenu.tsx | 3 ++-
 .../react-ui/internal/CustomComboBox/ComboBoxView.tsx    | 5 +++++
 packages/react-ui/internal/Popup/Popup.tsx               | 3 +--
 packages/react-ui/internal/PopupMenu/PopupMenu.tsx       | 4 ++--
 29 files changed, 62 insertions(+), 76 deletions(-)

diff --git a/packages/react-ui/components/ComboBox/ComboBox.tsx b/packages/react-ui/components/ComboBox/ComboBox.tsx
index 90f37ffe6d6..5c9e2479cab 100644
--- a/packages/react-ui/components/ComboBox/ComboBox.tsx
+++ b/packages/react-ui/components/ComboBox/ComboBox.tsx
@@ -166,10 +166,6 @@ export interface ComboBoxItem {
   label: string;
 }
 
-export const comboBoxDataTid = {
-  root: 'ComboBox__root',
-};
-
 @rootNode
 export class ComboBox<T = ComboBoxItem> extends React.Component<ComboBoxProps<T>> {
   public static __KONTUR_REACT_UI__ = 'ComboBox';
@@ -266,7 +262,7 @@ export class ComboBox<T = ComboBoxItem> extends React.Component<ComboBoxProps<T>
   }
 
   public render() {
-    return <CustomComboBox data-tid={comboBoxDataTid.root} {...this.props} ref={this.customComboBoxRef} />;
+    return <CustomComboBox {...this.props} ref={this.customComboBoxRef} />;
   }
 
   private customComboBoxRef = (element: Nullable<CustomComboBox<T>>) => {
diff --git a/packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx b/packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx
index fcef2c82786..ade95aba987 100644
--- a/packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx
+++ b/packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx
@@ -25,8 +25,8 @@ export const currencyLabelDataTid = {
 export const CurrencyLabel = (props: CurrencyLabelProps): JSX.Element => {
   const { value, fractionDigits, currencySymbol } = props;
   return (
-    <CommonWrapper {...props} data-tid={currencyLabelDataTid.root}>
-      <span>
+    <CommonWrapper {...props}>
+      <span data-tid={currencyLabelDataTid.root}>
         {CurrencyHelper.format(value, { fractionDigits })}
         {currencySymbol && String.fromCharCode(0xa0) /* &nbsp; */}
         {currencySymbol}
diff --git a/packages/react-ui/components/DateInput/DateInput.tsx b/packages/react-ui/components/DateInput/DateInput.tsx
index 7110e9b1b4a..e2cf8b36bdb 100644
--- a/packages/react-ui/components/DateInput/DateInput.tsx
+++ b/packages/react-ui/components/DateInput/DateInput.tsx
@@ -70,9 +70,6 @@ export interface DateInputProps extends CommonProps {
   onValueChange?: (value: string) => void;
   onKeyDown?: (x0: React.KeyboardEvent<HTMLElement>) => void;
 }
-export const dataInputDataTid = {
-  root: 'DateInput__root',
-};
 
 @rootNode
 @locale('DatePicker', DatePickerLocaleHelper)
@@ -193,7 +190,7 @@ export class DateInput extends React.Component<DateInputProps, DateInputState> {
     const showValue = Boolean(focused || valueFormatted);
 
     return (
-      <CommonWrapper data-tid={dataInputDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <InputLikeText
           width={this.props.width}
           ref={this.inputLikeTextRef}
diff --git a/packages/react-ui/components/DropdownMenu/DropdownMenu.tsx b/packages/react-ui/components/DropdownMenu/DropdownMenu.tsx
index c4010fc0252..5396d8f2bc0 100644
--- a/packages/react-ui/components/DropdownMenu/DropdownMenu.tsx
+++ b/packages/react-ui/components/DropdownMenu/DropdownMenu.tsx
@@ -56,10 +56,6 @@ export interface DropdownMenuProps extends CommonProps {
   disableAnimations: boolean;
 }
 
-export const dropdownMenuDataTid = {
-  root: 'DropdownMenu__root',
-};
-
 /**
  * Меню, раскрывающееся по клику на переданный в `caption` элемент
  */
@@ -109,7 +105,7 @@ export class DropdownMenu extends React.Component<DropdownMenuProps> {
       return null;
     }
     return (
-      <CommonWrapper data-tid={dropdownMenuDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <PopupMenu
           ref={this.refPopupMenu}
           caption={this.props.caption}
diff --git a/packages/react-ui/components/Hint/Hint.tsx b/packages/react-ui/components/Hint/Hint.tsx
index eb4c0187903..0f0e72f1995 100644
--- a/packages/react-ui/components/Hint/Hint.tsx
+++ b/packages/react-ui/components/Hint/Hint.tsx
@@ -84,11 +84,6 @@ const Positions: PopupPositionsType[] = [
   'right bottom',
 ];
 
-export const hintDataTid = {
-  root: 'Hint__root',
-  modal: 'Hint__modal',
-};
-
 /**
  * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
  */
@@ -165,7 +160,7 @@ export class Hint extends React.PureComponent<HintProps, HintState> implements I
 
   public renderMobile() {
     return (
-      <CommonWrapper data-tid={hintDataTid.modal} {...this.props}>
+      <CommonWrapper {...this.props}>
         <Popup
           opened={this.state.opened}
           anchorElement={this.props.children}
@@ -181,7 +176,7 @@ export class Hint extends React.PureComponent<HintProps, HintState> implements I
 
   public renderMain() {
     return (
-      <CommonWrapper data-tid={hintDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <Popup
           hasPin
           opened={this.state.opened}
diff --git a/packages/react-ui/components/Kebab/Kebab.tsx b/packages/react-ui/components/Kebab/Kebab.tsx
index d006792e061..5679f3f2938 100644
--- a/packages/react-ui/components/Kebab/Kebab.tsx
+++ b/packages/react-ui/components/Kebab/Kebab.tsx
@@ -57,10 +57,6 @@ export interface KebabState {
   opened: boolean;
 }
 
-export const kebabDataTid = {
-  root: 'Kebab__root',
-};
-
 @rootNode
 export class Kebab extends React.Component<KebabProps, KebabState> {
   public static __KONTUR_REACT_UI__ = 'Kebab';
@@ -127,7 +123,7 @@ export class Kebab extends React.Component<KebabProps, KebabState> {
   private renderMain() {
     const { disabled, positions } = this.props;
     return (
-      <CommonWrapper data-tid={kebabDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <PopupMenu
           popupHasPin
           positions={positions}
diff --git a/packages/react-ui/components/Loader/Loader.tsx b/packages/react-ui/components/Loader/Loader.tsx
index 16ec1ee7d97..2a547a518fe 100644
--- a/packages/react-ui/components/Loader/Loader.tsx
+++ b/packages/react-ui/components/Loader/Loader.tsx
@@ -52,7 +52,6 @@ export interface LoaderState {
 }
 
 export const loaderDataTid = {
-  root: 'Loader__root',
   vail: 'Loader__Veil',
   spinner: 'Loader__Spinner',
 };
@@ -222,7 +221,7 @@ export class Loader extends React.Component<LoaderProps, LoaderState> {
     const { isLoaderActive } = this.state;
 
     return (
-      <CommonWrapper data-tid={loaderDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <div className={styles.loader()} data-tid={isLoaderActive ? loaderDataTid.vail : ''}>
           <ZIndex
             priority={'Loader'}
diff --git a/packages/react-ui/components/Modal/Modal.tsx b/packages/react-ui/components/Modal/Modal.tsx
index 654bdc4cab3..322d9b947e2 100644
--- a/packages/react-ui/components/Modal/Modal.tsx
+++ b/packages/react-ui/components/Modal/Modal.tsx
@@ -71,7 +71,6 @@ export interface ModalState {
 }
 
 export const modalDataTid = {
-  root: 'modal__root',
   container: 'modal-container',
   content: 'modal-content',
 };
@@ -195,7 +194,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
 
     return (
       <RenderContainer>
-        <CommonWrapper data-tid={modalDataTid.root} {...this.props}>
+        <CommonWrapper {...this.props}>
           <ZIndex priority={'Modal'} className={styles.root()}>
             <HideBodyVerticalScroll />
             {this.state.hasBackground && <div className={styles.bg(this.theme)} />}
diff --git a/packages/react-ui/components/Modal/ModalBody.tsx b/packages/react-ui/components/Modal/ModalBody.tsx
index 3fada6e9d55..f8ac55efec7 100644
--- a/packages/react-ui/components/Modal/ModalBody.tsx
+++ b/packages/react-ui/components/Modal/ModalBody.tsx
@@ -20,10 +20,6 @@ export interface ModalBodyProps extends CommonProps {
   noPadding?: boolean;
 }
 
-export const modalBodyDataTid = {
-  root: 'ModalBody__root',
-};
-
 /**
  * Контейнер с отступами от края модалки
  *
@@ -59,7 +55,7 @@ export class ModalBody extends React.Component<ModalBodyProps> {
     return (
       <ModalContext.Consumer>
         {({ additionalPadding, hasHeader }) => (
-          <CommonWrapper data-tid={modalBodyDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
+          <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
             <ZIndex
               priority={'ModalBody'}
               createStackingContext
diff --git a/packages/react-ui/components/RadioGroup/RadioGroup.tsx b/packages/react-ui/components/RadioGroup/RadioGroup.tsx
index cb5b941f956..94d8fc36aee 100644
--- a/packages/react-ui/components/RadioGroup/RadioGroup.tsx
+++ b/packages/react-ui/components/RadioGroup/RadioGroup.tsx
@@ -167,9 +167,9 @@ export class RadioGroup<T> extends React.Component<RadioGroupProps<T>, RadioGrou
     };
 
     return (
-      <CommonWrapper data-tid={radioGroupDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <FocusTrap onBlur={onBlur}>
-          <span ref={this.ref} style={style} className={styles.root()} {...handlers}>
+          <span data-tid={radioGroupDataTid.root} ref={this.ref} style={style} className={styles.root()} {...handlers}>
             <RadioGroupContext.Provider value={this.getRadioGroupContextValue()}>
               {this.renderChildren()}
             </RadioGroupContext.Provider>
diff --git a/packages/react-ui/components/ResponsiveLayout/ResponsiveLayout.tsx b/packages/react-ui/components/ResponsiveLayout/ResponsiveLayout.tsx
index 8b74f441958..06274ef1f60 100644
--- a/packages/react-ui/components/ResponsiveLayout/ResponsiveLayout.tsx
+++ b/packages/react-ui/components/ResponsiveLayout/ResponsiveLayout.tsx
@@ -12,10 +12,6 @@ interface ResponsiveLayoutProps {
   children?: React.ReactNode | ((currentLayout: ResponsiveLayoutFlags) => React.ReactNode);
 }
 
-export const responsiveLayoutDataTid = {
-  root: 'ResponsiveLayout_root',
-};
-
 /**
  * Компонент для определения текущего лэйаута.
  */
@@ -30,7 +26,7 @@ export const ResponsiveLayout: React.FC<ResponsiveLayoutProps> = (props) => {
   }, [layoutFlags]);
 
   return (
-    <CommonWrapper data-tid={responsiveLayoutDataTid.root} {...props}>
+    <CommonWrapper {...props}>
       {isFunction(props.children) ? props.children(layoutFlags) ?? null : props.children ?? null}
     </CommonWrapper>
   );
diff --git a/packages/react-ui/components/SidePage/SidePageBody.tsx b/packages/react-ui/components/SidePage/SidePageBody.tsx
index 9921d171412..eb5797090a3 100644
--- a/packages/react-ui/components/SidePage/SidePageBody.tsx
+++ b/packages/react-ui/components/SidePage/SidePageBody.tsx
@@ -40,8 +40,11 @@ export class SidePageBody extends React.Component<SidePageBodyProps> {
       <ThemeContext.Consumer>
         {(theme) => {
           return (
-            <CommonWrapper data-tid={sidePageBodyDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
-              <div className={cx(styles.body(theme), { [styles.mobileBody()]: this.isMobileLayout })}>
+            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+              <div
+                data-tid={sidePageBodyDataTid.root}
+                className={cx(styles.body(theme), { [styles.mobileBody()]: this.isMobileLayout })}
+              >
                 {this.props.children}
               </div>
             </CommonWrapper>
diff --git a/packages/react-ui/components/SidePage/SidePageContainer.tsx b/packages/react-ui/components/SidePage/SidePageContainer.tsx
index e7a90cd9508..b062629aa0e 100644
--- a/packages/react-ui/components/SidePage/SidePageContainer.tsx
+++ b/packages/react-ui/components/SidePage/SidePageContainer.tsx
@@ -45,8 +45,9 @@ export class SidePageContainer extends React.Component<SidePageContainerProps> {
     return (
       <SidePageContext.Consumer>
         {({ hasHeader, hasFooter, hasPanel }) => (
-          <CommonWrapper data-tid={sidePageContainerDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
+          <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
             <div
+              data-tid={sidePageContainerDataTid.root}
               className={cx({
                 [styles.container(this.theme)]: true,
                 [styles.containerWithoutHeader(this.theme)]: !hasHeader,
diff --git a/packages/react-ui/components/SidePage/SidePageFooter.tsx b/packages/react-ui/components/SidePage/SidePageFooter.tsx
index 6ed02c1c221..24f07fa96d1 100644
--- a/packages/react-ui/components/SidePage/SidePageFooter.tsx
+++ b/packages/react-ui/components/SidePage/SidePageFooter.tsx
@@ -98,8 +98,12 @@ export class SidePageFooter extends React.Component<SidePageFooterProps> {
 
   private renderMain() {
     return (
-      <CommonWrapper data-tid={sidePageFooterDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
-        <div style={{ height: this.getContentHeight() }} className={styles.footerWrapper()}>
+      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+        <div
+          data-tid={sidePageFooterDataTid.root}
+          style={{ height: this.getContentHeight() }}
+          className={styles.footerWrapper()}
+        >
           <SidePageContext.Consumer>
             {({ getWidth }) => (
               <div
diff --git a/packages/react-ui/components/SidePage/SidePageHeader.tsx b/packages/react-ui/components/SidePage/SidePageHeader.tsx
index 33546557a25..b5e698279a2 100644
--- a/packages/react-ui/components/SidePage/SidePageHeader.tsx
+++ b/packages/react-ui/components/SidePage/SidePageHeader.tsx
@@ -119,8 +119,8 @@ export class SidePageHeader extends React.Component<SidePageHeaderProps, SidePag
     const isStickyMobile = this.isMobileLayout && this.getStickyProp();
 
     return (
-      <CommonWrapper data-tid={sidePageHeaderDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
-        <div ref={this.wrapperRef} className={styles.headerWrapper()}>
+      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+        <div data-tid={sidePageHeaderDataTid.root} ref={this.wrapperRef} className={styles.headerWrapper()}>
           {isStickyDesktop || isStickyMobile ? (
             <Sticky ref={this.stickyRef} side="top">
               {this.renderHeader}
diff --git a/packages/react-ui/components/Spinner/Spinner.tsx b/packages/react-ui/components/Spinner/Spinner.tsx
index b2607e9b916..4ca4707e651 100644
--- a/packages/react-ui/components/Spinner/Spinner.tsx
+++ b/packages/react-ui/components/Spinner/Spinner.tsx
@@ -100,8 +100,8 @@ export class Spinner extends React.Component<SpinnerProps> {
     const { type, caption = this.locale.loading, dimmed, inline } = this.props;
 
     return (
-      <CommonWrapper data-tid={spinnerDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
-        <div className={styles.spinner()}>
+      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+        <div data-tid={spinnerDataTid.root} className={styles.spinner()}>
           <span className={styles.inner()}>{this.renderSpinner(type, dimmed, inline)}</span>
           {caption && this.renderCaption(type, caption)}
         </div>
diff --git a/packages/react-ui/components/Sticky/Sticky.tsx b/packages/react-ui/components/Sticky/Sticky.tsx
index 11f2758ec38..ddffff7edd4 100644
--- a/packages/react-ui/components/Sticky/Sticky.tsx
+++ b/packages/react-ui/components/Sticky/Sticky.tsx
@@ -120,8 +120,8 @@ export class Sticky extends React.Component<StickyProps, StickyState> {
     }
 
     return (
-      <CommonWrapper data-tid={stickyDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
-        <div ref={this.refWrapper} className={styles.wrapper()}>
+      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+        <div data-tid={stickyDataTid.root} ref={this.refWrapper} className={styles.wrapper()}>
           <ZIndex
             priority="Sticky"
             applyZIndex={fixed}
diff --git a/packages/react-ui/components/Switcher/Switcher.tsx b/packages/react-ui/components/Switcher/Switcher.tsx
index 5aab8d4ab94..32a2a43c61f 100644
--- a/packages/react-ui/components/Switcher/Switcher.tsx
+++ b/packages/react-ui/components/Switcher/Switcher.tsx
@@ -105,8 +105,8 @@ export class Switcher extends React.Component<SwitcherProps, SwitcherState> {
     const captionClassName = cx(styles.caption(this.theme), this.getLabelSizeClassName());
 
     return (
-      <CommonWrapper data-tid={switcherDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
-        <div className={styles.root()}>
+      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+        <div data-tid={switcherDataTid.root} className={styles.root()}>
           {this.props.caption ? <div className={captionClassName}>{this.props.caption}</div> : null}
           <div className={styles.wrap()}>
             <input {...inputProps} />
diff --git a/packages/react-ui/components/Tabs/Tab.tsx b/packages/react-ui/components/Tabs/Tab.tsx
index 86e54d8a65c..b209419906c 100644
--- a/packages/react-ui/components/Tabs/Tab.tsx
+++ b/packages/react-ui/components/Tabs/Tab.tsx
@@ -208,8 +208,9 @@ export class Tab<T extends string = string> extends React.Component<TabProps<T>,
     const orientationStyles = isVertical ? verticalStyles : horizontalStyles;
 
     return (
-      <CommonWrapper data-tid={tabDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <Component
+          data-tid={tabDataTid.root}
           className={cx({
             [styles.root(this.theme)]: true,
             [styles.vertical(this.theme)]: !!isVertical,
diff --git a/packages/react-ui/components/Tabs/Tabs.tsx b/packages/react-ui/components/Tabs/Tabs.tsx
index 97835fe040e..0b8ac862dfe 100644
--- a/packages/react-ui/components/Tabs/Tabs.tsx
+++ b/packages/react-ui/components/Tabs/Tabs.tsx
@@ -103,8 +103,12 @@ export class Tabs<T extends string = string> extends React.Component<TabsProps<T
         {(theme) => {
           this.theme = theme;
           return (
-            <CommonWrapper data-tid={tabsDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
-              <div className={cx(styles.root(this.theme), vertical && styles.vertical())} style={{ width }}>
+            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+              <div
+                data-tid={tabsDataTid.root}
+                className={cx(styles.root(this.theme), vertical && styles.vertical())}
+                style={{ width }}
+              >
                 <TabsContext.Provider
                   value={{
                     vertical,
diff --git a/packages/react-ui/components/Toast/Toast.tsx b/packages/react-ui/components/Toast/Toast.tsx
index 3311ce6ec36..f20bd86bb2d 100644
--- a/packages/react-ui/components/Toast/Toast.tsx
+++ b/packages/react-ui/components/Toast/Toast.tsx
@@ -27,10 +27,6 @@ export interface ToastProps extends CommonProps {
   onClose?: (notification: string, action?: Action) => void;
 }
 
-export const toastDataTid = {
-  root: 'Toast__root',
-};
-
 /**
  * Показывает уведомления.
  *
@@ -138,7 +134,7 @@ export class Toast extends React.Component<ToastProps, ToastState> {
         exit={!isTestEnv}
         nodeRef={this.rootRef}
       >
-        <CommonWrapper data-tid={toastDataTid.root} rootNodeRef={this.setRootRef} {...this.props}>
+        <CommonWrapper rootNodeRef={this.setRootRef} {...this.props}>
           <ToastView ref={this._refToast} {...toastProps} />
         </CommonWrapper>
       </CSSTransition>
diff --git a/packages/react-ui/components/Toggle/Toggle.tsx b/packages/react-ui/components/Toggle/Toggle.tsx
index 2dc33446feb..440de8ba507 100644
--- a/packages/react-ui/components/Toggle/Toggle.tsx
+++ b/packages/react-ui/components/Toggle/Toggle.tsx
@@ -184,8 +184,8 @@ export class Toggle extends React.Component<ToggleProps, ToggleState> {
     }
 
     return (
-      <CommonWrapper data-tid={toggleDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
-        <label className={labelClassNames}>
+      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+        <label data-tid={toggleDataTid.root} className={labelClassNames}>
           <div
             className={cx(styles.button(this.theme), {
               [styles.buttonRight()]: captionPosition === 'left',
diff --git a/packages/react-ui/components/Token/Token.tsx b/packages/react-ui/components/Token/Token.tsx
index b77a4a6a69d..5612f20757a 100644
--- a/packages/react-ui/components/Token/Token.tsx
+++ b/packages/react-ui/components/Token/Token.tsx
@@ -100,8 +100,9 @@ export class Token extends React.Component<TokenProps> {
     });
 
     return (
-      <CommonWrapper data-tid={tokenDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <div
+          data-tid={tokenDataTid.root}
           className={tokenClassNames}
           onClick={onClick}
           onDoubleClick={onDoubleClick}
diff --git a/packages/react-ui/components/TokenInput/TokenInput.tsx b/packages/react-ui/components/TokenInput/TokenInput.tsx
index fdd5c69c08b..b422d2d6d3b 100644
--- a/packages/react-ui/components/TokenInput/TokenInput.tsx
+++ b/packages/react-ui/components/TokenInput/TokenInput.tsx
@@ -327,8 +327,8 @@ export class TokenInput<T = string> extends React.PureComponent<TokenInputProps<
     });
 
     return (
-      <CommonWrapper data-tid={tokenInputDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
-        <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+        <div data-tid={tokenInputDataTid.root} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
           <label
             ref={this.wrapperRef}
             style={{ width }}
diff --git a/packages/react-ui/components/Tooltip/Tooltip.tsx b/packages/react-ui/components/Tooltip/Tooltip.tsx
index a26b2a56b2e..9ccc85f5309 100644
--- a/packages/react-ui/components/Tooltip/Tooltip.tsx
+++ b/packages/react-ui/components/Tooltip/Tooltip.tsx
@@ -327,8 +327,9 @@ export class Tooltip extends React.PureComponent<TooltipProps, TooltipState> imp
     content: JSX.Element | null,
   ) {
     return (
-      <CommonWrapper data-tid={tooltipDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <Popup
+          data-tid={tooltipDataTid.root}
           anchorElement={anchorElement}
           hasPin
           hasShadow
diff --git a/packages/react-ui/components/TooltipMenu/TooltipMenu.tsx b/packages/react-ui/components/TooltipMenu/TooltipMenu.tsx
index 7d593feaa43..72a234350c6 100644
--- a/packages/react-ui/components/TooltipMenu/TooltipMenu.tsx
+++ b/packages/react-ui/components/TooltipMenu/TooltipMenu.tsx
@@ -110,8 +110,9 @@ export class TooltipMenu extends React.Component<TooltipMenuProps> {
     }
 
     return (
-      <CommonWrapper data-tid={tooltipMenuDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <PopupMenu
+          data-tid={tooltipMenuDataTid.root}
           menuMaxHeight={this.props.menuMaxHeight}
           menuWidth={this.props.menuWidth}
           caption={this.props.caption}
diff --git a/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx b/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx
index a4e2f769f85..45a95f25815 100644
--- a/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx
+++ b/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx
@@ -79,6 +79,10 @@ interface ComboBoxViewState {
   isMobileOpened: boolean;
 }
 
+export const comboBoxViewDataTid = {
+  root: 'ComboBoxView__root',
+};
+
 @responsiveLayout
 @rootNode
 export class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T>, ComboBoxViewState> {
@@ -136,6 +140,7 @@ export class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T>, Combo
       <CommonWrapper {...this.props}>
         <RenderLayer onClickOutside={onClickOutside} onFocusOutside={onFocusOutside} active={opened}>
           <span
+            data-tid={comboBoxViewDataTid.root}
             style={{ width }}
             className={styles.root()}
             onMouseEnter={onMouseEnter}
diff --git a/packages/react-ui/internal/Popup/Popup.tsx b/packages/react-ui/internal/Popup/Popup.tsx
index 5110376189d..e4f61025431 100644
--- a/packages/react-ui/internal/Popup/Popup.tsx
+++ b/packages/react-ui/internal/Popup/Popup.tsx
@@ -114,7 +114,6 @@ export interface PopupState {
 }
 
 export const popupDataTid = {
-  root: 'Popup__root',
   content: 'PopupContent',
   contentInner: 'PopupContentInner',
 };
@@ -432,7 +431,7 @@ export class Popup extends React.Component<PopupProps, PopupState> {
         nodeRef={this.refForTransition}
       >
         {(state: string) => (
-          <CommonWrapper data-tid={popupDataTid.root} {...this.props}>
+          <CommonWrapper {...this.props}>
             <ZIndex
               wrapperRef={this.refPopupElement}
               priority={'Popup'}
diff --git a/packages/react-ui/internal/PopupMenu/PopupMenu.tsx b/packages/react-ui/internal/PopupMenu/PopupMenu.tsx
index 18bce60d8f9..e277a4bd777 100644
--- a/packages/react-ui/internal/PopupMenu/PopupMenu.tsx
+++ b/packages/react-ui/internal/PopupMenu/PopupMenu.tsx
@@ -115,13 +115,13 @@ export class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {
 
   public render() {
     return (
-      <CommonWrapper data-tid={popupMenuDataTid.root} rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <RenderLayer
           onClickOutside={this.hideMenuWithoutFocusing}
           onFocusOutside={this.hideMenuWithoutFocusing}
           active={this.state.menuVisible}
         >
-          <div className={styles.container()} style={{ width: this.props.width }}>
+          <div data-tid={popupMenuDataTid.root} className={styles.container()} style={{ width: this.props.width }}>
             {this.renderCaption()}
             {this.captionWrapper && this.props.children && (
               <Popup

From 1365ee1b7f89cf450e253e743e3761278eda3d83 Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Tue, 31 May 2022 10:24:03 +0300
Subject: [PATCH 04/40] chore: add data-tid page to docs

---
 packages/react-ui/.styleguide/helpers.js      |   1 +
 packages/react-ui/lib/data-tid/DATATID.md     | 236 ++++++++++++++++++
 .../react-ui/lib/data-tid/DataTid.styles.ts   |  42 ++++
 packages/react-ui/lib/data-tid/DataTid.tsx    |  52 ++++
 .../lib/data-tid/componentsDataTid.ts         | 183 ++++++++++++++
 5 files changed, 514 insertions(+)
 create mode 100644 packages/react-ui/lib/data-tid/DATATID.md
 create mode 100644 packages/react-ui/lib/data-tid/DataTid.styles.ts
 create mode 100644 packages/react-ui/lib/data-tid/DataTid.tsx
 create mode 100644 packages/react-ui/lib/data-tid/componentsDataTid.ts

diff --git a/packages/react-ui/.styleguide/helpers.js b/packages/react-ui/.styleguide/helpers.js
index 7095ab9a751..70bb384a3ad 100644
--- a/packages/react-ui/.styleguide/helpers.js
+++ b/packages/react-ui/.styleguide/helpers.js
@@ -82,6 +82,7 @@ const getCommonSections = () => {
     { name: 'Roadmap', content: path.join(__dirname, '../ROADMAP.md') },
     { name: 'Migration', content: path.join(__dirname, '../MIGRATION.md'), exampleMode: 'expand' },
     { name: 'LocaleContext', content: path.join(__dirname, '../lib/locale/LOCALECONTEXT.md') },
+    { name: 'DataTid', content: path.join(__dirname, '../lib/data-tid/DATATID.md') },
     { name: 'SSR', content: path.join(__dirname, '../SSR.md') },
     { name: 'Mobiles', content: path.join(__dirname, '../MOBILES.md') },
     { name: 'Accessibility', content: path.join(__dirname, '../../../accessibility.md') },
diff --git a/packages/react-ui/lib/data-tid/DATATID.md b/packages/react-ui/lib/data-tid/DATATID.md
new file mode 100644
index 00000000000..6decf6cad03
--- /dev/null
+++ b/packages/react-ui/lib/data-tid/DATATID.md
@@ -0,0 +1,236 @@
+Аттрибут data-tid экспортируется для компонентов в виде объекта.
+При необходимости добавления аттрибута data-tid необходимо создать пулл-реквест
+
+Список экспортируемых data-tid:
+
+```jsx harmony
+import {DataTid} from './DataTid';
+<DataTid />
+// const autocompleteDataTid = {
+//   root: 'Autocomplete__root',
+// };
+// const buttonDataTid = {
+//   root: 'Button__root',
+// };
+// const centerDataTid = {
+//   root: 'Center__root',
+// };
+// const checkboxDataTid = {
+//   root: 'Checkbox__root',
+// };
+// const currencyInputDataTid = {
+//   root: 'CurrencyInput__root',
+// };
+// const currencyLabelDataTid = {
+//   root: 'CurrencyLabel__root',
+// };
+// const dataPickerDataTid = {
+//   root: 'DatePicker__root',
+// };
+// const pickerDataTid = {
+//   root: 'Picker__root',
+//   todayWrapper: 'Picker__todayWrapper',
+// };
+// const dropdownDataTid = {
+//   root: 'Dropdown__root',
+// };
+// const fileUploaderDataTid = {
+//   root: 'FileUploader__root',
+//   content: 'FileUploader__content',
+//   link: 'FileUploader__link',
+// };
+// const fxInputDataTid = {
+//   root: 'FxInput__root',
+// };
+// const gappedDataTid = {
+//   vertical: 'Gapped__vertical',
+//   horizontal: 'Gapped__horizontal',
+// };
+// const globalLoaderDataTid = {
+//   root: 'GlobalLoader',
+// };
+// const groupDataTid = {
+//   root: 'Group__root',
+// };
+// const inputDataTid = {
+//   root: 'Input__root',
+// };
+// const linkDataTid = {
+//   root: 'Link__root',
+// };
+// const menuHeaderDataTid = {
+//   root: 'MenuHeader__root',
+// };
+// const menuItemDataTid = {
+//   root: 'MenuItem__root',
+//   comment: 'MenuItem__comment',
+// };
+// const menuSeparatorDataTid = {
+//   root: 'MenuSeparator__root',
+// };
+// const modalDataTid = {
+//   container: 'modal-container',
+//   content: 'modal-content',
+// };
+// const modalCloseDataTid = {
+//   close: 'modal-close',
+// };
+// const modalFooterDataTid = {
+//   root: 'ModalFooter__root',
+// };
+// const modalHeaderDataTid = {
+//   root: 'ModalHeader__root',
+// };
+// const pagingDataTid = {
+//   root: 'Paging__root',
+//   dots: 'Paging__dots',
+//   forwardLink: 'Paging__forwardLink',
+//   pageLinkWrapper: 'Paging__pageLinkWrapper',
+//   pageLink: 'Paging__pageLink',
+// };
+// const passwordInputDataTid = {
+//   root: 'PasswordInput',
+//   capsLockDetector: 'PasswordInputCapsLockDetector',
+//   eyeIcon: 'PasswordInputEyeIcon',
+// };
+// const radioDataTid = {
+//   root: 'Radio__root',
+// };
+// const radioGroupDataTid = {
+//   root: 'RadioGroup__root',
+// };
+// const scrollContainerDataTid = {
+//   root: 'ScrollContainer__root',
+//   inner: 'ScrollContainer__inner',
+// };
+// const selectDataTid = {
+//   root: 'Select__root',
+// };
+// const sidePageDataTid = {
+//   root: 'SidePage__root',
+//   container: 'SidePage__container',
+// };
+// const sidePageBodyDataTid = {
+//   root: 'SidePageBody__root',
+// };
+// const sidePageContainerDataTid = {
+//   root: 'SidePageContainer__root',
+// };
+// const sidePageFooterDataTid = {
+//   root: 'SidePageFooter__root',
+// };
+// const sidePageHeaderDataTid = {
+//   root: 'SidePageHeader__root',
+//   close: 'SidePage__close',
+// };
+// const spinnerDataTid = {
+//   root: 'Spinner__root',
+// };
+// const stickyDataTid = {
+//   root: 'Spinner__root',
+// };
+// const switcherDataTid = {
+//   root: 'Switcher__root',
+// };
+// const indicatorDataTid = {
+//   root: 'Indicator__root',
+// };
+// const tabDataTid = {
+//   root: 'Tab__root',
+// };
+// const tabsDataTid = {
+//   root: 'Tabs__root',
+// };
+// const textareaDataTid = {
+//   root: 'Textarea__root',
+// };
+// const textareaCounterDataTid = {
+//   root: 'TextareaCounter__root',
+// };
+// const toastStaticDataTid = {
+//   root: 'StaticToast',
+// };
+// const toastViewDataTid = {
+//   root: 'ToastView__root',
+//   action: 'ToastView__action',
+//   close: 'ToastView__close',
+// };
+// const toggleDataTid = {
+//   root: 'Toggle__root',
+// };
+// const tokenDataTid = {
+//   root: 'Token__root',
+// };
+// const tokenInputDataTid = {
+//   root: 'TokenInput__root',
+// };
+// const tokenInputMenuDataTid = {
+//   root: 'TokenInputMenu__root',
+// };
+// const tooltipDataTid = {
+//   root: 'Tooltip__root',
+// };
+// const tooltipMenuDataTid = {
+//   root: 'TooltipMenu__root',
+// };
+// const calendarDataTid = {
+//   root: 'Calendar',
+// };
+// const monthViewDataTid = {
+//   month: 'MonthView__month',
+//   headerMonth: 'MonthView__headerMonth',
+//   headerYear: 'MonthView__headerYear',
+// };
+// const comboBoxMenuDataTid = {
+//   loading: 'ComboBoxMenu__loading',
+//   failed: 'ComboBoxMenu__failed',
+//   notFound: 'ComboBoxMenu__notFound',
+//   items: 'ComboBoxMenu__items',
+//   item: 'ComboBoxMenu__item',
+// };
+// const comboBoxViewDataTid = {
+//   root: 'ComboBoxView__root',
+// };
+// const dateSelectDataTid = {
+//   caption: 'DateSelect__caption',
+//   menuItem: 'DateSelect__menuItem',
+// };
+// const fileUploaderFileDataTid = {
+//   file: 'FileUploader__file',
+//   fileTooltip: 'FileUploader__fileTooltip',
+//   fileName: 'FileUploader__fileName',
+//   fileSize: 'FileUploader__fileSize',
+//   fileIcon: 'FileUploader__fileIcon',
+// };
+// const fileUploaderFileListDataTid = {
+//   fileList: 'FileUploader__fileList',
+// };
+// const inputLikeTextDataTid = {
+//   root: 'InputLikeText__root',
+//   input: 'InputLikeText__input',
+// };
+// const internalMenuDataTid = {
+//   root: 'InternalMenu__root',
+// };
+// const maskedInputDataTid = {
+//   root: 'MaskedInput__root',
+// };
+// const menuDataTid = {
+//   root: 'Menu__root',
+// };
+// const mobilePopupDataTid = {
+//   root: 'MobilePopup__root',
+//   container: 'MobilePopup__container',
+// };
+// const popupDataTid = {
+//   content: 'PopupContent',
+//   contentInner: 'PopupContentInner',
+// };
+// const popupPinDataTid = {
+//   root: 'PopupPin__root',
+// };
+// const popupMenuDataTid = {
+//   root: 'PopupMenu_root',
+//   caption: 'PopupMenu__caption',
+// };
+```
diff --git a/packages/react-ui/lib/data-tid/DataTid.styles.ts b/packages/react-ui/lib/data-tid/DataTid.styles.ts
new file mode 100644
index 00000000000..48416906d42
--- /dev/null
+++ b/packages/react-ui/lib/data-tid/DataTid.styles.ts
@@ -0,0 +1,42 @@
+import { css, memoizeStyle } from '../theming/Emotion';
+
+export const styles = memoizeStyle({
+  row() {
+    return css`
+      display: flex;
+      width: 100%;
+    `;
+  },
+  leftCell() {
+    return css`
+      border: 1px solid #000;
+      width: 30%;
+    `;
+  },
+  rightCell() {
+    return css`
+      border: 1px solid #000;
+      width: 70%;
+    `;
+  },
+  dataTidContainer() {
+    return css`
+      display: flex;
+      width: 100%;
+    `;
+  },
+  dataTidName() {
+    return css`
+      width: 40%;
+      overflow-wrap: anywhere;
+    `;
+  },
+  dataTidDescription() {
+    return css`
+      width: 60%;
+      background: #dddddd;
+      padding-left: 10px;
+      overflow-wrap: anywhere;
+    `;
+  },
+});
diff --git a/packages/react-ui/lib/data-tid/DataTid.tsx b/packages/react-ui/lib/data-tid/DataTid.tsx
new file mode 100644
index 00000000000..58a4b021f2c
--- /dev/null
+++ b/packages/react-ui/lib/data-tid/DataTid.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { Select } from '../../components/Select';
+
+import { styles } from './DataTid.styles';
+import { componentsDataTid } from './componentsDataTid';
+
+export class DataTid extends React.Component<{}, { selectedValue: string }> {
+  public state = {
+    selectedValue: 'все',
+  };
+
+  private items = ['все', ...componentsDataTid.map((el) => Object.keys(el)[0])];
+
+  private setValue = (value: string) => {
+    this.setState({ selectedValue: value });
+  };
+
+  public render() {
+    const list = componentsDataTid.map((element: { [key: string]: any }, index) => {
+      const componentName = Object.keys(element)[0];
+      if (componentName === this.state.selectedValue || this.state.selectedValue === 'все') {
+        const dataTidList = element[componentName].map((value: { [key: string]: string }, i: number) => {
+          return (
+            <div key={i} className={styles.dataTidContainer()}>
+              <div className={styles.dataTidName()}>{Object.keys(value)}:</div>
+              <div className={styles.dataTidDescription()}>{Object.values(value)}</div>
+            </div>
+          );
+        });
+        return (
+          <div key={index} className={styles.row()}>
+            <div className={styles.leftCell()}>{componentName}:</div>{' '}
+            <div className={styles.rightCell()}>{dataTidList}</div>
+          </div>
+        );
+      }
+    });
+
+    return (
+      <div>
+        Выбрать компонент:{' '}
+        <Select<string> items={this.items} value={this.state.selectedValue} onValueChange={this.setValue} />
+        <div className={styles.row()}>
+          <div className={styles.leftCell()}>Название компонента:</div>{' '}
+          <div className={styles.rightCell()}>data-tid</div>
+        </div>
+        {list}
+      </div>
+    );
+  }
+}
diff --git a/packages/react-ui/lib/data-tid/componentsDataTid.ts b/packages/react-ui/lib/data-tid/componentsDataTid.ts
new file mode 100644
index 00000000000..127815bf26d
--- /dev/null
+++ b/packages/react-ui/lib/data-tid/componentsDataTid.ts
@@ -0,0 +1,183 @@
+import { autocompleteDataTid } from '../../components/Autocomplete';
+import { buttonDataTid } from '../../components/Button';
+import { centerDataTid } from '../../components/Center';
+import { checkboxDataTid } from '../../components/Checkbox';
+import { currencyInputDataTid } from '../../components/CurrencyInput';
+import { currencyLabelDataTid } from '../../components/CurrencyLabel';
+import { dataPickerDataTid } from '../../components/DatePicker';
+import { pickerDataTid } from '../../components/DatePicker/Picker';
+import { dropdownDataTid } from '../../components/Dropdown';
+import { fileUploaderDataTid } from '../../components/FileUploader';
+import { fileUploaderFileDataTid } from '../../internal/FileUploaderControl/FileUploaderFile/FileUploaderFile';
+import { fileUploaderFileListDataTid } from '../../internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList';
+import { fxInputDataTid } from '../../components/FxInput';
+import { gappedDataTid } from '../../components/Gapped';
+import { globalLoaderDataTid } from '../../components/GlobalLoader';
+import { groupDataTid } from '../../components/Group';
+import { inputDataTid } from '../../components/Input';
+import { linkDataTid } from '../../components/Link';
+import { menuHeaderDataTid } from '../../components/MenuHeader';
+import { menuItemDataTid } from '../../components/MenuItem';
+import { menuSeparatorDataTid } from '../../components/MenuSeparator';
+import { modalDataTid, modalFooterDataTid, modalHeaderDataTid } from '../../components/Modal';
+import { modalCloseDataTid } from '../../components/Modal/ModalClose';
+import { pagingDataTid } from '../../components/Paging';
+import { passwordInputDataTid } from '../../components/PasswordInput';
+import { radioDataTid } from '../../components/Radio';
+import { radioGroupDataTid } from '../../components/RadioGroup';
+import { scrollContainerDataTid } from '../../components/ScrollContainer';
+import { selectDataTid } from '../../components/Select';
+import {
+  sidePageBodyDataTid,
+  sidePageContainerDataTid,
+  sidePageDataTid,
+  sidePageFooterDataTid,
+  sidePageHeaderDataTid,
+} from '../../components/SidePage';
+import { spinnerDataTid } from '../../components/Spinner';
+import { stickyDataTid } from '../../components/Sticky';
+import { switcherDataTid } from '../../components/Switcher';
+import { indicatorDataTid } from '../../components/Tabs/Indicator';
+import { tabDataTid, tabsDataTid } from '../../components/Tabs';
+import { textareaDataTid } from '../../components/Textarea';
+import { textareaCounterDataTid } from '../../components/Textarea/TextareaCounter';
+import { toastStaticDataTid } from '../../components/Toast/ToastStatic';
+import { toastViewDataTid } from '../../components/Toast/ToastView';
+import { toggleDataTid } from '../../components/Toggle';
+import { tokenDataTid } from '../../components/Token';
+import { tokenInputDataTid } from '../../components/TokenInput';
+import { tokenInputMenuDataTid } from '../../components/TokenInput/TokenInputMenu';
+import { tooltipDataTid } from '../../components/Tooltip';
+import { tooltipMenuDataTid } from '../../components/TooltipMenu';
+import { calendarDataTid } from '../../internal/Calendar';
+import { monthViewDataTid } from '../../internal/Calendar/MonthView';
+import { comboBoxMenuDataTid } from '../../internal/CustomComboBox';
+import { comboBoxViewDataTid } from '../../internal/CustomComboBox/ComboBoxView';
+import { dateSelectDataTid } from '../../internal/DateSelect';
+import { inputLikeTextDataTid } from '../../internal/InputLikeText';
+import { internalMenuDataTid } from '../../internal/InternalMenu';
+import { maskedInputDataTid } from '../../internal/MaskedInput';
+import { menuDataTid } from '../../internal/Menu';
+import { popupDataTid } from '../../internal/Popup';
+import { popupPinDataTid } from '../../internal/Popup/PopupPin';
+import { mobilePopupDataTid } from '../../internal/MobilePopup';
+import { popupMenuDataTid } from '../../internal/PopupMenu';
+
+export const componentsDataTid = [
+  { ['Autocomplete']: [{ ['autocompleteDataTid']: JSON.stringify(autocompleteDataTid) }] },
+  { ['Button']: [{ ['buttonDataTid']: JSON.stringify(buttonDataTid) }] },
+  { ['Center']: [{ ['centerDataTid']: JSON.stringify(centerDataTid) }] },
+  { ['Checkbox']: [{ ['checkboxDataTid']: JSON.stringify(checkboxDataTid) }] },
+  { ['CurrencyInput']: [{ ['currencyInputDataTid']: JSON.stringify(currencyInputDataTid) }] },
+  { ['CurrencyLabel']: [{ ['currencyLabelDataTid']: JSON.stringify(currencyLabelDataTid) }] },
+  {
+    ['DataPicker']: [
+      { ['dataPickerDataTid']: JSON.stringify(dataPickerDataTid) },
+      { ['pickerDataTid']: JSON.stringify(pickerDataTid) },
+    ],
+  },
+  { ['Picker']: [{ ['pickerDataTid']: JSON.stringify(pickerDataTid) }] },
+  { ['Dropdown']: [{ ['dropdownDataTid']: JSON.stringify(dropdownDataTid) }] },
+  {
+    ['FileUploader']: [
+      { ['fileUploaderDataTid']: JSON.stringify(fileUploaderDataTid) },
+      { ['fileUploaderFileDataTid']: JSON.stringify(fileUploaderFileDataTid) },
+      { ['fileUploaderFileListDataTid']: JSON.stringify(fileUploaderFileListDataTid) },
+    ],
+  },
+  { ['FxInput']: [{ ['fxInputDataTid']: JSON.stringify(fxInputDataTid) }] },
+  { ['Gapped']: [{ ['gappedDataTid']: JSON.stringify(gappedDataTid) }] },
+  { ['GlobalLoader']: [{ ['globalLoaderDataTid']: JSON.stringify(globalLoaderDataTid) }] },
+  { ['Group']: [{ ['groupDataTid']: JSON.stringify(groupDataTid) }] },
+  { ['Input']: [{ ['inputDataTid']: JSON.stringify(inputDataTid) }] },
+  { ['Link']: [{ ['linkDataTid']: JSON.stringify(linkDataTid) }] },
+  { ['MenuHeader']: [{ ['menuHeaderDataTid']: JSON.stringify(menuHeaderDataTid) }] },
+  { ['MenuItem']: [{ ['menuItemDataTid']: JSON.stringify(menuItemDataTid) }] },
+  { ['MenuSeparator']: [{ ['menuSeparatorDataTid']: JSON.stringify(menuSeparatorDataTid) }] },
+  {
+    ['Modal']: [
+      { ['modalDataTid']: JSON.stringify(modalDataTid) },
+      { ['modalCloseDataTid']: JSON.stringify(modalCloseDataTid) },
+      { ['modalFooterDataTid']: JSON.stringify(modalFooterDataTid) },
+      { ['modalHeaderDataTid']: JSON.stringify(modalHeaderDataTid) },
+    ],
+  },
+  { ['Paging']: [{ ['pagingDataTid']: JSON.stringify(pagingDataTid) }] },
+  { ['PasswordInput']: [{ ['passwordInputDataTid']: JSON.stringify(passwordInputDataTid) }] },
+  { ['Radio']: [{ ['radioDataTid']: JSON.stringify(radioDataTid) }] },
+  { ['RadioGroup']: [{ ['radioGroupDataTid']: JSON.stringify(radioGroupDataTid) }] },
+  { ['ScrollContainer']: [{ ['scrollContainerDataTid']: JSON.stringify(scrollContainerDataTid) }] },
+  { ['Select']: [{ ['selectDataTid']: JSON.stringify(selectDataTid) }] },
+  {
+    ['SidePage']: [
+      { ['sidePageDataTid']: JSON.stringify(sidePageDataTid) },
+      { ['sidePageBodyDataTid']: JSON.stringify(sidePageBodyDataTid) },
+      { ['sidePageContainerDataTid']: JSON.stringify(sidePageContainerDataTid) },
+      { ['sidePageFooterDataTid']: JSON.stringify(sidePageFooterDataTid) },
+      { ['sidePageHeaderDataTid']: JSON.stringify(sidePageHeaderDataTid) },
+    ],
+  },
+  { ['Spinner']: [{ ['spinnerDataTid']: JSON.stringify(spinnerDataTid) }] },
+  { ['Sticky']: [{ ['stickyDataTid']: JSON.stringify(stickyDataTid) }] },
+  { ['Switcher']: [{ ['switcherDataTid']: JSON.stringify(switcherDataTid) }] },
+  {
+    ['Tabs']: [
+      { ['indicatorDataTid']: JSON.stringify(indicatorDataTid) },
+      { ['tabDataTid']: JSON.stringify(tabDataTid) },
+      { ['tabsDataTid']: JSON.stringify(tabsDataTid) },
+    ],
+  },
+  {
+    ['Textarea']: [
+      { ['textareaDataTid']: JSON.stringify(textareaDataTid) },
+      { ['textareaCounterDataTid']: JSON.stringify(textareaCounterDataTid) },
+    ],
+  },
+  {
+    ['Toast']: [
+      { ['toastStaticDataTid']: JSON.stringify(toastStaticDataTid) },
+      { ['toastViewDataTid']: JSON.stringify(toastViewDataTid) },
+    ],
+  },
+  { ['Toggle']: [{ ['toggleDataTid']: JSON.stringify(toggleDataTid) }] },
+  { ['Token']: [{ ['tokenDataTid']: JSON.stringify(tokenDataTid) }] },
+  {
+    ['TokenInput']: [
+      { ['tokenInputDataTid']: JSON.stringify(tokenInputDataTid) },
+      { ['tokenInputMenuDataTid']: JSON.stringify(tokenInputMenuDataTid) },
+    ],
+  },
+  { ['Tooltip']: [{ ['tooltipDataTid']: JSON.stringify(tooltipDataTid) }] },
+  { ['TooltipMenu']: [{ ['tooltipMenuDataTid']: JSON.stringify(tooltipMenuDataTid) }] },
+  {
+    ['Calendar']: [
+      { ['calendarDataTid']: JSON.stringify(calendarDataTid) },
+      { ['monthViewDataTid']: JSON.stringify(monthViewDataTid) },
+    ],
+  },
+  {
+    ['Combobox']: [
+      { ['comboBoxMenuDataTid']: JSON.stringify(comboBoxMenuDataTid) },
+      { ['comboBoxViewDataTid']: JSON.stringify(comboBoxViewDataTid) },
+    ],
+  },
+  { ['DataSelect']: [{ ['dateSelectDataTid']: JSON.stringify(dateSelectDataTid) }] },
+  {
+    ['FileUploaderControl']: [
+      { ['fileUploaderFileDataTid']: JSON.stringify(fileUploaderFileDataTid) },
+      { ['fileUploaderFileListDataTid']: JSON.stringify(fileUploaderFileListDataTid) },
+    ],
+  },
+  { ['InputLikeText']: [{ ['inputLikeTextDataTid']: JSON.stringify(inputLikeTextDataTid) }] },
+  { ['InternalMenu']: [{ ['internalMenuDataTid']: JSON.stringify(internalMenuDataTid) }] },
+  { ['MaskedInput']: [{ ['maskedInputDataTid']: JSON.stringify(maskedInputDataTid) }] },
+  { ['Menu']: [{ ['menuDataTid']: JSON.stringify(menuDataTid) }] },
+  {
+    ['Popup']: [
+      { ['popupDataTid']: JSON.stringify(popupDataTid) },
+      { ['popupPinDataTid']: JSON.stringify(popupPinDataTid) },
+    ],
+  },
+  { ['MobilePopup']: [{ ['mobilePopupDataTid']: JSON.stringify(mobilePopupDataTid) }] },
+  { ['Popupmenu']: [{ ['popupMenuDataTid']: JSON.stringify(popupMenuDataTid) }] },
+];

From 25cdd3cc114283ec7b03574ae32973afd616aff7 Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Tue, 31 May 2022 11:18:59 +0300
Subject: [PATCH 05/40] chore: small fixes

---
 packages/react-ui/lib/data-tid/DataTid.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-ui/lib/data-tid/DataTid.tsx b/packages/react-ui/lib/data-tid/DataTid.tsx
index 58a4b021f2c..20dd3da7775 100644
--- a/packages/react-ui/lib/data-tid/DataTid.tsx
+++ b/packages/react-ui/lib/data-tid/DataTid.tsx
@@ -30,7 +30,7 @@ export class DataTid extends React.Component<{}, { selectedValue: string }> {
         });
         return (
           <div key={index} className={styles.row()}>
-            <div className={styles.leftCell()}>{componentName}:</div>{' '}
+            <div className={styles.leftCell()}>{componentName}</div>
             <div className={styles.rightCell()}>{dataTidList}</div>
           </div>
         );
@@ -39,10 +39,10 @@ export class DataTid extends React.Component<{}, { selectedValue: string }> {
 
     return (
       <div>
-        Выбрать компонент:{' '}
+        Выбрать компонент:
         <Select<string> items={this.items} value={this.state.selectedValue} onValueChange={this.setValue} />
         <div className={styles.row()}>
-          <div className={styles.leftCell()}>Название компонента:</div>{' '}
+          <div className={styles.leftCell()}>Название компонента:</div>
           <div className={styles.rightCell()}>data-tid</div>
         </div>
         {list}

From 476f8277da9ab0efd025c54acf9dba9f42a79fdb Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Tue, 31 May 2022 19:58:12 +0300
Subject: [PATCH 06/40] chore: delete comments

---
 packages/react-ui/lib/data-tid/DATATID.md | 227 ----------------------
 1 file changed, 227 deletions(-)

diff --git a/packages/react-ui/lib/data-tid/DATATID.md b/packages/react-ui/lib/data-tid/DATATID.md
index 6decf6cad03..215fd0ecf3e 100644
--- a/packages/react-ui/lib/data-tid/DATATID.md
+++ b/packages/react-ui/lib/data-tid/DATATID.md
@@ -6,231 +6,4 @@
 ```jsx harmony
 import {DataTid} from './DataTid';
 <DataTid />
-// const autocompleteDataTid = {
-//   root: 'Autocomplete__root',
-// };
-// const buttonDataTid = {
-//   root: 'Button__root',
-// };
-// const centerDataTid = {
-//   root: 'Center__root',
-// };
-// const checkboxDataTid = {
-//   root: 'Checkbox__root',
-// };
-// const currencyInputDataTid = {
-//   root: 'CurrencyInput__root',
-// };
-// const currencyLabelDataTid = {
-//   root: 'CurrencyLabel__root',
-// };
-// const dataPickerDataTid = {
-//   root: 'DatePicker__root',
-// };
-// const pickerDataTid = {
-//   root: 'Picker__root',
-//   todayWrapper: 'Picker__todayWrapper',
-// };
-// const dropdownDataTid = {
-//   root: 'Dropdown__root',
-// };
-// const fileUploaderDataTid = {
-//   root: 'FileUploader__root',
-//   content: 'FileUploader__content',
-//   link: 'FileUploader__link',
-// };
-// const fxInputDataTid = {
-//   root: 'FxInput__root',
-// };
-// const gappedDataTid = {
-//   vertical: 'Gapped__vertical',
-//   horizontal: 'Gapped__horizontal',
-// };
-// const globalLoaderDataTid = {
-//   root: 'GlobalLoader',
-// };
-// const groupDataTid = {
-//   root: 'Group__root',
-// };
-// const inputDataTid = {
-//   root: 'Input__root',
-// };
-// const linkDataTid = {
-//   root: 'Link__root',
-// };
-// const menuHeaderDataTid = {
-//   root: 'MenuHeader__root',
-// };
-// const menuItemDataTid = {
-//   root: 'MenuItem__root',
-//   comment: 'MenuItem__comment',
-// };
-// const menuSeparatorDataTid = {
-//   root: 'MenuSeparator__root',
-// };
-// const modalDataTid = {
-//   container: 'modal-container',
-//   content: 'modal-content',
-// };
-// const modalCloseDataTid = {
-//   close: 'modal-close',
-// };
-// const modalFooterDataTid = {
-//   root: 'ModalFooter__root',
-// };
-// const modalHeaderDataTid = {
-//   root: 'ModalHeader__root',
-// };
-// const pagingDataTid = {
-//   root: 'Paging__root',
-//   dots: 'Paging__dots',
-//   forwardLink: 'Paging__forwardLink',
-//   pageLinkWrapper: 'Paging__pageLinkWrapper',
-//   pageLink: 'Paging__pageLink',
-// };
-// const passwordInputDataTid = {
-//   root: 'PasswordInput',
-//   capsLockDetector: 'PasswordInputCapsLockDetector',
-//   eyeIcon: 'PasswordInputEyeIcon',
-// };
-// const radioDataTid = {
-//   root: 'Radio__root',
-// };
-// const radioGroupDataTid = {
-//   root: 'RadioGroup__root',
-// };
-// const scrollContainerDataTid = {
-//   root: 'ScrollContainer__root',
-//   inner: 'ScrollContainer__inner',
-// };
-// const selectDataTid = {
-//   root: 'Select__root',
-// };
-// const sidePageDataTid = {
-//   root: 'SidePage__root',
-//   container: 'SidePage__container',
-// };
-// const sidePageBodyDataTid = {
-//   root: 'SidePageBody__root',
-// };
-// const sidePageContainerDataTid = {
-//   root: 'SidePageContainer__root',
-// };
-// const sidePageFooterDataTid = {
-//   root: 'SidePageFooter__root',
-// };
-// const sidePageHeaderDataTid = {
-//   root: 'SidePageHeader__root',
-//   close: 'SidePage__close',
-// };
-// const spinnerDataTid = {
-//   root: 'Spinner__root',
-// };
-// const stickyDataTid = {
-//   root: 'Spinner__root',
-// };
-// const switcherDataTid = {
-//   root: 'Switcher__root',
-// };
-// const indicatorDataTid = {
-//   root: 'Indicator__root',
-// };
-// const tabDataTid = {
-//   root: 'Tab__root',
-// };
-// const tabsDataTid = {
-//   root: 'Tabs__root',
-// };
-// const textareaDataTid = {
-//   root: 'Textarea__root',
-// };
-// const textareaCounterDataTid = {
-//   root: 'TextareaCounter__root',
-// };
-// const toastStaticDataTid = {
-//   root: 'StaticToast',
-// };
-// const toastViewDataTid = {
-//   root: 'ToastView__root',
-//   action: 'ToastView__action',
-//   close: 'ToastView__close',
-// };
-// const toggleDataTid = {
-//   root: 'Toggle__root',
-// };
-// const tokenDataTid = {
-//   root: 'Token__root',
-// };
-// const tokenInputDataTid = {
-//   root: 'TokenInput__root',
-// };
-// const tokenInputMenuDataTid = {
-//   root: 'TokenInputMenu__root',
-// };
-// const tooltipDataTid = {
-//   root: 'Tooltip__root',
-// };
-// const tooltipMenuDataTid = {
-//   root: 'TooltipMenu__root',
-// };
-// const calendarDataTid = {
-//   root: 'Calendar',
-// };
-// const monthViewDataTid = {
-//   month: 'MonthView__month',
-//   headerMonth: 'MonthView__headerMonth',
-//   headerYear: 'MonthView__headerYear',
-// };
-// const comboBoxMenuDataTid = {
-//   loading: 'ComboBoxMenu__loading',
-//   failed: 'ComboBoxMenu__failed',
-//   notFound: 'ComboBoxMenu__notFound',
-//   items: 'ComboBoxMenu__items',
-//   item: 'ComboBoxMenu__item',
-// };
-// const comboBoxViewDataTid = {
-//   root: 'ComboBoxView__root',
-// };
-// const dateSelectDataTid = {
-//   caption: 'DateSelect__caption',
-//   menuItem: 'DateSelect__menuItem',
-// };
-// const fileUploaderFileDataTid = {
-//   file: 'FileUploader__file',
-//   fileTooltip: 'FileUploader__fileTooltip',
-//   fileName: 'FileUploader__fileName',
-//   fileSize: 'FileUploader__fileSize',
-//   fileIcon: 'FileUploader__fileIcon',
-// };
-// const fileUploaderFileListDataTid = {
-//   fileList: 'FileUploader__fileList',
-// };
-// const inputLikeTextDataTid = {
-//   root: 'InputLikeText__root',
-//   input: 'InputLikeText__input',
-// };
-// const internalMenuDataTid = {
-//   root: 'InternalMenu__root',
-// };
-// const maskedInputDataTid = {
-//   root: 'MaskedInput__root',
-// };
-// const menuDataTid = {
-//   root: 'Menu__root',
-// };
-// const mobilePopupDataTid = {
-//   root: 'MobilePopup__root',
-//   container: 'MobilePopup__container',
-// };
-// const popupDataTid = {
-//   content: 'PopupContent',
-//   contentInner: 'PopupContentInner',
-// };
-// const popupPinDataTid = {
-//   root: 'PopupPin__root',
-// };
-// const popupMenuDataTid = {
-//   root: 'PopupMenu_root',
-//   caption: 'PopupMenu__caption',
-// };
 ```

From 9033388531dbc4421bd19549d47c95f8d72d77de Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Tue, 31 May 2022 19:59:15 +0300
Subject: [PATCH 07/40] chore: add origin field

---
 packages/react-ui/components/Autocomplete/Autocomplete.tsx       | 1 +
 packages/react-ui/components/Button/Button.tsx                   | 1 +
 packages/react-ui/components/Center/Center.tsx                   | 1 +
 packages/react-ui/components/Checkbox/Checkbox.tsx               | 1 +
 packages/react-ui/components/CurrencyInput/CurrencyInput.tsx     | 1 +
 packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx     | 1 +
 packages/react-ui/components/DatePicker/DatePicker.tsx           | 1 +
 packages/react-ui/components/DatePicker/Picker.tsx               | 1 +
 packages/react-ui/components/Dropdown/Dropdown.tsx               | 1 +
 packages/react-ui/components/FileUploader/FileUploader.tsx       | 1 +
 packages/react-ui/components/FxInput/FxInput.tsx                 | 1 +
 packages/react-ui/components/Gapped/Gapped.tsx                   | 1 +
 packages/react-ui/components/GlobalLoader/GlobalLoader.tsx       | 1 +
 packages/react-ui/components/Group/Group.tsx                     | 1 +
 packages/react-ui/components/Input/Input.tsx                     | 1 +
 packages/react-ui/components/Link/Link.tsx                       | 1 +
 packages/react-ui/components/Loader/Loader.tsx                   | 1 +
 packages/react-ui/components/MenuHeader/MenuHeader.tsx           | 1 +
 packages/react-ui/components/MenuItem/MenuItem.tsx               | 1 +
 packages/react-ui/components/MenuSeparator/MenuSeparator.tsx     | 1 +
 packages/react-ui/components/Modal/Modal.tsx                     | 1 +
 packages/react-ui/components/Modal/ModalClose.tsx                | 1 +
 packages/react-ui/components/Modal/ModalFooter.tsx               | 1 +
 packages/react-ui/components/Modal/ModalHeader.tsx               | 1 +
 packages/react-ui/components/Paging/Paging.tsx                   | 1 +
 packages/react-ui/components/PasswordInput/PasswordInput.tsx     | 1 +
 packages/react-ui/components/Radio/Radio.tsx                     | 1 +
 packages/react-ui/components/RadioGroup/RadioGroup.tsx           | 1 +
 packages/react-ui/components/ScrollContainer/ScrollContainer.tsx | 1 +
 packages/react-ui/components/Select/Select.tsx                   | 1 +
 packages/react-ui/components/SidePage/SidePage.tsx               | 1 +
 packages/react-ui/components/SidePage/SidePageBody.tsx           | 1 +
 packages/react-ui/components/SidePage/SidePageContainer.tsx      | 1 +
 packages/react-ui/components/SidePage/SidePageFooter.tsx         | 1 +
 packages/react-ui/components/SidePage/SidePageHeader.tsx         | 1 +
 packages/react-ui/components/Spinner/Spinner.tsx                 | 1 +
 packages/react-ui/components/Sticky/Sticky.tsx                   | 1 +
 packages/react-ui/components/Switcher/Switcher.tsx               | 1 +
 packages/react-ui/components/Tabs/Indicator.tsx                  | 1 +
 packages/react-ui/components/Tabs/Tab.tsx                        | 1 +
 packages/react-ui/components/Tabs/Tabs.tsx                       | 1 +
 packages/react-ui/components/Textarea/Textarea.tsx               | 1 +
 packages/react-ui/components/Textarea/TextareaCounter.tsx        | 1 +
 packages/react-ui/components/Toast/ToastStatic.tsx               | 1 +
 packages/react-ui/components/Toast/ToastView.tsx                 | 1 +
 packages/react-ui/components/Toggle/Toggle.tsx                   | 1 +
 packages/react-ui/components/Token/Token.tsx                     | 1 +
 packages/react-ui/components/TokenInput/TokenInput.tsx           | 1 +
 packages/react-ui/components/TokenInput/TokenInputMenu.tsx       | 1 +
 packages/react-ui/components/Tooltip/Tooltip.tsx                 | 1 +
 packages/react-ui/components/TooltipMenu/TooltipMenu.tsx         | 1 +
 packages/react-ui/internal/Calendar/Calendar.tsx                 | 1 +
 packages/react-ui/internal/Calendar/MonthView.tsx                | 1 +
 packages/react-ui/internal/CustomComboBox/ComboBoxMenu.tsx       | 1 +
 packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx       | 1 +
 packages/react-ui/internal/DateSelect/DateSelect.tsx             | 1 +
 .../FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx    | 1 +
 .../FileUploaderFileList/FileUploaderFileList.tsx                | 1 +
 packages/react-ui/internal/InputLikeText/InputLikeText.tsx       | 1 +
 packages/react-ui/internal/InternalMenu/InternalMenu.tsx         | 1 +
 packages/react-ui/internal/MaskedInput/MaskedInput.tsx           | 1 +
 packages/react-ui/internal/Menu/Menu.tsx                         | 1 +
 packages/react-ui/internal/MobilePopup/MobilePopup.tsx           | 1 +
 packages/react-ui/internal/Popup/Popup.tsx                       | 1 +
 packages/react-ui/internal/Popup/PopupPin.tsx                    | 1 +
 packages/react-ui/internal/PopupMenu/PopupMenu.tsx               | 1 +
 66 files changed, 66 insertions(+)

diff --git a/packages/react-ui/components/Autocomplete/Autocomplete.tsx b/packages/react-ui/components/Autocomplete/Autocomplete.tsx
index dcaad53ad74..86af765e709 100644
--- a/packages/react-ui/components/Autocomplete/Autocomplete.tsx
+++ b/packages/react-ui/components/Autocomplete/Autocomplete.tsx
@@ -78,6 +78,7 @@ export interface AutocompleteState {
 }
 
 export const autocompleteDataTid = {
+  origin: 'Autocomplete',
   root: 'Autocomplete__root',
 };
 
diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx
index 96805c093a4..68f06760892 100644
--- a/packages/react-ui/components/Button/Button.tsx
+++ b/packages/react-ui/components/Button/Button.tsx
@@ -165,6 +165,7 @@ export interface ButtonState {
 }
 
 export const buttonDataTid = {
+  origin: 'Button',
   root: 'Button__root',
 };
 
diff --git a/packages/react-ui/components/Center/Center.tsx b/packages/react-ui/components/Center/Center.tsx
index 917f2b269c4..84f8bfdc372 100644
--- a/packages/react-ui/components/Center/Center.tsx
+++ b/packages/react-ui/components/Center/Center.tsx
@@ -24,6 +24,7 @@ export interface CenterProps
     > {}
 
 export const centerDataTid = {
+  origin: 'Center',
   root: 'Center__root',
 };
 
diff --git a/packages/react-ui/components/Checkbox/Checkbox.tsx b/packages/react-ui/components/Checkbox/Checkbox.tsx
index 78969722852..895bb617763 100644
--- a/packages/react-ui/components/Checkbox/Checkbox.tsx
+++ b/packages/react-ui/components/Checkbox/Checkbox.tsx
@@ -64,6 +64,7 @@ export interface CheckboxState {
 }
 
 export const checkboxDataTid = {
+  origin: 'Checkbox',
   root: 'Checkbox__root',
 };
 @rootNode
diff --git a/packages/react-ui/components/CurrencyInput/CurrencyInput.tsx b/packages/react-ui/components/CurrencyInput/CurrencyInput.tsx
index 61eeff61f2d..ff4f2458e68 100644
--- a/packages/react-ui/components/CurrencyInput/CurrencyInput.tsx
+++ b/packages/react-ui/components/CurrencyInput/CurrencyInput.tsx
@@ -47,6 +47,7 @@ export interface CurrencyInputState {
 }
 
 export const currencyInputDataTid = {
+  origin: 'CurrencyInput',
   root: 'CurrencyInput__root',
 };
 
diff --git a/packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx b/packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx
index ade95aba987..daba5772a29 100644
--- a/packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx
+++ b/packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx
@@ -19,6 +19,7 @@ export const defaultProps = {
 };
 
 export const currencyLabelDataTid = {
+  origin: 'CurrencyLabel',
   root: 'CurrencyLabel__root',
 };
 
diff --git a/packages/react-ui/components/DatePicker/DatePicker.tsx b/packages/react-ui/components/DatePicker/DatePicker.tsx
index 4c3874a8ce2..71543c7a59c 100644
--- a/packages/react-ui/components/DatePicker/DatePicker.tsx
+++ b/packages/react-ui/components/DatePicker/DatePicker.tsx
@@ -86,6 +86,7 @@ export interface DatePickerState {
 type DatePickerValue = string;
 
 export const dataPickerDataTid = {
+  origin: 'DatePicker',
   root: 'DatePicker__root',
 };
 
diff --git a/packages/react-ui/components/DatePicker/Picker.tsx b/packages/react-ui/components/DatePicker/Picker.tsx
index 84dfd9238ff..d50041e1224 100644
--- a/packages/react-ui/components/DatePicker/Picker.tsx
+++ b/packages/react-ui/components/DatePicker/Picker.tsx
@@ -37,6 +37,7 @@ const getTodayCalendarDate = () => {
 };
 
 export const pickerDataTid = {
+  origin: 'Picker',
   root: 'Picker__root',
   todayWrapper: 'Picker__todayWrapper',
 };
diff --git a/packages/react-ui/components/Dropdown/Dropdown.tsx b/packages/react-ui/components/Dropdown/Dropdown.tsx
index 37ebeb71a17..feb27f91ca8 100644
--- a/packages/react-ui/components/Dropdown/Dropdown.tsx
+++ b/packages/react-ui/components/Dropdown/Dropdown.tsx
@@ -88,6 +88,7 @@ export interface DropdownProps extends CommonProps {
 type DropdownSelectType = Select<React.ReactNode, React.ReactNode>;
 
 export const dropdownDataTid = {
+  origin: 'Dropdown',
   root: 'Dropdown__root',
 };
 
diff --git a/packages/react-ui/components/FileUploader/FileUploader.tsx b/packages/react-ui/components/FileUploader/FileUploader.tsx
index b5cae543a3b..795cbac35e6 100644
--- a/packages/react-ui/components/FileUploader/FileUploader.tsx
+++ b/packages/react-ui/components/FileUploader/FileUploader.tsx
@@ -62,6 +62,7 @@ export interface FileUploaderRef {
 }
 
 export const fileUploaderDataTid = {
+  origin: 'FileUploader',
   root: 'FileUploader__root',
   content: 'FileUploader__content',
   link: 'FileUploader__link',
diff --git a/packages/react-ui/components/FxInput/FxInput.tsx b/packages/react-ui/components/FxInput/FxInput.tsx
index 8089b7932ae..85512f3e53f 100644
--- a/packages/react-ui/components/FxInput/FxInput.tsx
+++ b/packages/react-ui/components/FxInput/FxInput.tsx
@@ -34,6 +34,7 @@ export interface FxInputProps
     > {}
 
 export const fxInputDataTid = {
+  origin: 'FxInput',
   root: 'FxInput__root',
 };
 
diff --git a/packages/react-ui/components/Gapped/Gapped.tsx b/packages/react-ui/components/Gapped/Gapped.tsx
index 39385707d6c..f064912b6eb 100644
--- a/packages/react-ui/components/Gapped/Gapped.tsx
+++ b/packages/react-ui/components/Gapped/Gapped.tsx
@@ -29,6 +29,7 @@ export interface GappedProps extends CommonProps {
 }
 
 export const gappedDataTid = {
+  origin: 'Gapped',
   vertical: 'Gapped__vertical',
   horizontal: 'Gapped__horizontal',
 };
diff --git a/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx b/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx
index 7e1f165b3c2..a0ac0e6a1c8 100644
--- a/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx
+++ b/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx
@@ -73,6 +73,7 @@ interface DefaultProps {
 export type GlobalLoaderComponentProps = GlobalLoaderProps & DefaultProps;
 
 export const globalLoaderDataTid = {
+  origin: 'GlobalLoader',
   root: 'GlobalLoader',
 };
 
diff --git a/packages/react-ui/components/Group/Group.tsx b/packages/react-ui/components/Group/Group.tsx
index 3f7afff44e8..f555da243a4 100644
--- a/packages/react-ui/components/Group/Group.tsx
+++ b/packages/react-ui/components/Group/Group.tsx
@@ -21,6 +21,7 @@ interface GroupChildProps {
 }
 
 export const groupDataTid = {
+  origin: 'Group',
   root: 'Group__root',
 };
 
diff --git a/packages/react-ui/components/Input/Input.tsx b/packages/react-ui/components/Input/Input.tsx
index b04f1964cd2..f4e1c5d9b22 100644
--- a/packages/react-ui/components/Input/Input.tsx
+++ b/packages/react-ui/components/Input/Input.tsx
@@ -108,6 +108,7 @@ export interface InputState {
 }
 
 export const inputDataTid = {
+  origin: 'Input',
   root: 'Input__root',
 };
 
diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx
index 3b93ddc50c0..691916e4dce 100644
--- a/packages/react-ui/components/Link/Link.tsx
+++ b/packages/react-ui/components/Link/Link.tsx
@@ -62,6 +62,7 @@ export interface LinkState {
 }
 
 export const linkDataTid = {
+  origin: 'Link',
   root: 'Link__root',
 };
 
diff --git a/packages/react-ui/components/Loader/Loader.tsx b/packages/react-ui/components/Loader/Loader.tsx
index 2a547a518fe..46e3345dc31 100644
--- a/packages/react-ui/components/Loader/Loader.tsx
+++ b/packages/react-ui/components/Loader/Loader.tsx
@@ -52,6 +52,7 @@ export interface LoaderState {
 }
 
 export const loaderDataTid = {
+  origin: 'Loader',
   vail: 'Loader__Veil',
   spinner: 'Loader__Spinner',
 };
diff --git a/packages/react-ui/components/MenuHeader/MenuHeader.tsx b/packages/react-ui/components/MenuHeader/MenuHeader.tsx
index 9533a5b05af..9c3b6025a4c 100644
--- a/packages/react-ui/components/MenuHeader/MenuHeader.tsx
+++ b/packages/react-ui/components/MenuHeader/MenuHeader.tsx
@@ -12,6 +12,7 @@ export interface MenuHeaderProps extends CommonProps {
 }
 
 export const menuHeaderDataTid = {
+  origin: 'MenuHeader',
   root: 'MenuHeader__root',
 };
 
diff --git a/packages/react-ui/components/MenuItem/MenuItem.tsx b/packages/react-ui/components/MenuItem/MenuItem.tsx
index fdbad2279b2..51fb259d4ce 100644
--- a/packages/react-ui/components/MenuItem/MenuItem.tsx
+++ b/packages/react-ui/components/MenuItem/MenuItem.tsx
@@ -77,6 +77,7 @@ export interface MenuItemProps extends CommonProps {
 }
 
 export const menuItemDataTid = {
+  origin: 'MenuItem',
   root: 'MenuItem__root',
   comment: 'MenuItem__comment',
 };
diff --git a/packages/react-ui/components/MenuSeparator/MenuSeparator.tsx b/packages/react-ui/components/MenuSeparator/MenuSeparator.tsx
index c8649370c54..11016536195 100644
--- a/packages/react-ui/components/MenuSeparator/MenuSeparator.tsx
+++ b/packages/react-ui/components/MenuSeparator/MenuSeparator.tsx
@@ -8,6 +8,7 @@ import { styles } from './MenuSeparator.styles';
 export type MenuSeparatorProps = CommonProps;
 
 export const menuSeparatorDataTid = {
+  origin: 'MenuSeparator',
   root: 'MenuSeparator__root',
 };
 /**
diff --git a/packages/react-ui/components/Modal/Modal.tsx b/packages/react-ui/components/Modal/Modal.tsx
index 322d9b947e2..a1c090001fd 100644
--- a/packages/react-ui/components/Modal/Modal.tsx
+++ b/packages/react-ui/components/Modal/Modal.tsx
@@ -71,6 +71,7 @@ export interface ModalState {
 }
 
 export const modalDataTid = {
+  origin: 'Modal',
   container: 'modal-container',
   content: 'modal-content',
 };
diff --git a/packages/react-ui/components/Modal/ModalClose.tsx b/packages/react-ui/components/Modal/ModalClose.tsx
index e2a2a28a7e1..719be008169 100644
--- a/packages/react-ui/components/Modal/ModalClose.tsx
+++ b/packages/react-ui/components/Modal/ModalClose.tsx
@@ -11,6 +11,7 @@ import { CloseProps } from './ModalContext';
 import { styles } from './Modal.styles';
 
 export const modalCloseDataTid = {
+  origin: 'ModalClose',
   close: 'modal-close',
 };
 
diff --git a/packages/react-ui/components/Modal/ModalFooter.tsx b/packages/react-ui/components/Modal/ModalFooter.tsx
index 67461049738..c60020ac48c 100644
--- a/packages/react-ui/components/Modal/ModalFooter.tsx
+++ b/packages/react-ui/components/Modal/ModalFooter.tsx
@@ -21,6 +21,7 @@ export interface ModalFooterProps extends CommonProps {
 }
 
 export const modalFooterDataTid = {
+  origin: 'ModalFooter',
   root: 'ModalFooter__root',
 };
 
diff --git a/packages/react-ui/components/Modal/ModalHeader.tsx b/packages/react-ui/components/Modal/ModalHeader.tsx
index b5a5510152a..dada116cf36 100644
--- a/packages/react-ui/components/Modal/ModalHeader.tsx
+++ b/packages/react-ui/components/Modal/ModalHeader.tsx
@@ -17,6 +17,7 @@ export interface ModalHeaderProps extends CommonProps {
 }
 
 export const modalHeaderDataTid = {
+  origin: 'ModalHeader',
   root: 'ModalHeader__root',
 };
 
diff --git a/packages/react-ui/components/Paging/Paging.tsx b/packages/react-ui/components/Paging/Paging.tsx
index 4c7f815ef34..e342095c821 100644
--- a/packages/react-ui/components/Paging/Paging.tsx
+++ b/packages/react-ui/components/Paging/Paging.tsx
@@ -75,6 +75,7 @@ export interface PagingState {
 export type ItemType = number | '.' | 'forward';
 
 export const pagingDataTid = {
+  origin: 'Paging',
   root: 'Paging__root',
   dots: 'Paging__dots',
   forwardLink: 'Paging__forwardLink',
diff --git a/packages/react-ui/components/PasswordInput/PasswordInput.tsx b/packages/react-ui/components/PasswordInput/PasswordInput.tsx
index e087fd792a0..f4a145634ec 100644
--- a/packages/react-ui/components/PasswordInput/PasswordInput.tsx
+++ b/packages/react-ui/components/PasswordInput/PasswordInput.tsx
@@ -25,6 +25,7 @@ export interface PasswordInputState {
 }
 
 export const passwordInputDataTid = {
+  origin: 'PasswordInput',
   root: 'PasswordInput',
   capsLockDetector: 'PasswordInputCapsLockDetector',
   eyeIcon: 'PasswordInputEyeIcon',
diff --git a/packages/react-ui/components/Radio/Radio.tsx b/packages/react-ui/components/Radio/Radio.tsx
index 2c4d7a3c3ae..05b75421fcf 100644
--- a/packages/react-ui/components/Radio/Radio.tsx
+++ b/packages/react-ui/components/Radio/Radio.tsx
@@ -58,6 +58,7 @@ export interface RadioState {
 }
 
 export const radioDataTid = {
+  origin: 'Radio',
   root: 'Radio__root',
 };
 
diff --git a/packages/react-ui/components/RadioGroup/RadioGroup.tsx b/packages/react-ui/components/RadioGroup/RadioGroup.tsx
index 94d8fc36aee..096b06a6d16 100644
--- a/packages/react-ui/components/RadioGroup/RadioGroup.tsx
+++ b/packages/react-ui/components/RadioGroup/RadioGroup.tsx
@@ -82,6 +82,7 @@ export interface RadioGroupState<T> {
 }
 
 export const radioGroupDataTid = {
+  origin: 'RadioGroup',
   root: 'RadioGroup__root',
 };
 
diff --git a/packages/react-ui/components/ScrollContainer/ScrollContainer.tsx b/packages/react-ui/components/ScrollContainer/ScrollContainer.tsx
index 4cf7dc93f63..211e9c8d36c 100644
--- a/packages/react-ui/components/ScrollContainer/ScrollContainer.tsx
+++ b/packages/react-ui/components/ScrollContainer/ScrollContainer.tsx
@@ -51,6 +51,7 @@ export interface ScrollContainerProps extends CommonProps {
 }
 
 export const scrollContainerDataTid = {
+  origin: 'ScrollContainer',
   root: 'ScrollContainer__root',
   inner: 'ScrollContainer__inner',
 };
diff --git a/packages/react-ui/components/Select/Select.tsx b/packages/react-ui/components/Select/Select.tsx
index 3713995516c..e597302b6ba 100644
--- a/packages/react-ui/components/Select/Select.tsx
+++ b/packages/react-ui/components/Select/Select.tsx
@@ -59,6 +59,7 @@ const PASS_BUTTON_PROPS = {
 };
 
 export const selectDataTid = {
+  origin: 'Select',
   root: 'Select__root',
 };
 
diff --git a/packages/react-ui/components/SidePage/SidePage.tsx b/packages/react-ui/components/SidePage/SidePage.tsx
index 8e1650c4c30..c5c028106ae 100644
--- a/packages/react-ui/components/SidePage/SidePage.tsx
+++ b/packages/react-ui/components/SidePage/SidePage.tsx
@@ -85,6 +85,7 @@ export interface SidePageState {
 }
 
 export const sidePageDataTid = {
+  origin: 'SidePage',
   root: 'SidePage__root',
   container: 'SidePage__container',
 };
diff --git a/packages/react-ui/components/SidePage/SidePageBody.tsx b/packages/react-ui/components/SidePage/SidePageBody.tsx
index eb5797090a3..8173033d3ff 100644
--- a/packages/react-ui/components/SidePage/SidePageBody.tsx
+++ b/packages/react-ui/components/SidePage/SidePageBody.tsx
@@ -14,6 +14,7 @@ export interface SidePageBodyProps extends CommonProps {
 }
 
 export const sidePageBodyDataTid = {
+  origin: 'SidePageBody',
   root: 'SidePageBody__root',
 };
 /**
diff --git a/packages/react-ui/components/SidePage/SidePageContainer.tsx b/packages/react-ui/components/SidePage/SidePageContainer.tsx
index b062629aa0e..7b10fc19467 100644
--- a/packages/react-ui/components/SidePage/SidePageContainer.tsx
+++ b/packages/react-ui/components/SidePage/SidePageContainer.tsx
@@ -13,6 +13,7 @@ import { SidePageContext } from './SidePageContext';
 export type SidePageContainerProps = CommonProps;
 
 export const sidePageContainerDataTid = {
+  origin: 'SidePageContainer',
   root: 'SidePageContainer__root',
 };
 
diff --git a/packages/react-ui/components/SidePage/SidePageFooter.tsx b/packages/react-ui/components/SidePage/SidePageFooter.tsx
index 24f07fa96d1..976522a0b54 100644
--- a/packages/react-ui/components/SidePage/SidePageFooter.tsx
+++ b/packages/react-ui/components/SidePage/SidePageFooter.tsx
@@ -22,6 +22,7 @@ export interface SidePageFooterProps extends CommonProps {
 }
 
 export const sidePageFooterDataTid = {
+  origin: 'SidePageFooter',
   root: 'SidePageFooter__root',
 };
 
diff --git a/packages/react-ui/components/SidePage/SidePageHeader.tsx b/packages/react-ui/components/SidePage/SidePageHeader.tsx
index b5e698279a2..36ce69dad0e 100644
--- a/packages/react-ui/components/SidePage/SidePageHeader.tsx
+++ b/packages/react-ui/components/SidePage/SidePageHeader.tsx
@@ -26,6 +26,7 @@ export interface SidePageHeaderState {
 }
 
 export const sidePageHeaderDataTid = {
+  origin: 'SidePageHeader',
   root: 'SidePageHeader__root',
   close: 'SidePage__close',
 };
diff --git a/packages/react-ui/components/Spinner/Spinner.tsx b/packages/react-ui/components/Spinner/Spinner.tsx
index 4ca4707e651..485bb72ea26 100644
--- a/packages/react-ui/components/Spinner/Spinner.tsx
+++ b/packages/react-ui/components/Spinner/Spinner.tsx
@@ -40,6 +40,7 @@ export interface SpinnerProps extends CommonProps {
 }
 
 export const spinnerDataTid = {
+  origin: 'Spinner',
   root: 'Spinner__root',
 };
 
diff --git a/packages/react-ui/components/Sticky/Sticky.tsx b/packages/react-ui/components/Sticky/Sticky.tsx
index ddffff7edd4..cb683686602 100644
--- a/packages/react-ui/components/Sticky/Sticky.tsx
+++ b/packages/react-ui/components/Sticky/Sticky.tsx
@@ -37,6 +37,7 @@ export interface StickyState {
 }
 
 export const stickyDataTid = {
+  origin: 'Sticky',
   root: 'Spinner__root',
 };
 
diff --git a/packages/react-ui/components/Switcher/Switcher.tsx b/packages/react-ui/components/Switcher/Switcher.tsx
index 32a2a43c61f..0d87b794c8c 100644
--- a/packages/react-ui/components/Switcher/Switcher.tsx
+++ b/packages/react-ui/components/Switcher/Switcher.tsx
@@ -18,6 +18,7 @@ export type SwitcherSize = ButtonSize;
 type SwitcherItems = string | SwitcherItem;
 
 export const switcherDataTid = {
+  origin: 'Switcher',
   root: 'Switcher__root',
 };
 
diff --git a/packages/react-ui/components/Tabs/Indicator.tsx b/packages/react-ui/components/Tabs/Indicator.tsx
index 8c8937a916f..9f038e74578 100644
--- a/packages/react-ui/components/Tabs/Indicator.tsx
+++ b/packages/react-ui/components/Tabs/Indicator.tsx
@@ -26,6 +26,7 @@ export interface IndicatorState {
 }
 
 export const indicatorDataTid = {
+  origin: 'Indicator',
   root: 'Indicator__root',
 };
 
diff --git a/packages/react-ui/components/Tabs/Tab.tsx b/packages/react-ui/components/Tabs/Tab.tsx
index b209419906c..7bda9be8a7e 100644
--- a/packages/react-ui/components/Tabs/Tab.tsx
+++ b/packages/react-ui/components/Tabs/Tab.tsx
@@ -25,6 +25,7 @@ export interface TabIndicators {
 }
 
 export const tabDataTid = {
+  origin: 'Tab',
   root: 'Tab__root',
 };
 
diff --git a/packages/react-ui/components/Tabs/Tabs.tsx b/packages/react-ui/components/Tabs/Tabs.tsx
index 0b8ac862dfe..2778c7cde43 100644
--- a/packages/react-ui/components/Tabs/Tabs.tsx
+++ b/packages/react-ui/components/Tabs/Tabs.tsx
@@ -54,6 +54,7 @@ export interface TabsProps<T extends ValueBaseType = string> extends CommonProps
 }
 
 export const tabsDataTid = {
+  origin: 'Tabs',
   root: 'Tabs__root',
 };
 
diff --git a/packages/react-ui/components/Textarea/Textarea.tsx b/packages/react-ui/components/Textarea/Textarea.tsx
index 54cde7c3cf7..82bd7d8cbb6 100644
--- a/packages/react-ui/components/Textarea/Textarea.tsx
+++ b/packages/react-ui/components/Textarea/Textarea.tsx
@@ -112,6 +112,7 @@ export interface TextareaState {
 }
 
 export const textareaDataTid = {
+  origin: 'Textarea',
   root: 'Textarea__root',
 };
 
diff --git a/packages/react-ui/components/Textarea/TextareaCounter.tsx b/packages/react-ui/components/Textarea/TextareaCounter.tsx
index 5ee9b437b79..c8189695095 100644
--- a/packages/react-ui/components/Textarea/TextareaCounter.tsx
+++ b/packages/react-ui/components/Textarea/TextareaCounter.tsx
@@ -23,6 +23,7 @@ export interface TextareaCounterRef {
 }
 
 export const textareaCounterDataTid = {
+  origin: 'Textarea',
   root: 'TextareaCounter__root',
 };
 
diff --git a/packages/react-ui/components/Toast/ToastStatic.tsx b/packages/react-ui/components/Toast/ToastStatic.tsx
index e9e1898d246..79e62a1fab6 100644
--- a/packages/react-ui/components/Toast/ToastStatic.tsx
+++ b/packages/react-ui/components/Toast/ToastStatic.tsx
@@ -6,6 +6,7 @@ import { Nullable } from '../../typings/utility-types';
 import { Toast, Action } from './Toast';
 
 export const toastStaticDataTid = {
+  origin: 'StaticToast',
   root: 'StaticToast',
 };
 
diff --git a/packages/react-ui/components/Toast/ToastView.tsx b/packages/react-ui/components/Toast/ToastView.tsx
index 7c88c139827..d3c71630fad 100644
--- a/packages/react-ui/components/Toast/ToastView.tsx
+++ b/packages/react-ui/components/Toast/ToastView.tsx
@@ -28,6 +28,7 @@ export interface ToastViewProps extends CommonProps {
 }
 
 export const toastViewDataTid = {
+  origin: 'ToastView',
   root: 'ToastView__root',
   action: 'ToastView__action',
   close: 'ToastView__close',
diff --git a/packages/react-ui/components/Toggle/Toggle.tsx b/packages/react-ui/components/Toggle/Toggle.tsx
index 440de8ba507..185e15aa06d 100644
--- a/packages/react-ui/components/Toggle/Toggle.tsx
+++ b/packages/react-ui/components/Toggle/Toggle.tsx
@@ -83,6 +83,7 @@ export interface ToggleState {
 }
 
 export const toggleDataTid = {
+  origin: 'Toggle',
   root: 'Toggle__root',
 };
 
diff --git a/packages/react-ui/components/Token/Token.tsx b/packages/react-ui/components/Token/Token.tsx
index 5612f20757a..b4b1b115203 100644
--- a/packages/react-ui/components/Token/Token.tsx
+++ b/packages/react-ui/components/Token/Token.tsx
@@ -40,6 +40,7 @@ export interface TokenProps extends CommonProps {
 }
 
 export const tokenDataTid = {
+  origin: 'Token',
   root: 'Token__root',
 };
 
diff --git a/packages/react-ui/components/TokenInput/TokenInput.tsx b/packages/react-ui/components/TokenInput/TokenInput.tsx
index b422d2d6d3b..3fea6b6d117 100644
--- a/packages/react-ui/components/TokenInput/TokenInput.tsx
+++ b/packages/react-ui/components/TokenInput/TokenInput.tsx
@@ -152,6 +152,7 @@ export const DefaultState = {
 };
 
 export const tokenInputDataTid = {
+  origin: 'TokenInput',
   root: 'TokenInput__root',
 };
 
diff --git a/packages/react-ui/components/TokenInput/TokenInputMenu.tsx b/packages/react-ui/components/TokenInput/TokenInputMenu.tsx
index f2c0bcded64..8a12d3370a2 100644
--- a/packages/react-ui/components/TokenInput/TokenInputMenu.tsx
+++ b/packages/react-ui/components/TokenInput/TokenInputMenu.tsx
@@ -16,6 +16,7 @@ export interface TokenInputMenuProps<T> extends ComboBoxMenuProps<T> {
 }
 
 export const tokenInputMenuDataTid = {
+  origin: 'TokenInputMenu',
   root: 'TokenInputMenu__root',
 };
 
diff --git a/packages/react-ui/components/Tooltip/Tooltip.tsx b/packages/react-ui/components/Tooltip/Tooltip.tsx
index 9ccc85f5309..6c7d811049b 100644
--- a/packages/react-ui/components/Tooltip/Tooltip.tsx
+++ b/packages/react-ui/components/Tooltip/Tooltip.tsx
@@ -135,6 +135,7 @@ export interface TooltipState {
 }
 
 export const tooltipDataTid = {
+  origin: 'Tooltip',
   root: 'Tooltip__root',
 };
 
diff --git a/packages/react-ui/components/TooltipMenu/TooltipMenu.tsx b/packages/react-ui/components/TooltipMenu/TooltipMenu.tsx
index 72a234350c6..8d77259bd68 100644
--- a/packages/react-ui/components/TooltipMenu/TooltipMenu.tsx
+++ b/packages/react-ui/components/TooltipMenu/TooltipMenu.tsx
@@ -51,6 +51,7 @@ export interface TooltipMenuProps extends CommonProps {
 }
 
 export const tooltipMenuDataTid = {
+  origin: 'TooltipMenu',
   root: 'TooltipMenu__root',
 };
 
diff --git a/packages/react-ui/internal/Calendar/Calendar.tsx b/packages/react-ui/internal/Calendar/Calendar.tsx
index 0f5bbf0c6fc..7f5202b285e 100644
--- a/packages/react-ui/internal/Calendar/Calendar.tsx
+++ b/packages/react-ui/internal/Calendar/Calendar.tsx
@@ -37,6 +37,7 @@ export interface CalendarState {
 }
 
 export const calendarDataTid = {
+  origin: 'Calendar',
   root: 'Calendar',
 };
 
diff --git a/packages/react-ui/internal/Calendar/MonthView.tsx b/packages/react-ui/internal/Calendar/MonthView.tsx
index e86cab993c4..732855b7234 100644
--- a/packages/react-ui/internal/Calendar/MonthView.tsx
+++ b/packages/react-ui/internal/Calendar/MonthView.tsx
@@ -27,6 +27,7 @@ interface MonthViewProps {
 }
 
 export const monthViewDataTid = {
+  origin: 'MonthView',
   month: 'MonthView__month',
   headerMonth: 'MonthView__headerMonth',
   headerYear: 'MonthView__headerYear',
diff --git a/packages/react-ui/internal/CustomComboBox/ComboBoxMenu.tsx b/packages/react-ui/internal/CustomComboBox/ComboBoxMenu.tsx
index 8a39cbf1de0..f5ef7aa5f4b 100644
--- a/packages/react-ui/internal/CustomComboBox/ComboBoxMenu.tsx
+++ b/packages/react-ui/internal/CustomComboBox/ComboBoxMenu.tsx
@@ -29,6 +29,7 @@ export interface ComboBoxMenuProps<T> {
 }
 
 export const comboBoxMenuDataTid = {
+  origin: 'ComboBoxMenu',
   loading: 'ComboBoxMenu__loading',
   failed: 'ComboBoxMenu__failed',
   notFound: 'ComboBoxMenu__notFound',
diff --git a/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx b/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx
index 45a95f25815..08e70b8df44 100644
--- a/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx
+++ b/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx
@@ -80,6 +80,7 @@ interface ComboBoxViewState {
 }
 
 export const comboBoxViewDataTid = {
+  origin: 'ComboBoxView',
   root: 'ComboBoxView__root',
 };
 
diff --git a/packages/react-ui/internal/DateSelect/DateSelect.tsx b/packages/react-ui/internal/DateSelect/DateSelect.tsx
index 63e995d3019..3b530c38524 100644
--- a/packages/react-ui/internal/DateSelect/DateSelect.tsx
+++ b/packages/react-ui/internal/DateSelect/DateSelect.tsx
@@ -46,6 +46,7 @@ export interface DateSelectState {
 }
 
 export const dateSelectDataTid = {
+  origin: 'DataSelect',
   caption: 'DateSelect__caption',
   menuItem: 'DateSelect__menuItem',
 };
diff --git a/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx b/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx
index 5fc7a1e0dc9..ae526a4b90c 100644
--- a/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx
+++ b/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx
@@ -26,6 +26,7 @@ interface FileUploaderFileProps {
 }
 
 export const fileUploaderFileDataTid = {
+  origin: 'FileUploaderFile',
   file: 'FileUploader__file',
   fileTooltip: 'FileUploader__fileTooltip',
   fileName: 'FileUploader__fileName',
diff --git a/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx b/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx
index 461ea5be51b..ddeda1f3c6b 100644
--- a/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx
+++ b/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx
@@ -12,6 +12,7 @@ interface FileUploaderFileListProps {
 }
 
 export const fileUploaderFileListDataTid = {
+  origin: 'FileUploaderFileList',
   fileList: 'FileUploader__fileList',
 };
 
diff --git a/packages/react-ui/internal/InputLikeText/InputLikeText.tsx b/packages/react-ui/internal/InputLikeText/InputLikeText.tsx
index 075b2da8cab..2c9b32afbb1 100644
--- a/packages/react-ui/internal/InputLikeText/InputLikeText.tsx
+++ b/packages/react-ui/internal/InputLikeText/InputLikeText.tsx
@@ -31,6 +31,7 @@ export interface InputLikeTextProps extends CommonProps, InputProps {
 export type InputLikeTextState = Omit<InputState, 'needsPolyfillPlaceholder'>;
 
 export const inputLikeTextDataTid = {
+  origin: 'InputLikeText',
   root: 'InputLikeText__root',
   input: 'InputLikeText__input',
 };
diff --git a/packages/react-ui/internal/InternalMenu/InternalMenu.tsx b/packages/react-ui/internal/InternalMenu/InternalMenu.tsx
index 8cfe8ffd3a4..5e797464b4c 100644
--- a/packages/react-ui/internal/InternalMenu/InternalMenu.tsx
+++ b/packages/react-ui/internal/InternalMenu/InternalMenu.tsx
@@ -44,6 +44,7 @@ interface MenuState {
 }
 
 export const internalMenuDataTid = {
+  origin: 'InternalMenu',
   root: 'InternalMenu__root',
 };
 
diff --git a/packages/react-ui/internal/MaskedInput/MaskedInput.tsx b/packages/react-ui/internal/MaskedInput/MaskedInput.tsx
index ffaf1b892c3..8209a337380 100644
--- a/packages/react-ui/internal/MaskedInput/MaskedInput.tsx
+++ b/packages/react-ui/internal/MaskedInput/MaskedInput.tsx
@@ -26,6 +26,7 @@ interface MaskedInputState {
 }
 
 export const maskedInputDataTid = {
+  origin: 'MaskedInput',
   root: 'MaskedInput__root',
 };
 
diff --git a/packages/react-ui/internal/Menu/Menu.tsx b/packages/react-ui/internal/Menu/Menu.tsx
index 0adda0d32eb..66fecfe29e4 100644
--- a/packages/react-ui/internal/Menu/Menu.tsx
+++ b/packages/react-ui/internal/Menu/Menu.tsx
@@ -32,6 +32,7 @@ export interface MenuState {
 }
 
 export const menuDataTid = {
+  origin: 'Menu',
   root: 'Menu__root',
 };
 
diff --git a/packages/react-ui/internal/MobilePopup/MobilePopup.tsx b/packages/react-ui/internal/MobilePopup/MobilePopup.tsx
index 2a8d366be7d..643d0e6760b 100644
--- a/packages/react-ui/internal/MobilePopup/MobilePopup.tsx
+++ b/packages/react-ui/internal/MobilePopup/MobilePopup.tsx
@@ -36,6 +36,7 @@ interface MobilePopupState {
 }
 
 export const mobilePopupDataTid = {
+  origin: 'MobilePopup',
   root: 'MobilePopup__root',
   container: 'MobilePopup__container',
 };
diff --git a/packages/react-ui/internal/Popup/Popup.tsx b/packages/react-ui/internal/Popup/Popup.tsx
index e4f61025431..7fa34c2c22e 100644
--- a/packages/react-ui/internal/Popup/Popup.tsx
+++ b/packages/react-ui/internal/Popup/Popup.tsx
@@ -114,6 +114,7 @@ export interface PopupState {
 }
 
 export const popupDataTid = {
+  origin: 'Popup',
   content: 'PopupContent',
   contentInner: 'PopupContentInner',
 };
diff --git a/packages/react-ui/internal/Popup/PopupPin.tsx b/packages/react-ui/internal/Popup/PopupPin.tsx
index 70dcdca4906..935dbbab508 100644
--- a/packages/react-ui/internal/Popup/PopupPin.tsx
+++ b/packages/react-ui/internal/Popup/PopupPin.tsx
@@ -26,6 +26,7 @@ interface Props {
 }
 
 export const popupPinDataTid = {
+  origin: 'PopupPin',
   root: 'PopupPin__root',
 };
 
diff --git a/packages/react-ui/internal/PopupMenu/PopupMenu.tsx b/packages/react-ui/internal/PopupMenu/PopupMenu.tsx
index e277a4bd777..cfe092a05ed 100644
--- a/packages/react-ui/internal/PopupMenu/PopupMenu.tsx
+++ b/packages/react-ui/internal/PopupMenu/PopupMenu.tsx
@@ -68,6 +68,7 @@ export const PopupMenuType = {
 };
 
 export const popupMenuDataTid = {
+  origin: 'PopupMenu',
   root: 'PopupMenu_root',
   caption: 'PopupMenu__caption',
 };

From f3e53521e53c1d206003921c444c5405de967d80 Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Wed, 1 Jun 2022 10:41:30 +0300
Subject: [PATCH 08/40] chore: refactor componentsDataTid

---
 packages/react-ui/lib/data-tid/DataTid.tsx    |  23 +-
 .../lib/data-tid/componentsDataTid.ts         | 199 ++----------------
 2 files changed, 28 insertions(+), 194 deletions(-)

diff --git a/packages/react-ui/lib/data-tid/DataTid.tsx b/packages/react-ui/lib/data-tid/DataTid.tsx
index 20dd3da7775..876cdb57de2 100644
--- a/packages/react-ui/lib/data-tid/DataTid.tsx
+++ b/packages/react-ui/lib/data-tid/DataTid.tsx
@@ -10,28 +10,27 @@ export class DataTid extends React.Component<{}, { selectedValue: string }> {
     selectedValue: 'все',
   };
 
-  private items = ['все', ...componentsDataTid.map((el) => Object.keys(el)[0])];
+  private components = Object.keys(componentsDataTid);
+
+  private items = ['все', ...this.components];
 
   private setValue = (value: string) => {
     this.setState({ selectedValue: value });
   };
 
   public render() {
-    const list = componentsDataTid.map((element: { [key: string]: any }, index) => {
-      const componentName = Object.keys(element)[0];
+    const list = this.components.map((componentName: string, index: number) => {
       if (componentName === this.state.selectedValue || this.state.selectedValue === 'все') {
-        const dataTidList = element[componentName].map((value: { [key: string]: string }, i: number) => {
-          return (
-            <div key={i} className={styles.dataTidContainer()}>
-              <div className={styles.dataTidName()}>{Object.keys(value)}:</div>
-              <div className={styles.dataTidDescription()}>{Object.values(value)}</div>
-            </div>
-          );
-        });
+        const dataTidList = componentsDataTid[componentName];
         return (
           <div key={index} className={styles.row()}>
             <div className={styles.leftCell()}>{componentName}</div>
-            <div className={styles.rightCell()}>{dataTidList}</div>
+            <div className={styles.rightCell()}>
+              <div className={styles.dataTidContainer()}>
+                <div className={styles.dataTidName()}>{Object.keys(dataTidList)}:</div>
+                <div className={styles.dataTidDescription()}>{Object.values(dataTidList)}</div>
+              </div>
+            </div>
           </div>
         );
       }
diff --git a/packages/react-ui/lib/data-tid/componentsDataTid.ts b/packages/react-ui/lib/data-tid/componentsDataTid.ts
index 127815bf26d..56535119b50 100644
--- a/packages/react-ui/lib/data-tid/componentsDataTid.ts
+++ b/packages/react-ui/lib/data-tid/componentsDataTid.ts
@@ -1,183 +1,18 @@
-import { autocompleteDataTid } from '../../components/Autocomplete';
-import { buttonDataTid } from '../../components/Button';
-import { centerDataTid } from '../../components/Center';
-import { checkboxDataTid } from '../../components/Checkbox';
-import { currencyInputDataTid } from '../../components/CurrencyInput';
-import { currencyLabelDataTid } from '../../components/CurrencyLabel';
-import { dataPickerDataTid } from '../../components/DatePicker';
-import { pickerDataTid } from '../../components/DatePicker/Picker';
-import { dropdownDataTid } from '../../components/Dropdown';
-import { fileUploaderDataTid } from '../../components/FileUploader';
-import { fileUploaderFileDataTid } from '../../internal/FileUploaderControl/FileUploaderFile/FileUploaderFile';
-import { fileUploaderFileListDataTid } from '../../internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList';
-import { fxInputDataTid } from '../../components/FxInput';
-import { gappedDataTid } from '../../components/Gapped';
-import { globalLoaderDataTid } from '../../components/GlobalLoader';
-import { groupDataTid } from '../../components/Group';
-import { inputDataTid } from '../../components/Input';
-import { linkDataTid } from '../../components/Link';
-import { menuHeaderDataTid } from '../../components/MenuHeader';
-import { menuItemDataTid } from '../../components/MenuItem';
-import { menuSeparatorDataTid } from '../../components/MenuSeparator';
-import { modalDataTid, modalFooterDataTid, modalHeaderDataTid } from '../../components/Modal';
-import { modalCloseDataTid } from '../../components/Modal/ModalClose';
-import { pagingDataTid } from '../../components/Paging';
-import { passwordInputDataTid } from '../../components/PasswordInput';
-import { radioDataTid } from '../../components/Radio';
-import { radioGroupDataTid } from '../../components/RadioGroup';
-import { scrollContainerDataTid } from '../../components/ScrollContainer';
-import { selectDataTid } from '../../components/Select';
-import {
-  sidePageBodyDataTid,
-  sidePageContainerDataTid,
-  sidePageDataTid,
-  sidePageFooterDataTid,
-  sidePageHeaderDataTid,
-} from '../../components/SidePage';
-import { spinnerDataTid } from '../../components/Spinner';
-import { stickyDataTid } from '../../components/Sticky';
-import { switcherDataTid } from '../../components/Switcher';
-import { indicatorDataTid } from '../../components/Tabs/Indicator';
-import { tabDataTid, tabsDataTid } from '../../components/Tabs';
-import { textareaDataTid } from '../../components/Textarea';
-import { textareaCounterDataTid } from '../../components/Textarea/TextareaCounter';
-import { toastStaticDataTid } from '../../components/Toast/ToastStatic';
-import { toastViewDataTid } from '../../components/Toast/ToastView';
-import { toggleDataTid } from '../../components/Toggle';
-import { tokenDataTid } from '../../components/Token';
-import { tokenInputDataTid } from '../../components/TokenInput';
-import { tokenInputMenuDataTid } from '../../components/TokenInput/TokenInputMenu';
-import { tooltipDataTid } from '../../components/Tooltip';
-import { tooltipMenuDataTid } from '../../components/TooltipMenu';
-import { calendarDataTid } from '../../internal/Calendar';
-import { monthViewDataTid } from '../../internal/Calendar/MonthView';
-import { comboBoxMenuDataTid } from '../../internal/CustomComboBox';
-import { comboBoxViewDataTid } from '../../internal/CustomComboBox/ComboBoxView';
-import { dateSelectDataTid } from '../../internal/DateSelect';
-import { inputLikeTextDataTid } from '../../internal/InputLikeText';
-import { internalMenuDataTid } from '../../internal/InternalMenu';
-import { maskedInputDataTid } from '../../internal/MaskedInput';
-import { menuDataTid } from '../../internal/Menu';
-import { popupDataTid } from '../../internal/Popup';
-import { popupPinDataTid } from '../../internal/Popup/PopupPin';
-import { mobilePopupDataTid } from '../../internal/MobilePopup';
-import { popupMenuDataTid } from '../../internal/PopupMenu';
+import * as Components from '../../index';
 
-export const componentsDataTid = [
-  { ['Autocomplete']: [{ ['autocompleteDataTid']: JSON.stringify(autocompleteDataTid) }] },
-  { ['Button']: [{ ['buttonDataTid']: JSON.stringify(buttonDataTid) }] },
-  { ['Center']: [{ ['centerDataTid']: JSON.stringify(centerDataTid) }] },
-  { ['Checkbox']: [{ ['checkboxDataTid']: JSON.stringify(checkboxDataTid) }] },
-  { ['CurrencyInput']: [{ ['currencyInputDataTid']: JSON.stringify(currencyInputDataTid) }] },
-  { ['CurrencyLabel']: [{ ['currencyLabelDataTid']: JSON.stringify(currencyLabelDataTid) }] },
-  {
-    ['DataPicker']: [
-      { ['dataPickerDataTid']: JSON.stringify(dataPickerDataTid) },
-      { ['pickerDataTid']: JSON.stringify(pickerDataTid) },
-    ],
-  },
-  { ['Picker']: [{ ['pickerDataTid']: JSON.stringify(pickerDataTid) }] },
-  { ['Dropdown']: [{ ['dropdownDataTid']: JSON.stringify(dropdownDataTid) }] },
-  {
-    ['FileUploader']: [
-      { ['fileUploaderDataTid']: JSON.stringify(fileUploaderDataTid) },
-      { ['fileUploaderFileDataTid']: JSON.stringify(fileUploaderFileDataTid) },
-      { ['fileUploaderFileListDataTid']: JSON.stringify(fileUploaderFileListDataTid) },
-    ],
-  },
-  { ['FxInput']: [{ ['fxInputDataTid']: JSON.stringify(fxInputDataTid) }] },
-  { ['Gapped']: [{ ['gappedDataTid']: JSON.stringify(gappedDataTid) }] },
-  { ['GlobalLoader']: [{ ['globalLoaderDataTid']: JSON.stringify(globalLoaderDataTid) }] },
-  { ['Group']: [{ ['groupDataTid']: JSON.stringify(groupDataTid) }] },
-  { ['Input']: [{ ['inputDataTid']: JSON.stringify(inputDataTid) }] },
-  { ['Link']: [{ ['linkDataTid']: JSON.stringify(linkDataTid) }] },
-  { ['MenuHeader']: [{ ['menuHeaderDataTid']: JSON.stringify(menuHeaderDataTid) }] },
-  { ['MenuItem']: [{ ['menuItemDataTid']: JSON.stringify(menuItemDataTid) }] },
-  { ['MenuSeparator']: [{ ['menuSeparatorDataTid']: JSON.stringify(menuSeparatorDataTid) }] },
-  {
-    ['Modal']: [
-      { ['modalDataTid']: JSON.stringify(modalDataTid) },
-      { ['modalCloseDataTid']: JSON.stringify(modalCloseDataTid) },
-      { ['modalFooterDataTid']: JSON.stringify(modalFooterDataTid) },
-      { ['modalHeaderDataTid']: JSON.stringify(modalHeaderDataTid) },
-    ],
-  },
-  { ['Paging']: [{ ['pagingDataTid']: JSON.stringify(pagingDataTid) }] },
-  { ['PasswordInput']: [{ ['passwordInputDataTid']: JSON.stringify(passwordInputDataTid) }] },
-  { ['Radio']: [{ ['radioDataTid']: JSON.stringify(radioDataTid) }] },
-  { ['RadioGroup']: [{ ['radioGroupDataTid']: JSON.stringify(radioGroupDataTid) }] },
-  { ['ScrollContainer']: [{ ['scrollContainerDataTid']: JSON.stringify(scrollContainerDataTid) }] },
-  { ['Select']: [{ ['selectDataTid']: JSON.stringify(selectDataTid) }] },
-  {
-    ['SidePage']: [
-      { ['sidePageDataTid']: JSON.stringify(sidePageDataTid) },
-      { ['sidePageBodyDataTid']: JSON.stringify(sidePageBodyDataTid) },
-      { ['sidePageContainerDataTid']: JSON.stringify(sidePageContainerDataTid) },
-      { ['sidePageFooterDataTid']: JSON.stringify(sidePageFooterDataTid) },
-      { ['sidePageHeaderDataTid']: JSON.stringify(sidePageHeaderDataTid) },
-    ],
-  },
-  { ['Spinner']: [{ ['spinnerDataTid']: JSON.stringify(spinnerDataTid) }] },
-  { ['Sticky']: [{ ['stickyDataTid']: JSON.stringify(stickyDataTid) }] },
-  { ['Switcher']: [{ ['switcherDataTid']: JSON.stringify(switcherDataTid) }] },
-  {
-    ['Tabs']: [
-      { ['indicatorDataTid']: JSON.stringify(indicatorDataTid) },
-      { ['tabDataTid']: JSON.stringify(tabDataTid) },
-      { ['tabsDataTid']: JSON.stringify(tabsDataTid) },
-    ],
-  },
-  {
-    ['Textarea']: [
-      { ['textareaDataTid']: JSON.stringify(textareaDataTid) },
-      { ['textareaCounterDataTid']: JSON.stringify(textareaCounterDataTid) },
-    ],
-  },
-  {
-    ['Toast']: [
-      { ['toastStaticDataTid']: JSON.stringify(toastStaticDataTid) },
-      { ['toastViewDataTid']: JSON.stringify(toastViewDataTid) },
-    ],
-  },
-  { ['Toggle']: [{ ['toggleDataTid']: JSON.stringify(toggleDataTid) }] },
-  { ['Token']: [{ ['tokenDataTid']: JSON.stringify(tokenDataTid) }] },
-  {
-    ['TokenInput']: [
-      { ['tokenInputDataTid']: JSON.stringify(tokenInputDataTid) },
-      { ['tokenInputMenuDataTid']: JSON.stringify(tokenInputMenuDataTid) },
-    ],
-  },
-  { ['Tooltip']: [{ ['tooltipDataTid']: JSON.stringify(tooltipDataTid) }] },
-  { ['TooltipMenu']: [{ ['tooltipMenuDataTid']: JSON.stringify(tooltipMenuDataTid) }] },
-  {
-    ['Calendar']: [
-      { ['calendarDataTid']: JSON.stringify(calendarDataTid) },
-      { ['monthViewDataTid']: JSON.stringify(monthViewDataTid) },
-    ],
-  },
-  {
-    ['Combobox']: [
-      { ['comboBoxMenuDataTid']: JSON.stringify(comboBoxMenuDataTid) },
-      { ['comboBoxViewDataTid']: JSON.stringify(comboBoxViewDataTid) },
-    ],
-  },
-  { ['DataSelect']: [{ ['dateSelectDataTid']: JSON.stringify(dateSelectDataTid) }] },
-  {
-    ['FileUploaderControl']: [
-      { ['fileUploaderFileDataTid']: JSON.stringify(fileUploaderFileDataTid) },
-      { ['fileUploaderFileListDataTid']: JSON.stringify(fileUploaderFileListDataTid) },
-    ],
-  },
-  { ['InputLikeText']: [{ ['inputLikeTextDataTid']: JSON.stringify(inputLikeTextDataTid) }] },
-  { ['InternalMenu']: [{ ['internalMenuDataTid']: JSON.stringify(internalMenuDataTid) }] },
-  { ['MaskedInput']: [{ ['maskedInputDataTid']: JSON.stringify(maskedInputDataTid) }] },
-  { ['Menu']: [{ ['menuDataTid']: JSON.stringify(menuDataTid) }] },
-  {
-    ['Popup']: [
-      { ['popupDataTid']: JSON.stringify(popupDataTid) },
-      { ['popupPinDataTid']: JSON.stringify(popupPinDataTid) },
-    ],
-  },
-  { ['MobilePopup']: [{ ['mobilePopupDataTid']: JSON.stringify(mobilePopupDataTid) }] },
-  { ['Popupmenu']: [{ ['popupMenuDataTid']: JSON.stringify(popupMenuDataTid) }] },
-];
+const tids = Object.keys(Components).filter((componentName) => {
+  if (componentName.match(/datatid/i)) {
+    return componentName;
+  }
+});
+
+export const componentsDataTid: { [key: string]: { [key: string]: string } } = tids.reduce((accum, currTid) => {
+  return {
+    ...accum,
+    [Components[currTid].origin]: {
+      [currTid]: Object.entries(Components[currTid])
+        .map((x) => x.join(':'))
+        .join(', \n'),
+    },
+  };
+}, {});

From 00b93c3c76fd9e7360038e936da72134b76763c2 Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Wed, 1 Jun 2022 11:03:35 +0300
Subject: [PATCH 09/40] chore: add internal components to data-tids list

---
 .../lib/data-tid/componentsDataTid.ts         | 36 +++++++++++++++++--
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/packages/react-ui/lib/data-tid/componentsDataTid.ts b/packages/react-ui/lib/data-tid/componentsDataTid.ts
index 56535119b50..51f00751507 100644
--- a/packages/react-ui/lib/data-tid/componentsDataTid.ts
+++ b/packages/react-ui/lib/data-tid/componentsDataTid.ts
@@ -1,6 +1,36 @@
 import * as Components from '../../index';
+import * as Calendar from '../../internal/Calendar';
+import * as CalendarMonthView from '../../internal/Calendar/MonthView';
+import * as CustomComboBox from '../../internal/CustomComboBox';
+import * as CustomComboBoxComboBoxView from '../../internal/CustomComboBox/ComboBoxView';
+import * as DateSelect from '../../internal/DateSelect';
+import * as InputLikeText from '../../internal/InputLikeText';
+import * as InternalMenu from '../../internal/InternalMenu';
+import * as MaskedInput from '../../internal/MaskedInput';
+import * as Menu from '../../internal/Menu';
+import * as Popup from '../../internal/Popup';
+import * as PopupPin from '../../internal/Popup/PopupPin';
+import * as MobilePopupDataTid from '../../internal/MobilePopup';
+import * as PopupMenu from '../../internal/PopupMenu';
 
-const tids = Object.keys(Components).filter((componentName) => {
+const allComponents = {
+  ...Components,
+  ...Calendar,
+  ...CalendarMonthView,
+  ...CustomComboBox,
+  ...CustomComboBoxComboBoxView,
+  ...DateSelect,
+  ...InputLikeText,
+  ...InternalMenu,
+  ...MaskedInput,
+  ...Menu,
+  ...Popup,
+  ...PopupPin,
+  ...MobilePopupDataTid,
+  ...PopupMenu,
+};
+
+const tids = Object.keys(allComponents).filter((componentName) => {
   if (componentName.match(/datatid/i)) {
     return componentName;
   }
@@ -9,8 +39,8 @@ const tids = Object.keys(Components).filter((componentName) => {
 export const componentsDataTid: { [key: string]: { [key: string]: string } } = tids.reduce((accum, currTid) => {
   return {
     ...accum,
-    [Components[currTid].origin]: {
-      [currTid]: Object.entries(Components[currTid])
+    [allComponents[currTid].origin]: {
+      [currTid]: Object.entries(allComponents[currTid])
         .map((x) => x.join(':'))
         .join(', \n'),
     },

From ff0c2fdbc9037d8785926fb8b48a030664e180f6 Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Wed, 1 Jun 2022 11:48:24 +0300
Subject: [PATCH 10/40] chore: fix export of data-tids of inner components

---
 .../react-ui/components/DatePicker/DatePicker.tsx    |  3 ++-
 .../components/FileUploader/FileUploader.tsx         | 12 ++++++++++--
 packages/react-ui/components/Modal/Modal.tsx         |  3 ++-
 packages/react-ui/components/Tabs/Tabs.tsx           |  6 ++++--
 packages/react-ui/components/Textarea/Textarea.tsx   |  3 ++-
 packages/react-ui/components/Toast/Toast.tsx         | 10 ++++++++--
 .../react-ui/components/TokenInput/TokenInput.tsx    |  3 ++-
 packages/react-ui/lib/data-tid/componentsDataTid.ts  |  9 ++++++++-
 8 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/packages/react-ui/components/DatePicker/DatePicker.tsx b/packages/react-ui/components/DatePicker/DatePicker.tsx
index 71543c7a59c..e9b87554770 100644
--- a/packages/react-ui/components/DatePicker/DatePicker.tsx
+++ b/packages/react-ui/components/DatePicker/DatePicker.tsx
@@ -16,7 +16,7 @@ import { NativeDateInput } from '../../internal/NativeDateInput';
 import { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';
 import { isNonNullable } from '../../lib/utils';
 
-import { Picker } from './Picker';
+import { Picker, pickerDataTid } from './Picker';
 import { styles } from './DatePicker.styles';
 
 const INPUT_PASS_PROPS = {
@@ -88,6 +88,7 @@ type DatePickerValue = string;
 export const dataPickerDataTid = {
   origin: 'DatePicker',
   root: 'DatePicker__root',
+  picker: pickerDataTid,
 };
 
 @rootNode
diff --git a/packages/react-ui/components/FileUploader/FileUploader.tsx b/packages/react-ui/components/FileUploader/FileUploader.tsx
index 795cbac35e6..588215064b7 100644
--- a/packages/react-ui/components/FileUploader/FileUploader.tsx
+++ b/packages/react-ui/components/FileUploader/FileUploader.tsx
@@ -12,8 +12,14 @@ import { UploadIcon } from '../../internal/icons/16px';
 import { FileUploaderControlProviderProps } from '../../internal/FileUploaderControl/FileUploaderControlProvider';
 import { withFileUploaderControlProvider } from '../../internal/FileUploaderControl/withFileUploaderControlProvider';
 import { keyListener } from '../../lib/events/keyListener';
-import { FileUploaderFile } from '../../internal/FileUploaderControl/FileUploaderFile/FileUploaderFile';
-import { FileUploaderFileList } from '../../internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList';
+import {
+  FileUploaderFile,
+  fileUploaderFileDataTid,
+} from '../../internal/FileUploaderControl/FileUploaderFile/FileUploaderFile';
+import {
+  FileUploaderFileList,
+  fileUploaderFileListDataTid,
+} from '../../internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList';
 import { isBrowser } from '../../lib/client';
 import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';
 import { Nullable } from '../../typings/utility-types';
@@ -66,6 +72,8 @@ export const fileUploaderDataTid = {
   root: 'FileUploader__root',
   content: 'FileUploader__content',
   link: 'FileUploader__link',
+  fileUploaderFile: fileUploaderFileDataTid,
+  fileUploaderFileList: fileUploaderFileListDataTid,
 };
 
 const defaultRenderFile = (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => fileNode;
diff --git a/packages/react-ui/components/Modal/Modal.tsx b/packages/react-ui/components/Modal/Modal.tsx
index a1c090001fd..bc5f5e790c0 100644
--- a/packages/react-ui/components/Modal/Modal.tsx
+++ b/packages/react-ui/components/Modal/Modal.tsx
@@ -21,7 +21,7 @@ import { ModalContext, ModalContextProps } from './ModalContext';
 import { ModalFooter } from './ModalFooter';
 import { ModalHeader } from './ModalHeader';
 import { ModalBody } from './ModalBody';
-import { ModalClose } from './ModalClose';
+import { ModalClose, modalCloseDataTid } from './ModalClose';
 import { styles } from './Modal.styles';
 
 let mountedModalsCount = 0;
@@ -74,6 +74,7 @@ export const modalDataTid = {
   origin: 'Modal',
   container: 'modal-container',
   content: 'modal-content',
+  modalClose: modalCloseDataTid,
 };
 
 /**
diff --git a/packages/react-ui/components/Tabs/Tabs.tsx b/packages/react-ui/components/Tabs/Tabs.tsx
index 2778c7cde43..deb027c26cf 100644
--- a/packages/react-ui/components/Tabs/Tabs.tsx
+++ b/packages/react-ui/components/Tabs/Tabs.tsx
@@ -9,10 +9,10 @@ import { cx } from '../../lib/theming/Emotion';
 import { getRootNode } from '../../lib/rootNode/getRootNode';
 import { rootNode, TSetRootNode } from '../../lib/rootNode';
 
-import { Indicator } from './Indicator';
+import { Indicator, indicatorDataTid } from './Indicator';
 import { styles } from './Tabs.styles';
 import { TabsContext, TabsContextType } from './TabsContext';
-import { Tab } from './Tab';
+import { Tab, tabDataTid } from './Tab';
 
 type ValueBaseType = string;
 type TabType<T extends ValueBaseType> = {
@@ -56,6 +56,8 @@ export interface TabsProps<T extends ValueBaseType = string> extends CommonProps
 export const tabsDataTid = {
   origin: 'Tabs',
   root: 'Tabs__root',
+  tab: tabDataTid,
+  indicator: indicatorDataTid,
 };
 
 /**
diff --git a/packages/react-ui/components/Textarea/Textarea.tsx b/packages/react-ui/components/Textarea/Textarea.tsx
index 82bd7d8cbb6..c66899e0735 100644
--- a/packages/react-ui/components/Textarea/Textarea.tsx
+++ b/packages/react-ui/components/Textarea/Textarea.tsx
@@ -19,7 +19,7 @@ import { rootNode, TSetRootNode } from '../../lib/rootNode';
 
 import { getTextAreaHeight } from './TextareaHelpers';
 import { styles } from './Textarea.styles';
-import { TextareaCounter, TextareaCounterRef } from './TextareaCounter';
+import { TextareaCounter, textareaCounterDataTid, TextareaCounterRef } from './TextareaCounter';
 
 const DEFAULT_WIDTH = 250;
 const AUTORESIZE_THROTTLE_DEFAULT_WAIT = 100;
@@ -114,6 +114,7 @@ export interface TextareaState {
 export const textareaDataTid = {
   origin: 'Textarea',
   root: 'Textarea__root',
+  counter: textareaCounterDataTid,
 };
 
 /**
diff --git a/packages/react-ui/components/Toast/Toast.tsx b/packages/react-ui/components/Toast/Toast.tsx
index f20bd86bb2d..dc8b99db616 100644
--- a/packages/react-ui/components/Toast/Toast.tsx
+++ b/packages/react-ui/components/Toast/Toast.tsx
@@ -8,8 +8,8 @@ import { isTestEnv } from '../../lib/currentEnvironment';
 import { rootNode, TSetRootNode } from '../../lib/rootNode';
 
 import { styles } from './Toast.styles';
-import { ToastView, ToastViewProps } from './ToastView';
-import { ToastStatic } from './ToastStatic';
+import { ToastView, toastViewDataTid, ToastViewProps } from './ToastView';
+import { ToastStatic, toastStaticDataTid } from './ToastStatic';
 
 export interface Action {
   label: string;
@@ -27,6 +27,12 @@ export interface ToastProps extends CommonProps {
   onClose?: (notification: string, action?: Action) => void;
 }
 
+export const toastDataTid = {
+  origin: 'Toast',
+  toastStatic: toastStaticDataTid,
+  toastView: toastViewDataTid,
+};
+
 /**
  * Показывает уведомления.
  *
diff --git a/packages/react-ui/components/TokenInput/TokenInput.tsx b/packages/react-ui/components/TokenInput/TokenInput.tsx
index 3fea6b6d117..75bf91b851e 100644
--- a/packages/react-ui/components/TokenInput/TokenInput.tsx
+++ b/packages/react-ui/components/TokenInput/TokenInput.tsx
@@ -30,7 +30,7 @@ import { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';
 import { TokenInputLocale, TokenInputLocaleHelper } from './locale';
 import { styles } from './TokenInput.styles';
 import { TokenInputAction, tokenInputReducer } from './TokenInputReducer';
-import { TokenInputMenu } from './TokenInputMenu';
+import { TokenInputMenu, tokenInputMenuDataTid } from './TokenInputMenu';
 import { TextWidthHelper } from './TextWidthHelper';
 
 export enum TokenInputType {
@@ -154,6 +154,7 @@ export const DefaultState = {
 export const tokenInputDataTid = {
   origin: 'TokenInput',
   root: 'TokenInput__root',
+  tokenInputMenu: tokenInputMenuDataTid,
 };
 
 const defaultToKey = <T extends {}>(item: T): string => item.toString();
diff --git a/packages/react-ui/lib/data-tid/componentsDataTid.ts b/packages/react-ui/lib/data-tid/componentsDataTid.ts
index 51f00751507..4b50c6acae9 100644
--- a/packages/react-ui/lib/data-tid/componentsDataTid.ts
+++ b/packages/react-ui/lib/data-tid/componentsDataTid.ts
@@ -41,7 +41,14 @@ export const componentsDataTid: { [key: string]: { [key: string]: string } } = t
     ...accum,
     [allComponents[currTid].origin]: {
       [currTid]: Object.entries(allComponents[currTid])
-        .map((x) => x.join(':'))
+        .map((x) => {
+          if (typeof x[1] === 'object') {
+            return `${Object.entries(x[1])
+              .map((y) => `${x[0]}.${y.join(':')}`)
+              .join(', \n')}`;
+          }
+          return x.join(':');
+        })
         .join(', \n'),
     },
   };

From 2b14c70355cb981656881f790182b074fb41ae51 Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Wed, 1 Jun 2022 13:54:11 +0300
Subject: [PATCH 11/40] Revert "chore: add origin field"

This reverts commit 9033388531dbc4421bd19549d47c95f8d72d77de.
---
 packages/react-ui/components/Autocomplete/Autocomplete.tsx       | 1 -
 packages/react-ui/components/Button/Button.tsx                   | 1 -
 packages/react-ui/components/Center/Center.tsx                   | 1 -
 packages/react-ui/components/Checkbox/Checkbox.tsx               | 1 -
 packages/react-ui/components/CurrencyInput/CurrencyInput.tsx     | 1 -
 packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx     | 1 -
 packages/react-ui/components/DatePicker/DatePicker.tsx           | 1 -
 packages/react-ui/components/DatePicker/Picker.tsx               | 1 -
 packages/react-ui/components/Dropdown/Dropdown.tsx               | 1 -
 packages/react-ui/components/FileUploader/FileUploader.tsx       | 1 -
 packages/react-ui/components/FxInput/FxInput.tsx                 | 1 -
 packages/react-ui/components/Gapped/Gapped.tsx                   | 1 -
 packages/react-ui/components/GlobalLoader/GlobalLoader.tsx       | 1 -
 packages/react-ui/components/Group/Group.tsx                     | 1 -
 packages/react-ui/components/Input/Input.tsx                     | 1 -
 packages/react-ui/components/Link/Link.tsx                       | 1 -
 packages/react-ui/components/Loader/Loader.tsx                   | 1 -
 packages/react-ui/components/MenuHeader/MenuHeader.tsx           | 1 -
 packages/react-ui/components/MenuItem/MenuItem.tsx               | 1 -
 packages/react-ui/components/MenuSeparator/MenuSeparator.tsx     | 1 -
 packages/react-ui/components/Modal/Modal.tsx                     | 1 -
 packages/react-ui/components/Modal/ModalClose.tsx                | 1 -
 packages/react-ui/components/Modal/ModalFooter.tsx               | 1 -
 packages/react-ui/components/Modal/ModalHeader.tsx               | 1 -
 packages/react-ui/components/Paging/Paging.tsx                   | 1 -
 packages/react-ui/components/PasswordInput/PasswordInput.tsx     | 1 -
 packages/react-ui/components/Radio/Radio.tsx                     | 1 -
 packages/react-ui/components/RadioGroup/RadioGroup.tsx           | 1 -
 packages/react-ui/components/ScrollContainer/ScrollContainer.tsx | 1 -
 packages/react-ui/components/Select/Select.tsx                   | 1 -
 packages/react-ui/components/SidePage/SidePage.tsx               | 1 -
 packages/react-ui/components/SidePage/SidePageBody.tsx           | 1 -
 packages/react-ui/components/SidePage/SidePageContainer.tsx      | 1 -
 packages/react-ui/components/SidePage/SidePageFooter.tsx         | 1 -
 packages/react-ui/components/SidePage/SidePageHeader.tsx         | 1 -
 packages/react-ui/components/Spinner/Spinner.tsx                 | 1 -
 packages/react-ui/components/Sticky/Sticky.tsx                   | 1 -
 packages/react-ui/components/Switcher/Switcher.tsx               | 1 -
 packages/react-ui/components/Tabs/Indicator.tsx                  | 1 -
 packages/react-ui/components/Tabs/Tab.tsx                        | 1 -
 packages/react-ui/components/Tabs/Tabs.tsx                       | 1 -
 packages/react-ui/components/Textarea/Textarea.tsx               | 1 -
 packages/react-ui/components/Textarea/TextareaCounter.tsx        | 1 -
 packages/react-ui/components/Toast/ToastStatic.tsx               | 1 -
 packages/react-ui/components/Toast/ToastView.tsx                 | 1 -
 packages/react-ui/components/Toggle/Toggle.tsx                   | 1 -
 packages/react-ui/components/Token/Token.tsx                     | 1 -
 packages/react-ui/components/TokenInput/TokenInput.tsx           | 1 -
 packages/react-ui/components/TokenInput/TokenInputMenu.tsx       | 1 -
 packages/react-ui/components/Tooltip/Tooltip.tsx                 | 1 -
 packages/react-ui/components/TooltipMenu/TooltipMenu.tsx         | 1 -
 packages/react-ui/internal/Calendar/Calendar.tsx                 | 1 -
 packages/react-ui/internal/Calendar/MonthView.tsx                | 1 -
 packages/react-ui/internal/CustomComboBox/ComboBoxMenu.tsx       | 1 -
 packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx       | 1 -
 packages/react-ui/internal/DateSelect/DateSelect.tsx             | 1 -
 .../FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx    | 1 -
 .../FileUploaderFileList/FileUploaderFileList.tsx                | 1 -
 packages/react-ui/internal/InputLikeText/InputLikeText.tsx       | 1 -
 packages/react-ui/internal/InternalMenu/InternalMenu.tsx         | 1 -
 packages/react-ui/internal/MaskedInput/MaskedInput.tsx           | 1 -
 packages/react-ui/internal/Menu/Menu.tsx                         | 1 -
 packages/react-ui/internal/MobilePopup/MobilePopup.tsx           | 1 -
 packages/react-ui/internal/Popup/Popup.tsx                       | 1 -
 packages/react-ui/internal/Popup/PopupPin.tsx                    | 1 -
 packages/react-ui/internal/PopupMenu/PopupMenu.tsx               | 1 -
 66 files changed, 66 deletions(-)

diff --git a/packages/react-ui/components/Autocomplete/Autocomplete.tsx b/packages/react-ui/components/Autocomplete/Autocomplete.tsx
index 86af765e709..dcaad53ad74 100644
--- a/packages/react-ui/components/Autocomplete/Autocomplete.tsx
+++ b/packages/react-ui/components/Autocomplete/Autocomplete.tsx
@@ -78,7 +78,6 @@ export interface AutocompleteState {
 }
 
 export const autocompleteDataTid = {
-  origin: 'Autocomplete',
   root: 'Autocomplete__root',
 };
 
diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx
index 68f06760892..96805c093a4 100644
--- a/packages/react-ui/components/Button/Button.tsx
+++ b/packages/react-ui/components/Button/Button.tsx
@@ -165,7 +165,6 @@ export interface ButtonState {
 }
 
 export const buttonDataTid = {
-  origin: 'Button',
   root: 'Button__root',
 };
 
diff --git a/packages/react-ui/components/Center/Center.tsx b/packages/react-ui/components/Center/Center.tsx
index 84f8bfdc372..917f2b269c4 100644
--- a/packages/react-ui/components/Center/Center.tsx
+++ b/packages/react-ui/components/Center/Center.tsx
@@ -24,7 +24,6 @@ export interface CenterProps
     > {}
 
 export const centerDataTid = {
-  origin: 'Center',
   root: 'Center__root',
 };
 
diff --git a/packages/react-ui/components/Checkbox/Checkbox.tsx b/packages/react-ui/components/Checkbox/Checkbox.tsx
index 895bb617763..78969722852 100644
--- a/packages/react-ui/components/Checkbox/Checkbox.tsx
+++ b/packages/react-ui/components/Checkbox/Checkbox.tsx
@@ -64,7 +64,6 @@ export interface CheckboxState {
 }
 
 export const checkboxDataTid = {
-  origin: 'Checkbox',
   root: 'Checkbox__root',
 };
 @rootNode
diff --git a/packages/react-ui/components/CurrencyInput/CurrencyInput.tsx b/packages/react-ui/components/CurrencyInput/CurrencyInput.tsx
index ff4f2458e68..61eeff61f2d 100644
--- a/packages/react-ui/components/CurrencyInput/CurrencyInput.tsx
+++ b/packages/react-ui/components/CurrencyInput/CurrencyInput.tsx
@@ -47,7 +47,6 @@ export interface CurrencyInputState {
 }
 
 export const currencyInputDataTid = {
-  origin: 'CurrencyInput',
   root: 'CurrencyInput__root',
 };
 
diff --git a/packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx b/packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx
index daba5772a29..ade95aba987 100644
--- a/packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx
+++ b/packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx
@@ -19,7 +19,6 @@ export const defaultProps = {
 };
 
 export const currencyLabelDataTid = {
-  origin: 'CurrencyLabel',
   root: 'CurrencyLabel__root',
 };
 
diff --git a/packages/react-ui/components/DatePicker/DatePicker.tsx b/packages/react-ui/components/DatePicker/DatePicker.tsx
index e9b87554770..e21f4e2f88a 100644
--- a/packages/react-ui/components/DatePicker/DatePicker.tsx
+++ b/packages/react-ui/components/DatePicker/DatePicker.tsx
@@ -86,7 +86,6 @@ export interface DatePickerState {
 type DatePickerValue = string;
 
 export const dataPickerDataTid = {
-  origin: 'DatePicker',
   root: 'DatePicker__root',
   picker: pickerDataTid,
 };
diff --git a/packages/react-ui/components/DatePicker/Picker.tsx b/packages/react-ui/components/DatePicker/Picker.tsx
index d50041e1224..84dfd9238ff 100644
--- a/packages/react-ui/components/DatePicker/Picker.tsx
+++ b/packages/react-ui/components/DatePicker/Picker.tsx
@@ -37,7 +37,6 @@ const getTodayCalendarDate = () => {
 };
 
 export const pickerDataTid = {
-  origin: 'Picker',
   root: 'Picker__root',
   todayWrapper: 'Picker__todayWrapper',
 };
diff --git a/packages/react-ui/components/Dropdown/Dropdown.tsx b/packages/react-ui/components/Dropdown/Dropdown.tsx
index feb27f91ca8..37ebeb71a17 100644
--- a/packages/react-ui/components/Dropdown/Dropdown.tsx
+++ b/packages/react-ui/components/Dropdown/Dropdown.tsx
@@ -88,7 +88,6 @@ export interface DropdownProps extends CommonProps {
 type DropdownSelectType = Select<React.ReactNode, React.ReactNode>;
 
 export const dropdownDataTid = {
-  origin: 'Dropdown',
   root: 'Dropdown__root',
 };
 
diff --git a/packages/react-ui/components/FileUploader/FileUploader.tsx b/packages/react-ui/components/FileUploader/FileUploader.tsx
index 588215064b7..d73ecdb4b5f 100644
--- a/packages/react-ui/components/FileUploader/FileUploader.tsx
+++ b/packages/react-ui/components/FileUploader/FileUploader.tsx
@@ -68,7 +68,6 @@ export interface FileUploaderRef {
 }
 
 export const fileUploaderDataTid = {
-  origin: 'FileUploader',
   root: 'FileUploader__root',
   content: 'FileUploader__content',
   link: 'FileUploader__link',
diff --git a/packages/react-ui/components/FxInput/FxInput.tsx b/packages/react-ui/components/FxInput/FxInput.tsx
index 85512f3e53f..8089b7932ae 100644
--- a/packages/react-ui/components/FxInput/FxInput.tsx
+++ b/packages/react-ui/components/FxInput/FxInput.tsx
@@ -34,7 +34,6 @@ export interface FxInputProps
     > {}
 
 export const fxInputDataTid = {
-  origin: 'FxInput',
   root: 'FxInput__root',
 };
 
diff --git a/packages/react-ui/components/Gapped/Gapped.tsx b/packages/react-ui/components/Gapped/Gapped.tsx
index f064912b6eb..39385707d6c 100644
--- a/packages/react-ui/components/Gapped/Gapped.tsx
+++ b/packages/react-ui/components/Gapped/Gapped.tsx
@@ -29,7 +29,6 @@ export interface GappedProps extends CommonProps {
 }
 
 export const gappedDataTid = {
-  origin: 'Gapped',
   vertical: 'Gapped__vertical',
   horizontal: 'Gapped__horizontal',
 };
diff --git a/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx b/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx
index a0ac0e6a1c8..7e1f165b3c2 100644
--- a/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx
+++ b/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx
@@ -73,7 +73,6 @@ interface DefaultProps {
 export type GlobalLoaderComponentProps = GlobalLoaderProps & DefaultProps;
 
 export const globalLoaderDataTid = {
-  origin: 'GlobalLoader',
   root: 'GlobalLoader',
 };
 
diff --git a/packages/react-ui/components/Group/Group.tsx b/packages/react-ui/components/Group/Group.tsx
index f555da243a4..3f7afff44e8 100644
--- a/packages/react-ui/components/Group/Group.tsx
+++ b/packages/react-ui/components/Group/Group.tsx
@@ -21,7 +21,6 @@ interface GroupChildProps {
 }
 
 export const groupDataTid = {
-  origin: 'Group',
   root: 'Group__root',
 };
 
diff --git a/packages/react-ui/components/Input/Input.tsx b/packages/react-ui/components/Input/Input.tsx
index f4e1c5d9b22..b04f1964cd2 100644
--- a/packages/react-ui/components/Input/Input.tsx
+++ b/packages/react-ui/components/Input/Input.tsx
@@ -108,7 +108,6 @@ export interface InputState {
 }
 
 export const inputDataTid = {
-  origin: 'Input',
   root: 'Input__root',
 };
 
diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx
index 691916e4dce..3b93ddc50c0 100644
--- a/packages/react-ui/components/Link/Link.tsx
+++ b/packages/react-ui/components/Link/Link.tsx
@@ -62,7 +62,6 @@ export interface LinkState {
 }
 
 export const linkDataTid = {
-  origin: 'Link',
   root: 'Link__root',
 };
 
diff --git a/packages/react-ui/components/Loader/Loader.tsx b/packages/react-ui/components/Loader/Loader.tsx
index 46e3345dc31..2a547a518fe 100644
--- a/packages/react-ui/components/Loader/Loader.tsx
+++ b/packages/react-ui/components/Loader/Loader.tsx
@@ -52,7 +52,6 @@ export interface LoaderState {
 }
 
 export const loaderDataTid = {
-  origin: 'Loader',
   vail: 'Loader__Veil',
   spinner: 'Loader__Spinner',
 };
diff --git a/packages/react-ui/components/MenuHeader/MenuHeader.tsx b/packages/react-ui/components/MenuHeader/MenuHeader.tsx
index 9c3b6025a4c..9533a5b05af 100644
--- a/packages/react-ui/components/MenuHeader/MenuHeader.tsx
+++ b/packages/react-ui/components/MenuHeader/MenuHeader.tsx
@@ -12,7 +12,6 @@ export interface MenuHeaderProps extends CommonProps {
 }
 
 export const menuHeaderDataTid = {
-  origin: 'MenuHeader',
   root: 'MenuHeader__root',
 };
 
diff --git a/packages/react-ui/components/MenuItem/MenuItem.tsx b/packages/react-ui/components/MenuItem/MenuItem.tsx
index 51fb259d4ce..fdbad2279b2 100644
--- a/packages/react-ui/components/MenuItem/MenuItem.tsx
+++ b/packages/react-ui/components/MenuItem/MenuItem.tsx
@@ -77,7 +77,6 @@ export interface MenuItemProps extends CommonProps {
 }
 
 export const menuItemDataTid = {
-  origin: 'MenuItem',
   root: 'MenuItem__root',
   comment: 'MenuItem__comment',
 };
diff --git a/packages/react-ui/components/MenuSeparator/MenuSeparator.tsx b/packages/react-ui/components/MenuSeparator/MenuSeparator.tsx
index 11016536195..c8649370c54 100644
--- a/packages/react-ui/components/MenuSeparator/MenuSeparator.tsx
+++ b/packages/react-ui/components/MenuSeparator/MenuSeparator.tsx
@@ -8,7 +8,6 @@ import { styles } from './MenuSeparator.styles';
 export type MenuSeparatorProps = CommonProps;
 
 export const menuSeparatorDataTid = {
-  origin: 'MenuSeparator',
   root: 'MenuSeparator__root',
 };
 /**
diff --git a/packages/react-ui/components/Modal/Modal.tsx b/packages/react-ui/components/Modal/Modal.tsx
index bc5f5e790c0..c351ddacd28 100644
--- a/packages/react-ui/components/Modal/Modal.tsx
+++ b/packages/react-ui/components/Modal/Modal.tsx
@@ -71,7 +71,6 @@ export interface ModalState {
 }
 
 export const modalDataTid = {
-  origin: 'Modal',
   container: 'modal-container',
   content: 'modal-content',
   modalClose: modalCloseDataTid,
diff --git a/packages/react-ui/components/Modal/ModalClose.tsx b/packages/react-ui/components/Modal/ModalClose.tsx
index 719be008169..e2a2a28a7e1 100644
--- a/packages/react-ui/components/Modal/ModalClose.tsx
+++ b/packages/react-ui/components/Modal/ModalClose.tsx
@@ -11,7 +11,6 @@ import { CloseProps } from './ModalContext';
 import { styles } from './Modal.styles';
 
 export const modalCloseDataTid = {
-  origin: 'ModalClose',
   close: 'modal-close',
 };
 
diff --git a/packages/react-ui/components/Modal/ModalFooter.tsx b/packages/react-ui/components/Modal/ModalFooter.tsx
index c60020ac48c..67461049738 100644
--- a/packages/react-ui/components/Modal/ModalFooter.tsx
+++ b/packages/react-ui/components/Modal/ModalFooter.tsx
@@ -21,7 +21,6 @@ export interface ModalFooterProps extends CommonProps {
 }
 
 export const modalFooterDataTid = {
-  origin: 'ModalFooter',
   root: 'ModalFooter__root',
 };
 
diff --git a/packages/react-ui/components/Modal/ModalHeader.tsx b/packages/react-ui/components/Modal/ModalHeader.tsx
index dada116cf36..b5a5510152a 100644
--- a/packages/react-ui/components/Modal/ModalHeader.tsx
+++ b/packages/react-ui/components/Modal/ModalHeader.tsx
@@ -17,7 +17,6 @@ export interface ModalHeaderProps extends CommonProps {
 }
 
 export const modalHeaderDataTid = {
-  origin: 'ModalHeader',
   root: 'ModalHeader__root',
 };
 
diff --git a/packages/react-ui/components/Paging/Paging.tsx b/packages/react-ui/components/Paging/Paging.tsx
index e342095c821..4c7f815ef34 100644
--- a/packages/react-ui/components/Paging/Paging.tsx
+++ b/packages/react-ui/components/Paging/Paging.tsx
@@ -75,7 +75,6 @@ export interface PagingState {
 export type ItemType = number | '.' | 'forward';
 
 export const pagingDataTid = {
-  origin: 'Paging',
   root: 'Paging__root',
   dots: 'Paging__dots',
   forwardLink: 'Paging__forwardLink',
diff --git a/packages/react-ui/components/PasswordInput/PasswordInput.tsx b/packages/react-ui/components/PasswordInput/PasswordInput.tsx
index f4a145634ec..e087fd792a0 100644
--- a/packages/react-ui/components/PasswordInput/PasswordInput.tsx
+++ b/packages/react-ui/components/PasswordInput/PasswordInput.tsx
@@ -25,7 +25,6 @@ export interface PasswordInputState {
 }
 
 export const passwordInputDataTid = {
-  origin: 'PasswordInput',
   root: 'PasswordInput',
   capsLockDetector: 'PasswordInputCapsLockDetector',
   eyeIcon: 'PasswordInputEyeIcon',
diff --git a/packages/react-ui/components/Radio/Radio.tsx b/packages/react-ui/components/Radio/Radio.tsx
index 05b75421fcf..2c4d7a3c3ae 100644
--- a/packages/react-ui/components/Radio/Radio.tsx
+++ b/packages/react-ui/components/Radio/Radio.tsx
@@ -58,7 +58,6 @@ export interface RadioState {
 }
 
 export const radioDataTid = {
-  origin: 'Radio',
   root: 'Radio__root',
 };
 
diff --git a/packages/react-ui/components/RadioGroup/RadioGroup.tsx b/packages/react-ui/components/RadioGroup/RadioGroup.tsx
index 096b06a6d16..94d8fc36aee 100644
--- a/packages/react-ui/components/RadioGroup/RadioGroup.tsx
+++ b/packages/react-ui/components/RadioGroup/RadioGroup.tsx
@@ -82,7 +82,6 @@ export interface RadioGroupState<T> {
 }
 
 export const radioGroupDataTid = {
-  origin: 'RadioGroup',
   root: 'RadioGroup__root',
 };
 
diff --git a/packages/react-ui/components/ScrollContainer/ScrollContainer.tsx b/packages/react-ui/components/ScrollContainer/ScrollContainer.tsx
index 211e9c8d36c..4cf7dc93f63 100644
--- a/packages/react-ui/components/ScrollContainer/ScrollContainer.tsx
+++ b/packages/react-ui/components/ScrollContainer/ScrollContainer.tsx
@@ -51,7 +51,6 @@ export interface ScrollContainerProps extends CommonProps {
 }
 
 export const scrollContainerDataTid = {
-  origin: 'ScrollContainer',
   root: 'ScrollContainer__root',
   inner: 'ScrollContainer__inner',
 };
diff --git a/packages/react-ui/components/Select/Select.tsx b/packages/react-ui/components/Select/Select.tsx
index e597302b6ba..3713995516c 100644
--- a/packages/react-ui/components/Select/Select.tsx
+++ b/packages/react-ui/components/Select/Select.tsx
@@ -59,7 +59,6 @@ const PASS_BUTTON_PROPS = {
 };
 
 export const selectDataTid = {
-  origin: 'Select',
   root: 'Select__root',
 };
 
diff --git a/packages/react-ui/components/SidePage/SidePage.tsx b/packages/react-ui/components/SidePage/SidePage.tsx
index c5c028106ae..8e1650c4c30 100644
--- a/packages/react-ui/components/SidePage/SidePage.tsx
+++ b/packages/react-ui/components/SidePage/SidePage.tsx
@@ -85,7 +85,6 @@ export interface SidePageState {
 }
 
 export const sidePageDataTid = {
-  origin: 'SidePage',
   root: 'SidePage__root',
   container: 'SidePage__container',
 };
diff --git a/packages/react-ui/components/SidePage/SidePageBody.tsx b/packages/react-ui/components/SidePage/SidePageBody.tsx
index 8173033d3ff..eb5797090a3 100644
--- a/packages/react-ui/components/SidePage/SidePageBody.tsx
+++ b/packages/react-ui/components/SidePage/SidePageBody.tsx
@@ -14,7 +14,6 @@ export interface SidePageBodyProps extends CommonProps {
 }
 
 export const sidePageBodyDataTid = {
-  origin: 'SidePageBody',
   root: 'SidePageBody__root',
 };
 /**
diff --git a/packages/react-ui/components/SidePage/SidePageContainer.tsx b/packages/react-ui/components/SidePage/SidePageContainer.tsx
index 7b10fc19467..b062629aa0e 100644
--- a/packages/react-ui/components/SidePage/SidePageContainer.tsx
+++ b/packages/react-ui/components/SidePage/SidePageContainer.tsx
@@ -13,7 +13,6 @@ import { SidePageContext } from './SidePageContext';
 export type SidePageContainerProps = CommonProps;
 
 export const sidePageContainerDataTid = {
-  origin: 'SidePageContainer',
   root: 'SidePageContainer__root',
 };
 
diff --git a/packages/react-ui/components/SidePage/SidePageFooter.tsx b/packages/react-ui/components/SidePage/SidePageFooter.tsx
index 976522a0b54..24f07fa96d1 100644
--- a/packages/react-ui/components/SidePage/SidePageFooter.tsx
+++ b/packages/react-ui/components/SidePage/SidePageFooter.tsx
@@ -22,7 +22,6 @@ export interface SidePageFooterProps extends CommonProps {
 }
 
 export const sidePageFooterDataTid = {
-  origin: 'SidePageFooter',
   root: 'SidePageFooter__root',
 };
 
diff --git a/packages/react-ui/components/SidePage/SidePageHeader.tsx b/packages/react-ui/components/SidePage/SidePageHeader.tsx
index 36ce69dad0e..b5e698279a2 100644
--- a/packages/react-ui/components/SidePage/SidePageHeader.tsx
+++ b/packages/react-ui/components/SidePage/SidePageHeader.tsx
@@ -26,7 +26,6 @@ export interface SidePageHeaderState {
 }
 
 export const sidePageHeaderDataTid = {
-  origin: 'SidePageHeader',
   root: 'SidePageHeader__root',
   close: 'SidePage__close',
 };
diff --git a/packages/react-ui/components/Spinner/Spinner.tsx b/packages/react-ui/components/Spinner/Spinner.tsx
index 485bb72ea26..4ca4707e651 100644
--- a/packages/react-ui/components/Spinner/Spinner.tsx
+++ b/packages/react-ui/components/Spinner/Spinner.tsx
@@ -40,7 +40,6 @@ export interface SpinnerProps extends CommonProps {
 }
 
 export const spinnerDataTid = {
-  origin: 'Spinner',
   root: 'Spinner__root',
 };
 
diff --git a/packages/react-ui/components/Sticky/Sticky.tsx b/packages/react-ui/components/Sticky/Sticky.tsx
index cb683686602..ddffff7edd4 100644
--- a/packages/react-ui/components/Sticky/Sticky.tsx
+++ b/packages/react-ui/components/Sticky/Sticky.tsx
@@ -37,7 +37,6 @@ export interface StickyState {
 }
 
 export const stickyDataTid = {
-  origin: 'Sticky',
   root: 'Spinner__root',
 };
 
diff --git a/packages/react-ui/components/Switcher/Switcher.tsx b/packages/react-ui/components/Switcher/Switcher.tsx
index 0d87b794c8c..32a2a43c61f 100644
--- a/packages/react-ui/components/Switcher/Switcher.tsx
+++ b/packages/react-ui/components/Switcher/Switcher.tsx
@@ -18,7 +18,6 @@ export type SwitcherSize = ButtonSize;
 type SwitcherItems = string | SwitcherItem;
 
 export const switcherDataTid = {
-  origin: 'Switcher',
   root: 'Switcher__root',
 };
 
diff --git a/packages/react-ui/components/Tabs/Indicator.tsx b/packages/react-ui/components/Tabs/Indicator.tsx
index 9f038e74578..8c8937a916f 100644
--- a/packages/react-ui/components/Tabs/Indicator.tsx
+++ b/packages/react-ui/components/Tabs/Indicator.tsx
@@ -26,7 +26,6 @@ export interface IndicatorState {
 }
 
 export const indicatorDataTid = {
-  origin: 'Indicator',
   root: 'Indicator__root',
 };
 
diff --git a/packages/react-ui/components/Tabs/Tab.tsx b/packages/react-ui/components/Tabs/Tab.tsx
index 7bda9be8a7e..b209419906c 100644
--- a/packages/react-ui/components/Tabs/Tab.tsx
+++ b/packages/react-ui/components/Tabs/Tab.tsx
@@ -25,7 +25,6 @@ export interface TabIndicators {
 }
 
 export const tabDataTid = {
-  origin: 'Tab',
   root: 'Tab__root',
 };
 
diff --git a/packages/react-ui/components/Tabs/Tabs.tsx b/packages/react-ui/components/Tabs/Tabs.tsx
index deb027c26cf..7485138d08d 100644
--- a/packages/react-ui/components/Tabs/Tabs.tsx
+++ b/packages/react-ui/components/Tabs/Tabs.tsx
@@ -54,7 +54,6 @@ export interface TabsProps<T extends ValueBaseType = string> extends CommonProps
 }
 
 export const tabsDataTid = {
-  origin: 'Tabs',
   root: 'Tabs__root',
   tab: tabDataTid,
   indicator: indicatorDataTid,
diff --git a/packages/react-ui/components/Textarea/Textarea.tsx b/packages/react-ui/components/Textarea/Textarea.tsx
index c66899e0735..1bd36ad2c0b 100644
--- a/packages/react-ui/components/Textarea/Textarea.tsx
+++ b/packages/react-ui/components/Textarea/Textarea.tsx
@@ -112,7 +112,6 @@ export interface TextareaState {
 }
 
 export const textareaDataTid = {
-  origin: 'Textarea',
   root: 'Textarea__root',
   counter: textareaCounterDataTid,
 };
diff --git a/packages/react-ui/components/Textarea/TextareaCounter.tsx b/packages/react-ui/components/Textarea/TextareaCounter.tsx
index c8189695095..5ee9b437b79 100644
--- a/packages/react-ui/components/Textarea/TextareaCounter.tsx
+++ b/packages/react-ui/components/Textarea/TextareaCounter.tsx
@@ -23,7 +23,6 @@ export interface TextareaCounterRef {
 }
 
 export const textareaCounterDataTid = {
-  origin: 'Textarea',
   root: 'TextareaCounter__root',
 };
 
diff --git a/packages/react-ui/components/Toast/ToastStatic.tsx b/packages/react-ui/components/Toast/ToastStatic.tsx
index 79e62a1fab6..e9e1898d246 100644
--- a/packages/react-ui/components/Toast/ToastStatic.tsx
+++ b/packages/react-ui/components/Toast/ToastStatic.tsx
@@ -6,7 +6,6 @@ import { Nullable } from '../../typings/utility-types';
 import { Toast, Action } from './Toast';
 
 export const toastStaticDataTid = {
-  origin: 'StaticToast',
   root: 'StaticToast',
 };
 
diff --git a/packages/react-ui/components/Toast/ToastView.tsx b/packages/react-ui/components/Toast/ToastView.tsx
index d3c71630fad..7c88c139827 100644
--- a/packages/react-ui/components/Toast/ToastView.tsx
+++ b/packages/react-ui/components/Toast/ToastView.tsx
@@ -28,7 +28,6 @@ export interface ToastViewProps extends CommonProps {
 }
 
 export const toastViewDataTid = {
-  origin: 'ToastView',
   root: 'ToastView__root',
   action: 'ToastView__action',
   close: 'ToastView__close',
diff --git a/packages/react-ui/components/Toggle/Toggle.tsx b/packages/react-ui/components/Toggle/Toggle.tsx
index 185e15aa06d..440de8ba507 100644
--- a/packages/react-ui/components/Toggle/Toggle.tsx
+++ b/packages/react-ui/components/Toggle/Toggle.tsx
@@ -83,7 +83,6 @@ export interface ToggleState {
 }
 
 export const toggleDataTid = {
-  origin: 'Toggle',
   root: 'Toggle__root',
 };
 
diff --git a/packages/react-ui/components/Token/Token.tsx b/packages/react-ui/components/Token/Token.tsx
index b4b1b115203..5612f20757a 100644
--- a/packages/react-ui/components/Token/Token.tsx
+++ b/packages/react-ui/components/Token/Token.tsx
@@ -40,7 +40,6 @@ export interface TokenProps extends CommonProps {
 }
 
 export const tokenDataTid = {
-  origin: 'Token',
   root: 'Token__root',
 };
 
diff --git a/packages/react-ui/components/TokenInput/TokenInput.tsx b/packages/react-ui/components/TokenInput/TokenInput.tsx
index 75bf91b851e..722c14c457c 100644
--- a/packages/react-ui/components/TokenInput/TokenInput.tsx
+++ b/packages/react-ui/components/TokenInput/TokenInput.tsx
@@ -152,7 +152,6 @@ export const DefaultState = {
 };
 
 export const tokenInputDataTid = {
-  origin: 'TokenInput',
   root: 'TokenInput__root',
   tokenInputMenu: tokenInputMenuDataTid,
 };
diff --git a/packages/react-ui/components/TokenInput/TokenInputMenu.tsx b/packages/react-ui/components/TokenInput/TokenInputMenu.tsx
index 8a12d3370a2..f2c0bcded64 100644
--- a/packages/react-ui/components/TokenInput/TokenInputMenu.tsx
+++ b/packages/react-ui/components/TokenInput/TokenInputMenu.tsx
@@ -16,7 +16,6 @@ export interface TokenInputMenuProps<T> extends ComboBoxMenuProps<T> {
 }
 
 export const tokenInputMenuDataTid = {
-  origin: 'TokenInputMenu',
   root: 'TokenInputMenu__root',
 };
 
diff --git a/packages/react-ui/components/Tooltip/Tooltip.tsx b/packages/react-ui/components/Tooltip/Tooltip.tsx
index 6c7d811049b..9ccc85f5309 100644
--- a/packages/react-ui/components/Tooltip/Tooltip.tsx
+++ b/packages/react-ui/components/Tooltip/Tooltip.tsx
@@ -135,7 +135,6 @@ export interface TooltipState {
 }
 
 export const tooltipDataTid = {
-  origin: 'Tooltip',
   root: 'Tooltip__root',
 };
 
diff --git a/packages/react-ui/components/TooltipMenu/TooltipMenu.tsx b/packages/react-ui/components/TooltipMenu/TooltipMenu.tsx
index 8d77259bd68..72a234350c6 100644
--- a/packages/react-ui/components/TooltipMenu/TooltipMenu.tsx
+++ b/packages/react-ui/components/TooltipMenu/TooltipMenu.tsx
@@ -51,7 +51,6 @@ export interface TooltipMenuProps extends CommonProps {
 }
 
 export const tooltipMenuDataTid = {
-  origin: 'TooltipMenu',
   root: 'TooltipMenu__root',
 };
 
diff --git a/packages/react-ui/internal/Calendar/Calendar.tsx b/packages/react-ui/internal/Calendar/Calendar.tsx
index 7f5202b285e..0f5bbf0c6fc 100644
--- a/packages/react-ui/internal/Calendar/Calendar.tsx
+++ b/packages/react-ui/internal/Calendar/Calendar.tsx
@@ -37,7 +37,6 @@ export interface CalendarState {
 }
 
 export const calendarDataTid = {
-  origin: 'Calendar',
   root: 'Calendar',
 };
 
diff --git a/packages/react-ui/internal/Calendar/MonthView.tsx b/packages/react-ui/internal/Calendar/MonthView.tsx
index 732855b7234..e86cab993c4 100644
--- a/packages/react-ui/internal/Calendar/MonthView.tsx
+++ b/packages/react-ui/internal/Calendar/MonthView.tsx
@@ -27,7 +27,6 @@ interface MonthViewProps {
 }
 
 export const monthViewDataTid = {
-  origin: 'MonthView',
   month: 'MonthView__month',
   headerMonth: 'MonthView__headerMonth',
   headerYear: 'MonthView__headerYear',
diff --git a/packages/react-ui/internal/CustomComboBox/ComboBoxMenu.tsx b/packages/react-ui/internal/CustomComboBox/ComboBoxMenu.tsx
index f5ef7aa5f4b..8a39cbf1de0 100644
--- a/packages/react-ui/internal/CustomComboBox/ComboBoxMenu.tsx
+++ b/packages/react-ui/internal/CustomComboBox/ComboBoxMenu.tsx
@@ -29,7 +29,6 @@ export interface ComboBoxMenuProps<T> {
 }
 
 export const comboBoxMenuDataTid = {
-  origin: 'ComboBoxMenu',
   loading: 'ComboBoxMenu__loading',
   failed: 'ComboBoxMenu__failed',
   notFound: 'ComboBoxMenu__notFound',
diff --git a/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx b/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx
index 08e70b8df44..45a95f25815 100644
--- a/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx
+++ b/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx
@@ -80,7 +80,6 @@ interface ComboBoxViewState {
 }
 
 export const comboBoxViewDataTid = {
-  origin: 'ComboBoxView',
   root: 'ComboBoxView__root',
 };
 
diff --git a/packages/react-ui/internal/DateSelect/DateSelect.tsx b/packages/react-ui/internal/DateSelect/DateSelect.tsx
index 3b530c38524..63e995d3019 100644
--- a/packages/react-ui/internal/DateSelect/DateSelect.tsx
+++ b/packages/react-ui/internal/DateSelect/DateSelect.tsx
@@ -46,7 +46,6 @@ export interface DateSelectState {
 }
 
 export const dateSelectDataTid = {
-  origin: 'DataSelect',
   caption: 'DateSelect__caption',
   menuItem: 'DateSelect__menuItem',
 };
diff --git a/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx b/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx
index ae526a4b90c..5fc7a1e0dc9 100644
--- a/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx
+++ b/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx
@@ -26,7 +26,6 @@ interface FileUploaderFileProps {
 }
 
 export const fileUploaderFileDataTid = {
-  origin: 'FileUploaderFile',
   file: 'FileUploader__file',
   fileTooltip: 'FileUploader__fileTooltip',
   fileName: 'FileUploader__fileName',
diff --git a/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx b/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx
index ddeda1f3c6b..461ea5be51b 100644
--- a/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx
+++ b/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx
@@ -12,7 +12,6 @@ interface FileUploaderFileListProps {
 }
 
 export const fileUploaderFileListDataTid = {
-  origin: 'FileUploaderFileList',
   fileList: 'FileUploader__fileList',
 };
 
diff --git a/packages/react-ui/internal/InputLikeText/InputLikeText.tsx b/packages/react-ui/internal/InputLikeText/InputLikeText.tsx
index 2c9b32afbb1..075b2da8cab 100644
--- a/packages/react-ui/internal/InputLikeText/InputLikeText.tsx
+++ b/packages/react-ui/internal/InputLikeText/InputLikeText.tsx
@@ -31,7 +31,6 @@ export interface InputLikeTextProps extends CommonProps, InputProps {
 export type InputLikeTextState = Omit<InputState, 'needsPolyfillPlaceholder'>;
 
 export const inputLikeTextDataTid = {
-  origin: 'InputLikeText',
   root: 'InputLikeText__root',
   input: 'InputLikeText__input',
 };
diff --git a/packages/react-ui/internal/InternalMenu/InternalMenu.tsx b/packages/react-ui/internal/InternalMenu/InternalMenu.tsx
index 5e797464b4c..8cfe8ffd3a4 100644
--- a/packages/react-ui/internal/InternalMenu/InternalMenu.tsx
+++ b/packages/react-ui/internal/InternalMenu/InternalMenu.tsx
@@ -44,7 +44,6 @@ interface MenuState {
 }
 
 export const internalMenuDataTid = {
-  origin: 'InternalMenu',
   root: 'InternalMenu__root',
 };
 
diff --git a/packages/react-ui/internal/MaskedInput/MaskedInput.tsx b/packages/react-ui/internal/MaskedInput/MaskedInput.tsx
index 8209a337380..ffaf1b892c3 100644
--- a/packages/react-ui/internal/MaskedInput/MaskedInput.tsx
+++ b/packages/react-ui/internal/MaskedInput/MaskedInput.tsx
@@ -26,7 +26,6 @@ interface MaskedInputState {
 }
 
 export const maskedInputDataTid = {
-  origin: 'MaskedInput',
   root: 'MaskedInput__root',
 };
 
diff --git a/packages/react-ui/internal/Menu/Menu.tsx b/packages/react-ui/internal/Menu/Menu.tsx
index 66fecfe29e4..0adda0d32eb 100644
--- a/packages/react-ui/internal/Menu/Menu.tsx
+++ b/packages/react-ui/internal/Menu/Menu.tsx
@@ -32,7 +32,6 @@ export interface MenuState {
 }
 
 export const menuDataTid = {
-  origin: 'Menu',
   root: 'Menu__root',
 };
 
diff --git a/packages/react-ui/internal/MobilePopup/MobilePopup.tsx b/packages/react-ui/internal/MobilePopup/MobilePopup.tsx
index 643d0e6760b..2a8d366be7d 100644
--- a/packages/react-ui/internal/MobilePopup/MobilePopup.tsx
+++ b/packages/react-ui/internal/MobilePopup/MobilePopup.tsx
@@ -36,7 +36,6 @@ interface MobilePopupState {
 }
 
 export const mobilePopupDataTid = {
-  origin: 'MobilePopup',
   root: 'MobilePopup__root',
   container: 'MobilePopup__container',
 };
diff --git a/packages/react-ui/internal/Popup/Popup.tsx b/packages/react-ui/internal/Popup/Popup.tsx
index 7fa34c2c22e..e4f61025431 100644
--- a/packages/react-ui/internal/Popup/Popup.tsx
+++ b/packages/react-ui/internal/Popup/Popup.tsx
@@ -114,7 +114,6 @@ export interface PopupState {
 }
 
 export const popupDataTid = {
-  origin: 'Popup',
   content: 'PopupContent',
   contentInner: 'PopupContentInner',
 };
diff --git a/packages/react-ui/internal/Popup/PopupPin.tsx b/packages/react-ui/internal/Popup/PopupPin.tsx
index 935dbbab508..70dcdca4906 100644
--- a/packages/react-ui/internal/Popup/PopupPin.tsx
+++ b/packages/react-ui/internal/Popup/PopupPin.tsx
@@ -26,7 +26,6 @@ interface Props {
 }
 
 export const popupPinDataTid = {
-  origin: 'PopupPin',
   root: 'PopupPin__root',
 };
 
diff --git a/packages/react-ui/internal/PopupMenu/PopupMenu.tsx b/packages/react-ui/internal/PopupMenu/PopupMenu.tsx
index cfe092a05ed..e277a4bd777 100644
--- a/packages/react-ui/internal/PopupMenu/PopupMenu.tsx
+++ b/packages/react-ui/internal/PopupMenu/PopupMenu.tsx
@@ -68,7 +68,6 @@ export const PopupMenuType = {
 };
 
 export const popupMenuDataTid = {
-  origin: 'PopupMenu',
   root: 'PopupMenu_root',
   caption: 'PopupMenu__caption',
 };

From fff1a591269bf669f7fbfcc090e27c4110c926fc Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Wed, 1 Jun 2022 14:21:34 +0300
Subject: [PATCH 12/40] chore: delete origin

---
 packages/react-ui/components/Toast/Toast.tsx        | 1 -
 packages/react-ui/lib/data-tid/componentsDataTid.ts | 4 +++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/react-ui/components/Toast/Toast.tsx b/packages/react-ui/components/Toast/Toast.tsx
index dc8b99db616..ebd382d51e4 100644
--- a/packages/react-ui/components/Toast/Toast.tsx
+++ b/packages/react-ui/components/Toast/Toast.tsx
@@ -28,7 +28,6 @@ export interface ToastProps extends CommonProps {
 }
 
 export const toastDataTid = {
-  origin: 'Toast',
   toastStatic: toastStaticDataTid,
   toastView: toastViewDataTid,
 };
diff --git a/packages/react-ui/lib/data-tid/componentsDataTid.ts b/packages/react-ui/lib/data-tid/componentsDataTid.ts
index 4b50c6acae9..5581f0a45c0 100644
--- a/packages/react-ui/lib/data-tid/componentsDataTid.ts
+++ b/packages/react-ui/lib/data-tid/componentsDataTid.ts
@@ -37,9 +37,11 @@ const tids = Object.keys(allComponents).filter((componentName) => {
 });
 
 export const componentsDataTid: { [key: string]: { [key: string]: string } } = tids.reduce((accum, currTid) => {
+  let componentName = currTid.replace('DataTid', '');
+  componentName = componentName.charAt(0).toUpperCase() + componentName.slice(1);
   return {
     ...accum,
-    [allComponents[currTid].origin]: {
+    [componentName]: {
       [currTid]: Object.entries(allComponents[currTid])
         .map((x) => {
           if (typeof x[1] === 'object') {

From 435303c7931e454e7bdbecb37cd8bc982f015670 Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Wed, 1 Jun 2022 15:35:49 +0300
Subject: [PATCH 13/40] chore: fix export inner components

---
 .../components/DatePicker/DatePicker.tsx      |  5 +++--
 .../react-ui/components/DatePicker/Picker.tsx | 14 +++++++-------
 .../components/FileUploader/FileUploader.tsx  | 18 ++++++++----------
 packages/react-ui/components/Modal/Modal.tsx  |  4 ++--
 .../react-ui/components/Modal/ModalClose.tsx  |  7 ++-----
 .../react-ui/components/Tabs/Indicator.tsx    |  7 ++-----
 packages/react-ui/components/Tabs/Tabs.tsx    |  7 +++----
 .../react-ui/components/Textarea/Textarea.tsx |  4 ++--
 .../components/Textarea/TextareaCounter.tsx   |  8 ++------
 packages/react-ui/components/Toast/Toast.tsx  | 10 ++++++----
 .../react-ui/components/Toast/ToastStatic.tsx |  8 ++------
 .../react-ui/components/Toast/ToastView.tsx   | 13 ++++---------
 .../components/TokenInput/TokenInput.tsx      |  4 ++--
 .../components/TokenInput/TokenInputMenu.tsx  |  8 ++------
 .../FileUploaderFile/FileUploaderFile.tsx     | 19 ++++++-------------
 .../FileUploaderFileList.tsx                  |  7 ++-----
 .../lib/data-tid/componentsDataTid.ts         |  9 +--------
 17 files changed, 56 insertions(+), 96 deletions(-)

diff --git a/packages/react-ui/components/DatePicker/DatePicker.tsx b/packages/react-ui/components/DatePicker/DatePicker.tsx
index e21f4e2f88a..12ae18e3daf 100644
--- a/packages/react-ui/components/DatePicker/DatePicker.tsx
+++ b/packages/react-ui/components/DatePicker/DatePicker.tsx
@@ -16,7 +16,7 @@ import { NativeDateInput } from '../../internal/NativeDateInput';
 import { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';
 import { isNonNullable } from '../../lib/utils';
 
-import { Picker, pickerDataTid } from './Picker';
+import { Picker } from './Picker';
 import { styles } from './DatePicker.styles';
 
 const INPUT_PASS_PROPS = {
@@ -87,7 +87,8 @@ type DatePickerValue = string;
 
 export const dataPickerDataTid = {
   root: 'DatePicker__root',
-  picker: pickerDataTid,
+  pickerRoot: 'Picker__root',
+  pickerTodayWrapper: 'Picker__todayWrapper',
 };
 
 @rootNode
diff --git a/packages/react-ui/components/DatePicker/Picker.tsx b/packages/react-ui/components/DatePicker/Picker.tsx
index 84dfd9238ff..b14e8e216cd 100644
--- a/packages/react-ui/components/DatePicker/Picker.tsx
+++ b/packages/react-ui/components/DatePicker/Picker.tsx
@@ -11,6 +11,7 @@ import { ThemeContext } from '../../lib/theming/ThemeContext';
 
 import { styles } from './Picker.styles';
 import { DatePickerLocale, DatePickerLocaleHelper } from './locale';
+import { dataPickerDataTid } from './DatePicker';
 
 interface Props {
   maxDate?: CalendarDateShape;
@@ -36,11 +37,6 @@ const getTodayCalendarDate = () => {
   };
 };
 
-export const pickerDataTid = {
-  root: 'Picker__root',
-  todayWrapper: 'Picker__todayWrapper',
-};
-
 @locale('DatePicker', DatePickerLocaleHelper)
 export class Picker extends React.Component<Props, State> {
   public static __KONTUR_REACT_UI__ = 'Picker';
@@ -80,7 +76,11 @@ export class Picker extends React.Component<Props, State> {
     const { date } = this.state;
 
     return (
-      <div data-tid={pickerDataTid.root} className={styles.root(this.theme)} onMouseDown={(e) => e.preventDefault()}>
+      <div
+        data-tid={dataPickerDataTid.pickerRoot}
+        className={styles.root(this.theme)}
+        onMouseDown={(e) => e.preventDefault()}
+      >
         <Calendar
           ref={(c) => (this.calendar = c)}
           value={this.props.value}
@@ -107,7 +107,7 @@ export class Picker extends React.Component<Props, State> {
     const today = new InternalDate({ order, separator }).setComponents(InternalDateGetter.getTodayComponents());
     return (
       <button
-        data-tid={pickerDataTid.todayWrapper}
+        data-tid={dataPickerDataTid.pickerTodayWrapper}
         className={styles.todayWrapper(this.theme)}
         onClick={this.handleSelectToday(today)}
         tabIndex={-1}
diff --git a/packages/react-ui/components/FileUploader/FileUploader.tsx b/packages/react-ui/components/FileUploader/FileUploader.tsx
index d73ecdb4b5f..44db37158cf 100644
--- a/packages/react-ui/components/FileUploader/FileUploader.tsx
+++ b/packages/react-ui/components/FileUploader/FileUploader.tsx
@@ -12,14 +12,8 @@ import { UploadIcon } from '../../internal/icons/16px';
 import { FileUploaderControlProviderProps } from '../../internal/FileUploaderControl/FileUploaderControlProvider';
 import { withFileUploaderControlProvider } from '../../internal/FileUploaderControl/withFileUploaderControlProvider';
 import { keyListener } from '../../lib/events/keyListener';
-import {
-  FileUploaderFile,
-  fileUploaderFileDataTid,
-} from '../../internal/FileUploaderControl/FileUploaderFile/FileUploaderFile';
-import {
-  FileUploaderFileList,
-  fileUploaderFileListDataTid,
-} from '../../internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList';
+import { FileUploaderFile } from '../../internal/FileUploaderControl/FileUploaderFile/FileUploaderFile';
+import { FileUploaderFileList } from '../../internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList';
 import { isBrowser } from '../../lib/client';
 import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';
 import { Nullable } from '../../typings/utility-types';
@@ -71,8 +65,12 @@ export const fileUploaderDataTid = {
   root: 'FileUploader__root',
   content: 'FileUploader__content',
   link: 'FileUploader__link',
-  fileUploaderFile: fileUploaderFileDataTid,
-  fileUploaderFileList: fileUploaderFileListDataTid,
+  file: 'FileUploader__file',
+  fileTooltip: 'FileUploader__fileTooltip',
+  fileName: 'FileUploader__fileName',
+  fileSize: 'FileUploader__fileSize',
+  fileIcon: 'FileUploader__fileIcon',
+  fileList: 'FileUploader__fileList',
 };
 
 const defaultRenderFile = (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => fileNode;
diff --git a/packages/react-ui/components/Modal/Modal.tsx b/packages/react-ui/components/Modal/Modal.tsx
index c351ddacd28..cc0ac41f677 100644
--- a/packages/react-ui/components/Modal/Modal.tsx
+++ b/packages/react-ui/components/Modal/Modal.tsx
@@ -21,7 +21,7 @@ import { ModalContext, ModalContextProps } from './ModalContext';
 import { ModalFooter } from './ModalFooter';
 import { ModalHeader } from './ModalHeader';
 import { ModalBody } from './ModalBody';
-import { ModalClose, modalCloseDataTid } from './ModalClose';
+import { ModalClose } from './ModalClose';
 import { styles } from './Modal.styles';
 
 let mountedModalsCount = 0;
@@ -73,7 +73,7 @@ export interface ModalState {
 export const modalDataTid = {
   container: 'modal-container',
   content: 'modal-content',
-  modalClose: modalCloseDataTid,
+  close: 'modal-close',
 };
 
 /**
diff --git a/packages/react-ui/components/Modal/ModalClose.tsx b/packages/react-ui/components/Modal/ModalClose.tsx
index e2a2a28a7e1..a6361f2d24d 100644
--- a/packages/react-ui/components/Modal/ModalClose.tsx
+++ b/packages/react-ui/components/Modal/ModalClose.tsx
@@ -9,10 +9,7 @@ import { CommonWrapper } from '../../internal/CommonWrapper';
 
 import { CloseProps } from './ModalContext';
 import { styles } from './Modal.styles';
-
-export const modalCloseDataTid = {
-  close: 'modal-close',
-};
+import { modalDataTid } from './Modal';
 
 export function ModalClose({ disableClose, requestClose, ...otherProps }: CloseProps) {
   const theme = useContext(ThemeContext);
@@ -46,7 +43,7 @@ export function ModalClose({ disableClose, requestClose, ...otherProps }: CloseP
             onClick={requestClose}
             onFocus={handleFocus}
             onBlur={handleBlur}
-            data-tid={modalCloseDataTid.close}
+            data-tid={modalDataTid.close}
             tabIndex={disableClose ? -1 : 0}
           >
             <CrossIcon />
diff --git a/packages/react-ui/components/Tabs/Indicator.tsx b/packages/react-ui/components/Tabs/Indicator.tsx
index 8c8937a916f..44a93461edd 100644
--- a/packages/react-ui/components/Tabs/Indicator.tsx
+++ b/packages/react-ui/components/Tabs/Indicator.tsx
@@ -12,6 +12,7 @@ import { getDOMRect } from '../../lib/dom/getDOMRect';
 import { styles } from './Indicator.styles';
 import { TabsContext, TabsContextType } from './TabsContext';
 import { TabIndicators } from './Tab';
+import { tabsDataTid } from './Tabs';
 
 export interface IndicatorProps {
   className?: string;
@@ -25,10 +26,6 @@ export interface IndicatorState {
   styles: React.CSSProperties;
 }
 
-export const indicatorDataTid = {
-  root: 'Indicator__root',
-};
-
 @rootNode
 export class Indicator extends React.Component<IndicatorProps, IndicatorState> {
   public static contextType = TabsContext;
@@ -91,7 +88,7 @@ export class Indicator extends React.Component<IndicatorProps, IndicatorState> {
     };
     return (
       <div
-        data-tid={indicatorDataTid.root}
+        data-tid={tabsDataTid.indicatorRoot}
         className={cx(
           styles.root(this.theme),
           indicators.primary && styles.primary(this.theme),
diff --git a/packages/react-ui/components/Tabs/Tabs.tsx b/packages/react-ui/components/Tabs/Tabs.tsx
index 7485138d08d..0cde48d83c7 100644
--- a/packages/react-ui/components/Tabs/Tabs.tsx
+++ b/packages/react-ui/components/Tabs/Tabs.tsx
@@ -9,10 +9,10 @@ import { cx } from '../../lib/theming/Emotion';
 import { getRootNode } from '../../lib/rootNode/getRootNode';
 import { rootNode, TSetRootNode } from '../../lib/rootNode';
 
-import { Indicator, indicatorDataTid } from './Indicator';
+import { Indicator } from './Indicator';
 import { styles } from './Tabs.styles';
 import { TabsContext, TabsContextType } from './TabsContext';
-import { Tab, tabDataTid } from './Tab';
+import { Tab } from './Tab';
 
 type ValueBaseType = string;
 type TabType<T extends ValueBaseType> = {
@@ -55,8 +55,7 @@ export interface TabsProps<T extends ValueBaseType = string> extends CommonProps
 
 export const tabsDataTid = {
   root: 'Tabs__root',
-  tab: tabDataTid,
-  indicator: indicatorDataTid,
+  indicatorRoot: 'Indicator__root',
 };
 
 /**
diff --git a/packages/react-ui/components/Textarea/Textarea.tsx b/packages/react-ui/components/Textarea/Textarea.tsx
index 1bd36ad2c0b..20a224772fe 100644
--- a/packages/react-ui/components/Textarea/Textarea.tsx
+++ b/packages/react-ui/components/Textarea/Textarea.tsx
@@ -19,7 +19,7 @@ import { rootNode, TSetRootNode } from '../../lib/rootNode';
 
 import { getTextAreaHeight } from './TextareaHelpers';
 import { styles } from './Textarea.styles';
-import { TextareaCounter, textareaCounterDataTid, TextareaCounterRef } from './TextareaCounter';
+import { TextareaCounter, TextareaCounterRef } from './TextareaCounter';
 
 const DEFAULT_WIDTH = 250;
 const AUTORESIZE_THROTTLE_DEFAULT_WAIT = 100;
@@ -113,7 +113,7 @@ export interface TextareaState {
 
 export const textareaDataTid = {
   root: 'Textarea__root',
-  counter: textareaCounterDataTid,
+  counter: 'TextareaCounter__root',
 };
 
 /**
diff --git a/packages/react-ui/components/Textarea/TextareaCounter.tsx b/packages/react-ui/components/Textarea/TextareaCounter.tsx
index 5ee9b437b79..7afbb68de46 100644
--- a/packages/react-ui/components/Textarea/TextareaCounter.tsx
+++ b/packages/react-ui/components/Textarea/TextareaCounter.tsx
@@ -7,7 +7,7 @@ import { isFunction } from '../../lib/utils';
 import { Tooltip } from '../Tooltip';
 import { cx } from '../../lib/theming/Emotion';
 
-import { TextareaProps } from './Textarea';
+import { textareaDataTid, TextareaProps } from './Textarea';
 import { styles } from './Textarea.styles';
 
 export type TextareaCounterProps = {
@@ -22,10 +22,6 @@ export interface TextareaCounterRef {
   reflow: () => void;
 }
 
-export const textareaCounterDataTid = {
-  root: 'TextareaCounter__root',
-};
-
 const handleHelpMouseDown = (e: SyntheticEvent) => e.preventDefault();
 
 export const TextareaCounter = React.forwardRef<TextareaCounterRef, TextareaCounterProps>(function TextareaCounter(
@@ -53,7 +49,7 @@ export const TextareaCounter = React.forwardRef<TextareaCounterRef, TextareaCoun
   );
 
   return (
-    <div data-tid={textareaCounterDataTid.root} className={styles.counterContainer(theme)} style={{ width, height }}>
+    <div data-tid={textareaDataTid.counter} className={styles.counterContainer(theme)} style={{ width, height }}>
       <span
         className={cx(styles.counter(theme), {
           [styles.counterError(theme)]: counterValue < 0,
diff --git a/packages/react-ui/components/Toast/Toast.tsx b/packages/react-ui/components/Toast/Toast.tsx
index ebd382d51e4..7b26705cf84 100644
--- a/packages/react-ui/components/Toast/Toast.tsx
+++ b/packages/react-ui/components/Toast/Toast.tsx
@@ -8,8 +8,8 @@ import { isTestEnv } from '../../lib/currentEnvironment';
 import { rootNode, TSetRootNode } from '../../lib/rootNode';
 
 import { styles } from './Toast.styles';
-import { ToastView, toastViewDataTid, ToastViewProps } from './ToastView';
-import { ToastStatic, toastStaticDataTid } from './ToastStatic';
+import { ToastView, ToastViewProps } from './ToastView';
+import { ToastStatic } from './ToastStatic';
 
 export interface Action {
   label: string;
@@ -28,8 +28,10 @@ export interface ToastProps extends CommonProps {
 }
 
 export const toastDataTid = {
-  toastStatic: toastStaticDataTid,
-  toastView: toastViewDataTid,
+  toastStatic: 'StaticToast',
+  toastView: 'ToastView__root',
+  action: 'ToastView__action',
+  close: 'ToastView__close',
 };
 
 /**
diff --git a/packages/react-ui/components/Toast/ToastStatic.tsx b/packages/react-ui/components/Toast/ToastStatic.tsx
index e9e1898d246..8892f9b853e 100644
--- a/packages/react-ui/components/Toast/ToastStatic.tsx
+++ b/packages/react-ui/components/Toast/ToastStatic.tsx
@@ -3,11 +3,7 @@ import ReactDOM from 'react-dom';
 
 import { Nullable } from '../../typings/utility-types';
 
-import { Toast, Action } from './Toast';
-
-export const toastStaticDataTid = {
-  root: 'StaticToast',
-};
+import { Toast, Action, toastDataTid } from './Toast';
 
 export class ToastStatic {
   public static push = (notification: string, action?: Action) => {
@@ -20,7 +16,7 @@ export class ToastStatic {
       body.appendChild(ToastStatic.node);
 
       ReactDOM.render(
-        <Toast data-tid={toastStaticDataTid.root} ref={(el) => (ToastStatic.instance = el)} />,
+        <Toast data-tid={toastDataTid.toastStatic} ref={(el) => (ToastStatic.instance = el)} />,
         ToastStatic.node,
         () => ToastStatic._push(notification, action),
       );
diff --git a/packages/react-ui/components/Toast/ToastView.tsx b/packages/react-ui/components/Toast/ToastView.tsx
index 7c88c139827..b891c40e89d 100644
--- a/packages/react-ui/components/Toast/ToastView.tsx
+++ b/packages/react-ui/components/Toast/ToastView.tsx
@@ -9,6 +9,7 @@ import { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../intern
 import { rootNode, TSetRootNode } from '../../lib/rootNode';
 
 import { styles } from './ToastView.styles';
+import { toastDataTid } from './Toast';
 
 export interface ToastViewProps extends CommonProps {
   /**
@@ -27,12 +28,6 @@ export interface ToastViewProps extends CommonProps {
   onMouseLeave?: () => void;
 }
 
-export const toastViewDataTid = {
-  root: 'ToastView__root',
-  action: 'ToastView__action',
-  close: 'ToastView__close',
-};
-
 @rootNode
 export class ToastView extends React.Component<ToastViewProps> {
   public static propTypes = {
@@ -68,14 +63,14 @@ export class ToastView extends React.Component<ToastViewProps> {
     const { action, onClose, ...rest } = props;
 
     const link = action ? (
-      <span data-tid={toastViewDataTid.action} className={styles.link(this.theme)} onClick={action.handler}>
+      <span data-tid={toastDataTid.action} className={styles.link(this.theme)} onClick={action.handler}>
         {action.label}
       </span>
     ) : null;
 
     const close = action ? (
       <span className={styles.closeWrapper(this.theme)}>
-        <span data-tid={toastViewDataTid.close} className={styles.close(this.theme)} onClick={onClose}>
+        <span data-tid={toastDataTid.close} className={styles.close(this.theme)} onClick={onClose}>
           <CrossIcon />
         </span>
       </span>
@@ -83,7 +78,7 @@ export class ToastView extends React.Component<ToastViewProps> {
 
     return (
       <ZIndex priority="Toast" className={styles.wrapper(this.theme)}>
-        <div data-tid={toastViewDataTid.root} {...rest} className={styles.root(this.theme)} ref={this.setRootNode}>
+        <div data-tid={toastDataTid.toastView} {...rest} className={styles.root(this.theme)} ref={this.setRootNode}>
           <span>{this.props.children}</span>
           {link}
           {close}
diff --git a/packages/react-ui/components/TokenInput/TokenInput.tsx b/packages/react-ui/components/TokenInput/TokenInput.tsx
index 722c14c457c..7e3b0661cb4 100644
--- a/packages/react-ui/components/TokenInput/TokenInput.tsx
+++ b/packages/react-ui/components/TokenInput/TokenInput.tsx
@@ -30,7 +30,7 @@ import { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';
 import { TokenInputLocale, TokenInputLocaleHelper } from './locale';
 import { styles } from './TokenInput.styles';
 import { TokenInputAction, tokenInputReducer } from './TokenInputReducer';
-import { TokenInputMenu, tokenInputMenuDataTid } from './TokenInputMenu';
+import { TokenInputMenu } from './TokenInputMenu';
 import { TextWidthHelper } from './TextWidthHelper';
 
 export enum TokenInputType {
@@ -153,7 +153,7 @@ export const DefaultState = {
 
 export const tokenInputDataTid = {
   root: 'TokenInput__root',
-  tokenInputMenu: tokenInputMenuDataTid,
+  tokenInputMenu: 'TokenInputMenu__root',
 };
 
 const defaultToKey = <T extends {}>(item: T): string => item.toString();
diff --git a/packages/react-ui/components/TokenInput/TokenInputMenu.tsx b/packages/react-ui/components/TokenInput/TokenInputMenu.tsx
index f2c0bcded64..43ebfabe9e0 100644
--- a/packages/react-ui/components/TokenInput/TokenInputMenu.tsx
+++ b/packages/react-ui/components/TokenInput/TokenInputMenu.tsx
@@ -7,7 +7,7 @@ import { Menu } from '../../internal/Menu';
 import { Theme } from '../../lib/theming/Theme';
 import { ThemeContext } from '../../lib/theming/ThemeContext';
 
-import { TokenInputMenuAlign, TokenInputProps } from './TokenInput';
+import { tokenInputDataTid, TokenInputMenuAlign, TokenInputProps } from './TokenInput';
 
 export interface TokenInputMenuProps<T> extends ComboBoxMenuProps<T> {
   anchorElement: HTMLElement;
@@ -15,10 +15,6 @@ export interface TokenInputMenuProps<T> extends ComboBoxMenuProps<T> {
   menuAlign: TokenInputMenuAlign;
 }
 
-export const tokenInputMenuDataTid = {
-  root: 'TokenInputMenu__root',
-};
-
 export class TokenInputMenu<T = string> extends React.Component<TokenInputMenuProps<T>> {
   public static __KONTUR_REACT_UI__ = 'TokenInputMenu';
 
@@ -69,7 +65,7 @@ export class TokenInputMenu<T = string> extends React.Component<TokenInputMenuPr
 
     return (
       <Popup
-        data-tid={tokenInputMenuDataTid.root}
+        data-tid={tokenInputDataTid.tokenInputMenu}
         opened={opened!}
         positions={['bottom left', 'top left']}
         anchorElement={anchorElement}
diff --git a/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx b/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx
index 5fc7a1e0dc9..0d266f53f2c 100644
--- a/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx
+++ b/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx
@@ -15,6 +15,7 @@ import { Nullable } from '../../../typings/utility-types';
 import { Hint } from '../../../components/Hint';
 import { Tooltip } from '../../../components/Tooltip';
 import { getDOMRect } from '../../../lib/dom/getDOMRect';
+import { fileUploaderDataTid } from '../../../components/FileUploader';
 
 import { jsStyles } from './FileUploaderFile.styles';
 
@@ -25,14 +26,6 @@ interface FileUploaderFileProps {
   error?: boolean;
 }
 
-export const fileUploaderFileDataTid = {
-  file: 'FileUploader__file',
-  fileTooltip: 'FileUploader__fileTooltip',
-  fileName: 'FileUploader__fileName',
-  fileSize: 'FileUploader__fileSize',
-  fileIcon: 'FileUploader__fileIcon',
-};
-
 const getTruncatedName = (fileNameWidth: number, fileNameElementWidth: number, name: string) => {
   if (!fileNameWidth && !fileNameElementWidth) {
     return null;
@@ -159,27 +152,27 @@ export const FileUploaderFile = (props: FileUploaderFileProps) => {
 
   return (
     <div
-      data-tid={fileUploaderFileDataTid.file}
+      data-tid={fileUploaderDataTid.file}
       className={jsStyles.root()}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
-      <Tooltip data-tid={fileUploaderFileDataTid.fileTooltip} pos="right middle" render={renderTooltipContent}>
+      <Tooltip data-tid={fileUploaderDataTid.fileTooltip} pos="right middle" render={renderTooltipContent}>
         <div className={contentClassNames}>
           <TextWidthHelper ref={textHelperRef} text={name} />
           <Hint maxWidth={'100%'} text={isTruncated ? name : null}>
-            <span data-tid={fileUploaderFileDataTid.fileName} ref={fileNameElementRef} className={jsStyles.name()}>
+            <span data-tid={fileUploaderDataTid.fileName} ref={fileNameElementRef} className={jsStyles.name()}>
               {truncatedFileName}
             </span>
           </Hint>
           {!!showSize && formattedSize && (
-            <span data-tid={fileUploaderFileDataTid.fileSize} className={jsStyles.size()}>
+            <span data-tid={fileUploaderDataTid.fileSize} className={jsStyles.size()}>
               {formattedSize}
             </span>
           )}
           <div
             className={iconClassNames}
-            data-tid={fileUploaderFileDataTid.fileIcon}
+            data-tid={fileUploaderDataTid.fileIcon}
             tabIndex={0}
             onClick={handleRemove}
             onFocus={handleFocus}
diff --git a/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx b/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx
index 461ea5be51b..a3df4a2cfd3 100644
--- a/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx
+++ b/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx
@@ -4,6 +4,7 @@ import { FileUploaderControlContext } from '../FileUploaderControlContext';
 import { ThemeContext } from '../../../lib/theming/ThemeContext';
 import { FileUploaderFile } from '../FileUploaderFile/FileUploaderFile';
 import { FileUploaderAttachedFile } from '../fileUtils';
+import { fileUploaderDataTid } from '../../../components/FileUploader';
 
 import { jsStyles } from './FileUploaderFileList.styles';
 
@@ -11,17 +12,13 @@ interface FileUploaderFileListProps {
   renderFile: (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => React.ReactNode;
 }
 
-export const fileUploaderFileListDataTid = {
-  fileList: 'FileUploader__fileList',
-};
-
 export const FileUploaderFileList = (props: FileUploaderFileListProps) => {
   const { renderFile } = props;
   const { files } = useContext(FileUploaderControlContext);
   const theme = useContext(ThemeContext);
 
   return (
-    <div data-tid={fileUploaderFileListDataTid.fileList}>
+    <div data-tid={fileUploaderDataTid.fileList}>
       {files.map((file) => (
         <div key={file.id} className={jsStyles.fileWrapper(theme)}>
           <div className={jsStyles.file()}>{renderFile(file, <FileUploaderFile file={file} showSize />)}</div>
diff --git a/packages/react-ui/lib/data-tid/componentsDataTid.ts b/packages/react-ui/lib/data-tid/componentsDataTid.ts
index 5581f0a45c0..1cecf7f33b8 100644
--- a/packages/react-ui/lib/data-tid/componentsDataTid.ts
+++ b/packages/react-ui/lib/data-tid/componentsDataTid.ts
@@ -43,14 +43,7 @@ export const componentsDataTid: { [key: string]: { [key: string]: string } } = t
     ...accum,
     [componentName]: {
       [currTid]: Object.entries(allComponents[currTid])
-        .map((x) => {
-          if (typeof x[1] === 'object') {
-            return `${Object.entries(x[1])
-              .map((y) => `${x[0]}.${y.join(':')}`)
-              .join(', \n')}`;
-          }
-          return x.join(':');
-        })
+        .map((x) => x.join(': '))
         .join(', \n'),
     },
   };

From 616ef41894502126a95a219616c28ff273181fb9 Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Wed, 1 Jun 2022 16:21:19 +0300
Subject: [PATCH 14/40] chore: fix docs

---
 packages/react-ui/.styleguide/helpers.js             |  2 +-
 packages/react-ui/DATATIDS.md                        | 12 ++++++++++++
 packages/react-ui/lib/data-tid/DATATID.md            |  9 ---------
 .../{DataTid.styles.ts => DataTids.styles.ts}        |  0
 .../lib/data-tid/{DataTid.tsx => DataTids.tsx}       | 10 +++++-----
 .../{componentsDataTid.ts => componentsDataTids.ts}  |  2 +-
 6 files changed, 19 insertions(+), 16 deletions(-)
 create mode 100644 packages/react-ui/DATATIDS.md
 delete mode 100644 packages/react-ui/lib/data-tid/DATATID.md
 rename packages/react-ui/lib/data-tid/{DataTid.styles.ts => DataTids.styles.ts} (100%)
 rename packages/react-ui/lib/data-tid/{DataTid.tsx => DataTids.tsx} (82%)
 rename packages/react-ui/lib/data-tid/{componentsDataTid.ts => componentsDataTids.ts} (93%)

diff --git a/packages/react-ui/.styleguide/helpers.js b/packages/react-ui/.styleguide/helpers.js
index 70bb384a3ad..7e846d7ead9 100644
--- a/packages/react-ui/.styleguide/helpers.js
+++ b/packages/react-ui/.styleguide/helpers.js
@@ -82,7 +82,7 @@ const getCommonSections = () => {
     { name: 'Roadmap', content: path.join(__dirname, '../ROADMAP.md') },
     { name: 'Migration', content: path.join(__dirname, '../MIGRATION.md'), exampleMode: 'expand' },
     { name: 'LocaleContext', content: path.join(__dirname, '../lib/locale/LOCALECONTEXT.md') },
-    { name: 'DataTid', content: path.join(__dirname, '../lib/data-tid/DATATID.md') },
+    { name: 'DataTids', content: path.join(__dirname, '../DATATIDS.md') },
     { name: 'SSR', content: path.join(__dirname, '../SSR.md') },
     { name: 'Mobiles', content: path.join(__dirname, '../MOBILES.md') },
     { name: 'Accessibility', content: path.join(__dirname, '../../../accessibility.md') },
diff --git a/packages/react-ui/DATATIDS.md b/packages/react-ui/DATATIDS.md
new file mode 100644
index 00000000000..99e7f4e0394
--- /dev/null
+++ b/packages/react-ui/DATATIDS.md
@@ -0,0 +1,12 @@
+Аттрибуты data-tid экспортируются для компонентов в виде объекта.
+При необходимости добавления аттрибута data-tid необходимо создать пулл-реквест.
+
+У всех компонентов также есть проп data-tid, которым можно переопределять корневые дата-тиды.
+
+Список экспортируемых data-tid:
+
+```jsx harmony
+import {DataTids} from '../react-ui/lib/data-tid/DataTids';
+
+<DataTids/>
+```
diff --git a/packages/react-ui/lib/data-tid/DATATID.md b/packages/react-ui/lib/data-tid/DATATID.md
deleted file mode 100644
index 215fd0ecf3e..00000000000
--- a/packages/react-ui/lib/data-tid/DATATID.md
+++ /dev/null
@@ -1,9 +0,0 @@
-Аттрибут data-tid экспортируется для компонентов в виде объекта.
-При необходимости добавления аттрибута data-tid необходимо создать пулл-реквест
-
-Список экспортируемых data-tid:
-
-```jsx harmony
-import {DataTid} from './DataTid';
-<DataTid />
-```
diff --git a/packages/react-ui/lib/data-tid/DataTid.styles.ts b/packages/react-ui/lib/data-tid/DataTids.styles.ts
similarity index 100%
rename from packages/react-ui/lib/data-tid/DataTid.styles.ts
rename to packages/react-ui/lib/data-tid/DataTids.styles.ts
diff --git a/packages/react-ui/lib/data-tid/DataTid.tsx b/packages/react-ui/lib/data-tid/DataTids.tsx
similarity index 82%
rename from packages/react-ui/lib/data-tid/DataTid.tsx
rename to packages/react-ui/lib/data-tid/DataTids.tsx
index 876cdb57de2..13c9c0e3c64 100644
--- a/packages/react-ui/lib/data-tid/DataTid.tsx
+++ b/packages/react-ui/lib/data-tid/DataTids.tsx
@@ -2,15 +2,15 @@ import React from 'react';
 
 import { Select } from '../../components/Select';
 
-import { styles } from './DataTid.styles';
-import { componentsDataTid } from './componentsDataTid';
+import { styles } from './DataTids.styles';
+import { componentsDataTids } from './componentsDataTids';
 
-export class DataTid extends React.Component<{}, { selectedValue: string }> {
+export class DataTids extends React.Component<{}, { selectedValue: string }> {
   public state = {
     selectedValue: 'все',
   };
 
-  private components = Object.keys(componentsDataTid);
+  private components = Object.keys(componentsDataTids);
 
   private items = ['все', ...this.components];
 
@@ -21,7 +21,7 @@ export class DataTid extends React.Component<{}, { selectedValue: string }> {
   public render() {
     const list = this.components.map((componentName: string, index: number) => {
       if (componentName === this.state.selectedValue || this.state.selectedValue === 'все') {
-        const dataTidList = componentsDataTid[componentName];
+        const dataTidList = componentsDataTids[componentName];
         return (
           <div key={index} className={styles.row()}>
             <div className={styles.leftCell()}>{componentName}</div>
diff --git a/packages/react-ui/lib/data-tid/componentsDataTid.ts b/packages/react-ui/lib/data-tid/componentsDataTids.ts
similarity index 93%
rename from packages/react-ui/lib/data-tid/componentsDataTid.ts
rename to packages/react-ui/lib/data-tid/componentsDataTids.ts
index 1cecf7f33b8..afc7a29a8ae 100644
--- a/packages/react-ui/lib/data-tid/componentsDataTid.ts
+++ b/packages/react-ui/lib/data-tid/componentsDataTids.ts
@@ -36,7 +36,7 @@ const tids = Object.keys(allComponents).filter((componentName) => {
   }
 });
 
-export const componentsDataTid: { [key: string]: { [key: string]: string } } = tids.reduce((accum, currTid) => {
+export const componentsDataTids: { [key: string]: { [key: string]: string } } = tids.reduce((accum, currTid) => {
   let componentName = currTid.replace('DataTid', '');
   componentName = componentName.charAt(0).toUpperCase() + componentName.slice(1);
   return {

From ee471c3418b198d8277ecaa4926305640465ae13 Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Thu, 2 Jun 2022 11:18:06 +0300
Subject: [PATCH 15/40] chore: rename datatids objects

---
 .../components/Autocomplete/Autocomplete.tsx       |  6 +++---
 packages/react-ui/components/Button/Button.tsx     |  6 +++---
 packages/react-ui/components/Center/Center.tsx     |  6 +++---
 packages/react-ui/components/Checkbox/Checkbox.tsx |  7 ++++---
 .../components/CurrencyInput/CurrencyInput.tsx     |  6 +++---
 .../components/CurrencyLabel/CurrencyLabel.tsx     |  6 +++---
 .../react-ui/components/DatePicker/DatePicker.tsx  |  6 +++---
 packages/react-ui/components/DatePicker/Picker.tsx |  6 +++---
 packages/react-ui/components/Dropdown/Dropdown.tsx |  6 +++---
 .../components/FileUploader/FileUploader.tsx       | 10 +++++-----
 packages/react-ui/components/FxInput/FxInput.tsx   |  6 +++---
 packages/react-ui/components/Gapped/Gapped.tsx     |  8 ++++----
 .../components/GlobalLoader/GlobalLoader.tsx       |  6 +++---
 packages/react-ui/components/Group/Group.tsx       |  6 +++---
 packages/react-ui/components/Input/Input.tsx       |  6 +++---
 packages/react-ui/components/Link/Link.tsx         |  6 +++---
 packages/react-ui/components/Loader/Loader.tsx     |  8 ++++----
 .../react-ui/components/MenuHeader/MenuHeader.tsx  |  6 +++---
 packages/react-ui/components/MenuItem/MenuItem.tsx |  8 ++++----
 .../components/MenuSeparator/MenuSeparator.tsx     |  6 +++---
 packages/react-ui/components/Modal/Modal.tsx       |  8 ++++----
 packages/react-ui/components/Modal/ModalClose.tsx  |  4 ++--
 packages/react-ui/components/Modal/ModalFooter.tsx |  6 +++---
 packages/react-ui/components/Modal/ModalHeader.tsx |  6 +++---
 packages/react-ui/components/Paging/Paging.tsx     | 14 +++++++-------
 .../components/PasswordInput/PasswordInput.tsx     | 10 +++++-----
 packages/react-ui/components/Radio/Radio.tsx       |  6 +++---
 .../react-ui/components/RadioGroup/RadioGroup.tsx  |  6 +++---
 .../components/ScrollContainer/ScrollContainer.tsx |  8 ++++----
 packages/react-ui/components/Select/Select.tsx     |  6 +++---
 packages/react-ui/components/SidePage/SidePage.tsx |  8 ++++----
 .../react-ui/components/SidePage/SidePageBody.tsx  |  6 +++---
 .../components/SidePage/SidePageContainer.tsx      |  6 +++---
 .../components/SidePage/SidePageFooter.tsx         |  6 +++---
 .../components/SidePage/SidePageHeader.tsx         |  8 ++++----
 packages/react-ui/components/Spinner/Spinner.tsx   |  6 +++---
 packages/react-ui/components/Sticky/Sticky.tsx     |  6 +++---
 packages/react-ui/components/Switcher/Switcher.tsx |  6 +++---
 packages/react-ui/components/Tabs/Indicator.tsx    |  4 ++--
 packages/react-ui/components/Tabs/Tab.tsx          |  6 +++---
 packages/react-ui/components/Tabs/Tabs.tsx         |  6 +++---
 packages/react-ui/components/Textarea/Textarea.tsx |  6 +++---
 .../components/Textarea/TextareaCounter.tsx        |  4 ++--
 packages/react-ui/components/Toast/Toast.tsx       |  4 ++--
 packages/react-ui/components/Toast/ToastStatic.tsx |  4 ++--
 packages/react-ui/components/Toast/ToastView.tsx   |  8 ++++----
 packages/react-ui/components/Toggle/Toggle.tsx     |  6 +++---
 packages/react-ui/components/Token/Token.tsx       |  6 +++---
 .../react-ui/components/TokenInput/TokenInput.tsx  |  6 +++---
 .../components/TokenInput/TokenInputMenu.tsx       |  4 ++--
 packages/react-ui/components/Tooltip/Tooltip.tsx   |  6 +++---
 .../components/TooltipMenu/TooltipMenu.tsx         |  6 +++---
 packages/react-ui/internal/Calendar/Calendar.tsx   |  6 +++---
 packages/react-ui/internal/Calendar/MonthView.tsx  | 10 +++++-----
 .../internal/CustomComboBox/ComboBoxMenu.tsx       | 14 +++++++-------
 .../internal/CustomComboBox/ComboBoxView.tsx       |  6 +++---
 .../react-ui/internal/DateSelect/DateSelect.tsx    |  6 +++---
 .../FileUploaderFile/FileUploaderFile.tsx          | 12 ++++++------
 .../FileUploaderFileList/FileUploaderFileList.tsx  |  4 ++--
 .../internal/InputLikeText/InputLikeText.tsx       |  8 ++++----
 .../internal/InternalMenu/InternalMenu.tsx         |  6 +++---
 .../react-ui/internal/MaskedInput/MaskedInput.tsx  |  6 +++---
 packages/react-ui/internal/Menu/Menu.tsx           |  6 +++---
 .../react-ui/internal/MobilePopup/MobilePopup.tsx  |  8 ++++----
 packages/react-ui/internal/Popup/Popup.tsx         |  8 ++++----
 packages/react-ui/internal/Popup/PopupPin.tsx      |  6 +++---
 packages/react-ui/internal/PopupMenu/PopupMenu.tsx | 10 +++++-----
 .../react-ui/lib/data-tid/componentsDataTids.ts    |  5 ++---
 68 files changed, 227 insertions(+), 227 deletions(-)

diff --git a/packages/react-ui/components/Autocomplete/Autocomplete.tsx b/packages/react-ui/components/Autocomplete/Autocomplete.tsx
index dcaad53ad74..bb27fc569c5 100644
--- a/packages/react-ui/components/Autocomplete/Autocomplete.tsx
+++ b/packages/react-ui/components/Autocomplete/Autocomplete.tsx
@@ -77,9 +77,9 @@ export interface AutocompleteState {
   isMobileOpened: boolean;
 }
 
-export const autocompleteDataTid = {
+export const AutocompleteDataTids = {
   root: 'Autocomplete__root',
-};
+} as const;
 
 /**
  * Стандартный инпут с подсказками.
@@ -214,7 +214,7 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
     return (
       <RenderLayer onFocusOutside={this.handleBlur} onClickOutside={this.handleClickOutside} active={focused}>
         <span
-          data-tid={autocompleteDataTid.root}
+          data-tid={AutocompleteDataTids.root}
           className={styles.root(this.theme)}
           style={{ width }}
           ref={this.refRootSpan}
diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx
index 96805c093a4..18b6dd7ae31 100644
--- a/packages/react-ui/components/Button/Button.tsx
+++ b/packages/react-ui/components/Button/Button.tsx
@@ -164,9 +164,9 @@ export interface ButtonState {
   focusedByTab: boolean;
 }
 
-export const buttonDataTid = {
+export const ButtonDataTids = {
   root: 'Button__root',
-};
+} as const;
 
 @rootNode
 export class Button extends React.Component<ButtonProps, ButtonState> {
@@ -386,7 +386,7 @@ export class Button extends React.Component<ButtonProps, ButtonState> {
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <span {...wrapProps}>
-          <button data-tid={buttonDataTid.root} ref={this._ref} {...rootProps}>
+          <button data-tid={ButtonDataTids.root} ref={this._ref} {...rootProps}>
             {innerShadowNode}
             {outlineNode}
             {loadingNode}
diff --git a/packages/react-ui/components/Center/Center.tsx b/packages/react-ui/components/Center/Center.tsx
index 917f2b269c4..082dcb20cc4 100644
--- a/packages/react-ui/components/Center/Center.tsx
+++ b/packages/react-ui/components/Center/Center.tsx
@@ -23,9 +23,9 @@ export interface CenterProps
       }
     > {}
 
-export const centerDataTid = {
+export const CenterDataTids = {
   root: 'Center__root',
-};
+} as const;
 
 /**
  * Контейнер, который центрирует элементы внутри себя.
@@ -51,7 +51,7 @@ export class Center extends React.Component<CenterProps> {
 
     return (
       <div
-        data-tid={centerDataTid.root}
+        data-tid={CenterDataTids.root}
         {...rest}
         className={cx({
           [styles.root()]: true,
diff --git a/packages/react-ui/components/Checkbox/Checkbox.tsx b/packages/react-ui/components/Checkbox/Checkbox.tsx
index 78969722852..81234bc2363 100644
--- a/packages/react-ui/components/Checkbox/Checkbox.tsx
+++ b/packages/react-ui/components/Checkbox/Checkbox.tsx
@@ -63,9 +63,10 @@ export interface CheckboxState {
   indeterminate: boolean;
 }
 
-export const checkboxDataTid = {
+export const CheckboxDataTids = {
   root: 'Checkbox__root',
-};
+} as const;
+
 @rootNode
 export class Checkbox extends React.PureComponent<CheckboxProps, CheckboxState> {
   public static __KONTUR_REACT_UI__ = 'Checkbox';
@@ -226,7 +227,7 @@ export class Checkbox extends React.PureComponent<CheckboxProps, CheckboxState>
 
     return (
       <label
-        data-tid={checkboxDataTid.root}
+        data-tid={CheckboxDataTids.root}
         className={rootClass}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
diff --git a/packages/react-ui/components/CurrencyInput/CurrencyInput.tsx b/packages/react-ui/components/CurrencyInput/CurrencyInput.tsx
index 61eeff61f2d..de48f9926e5 100644
--- a/packages/react-ui/components/CurrencyInput/CurrencyInput.tsx
+++ b/packages/react-ui/components/CurrencyInput/CurrencyInput.tsx
@@ -46,9 +46,9 @@ export interface CurrencyInputState {
   focused: boolean;
 }
 
-export const currencyInputDataTid = {
+export const CurrencyInputDataTids = {
   root: 'CurrencyInput__root',
-};
+} as const;
 
 /**
  * Поле для денежных сумм (и других числовых значений).
@@ -148,7 +148,7 @@ export class CurrencyInput extends React.PureComponent<CurrencyInputProps, Curre
 
     return (
       <Input
-        data-tid={currencyInputDataTid.root}
+        data-tid={CurrencyInputDataTids.root}
         {...rest}
         value={this.state.formatted}
         onBlur={this.handleBlur}
diff --git a/packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx b/packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx
index ade95aba987..9f9e3e2bbab 100644
--- a/packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx
+++ b/packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx
@@ -18,15 +18,15 @@ export const defaultProps = {
   fractionDigits: 2,
 };
 
-export const currencyLabelDataTid = {
+export const CurrencyLabelDataTids = {
   root: 'CurrencyLabel__root',
-};
+} as const;
 
 export const CurrencyLabel = (props: CurrencyLabelProps): JSX.Element => {
   const { value, fractionDigits, currencySymbol } = props;
   return (
     <CommonWrapper {...props}>
-      <span data-tid={currencyLabelDataTid.root}>
+      <span data-tid={CurrencyLabelDataTids.root}>
         {CurrencyHelper.format(value, { fractionDigits })}
         {currencySymbol && String.fromCharCode(0xa0) /* &nbsp; */}
         {currencySymbol}
diff --git a/packages/react-ui/components/DatePicker/DatePicker.tsx b/packages/react-ui/components/DatePicker/DatePicker.tsx
index 12ae18e3daf..26ffcfb2582 100644
--- a/packages/react-ui/components/DatePicker/DatePicker.tsx
+++ b/packages/react-ui/components/DatePicker/DatePicker.tsx
@@ -85,11 +85,11 @@ export interface DatePickerState {
 
 type DatePickerValue = string;
 
-export const dataPickerDataTid = {
+export const DataPickerDataTids = {
   root: 'DatePicker__root',
   pickerRoot: 'Picker__root',
   pickerTodayWrapper: 'Picker__todayWrapper',
-};
+} as const;
 
 @rootNode
 export class DatePicker extends React.PureComponent<DatePickerProps<DatePickerValue>, DatePickerState> {
@@ -257,7 +257,7 @@ export class DatePicker extends React.PureComponent<DatePickerProps<DatePickerVa
     if (this.state.opened) {
       picker = (
         <DropdownContainer
-          data-tid={dataPickerDataTid.root}
+          data-tid={DataPickerDataTids.root}
           getParent={this.getParent}
           offsetY={2}
           align={this.props.menuAlign}
diff --git a/packages/react-ui/components/DatePicker/Picker.tsx b/packages/react-ui/components/DatePicker/Picker.tsx
index b14e8e216cd..989367f9b98 100644
--- a/packages/react-ui/components/DatePicker/Picker.tsx
+++ b/packages/react-ui/components/DatePicker/Picker.tsx
@@ -11,7 +11,7 @@ import { ThemeContext } from '../../lib/theming/ThemeContext';
 
 import { styles } from './Picker.styles';
 import { DatePickerLocale, DatePickerLocaleHelper } from './locale';
-import { dataPickerDataTid } from './DatePicker';
+import { DataPickerDataTids } from './DatePicker';
 
 interface Props {
   maxDate?: CalendarDateShape;
@@ -77,7 +77,7 @@ export class Picker extends React.Component<Props, State> {
 
     return (
       <div
-        data-tid={dataPickerDataTid.pickerRoot}
+        data-tid={DataPickerDataTids.pickerRoot}
         className={styles.root(this.theme)}
         onMouseDown={(e) => e.preventDefault()}
       >
@@ -107,7 +107,7 @@ export class Picker extends React.Component<Props, State> {
     const today = new InternalDate({ order, separator }).setComponents(InternalDateGetter.getTodayComponents());
     return (
       <button
-        data-tid={dataPickerDataTid.pickerTodayWrapper}
+        data-tid={DataPickerDataTids.pickerTodayWrapper}
         className={styles.todayWrapper(this.theme)}
         onClick={this.handleSelectToday(today)}
         tabIndex={-1}
diff --git a/packages/react-ui/components/Dropdown/Dropdown.tsx b/packages/react-ui/components/Dropdown/Dropdown.tsx
index 37ebeb71a17..47a22af79c8 100644
--- a/packages/react-ui/components/Dropdown/Dropdown.tsx
+++ b/packages/react-ui/components/Dropdown/Dropdown.tsx
@@ -87,9 +87,9 @@ export interface DropdownProps extends CommonProps {
 
 type DropdownSelectType = Select<React.ReactNode, React.ReactNode>;
 
-export const dropdownDataTid = {
+export const DropdownDataTids = {
   root: 'Dropdown__root',
-};
+} as const;
 
 /**
  * Выпадающее меню.
@@ -182,7 +182,7 @@ export class Dropdown extends React.Component<DropdownProps> {
 
     return (
       <Select<React.ReactNode, React.ReactNode>
-        data-tid={dropdownDataTid.root}
+        data-tid={DropdownDataTids.root}
         ref={this._refSelect}
         {...filterProps(props, PASS_PROPS)}
         value={caption}
diff --git a/packages/react-ui/components/FileUploader/FileUploader.tsx b/packages/react-ui/components/FileUploader/FileUploader.tsx
index 44db37158cf..d3873d0379b 100644
--- a/packages/react-ui/components/FileUploader/FileUploader.tsx
+++ b/packages/react-ui/components/FileUploader/FileUploader.tsx
@@ -61,7 +61,7 @@ export interface FileUploaderRef {
   reset: () => void;
 }
 
-export const fileUploaderDataTid = {
+export const FileUploaderDataTids = {
   root: 'FileUploader__root',
   content: 'FileUploader__content',
   link: 'FileUploader__link',
@@ -71,7 +71,7 @@ export const fileUploaderDataTid = {
   fileSize: 'FileUploader__fileSize',
   fileIcon: 'FileUploader__fileIcon',
   fileList: 'FileUploader__fileList',
-};
+} as const;
 
 const defaultRenderFile = (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => fileNode;
 
@@ -237,7 +237,7 @@ const _FileUploader = React.forwardRef<FileUploaderRef, _FileUploaderProps>((pro
 
   return (
     <CommonWrapper {...props}>
-      <div data-tid={fileUploaderDataTid.root} className={jsStyles.root(theme)} style={useMemoObject({ width })}>
+      <div data-tid={FileUploaderDataTids.root} className={jsStyles.root(theme)} style={useMemoObject({ width })}>
         {!hideFiles && !isSingleMode && !!files.length && <FileUploaderFileList renderFile={renderFile} />}
         <div className={uploadButtonWrapperClassNames}>
           <label
@@ -246,8 +246,8 @@ const _FileUploader = React.forwardRef<FileUploaderRef, _FileUploaderProps>((pro
             ref={labelRef}
             className={uploadButtonClassNames}
           >
-            <div data-tid={fileUploaderDataTid.content} className={jsStyles.content()}>
-              <span data-tid={fileUploaderDataTid.link} className={linkClassNames}>
+            <div data-tid={FileUploaderDataTids.content} className={jsStyles.content()}>
+              <span data-tid={FileUploaderDataTids.link} className={linkClassNames}>
                 {hasOneFileForSingle ? locale.choosedFile : locale.chooseFile}
               </span>
               &nbsp;
diff --git a/packages/react-ui/components/FxInput/FxInput.tsx b/packages/react-ui/components/FxInput/FxInput.tsx
index 8089b7932ae..7b2c0c34211 100644
--- a/packages/react-ui/components/FxInput/FxInput.tsx
+++ b/packages/react-ui/components/FxInput/FxInput.tsx
@@ -33,9 +33,9 @@ export interface FxInputProps
       }
     > {}
 
-export const fxInputDataTid = {
+export const FxInputDataTids = {
   root: 'FxInput__root',
-};
+} as const;
 
 /** Принимает все свойства `Input`'a */
 @rootNode
@@ -91,7 +91,7 @@ export class FxInput extends React.Component<FxInputProps> {
     }
 
     return (
-      <Group data-tid={fxInputDataTid.root} width={this.props.width}>
+      <Group data-tid={FxInputDataTids.root} width={this.props.width}>
         {button}
         {this.getProps().type === 'currency' ? (
           <CurrencyInput
diff --git a/packages/react-ui/components/Gapped/Gapped.tsx b/packages/react-ui/components/Gapped/Gapped.tsx
index 39385707d6c..71878ba85fb 100644
--- a/packages/react-ui/components/Gapped/Gapped.tsx
+++ b/packages/react-ui/components/Gapped/Gapped.tsx
@@ -28,10 +28,10 @@ export interface GappedProps extends CommonProps {
   children: React.ReactNode;
 }
 
-export const gappedDataTid = {
+export const GappedDataTids = {
   vertical: 'Gapped__vertical',
   horizontal: 'Gapped__horizontal',
-};
+} as const;
 
 /**
  * Контейнер, расстояние между элементами в котором равно `gap`.
@@ -98,7 +98,7 @@ export class Gapped extends React.Component<GappedProps> {
         );
       });
 
-    return <div data-tid={gappedDataTid.vertical}>{children}</div>;
+    return <div data-tid={GappedDataTids.vertical}>{children}</div>;
   }
 
   private renderHorizontal() {
@@ -113,7 +113,7 @@ export class Gapped extends React.Component<GappedProps> {
     const contStyle: React.CSSProperties = wrap ? { marginTop: -gap - 1, marginLeft: -gap } : { whiteSpace: 'nowrap' };
 
     return (
-      <div data-tid={gappedDataTid.horizontal} style={rootStyle}>
+      <div data-tid={GappedDataTids.horizontal} style={rootStyle}>
         <div style={contStyle}>
           {React.Children.toArray(children)
             .filter(this.filterChildren)
diff --git a/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx b/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx
index 7e1f165b3c2..baad3c12689 100644
--- a/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx
+++ b/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx
@@ -72,9 +72,9 @@ interface DefaultProps {
 }
 export type GlobalLoaderComponentProps = GlobalLoaderProps & DefaultProps;
 
-export const globalLoaderDataTid = {
+export const GlobalLoaderDataTids = {
   root: 'GlobalLoader',
-};
+} as const;
 
 let currentGlobalLoader: GlobalLoader;
 
@@ -164,7 +164,7 @@ export class GlobalLoader extends React.Component<GlobalLoaderComponentProps, Gl
             expectedResponseTime={this.state.expectedResponseTime}
             delayBeforeHide={this.props.delayBeforeHide}
             status={status}
-            data-tid={globalLoaderDataTid.root}
+            data-tid={GlobalLoaderDataTids.root}
             disableAnimations={this.props.disableAnimations}
           />
         </CommonWrapper>
diff --git a/packages/react-ui/components/Group/Group.tsx b/packages/react-ui/components/Group/Group.tsx
index 3f7afff44e8..464845dbf20 100644
--- a/packages/react-ui/components/Group/Group.tsx
+++ b/packages/react-ui/components/Group/Group.tsx
@@ -20,9 +20,9 @@ interface GroupChildProps {
   corners?: number;
 }
 
-export const groupDataTid = {
+export const GroupDataTids = {
   root: 'Group__root',
-};
+} as const;
 
 @rootNode
 export class Group extends React.Component<GroupProps> {
@@ -50,7 +50,7 @@ export class Group extends React.Component<GroupProps> {
 
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-        <span data-tid={groupDataTid.root} className={styles.root()} style={style}>
+        <span data-tid={GroupDataTids.root} className={styles.root()} style={style}>
           {React.Children.map(this.props.children, (child) => {
             if (!child || !React.isValidElement<GroupChildProps>(child)) {
               return null;
diff --git a/packages/react-ui/components/Input/Input.tsx b/packages/react-ui/components/Input/Input.tsx
index b04f1964cd2..8dbb55e334a 100644
--- a/packages/react-ui/components/Input/Input.tsx
+++ b/packages/react-ui/components/Input/Input.tsx
@@ -107,9 +107,9 @@ export interface InputState {
   needsPolyfillPlaceholder: boolean;
 }
 
-export const inputDataTid = {
+export const InputDataTids = {
   root: 'Input__root',
-};
+} as const;
 
 /**
  * Интерфейс пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
@@ -332,7 +332,7 @@ export class Input extends React.Component<InputProps, InputState> {
     const input = mask ? this.renderMaskedInput(inputProps, mask) : React.createElement('input', inputProps);
 
     return (
-      <label data-tid={inputDataTid.root} {...labelProps}>
+      <label data-tid={InputDataTids.root} {...labelProps}>
         <span className={styles.sideContainer()}>
           {this.renderLeftIcon()}
           {this.renderPrefix()}
diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx
index 3b93ddc50c0..5704acb5cf3 100644
--- a/packages/react-ui/components/Link/Link.tsx
+++ b/packages/react-ui/components/Link/Link.tsx
@@ -61,9 +61,9 @@ export interface LinkState {
   focusedByTab: boolean;
 }
 
-export const linkDataTid = {
+export const LinkDataTids = {
   root: 'Link__root',
-};
+} as const;
 
 /**
  * Элемент ссылки из HTML.
@@ -153,7 +153,7 @@ export class Link extends React.Component<LinkProps, LinkState> {
     };
 
     return (
-      <a data-tid={linkDataTid.root} {...rest} {...linkProps}>
+      <a data-tid={LinkDataTids.root} {...rest} {...linkProps}>
         {iconElement}
         {this.props.children}
         {arrow}
diff --git a/packages/react-ui/components/Loader/Loader.tsx b/packages/react-ui/components/Loader/Loader.tsx
index 2a547a518fe..9f6f8d31927 100644
--- a/packages/react-ui/components/Loader/Loader.tsx
+++ b/packages/react-ui/components/Loader/Loader.tsx
@@ -51,10 +51,10 @@ export interface LoaderState {
   spinnerStyle?: object;
 }
 
-export const loaderDataTid = {
+export const LoaderDataTids = {
   vail: 'Loader__Veil',
   spinner: 'Loader__Spinner',
-};
+} as const;
 
 /**
  * DRAFT - лоадер-контейнер
@@ -222,7 +222,7 @@ export class Loader extends React.Component<LoaderProps, LoaderState> {
 
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-        <div className={styles.loader()} data-tid={isLoaderActive ? loaderDataTid.vail : ''}>
+        <div className={styles.loader()} data-tid={isLoaderActive ? LoaderDataTids.vail : ''}>
           <ZIndex
             priority={'Loader'}
             applyZIndex={isLoaderActive}
@@ -259,7 +259,7 @@ export class Loader extends React.Component<LoaderProps, LoaderState> {
   private renderSpinner(type?: 'mini' | 'normal' | 'big', caption?: React.ReactNode, component?: React.ReactNode) {
     return (
       <span
-        data-tid={loaderDataTid.spinner}
+        data-tid={LoaderDataTids.spinner}
         className={cx(styles.spinnerContainer(), { [styles.spinnerContainerSticky()]: this.state.isStickySpinner })}
         style={this.state.spinnerStyle}
       >
diff --git a/packages/react-ui/components/MenuHeader/MenuHeader.tsx b/packages/react-ui/components/MenuHeader/MenuHeader.tsx
index 9533a5b05af..35a35ddb30b 100644
--- a/packages/react-ui/components/MenuHeader/MenuHeader.tsx
+++ b/packages/react-ui/components/MenuHeader/MenuHeader.tsx
@@ -11,9 +11,9 @@ export interface MenuHeaderProps extends CommonProps {
   children: ReactNode;
 }
 
-export const menuHeaderDataTid = {
+export const MenuHeaderDataTids = {
   root: 'MenuHeader__root',
-};
+} as const;
 
 /**
  * `Заголовок меню` используется для того, чтобы разделить `элементы меню` на категории в рамках одного меню.
@@ -28,7 +28,7 @@ function MenuHeader({ _enableIconPadding = false, children, ...rest }: MenuHeade
   return (
     <CommonWrapper {...rest}>
       <div
-        data-tid={menuHeaderDataTid.root}
+        data-tid={MenuHeaderDataTids.root}
         className={cx({
           [styles.root(theme)]: true,
           [styles.withLeftPadding(theme)]: _enableIconPadding,
diff --git a/packages/react-ui/components/MenuItem/MenuItem.tsx b/packages/react-ui/components/MenuItem/MenuItem.tsx
index fdbad2279b2..e1d7bef30c7 100644
--- a/packages/react-ui/components/MenuItem/MenuItem.tsx
+++ b/packages/react-ui/components/MenuItem/MenuItem.tsx
@@ -76,10 +76,10 @@ export interface MenuItemProps extends CommonProps {
   isMobile?: boolean;
 }
 
-export const menuItemDataTid = {
+export const MenuItemDataTids = {
   root: 'MenuItem__root',
   comment: 'MenuItem__comment',
-};
+} as const;
 
 /**
  *
@@ -173,7 +173,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
 
     return (
       <Component
-        data-tid={menuItemDataTid.root}
+        data-tid={MenuItemDataTids.root}
         {...rest}
         state={state}
         onMouseOver={this.handleMouseEnterFix}
@@ -185,7 +185,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
         {content}
         {this.props.comment && (
           <div
-            data-tid={menuItemDataTid.comment}
+            data-tid={MenuItemDataTids.comment}
             className={cx({
               [styles.comment(this.theme)]: true,
               [styles.commentHover(this.theme)]: hover,
diff --git a/packages/react-ui/components/MenuSeparator/MenuSeparator.tsx b/packages/react-ui/components/MenuSeparator/MenuSeparator.tsx
index c8649370c54..983814081d0 100644
--- a/packages/react-ui/components/MenuSeparator/MenuSeparator.tsx
+++ b/packages/react-ui/components/MenuSeparator/MenuSeparator.tsx
@@ -7,9 +7,9 @@ import { styles } from './MenuSeparator.styles';
 
 export type MenuSeparatorProps = CommonProps;
 
-export const menuSeparatorDataTid = {
+export const MenuSeparatorDataTids = {
   root: 'MenuSeparator__root',
-};
+} as const;
 /**
  * Добавляет разделительную линию между элементами меню.
  *
@@ -20,7 +20,7 @@ function MenuSeparator(props: MenuSeparatorProps) {
 
   return (
     <CommonWrapper {...props}>
-      <div data-tid={menuSeparatorDataTid.root} className={styles.root(theme)} />
+      <div data-tid={MenuSeparatorDataTids.root} className={styles.root(theme)} />
     </CommonWrapper>
   );
 }
diff --git a/packages/react-ui/components/Modal/Modal.tsx b/packages/react-ui/components/Modal/Modal.tsx
index cc0ac41f677..4f092a1263a 100644
--- a/packages/react-ui/components/Modal/Modal.tsx
+++ b/packages/react-ui/components/Modal/Modal.tsx
@@ -70,11 +70,11 @@ export interface ModalState {
   hasPanel: boolean;
 }
 
-export const modalDataTid = {
+export const ModalDataTids = {
   container: 'modal-container',
   content: 'modal-content',
   close: 'modal-close',
-};
+} as const;
 
 /**
  * Модальное окно
@@ -205,7 +205,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
               onMouseDown={this.handleContainerMouseDown}
               onMouseUp={this.handleContainerMouseUp}
               onClick={this.handleContainerClick}
-              data-tid={modalDataTid.container}
+              data-tid={ModalDataTids.container}
             >
               <ResponsiveLayout>
                 {({ isMobile }) => {
@@ -217,7 +217,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
                         [styles.alignTop()]: Boolean(this.props.alignTop),
                       })}
                       style={isMobile ? undefined : containerStyle}
-                      data-tid={modalDataTid.content}
+                      data-tid={ModalDataTids.content}
                     >
                       <div
                         className={cx({ [styles.window(this.theme)]: true, [styles.mobileWindow()]: isMobile })}
diff --git a/packages/react-ui/components/Modal/ModalClose.tsx b/packages/react-ui/components/Modal/ModalClose.tsx
index a6361f2d24d..7ed27ce4576 100644
--- a/packages/react-ui/components/Modal/ModalClose.tsx
+++ b/packages/react-ui/components/Modal/ModalClose.tsx
@@ -9,7 +9,7 @@ import { CommonWrapper } from '../../internal/CommonWrapper';
 
 import { CloseProps } from './ModalContext';
 import { styles } from './Modal.styles';
-import { modalDataTid } from './Modal';
+import { ModalDataTids } from './Modal';
 
 export function ModalClose({ disableClose, requestClose, ...otherProps }: CloseProps) {
   const theme = useContext(ThemeContext);
@@ -43,7 +43,7 @@ export function ModalClose({ disableClose, requestClose, ...otherProps }: CloseP
             onClick={requestClose}
             onFocus={handleFocus}
             onBlur={handleBlur}
-            data-tid={modalDataTid.close}
+            data-tid={ModalDataTids.close}
             tabIndex={disableClose ? -1 : 0}
           >
             <CrossIcon />
diff --git a/packages/react-ui/components/Modal/ModalFooter.tsx b/packages/react-ui/components/Modal/ModalFooter.tsx
index 67461049738..3a7231779f6 100644
--- a/packages/react-ui/components/Modal/ModalFooter.tsx
+++ b/packages/react-ui/components/Modal/ModalFooter.tsx
@@ -20,9 +20,9 @@ export interface ModalFooterProps extends CommonProps {
   children?: ReactNode;
 }
 
-export const modalFooterDataTid = {
+export const ModalFooterDataTids = {
   root: 'ModalFooter__root',
-};
+} as const;
 
 /**
  * Футер модального окна.
@@ -49,7 +49,7 @@ function ModalFooter(props: ModalFooterProps) {
   const renderContent = (fixed = false) => {
     return (
       <div
-        data-tid={modalFooterDataTid.root}
+        data-tid={ModalFooterDataTids.root}
         className={cx({
           [styles.footer(theme)]: true,
           [styles.fixedFooter(theme)]: fixed,
diff --git a/packages/react-ui/components/Modal/ModalHeader.tsx b/packages/react-ui/components/Modal/ModalHeader.tsx
index b5a5510152a..970fcee4d85 100644
--- a/packages/react-ui/components/Modal/ModalHeader.tsx
+++ b/packages/react-ui/components/Modal/ModalHeader.tsx
@@ -16,9 +16,9 @@ export interface ModalHeaderProps extends CommonProps {
   children?: ReactNode;
 }
 
-export const modalHeaderDataTid = {
+export const ModalHeaderDataTids = {
   root: 'ModalHeader__root',
-};
+} as const;
 
 /**
  * Шапка модального окна
@@ -41,7 +41,7 @@ function ModalHeader(props: ModalHeaderProps) {
   const renderContent = (fixed = false) => {
     return (
       <div
-        data-tid={modalHeaderDataTid.root}
+        data-tid={ModalHeaderDataTids.root}
         className={cx({
           [styles.header(theme)]: true,
           [styles.mobileHeader(theme)]: layout.isMobile,
diff --git a/packages/react-ui/components/Paging/Paging.tsx b/packages/react-ui/components/Paging/Paging.tsx
index 4c7f815ef34..bd055ffe590 100644
--- a/packages/react-ui/components/Paging/Paging.tsx
+++ b/packages/react-ui/components/Paging/Paging.tsx
@@ -74,13 +74,13 @@ export interface PagingState {
 
 export type ItemType = number | '.' | 'forward';
 
-export const pagingDataTid = {
+export const PagingDataTids = {
   root: 'Paging__root',
   dots: 'Paging__dots',
   forwardLink: 'Paging__forwardLink',
   pageLinkWrapper: 'Paging__pageLinkWrapper',
   pageLink: 'Paging__pageLink',
-};
+} as const;
 
 @rootNode
 @locale('Paging', PagingLocaleHelper)
@@ -91,7 +91,7 @@ export class Paging extends React.PureComponent<PagingProps, PagingState> {
     component: PagingDefaultComponent,
     shouldBeVisibleWithLessThanTwoPages: true,
     useGlobalListener: false,
-    ['data-tid']: pagingDataTid.root,
+    ['data-tid']: PagingDataTids.root,
   };
 
   public static propTypes = {};
@@ -193,7 +193,7 @@ export class Paging extends React.PureComponent<PagingProps, PagingState> {
 
   private renderDots = (key: string) => {
     return (
-      <span data-tid={pagingDataTid.dots} key={key} className={styles.dots(this.theme)}>
+      <span data-tid={PagingDataTids.dots} key={key} className={styles.dots(this.theme)}>
         {'...'}
       </span>
     );
@@ -211,7 +211,7 @@ export class Paging extends React.PureComponent<PagingProps, PagingState> {
     return (
       <Component
         key={'forward'}
-        data-tid={pagingDataTid.forwardLink}
+        data-tid={PagingDataTids.forwardLink}
         active={false}
         className={classes}
         onClick={disabled ? emptyHandler : this.goForward}
@@ -237,13 +237,13 @@ export class Paging extends React.PureComponent<PagingProps, PagingState> {
 
     return (
       <span
-        data-tid={pagingDataTid.pageLinkWrapper}
+        data-tid={PagingDataTids.pageLinkWrapper}
         key={pageNumber}
         className={styles.pageLinkWrapper()}
         onMouseDown={this.handleMouseDownPageLink}
       >
         <Component
-          data-tid={pagingDataTid.pageLink}
+          data-tid={PagingDataTids.pageLink}
           active={active}
           className={classes}
           onClick={handleClick}
diff --git a/packages/react-ui/components/PasswordInput/PasswordInput.tsx b/packages/react-ui/components/PasswordInput/PasswordInput.tsx
index e087fd792a0..f7e4c185321 100644
--- a/packages/react-ui/components/PasswordInput/PasswordInput.tsx
+++ b/packages/react-ui/components/PasswordInput/PasswordInput.tsx
@@ -24,11 +24,11 @@ export interface PasswordInputState {
   capsLockEnabled?: boolean | null;
 }
 
-export const passwordInputDataTid = {
+export const PasswordInputDataTids = {
   root: 'PasswordInput',
   capsLockDetector: 'PasswordInputCapsLockDetector',
   eyeIcon: 'PasswordInputEyeIcon',
-};
+} as const;
 
 /**
  * Компонент для ввода пароля
@@ -187,10 +187,10 @@ export class PasswordInput extends React.PureComponent<PasswordInputProps, Passw
     return (
       <span className={styles.iconWrapper()}>
         {capsLockEnabled && (
-          <span className={styles.capsLockDetector()} data-tid={passwordInputDataTid.capsLockDetector} />
+          <span className={styles.capsLockDetector()} data-tid={PasswordInputDataTids.capsLockDetector} />
         )}
         <span
-          data-tid={passwordInputDataTid.eyeIcon}
+          data-tid={PasswordInputDataTids.eyeIcon}
           className={cx(styles.toggleVisibility(this.theme), this.getEyeWrapperClassname())}
           onClick={this.handleToggleVisibility}
         >
@@ -215,7 +215,7 @@ export class PasswordInput extends React.PureComponent<PasswordInputProps, Passw
     };
 
     return (
-      <div data-tid={passwordInputDataTid.root} className={styles.root()}>
+      <div data-tid={PasswordInputDataTids.root} className={styles.root()}>
         <Input ref={this.refInput} type={this.state.visible ? 'text' : 'password'} {...inputProps} />
       </div>
     );
diff --git a/packages/react-ui/components/Radio/Radio.tsx b/packages/react-ui/components/Radio/Radio.tsx
index 2c4d7a3c3ae..ea119907bce 100644
--- a/packages/react-ui/components/Radio/Radio.tsx
+++ b/packages/react-ui/components/Radio/Radio.tsx
@@ -57,9 +57,9 @@ export interface RadioState {
   focusedByKeyboard: boolean;
 }
 
-export const radioDataTid = {
+export const RadioDataTids = {
   root: 'Radio__root',
-};
+} as const;
 
 /**
  * Радио-кнопки используются, когда может быть выбран только один вариант из нескольких.
@@ -184,7 +184,7 @@ export class Radio<T> extends React.Component<RadioProps<T>, RadioState> {
     }
 
     return (
-      <label data-tid={radioDataTid.root} {...labelProps}>
+      <label data-tid={RadioDataTids.root} {...labelProps}>
         <input {...inputProps} />
         <span {...radioProps}>
           <span className={styles.placeholder()} />
diff --git a/packages/react-ui/components/RadioGroup/RadioGroup.tsx b/packages/react-ui/components/RadioGroup/RadioGroup.tsx
index 94d8fc36aee..0196cad072e 100644
--- a/packages/react-ui/components/RadioGroup/RadioGroup.tsx
+++ b/packages/react-ui/components/RadioGroup/RadioGroup.tsx
@@ -81,9 +81,9 @@ export interface RadioGroupState<T> {
   activeItem?: T;
 }
 
-export const radioGroupDataTid = {
+export const RadioGroupDataTids = {
   root: 'RadioGroup__root',
-};
+} as const;
 
 /**
  *
@@ -169,7 +169,7 @@ export class RadioGroup<T> extends React.Component<RadioGroupProps<T>, RadioGrou
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <FocusTrap onBlur={onBlur}>
-          <span data-tid={radioGroupDataTid.root} ref={this.ref} style={style} className={styles.root()} {...handlers}>
+          <span data-tid={RadioGroupDataTids.root} ref={this.ref} style={style} className={styles.root()} {...handlers}>
             <RadioGroupContext.Provider value={this.getRadioGroupContextValue()}>
               {this.renderChildren()}
             </RadioGroupContext.Provider>
diff --git a/packages/react-ui/components/ScrollContainer/ScrollContainer.tsx b/packages/react-ui/components/ScrollContainer/ScrollContainer.tsx
index 4cf7dc93f63..254186b63ec 100644
--- a/packages/react-ui/components/ScrollContainer/ScrollContainer.tsx
+++ b/packages/react-ui/components/ScrollContainer/ScrollContainer.tsx
@@ -50,10 +50,10 @@ export interface ScrollContainerProps extends CommonProps {
   disabled?: boolean;
 }
 
-export const scrollContainerDataTid = {
+export const ScrollContainerDataTids = {
   root: 'ScrollContainer__root',
   inner: 'ScrollContainer__inner',
-};
+} as const;
 
 @rootNode
 export class ScrollContainer extends React.Component<ScrollContainerProps> {
@@ -114,7 +114,7 @@ export class ScrollContainer extends React.Component<ScrollContainerProps> {
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <div
-          data-tid={scrollContainerDataTid.root}
+          data-tid={ScrollContainerDataTids.root}
           className={styles.root()}
           onMouseMove={this.handleMouseMove}
           onMouseLeave={this.handleMouseLeave}
@@ -125,7 +125,7 @@ export class ScrollContainer extends React.Component<ScrollContainerProps> {
             style={innerStyle}
             ref={this.refInner}
             className={cx(styles.inner(), globalClasses.inner, isIE11 && styles.innerIE11())}
-            data-tid={scrollContainerDataTid.inner}
+            data-tid={ScrollContainerDataTids.inner}
             onScroll={this.handleNativeScroll}
           >
             {props.children}
diff --git a/packages/react-ui/components/Select/Select.tsx b/packages/react-ui/components/Select/Select.tsx
index 3713995516c..a8c93a4a2dc 100644
--- a/packages/react-ui/components/Select/Select.tsx
+++ b/packages/react-ui/components/Select/Select.tsx
@@ -58,9 +58,9 @@ const PASS_BUTTON_PROPS = {
   onMouseOver: true,
 };
 
-export const selectDataTid = {
+export const SelectDataTids = {
   root: 'Select__root',
-};
+} as const;
 
 type SelectItem<TValue, TItem> =
   | [TValue, TItem, React.ReactNode?]
@@ -312,7 +312,7 @@ export class Select<TValue = {}, TItem = {}> extends React.Component<SelectProps
 
     const root = (
       <span
-        data-tid={selectDataTid.root}
+        data-tid={SelectDataTids.root}
         className={cx({ [styles.root()]: true, [styles.rootMobile(this.theme)]: isMobile })}
         style={style}
       >
diff --git a/packages/react-ui/components/SidePage/SidePage.tsx b/packages/react-ui/components/SidePage/SidePage.tsx
index 8e1650c4c30..b3148fe559e 100644
--- a/packages/react-ui/components/SidePage/SidePage.tsx
+++ b/packages/react-ui/components/SidePage/SidePage.tsx
@@ -84,10 +84,10 @@ export interface SidePageState {
   hasPanel: boolean;
 }
 
-export const sidePageDataTid = {
+export const SidePageDataTids = {
   root: 'SidePage__root',
   container: 'SidePage__container',
-};
+} as const;
 
 const TRANSITION_TIMEOUT = 200;
 
@@ -201,7 +201,7 @@ export class SidePage extends React.Component<SidePageProps, SidePageState> {
     return (
       <ZIndex
         priority={'Sidepage'}
-        data-tid={sidePageDataTid.root}
+        data-tid={SidePageDataTids.root}
         className={cx({
           [styles.root()]: true,
           [styles.mobileRoot()]: isMobile,
@@ -222,7 +222,7 @@ export class SidePage extends React.Component<SidePageProps, SidePageState> {
         <FocusLock disabled={disableFocusLock || !blockBackground} autoFocus={false} className={styles.focusLock()}>
           <RenderLayer onClickOutside={this.handleClickOutside} active>
             <div
-              data-tid={sidePageDataTid.container}
+              data-tid={SidePageDataTids.container}
               className={cx(styles.wrapper(this.theme), {
                 [styles.wrapperLeft()]: fromLeft,
                 [styles.wrapperMarginLeft()]: this.state.hasMargin && fromLeft,
diff --git a/packages/react-ui/components/SidePage/SidePageBody.tsx b/packages/react-ui/components/SidePage/SidePageBody.tsx
index eb5797090a3..efeee0430a5 100644
--- a/packages/react-ui/components/SidePage/SidePageBody.tsx
+++ b/packages/react-ui/components/SidePage/SidePageBody.tsx
@@ -13,9 +13,9 @@ export interface SidePageBodyProps extends CommonProps {
   children?: React.ReactNode;
 }
 
-export const sidePageBodyDataTid = {
+export const SidePageBodyDataTids = {
   root: 'SidePageBody__root',
-};
+} as const;
 /**
  * Тело для сайдпейджа
  *
@@ -42,7 +42,7 @@ export class SidePageBody extends React.Component<SidePageBodyProps> {
           return (
             <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
               <div
-                data-tid={sidePageBodyDataTid.root}
+                data-tid={SidePageBodyDataTids.root}
                 className={cx(styles.body(theme), { [styles.mobileBody()]: this.isMobileLayout })}
               >
                 {this.props.children}
diff --git a/packages/react-ui/components/SidePage/SidePageContainer.tsx b/packages/react-ui/components/SidePage/SidePageContainer.tsx
index b062629aa0e..e91f0ffc522 100644
--- a/packages/react-ui/components/SidePage/SidePageContainer.tsx
+++ b/packages/react-ui/components/SidePage/SidePageContainer.tsx
@@ -12,9 +12,9 @@ import { SidePageContext } from './SidePageContext';
 
 export type SidePageContainerProps = CommonProps;
 
-export const sidePageContainerDataTid = {
+export const SidePageContainerDataTids = {
   root: 'SidePageContainer__root',
-};
+} as const;
 
 /**
  * Контейнер с отступами
@@ -47,7 +47,7 @@ export class SidePageContainer extends React.Component<SidePageContainerProps> {
         {({ hasHeader, hasFooter, hasPanel }) => (
           <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
             <div
-              data-tid={sidePageContainerDataTid.root}
+              data-tid={SidePageContainerDataTids.root}
               className={cx({
                 [styles.container(this.theme)]: true,
                 [styles.containerWithoutHeader(this.theme)]: !hasHeader,
diff --git a/packages/react-ui/components/SidePage/SidePageFooter.tsx b/packages/react-ui/components/SidePage/SidePageFooter.tsx
index 24f07fa96d1..fb3265d79a3 100644
--- a/packages/react-ui/components/SidePage/SidePageFooter.tsx
+++ b/packages/react-ui/components/SidePage/SidePageFooter.tsx
@@ -21,9 +21,9 @@ export interface SidePageFooterProps extends CommonProps {
   sticky?: boolean;
 }
 
-export const sidePageFooterDataTid = {
+export const SidePageFooterDataTids = {
   root: 'SidePageFooter__root',
-};
+} as const;
 
 /**
  * Футер сайдпейджа.
@@ -100,7 +100,7 @@ export class SidePageFooter extends React.Component<SidePageFooterProps> {
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <div
-          data-tid={sidePageFooterDataTid.root}
+          data-tid={SidePageFooterDataTids.root}
           style={{ height: this.getContentHeight() }}
           className={styles.footerWrapper()}
         >
diff --git a/packages/react-ui/components/SidePage/SidePageHeader.tsx b/packages/react-ui/components/SidePage/SidePageHeader.tsx
index b5e698279a2..25725ce6e84 100644
--- a/packages/react-ui/components/SidePage/SidePageHeader.tsx
+++ b/packages/react-ui/components/SidePage/SidePageHeader.tsx
@@ -25,10 +25,10 @@ export interface SidePageHeaderState {
   focusedByTab: boolean;
 }
 
-export const sidePageHeaderDataTid = {
+export const SidePageHeaderDataTids = {
   root: 'SidePageHeader__root',
   close: 'SidePage__close',
-};
+} as const;
 
 /**
  * Шапка сайдпейджа
@@ -120,7 +120,7 @@ export class SidePageHeader extends React.Component<SidePageHeaderProps, SidePag
 
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-        <div data-tid={sidePageHeaderDataTid.root} ref={this.wrapperRef} className={styles.headerWrapper()}>
+        <div data-tid={SidePageHeaderDataTids.root} ref={this.wrapperRef} className={styles.headerWrapper()}>
           {isStickyDesktop || isStickyMobile ? (
             <Sticky ref={this.stickyRef} side="top">
               {this.renderHeader}
@@ -184,7 +184,7 @@ export class SidePageHeader extends React.Component<SidePageHeaderProps, SidePag
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
           onClick={requestClose}
-          data-tid={sidePageHeaderDataTid.close}
+          data-tid={SidePageHeaderDataTids.close}
           tabIndex={0}
         >
           <CrossIcon />
diff --git a/packages/react-ui/components/Spinner/Spinner.tsx b/packages/react-ui/components/Spinner/Spinner.tsx
index 4ca4707e651..0190cd9bc2a 100644
--- a/packages/react-ui/components/Spinner/Spinner.tsx
+++ b/packages/react-ui/components/Spinner/Spinner.tsx
@@ -39,9 +39,9 @@ export interface SpinnerProps extends CommonProps {
   color?: React.CSSProperties['color'];
 }
 
-export const spinnerDataTid = {
+export const SpinnerDataTids = {
   root: 'Spinner__root',
-};
+} as const;
 
 /**
  * DRAFT - инлайн-лоадер
@@ -101,7 +101,7 @@ export class Spinner extends React.Component<SpinnerProps> {
 
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-        <div data-tid={spinnerDataTid.root} className={styles.spinner()}>
+        <div data-tid={SpinnerDataTids.root} className={styles.spinner()}>
           <span className={styles.inner()}>{this.renderSpinner(type, dimmed, inline)}</span>
           {caption && this.renderCaption(type, caption)}
         </div>
diff --git a/packages/react-ui/components/Sticky/Sticky.tsx b/packages/react-ui/components/Sticky/Sticky.tsx
index ddffff7edd4..6f19a3d55dc 100644
--- a/packages/react-ui/components/Sticky/Sticky.tsx
+++ b/packages/react-ui/components/Sticky/Sticky.tsx
@@ -36,9 +36,9 @@ export interface StickyState {
   relativeTop: number;
 }
 
-export const stickyDataTid = {
+export const StickyDataTids = {
   root: 'Spinner__root',
-};
+} as const;
 
 @rootNode
 export class Sticky extends React.Component<StickyProps, StickyState> {
@@ -121,7 +121,7 @@ export class Sticky extends React.Component<StickyProps, StickyState> {
 
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-        <div data-tid={stickyDataTid.root} ref={this.refWrapper} className={styles.wrapper()}>
+        <div data-tid={StickyDataTids.root} ref={this.refWrapper} className={styles.wrapper()}>
           <ZIndex
             priority="Sticky"
             applyZIndex={fixed}
diff --git a/packages/react-ui/components/Switcher/Switcher.tsx b/packages/react-ui/components/Switcher/Switcher.tsx
index 32a2a43c61f..40c322d58d7 100644
--- a/packages/react-ui/components/Switcher/Switcher.tsx
+++ b/packages/react-ui/components/Switcher/Switcher.tsx
@@ -17,9 +17,9 @@ import { getSwitcherTheme } from './switcherTheme';
 export type SwitcherSize = ButtonSize;
 type SwitcherItems = string | SwitcherItem;
 
-export const switcherDataTid = {
+export const SwitcherDataTids = {
   root: 'Switcher__root',
-};
+} as const;
 
 export interface SwitcherProps extends CommonProps {
   /**
@@ -106,7 +106,7 @@ export class Switcher extends React.Component<SwitcherProps, SwitcherState> {
 
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-        <div data-tid={switcherDataTid.root} className={styles.root()}>
+        <div data-tid={SwitcherDataTids.root} className={styles.root()}>
           {this.props.caption ? <div className={captionClassName}>{this.props.caption}</div> : null}
           <div className={styles.wrap()}>
             <input {...inputProps} />
diff --git a/packages/react-ui/components/Tabs/Indicator.tsx b/packages/react-ui/components/Tabs/Indicator.tsx
index 44a93461edd..f21ae920665 100644
--- a/packages/react-ui/components/Tabs/Indicator.tsx
+++ b/packages/react-ui/components/Tabs/Indicator.tsx
@@ -12,7 +12,7 @@ import { getDOMRect } from '../../lib/dom/getDOMRect';
 import { styles } from './Indicator.styles';
 import { TabsContext, TabsContextType } from './TabsContext';
 import { TabIndicators } from './Tab';
-import { tabsDataTid } from './Tabs';
+import { TabsDataTids } from './Tabs';
 
 export interface IndicatorProps {
   className?: string;
@@ -88,7 +88,7 @@ export class Indicator extends React.Component<IndicatorProps, IndicatorState> {
     };
     return (
       <div
-        data-tid={tabsDataTid.indicatorRoot}
+        data-tid={TabsDataTids.indicatorRoot}
         className={cx(
           styles.root(this.theme),
           indicators.primary && styles.primary(this.theme),
diff --git a/packages/react-ui/components/Tabs/Tab.tsx b/packages/react-ui/components/Tabs/Tab.tsx
index b209419906c..61ee0e47980 100644
--- a/packages/react-ui/components/Tabs/Tab.tsx
+++ b/packages/react-ui/components/Tabs/Tab.tsx
@@ -24,9 +24,9 @@ export interface TabIndicators {
   disabled: boolean;
 }
 
-export const tabDataTid = {
+export const TabDataTids = {
   root: 'Tab__root',
-};
+} as const;
 
 export interface TabProps<T extends string = string> extends CommonProps {
   /**
@@ -210,7 +210,7 @@ export class Tab<T extends string = string> extends React.Component<TabProps<T>,
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <Component
-          data-tid={tabDataTid.root}
+          data-tid={TabDataTids.root}
           className={cx({
             [styles.root(this.theme)]: true,
             [styles.vertical(this.theme)]: !!isVertical,
diff --git a/packages/react-ui/components/Tabs/Tabs.tsx b/packages/react-ui/components/Tabs/Tabs.tsx
index 0cde48d83c7..f370b1d6632 100644
--- a/packages/react-ui/components/Tabs/Tabs.tsx
+++ b/packages/react-ui/components/Tabs/Tabs.tsx
@@ -53,10 +53,10 @@ export interface TabsProps<T extends ValueBaseType = string> extends CommonProps
   width?: number | string;
 }
 
-export const tabsDataTid = {
+export const TabsDataTids = {
   root: 'Tabs__root',
   indicatorRoot: 'Indicator__root',
-};
+} as const;
 
 /**
  * Tabs wrapper
@@ -106,7 +106,7 @@ export class Tabs<T extends string = string> extends React.Component<TabsProps<T
           return (
             <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
               <div
-                data-tid={tabsDataTid.root}
+                data-tid={TabsDataTids.root}
                 className={cx(styles.root(this.theme), vertical && styles.vertical())}
                 style={{ width }}
               >
diff --git a/packages/react-ui/components/Textarea/Textarea.tsx b/packages/react-ui/components/Textarea/Textarea.tsx
index 20a224772fe..469e0d76e41 100644
--- a/packages/react-ui/components/Textarea/Textarea.tsx
+++ b/packages/react-ui/components/Textarea/Textarea.tsx
@@ -111,10 +111,10 @@ export interface TextareaState {
   isCounterVisible: boolean;
 }
 
-export const textareaDataTid = {
+export const TextareaDataTids = {
   root: 'Textarea__root',
   counter: 'TextareaCounter__root',
-};
+} as const;
 
 /**
  * Компонент для ввода многострочного текста.
@@ -396,7 +396,7 @@ export class Textarea extends React.Component<TextareaProps, TextareaState> {
         onClickOutside={this.handleCloseCounterHelp}
         active={this.state.isCounterVisible}
       >
-        <label data-tid={textareaDataTid.root} {...rootProps} className={styles.root(this.theme)}>
+        <label data-tid={TextareaDataTids.root} {...rootProps} className={styles.root(this.theme)}>
           {placeholderPolyfill}
           <ResizeDetector onResize={this.reflowCounter}>
             <textarea
diff --git a/packages/react-ui/components/Textarea/TextareaCounter.tsx b/packages/react-ui/components/Textarea/TextareaCounter.tsx
index 7afbb68de46..7f515cbe8b9 100644
--- a/packages/react-ui/components/Textarea/TextareaCounter.tsx
+++ b/packages/react-ui/components/Textarea/TextareaCounter.tsx
@@ -7,7 +7,7 @@ import { isFunction } from '../../lib/utils';
 import { Tooltip } from '../Tooltip';
 import { cx } from '../../lib/theming/Emotion';
 
-import { textareaDataTid, TextareaProps } from './Textarea';
+import { TextareaDataTids, TextareaProps } from './Textarea';
 import { styles } from './Textarea.styles';
 
 export type TextareaCounterProps = {
@@ -49,7 +49,7 @@ export const TextareaCounter = React.forwardRef<TextareaCounterRef, TextareaCoun
   );
 
   return (
-    <div data-tid={textareaDataTid.counter} className={styles.counterContainer(theme)} style={{ width, height }}>
+    <div data-tid={TextareaDataTids.counter} className={styles.counterContainer(theme)} style={{ width, height }}>
       <span
         className={cx(styles.counter(theme), {
           [styles.counterError(theme)]: counterValue < 0,
diff --git a/packages/react-ui/components/Toast/Toast.tsx b/packages/react-ui/components/Toast/Toast.tsx
index 7b26705cf84..ddb9cd99ef6 100644
--- a/packages/react-ui/components/Toast/Toast.tsx
+++ b/packages/react-ui/components/Toast/Toast.tsx
@@ -27,12 +27,12 @@ export interface ToastProps extends CommonProps {
   onClose?: (notification: string, action?: Action) => void;
 }
 
-export const toastDataTid = {
+export const ToastDataTids = {
   toastStatic: 'StaticToast',
   toastView: 'ToastView__root',
   action: 'ToastView__action',
   close: 'ToastView__close',
-};
+} as const;
 
 /**
  * Показывает уведомления.
diff --git a/packages/react-ui/components/Toast/ToastStatic.tsx b/packages/react-ui/components/Toast/ToastStatic.tsx
index 8892f9b853e..3fadc51f628 100644
--- a/packages/react-ui/components/Toast/ToastStatic.tsx
+++ b/packages/react-ui/components/Toast/ToastStatic.tsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 
 import { Nullable } from '../../typings/utility-types';
 
-import { Toast, Action, toastDataTid } from './Toast';
+import { Toast, Action, ToastDataTids } from './Toast';
 
 export class ToastStatic {
   public static push = (notification: string, action?: Action) => {
@@ -16,7 +16,7 @@ export class ToastStatic {
       body.appendChild(ToastStatic.node);
 
       ReactDOM.render(
-        <Toast data-tid={toastDataTid.toastStatic} ref={(el) => (ToastStatic.instance = el)} />,
+        <Toast data-tid={ToastDataTids.toastStatic} ref={(el) => (ToastStatic.instance = el)} />,
         ToastStatic.node,
         () => ToastStatic._push(notification, action),
       );
diff --git a/packages/react-ui/components/Toast/ToastView.tsx b/packages/react-ui/components/Toast/ToastView.tsx
index b891c40e89d..ab4ced2e66e 100644
--- a/packages/react-ui/components/Toast/ToastView.tsx
+++ b/packages/react-ui/components/Toast/ToastView.tsx
@@ -9,7 +9,7 @@ import { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../intern
 import { rootNode, TSetRootNode } from '../../lib/rootNode';
 
 import { styles } from './ToastView.styles';
-import { toastDataTid } from './Toast';
+import { ToastDataTids } from './Toast';
 
 export interface ToastViewProps extends CommonProps {
   /**
@@ -63,14 +63,14 @@ export class ToastView extends React.Component<ToastViewProps> {
     const { action, onClose, ...rest } = props;
 
     const link = action ? (
-      <span data-tid={toastDataTid.action} className={styles.link(this.theme)} onClick={action.handler}>
+      <span data-tid={ToastDataTids.action} className={styles.link(this.theme)} onClick={action.handler}>
         {action.label}
       </span>
     ) : null;
 
     const close = action ? (
       <span className={styles.closeWrapper(this.theme)}>
-        <span data-tid={toastDataTid.close} className={styles.close(this.theme)} onClick={onClose}>
+        <span data-tid={ToastDataTids.close} className={styles.close(this.theme)} onClick={onClose}>
           <CrossIcon />
         </span>
       </span>
@@ -78,7 +78,7 @@ export class ToastView extends React.Component<ToastViewProps> {
 
     return (
       <ZIndex priority="Toast" className={styles.wrapper(this.theme)}>
-        <div data-tid={toastDataTid.toastView} {...rest} className={styles.root(this.theme)} ref={this.setRootNode}>
+        <div data-tid={ToastDataTids.toastView} {...rest} className={styles.root(this.theme)} ref={this.setRootNode}>
           <span>{this.props.children}</span>
           {link}
           {close}
diff --git a/packages/react-ui/components/Toggle/Toggle.tsx b/packages/react-ui/components/Toggle/Toggle.tsx
index 440de8ba507..d8759e8d995 100644
--- a/packages/react-ui/components/Toggle/Toggle.tsx
+++ b/packages/react-ui/components/Toggle/Toggle.tsx
@@ -82,9 +82,9 @@ export interface ToggleState {
   focusByTab?: boolean;
 }
 
-export const toggleDataTid = {
+export const ToggleDataTids = {
   root: 'Toggle__root',
-};
+} as const;
 
 /**
  * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
@@ -185,7 +185,7 @@ export class Toggle extends React.Component<ToggleProps, ToggleState> {
 
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-        <label data-tid={toggleDataTid.root} className={labelClassNames}>
+        <label data-tid={ToggleDataTids.root} className={labelClassNames}>
           <div
             className={cx(styles.button(this.theme), {
               [styles.buttonRight()]: captionPosition === 'left',
diff --git a/packages/react-ui/components/Token/Token.tsx b/packages/react-ui/components/Token/Token.tsx
index 5612f20757a..3abd7d9ceaf 100644
--- a/packages/react-ui/components/Token/Token.tsx
+++ b/packages/react-ui/components/Token/Token.tsx
@@ -39,9 +39,9 @@ export interface TokenProps extends CommonProps {
   onBlur?: React.FocusEventHandler<HTMLDivElement>;
 }
 
-export const tokenDataTid = {
+export const TokenDataTids = {
   root: 'Token__root',
-};
+} as const;
 
 @rootNode
 export class Token extends React.Component<TokenProps> {
@@ -102,7 +102,7 @@ export class Token extends React.Component<TokenProps> {
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <div
-          data-tid={tokenDataTid.root}
+          data-tid={TokenDataTids.root}
           className={tokenClassNames}
           onClick={onClick}
           onDoubleClick={onDoubleClick}
diff --git a/packages/react-ui/components/TokenInput/TokenInput.tsx b/packages/react-ui/components/TokenInput/TokenInput.tsx
index 7e3b0661cb4..37a61848954 100644
--- a/packages/react-ui/components/TokenInput/TokenInput.tsx
+++ b/packages/react-ui/components/TokenInput/TokenInput.tsx
@@ -151,10 +151,10 @@ export const DefaultState = {
   inputValueHeight: 22,
 };
 
-export const tokenInputDataTid = {
+export const TokenInputDataTids = {
   root: 'TokenInput__root',
   tokenInputMenu: 'TokenInputMenu__root',
-};
+} as const;
 
 const defaultToKey = <T extends {}>(item: T): string => item.toString();
 const identity = <T extends {}>(item: T): T => item;
@@ -329,7 +329,7 @@ export class TokenInput<T = string> extends React.PureComponent<TokenInputProps<
 
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-        <div data-tid={tokenInputDataTid.root} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+        <div data-tid={TokenInputDataTids.root} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
           <label
             ref={this.wrapperRef}
             style={{ width }}
diff --git a/packages/react-ui/components/TokenInput/TokenInputMenu.tsx b/packages/react-ui/components/TokenInput/TokenInputMenu.tsx
index 43ebfabe9e0..808085e3b9e 100644
--- a/packages/react-ui/components/TokenInput/TokenInputMenu.tsx
+++ b/packages/react-ui/components/TokenInput/TokenInputMenu.tsx
@@ -7,7 +7,7 @@ import { Menu } from '../../internal/Menu';
 import { Theme } from '../../lib/theming/Theme';
 import { ThemeContext } from '../../lib/theming/ThemeContext';
 
-import { tokenInputDataTid, TokenInputMenuAlign, TokenInputProps } from './TokenInput';
+import { TokenInputDataTids, TokenInputMenuAlign, TokenInputProps } from './TokenInput';
 
 export interface TokenInputMenuProps<T> extends ComboBoxMenuProps<T> {
   anchorElement: HTMLElement;
@@ -65,7 +65,7 @@ export class TokenInputMenu<T = string> extends React.Component<TokenInputMenuPr
 
     return (
       <Popup
-        data-tid={tokenInputDataTid.tokenInputMenu}
+        data-tid={TokenInputDataTids.tokenInputMenu}
         opened={opened!}
         positions={['bottom left', 'top left']}
         anchorElement={anchorElement}
diff --git a/packages/react-ui/components/Tooltip/Tooltip.tsx b/packages/react-ui/components/Tooltip/Tooltip.tsx
index 9ccc85f5309..bbd4e82d474 100644
--- a/packages/react-ui/components/Tooltip/Tooltip.tsx
+++ b/packages/react-ui/components/Tooltip/Tooltip.tsx
@@ -134,9 +134,9 @@ export interface TooltipState {
   focused: boolean;
 }
 
-export const tooltipDataTid = {
+export const TooltipDataTids = {
   root: 'Tooltip__root',
-};
+} as const;
 
 const Positions: PopupPositionsType[] = [
   'right bottom',
@@ -329,7 +329,7 @@ export class Tooltip extends React.PureComponent<TooltipProps, TooltipState> imp
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <Popup
-          data-tid={tooltipDataTid.root}
+          data-tid={TooltipDataTids.root}
           anchorElement={anchorElement}
           hasPin
           hasShadow
diff --git a/packages/react-ui/components/TooltipMenu/TooltipMenu.tsx b/packages/react-ui/components/TooltipMenu/TooltipMenu.tsx
index 72a234350c6..eff326d28f6 100644
--- a/packages/react-ui/components/TooltipMenu/TooltipMenu.tsx
+++ b/packages/react-ui/components/TooltipMenu/TooltipMenu.tsx
@@ -50,9 +50,9 @@ export interface TooltipMenuProps extends CommonProps {
   disableAnimations: boolean;
 }
 
-export const tooltipMenuDataTid = {
+export const TooltipMenuDataTids = {
   root: 'TooltipMenu__root',
-};
+} as const;
 
 /**
  * Меню, раскрывающееся по клику на переданный в `caption` элемент.
@@ -112,7 +112,7 @@ export class TooltipMenu extends React.Component<TooltipMenuProps> {
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <PopupMenu
-          data-tid={tooltipMenuDataTid.root}
+          data-tid={TooltipMenuDataTids.root}
           menuMaxHeight={this.props.menuMaxHeight}
           menuWidth={this.props.menuWidth}
           caption={this.props.caption}
diff --git a/packages/react-ui/internal/Calendar/Calendar.tsx b/packages/react-ui/internal/Calendar/Calendar.tsx
index 0f5bbf0c6fc..c877f2eea9d 100644
--- a/packages/react-ui/internal/Calendar/Calendar.tsx
+++ b/packages/react-ui/internal/Calendar/Calendar.tsx
@@ -36,9 +36,9 @@ export interface CalendarState {
   touchStart: number;
 }
 
-export const calendarDataTid = {
+export const CalendarDataTids = {
   root: 'Calendar',
-};
+} as const;
 
 const getTodayDate = () => {
   const date = new Date();
@@ -216,7 +216,7 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
     const positions = this.getMonthPositions();
     const wrapperStyle = { height: themeConfig(this.theme).WRAPPER_HEIGHT };
     return (
-      <div ref={this.refRoot} className={styles.root(this.theme)} data-tid={calendarDataTid.root}>
+      <div ref={this.refRoot} className={styles.root(this.theme)} data-tid={CalendarDataTids.root}>
         <div style={wrapperStyle} className={styles.wrapper()}>
           {this.state.months
             .map<[number, MonthViewModel]>((x, i) => [positions[i], x])
diff --git a/packages/react-ui/internal/Calendar/MonthView.tsx b/packages/react-ui/internal/Calendar/MonthView.tsx
index e86cab993c4..70fcb012186 100644
--- a/packages/react-ui/internal/Calendar/MonthView.tsx
+++ b/packages/react-ui/internal/Calendar/MonthView.tsx
@@ -26,11 +26,11 @@ interface MonthViewProps {
   yearSelectRef: (select: DateSelect | null) => void;
 }
 
-export const monthViewDataTid = {
+export const MonthViewDataTids = {
   month: 'MonthView__month',
   headerMonth: 'MonthView__headerMonth',
   headerYear: 'MonthView__headerYear',
-};
+} as const;
 
 export function MonthView(props: MonthViewProps) {
   const theme = useContext(ThemeContext);
@@ -84,7 +84,7 @@ export function MonthView(props: MonthViewProps) {
   };
 
   return (
-    <div data-tid={monthViewDataTid.month} className={styles.month(theme)} style={{ top }} key={month + '-' + year}>
+    <div data-tid={MonthViewDataTids.month} className={styles.month(theme)} style={{ top }} key={month + '-' + year}>
       <div
         style={{ top: headerTop }}
         className={cx({
@@ -93,7 +93,7 @@ export function MonthView(props: MonthViewProps) {
         })}
       >
         <div style={{ borderBottomColor }} className={styles.monthTitle(theme)}>
-          <div data-tid={monthViewDataTid.headerMonth} className={styles.headerMonth(theme)}>
+          <div data-tid={MonthViewDataTids.headerMonth} className={styles.headerMonth(theme)}>
             <DateSelect
               disabled={monthSelectDisabled}
               width={85}
@@ -106,7 +106,7 @@ export function MonthView(props: MonthViewProps) {
             />
           </div>
           {isYearVisible && (
-            <div data-tid={monthViewDataTid.headerYear} className={styles.headerYear(theme)} style={{ top: yearTop }}>
+            <div data-tid={MonthViewDataTids.headerYear} className={styles.headerYear(theme)} style={{ top: yearTop }}>
               <DateSelect
                 disabled={yearSelectDisabled}
                 width={50}
diff --git a/packages/react-ui/internal/CustomComboBox/ComboBoxMenu.tsx b/packages/react-ui/internal/CustomComboBox/ComboBoxMenu.tsx
index 8a39cbf1de0..3f245cf6bc2 100644
--- a/packages/react-ui/internal/CustomComboBox/ComboBoxMenu.tsx
+++ b/packages/react-ui/internal/CustomComboBox/ComboBoxMenu.tsx
@@ -28,13 +28,13 @@ export interface ComboBoxMenuProps<T> {
   isMobile?: boolean;
 }
 
-export const comboBoxMenuDataTid = {
+export const ComboBoxMenuDataTids = {
   loading: 'ComboBoxMenu__loading',
   failed: 'ComboBoxMenu__failed',
   notFound: 'ComboBoxMenu__notFound',
   items: 'ComboBoxMenu__items',
   item: 'ComboBoxMenu__item',
-};
+} as const;
 
 @locale('ComboBox', CustomComboBoxLocaleHelper)
 export class ComboBoxMenu<T> extends Component<ComboBoxMenuProps<T>> {
@@ -80,7 +80,7 @@ export class ComboBoxMenu<T> extends Component<ComboBoxMenuProps<T>> {
           maxHeight={maxHeight}
           ref={refMenu}
           disableScrollContainer={isMobile}
-          data-tid={comboBoxMenuDataTid.loading}
+          data-tid={ComboBoxMenuDataTids.loading}
         >
           <MenuItem disabled isMobile={isMobile}>
             <Spinner type="mini" dimmed />
@@ -95,7 +95,7 @@ export class ComboBoxMenu<T> extends Component<ComboBoxMenuProps<T>> {
           ref={refMenu}
           maxHeight={maxHeight}
           disableScrollContainer={isMobile}
-          data-tid={comboBoxMenuDataTid.failed}
+          data-tid={ComboBoxMenuDataTids.failed}
         >
           <MenuItem disabled key="message" isMobile={isMobile}>
             <div style={{ maxWidth: 300, whiteSpace: 'normal' }}>{errorNetworkMessage}</div>
@@ -118,7 +118,7 @@ export class ComboBoxMenu<T> extends Component<ComboBoxMenuProps<T>> {
       if (notFoundValue)
         return (
           <Menu maxHeight={maxHeight} ref={refMenu} disableScrollContainer={isMobile}>
-            <MenuItem data-tid={comboBoxMenuDataTid.notFound} disabled isMobile={isMobile}>
+            <MenuItem data-tid={ComboBoxMenuDataTids.notFound} disabled isMobile={isMobile}>
               {notFoundValue}
             </MenuItem>
           </Menu>
@@ -140,7 +140,7 @@ export class ComboBoxMenu<T> extends Component<ComboBoxMenuProps<T>> {
     }
 
     return (
-      <Menu data-tid={comboBoxMenuDataTid.items} ref={refMenu} maxHeight={maxHeight} disableScrollContainer={isMobile}>
+      <Menu data-tid={ComboBoxMenuDataTids.items} ref={refMenu} maxHeight={maxHeight} disableScrollContainer={isMobile}>
         {renderedItems}
         {total}
         {renderAddButton && [<MenuSeparator key="separator" />, renderAddButton]}
@@ -167,7 +167,7 @@ export class ComboBoxMenu<T> extends Component<ComboBoxMenuProps<T>> {
 
     return (
       <MenuItem
-        data-tid={comboBoxMenuDataTid.item}
+        data-tid={ComboBoxMenuDataTids.item}
         onClick={() => onValueChange(item)}
         key={index}
         isMobile={this.props.isMobile}
diff --git a/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx b/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx
index 45a95f25815..cd45d972e9f 100644
--- a/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx
+++ b/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx
@@ -79,9 +79,9 @@ interface ComboBoxViewState {
   isMobileOpened: boolean;
 }
 
-export const comboBoxViewDataTid = {
+export const ComboBoxViewDataTids = {
   root: 'ComboBoxView__root',
-};
+} as const;
 
 @responsiveLayout
 @rootNode
@@ -140,7 +140,7 @@ export class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T>, Combo
       <CommonWrapper {...this.props}>
         <RenderLayer onClickOutside={onClickOutside} onFocusOutside={onFocusOutside} active={opened}>
           <span
-            data-tid={comboBoxViewDataTid.root}
+            data-tid={ComboBoxViewDataTids.root}
             style={{ width }}
             className={styles.root()}
             onMouseEnter={onMouseEnter}
diff --git a/packages/react-ui/internal/DateSelect/DateSelect.tsx b/packages/react-ui/internal/DateSelect/DateSelect.tsx
index 63e995d3019..6bc01961798 100644
--- a/packages/react-ui/internal/DateSelect/DateSelect.tsx
+++ b/packages/react-ui/internal/DateSelect/DateSelect.tsx
@@ -45,7 +45,7 @@ export interface DateSelectState {
   nodeTop: number;
 }
 
-export const dateSelectDataTid = {
+export const DateSelectDataTids = {
   caption: 'DateSelect__caption',
   menuItem: 'DateSelect__menuItem',
 };
@@ -178,7 +178,7 @@ export class DateSelect extends React.PureComponent<DateSelectProps, DateSelectS
     };
     return (
       <span {...rootProps}>
-        <div data-tid={dateSelectDataTid.caption} className={styles.caption()} onClick={this.open}>
+        <div data-tid={DateSelectDataTids.caption} className={styles.caption()} onClick={this.open}>
           {this.getItem(0)}
           <div
             className={cx({
@@ -252,7 +252,7 @@ export class DateSelect extends React.PureComponent<DateSelectProps, DateSelectS
       };
       items.push(
         <div
-          data-tid={dateSelectDataTid.menuItem}
+          data-tid={DateSelectDataTids.menuItem}
           data-prop-disabled={disableItems}
           key={i}
           className={className}
diff --git a/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx b/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx
index 0d266f53f2c..8e320965e17 100644
--- a/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx
+++ b/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx
@@ -15,7 +15,7 @@ import { Nullable } from '../../../typings/utility-types';
 import { Hint } from '../../../components/Hint';
 import { Tooltip } from '../../../components/Tooltip';
 import { getDOMRect } from '../../../lib/dom/getDOMRect';
-import { fileUploaderDataTid } from '../../../components/FileUploader';
+import { FileUploaderDataTids } from '../../../components/FileUploader';
 
 import { jsStyles } from './FileUploaderFile.styles';
 
@@ -152,27 +152,27 @@ export const FileUploaderFile = (props: FileUploaderFileProps) => {
 
   return (
     <div
-      data-tid={fileUploaderDataTid.file}
+      data-tid={FileUploaderDataTids.file}
       className={jsStyles.root()}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
-      <Tooltip data-tid={fileUploaderDataTid.fileTooltip} pos="right middle" render={renderTooltipContent}>
+      <Tooltip data-tid={FileUploaderDataTids.fileTooltip} pos="right middle" render={renderTooltipContent}>
         <div className={contentClassNames}>
           <TextWidthHelper ref={textHelperRef} text={name} />
           <Hint maxWidth={'100%'} text={isTruncated ? name : null}>
-            <span data-tid={fileUploaderDataTid.fileName} ref={fileNameElementRef} className={jsStyles.name()}>
+            <span data-tid={FileUploaderDataTids.fileName} ref={fileNameElementRef} className={jsStyles.name()}>
               {truncatedFileName}
             </span>
           </Hint>
           {!!showSize && formattedSize && (
-            <span data-tid={fileUploaderDataTid.fileSize} className={jsStyles.size()}>
+            <span data-tid={FileUploaderDataTids.fileSize} className={jsStyles.size()}>
               {formattedSize}
             </span>
           )}
           <div
             className={iconClassNames}
-            data-tid={fileUploaderDataTid.fileIcon}
+            data-tid={FileUploaderDataTids.fileIcon}
             tabIndex={0}
             onClick={handleRemove}
             onFocus={handleFocus}
diff --git a/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx b/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx
index a3df4a2cfd3..747caa64989 100644
--- a/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx
+++ b/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx
@@ -4,7 +4,7 @@ import { FileUploaderControlContext } from '../FileUploaderControlContext';
 import { ThemeContext } from '../../../lib/theming/ThemeContext';
 import { FileUploaderFile } from '../FileUploaderFile/FileUploaderFile';
 import { FileUploaderAttachedFile } from '../fileUtils';
-import { fileUploaderDataTid } from '../../../components/FileUploader';
+import { FileUploaderDataTids } from '../../../components/FileUploader';
 
 import { jsStyles } from './FileUploaderFileList.styles';
 
@@ -18,7 +18,7 @@ export const FileUploaderFileList = (props: FileUploaderFileListProps) => {
   const theme = useContext(ThemeContext);
 
   return (
-    <div data-tid={fileUploaderDataTid.fileList}>
+    <div data-tid={FileUploaderDataTids.fileList}>
       {files.map((file) => (
         <div key={file.id} className={jsStyles.fileWrapper(theme)}>
           <div className={jsStyles.file()}>{renderFile(file, <FileUploaderFile file={file} showSize />)}</div>
diff --git a/packages/react-ui/internal/InputLikeText/InputLikeText.tsx b/packages/react-ui/internal/InputLikeText/InputLikeText.tsx
index 075b2da8cab..9d1f78526b7 100644
--- a/packages/react-ui/internal/InputLikeText/InputLikeText.tsx
+++ b/packages/react-ui/internal/InputLikeText/InputLikeText.tsx
@@ -30,10 +30,10 @@ export interface InputLikeTextProps extends CommonProps, InputProps {
 
 export type InputLikeTextState = Omit<InputState, 'needsPolyfillPlaceholder'>;
 
-export const inputLikeTextDataTid = {
+export const InputLikeTextDataTids = {
   root: 'InputLikeText__root',
   input: 'InputLikeText__input',
-};
+} as const;
 
 @rootNode
 export class InputLikeText extends React.Component<InputLikeTextProps, InputLikeTextState> {
@@ -187,7 +187,7 @@ export class InputLikeText extends React.Component<InputLikeTextProps, InputLike
 
     return (
       <span
-        data-tid={inputLikeTextDataTid.root}
+        data-tid={InputLikeTextDataTids.root}
         {...rest}
         className={className}
         style={{ width, textAlign: align }}
@@ -202,7 +202,7 @@ export class InputLikeText extends React.Component<InputLikeTextProps, InputLike
         {leftSide}
         <span className={wrapperClass}>
           <span
-            data-tid={inputLikeTextDataTid.input}
+            data-tid={InputLikeTextDataTids.input}
             className={cx(jsInputStyles.input(this.theme), {
               [styles.absolute()]: !takeContentWidth,
               [jsInputStyles.inputFocus(this.theme)]: focused,
diff --git a/packages/react-ui/internal/InternalMenu/InternalMenu.tsx b/packages/react-ui/internal/InternalMenu/InternalMenu.tsx
index 8cfe8ffd3a4..cb1b604d269 100644
--- a/packages/react-ui/internal/InternalMenu/InternalMenu.tsx
+++ b/packages/react-ui/internal/InternalMenu/InternalMenu.tsx
@@ -43,9 +43,9 @@ interface MenuState {
   scrollState: ScrollContainerScrollState;
 }
 
-export const internalMenuDataTid = {
+export const InternalMenuDataTids = {
   root: 'InternalMenu__root',
-};
+} as const;
 
 @rootNode
 export class InternalMenu extends React.PureComponent<MenuProps, MenuState> {
@@ -117,7 +117,7 @@ export class InternalMenu extends React.PureComponent<MenuProps, MenuState> {
 
     return (
       <div
-        data-tid={internalMenuDataTid.root}
+        data-tid={InternalMenuDataTids.root}
         className={cx({
           [styles.root(this.theme)]: true,
           [styles.shadow(this.theme)]: this.props.hasShadow,
diff --git a/packages/react-ui/internal/MaskedInput/MaskedInput.tsx b/packages/react-ui/internal/MaskedInput/MaskedInput.tsx
index ffaf1b892c3..e4e76c6b33f 100644
--- a/packages/react-ui/internal/MaskedInput/MaskedInput.tsx
+++ b/packages/react-ui/internal/MaskedInput/MaskedInput.tsx
@@ -25,9 +25,9 @@ interface MaskedInputState {
   focused: boolean;
 }
 
-export const maskedInputDataTid = {
+export const MaskedInputDataTids = {
   root: 'MaskedInput__root',
-};
+} as const;
 
 export class MaskedInput extends React.PureComponent<MaskedInputProps, MaskedInputState> {
   public static __KONTUR_REACT_UI__ = 'MaskedInput';
@@ -102,7 +102,7 @@ export class MaskedInput extends React.PureComponent<MaskedInputProps, MaskedInp
       .map((_char, i) => (_char === '_' ? <MaskCharLowLine key={i} /> : _char));
 
     return (
-      <span data-tid={maskedInputDataTid.root} className={styles.container()} x-ms-format-detection="none">
+      <span data-tid={MaskedInputDataTids.root} className={styles.container()} x-ms-format-detection="none">
         <ReactInputMask
           {...inputProps}
           maskChar={null}
diff --git a/packages/react-ui/internal/Menu/Menu.tsx b/packages/react-ui/internal/Menu/Menu.tsx
index 0adda0d32eb..bbf8ecf6e3b 100644
--- a/packages/react-ui/internal/Menu/Menu.tsx
+++ b/packages/react-ui/internal/Menu/Menu.tsx
@@ -31,9 +31,9 @@ export interface MenuState {
   highlightedIndex: number;
 }
 
-export const menuDataTid = {
+export const MenuDataTids = {
   root: 'Menu__root',
-};
+} as const;
 
 @rootNode
 export class Menu extends React.Component<MenuProps, MenuState> {
@@ -118,7 +118,7 @@ export class Menu extends React.Component<MenuProps, MenuState> {
 
     return (
       <div
-        data-tid={menuDataTid.root}
+        data-tid={MenuDataTids.root}
         className={cx(getAlignRightClass(this.props), {
           [styles.root(this.theme)]: true,
           [styles.shadow(this.theme)]: this.props.hasShadow,
diff --git a/packages/react-ui/internal/MobilePopup/MobilePopup.tsx b/packages/react-ui/internal/MobilePopup/MobilePopup.tsx
index 2a8d366be7d..41f4f0df254 100644
--- a/packages/react-ui/internal/MobilePopup/MobilePopup.tsx
+++ b/packages/react-ui/internal/MobilePopup/MobilePopup.tsx
@@ -35,10 +35,10 @@ interface MobilePopupState {
   isScrolled: boolean;
 }
 
-export const mobilePopupDataTid = {
+export const MobilePopupDataTids = {
   root: 'MobilePopup__root',
   container: 'MobilePopup__container',
-};
+} as const;
 
 export class MobilePopup extends React.Component<MobilePopupProps, MobilePopupState> {
   public static __KONTUR_REACT_UI__ = 'MobileMenuHeader';
@@ -75,14 +75,14 @@ export class MobilePopup extends React.Component<MobilePopupProps, MobilePopupSt
           {(state) => (
             <>
               <div
-                data-tid={mobilePopupDataTid.container}
+                data-tid={MobilePopupDataTids.container}
                 className={cx({
                   [jsStyles.container(this.theme)]: true,
                   [jsStyles.containerOpened()]: state === 'entered',
                 })}
               >
                 <div
-                  data-tid={mobilePopupDataTid.root}
+                  data-tid={MobilePopupDataTids.root}
                   className={cx({
                     [jsStyles.root(this.theme)]: true,
                     [jsStyles.rootFullHeight(this.theme)]: this.props.useFullHeight,
diff --git a/packages/react-ui/internal/Popup/Popup.tsx b/packages/react-ui/internal/Popup/Popup.tsx
index e4f61025431..bd9abd494a6 100644
--- a/packages/react-ui/internal/Popup/Popup.tsx
+++ b/packages/react-ui/internal/Popup/Popup.tsx
@@ -113,10 +113,10 @@ export interface PopupState {
   location: Nullable<PopupLocation>;
 }
 
-export const popupDataTid = {
+export const PopupDataTids = {
   content: 'PopupContent',
   contentInner: 'PopupContentInner',
-};
+} as const;
 
 @responsiveLayout
 @rootNode
@@ -397,11 +397,11 @@ export class Popup extends React.Component<PopupProps, PopupState> {
     const { backgroundColor, width } = this.props;
 
     return (
-      <div className={styles.content(this.theme)} data-tid={popupDataTid.content} ref={this.refForTransition}>
+      <div className={styles.content(this.theme)} data-tid={PopupDataTids.content} ref={this.refForTransition}>
         <div
           className={styles.contentInner(this.theme)}
           style={{ backgroundColor, width: this.calculateWidth(width) }}
-          data-tid={popupDataTid.contentInner}
+          data-tid={PopupDataTids.contentInner}
         >
           {children}
         </div>
diff --git a/packages/react-ui/internal/Popup/PopupPin.tsx b/packages/react-ui/internal/Popup/PopupPin.tsx
index 70dcdca4906..9fa506b136e 100644
--- a/packages/react-ui/internal/Popup/PopupPin.tsx
+++ b/packages/react-ui/internal/Popup/PopupPin.tsx
@@ -25,9 +25,9 @@ interface Props {
   size: number;
 }
 
-export const popupPinDataTid = {
+export const PopupPinDataTids = {
   root: 'PopupPin__root',
-};
+} as const;
 
 export class PopupPin extends React.Component<Props> {
   public static __KONTUR_REACT_UI__ = 'PopupPin';
@@ -99,7 +99,7 @@ export class PopupPin extends React.Component<Props> {
     const styleWrapper = this.getWrapperStyle(options.outerLeft, options.outerTop, options.outerSize);
 
     return (
-      <div data-tid={popupPinDataTid.root} className={styles.wrapper()} style={styleWrapper}>
+      <div data-tid={PopupPinDataTids.root} className={styles.wrapper()} style={styleWrapper}>
         <div style={styleOuter}>
           <div style={styleInner} />
         </div>
diff --git a/packages/react-ui/internal/PopupMenu/PopupMenu.tsx b/packages/react-ui/internal/PopupMenu/PopupMenu.tsx
index e277a4bd777..66eb5385651 100644
--- a/packages/react-ui/internal/PopupMenu/PopupMenu.tsx
+++ b/packages/react-ui/internal/PopupMenu/PopupMenu.tsx
@@ -67,10 +67,10 @@ export const PopupMenuType = {
   Tooltip: 'tooltip',
 };
 
-export const popupMenuDataTid = {
+export const PopupMenuDataTids = {
   root: 'PopupMenu_root',
   caption: 'PopupMenu__caption',
-};
+} as const;
 
 const Positions: PopupPositionsType[] = [
   'top left',
@@ -121,7 +121,7 @@ export class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {
           onFocusOutside={this.hideMenuWithoutFocusing}
           active={this.state.menuVisible}
         >
-          <div data-tid={popupMenuDataTid.root} className={styles.container()} style={{ width: this.props.width }}>
+          <div data-tid={PopupMenuDataTids.root} className={styles.container()} style={{ width: this.props.width }}>
             {this.renderCaption()}
             {this.captionWrapper && this.props.children && (
               <Popup
@@ -180,7 +180,7 @@ export class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {
 
       return (
         <span
-          data-tid={popupMenuDataTid.caption}
+          data-tid={PopupMenuDataTids.caption}
           className={styles.caption()}
           ref={(element) => (this.captionWrapper = element)}
         >
@@ -191,7 +191,7 @@ export class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {
 
     return (
       <span
-        data-tid={popupMenuDataTid.caption}
+        data-tid={PopupMenuDataTids.caption}
         onClick={this.handleCaptionClick}
         onKeyDown={this.handleCaptionKeyDown}
         ref={(element) => (this.captionWrapper = element)}
diff --git a/packages/react-ui/lib/data-tid/componentsDataTids.ts b/packages/react-ui/lib/data-tid/componentsDataTids.ts
index afc7a29a8ae..e9fd2b35e87 100644
--- a/packages/react-ui/lib/data-tid/componentsDataTids.ts
+++ b/packages/react-ui/lib/data-tid/componentsDataTids.ts
@@ -31,14 +31,13 @@ const allComponents = {
 };
 
 const tids = Object.keys(allComponents).filter((componentName) => {
-  if (componentName.match(/datatid/i)) {
+  if (componentName.match(/datatids/i)) {
     return componentName;
   }
 });
 
 export const componentsDataTids: { [key: string]: { [key: string]: string } } = tids.reduce((accum, currTid) => {
-  let componentName = currTid.replace('DataTid', '');
-  componentName = componentName.charAt(0).toUpperCase() + componentName.slice(1);
+  const componentName = currTid.replace('DataTids', '');
   return {
     ...accum,
     [componentName]: {

From acb46fb1189b71c08614bc4c45ec065f82504428 Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Thu, 2 Jun 2022 12:07:23 +0300
Subject: [PATCH 16/40] chore: fix table styles

---
 .../react-ui/lib/data-tid/DataTids.styles.ts   | 16 ++++++++++++++--
 packages/react-ui/lib/data-tid/DataTids.tsx    | 18 ++++++++++--------
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/packages/react-ui/lib/data-tid/DataTids.styles.ts b/packages/react-ui/lib/data-tid/DataTids.styles.ts
index 48416906d42..fc1737c54c3 100644
--- a/packages/react-ui/lib/data-tid/DataTids.styles.ts
+++ b/packages/react-ui/lib/data-tid/DataTids.styles.ts
@@ -7,15 +7,27 @@ export const styles = memoizeStyle({
       width: 100%;
     `;
   },
+  headRow() {
+    return css`
+      margin-top: 20px;
+      font-size: 1.5em;
+      font-weight: bold;
+      border-top: 1px solid #000;
+    `;
+  },
   leftCell() {
     return css`
-      border: 1px solid #000;
+      padding: 5px;
+      border-right: 1px solid #000;
+      border-bottom: 1px solid #000;
       width: 30%;
+      overflow-wrap: anywhere;
     `;
   },
   rightCell() {
     return css`
-      border: 1px solid #000;
+      padding: 5px;
+      border-bottom: 1px solid #000;
       width: 70%;
     `;
   },
diff --git a/packages/react-ui/lib/data-tid/DataTids.tsx b/packages/react-ui/lib/data-tid/DataTids.tsx
index 13c9c0e3c64..89355ecbb4e 100644
--- a/packages/react-ui/lib/data-tid/DataTids.tsx
+++ b/packages/react-ui/lib/data-tid/DataTids.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Select } from '../../components/Select';
+import { cx } from '../theming/Emotion';
 
 import { styles } from './DataTids.styles';
 import { componentsDataTids } from './componentsDataTids';
@@ -24,12 +25,13 @@ export class DataTids extends React.Component<{}, { selectedValue: string }> {
         const dataTidList = componentsDataTids[componentName];
         return (
           <div key={index} className={styles.row()}>
-            <div className={styles.leftCell()}>{componentName}</div>
+            <div className={styles.leftCell()}>{Object.keys(dataTidList)}:</div>
             <div className={styles.rightCell()}>
-              <div className={styles.dataTidContainer()}>
-                <div className={styles.dataTidName()}>{Object.keys(dataTidList)}:</div>
-                <div className={styles.dataTidDescription()}>{Object.values(dataTidList)}</div>
-              </div>
+              {Object.values(dataTidList)[0]
+                .split(',')
+                .map((el: string, i: number) => (
+                  <div key={i}>{el}</div>
+                ))}
             </div>
           </div>
         );
@@ -40,9 +42,9 @@ export class DataTids extends React.Component<{}, { selectedValue: string }> {
       <div>
         Выбрать компонент:
         <Select<string> items={this.items} value={this.state.selectedValue} onValueChange={this.setValue} />
-        <div className={styles.row()}>
-          <div className={styles.leftCell()}>Название компонента:</div>
-          <div className={styles.rightCell()}>data-tid</div>
+        <div className={cx(styles.row(), styles.headRow())}>
+          <div className={styles.leftCell()}>VariableName</div>
+          <div className={styles.rightCell()}>Value</div>
         </div>
         {list}
       </div>

From 57c0e1e32f14e144570acbc6655fac1059ff5cea Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Thu, 2 Jun 2022 12:07:41 +0300
Subject: [PATCH 17/40] chore: fix ts error

---
 packages/react-ui/lib/data-tid/componentsDataTids.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-ui/lib/data-tid/componentsDataTids.ts b/packages/react-ui/lib/data-tid/componentsDataTids.ts
index e9fd2b35e87..f1f619b817f 100644
--- a/packages/react-ui/lib/data-tid/componentsDataTids.ts
+++ b/packages/react-ui/lib/data-tid/componentsDataTids.ts
@@ -13,7 +13,7 @@ import * as PopupPin from '../../internal/Popup/PopupPin';
 import * as MobilePopupDataTid from '../../internal/MobilePopup';
 import * as PopupMenu from '../../internal/PopupMenu';
 
-const allComponents = {
+const allComponents: any = {
   ...Components,
   ...Calendar,
   ...CalendarMonthView,

From f3f3ea874a9818b20c52d462d1e2146fe9095980 Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Fri, 3 Jun 2022 11:10:16 +0300
Subject: [PATCH 18/40] chore: add search to Select

---
 packages/react-ui/lib/data-tid/DataTids.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-ui/lib/data-tid/DataTids.tsx b/packages/react-ui/lib/data-tid/DataTids.tsx
index 89355ecbb4e..0542f7487c6 100644
--- a/packages/react-ui/lib/data-tid/DataTids.tsx
+++ b/packages/react-ui/lib/data-tid/DataTids.tsx
@@ -41,7 +41,7 @@ export class DataTids extends React.Component<{}, { selectedValue: string }> {
     return (
       <div>
         Выбрать компонент:
-        <Select<string> items={this.items} value={this.state.selectedValue} onValueChange={this.setValue} />
+        <Select<string> items={this.items} value={this.state.selectedValue} onValueChange={this.setValue} search />
         <div className={cx(styles.row(), styles.headRow())}>
           <div className={styles.leftCell()}>VariableName</div>
           <div className={styles.rightCell()}>Value</div>

From 0f8121fc478da5bd46dda0b7bdc0f6a0b4f766c7 Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Fri, 3 Jun 2022 11:24:49 +0300
Subject: [PATCH 19/40] chore: fix import of inner components in internal

---
 packages/react-ui/internal/Calendar/Calendar.tsx    |  3 +++
 packages/react-ui/internal/Calendar/MonthView.tsx   | 13 ++++---------
 .../internal/CustomComboBox/ComboBoxView.tsx        |  7 ++-----
 .../internal/CustomComboBox/CustomComboBox.tsx      |  4 ++++
 packages/react-ui/internal/Popup/Popup.tsx          |  1 +
 packages/react-ui/internal/Popup/PopupPin.tsx       |  7 +++----
 .../react-ui/lib/data-tid/componentsDataTids.ts     |  6 ------
 7 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/packages/react-ui/internal/Calendar/Calendar.tsx b/packages/react-ui/internal/Calendar/Calendar.tsx
index c877f2eea9d..2437830368d 100644
--- a/packages/react-ui/internal/Calendar/Calendar.tsx
+++ b/packages/react-ui/internal/Calendar/Calendar.tsx
@@ -38,6 +38,9 @@ export interface CalendarState {
 
 export const CalendarDataTids = {
   root: 'Calendar',
+  month: 'MonthView__month',
+  headerMonth: 'MonthView__headerMonth',
+  headerYear: 'MonthView__headerYear',
 } as const;
 
 const getTodayDate = () => {
diff --git a/packages/react-ui/internal/Calendar/MonthView.tsx b/packages/react-ui/internal/Calendar/MonthView.tsx
index 70fcb012186..fb708c236fc 100644
--- a/packages/react-ui/internal/Calendar/MonthView.tsx
+++ b/packages/react-ui/internal/Calendar/MonthView.tsx
@@ -8,6 +8,7 @@ import { cx } from '../../lib/theming/Emotion';
 import { styles } from './MonthView.styles';
 import { themeConfig } from './config';
 import * as CDS from './CalendarDateShape';
+import { CalendarDataTids } from './Calendar';
 
 interface MonthViewProps {
   children: React.ReactNode;
@@ -26,12 +27,6 @@ interface MonthViewProps {
   yearSelectRef: (select: DateSelect | null) => void;
 }
 
-export const MonthViewDataTids = {
-  month: 'MonthView__month',
-  headerMonth: 'MonthView__headerMonth',
-  headerYear: 'MonthView__headerYear',
-} as const;
-
 export function MonthView(props: MonthViewProps) {
   const theme = useContext(ThemeContext);
 
@@ -84,7 +79,7 @@ export function MonthView(props: MonthViewProps) {
   };
 
   return (
-    <div data-tid={MonthViewDataTids.month} className={styles.month(theme)} style={{ top }} key={month + '-' + year}>
+    <div data-tid={CalendarDataTids.month} className={styles.month(theme)} style={{ top }} key={month + '-' + year}>
       <div
         style={{ top: headerTop }}
         className={cx({
@@ -93,7 +88,7 @@ export function MonthView(props: MonthViewProps) {
         })}
       >
         <div style={{ borderBottomColor }} className={styles.monthTitle(theme)}>
-          <div data-tid={MonthViewDataTids.headerMonth} className={styles.headerMonth(theme)}>
+          <div data-tid={CalendarDataTids.headerMonth} className={styles.headerMonth(theme)}>
             <DateSelect
               disabled={monthSelectDisabled}
               width={85}
@@ -106,7 +101,7 @@ export function MonthView(props: MonthViewProps) {
             />
           </div>
           {isYearVisible && (
-            <div data-tid={MonthViewDataTids.headerYear} className={styles.headerYear(theme)} style={{ top: yearTop }}>
+            <div data-tid={CalendarDataTids.headerYear} className={styles.headerYear(theme)} style={{ top: yearTop }}>
               <DateSelect
                 disabled={yearSelectDisabled}
                 width={50}
diff --git a/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx b/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx
index cd45d972e9f..99e46450ea7 100644
--- a/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx
+++ b/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx
@@ -18,6 +18,7 @@ import { rootNode, getRootNode, TSetRootNode } from '../../lib/rootNode';
 import { ComboBoxMenu } from './ComboBoxMenu';
 import { ComboBoxRequestStatus } from './CustomComboBoxTypes';
 import { styles } from './CustomComboBox.styles';
+import { CustomComboBoxDataTids } from './CustomComboBox';
 
 interface ComboBoxViewProps<T> extends CommonProps {
   align?: 'left' | 'center' | 'right';
@@ -79,10 +80,6 @@ interface ComboBoxViewState {
   isMobileOpened: boolean;
 }
 
-export const ComboBoxViewDataTids = {
-  root: 'ComboBoxView__root',
-} as const;
-
 @responsiveLayout
 @rootNode
 export class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T>, ComboBoxViewState> {
@@ -140,7 +137,7 @@ export class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T>, Combo
       <CommonWrapper {...this.props}>
         <RenderLayer onClickOutside={onClickOutside} onFocusOutside={onFocusOutside} active={opened}>
           <span
-            data-tid={ComboBoxViewDataTids.root}
+            data-tid={CustomComboBoxDataTids.comboBoxView}
             style={{ width }}
             className={styles.root()}
             onMouseEnter={onMouseEnter}
diff --git a/packages/react-ui/internal/CustomComboBox/CustomComboBox.tsx b/packages/react-ui/internal/CustomComboBox/CustomComboBox.tsx
index aa3d9ae8a1b..bc499511188 100644
--- a/packages/react-ui/internal/CustomComboBox/CustomComboBox.tsx
+++ b/packages/react-ui/internal/CustomComboBox/CustomComboBox.tsx
@@ -88,6 +88,10 @@ export const DefaultState = {
   requestStatus: ComboBoxRequestStatus.Unknown,
 };
 
+export const CustomComboBoxDataTids = {
+  comboBoxView: 'ComboBoxView__root',
+} as const;
+
 @responsiveLayout
 @rootNode
 export class CustomComboBox<T> extends React.PureComponent<CustomComboBoxProps<T>, CustomComboBoxState<T>> {
diff --git a/packages/react-ui/internal/Popup/Popup.tsx b/packages/react-ui/internal/Popup/Popup.tsx
index bd9abd494a6..60f5c49ada5 100644
--- a/packages/react-ui/internal/Popup/Popup.tsx
+++ b/packages/react-ui/internal/Popup/Popup.tsx
@@ -116,6 +116,7 @@ export interface PopupState {
 export const PopupDataTids = {
   content: 'PopupContent',
   contentInner: 'PopupContentInner',
+  popupPin: 'PopupPin__root',
 } as const;
 
 @responsiveLayout
diff --git a/packages/react-ui/internal/Popup/PopupPin.tsx b/packages/react-ui/internal/Popup/PopupPin.tsx
index 9fa506b136e..7c6715ed7ee 100644
--- a/packages/react-ui/internal/Popup/PopupPin.tsx
+++ b/packages/react-ui/internal/Popup/PopupPin.tsx
@@ -5,6 +5,7 @@ import { Nullable } from '../../typings/utility-types';
 
 import { PopupHelper, PositionObject, Rect } from './PopupHelper';
 import { styles } from './PopupPin.styles';
+import { PopupDataTids } from './Popup';
 
 const borderStyles = {
   position: 'absolute',
@@ -25,9 +26,7 @@ interface Props {
   size: number;
 }
 
-export const PopupPinDataTids = {
-  root: 'PopupPin__root',
-} as const;
+export const PopupPinDataTids = {} as const;
 
 export class PopupPin extends React.Component<Props> {
   public static __KONTUR_REACT_UI__ = 'PopupPin';
@@ -99,7 +98,7 @@ export class PopupPin extends React.Component<Props> {
     const styleWrapper = this.getWrapperStyle(options.outerLeft, options.outerTop, options.outerSize);
 
     return (
-      <div data-tid={PopupPinDataTids.root} className={styles.wrapper()} style={styleWrapper}>
+      <div data-tid={PopupDataTids.popupPin} className={styles.wrapper()} style={styleWrapper}>
         <div style={styleOuter}>
           <div style={styleInner} />
         </div>
diff --git a/packages/react-ui/lib/data-tid/componentsDataTids.ts b/packages/react-ui/lib/data-tid/componentsDataTids.ts
index f1f619b817f..69c346facfc 100644
--- a/packages/react-ui/lib/data-tid/componentsDataTids.ts
+++ b/packages/react-ui/lib/data-tid/componentsDataTids.ts
@@ -1,31 +1,25 @@
 import * as Components from '../../index';
 import * as Calendar from '../../internal/Calendar';
-import * as CalendarMonthView from '../../internal/Calendar/MonthView';
 import * as CustomComboBox from '../../internal/CustomComboBox';
-import * as CustomComboBoxComboBoxView from '../../internal/CustomComboBox/ComboBoxView';
 import * as DateSelect from '../../internal/DateSelect';
 import * as InputLikeText from '../../internal/InputLikeText';
 import * as InternalMenu from '../../internal/InternalMenu';
 import * as MaskedInput from '../../internal/MaskedInput';
 import * as Menu from '../../internal/Menu';
 import * as Popup from '../../internal/Popup';
-import * as PopupPin from '../../internal/Popup/PopupPin';
 import * as MobilePopupDataTid from '../../internal/MobilePopup';
 import * as PopupMenu from '../../internal/PopupMenu';
 
 const allComponents: any = {
   ...Components,
   ...Calendar,
-  ...CalendarMonthView,
   ...CustomComboBox,
-  ...CustomComboBoxComboBoxView,
   ...DateSelect,
   ...InputLikeText,
   ...InternalMenu,
   ...MaskedInput,
   ...Menu,
   ...Popup,
-  ...PopupPin,
   ...MobilePopupDataTid,
   ...PopupMenu,
 };

From a8c6c20de86df8fdc87ca51c1ea801d380d3ab49 Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Fri, 3 Jun 2022 12:11:19 +0300
Subject: [PATCH 20/40] chore: fix typo

---
 packages/react-ui/components/Loader/Loader.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-ui/components/Loader/Loader.tsx b/packages/react-ui/components/Loader/Loader.tsx
index 9f6f8d31927..a87b13318e0 100644
--- a/packages/react-ui/components/Loader/Loader.tsx
+++ b/packages/react-ui/components/Loader/Loader.tsx
@@ -52,7 +52,7 @@ export interface LoaderState {
 }
 
 export const LoaderDataTids = {
-  vail: 'Loader__Veil',
+  veil: 'Loader__Veil',
   spinner: 'Loader__Spinner',
 } as const;
 
@@ -222,7 +222,7 @@ export class Loader extends React.Component<LoaderProps, LoaderState> {
 
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-        <div className={styles.loader()} data-tid={isLoaderActive ? LoaderDataTids.vail : ''}>
+        <div className={styles.loader()} data-tid={isLoaderActive ? LoaderDataTids.veil : ''}>
           <ZIndex
             priority={'Loader'}
             applyZIndex={isLoaderActive}

From 8fd1b9a66c144be8b3d2a36827c7bd1359c7b1c0 Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Fri, 3 Jun 2022 12:11:58 +0300
Subject: [PATCH 21/40] chore: delete internal components from data-tid table

---
 .../lib/data-tid/componentsDataTids.ts        | 28 ++-----------------
 1 file changed, 2 insertions(+), 26 deletions(-)

diff --git a/packages/react-ui/lib/data-tid/componentsDataTids.ts b/packages/react-ui/lib/data-tid/componentsDataTids.ts
index 69c346facfc..737b7802783 100644
--- a/packages/react-ui/lib/data-tid/componentsDataTids.ts
+++ b/packages/react-ui/lib/data-tid/componentsDataTids.ts
@@ -1,30 +1,6 @@
 import * as Components from '../../index';
-import * as Calendar from '../../internal/Calendar';
-import * as CustomComboBox from '../../internal/CustomComboBox';
-import * as DateSelect from '../../internal/DateSelect';
-import * as InputLikeText from '../../internal/InputLikeText';
-import * as InternalMenu from '../../internal/InternalMenu';
-import * as MaskedInput from '../../internal/MaskedInput';
-import * as Menu from '../../internal/Menu';
-import * as Popup from '../../internal/Popup';
-import * as MobilePopupDataTid from '../../internal/MobilePopup';
-import * as PopupMenu from '../../internal/PopupMenu';
 
-const allComponents: any = {
-  ...Components,
-  ...Calendar,
-  ...CustomComboBox,
-  ...DateSelect,
-  ...InputLikeText,
-  ...InternalMenu,
-  ...MaskedInput,
-  ...Menu,
-  ...Popup,
-  ...MobilePopupDataTid,
-  ...PopupMenu,
-};
-
-const tids = Object.keys(allComponents).filter((componentName) => {
+const tids = Object.keys(Components).filter((componentName) => {
   if (componentName.match(/datatids/i)) {
     return componentName;
   }
@@ -35,7 +11,7 @@ export const componentsDataTids: { [key: string]: { [key: string]: string } } =
   return {
     ...accum,
     [componentName]: {
-      [currTid]: Object.entries(allComponents[currTid])
+      [currTid]: Object.entries(Components[currTid])
         .map((x) => x.join(': '))
         .join(', \n'),
     },

From d0cc5eebb8d0c1dc47820943c76659e64d567c61 Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Fri, 3 Jun 2022 12:12:17 +0300
Subject: [PATCH 22/40] chore: skip error

---
 packages/react-ui/lib/data-tid/componentsDataTids.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-ui/lib/data-tid/componentsDataTids.ts b/packages/react-ui/lib/data-tid/componentsDataTids.ts
index 737b7802783..e7763ff0db9 100644
--- a/packages/react-ui/lib/data-tid/componentsDataTids.ts
+++ b/packages/react-ui/lib/data-tid/componentsDataTids.ts
@@ -11,6 +11,8 @@ export const componentsDataTids: { [key: string]: { [key: string]: string } } =
   return {
     ...accum,
     [componentName]: {
+      // @ts-ignore
+      // eslint-disable-next-line import/namespace
       [currTid]: Object.entries(Components[currTid])
         .map((x) => x.join(': '))
         .join(', \n'),

From e9f61741b937305321a359fb1bcb1e9bbfebecc2 Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Fri, 3 Jun 2022 12:23:30 +0300
Subject: [PATCH 23/40] chore: mark as deprecated

---
 .../react-ui/components/GlobalLoader/GlobalLoader.tsx     | 5 +++++
 packages/react-ui/components/Modal/Modal.tsx              | 7 +++++++
 .../react-ui/components/PasswordInput/PasswordInput.tsx   | 7 +++++++
 packages/react-ui/components/Toast/Toast.tsx              | 8 ++++++++
 packages/react-ui/internal/Calendar/Calendar.tsx          | 8 ++++++++
 packages/react-ui/internal/Popup/Popup.tsx                | 7 +++++++
 6 files changed, 42 insertions(+)

diff --git a/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx b/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx
index baad3c12689..77d0d8ffab2 100644
--- a/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx
+++ b/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx
@@ -72,6 +72,11 @@ interface DefaultProps {
 }
 export type GlobalLoaderComponentProps = GlobalLoaderProps & DefaultProps;
 
+/**
+ * @deprecated
+ * В следующей мажорной версии будет изменено на
+ * root: 'GlobalLoader__root',
+ */
 export const GlobalLoaderDataTids = {
   root: 'GlobalLoader',
 } as const;
diff --git a/packages/react-ui/components/Modal/Modal.tsx b/packages/react-ui/components/Modal/Modal.tsx
index 4f092a1263a..c350a53b103 100644
--- a/packages/react-ui/components/Modal/Modal.tsx
+++ b/packages/react-ui/components/Modal/Modal.tsx
@@ -70,6 +70,13 @@ export interface ModalState {
   hasPanel: boolean;
 }
 
+/**
+ * @deprecated
+ * В следующей мажорной версии будет изменено на
+ * container: 'Modal__container',
+ * content: 'Modal__content',
+ * close: 'Modal__close',
+ */
 export const ModalDataTids = {
   container: 'modal-container',
   content: 'modal-content',
diff --git a/packages/react-ui/components/PasswordInput/PasswordInput.tsx b/packages/react-ui/components/PasswordInput/PasswordInput.tsx
index f7e4c185321..8497c83f275 100644
--- a/packages/react-ui/components/PasswordInput/PasswordInput.tsx
+++ b/packages/react-ui/components/PasswordInput/PasswordInput.tsx
@@ -24,6 +24,13 @@ export interface PasswordInputState {
   capsLockEnabled?: boolean | null;
 }
 
+/**
+ * @deprecated
+ * В следующей мажорной версии будет изменено на
+ * root: 'PasswordInput__root',
+ * capsLockDetector: 'PasswordInput__capsLockDetector',
+ * eyeIcon: 'PasswordInput__eyeIcon',
+ */
 export const PasswordInputDataTids = {
   root: 'PasswordInput',
   capsLockDetector: 'PasswordInputCapsLockDetector',
diff --git a/packages/react-ui/components/Toast/Toast.tsx b/packages/react-ui/components/Toast/Toast.tsx
index ddb9cd99ef6..2345f08dfc5 100644
--- a/packages/react-ui/components/Toast/Toast.tsx
+++ b/packages/react-ui/components/Toast/Toast.tsx
@@ -27,6 +27,14 @@ export interface ToastProps extends CommonProps {
   onClose?: (notification: string, action?: Action) => void;
 }
 
+/**
+ * @deprecated
+ * В следующей мажорной версии будет изменено на
+ *   toastStatic: 'StaticToast__root',
+ *   toastView: 'ToastView__root',
+ *   action: 'ToastView__action',
+ *   close: 'ToastView__close',
+ */
 export const ToastDataTids = {
   toastStatic: 'StaticToast',
   toastView: 'ToastView__root',
diff --git a/packages/react-ui/internal/Calendar/Calendar.tsx b/packages/react-ui/internal/Calendar/Calendar.tsx
index 2437830368d..0f3933877ee 100644
--- a/packages/react-ui/internal/Calendar/Calendar.tsx
+++ b/packages/react-ui/internal/Calendar/Calendar.tsx
@@ -36,6 +36,14 @@ export interface CalendarState {
   touchStart: number;
 }
 
+/**
+ * @deprecated
+ * В следующей мажорной версии будет изменено на
+ * root: 'Calendar__root',
+ * month: 'MonthView__month',
+ * headerMonth: 'MonthView__headerMonth',
+ * headerYear: 'MonthView__headerYear',
+ */
 export const CalendarDataTids = {
   root: 'Calendar',
   month: 'MonthView__month',
diff --git a/packages/react-ui/internal/Popup/Popup.tsx b/packages/react-ui/internal/Popup/Popup.tsx
index 60f5c49ada5..6f73e0086f3 100644
--- a/packages/react-ui/internal/Popup/Popup.tsx
+++ b/packages/react-ui/internal/Popup/Popup.tsx
@@ -113,6 +113,13 @@ export interface PopupState {
   location: Nullable<PopupLocation>;
 }
 
+/**
+ * @deprecated
+ * В следующей мажорной версии будет изменено на
+ * content: 'Popup__content',
+ * contentInner: 'Popup__contentInner',
+ * popupPin: 'PopupPin__root',
+ */
 export const PopupDataTids = {
   content: 'PopupContent',
   contentInner: 'PopupContentInner',

From 404c8c071cc7ea20969a5cd05e880f53b844ab61 Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Mon, 6 Jun 2022 09:11:01 +0300
Subject: [PATCH 24/40] chore: fix FileUploader tests

---
 .../components/FileUploader/FileUploader.tsx  |  6 ------
 .../FileUploaderFile/FileUploaderFile.tsx     | 19 +++++++++++++------
 .../FileUploaderFileList.tsx                  |  7 +++++--
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/packages/react-ui/components/FileUploader/FileUploader.tsx b/packages/react-ui/components/FileUploader/FileUploader.tsx
index d3873d0379b..d25ade175bc 100644
--- a/packages/react-ui/components/FileUploader/FileUploader.tsx
+++ b/packages/react-ui/components/FileUploader/FileUploader.tsx
@@ -65,12 +65,6 @@ export const FileUploaderDataTids = {
   root: 'FileUploader__root',
   content: 'FileUploader__content',
   link: 'FileUploader__link',
-  file: 'FileUploader__file',
-  fileTooltip: 'FileUploader__fileTooltip',
-  fileName: 'FileUploader__fileName',
-  fileSize: 'FileUploader__fileSize',
-  fileIcon: 'FileUploader__fileIcon',
-  fileList: 'FileUploader__fileList',
 } as const;
 
 const defaultRenderFile = (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => fileNode;
diff --git a/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx b/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx
index 8e320965e17..36e82455127 100644
--- a/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx
+++ b/packages/react-ui/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.tsx
@@ -15,7 +15,6 @@ import { Nullable } from '../../../typings/utility-types';
 import { Hint } from '../../../components/Hint';
 import { Tooltip } from '../../../components/Tooltip';
 import { getDOMRect } from '../../../lib/dom/getDOMRect';
-import { FileUploaderDataTids } from '../../../components/FileUploader';
 
 import { jsStyles } from './FileUploaderFile.styles';
 
@@ -41,6 +40,14 @@ const getTruncatedName = (fileNameWidth: number, fileNameElementWidth: number, n
   return truncate(name, maxCharsCountInSpan);
 };
 
+export const FileUploaderFileDataTids = {
+  file: 'FileUploader__file',
+  fileTooltip: 'FileUploader__fileTooltip',
+  fileName: 'FileUploader__fileName',
+  fileSize: 'FileUploader__fileSize',
+  fileIcon: 'FileUploader__fileIcon',
+} as const;
+
 export const FileUploaderFile = (props: FileUploaderFileProps) => {
   const { file, showSize, error } = props;
   const { id, originalFile, status, validationResult } = file;
@@ -152,27 +159,27 @@ export const FileUploaderFile = (props: FileUploaderFileProps) => {
 
   return (
     <div
-      data-tid={FileUploaderDataTids.file}
+      data-tid={FileUploaderFileDataTids.file}
       className={jsStyles.root()}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
-      <Tooltip data-tid={FileUploaderDataTids.fileTooltip} pos="right middle" render={renderTooltipContent}>
+      <Tooltip data-tid={FileUploaderFileDataTids.fileTooltip} pos="right middle" render={renderTooltipContent}>
         <div className={contentClassNames}>
           <TextWidthHelper ref={textHelperRef} text={name} />
           <Hint maxWidth={'100%'} text={isTruncated ? name : null}>
-            <span data-tid={FileUploaderDataTids.fileName} ref={fileNameElementRef} className={jsStyles.name()}>
+            <span data-tid={FileUploaderFileDataTids.fileName} ref={fileNameElementRef} className={jsStyles.name()}>
               {truncatedFileName}
             </span>
           </Hint>
           {!!showSize && formattedSize && (
-            <span data-tid={FileUploaderDataTids.fileSize} className={jsStyles.size()}>
+            <span data-tid={FileUploaderFileDataTids.fileSize} className={jsStyles.size()}>
               {formattedSize}
             </span>
           )}
           <div
             className={iconClassNames}
-            data-tid={FileUploaderDataTids.fileIcon}
+            data-tid={FileUploaderFileDataTids.fileIcon}
             tabIndex={0}
             onClick={handleRemove}
             onFocus={handleFocus}
diff --git a/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx b/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx
index 747caa64989..a2a652a3f7a 100644
--- a/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx
+++ b/packages/react-ui/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.tsx
@@ -4,7 +4,6 @@ import { FileUploaderControlContext } from '../FileUploaderControlContext';
 import { ThemeContext } from '../../../lib/theming/ThemeContext';
 import { FileUploaderFile } from '../FileUploaderFile/FileUploaderFile';
 import { FileUploaderAttachedFile } from '../fileUtils';
-import { FileUploaderDataTids } from '../../../components/FileUploader';
 
 import { jsStyles } from './FileUploaderFileList.styles';
 
@@ -12,13 +11,17 @@ interface FileUploaderFileListProps {
   renderFile: (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => React.ReactNode;
 }
 
+export const FileUploaderFileDataTids = {
+  fileList: 'FileUploader__fileList',
+} as const;
+
 export const FileUploaderFileList = (props: FileUploaderFileListProps) => {
   const { renderFile } = props;
   const { files } = useContext(FileUploaderControlContext);
   const theme = useContext(ThemeContext);
 
   return (
-    <div data-tid={FileUploaderDataTids.fileList}>
+    <div data-tid={FileUploaderFileDataTids.fileList}>
       {files.map((file) => (
         <div key={file.id} className={jsStyles.fileWrapper(theme)}>
           <div className={jsStyles.file()}>{renderFile(file, <FileUploaderFile file={file} showSize />)}</div>

From 5aee6d0a03159adb2918fe4b22a2d617c1d39403 Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Mon, 6 Jun 2022 09:55:13 +0300
Subject: [PATCH 25/40] chore: small fix

---
 .../internal/DateSelect/DateSelect.tsx        |  2 +-
 .../react-ui/lib/data-tid/DataTids.styles.ts  | 20 -------------------
 packages/react-ui/lib/data-tid/DataTids.tsx   |  1 +
 .../lib/data-tid/componentsDataTids.ts        |  1 +
 4 files changed, 3 insertions(+), 21 deletions(-)

diff --git a/packages/react-ui/internal/DateSelect/DateSelect.tsx b/packages/react-ui/internal/DateSelect/DateSelect.tsx
index 8d82e2e2d4e..2d890e78e83 100644
--- a/packages/react-ui/internal/DateSelect/DateSelect.tsx
+++ b/packages/react-ui/internal/DateSelect/DateSelect.tsx
@@ -61,7 +61,7 @@ const calculatePos = (pos: number, minPos: number, maxPos: number) => {
 export const DateSelectDataTids = {
   caption: 'DateSelect__caption',
   menuItem: 'DateSelect__menuItem',
-};
+} as const;
 
 @locale('DatePicker', DatePickerLocaleHelper)
 export class DateSelect extends React.PureComponent<DateSelectProps, DateSelectState> {
diff --git a/packages/react-ui/lib/data-tid/DataTids.styles.ts b/packages/react-ui/lib/data-tid/DataTids.styles.ts
index fc1737c54c3..8e7ca009f86 100644
--- a/packages/react-ui/lib/data-tid/DataTids.styles.ts
+++ b/packages/react-ui/lib/data-tid/DataTids.styles.ts
@@ -31,24 +31,4 @@ export const styles = memoizeStyle({
       width: 70%;
     `;
   },
-  dataTidContainer() {
-    return css`
-      display: flex;
-      width: 100%;
-    `;
-  },
-  dataTidName() {
-    return css`
-      width: 40%;
-      overflow-wrap: anywhere;
-    `;
-  },
-  dataTidDescription() {
-    return css`
-      width: 60%;
-      background: #dddddd;
-      padding-left: 10px;
-      overflow-wrap: anywhere;
-    `;
-  },
 });
diff --git a/packages/react-ui/lib/data-tid/DataTids.tsx b/packages/react-ui/lib/data-tid/DataTids.tsx
index 0542f7487c6..fa9778b69f6 100644
--- a/packages/react-ui/lib/data-tid/DataTids.tsx
+++ b/packages/react-ui/lib/data-tid/DataTids.tsx
@@ -36,6 +36,7 @@ export class DataTids extends React.Component<{}, { selectedValue: string }> {
           </div>
         );
       }
+      return null;
     });
 
     return (
diff --git a/packages/react-ui/lib/data-tid/componentsDataTids.ts b/packages/react-ui/lib/data-tid/componentsDataTids.ts
index e7763ff0db9..43975702da7 100644
--- a/packages/react-ui/lib/data-tid/componentsDataTids.ts
+++ b/packages/react-ui/lib/data-tid/componentsDataTids.ts
@@ -4,6 +4,7 @@ const tids = Object.keys(Components).filter((componentName) => {
   if (componentName.match(/datatids/i)) {
     return componentName;
   }
+  return null;
 });
 
 export const componentsDataTids: { [key: string]: { [key: string]: string } } = tids.reduce((accum, currTid) => {

From 6f3e0a70b32e593d4e4a6520a01ff734c98ffa5c Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Mon, 6 Jun 2022 11:38:29 +0300
Subject: [PATCH 26/40] chore: small refactor of data-tid table

---
 packages/react-ui-validations/src/ValidationWrapper.tsx | 1 +
 packages/react-ui/lib/data-tid/DataTids.tsx             | 7 +++++--
 packages/react-ui/lib/data-tid/componentsDataTids.ts    | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/react-ui-validations/src/ValidationWrapper.tsx b/packages/react-ui-validations/src/ValidationWrapper.tsx
index ee2695873bf..5087d674fc9 100644
--- a/packages/react-ui-validations/src/ValidationWrapper.tsx
+++ b/packages/react-ui-validations/src/ValidationWrapper.tsx
@@ -29,6 +29,7 @@ export class ValidationWrapper extends React.Component<ValidationWrapperProps> {
 
   public render() {
     const { children, validationInfo, renderMessage } = this.props;
+    console.log(this.props.validationInfo?.type);
     const validation: Nullable<Validation> = validationInfo
       ? {
           level: validationInfo.level || 'error',
diff --git a/packages/react-ui/lib/data-tid/DataTids.tsx b/packages/react-ui/lib/data-tid/DataTids.tsx
index fa9778b69f6..06403f586a7 100644
--- a/packages/react-ui/lib/data-tid/DataTids.tsx
+++ b/packages/react-ui/lib/data-tid/DataTids.tsx
@@ -29,8 +29,11 @@ export class DataTids extends React.Component<{}, { selectedValue: string }> {
             <div className={styles.rightCell()}>
               {Object.values(dataTidList)[0]
                 .split(',')
-                .map((el: string, i: number) => (
-                  <div key={i}>{el}</div>
+                .map((el: string, i: number, array) => (
+                  <div key={i}>
+                    {el}
+                    {i < array.length - 1 ? ',' : ''}
+                  </div>
                 ))}
             </div>
           </div>
diff --git a/packages/react-ui/lib/data-tid/componentsDataTids.ts b/packages/react-ui/lib/data-tid/componentsDataTids.ts
index 43975702da7..6bea537fa25 100644
--- a/packages/react-ui/lib/data-tid/componentsDataTids.ts
+++ b/packages/react-ui/lib/data-tid/componentsDataTids.ts
@@ -15,7 +15,7 @@ export const componentsDataTids: { [key: string]: { [key: string]: string } } =
       // @ts-ignore
       // eslint-disable-next-line import/namespace
       [currTid]: Object.entries(Components[currTid])
-        .map((x) => x.join(': '))
+        .map((x) => `${x[0]}: '${x[1]}'`)
         .join(', \n'),
     },
   };

From 4fea3327cdd87c8538b206a1319079e13f405677 Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Mon, 6 Jun 2022 17:34:15 +0300
Subject: [PATCH 27/40] chore: delete console.log

---
 packages/react-ui-validations/src/ValidationWrapper.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-ui-validations/src/ValidationWrapper.tsx b/packages/react-ui-validations/src/ValidationWrapper.tsx
index 5087d674fc9..ee2695873bf 100644
--- a/packages/react-ui-validations/src/ValidationWrapper.tsx
+++ b/packages/react-ui-validations/src/ValidationWrapper.tsx
@@ -29,7 +29,6 @@ export class ValidationWrapper extends React.Component<ValidationWrapperProps> {
 
   public render() {
     const { children, validationInfo, renderMessage } = this.props;
-    console.log(this.props.validationInfo?.type);
     const validation: Nullable<Validation> = validationInfo
       ? {
           level: validationInfo.level || 'error',

From 462ba9776171d0b9525fbdb7d5d1e32579747201 Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Tue, 7 Jun 2022 08:55:19 +0300
Subject: [PATCH 28/40] chore: add expect-error to ts-ignore

---
 packages/react-ui/lib/data-tid/componentsDataTids.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-ui/lib/data-tid/componentsDataTids.ts b/packages/react-ui/lib/data-tid/componentsDataTids.ts
index 6bea537fa25..8f734475120 100644
--- a/packages/react-ui/lib/data-tid/componentsDataTids.ts
+++ b/packages/react-ui/lib/data-tid/componentsDataTids.ts
@@ -13,6 +13,7 @@ export const componentsDataTids: { [key: string]: { [key: string]: string } } =
     ...accum,
     [componentName]: {
       // @ts-ignore
+      // @ts-expect-error: impossible to add type to Components variable
       // eslint-disable-next-line import/namespace
       [currTid]: Object.entries(Components[currTid])
         .map((x) => `${x[0]}: '${x[1]}'`)

From eea9e83aca17b53b6af5d5450e14850e7b2ee70a Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Tue, 7 Jun 2022 08:56:22 +0300
Subject: [PATCH 29/40] chore: delete empty object

---
 packages/react-ui/internal/Popup/PopupPin.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react-ui/internal/Popup/PopupPin.tsx b/packages/react-ui/internal/Popup/PopupPin.tsx
index 7c6715ed7ee..74e511fcf00 100644
--- a/packages/react-ui/internal/Popup/PopupPin.tsx
+++ b/packages/react-ui/internal/Popup/PopupPin.tsx
@@ -26,8 +26,6 @@ interface Props {
   size: number;
 }
 
-export const PopupPinDataTids = {} as const;
-
 export class PopupPin extends React.Component<Props> {
   public static __KONTUR_REACT_UI__ = 'PopupPin';
 

From d80c2a400ef527897e1603e38f610259b8f637f9 Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Tue, 7 Jun 2022 10:08:21 +0300
Subject: [PATCH 30/40] chore: update styles

---
 .../react-ui/lib/data-tid/DataTids.styles.ts     |  8 +++++++-
 packages/react-ui/lib/data-tid/DataTids.tsx      | 16 ++++++++++------
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/react-ui/lib/data-tid/DataTids.styles.ts b/packages/react-ui/lib/data-tid/DataTids.styles.ts
index 8e7ca009f86..3161b723bf6 100644
--- a/packages/react-ui/lib/data-tid/DataTids.styles.ts
+++ b/packages/react-ui/lib/data-tid/DataTids.styles.ts
@@ -5,12 +5,13 @@ export const styles = memoizeStyle({
     return css`
       display: flex;
       width: 100%;
+      font-size: 16px;
     `;
   },
   headRow() {
     return css`
       margin-top: 20px;
-      font-size: 1.5em;
+      font-size: 1.5rem;
       font-weight: bold;
       border-top: 1px solid #000;
     `;
@@ -31,4 +32,9 @@ export const styles = memoizeStyle({
       width: 70%;
     `;
   },
+  dataTid() {
+    return css`
+      padding-bottom: 2px;
+    `;
+  },
 });
diff --git a/packages/react-ui/lib/data-tid/DataTids.tsx b/packages/react-ui/lib/data-tid/DataTids.tsx
index 06403f586a7..fe1e443157a 100644
--- a/packages/react-ui/lib/data-tid/DataTids.tsx
+++ b/packages/react-ui/lib/data-tid/DataTids.tsx
@@ -29,12 +29,16 @@ export class DataTids extends React.Component<{}, { selectedValue: string }> {
             <div className={styles.rightCell()}>
               {Object.values(dataTidList)[0]
                 .split(',')
-                .map((el: string, i: number, array) => (
-                  <div key={i}>
-                    {el}
-                    {i < array.length - 1 ? ',' : ''}
-                  </div>
-                ))}
+                .map((el: string, i: number, array) => {
+                  const dataTid = el.split(':');
+                  return (
+                    <div key={i} className={styles.dataTid()}>
+                      {<b>{dataTid[0]}: </b>}
+                      {dataTid[1]}
+                      {i < array.length - 1 ? ',' : ''}
+                    </div>
+                  );
+                })}
             </div>
           </div>
         );

From 2a098eee332a872d75468d9f4695afb5b90167af Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Tue, 7 Jun 2022 14:17:03 +0300
Subject: [PATCH 31/40] chore: fix ts error

---
 packages/react-ui/lib/data-tid/componentsDataTids.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/react-ui/lib/data-tid/componentsDataTids.ts b/packages/react-ui/lib/data-tid/componentsDataTids.ts
index 8f734475120..2ea6c07fa71 100644
--- a/packages/react-ui/lib/data-tid/componentsDataTids.ts
+++ b/packages/react-ui/lib/data-tid/componentsDataTids.ts
@@ -12,10 +12,8 @@ export const componentsDataTids: { [key: string]: { [key: string]: string } } =
   return {
     ...accum,
     [componentName]: {
-      // @ts-ignore
-      // @ts-expect-error: impossible to add type to Components variable
       // eslint-disable-next-line import/namespace
-      [currTid]: Object.entries(Components[currTid])
+      [currTid]: Object.entries(Components[currTid as keyof typeof Components])
         .map((x) => `${x[0]}: '${x[1]}'`)
         .join(', \n'),
     },

From 91477a9d59e53fa9c0f296569ac4aba987ff126b Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Wed, 8 Jun 2022 08:31:32 +0300
Subject: [PATCH 32/40] Revert "chore: mark as deprecated"

This reverts commit e9f61741b937305321a359fb1bcb1e9bbfebecc2.
---
 .../react-ui/components/GlobalLoader/GlobalLoader.tsx     | 5 -----
 packages/react-ui/components/Modal/Modal.tsx              | 7 -------
 .../react-ui/components/PasswordInput/PasswordInput.tsx   | 7 -------
 packages/react-ui/components/Toast/Toast.tsx              | 8 --------
 packages/react-ui/internal/Calendar/Calendar.tsx          | 8 --------
 packages/react-ui/internal/Popup/Popup.tsx                | 7 -------
 6 files changed, 42 deletions(-)

diff --git a/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx b/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx
index 436ecad6908..6615dfa1577 100644
--- a/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx
+++ b/packages/react-ui/components/GlobalLoader/GlobalLoader.tsx
@@ -72,11 +72,6 @@ interface DefaultProps {
 }
 export type GlobalLoaderComponentProps = GlobalLoaderProps & DefaultProps;
 
-/**
- * @deprecated
- * В следующей мажорной версии будет изменено на
- * root: 'GlobalLoader__root',
- */
 export const GlobalLoaderDataTids = {
   root: 'GlobalLoader',
 } as const;
diff --git a/packages/react-ui/components/Modal/Modal.tsx b/packages/react-ui/components/Modal/Modal.tsx
index bf5930d458e..62100a091a4 100644
--- a/packages/react-ui/components/Modal/Modal.tsx
+++ b/packages/react-ui/components/Modal/Modal.tsx
@@ -71,13 +71,6 @@ export interface ModalState {
   hasPanel: boolean;
 }
 
-/**
- * @deprecated
- * В следующей мажорной версии будет изменено на
- * container: 'Modal__container',
- * content: 'Modal__content',
- * close: 'Modal__close',
- */
 export const ModalDataTids = {
   container: 'modal-container',
   content: 'modal-content',
diff --git a/packages/react-ui/components/PasswordInput/PasswordInput.tsx b/packages/react-ui/components/PasswordInput/PasswordInput.tsx
index c57abb899e0..74071a7f2b6 100644
--- a/packages/react-ui/components/PasswordInput/PasswordInput.tsx
+++ b/packages/react-ui/components/PasswordInput/PasswordInput.tsx
@@ -25,13 +25,6 @@ export interface PasswordInputState {
   capsLockEnabled?: boolean | null;
 }
 
-/**
- * @deprecated
- * В следующей мажорной версии будет изменено на
- * root: 'PasswordInput__root',
- * capsLockDetector: 'PasswordInput__capsLockDetector',
- * eyeIcon: 'PasswordInput__eyeIcon',
- */
 export const PasswordInputDataTids = {
   root: 'PasswordInput',
   capsLockDetector: 'PasswordInputCapsLockDetector',
diff --git a/packages/react-ui/components/Toast/Toast.tsx b/packages/react-ui/components/Toast/Toast.tsx
index 2345f08dfc5..ddb9cd99ef6 100644
--- a/packages/react-ui/components/Toast/Toast.tsx
+++ b/packages/react-ui/components/Toast/Toast.tsx
@@ -27,14 +27,6 @@ export interface ToastProps extends CommonProps {
   onClose?: (notification: string, action?: Action) => void;
 }
 
-/**
- * @deprecated
- * В следующей мажорной версии будет изменено на
- *   toastStatic: 'StaticToast__root',
- *   toastView: 'ToastView__root',
- *   action: 'ToastView__action',
- *   close: 'ToastView__close',
- */
 export const ToastDataTids = {
   toastStatic: 'StaticToast',
   toastView: 'ToastView__root',
diff --git a/packages/react-ui/internal/Calendar/Calendar.tsx b/packages/react-ui/internal/Calendar/Calendar.tsx
index a722ef40f03..04bc4ac6e5e 100644
--- a/packages/react-ui/internal/Calendar/Calendar.tsx
+++ b/packages/react-ui/internal/Calendar/Calendar.tsx
@@ -36,14 +36,6 @@ export interface CalendarState {
   touchStart: number;
 }
 
-/**
- * @deprecated
- * В следующей мажорной версии будет изменено на
- * root: 'Calendar__root',
- * month: 'MonthView__month',
- * headerMonth: 'MonthView__headerMonth',
- * headerYear: 'MonthView__headerYear',
- */
 export const CalendarDataTids = {
   root: 'Calendar',
   month: 'MonthView__month',
diff --git a/packages/react-ui/internal/Popup/Popup.tsx b/packages/react-ui/internal/Popup/Popup.tsx
index 272bd32bf9b..c5104b98c16 100644
--- a/packages/react-ui/internal/Popup/Popup.tsx
+++ b/packages/react-ui/internal/Popup/Popup.tsx
@@ -113,13 +113,6 @@ export interface PopupState {
   location: Nullable<PopupLocation>;
 }
 
-/**
- * @deprecated
- * В следующей мажорной версии будет изменено на
- * content: 'Popup__content',
- * contentInner: 'Popup__contentInner',
- * popupPin: 'PopupPin__root',
- */
 export const PopupDataTids = {
   content: 'PopupContent',
   contentInner: 'PopupContentInner',

From 8fed45adee2e85a5787b8642e1eadde9f27623aa Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Wed, 8 Jun 2022 09:19:53 +0300
Subject: [PATCH 33/40] chore: move data-tids to internal folder

---
 packages/react-ui/.styleguide/helpers.js                        | 2 +-
 packages/react-ui/{ => internal/DataTids}/DATATIDS.md           | 2 +-
 .../{lib/data-tid => internal/DataTids}/DataTids.styles.ts      | 2 +-
 .../react-ui/{lib/data-tid => internal/DataTids}/DataTids.tsx   | 2 +-
 .../{lib/data-tid => internal/DataTids}/componentsDataTids.ts   | 0
 5 files changed, 4 insertions(+), 4 deletions(-)
 rename packages/react-ui/{ => internal/DataTids}/DATATIDS.md (89%)
 rename packages/react-ui/{lib/data-tid => internal/DataTids}/DataTids.styles.ts (91%)
 rename packages/react-ui/{lib/data-tid => internal/DataTids}/DataTids.tsx (97%)
 rename packages/react-ui/{lib/data-tid => internal/DataTids}/componentsDataTids.ts (100%)

diff --git a/packages/react-ui/.styleguide/helpers.js b/packages/react-ui/.styleguide/helpers.js
index 7e846d7ead9..3e588c60e8c 100644
--- a/packages/react-ui/.styleguide/helpers.js
+++ b/packages/react-ui/.styleguide/helpers.js
@@ -82,7 +82,7 @@ const getCommonSections = () => {
     { name: 'Roadmap', content: path.join(__dirname, '../ROADMAP.md') },
     { name: 'Migration', content: path.join(__dirname, '../MIGRATION.md'), exampleMode: 'expand' },
     { name: 'LocaleContext', content: path.join(__dirname, '../lib/locale/LOCALECONTEXT.md') },
-    { name: 'DataTids', content: path.join(__dirname, '../DATATIDS.md') },
+    { name: 'DataTids', content: path.join(__dirname, '../internal/DataTids/DATATIDS.md') },
     { name: 'SSR', content: path.join(__dirname, '../SSR.md') },
     { name: 'Mobiles', content: path.join(__dirname, '../MOBILES.md') },
     { name: 'Accessibility', content: path.join(__dirname, '../../../accessibility.md') },
diff --git a/packages/react-ui/DATATIDS.md b/packages/react-ui/internal/DataTids/DATATIDS.md
similarity index 89%
rename from packages/react-ui/DATATIDS.md
rename to packages/react-ui/internal/DataTids/DATATIDS.md
index 99e7f4e0394..9a5c9188f9d 100644
--- a/packages/react-ui/DATATIDS.md
+++ b/packages/react-ui/internal/DataTids/DATATIDS.md
@@ -6,7 +6,7 @@
 Список экспортируемых data-tid:
 
 ```jsx harmony
-import {DataTids} from '../react-ui/lib/data-tid/DataTids';
+import {DataTids} from './DataTids';
 
 <DataTids/>
 ```
diff --git a/packages/react-ui/lib/data-tid/DataTids.styles.ts b/packages/react-ui/internal/DataTids/DataTids.styles.ts
similarity index 91%
rename from packages/react-ui/lib/data-tid/DataTids.styles.ts
rename to packages/react-ui/internal/DataTids/DataTids.styles.ts
index 3161b723bf6..71e4151de3e 100644
--- a/packages/react-ui/lib/data-tid/DataTids.styles.ts
+++ b/packages/react-ui/internal/DataTids/DataTids.styles.ts
@@ -1,4 +1,4 @@
-import { css, memoizeStyle } from '../theming/Emotion';
+import { css, memoizeStyle } from '../../lib/theming/Emotion';
 
 export const styles = memoizeStyle({
   row() {
diff --git a/packages/react-ui/lib/data-tid/DataTids.tsx b/packages/react-ui/internal/DataTids/DataTids.tsx
similarity index 97%
rename from packages/react-ui/lib/data-tid/DataTids.tsx
rename to packages/react-ui/internal/DataTids/DataTids.tsx
index fe1e443157a..ebc35bebc71 100644
--- a/packages/react-ui/lib/data-tid/DataTids.tsx
+++ b/packages/react-ui/internal/DataTids/DataTids.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Select } from '../../components/Select';
-import { cx } from '../theming/Emotion';
+import { cx } from '../../lib/theming/Emotion';
 
 import { styles } from './DataTids.styles';
 import { componentsDataTids } from './componentsDataTids';
diff --git a/packages/react-ui/lib/data-tid/componentsDataTids.ts b/packages/react-ui/internal/DataTids/componentsDataTids.ts
similarity index 100%
rename from packages/react-ui/lib/data-tid/componentsDataTids.ts
rename to packages/react-ui/internal/DataTids/componentsDataTids.ts

From b67e0300f11c0de344fd71d319e89d490785023d Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Wed, 8 Jun 2022 11:07:35 +0300
Subject: [PATCH 34/40] chore: delete search

---
 .../react-ui/internal/DataTids/DataTids.tsx   | 70 ++++++-------------
 1 file changed, 23 insertions(+), 47 deletions(-)

diff --git a/packages/react-ui/internal/DataTids/DataTids.tsx b/packages/react-ui/internal/DataTids/DataTids.tsx
index ebc35bebc71..09468316009 100644
--- a/packages/react-ui/internal/DataTids/DataTids.tsx
+++ b/packages/react-ui/internal/DataTids/DataTids.tsx
@@ -1,60 +1,36 @@
 import React from 'react';
 
-import { Select } from '../../components/Select';
-import { cx } from '../../lib/theming/Emotion';
-
 import { styles } from './DataTids.styles';
 import { componentsDataTids } from './componentsDataTids';
 
-export class DataTids extends React.Component<{}, { selectedValue: string }> {
-  public state = {
-    selectedValue: 'все',
-  };
-
+export class DataTids extends React.Component {
   private components = Object.keys(componentsDataTids);
 
-  private items = ['все', ...this.components];
-
-  private setValue = (value: string) => {
-    this.setState({ selectedValue: value });
-  };
-
   public render() {
-    const list = this.components.map((componentName: string, index: number) => {
-      if (componentName === this.state.selectedValue || this.state.selectedValue === 'все') {
-        const dataTidList = componentsDataTids[componentName];
-        return (
-          <div key={index} className={styles.row()}>
-            <div className={styles.leftCell()}>{Object.keys(dataTidList)}:</div>
-            <div className={styles.rightCell()}>
-              {Object.values(dataTidList)[0]
-                .split(',')
-                .map((el: string, i: number, array) => {
-                  const dataTid = el.split(':');
-                  return (
-                    <div key={i} className={styles.dataTid()}>
-                      {<b>{dataTid[0]}: </b>}
-                      {dataTid[1]}
-                      {i < array.length - 1 ? ',' : ''}
-                    </div>
-                  );
-                })}
-            </div>
-          </div>
-        );
-      }
-      return null;
-    });
-
     return (
       <div>
-        Выбрать компонент:
-        <Select<string> items={this.items} value={this.state.selectedValue} onValueChange={this.setValue} search />
-        <div className={cx(styles.row(), styles.headRow())}>
-          <div className={styles.leftCell()}>VariableName</div>
-          <div className={styles.rightCell()}>Value</div>
-        </div>
-        {list}
+        {this.components.map((componentName: string, index: number) => {
+          const dataTidList = componentsDataTids[componentName];
+          return (
+            <div key={index} className={styles.row()}>
+              <div className={styles.leftCell()}>{Object.keys(dataTidList)}:</div>
+              <div className={styles.rightCell()}>
+                {Object.values(dataTidList)[0]
+                  .split(',')
+                  .map((el: string, i: number, array) => {
+                    const dataTid = el.split(':');
+                    return (
+                      <div key={i} className={styles.dataTid()}>
+                        {<b>{dataTid[0]}: </b>}
+                        {dataTid[1]}
+                        {i < array.length - 1 ? ',' : ''}
+                      </div>
+                    );
+                  })}
+              </div>
+            </div>
+          );
+        })}
       </div>
     );
   }

From 929023a2a960355f19d5411a4fc6c81b7e6b4fad Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Wed, 8 Jun 2022 11:51:19 +0300
Subject: [PATCH 35/40] chore: update table style

---
 .../internal/DataTids/DataTids.styles.ts      | 34 ++++++++++---------
 .../react-ui/internal/DataTids/DataTids.tsx   | 29 +++++++---------
 2 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/packages/react-ui/internal/DataTids/DataTids.styles.ts b/packages/react-ui/internal/DataTids/DataTids.styles.ts
index 71e4151de3e..36679ce8180 100644
--- a/packages/react-ui/internal/DataTids/DataTids.styles.ts
+++ b/packages/react-ui/internal/DataTids/DataTids.styles.ts
@@ -1,6 +1,20 @@
 import { css, memoizeStyle } from '../../lib/theming/Emotion';
 
 export const styles = memoizeStyle({
+  wrapper() {
+    return css`
+      &:not(:first-child) {
+        margin-top: 20px;
+      }
+    `;
+  },
+  componentName() {
+    return css`
+      font-weight: 700;
+      font-size: 1.25em;
+      margin: 0 5px 5px;
+    `;
+  },
   row() {
     return css`
       display: flex;
@@ -8,19 +22,12 @@ export const styles = memoizeStyle({
       font-size: 16px;
     `;
   },
-  headRow() {
-    return css`
-      margin-top: 20px;
-      font-size: 1.5rem;
-      font-weight: bold;
-      border-top: 1px solid #000;
-    `;
-  },
+
   leftCell() {
     return css`
       padding: 5px;
-      border-right: 1px solid #000;
-      border-bottom: 1px solid #000;
+      border-right: 1px solid #dadada;
+      border-bottom: 1px solid #dadada;
       width: 30%;
       overflow-wrap: anywhere;
     `;
@@ -28,13 +35,8 @@ export const styles = memoizeStyle({
   rightCell() {
     return css`
       padding: 5px;
-      border-bottom: 1px solid #000;
+      border-bottom: 1px solid #dadada;
       width: 70%;
     `;
   },
-  dataTid() {
-    return css`
-      padding-bottom: 2px;
-    `;
-  },
 });
diff --git a/packages/react-ui/internal/DataTids/DataTids.tsx b/packages/react-ui/internal/DataTids/DataTids.tsx
index 09468316009..eef2a4c3bdb 100644
--- a/packages/react-ui/internal/DataTids/DataTids.tsx
+++ b/packages/react-ui/internal/DataTids/DataTids.tsx
@@ -12,22 +12,19 @@ export class DataTids extends React.Component {
         {this.components.map((componentName: string, index: number) => {
           const dataTidList = componentsDataTids[componentName];
           return (
-            <div key={index} className={styles.row()}>
-              <div className={styles.leftCell()}>{Object.keys(dataTidList)}:</div>
-              <div className={styles.rightCell()}>
-                {Object.values(dataTidList)[0]
-                  .split(',')
-                  .map((el: string, i: number, array) => {
-                    const dataTid = el.split(':');
-                    return (
-                      <div key={i} className={styles.dataTid()}>
-                        {<b>{dataTid[0]}: </b>}
-                        {dataTid[1]}
-                        {i < array.length - 1 ? ',' : ''}
-                      </div>
-                    );
-                  })}
-              </div>
+            <div key={index} className={styles.wrapper()}>
+              <div className={styles.componentName()}>{Object.keys(dataTidList)}</div>
+              {Object.values(dataTidList)[0]
+                .split(',')
+                .map((el: string, i: number) => {
+                  const dataTid = el.split(':');
+                  return (
+                    <div key={i} className={styles.row()}>
+                      <div className={styles.leftCell()}>{dataTid[0]}</div>
+                      <div className={styles.rightCell()}>{dataTid[1]}</div>
+                    </div>
+                  );
+                })}
             </div>
           );
         })}

From 112b78c193378c39ea1850bf6ecbcf170ffee5fe Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Wed, 8 Jun 2022 12:23:43 +0300
Subject: [PATCH 36/40] chore: update table style 2

---
 packages/react-ui/internal/DataTids/DataTids.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-ui/internal/DataTids/DataTids.tsx b/packages/react-ui/internal/DataTids/DataTids.tsx
index eef2a4c3bdb..a68b14a9bd7 100644
--- a/packages/react-ui/internal/DataTids/DataTids.tsx
+++ b/packages/react-ui/internal/DataTids/DataTids.tsx
@@ -13,14 +13,14 @@ export class DataTids extends React.Component {
           const dataTidList = componentsDataTids[componentName];
           return (
             <div key={index} className={styles.wrapper()}>
-              <div className={styles.componentName()}>{Object.keys(dataTidList)}</div>
+              <div className={styles.componentName()}>{componentName}</div>
               {Object.values(dataTidList)[0]
                 .split(',')
                 .map((el: string, i: number) => {
                   const dataTid = el.split(':');
                   return (
                     <div key={i} className={styles.row()}>
-                      <div className={styles.leftCell()}>{dataTid[0]}</div>
+                      <div className={styles.leftCell()}>{`${Object.keys(dataTidList)}.${dataTid[0]}`}</div>
                       <div className={styles.rightCell()}>{dataTid[1]}</div>
                     </div>
                   );

From a2a4555b38cc00236b30d51bda2d4b747871561f Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Thu, 9 Jun 2022 09:01:34 +0300
Subject: [PATCH 37/40] chore: fix typo

---
 packages/react-ui/components/DatePicker/DatePicker.tsx | 4 ++--
 packages/react-ui/components/DatePicker/Picker.tsx     | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-ui/components/DatePicker/DatePicker.tsx b/packages/react-ui/components/DatePicker/DatePicker.tsx
index 26ffcfb2582..93697d2a08f 100644
--- a/packages/react-ui/components/DatePicker/DatePicker.tsx
+++ b/packages/react-ui/components/DatePicker/DatePicker.tsx
@@ -85,7 +85,7 @@ export interface DatePickerState {
 
 type DatePickerValue = string;
 
-export const DataPickerDataTids = {
+export const DatePickerDataTids = {
   root: 'DatePicker__root',
   pickerRoot: 'Picker__root',
   pickerTodayWrapper: 'Picker__todayWrapper',
@@ -257,7 +257,7 @@ export class DatePicker extends React.PureComponent<DatePickerProps<DatePickerVa
     if (this.state.opened) {
       picker = (
         <DropdownContainer
-          data-tid={DataPickerDataTids.root}
+          data-tid={DatePickerDataTids.root}
           getParent={this.getParent}
           offsetY={2}
           align={this.props.menuAlign}
diff --git a/packages/react-ui/components/DatePicker/Picker.tsx b/packages/react-ui/components/DatePicker/Picker.tsx
index 989367f9b98..1f214ac1437 100644
--- a/packages/react-ui/components/DatePicker/Picker.tsx
+++ b/packages/react-ui/components/DatePicker/Picker.tsx
@@ -11,7 +11,7 @@ import { ThemeContext } from '../../lib/theming/ThemeContext';
 
 import { styles } from './Picker.styles';
 import { DatePickerLocale, DatePickerLocaleHelper } from './locale';
-import { DataPickerDataTids } from './DatePicker';
+import { DatePickerDataTids } from './DatePicker';
 
 interface Props {
   maxDate?: CalendarDateShape;
@@ -77,7 +77,7 @@ export class Picker extends React.Component<Props, State> {
 
     return (
       <div
-        data-tid={DataPickerDataTids.pickerRoot}
+        data-tid={DatePickerDataTids.pickerRoot}
         className={styles.root(this.theme)}
         onMouseDown={(e) => e.preventDefault()}
       >
@@ -107,7 +107,7 @@ export class Picker extends React.Component<Props, State> {
     const today = new InternalDate({ order, separator }).setComponents(InternalDateGetter.getTodayComponents());
     return (
       <button
-        data-tid={DataPickerDataTids.pickerTodayWrapper}
+        data-tid={DatePickerDataTids.pickerTodayWrapper}
         className={styles.todayWrapper(this.theme)}
         onClick={this.handleSelectToday(today)}
         tabIndex={-1}

From 568d9d3ae5ddd208e2a464908b9d050a47dc8a49 Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Thu, 9 Jun 2022 09:08:33 +0300
Subject: [PATCH 38/40] chore: return search

---
 .../react-ui/internal/DataTids/DataTids.tsx   | 59 ++++++++++++-------
 1 file changed, 39 insertions(+), 20 deletions(-)

diff --git a/packages/react-ui/internal/DataTids/DataTids.tsx b/packages/react-ui/internal/DataTids/DataTids.tsx
index a68b14a9bd7..d48eab4e15a 100644
--- a/packages/react-ui/internal/DataTids/DataTids.tsx
+++ b/packages/react-ui/internal/DataTids/DataTids.tsx
@@ -1,33 +1,52 @@
 import React from 'react';
 
+import { Select } from '../../components/Select';
+
 import { styles } from './DataTids.styles';
 import { componentsDataTids } from './componentsDataTids';
 
-export class DataTids extends React.Component {
+export class DataTids extends React.Component<{}, { selectedValue: string }> {
+  public state = {
+    selectedValue: 'все',
+  };
+
   private components = Object.keys(componentsDataTids);
 
+  private items = ['все', ...this.components];
+
+  private setValue = (value: string) => {
+    this.setState({ selectedValue: value });
+  };
+
   public render() {
+    const list = this.components.map((componentName: string, index: number) => {
+      if (componentName === this.state.selectedValue || this.state.selectedValue === 'все') {
+        const dataTidList = componentsDataTids[componentName];
+        return (
+          <div key={index} className={styles.wrapper()}>
+            <div className={styles.componentName()}>{componentName}</div>
+            {Object.values(dataTidList)[0]
+              .split(',')
+              .map((el: string, i: number) => {
+                const dataTid = el.split(':');
+                return (
+                  <div key={i} className={styles.row()}>
+                    <div className={styles.leftCell()}>{`${Object.keys(dataTidList)}.${dataTid[0]}`}</div>
+                    <div className={styles.rightCell()}>{dataTid[1]}</div>
+                  </div>
+                );
+              })}
+          </div>
+        );
+      }
+      return null;
+    });
+
     return (
       <div>
-        {this.components.map((componentName: string, index: number) => {
-          const dataTidList = componentsDataTids[componentName];
-          return (
-            <div key={index} className={styles.wrapper()}>
-              <div className={styles.componentName()}>{componentName}</div>
-              {Object.values(dataTidList)[0]
-                .split(',')
-                .map((el: string, i: number) => {
-                  const dataTid = el.split(':');
-                  return (
-                    <div key={i} className={styles.row()}>
-                      <div className={styles.leftCell()}>{`${Object.keys(dataTidList)}.${dataTid[0]}`}</div>
-                      <div className={styles.rightCell()}>{dataTid[1]}</div>
-                    </div>
-                  );
-                })}
-            </div>
-          );
-        })}
+        Выбрать компонент:
+        <Select<string> items={this.items} value={this.state.selectedValue} onValueChange={this.setValue} search />
+        {list}
       </div>
     );
   }

From 69a6fa606fd7e224ff21b39ddc3c50b729c4979e Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Wed, 15 Jun 2022 15:18:49 +0300
Subject: [PATCH 39/40] chore: fix review

---
 .../react-ui/internal/DataTids/DataTids.tsx   | 42 ++++++++-----------
 .../internal/DataTids/componentsDataTids.ts   |  9 +---
 2 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/packages/react-ui/internal/DataTids/DataTids.tsx b/packages/react-ui/internal/DataTids/DataTids.tsx
index d48eab4e15a..b9d7179208f 100644
--- a/packages/react-ui/internal/DataTids/DataTids.tsx
+++ b/packages/react-ui/internal/DataTids/DataTids.tsx
@@ -19,34 +19,28 @@ export class DataTids extends React.Component<{}, { selectedValue: string }> {
   };
 
   public render() {
-    const list = this.components.map((componentName: string, index: number) => {
-      if (componentName === this.state.selectedValue || this.state.selectedValue === 'все') {
-        const dataTidList = componentsDataTids[componentName];
-        return (
-          <div key={index} className={styles.wrapper()}>
-            <div className={styles.componentName()}>{componentName}</div>
-            {Object.values(dataTidList)[0]
-              .split(',')
-              .map((el: string, i: number) => {
-                const dataTid = el.split(':');
-                return (
-                  <div key={i} className={styles.row()}>
-                    <div className={styles.leftCell()}>{`${Object.keys(dataTidList)}.${dataTid[0]}`}</div>
-                    <div className={styles.rightCell()}>{dataTid[1]}</div>
-                  </div>
-                );
-              })}
-          </div>
-        );
-      }
-      return null;
-    });
-
     return (
       <div>
         Выбрать компонент:
         <Select<string> items={this.items} value={this.state.selectedValue} onValueChange={this.setValue} search />
-        {list}
+        {Object.entries(componentsDataTids).map(([componentName, dataTids], index) => {
+          if (componentName === this.state.selectedValue || this.state.selectedValue === 'все') {
+            return (
+              <div key={index} className={styles.wrapper()}>
+                <div className={styles.componentName()}>{componentName}</div>
+                {Object.values(dataTids).map((value, i) => {
+                  return (
+                    <div key={i} className={styles.row()}>
+                      <div className={styles.leftCell()}>{`${componentName}DataTids.${value[0]}`}</div>
+                      <div className={styles.rightCell()}>{`'${value[1]}'`}</div>
+                    </div>
+                  );
+                })}
+              </div>
+            );
+          }
+          return null;
+        })}
       </div>
     );
   }
diff --git a/packages/react-ui/internal/DataTids/componentsDataTids.ts b/packages/react-ui/internal/DataTids/componentsDataTids.ts
index 2ea6c07fa71..b93eb365925 100644
--- a/packages/react-ui/internal/DataTids/componentsDataTids.ts
+++ b/packages/react-ui/internal/DataTids/componentsDataTids.ts
@@ -8,14 +8,9 @@ const tids = Object.keys(Components).filter((componentName) => {
 });
 
 export const componentsDataTids: { [key: string]: { [key: string]: string } } = tids.reduce((accum, currTid) => {
-  const componentName = currTid.replace('DataTids', '');
   return {
     ...accum,
-    [componentName]: {
-      // eslint-disable-next-line import/namespace
-      [currTid]: Object.entries(Components[currTid as keyof typeof Components])
-        .map((x) => `${x[0]}: '${x[1]}'`)
-        .join(', \n'),
-    },
+    // eslint-disable-next-line import/namespace
+    [currTid.replace('DataTids', '')]: Object.entries(Components[currTid as keyof typeof Components]),
   };
 }, {});

From 4144ee1494edad5bd5b9ee5a07a7ab977931a55e Mon Sep 17 00:00:00 2001
From: HelenaIsh <ishmatova@skbkontur.ru>
Date: Mon, 27 Jun 2022 14:51:46 +0300
Subject: [PATCH 40/40] chore: fix typo

---
 packages/react-ui/internal/PopupMenu/PopupMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-ui/internal/PopupMenu/PopupMenu.tsx b/packages/react-ui/internal/PopupMenu/PopupMenu.tsx
index e95adc41198..03004078402 100644
--- a/packages/react-ui/internal/PopupMenu/PopupMenu.tsx
+++ b/packages/react-ui/internal/PopupMenu/PopupMenu.tsx
@@ -72,7 +72,7 @@ export const PopupMenuType = {
 };
 
 export const PopupMenuDataTids = {
-  root: 'PopupMenu_root',
+  root: 'PopupMenu__root',
   caption: 'PopupMenu__caption',
 } as const;