TokenField

import {Token, TokenField} from './TokenField';
import {TokenFieldValue} from 'react-stately/useTokenFieldState';
import {useState} from 'react';

function Example() {
  let [value, setValue] = useState(
    new TokenFieldValue([
      {type: 'text', text: 'Hello '},
      {type: 'token', text: '@username'},
      {type: 'text', text: '!'}
    ])
  );

  return (
    <>
      <TokenField value={value} onChange={setValue} label="Message">
        {segment => <Token>{segment.text}</Token>}
      </TokenField>
      <p>Value: {value.toString()}</p>
    </>
  );
}

import {Token, TokenField} from './TokenField';
import {TokenizingFieldValue} from './TokenizingFieldValue';

<TokenField
  allowsNewlines
  defaultValue={TokenizingFieldValue.tokenize(
    'This example automatically tokenizes #hashtags and @usernames in the text.',
    /(?<=\s|^)[#@]\S+(?=\s)/g
  )}
  label="Message">
  {segment => <Token>{segment.text}</Token>}
</TokenField>

import {Autocomplete} from 'react-aria-components/Autocomplete';
import {Text} from 'react-aria-components/Text';
import {Token, TokenField} from './TokenField';
import {tokenFieldPositionToDOMRange} from 'react-aria/useTokenField';
import {TokenFieldValue} from 'react-aria-components/TokenField';
import {Menu, MenuItem} from './Menu';
import {Popover} from './Popover';
import {useMemo, useRef, useState} from 'react';

type Item = {username: string} | {command: string; description: string};

const usernames = [];
const slashCommands = [];
function Example() {
  let inputRef = useRef(null);
  let [value, setValue] = useState(
    new TokenFieldValue([
      {type: 'text', text: 'This example has autocomplete for '},
      {type: 'token', text: '@usernames'},
      {type: 'text', text: ' and '},
      {type: 'token', text: '/commands'}
    ])
  );

  let [filterAnchor, filterValue] = useMemo(() => {
    let filterAnchor = value.findText(value.caretPosition, TokenFieldValue.Direction.Backward, /(?<=^|\s)[@/]/);
    if (filterAnchor != null) {
      let filterValue = value.slice(filterAnchor, value.caretPosition).toString();
      return [filterAnchor, filterValue];
    }
    return [null, null];
  }, [value]);

  let items: Item[] = [];
  if (filterValue != null && filterValue.startsWith('/')) {
    items = slashCommands.filter(item => item.command.includes(filterValue.slice(1)));
  } else if (filterValue != null && filterValue.startsWith('@')) {
    items = usernames.filter(item => item.username.includes(filterValue.slice(1)));
  }

  return (
    <Autocomplete>
      <TokenField value={value} onChange={setValue} label="Prompt" allowsNewlines inputRef={inputRef}>
        {segment => <Token>{segment.text}</Token>}
      </TokenField>
      <Popover
        triggerRef={inputRef}
        isOpen={filterAnchor != null && items.length > 0}
        isNonModal
        hideArrow
        placement="bottom start"
        trigger="MenuTrigger"
        getTargetRect={target => {
          return tokenFieldPositionToDOMRange(target, filterAnchor!).getBoundingClientRect();
        }}>
        <Menu items={items} dependencies={[filterAnchor]}>
          {item => (
            <MenuItem
              id={'username' in item ? item.username : item.command}
              onAction={() => {
                setValue(value =>
                  value.replaceRangeWithSegments(
                    filterAnchor!,
                    value.caretPosition,
                    [
                      {
                        type: 'token',
                        text: 'username' in item ? '@' + item.username : item.command
                      },
                      {type: 'text', text: ' '}
                    ],
                    false
                  )
                );
              }}>
              <Text slot="label">{'username' in item ? item.username : item.command}</Text>
              {'description' in item ? <Text slot="description">{item.description}</Text> : null}
            </MenuItem>
          )}
        </Menu>
      </Popover>
    </Autocomplete>
  );
}

import {Autocomplete} from 'react-aria-components/Autocomplete';
import {Collection} from 'react-aria-components/Collection';
import {Token, TokenField} from './TokenField';
import {Header, Menu, MenuItem, MenuSection} from './Menu';
import {Popover} from './Popover';
import {useRef, useState} from 'react';
import {TokenFieldValue} from 'react-stately/useTokenFieldState';

const usernames = [];
function Example() {
  let inputRef = useRef(null);
  let [value, setValue] = useState(
    new TokenFieldValue([{type: 'token', text: 'From: Alice Smith'}])
  );

  let last = value.segments[value.caretPosition.index];
  let filterText = last?.type === 'text' ? last.text : null;
  let suggestions: {name: string; items: string[]}[] = [];
  if (filterText != null) {
    let users = usernames
      .filter(item => item.username.includes(filterText))
      .map(u => u.username)
      .slice(0, 5);
    if (users.length > 0) {
      if (
        !value.segments.some(
          segment => segment.type === 'token' && segment.text.startsWith('From: ')
        )
      ) {
        suggestions.push({
          name: 'From',
          items: users
        });
      }

      suggestions.push({
        name: 'To',
        items: users
      });
    }

    suggestions.push({
      name: 'Subject',
      items: [filterText]
    });
  }

  return (
    <Autocomplete>
      <TokenField role="searchbox" value={value} onChange={setValue} label="Search" inputRef={inputRef}>
        {segment => <Token>{segment.text}</Token>}
      </TokenField>
      <Popover
        triggerRef={inputRef}
        isOpen={suggestions.length > 0}
        isNonModal
        hideArrow
        placement="bottom start"
        style={{width: 'var(--trigger-width)'}}
        trigger="MenuTrigger">
        <Menu items={suggestions}>
          {section => (
            <MenuSection>
              <Header>{section.name}</Header>
              <Collection items={section.items}>
                {item => (
                  <MenuItem
                    id={section.name + '-' + item}
                    onAction={() => {
                      setValue(value =>
                        value.replaceRangeWithSegments(
                          {index: value.caretPosition.index, offset: 0},
                          value.caretPosition,
                          [{type: 'token', text: section.name + ': ' + item}],
                          false
                        )
                      );
                    }}>
                    {item}
                  </MenuItem>
                )}
              </Collection>
            </MenuSection>
          )}
        </Menu>
      </Popover>
    </Autocomplete>
  );
}