From 1c95f75c12288c0b866b816045eef901bb5ad34b Mon Sep 17 00:00:00 2001
From: Olga Polikashina <polikashina@yandex-team.ru>
Date: Thu, 22 Aug 2024 12:42:16 +0300
Subject: [PATCH] feat(TextInput, TextArea): add `readOnly` property (#1747)

---
 src/components/controls/TextArea/README.md    |  1 +
 src/components/controls/TextArea/TextArea.tsx | 11 +++++----
 .../controls/TextArea/TextAreaControl.tsx     |  2 ++
 .../TextArea/__stories__/TextAreaShowcase.tsx | 21 ++++++++++++++++
 src/components/controls/TextInput/README.md   |  3 ++-
 .../controls/TextInput/TextInput.tsx          | 21 +++++++++-------
 .../controls/TextInput/TextInputControl.tsx   |  2 ++
 .../TextInputCustomThemeShowcase.tsx          | 12 ++++++++++
 .../__stories__/TextInputShowcase.tsx         | 24 +++++++++++++++++++
 src/components/controls/types.ts              |  2 ++
 10 files changed, 85 insertions(+), 14 deletions(-)

diff --git a/src/components/controls/TextArea/README.md b/src/components/controls/TextArea/README.md
index 7de9b89a05..f67f008172 100644
--- a/src/components/controls/TextArea/README.md
+++ b/src/components/controls/TextArea/README.md
@@ -239,6 +239,7 @@ LANDING_BLOCK-->
 | pin             | The control's border view                                                                                                         |                      `string`                       | `"round-round"` |
 | placeholder     | Text that appears in the control when no value is set                                                                             |                      `string`                       |                 |
 | qa              | Test id attribute (`data-qa`)                                                                                                     |                      `string`                       |                 |
+| readOnly        | Indicates that the user cannot change control's value                                                                             |                      `boolean`                      |     `false`     |
 | rows            | The number of visible text lines for the control. If unspecified, the hight will be calculated automatically based on the content |                      `number`                       |                 |
 | size            | The control's size                                                                                                                |              `"s"` `"m"` `"l"` `"xl"`               |      `"m"`      |
 | tabIndex        | The control's `tabindex` attribute                                                                                                |                      `string`                       |                 |
diff --git a/src/components/controls/TextArea/TextArea.tsx b/src/components/controls/TextArea/TextArea.tsx
index ae86d559a5..e1e1bdf809 100644
--- a/src/components/controls/TextArea/TextArea.tsx
+++ b/src/components/controls/TextArea/TextArea.tsx
@@ -47,13 +47,14 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(
             name,
             value,
             defaultValue,
-            disabled = false,
+            disabled: disabledProp,
+            readOnly: readOnlyProp,
             hasClear = false,
             error,
             errorMessage: errorMessageProp,
             validationState: validationStateProp,
             autoComplete,
-            id: originalId,
+            id: idProp,
             tabIndex,
             style,
             className,
@@ -63,6 +64,8 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(
             onUpdate,
             onChange,
         } = props;
+        const disabled = disabledProp ?? controlProps?.disabled;
+        const readOnly = readOnlyProp ?? controlProps?.readOnly;
 
         const {errorMessage, validationState} = errorPropsMapper({
             error,
@@ -79,8 +82,8 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(
         const innerId = useUniqId();
 
         const isErrorMsgVisible = validationState === 'invalid' && Boolean(errorMessage);
-        const isClearControlVisible = Boolean(hasClear && !disabled && inputValue);
-        const id = originalId || innerId;
+        const isClearControlVisible = Boolean(hasClear && !disabled && !readOnly && inputValue);
+        const id = idProp || innerId;
 
         const errorMessageId = useUniqId();
         const noteId = useUniqId();
diff --git a/src/components/controls/TextArea/TextAreaControl.tsx b/src/components/controls/TextArea/TextAreaControl.tsx
index ad9bbfce6d..262337928f 100644
--- a/src/components/controls/TextArea/TextAreaControl.tsx
+++ b/src/components/controls/TextArea/TextAreaControl.tsx
@@ -45,6 +45,7 @@ export function TextAreaControl(props: Props) {
         maxRows,
         autoFocus,
         disabled,
+        readOnly,
         onChange,
         onFocus,
         onBlur,
@@ -112,6 +113,7 @@ export function TextAreaControl(props: Props) {
             onKeyUp={onKeyUp}
             onKeyPress={onKeyPress}
             disabled={disabled ?? controlProps.disabled}
+            readOnly={readOnly ?? controlProps.readOnly}
         />
     );
 }
diff --git a/src/components/controls/TextArea/__stories__/TextAreaShowcase.tsx b/src/components/controls/TextArea/__stories__/TextAreaShowcase.tsx
index 3c0a2918d1..9a8e37acdc 100644
--- a/src/components/controls/TextArea/__stories__/TextAreaShowcase.tsx
+++ b/src/components/controls/TextArea/__stories__/TextAreaShowcase.tsx
@@ -62,6 +62,13 @@ export function TextAreaShowcase() {
                         />
                     </div>
                     <TextArea {...textAreaProps} placeholder="disabled" disabled rows={2} />
+                    <TextArea
+                        {...textAreaProps}
+                        placeholder="readonly"
+                        value="readonly value"
+                        readOnly
+                        rows={2}
+                    />
                     <TextArea {...textAreaProps} placeholder="rows = 4 & clear" hasClear rows={4} />
                     <TextArea
                         {...textAreaProps}
@@ -113,6 +120,13 @@ value`.trim()}
                 <TextArea {...textAreaProps} />
                 <TextArea {...textAreaProps} value={undefined} defaultValue="has clear" hasClear />
                 <TextArea {...textAreaProps} disabled />
+                <TextArea
+                    {...textAreaProps}
+                    placeholder="readonly"
+                    value="readonly value"
+                    readOnly
+                    rows={2}
+                />
                 <TextArea {...textAreaProps} error="Error message" />
             </div>
             <div className={b('custom-theme')}>
@@ -127,6 +141,13 @@ value`.trim()}
                 <TextArea {...textAreaProps} />
                 <TextArea {...textAreaProps} value={undefined} defaultValue="has clear" hasClear />
                 <TextArea {...textAreaProps} disabled />
+                <TextArea
+                    {...textAreaProps}
+                    placeholder="readonly"
+                    value="readonly value"
+                    readOnly
+                    rows={2}
+                />
                 <TextArea {...textAreaProps} error="Error message" />
             </div>
         </div>
diff --git a/src/components/controls/TextInput/README.md b/src/components/controls/TextInput/README.md
index 9ebce52aab..f3da177c21 100644
--- a/src/components/controls/TextInput/README.md
+++ b/src/components/controls/TextInput/README.md
@@ -260,7 +260,8 @@ LANDING_BLOCK-->
 | onUpdate        | Fires when the input’s value is changed by the user. Provides new value as an callback's argument                       |                              `function`                               |                 |
 | pin             | The control's border view                                                                                               |                               `string`                                | `'round-round'` |
 | placeholder     | Text that appears in the control when it has no value set                                                               |                               `string`                                |                 |
-| qa              | Test ID attribute (`data-qa`)                                                                                           |                               `string`                                |                 |
+| qa              | Test ID attribute (`data-qa`)                                                                                           |                               `string`                                |
+| readOnly        | Indicates that the user cannot change control's value                                                                   |                               `boolean`                               |     `false`     |
 | rightContent    | User`s node rendered after the input node and clear button                                                              |                           `React.ReactNode`                           |                 |
 | size            | The size of the control                                                                                                 |                       `"s"` `"m"` `"l"` `"xl"`                        |      `"m"`      |
 | tabIndex        | The `tabindex` attribute of the control                                                                                 |                               `string`                                |                 |
diff --git a/src/components/controls/TextInput/TextInput.tsx b/src/components/controls/TextInput/TextInput.tsx
index 44b23f0027..ac610afd28 100644
--- a/src/components/controls/TextInput/TextInput.tsx
+++ b/src/components/controls/TextInput/TextInput.tsx
@@ -68,19 +68,20 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(
             value,
             defaultValue,
             label,
-            disabled = false,
+            disabled: disabledProp,
+            readOnly: readOnlyProp,
             hasClear = false,
             error,
             errorMessage: errorMessageProp,
             errorPlacement: errorPlacementProp = 'outside',
             validationState: validationStateProp,
             autoComplete,
-            id: originalId,
+            id: idProp,
             tabIndex,
             style,
             className,
             qa,
-            controlProps: originalControlProps,
+            controlProps: controlPropsProp,
             leftContent,
             rightContent,
             startContent = leftContent,
@@ -89,6 +90,8 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(
             onUpdate,
             onChange,
         } = props;
+        const disabled = disabledProp ?? controlPropsProp?.disabled;
+        const readOnly = readOnlyProp ?? controlPropsProp?.readOnly;
 
         const {errorMessage, errorPlacement, validationState} = errorPropsMapper({
             error,
@@ -110,14 +113,14 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(
             validationState === 'invalid' && Boolean(errorMessage) && errorPlacement === 'outside';
         const isErrorIconVisible =
             validationState === 'invalid' && Boolean(errorMessage) && errorPlacement === 'inside';
-        const isClearControlVisible = Boolean(hasClear && !disabled && inputValue);
+        const isClearControlVisible = Boolean(hasClear && !disabled && !readOnly && inputValue);
         const isStartContentVisible = Boolean(startContent);
         const isEndContentVisible = Boolean(endContent);
         const isAutoCompleteOff =
-            isLabelVisible && !originalId && !name && typeof autoComplete === 'undefined';
+            isLabelVisible && !idProp && !name && typeof autoComplete === 'undefined';
 
         const innerId = useUniqId();
-        const id = isLabelVisible ? originalId || innerId : originalId;
+        const id = isLabelVisible ? idProp || innerId : idProp;
 
         const labelSize = useElementSize(isLabelVisible ? labelRef : null, size);
         const startContentSize = useElementSize(
@@ -128,7 +131,7 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(
         const errorMessageId = useUniqId();
         const noteId = useUniqId();
         const ariaDescribedBy = [
-            originalControlProps?.['aria-describedby'],
+            controlPropsProp?.['aria-describedby'],
             note ? noteId : undefined,
             isErrorMsgVisible ? errorMessageId : undefined,
         ]
@@ -136,9 +139,9 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(
             .join(' ');
 
         const controlProps: TextInputProps['controlProps'] = {
-            ...originalControlProps,
+            ...controlPropsProp,
             style: {
-                ...originalControlProps?.style,
+                ...controlPropsProp?.style,
                 ...(isLabelVisible && labelSize.width
                     ? {paddingInlineStart: `${labelSize.width}px`}
                     : {}),
diff --git a/src/components/controls/TextInput/TextInputControl.tsx b/src/components/controls/TextInput/TextInputControl.tsx
index a4e7adfbd5..46cc1ae287 100644
--- a/src/components/controls/TextInput/TextInputControl.tsx
+++ b/src/components/controls/TextInput/TextInputControl.tsx
@@ -25,6 +25,7 @@ export function TextInputControl(props: Props) {
         defaultValue,
         autoFocus,
         disabled,
+        readOnly,
         onChange,
         onFocus,
         onBlur,
@@ -54,6 +55,7 @@ export function TextInputControl(props: Props) {
             onKeyUp={onKeyUp}
             onKeyPress={onKeyPress}
             disabled={disabled ?? controlProps.disabled}
+            readOnly={readOnly ?? controlProps.readOnly}
         />
     );
 }
diff --git a/src/components/controls/TextInput/__stories__/TextInputCustomThemeShowcase.tsx b/src/components/controls/TextInput/__stories__/TextInputCustomThemeShowcase.tsx
index 26e90a8346..31a74784c1 100644
--- a/src/components/controls/TextInput/__stories__/TextInputCustomThemeShowcase.tsx
+++ b/src/components/controls/TextInput/__stories__/TextInputCustomThemeShowcase.tsx
@@ -45,6 +45,12 @@ export const CustomThemeShowcase = () => {
                     errorPlacement="inside"
                 />
                 <TextInput {...textInputProps} placeholder="disabled" disabled />
+                <TextInput
+                    {...textInputProps}
+                    placeholder="disabled"
+                    value="readonlyValue"
+                    readOnly
+                />
                 <TextInput {...textInputProps} placeholder="clear" hasClear />
                 <TextInput
                     {...textInputProps}
@@ -82,6 +88,12 @@ export const CustomThemeShowcase = () => {
                     errorPlacement="inside"
                 />
                 <TextInput {...textInputProps} placeholder="disabled" disabled />
+                <TextInput
+                    {...textInputProps}
+                    placeholder="disabled"
+                    value="readonlyValue"
+                    readOnly
+                />
                 <TextInput {...textInputProps} placeholder="clear" hasClear />
                 <TextInput
                     {...textInputProps}
diff --git a/src/components/controls/TextInput/__stories__/TextInputShowcase.tsx b/src/components/controls/TextInput/__stories__/TextInputShowcase.tsx
index b87deb528e..897ff057c6 100644
--- a/src/components/controls/TextInput/__stories__/TextInputShowcase.tsx
+++ b/src/components/controls/TextInput/__stories__/TextInputShowcase.tsx
@@ -84,6 +84,12 @@ export function TextInputShowcase() {
                         />
                     </div>
                     <TextInput {...textInputProps} placeholder="disabled" disabled />
+                    <TextInput
+                        {...textInputProps}
+                        placeholder="readonly"
+                        value="readonlyValue"
+                        readOnly
+                    />
                     <TextInput {...textInputProps} placeholder="clear" hasClear />
                     <TextInput
                         {...textInputProps}
@@ -128,6 +134,13 @@ export function TextInputShowcase() {
                         />
                     </div>
                     <TextInput {...textInputProps} placeholder="disabled" label={LABEL} disabled />
+                    <TextInput
+                        {...textInputProps}
+                        placeholder="readonly"
+                        value="readonlyValue"
+                        label={LABEL}
+                        readOnly
+                    />
                     <TextInput {...textInputProps} placeholder="clear" label={LABEL} hasClear />
                     <TextInput
                         {...textInputProps}
@@ -234,6 +247,17 @@ export function TextInputShowcase() {
                         }
                         disabled
                     />
+                    <TextInput
+                        {...textInputProps}
+                        placeholder="readonly"
+                        type={additionalContentExmpleInputType}
+                        value="readonlyValue"
+                        leftContent={<Icon data={Key} />}
+                        rightContent={
+                            <EyeButton opened={hideValue} onClick={handleEyeButtonClick} />
+                        }
+                        readOnly
+                    />
                     <TextInput
                         {...textInputProps}
                         placeholder="clear"
diff --git a/src/components/controls/types.ts b/src/components/controls/types.ts
index 50b5e1d57c..3d49620103 100644
--- a/src/components/controls/types.ts
+++ b/src/components/controls/types.ts
@@ -65,6 +65,8 @@ export type BaseInputControlProps<T = Element> = DOMProps &
         pin?: InputControlPin;
         /** Text that appears in the control when it has no value set */
         placeholder?: string;
+        /** Indicates that the user cannot change control's value */
+        readOnly?: boolean;
         /** The control's size. `'m'` by default */
         size?: InputControlSize;
         /** The control's `tabindex` attribute */