TextArea

function Example(props) {
  const [value, setValue] = React.useState('')
  return (
    <Box width="100%">
      <TextArea
        id="aboutme"
        onChange={({value}) => setValue(value)}
        placeholder="Write something about yourself..."
        label="About me"
        value={value}
      />
    </Box>
  );
}

function Example(props) {
  const [value, setValue] = React.useState('')
  return (
    <Box width="100%">
      <TextArea
        id="aboutmemore"
        onChange={({value}) => setValue(value)}
        placeholder="Write something about yourself..."
        helperText="Describe your favorite hobbies, foods, or books."
        label="About me"
        value={value}
      />
    </Box>
  );
}

<Flex gap={{ column: 2, row: 0 }} direction="column" width="100%">
  <Text weight="bold" size="300">About me</Text>
  <TextArea
    id="textareaexampleHiddenLabel"
    placeholder="Write something about yourself..."
    onChange={() => {}}
    label='About me'
    labelDisplay="hidden"
    size='lg'
  />
</Flex>

function Example(props) {
  const [value, setValue] = React.useState('To keep shopping inspirational and actionable, we set high standards for our Merchants. Your website was not approved due to fuzzy, low quality images.');
  return (
    <Box width="100%">
      <TextArea
        id="aboutmereadonly"
        onChange={({value}) => setValue(value)}
        label="Current errors"
        value={value}
        readOnly
      />
    </Box>
  );
}

function Example(props) {
  const [value, setValue] = React.useState('')
  return (
    <Box width="100%">
      <TextArea
        disabled
        id="disabled"
        onChange={({value}) => setValue(value)}
        placeholder="Write something about yourself..."
        label="About me"
        value={value}
      />
    </Box>
  );
}

function Example(props) {
  const [value, setValue] = React.useState('')
  return (
    <Box width="100%">
      <TextArea
        id="witherror"
        onChange={({value}) => setValue(value)}
        errorMessage={!value ? "This field can't be blank!" : null}
        placeholder="Write something about yourself..."
        label="About me"
        value={value}
      />
    </Box>
  );
}

function TextAreaExample() {
  const [valueA, setValueA] = React.useState('Before and after via side by side display of pale woman with auburn hair using concealer. The image shows her using a brush with concealer under her eyes.  The second image shows her with full makeup.');
  const [valueB, setValueB] = React.useState('Before and after via side by side display of pale woman with auburn hair using concealer. The image shows her using a brush with concealer under her eyes, second image shows her with full makeup and says new.');

  const characterCount = 200;
  const errorAccessibilityLabel = "Limit reached. You can only use 200 characters in this field.";

  return (
    <Flex direction="column" gap={12}>
      <TextArea
        id="maxLengthReached"
        label="Alt text"
        helperText="Describe your image with detail so visually impaired users can understand your Pin"
        onChange={({ value }) => setValueA(value)}
        placeholder="Enter the image alt text"
        value={valueA}
        onBlur={() => {}}
        onFocus={() => {}}
        rows={4}
        maxLength={{ characterCount, errorAccessibilityLabel }}
      />
      <TextArea
        id="maxLengthExceeded"
        label="Alt text"
        helperText="Describe your image with detail so visually impaired users can understand your Pin"
        onChange={({ value }) => setValueB(value)}
        placeholder="Enter the image alt text"
        value={valueB}
        onBlur={() => {}}
        onFocus={() => {}}
        rows={4}
        maxLength={{ characterCount, errorAccessibilityLabel }}
      />
    </Flex>
  );
}

function TextAreaPopoverExample() {
  const [open, setOpen] = React.useState(false);
  const anchorRef = React.useRef();
  return (
    <Box marginBottom={12} width="100%">
      <TextArea
        ref={anchorRef}
        label="Focus the TextArea to show the Popover"
        id="my-example"
        onChange={() => {}}
        onBlur={() => setOpen(false)}
        onFocus={() => setOpen(true)}
      />
      {open && (
        <Popover
          anchor={anchorRef.current}
          idealDirection="down"
          onDismiss={() => setOpen(false)}
          shouldFocus={false}
          size="md"
        >
          <Box padding={3}>
            <Text weight="bold">Example with Popover</Text>
          </Box>
        </Popover>
      )}
    </Box>
  );
}

function Example(props) {
  const [value, setValue] = React.useState('');
  const [tags, setTags] = React.useState(['San Francisco', 'New York']);
  const ref = React.useRef();

  const onChangeTagManagement = ({ value }) => {
    // Create new tags around new lines
    const tagInput = value.split(/\n+/);
    if (tagInput.length > 1) {
      setTags([
        ...tags,
        // Avoid creating a tag on content on the last line, and filter out
        // empty tags
        ...tagInput.splice(0, tagInput.length - 1).filter(val => val !== ''),
      ]);
    }
    setValue(tagInput[tagInput.length - 1]);
  }

  const onKeyDownTagManagement = ({
    event: {
      keyCode,
      target: { selectionEnd },
    },
  }) => {
    if (keyCode === 8 /* Backspace */ && selectionEnd === 0) {
      // Remove tag on backspace if the cursor is at the beginning of the field
      setTags([...tags.slice(0, -1)]);
    }
  }

  const renderedTags = tags.map((tag, idx) => (
    <Tag
      key={tag}
      onRemove={() => {
        const newTags = [...tags];
        newTags.splice(idx, 1);
        setTags([...newTags]);
        ref.current.focus();
      }}
      removeIconAccessibilityLabel={`Remove ${tag} tag`}
      text={tag}
    />
  ));

  return (
    <Box width="100%">
      <TextArea
        id="cities"
        label="Cities"
        ref={ref}
        onChange={onChangeTagManagement}
        onKeyDown={onKeyDownTagManagement}
        placeholder={value.length > 0 || tags.length > 0 ? '' : "Cities you've lived in"}
        tags={renderedTags}
        value={value}
      />
    </Box>
  );
}