@transferwise/components 46.141.0 → 46.142.0

package/src/field/Field.tsx

@@ -1,9 +1,14 @@
 import { clsx } from 'clsx';
-import { useId, useRef } from 'react';
+import { useCallback, useId, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
 
+import Body from '../body';
 import { Sentiment } from '../common';
+import messages from './Field.messages';
 import { InlinePrompt, type InlinePromptProps } from '../prompt';
 import {
+  TextareaCharacterCountProvider,
+  type TextareaCharacterCountState,
   FieldLabelContextProvider,
   InputDescribedByProvider,
   InputIdContextProvider,
@@ -54,6 +59,7 @@ export const Field = ({
   children,
   ...props
 }: FieldProps) => {
+  const { formatMessage } = useIntl();
   const labelRef = useRef<HTMLLabelElement>(null);
   const sentiment = props.error ? Sentiment.NEGATIVE : propType;
   const message = propMessage || props.error;
@@ -66,6 +72,18 @@ export const Field = ({
 
   const messageId = useId();
   const descriptionId = useId();
+  const textareaCharCounterId = useId();
+
+  const [textareaCharacterCount, setTextareaCharacterCount] =
+    useState<TextareaCharacterCountState>(null);
+  const handleTextareaCharacterCount = useCallback(
+    (state: TextareaCharacterCountState) => setTextareaCharacterCount(state),
+    [],
+  );
+
+  const isNearCharLimit =
+    textareaCharacterCount != null &&
+    textareaCharacterCount.current >= textareaCharacterCount.max * 0.8;
 
   /**
    * form control can have multiple messages to describe it,
@@ -79,6 +97,9 @@ export const Field = ({
     if (message) {
       messageIds.push(messageId);
     }
+    if (textareaCharacterCount) {
+      messageIds.push(textareaCharCounterId);
+    }
     return messageIds.length > 0 ? messageIds.join(' ') : undefined;
   }
 
@@ -87,43 +108,69 @@ export const Field = ({
       <InputIdContextProvider value={inputId}>
         <InputDescribedByProvider value={ariaDescribedbyByIds()}>
           <InputInvalidProvider value={hasError}>
-            <div
-              className={clsx(
-                'np-field form-group d-block',
-                {
-                  'has-success': sentiment === Sentiment.POSITIVE,
-                  'has-warning': sentiment === Sentiment.WARNING,
-                  'has-error': hasError,
-                  'has-info': sentiment === Sentiment.NEUTRAL,
-                },
-                className,
-              )}
-            >
-              {label != null ? (
-                <>
-                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>
-                    {required ? label : <Label.Optional>{label}</Label.Optional>}
-                  </Label>
-                  <Label.Description id={descriptionId}>{description}</Label.Description>
-                  <div className="np-field-control">{children}</div>
-                </>
-              ) : (
-                children
-              )}
+            <TextareaCharacterCountProvider value={handleTextareaCharacterCount}>
+              <div
+                className={clsx(
+                  'np-field form-group d-block',
+                  {
+                    'has-success': sentiment === Sentiment.POSITIVE,
+                    'has-warning': sentiment === Sentiment.WARNING,
+                    'has-error': hasError,
+                    'has-info': sentiment === Sentiment.NEUTRAL,
+                  },
+                  className,
+                )}
+              >
+                {label != null ? (
+                  <>
+                    <Label ref={labelRef} id={labelId} htmlFor={inputId}>
+                      {required ? label : <Label.Optional>{label}</Label.Optional>}
+                    </Label>
+                    <Label.Description id={descriptionId}>{description}</Label.Description>
+                    <div className="np-field-control">{children}</div>
+                  </>
+                ) : (
+                  children
+                )}
 
-              {message && (
-                <InlinePrompt
-                  sentiment={sentiment}
-                  id={messageId}
-                  mediaLabel={messageIconLabel}
-                  className="np-field__prompt"
-                  loading={messageLoading}
-                  width="full"
-                >
-                  {message}
-                </InlinePrompt>
-              )}
-            </div>
+                {(message || textareaCharacterCount) && (
+                  <div className="np-field-validation">
+                    {message && (
+                      <InlinePrompt
+                        sentiment={sentiment}
+                        id={messageId}
+                        mediaLabel={messageIconLabel}
+                        className="np-field__prompt"
+                        loading={messageLoading}
+                        width="full"
+                      >
+                        {message}
+                      </InlinePrompt>
+                    )}
+                    {textareaCharacterCount && (
+                      <Body
+                        as="span"
+                        id={textareaCharCounterId}
+                        {...(isNearCharLimit
+                          ? {
+                              role: 'status' as const,
+                              'aria-live': 'polite' as const,
+                              'aria-atomic': 'true' as const,
+                            }
+                          : {})}
+                        aria-label={formatMessage(messages.characterCount, {
+                          current: textareaCharacterCount.current,
+                          max: textareaCharacterCount.max,
+                        })}
+                        className="np-field-textarea-char-counter"
+                      >
+                        {textareaCharacterCount.current}/{textareaCharacterCount.max}
+                      </Body>
+                    )}
+                  </div>
+                )}
+              </div>
+            </TextareaCharacterCountProvider>
           </InputInvalidProvider>
         </InputDescribedByProvider>
       </InputIdContextProvider>

package/src/i18n/en.json

@@ -20,6 +20,7 @@
   "neptune.Expander.expandAriaLabel": "Expand",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
+  "neptune.Field.characterCount": "{current} of {max} characters used",
   "neptune.FlowNavigation.back": "back to previous step",
   "neptune.Info.ariaLabel": "More information",
   "neptune.Label.optional": "(Optional)",

package/src/inputs/TextArea.story.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Field } from '../field/Field';
+import { Sentiment } from '../common';
+import { TextArea } from './TextArea';
+
+/**
+ * TextArea must be the only input with `maxLength` inside a given Field.
+ * The character counter uses shared context — multiple TextAreas with maxLength
+ * in the same Field will race to set the counter state.
+ */
+const meta: Meta<typeof TextArea> = {
+  title: 'Forms/TextArea',
+  component: TextArea,
+  argTypes: {
+    value: {
+      control: 'text',
+    },
+    maxLength: {
+      control: 'number',
+    },
+    placeholder: {
+      control: 'text',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    rows: {
+      control: 'number',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+
+/** Explore all props via the controls panel. */
+export const Playground: Story = {
+  args: {
+    value: '',
+    maxLength: 200,
+    placeholder: 'Type something...',
+  },
+  render: (args) => {
+    const [value, setValue] = useState(args.value ?? '');
+    useEffect(() => setValue(args.value ?? ''), [args.value]);
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea {...args} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+};
+
+export const Basic: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={200} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Field label="Message" required={false}>
+  <TextArea
+    maxLength={200}
+    value={value}
+    onChange={({ target }) => setValue(target.value)}
+  />
+</Field>`,
+      },
+    },
+  },
+};
+
+export const WithError: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field
+        label="Message"
+        required={false}
+        sentiment={Sentiment.NEGATIVE}
+        message="You have exceeded the character limit"
+      >
+        <TextArea maxLength={200} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+};

package/src/inputs/TextArea.test.story.tsx

@@ -0,0 +1,142 @@
+import { useState } from 'react';
+import { userEvent, within } from 'storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Field } from '../field/Field';
+import { TextArea } from './TextArea';
+
+const meta: Meta<typeof TextArea> = {
+  title: 'Forms/TextArea/Tests',
+  component: TextArea,
+  tags: ['!autodocs', '!manifest'],
+};
+
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+
+export const AsciiCharacters: Story = {
+  name: 'counter at limit with ASCII input',
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={10} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByRole('textbox'), '0123456789');
+  },
+};
+
+export const EmojiCharacters: Story = {
+  name: 'counter with emoji input',
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={10} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textarea = canvas.getByRole('textbox');
+    await userEvent.click(textarea);
+    await userEvent.paste('🐱💕🐱💕');
+  },
+};
+
+export const EmojiAtLimit: Story = {
+  name: 'truncates emoji paste exceeding limit',
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={10} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textarea = canvas.getByRole('textbox');
+    await userEvent.click(textarea);
+    await userEvent.paste('🐱💕🐱💕🐱💕🐱💕🐱💕🐱💕🐱💕');
+  },
+};
+
+export const CJKCharacters: Story = {
+  name: 'truncates CJK paste exceeding limit',
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={10} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textarea = canvas.getByRole('textbox');
+    await userEvent.click(textarea);
+    await userEvent.paste('吉𣘺吉𣘺吉𣘺吉𣘺吉𣘺吉𣘺');
+  },
+};
+
+export const InitialValueExceedsLimit: Story = {
+  name: 'initial value exceeding maxLength is preserved',
+  render: () => {
+    const [value, setValue] = useState('Hello World!');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={3} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+};
+
+export const EmojiTypingBlocked: Story = {
+  name: 'blocks emoji paste when already at limit',
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={3} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textarea = canvas.getByRole('textbox');
+    await userEvent.click(textarea);
+    await userEvent.paste('🐱💕');
+    await userEvent.paste('🎉🎉🎉');
+  },
+};
+
+export const CJKTypingBlocked: Story = {
+  name: 'blocks CJK paste when already at limit',
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={3} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textarea = canvas.getByRole('textbox');
+    await userEvent.click(textarea);
+    await userEvent.paste('吉𣘺');
+    await userEvent.paste('吉𣘺吉𣘺吉𣘺');
+  },
+};

package/src/inputs/TextArea.tsx

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 
 import { Merge } from '../utils';
 import { inputClassNameBase } from './_common';
-import { useInputAttributes } from './contexts';
+import { useTextareaCharacterCount, useInputAttributes } from './contexts';
 
 export interface TextAreaProps extends Merge<
   React.ComponentPropsWithRef<'textarea'>,
@@ -13,15 +13,20 @@ export interface TextAreaProps extends Merge<
 > {}
 
 export const TextArea = forwardRef(function TextArea(
-  { className, ...restProps }: TextAreaProps,
+  { className, maxLength, ...restProps }: TextAreaProps,
   reference: React.ForwardedRef<HTMLTextAreaElement | null>,
 ) {
   const inputAttributes = useInputAttributes();
+  const value = restProps.value ?? restProps.defaultValue ?? '';
+  const currentLength = typeof value === 'string' ? value.length : String(value).length;
+
+  useTextareaCharacterCount(currentLength, maxLength);
 
   return (
     <textarea
       ref={reference}
       className={clsx(className, inputClassNameBase(), 'np-text-area')}
+      maxLength={maxLength}
       {...inputAttributes}
       {...restProps}
     />

package/src/inputs/contexts.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useEffect } from 'react';
 
 type FieldLabelContextType = {
   id?: string;
@@ -36,6 +36,23 @@ export function useFieldLabelRef() {
   return useContext(FieldLabelContext)?.ref;
 }
 
+export type TextareaCharacterCountState = { current: number; max: number } | null;
+
+const TextareaCharacterCountContext = createContext<
+  ((state: TextareaCharacterCountState) => void) | undefined
+>(undefined);
+export const TextareaCharacterCountProvider = TextareaCharacterCountContext.Provider;
+
+export function useTextareaCharacterCount(current: number, max: number | undefined) {
+  const setCharacterCount = useContext(TextareaCharacterCountContext);
+  useEffect(() => {
+    if (setCharacterCount && max != null) {
+      setCharacterCount({ current, max });
+      return () => setCharacterCount(null);
+    }
+  }, [setCharacterCount, current, max]);
+}
+
 export interface WithInputAttributesProps {
   inputAttributes: ReturnType<typeof useInputAttributes>;
 }

package/src/main.css

@@ -3238,7 +3238,16 @@ a,
 .np-text-display-extra-large,
 .np-text-display-large,
 .np-text-display-medium,
-.np-text-display-small {
+.np-text-display-small,
+.display-1--forced,
+.display-2--forced,
+.display-3--forced,
+.display-4--forced,
+.display-5--forced,
+.np-text-display-extra-large--forced,
+.np-text-display-large--forced,
+.np-text-display-medium--forced,
+.np-text-display-small--forced {
   font-family: 'Wise Sans', 'Inter', sans-serif;
   font-family: var(--font-family-display);
   font-synthesis: none;
@@ -3285,9 +3294,14 @@ a,
      * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
      * font files are browser-cached and we carried over to launchpad, where it causes issues
      * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
+     * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
+     * numeric input of ExpressiveMoneyInput.
+     * Add `--forced` BEM modifier to the original class name to guarantee it.
      */
   font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
+  line-height: 1.2;
+  line-height: var(--line-height-title);
 }
 
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
@@ -26633,10 +26647,10 @@ a[data-toggle="tooltip"] {
 }
 
 .np-dot-mask {
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
 }
 
 .np-dot-badge {
@@ -29935,18 +29949,36 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   stroke-dasharray: var(--wds-list-item-spotlight-strokeDashSize) var(--wds-list-item-spotlight-strokeDashSize);
 }
 
-.np-field-control,
-.np-field__prompt {
+.np-field-control {
   margin-top: 4px;
   margin-top: var(--size-4);
 }
 
+.np-field-validation {
+  display: flex;
+  align-items: flex-start;
+  margin-top: 4px;
+  margin-top: var(--size-4);
+  gap: 8px;
+  gap: var(--size-8);
+}
+
+.np-field-textarea-char-counter {
+  min-width: 55px;
+  text-align: right;
+  margin-left: auto;
+  padding: 4px 0;
+  padding: var(--size-4) 0;
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+
 .np-field .form-group--typeahead[class],
 .np-field .np-checkbox-label[class] {
   margin-bottom: 0;
 }
 
-.np-field:has(.wds-radio-group) .np-field__prompt {
+.np-field:has(.wds-radio-group) .np-field-validation {
   margin-top: 12px;
   margin-top: var(--size-12);
 }
@@ -31052,6 +31084,7 @@ button.np-link {
   flex-grow: 1;
   text-align: right;
   background-color: transparent;
+  line-height: inherit;
 }
 
 .wds-amount-input-input:focus-visible {
@@ -31062,6 +31095,7 @@ button.np-link {
   flex-grow: 0;
   display: flex;
   align-items: center;
+  line-height: inherit;
 }
 
 .wds-currency-selector:disabled {

package/src/styles/less/core/_typography.less

@@ -8,7 +8,17 @@
 
 /* DEPRECATED: use .np-text-*-title instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
-.h1, .h2, .h3, .h4, .h5, .h6, .title-1, .title-2, .title-3, .title-4, .title-5,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+.title-1,
+.title-2,
+.title-3,
+.title-4,
+.title-5,
 h1,
 h2,
 h3,
@@ -114,8 +124,12 @@ h6,
 
 /* DEPRECATED: use .np-text-body-default instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
-.body-2, .body-3, .small, .tiny,
-body, small,
+.body-2,
+.body-3,
+.small,
+.tiny,
+body,
+small,
 .np-text-body-default {
   font-size: var(--font-size-14);
   line-height: 155%;
@@ -139,7 +153,8 @@ body, small,
 
 /* DEPRECATED: use .np-text-body-large instead  */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
-.body-1, .value,
+.body-1,
+.value,
 .np-text-body-large {
   font-weight: var(--font-weight-regular);
   font-size: var(--font-size-16);
@@ -204,8 +219,11 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  font-family: var(--font-family-display);
-  font-synthesis: none;
+  &,
+  &--forced {
+    font-family: var(--font-family-display);
+    font-synthesis: none;
+  }
 
   :lang(ja) &,
   :lang(th) &,
@@ -216,8 +234,12 @@ a,
      * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
      * font files are browser-cached and we carried over to launchpad, where it causes issues
      * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
+     * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
+     * numeric input of ExpressiveMoneyInput.
+     * Add `--forced` BEM modifier to the original class name to guarantee it.
      */
     font-family: var(--font-family-regular);
+    line-height: var(--line-height-title);
   }
 }
 

package/src/styles/less/neptune.css

@@ -3238,7 +3238,16 @@ a,
 .np-text-display-extra-large,
 .np-text-display-large,
 .np-text-display-medium,
-.np-text-display-small {
+.np-text-display-small,
+.display-1--forced,
+.display-2--forced,
+.display-3--forced,
+.display-4--forced,
+.display-5--forced,
+.np-text-display-extra-large--forced,
+.np-text-display-large--forced,
+.np-text-display-medium--forced,
+.np-text-display-small--forced {
   font-family: 'Wise Sans', 'Inter', sans-serif;
   font-family: var(--font-family-display);
   font-synthesis: none;
@@ -3285,9 +3294,14 @@ a,
      * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
      * font files are browser-cached and we carried over to launchpad, where it causes issues
      * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
+     * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
+     * numeric input of ExpressiveMoneyInput.
+     * Add `--forced` BEM modifier to the original class name to guarantee it.
      */
   font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
+  line-height: 1.2;
+  line-height: var(--line-height-title);
 }
 
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx

@@ -21,6 +21,7 @@ export const Basic: Story = {
         <TextareaWithDisplayFormat
           id={id}
           value="0000"
+          maxLength={20}
           displayPattern="**** - **** - ****"
           onChange={console.log}
         />