Function useTokenField

packages/react-aria/src/tokenfield/useTokenField.ts:100–604

(
  props: AriaTokenFieldProps<T>,
  state: TokenFieldState,
  ref: RefObject<HTMLDivElement | null>
)

 * @param state - State for the token field, as returned by `useTokenFieldState`.
 */
export function useTokenField<T extends TokenFieldValue = TokenFieldValue>(
  props: AriaTokenFieldProps<T>,
  state: TokenFieldState,
  ref: RefObject<HTMLDivElement | null>
): TokenFieldAria {
  let {
    role = 'textbox',
    allowsNewlines: multiline = false,
    isReadOnly = false,
    isDisabled = false,
    'aria-details': ariaDetails
  } = props;

  let {value} = state;
  let {locale} = useLocale();
  let graphemeSegmenter = useMemo(
    () => new Intl.Segmenter(locale, {granularity: 'grapheme'}),
    [locale]
  );
  let wordSegmenter = useMemo(() => new Intl.Segmenter(locale, {granularity: 'word'}), [locale]);

  let dropPosition = useRef<Position | null>(null);
  let transferredData = useRef<TokenFieldSegment[] | null>(null);

  let nextValue = useRef<TokenFieldValue | null>(null);
  let apply = (fn: (value: TokenFieldValue) => TokenFieldValue) => {
    state.setValue(value => {
      let newValue = fn(value);
      nextValue.current = newValue;
      return newValue;
    });
  };

  // Composition events are not cancelable. The browser will mutate the DOM, making it out of sync with React.
  // To account for this, we prevent React from re-rendering during composition, and track DOM mutations performed
  // by the browser. When composition ends, we revert the DOM to its original state, and re-render with React.
  // Mutating the DOM in any way during composition breaks the IME, causing composition to end unexpectedly.
  // During composition, we still emit updates via onChange to ensure that things like autocomplete work,
  // but we don't actually re-render to the DOM unless the value changes from what we expect (e.g. inserting a completion).
  let mutationTracker = useMutationTracker(ref);
  let startComposition = useCallback(() => {
    mutationTracker.start();
    state.setComposing(true);
  }, [state, mutationTracker]);
  let stopComposition = useCallback(() => {
    mutationTracker.stop();
    state.setComposing(false);
  }, [state, mutationTracker]);

  useEvent(ref, 'compositionstart', () => {
    startComposition();

    let range = window.getSelection()?.getRangeAt(0);
    if (range) {
      let [start, end] = rangeToPositions(ref.current!, range);

      // Normalize the range to ensure it is not inside a token, otherwise the browser
      // will attempt to insert the composed text into the token instead of replacing it.