feat: pull up OuterAdditionalContent

src/components/controls/TextArea/TextArea.scss

@@ -48,31 +48,6 @@ $block: '.#{variables.$ns-new}text-area';
         }
     }
 
-    &__outer-additional-content {
-        display: flex;
-        justify-content: space-between;
-        vertical-align: top;
-    }
-
-    &__note {
-        margin-left: auto;
-    }
-
-    &__error {
-        @include mixins.text-body-1();
-
-        color: var(--g-color-text-danger);
-
-        &:not(:last-child) {
-            margin-right: var(--g-spacing-2);
-        }
-    }
-
-    &__note,
-    &__error {
-        margin-top: 2px;
-    }
-
     &__clear {
         position: absolute;
         right: 1px;

src/components/controls/TextArea/TextArea.tsx

@@ -4,6 +4,7 @@ import {blockNew} from '../../utils/cn';
 import {useForkRef} from '../../utils/useForkRef';
 import {useUniqId} from '../../utils/useUniqId';
 import {ClearButton, mapTextInputSizeToButtonSize} from '../common';
+import {OuterAdditionalContent} from '../common/OuterAdditionalContent/OuterAdditionalContent';
 import type {
     BaseInputControlProps,
     InputControlPin,
@@ -159,12 +160,12 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(functio
                     />
                 )}
             </span>
-            {(isErrorMsgVisible || note) && (
-                <div className={b('outer-additional-content')}>
-                    {isErrorMsgVisible && <div className={b('error')}>{error}</div>}
-                    {note && <div className={b('note')}>{note}</div>}
-                </div>
-            )}
+            <OuterAdditionalContent
+                note={note}
+                error={error}
+                isVisible={isErrorMsgVisible}
+                controlId={id}
+            />
         </span>
     );
 });

src/components/controls/TextInput/TextInput.scss

@@ -91,31 +91,6 @@ $block: '.#{variables.$ns}text-input';
         flex-shrink: 0;
     }
 
-    &__outer-additional-content {
-        display: flex;
-        justify-content: space-between;
-        vertical-align: top;
-    }
-
-    &__note {
-        margin-left: auto;
-    }
-
-    &__error {
-        @include mixins.text-body-1();
-
-        color: var(--g-color-text-danger);
-
-        &:not(:last-child) {
-            margin-right: var(--g-spacing-2);
-        }
-    }
-
-    &__note,
-    &__error {
-        margin-top: 2px;
-    }
-
     &__additional-content {
         display: flex;
         align-items: center;

src/components/controls/TextInput/TextInput.tsx

@@ -5,18 +5,14 @@ import {useElementSize} from '../../utils/useElementSize';
 import {useForkRef} from '../../utils/useForkRef';
 import {useUniqId} from '../../utils/useUniqId';
 import {ClearButton, mapTextInputSizeToButtonSize} from '../common';
+import {OuterAdditionalContent} from '../common/OuterAdditionalContent/OuterAdditionalContent';
 import type {
     BaseInputControlProps,
     InputControlPin,
     InputControlSize,
     InputControlView,
 } from '../types';
-import {
-    getControlErrorTextId,
-    getControlNoteId,
-    getInputControlState,
-    prepareAutoComplete,
-} from '../utils';
+import {getInputControlState, prepareAutoComplete} from '../utils';
 
 import {AdditionalContent} from './AdditionalContent';
 import {TextInputControl} from './TextInputControl';
@@ -214,20 +210,12 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
                     </AdditionalContent>
                 )}
             </span>
-            {(isErrorMsgVisible || note) && (
-                <div className={b('outer-additional-content')}>
-                    {isErrorMsgVisible && (
-                        <div className={b('error')} id={getControlErrorTextId(id)}>
-                            {error}
-                        </div>
-                    )}
-                    {note && (
-                        <div className={b('note')} id={getControlNoteId(id)}>
-                            {note}
-                        </div>
-                    )}
-                </div>
-            )}
+            <OuterAdditionalContent
+                note={note}
+                error={error}
+                isVisible={isErrorMsgVisible}
+                controlId={id}
+            />
         </span>
     );
 });

src/components/controls/common/OuterAdditionalContent/OuterAdditionalContent.scss

@@ -0,0 +1,29 @@
+@use '../../../../../styles/mixins';
+@use '../../../variables';
+
+$block: '.#{variables.$ns}outer-additional-content';
+
+#{$block} {
+    display: flex;
+    justify-content: space-between;
+    vertical-align: top;
+
+    &__note,
+    &__error {
+        margin-top: 2px;
+    }
+
+    &__error {
+        @include mixins.text-body-1();
+
+        color: var(--g-color-text-danger);
+
+        &:not(:last-child) {
+            margin-right: var(--g-spacing-2);
+        }
+    }
+
+    &__note {
+        margin-left: auto;
+    }
+}

src/components/controls/common/OuterAdditionalContent/OuterAdditionalContent.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import {block} from '../../../utils/cn';
+import {getControlErrorTextId, getControlNoteId} from '../../utils';
+
+import './OuterAdditionalContent.scss';
+
+const b = block('outer-additional-content');
+
+interface OuterAdditionalContentProps {
+    isVisible?: boolean;
+    note?: React.ReactNode;
+    error?: React.ReactNode;
+    controlId?: string;
+}
+
+export const OuterAdditionalContent = ({
+    error,
+    isVisible,
+    note,
+    controlId,
+}: OuterAdditionalContentProps) => {
+    return isVisible || note ? (
+        <div className={b()}>
+            {isVisible && (
+                <div className={b('error')} id={getControlErrorTextId(controlId)}>
+                    {error}
+                </div>
+            )}
+            {note && (
+                <div className={b('note')} id={getControlNoteId(controlId)}>
+                    {note}
+                </div>
+            )}
+        </div>
+    ) : null;
+};