@react-aria/textfield 3.18.5 → 3.19.0

package/src/useFormattedTextField.ts

@@ -1,163 +0,0 @@
-/*
- * Copyright 2021 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {AriaTextFieldProps} from '@react-types/textfield';
-import {getEventTarget, mergeProps, useEffectEvent} from '@react-aria/utils';
-import {InputEventHandler, useEffect, useRef} from 'react';
-import {RefObject} from '@react-types/shared';
-import {TextFieldAria, useTextField} from './useTextField';
-
-interface FormattedTextFieldState {
-  validate: (val: string) => boolean,
-  setInputValue: (val: string) => void
-}
-
-
-function supportsNativeBeforeInputEvent() {
-  return typeof window !== 'undefined' &&
-    window.InputEvent &&
-    typeof InputEvent.prototype.getTargetRanges === 'function';
-}
-
-export function useFormattedTextField(props: AriaTextFieldProps, state: FormattedTextFieldState, inputRef: RefObject<HTMLInputElement | null>): TextFieldAria {
-  // All browsers implement the 'beforeinput' event natively except Firefox
-  // (currently behind a flag as of Firefox 84). React's polyfill does not
-  // run in all cases that the native event fires, e.g. when deleting text.
-  // Use the native event if available so that we can prevent invalid deletions.
-  // We do not attempt to polyfill this in Firefox since it would be very complicated,
-  // the benefit of doing so is fairly minor, and it's going to be natively supported soon.
-  let onBeforeInputFallback = useEffectEvent((e: InputEvent) => {
-    let input = inputRef.current;
-    if (!input) {
-      return;
-    }
-
-    // Compute the next value of the input if the event is allowed to proceed.
-    // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.
-    let nextValue: string | null = null;
-    switch (e.inputType) {
-      case 'historyUndo':
-      case 'historyRedo':
-        // Explicitly allow undo/redo. e.data is null in this case, but there's no need to validate,
-        // because presumably the input would have already been validated previously.
-        return;
-      case 'insertLineBreak':
-        // Explicitly allow "insertLineBreak" event, to allow onSubmit for "enter" key. e.data is null in this case.
-        return;
-      case 'deleteContent':
-      case 'deleteByCut':
-      case 'deleteByDrag':
-        nextValue = input.value.slice(0, input.selectionStart!) + input.value.slice(input.selectionEnd!);
-        break;
-      case 'deleteContentForward':
-        // This is potentially incorrect, since the browser may actually delete more than a single UTF-16
-        // character. In reality, a full Unicode grapheme cluster consisting of multiple UTF-16 characters
-        // or code points may be deleted. However, in our currently supported locales, there are no such cases.
-        // If we support additional locales in the future, this may need to change.
-        nextValue = input.selectionEnd === input.selectionStart
-          ? input.value.slice(0, input.selectionStart!) + input.value.slice(input.selectionEnd! + 1)
-          : input.value.slice(0, input.selectionStart!) + input.value.slice(input.selectionEnd!);
-        break;
-      case 'deleteContentBackward':
-        nextValue = input.selectionEnd === input.selectionStart
-          ? input.value.slice(0, input.selectionStart! - 1) + input.value.slice(input.selectionStart!)
-          : input.value.slice(0, input.selectionStart!) + input.value.slice(input.selectionEnd!);
-        break;
-      case 'deleteSoftLineBackward':
-      case 'deleteHardLineBackward':
-        nextValue = input.value.slice(input.selectionStart!);
-        break;
-      default:
-        if (e.data != null) {
-          nextValue =
-            input.value.slice(0, input.selectionStart!) +
-            e.data +
-            input.value.slice(input.selectionEnd!);
-        }
-        break;
-    }
-
-    // If we did not compute a value, or the new value is invalid, prevent the event
-    // so that the browser does not update the input text, move the selection, or add to
-    // the undo/redo stack.
-    if (nextValue == null || !state.validate(nextValue)) {
-      e.preventDefault();
-    }
-  });
-
-  useEffect(() => {
-    if (!supportsNativeBeforeInputEvent() || !inputRef.current) {
-      return;
-    }
-
-    let input = inputRef.current;
-    input.addEventListener('beforeinput', onBeforeInputFallback, false);
-    return () => {
-      input.removeEventListener('beforeinput', onBeforeInputFallback, false);
-    };
-  }, [inputRef]);
-
-  let onBeforeInput: InputEventHandler<HTMLInputElement> | null = !supportsNativeBeforeInputEvent()
-    ? e => {
-      let nextValue =
-        getEventTarget(e).value.slice(0, getEventTarget(e).selectionStart!) +
-        e.data +
-        getEventTarget(e).value.slice(getEventTarget(e).selectionEnd!);
-
-      if (!state.validate(nextValue)) {
-        e.preventDefault();
-      }
-    }
-    : null;
-
-  let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps, ...validation} = useTextField(props, inputRef);
-
-  let compositionStartState = useRef<{value: string, selectionStart: number | null, selectionEnd: number | null} | null>(null);
-  return {
-    inputProps: mergeProps(
-      textFieldProps,
-      {
-        onBeforeInput,
-        onCompositionStart() {
-          // Chrome does not implement Input Events Level 2, which specifies the insertFromComposition
-          // and deleteByComposition inputType values for the beforeinput event. These are meant to occur
-          // at the end of a composition (e.g. Pinyin IME, Android auto correct, etc.), and crucially, are
-          // cancelable. The insertCompositionText and deleteCompositionText input types are not cancelable,
-          // nor would we want to cancel them because the input from the user is incomplete at that point.
-          // In Safari, insertFromComposition/deleteFromComposition will fire, however, allowing us to cancel
-          // the final composition result if it is invalid. As a fallback for Chrome and Firefox, which either
-          // don't support Input Events Level 2, or beforeinput at all, we store the state of the input when
-          // the compositionstart event fires, and undo the changes in compositionend (below) if it is invalid.
-          // Unfortunately, this messes up the undo/redo stack, but until insertFromComposition/deleteByComposition
-          // are implemented, there is no other way to prevent composed input.
-          // See https://bugs.chromium.org/p/chromium/issues/detail?id=1022204
-          let {value, selectionStart, selectionEnd} = inputRef.current!;
-          compositionStartState.current = {value, selectionStart, selectionEnd};
-        },
-        onCompositionEnd() {
-          if (inputRef.current && !state.validate(inputRef.current.value)) {
-            // Restore the input value in the DOM immediately so we can synchronously update the selection position.
-            // But also update the value in React state as well so it is correct for future updates.
-            let {value, selectionStart, selectionEnd} = compositionStartState.current!;
-            inputRef.current.value = value;
-            inputRef.current.setSelectionRange(selectionStart, selectionEnd);
-            state.setInputValue(value);
-          }
-        }
-      }
-    ),
-    labelProps,
-    descriptionProps,
-    errorMessageProps,
-    ...validation
-  };
-}

package/src/useTextField.ts

@@ -1,205 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {AriaTextFieldProps} from '@react-types/textfield';
-import {DOMAttributes, ValidationResult} from '@react-types/shared';
-import {filterDOMProps, getEventTarget, mergeProps, useFormReset} from '@react-aria/utils';
-import React, {
-  ChangeEvent,
-  HTMLAttributes,
-  type JSX,
-  LabelHTMLAttributes,
-  RefObject,
-  useState
-} from 'react';
-import {useControlledState} from '@react-stately/utils';
-import {useField} from '@react-aria/label';
-import {useFocusable} from '@react-aria/interactions';
-import {useFormValidation} from '@react-aria/form';
-import {useFormValidationState} from '@react-stately/form';
-
-/**
- * A map of HTML element names and their interface types.
- * For example `'a'` -> `HTMLAnchorElement`.
- */
-type IntrinsicHTMLElements = {
-  [K in keyof IntrinsicHTMLAttributes]: IntrinsicHTMLAttributes[K] extends HTMLAttributes<infer T> ? T : never
-};
-
-/**
- * A map of HTML element names and their attribute interface types.
- * For example `'a'` -> `AnchorHTMLAttributes<HTMLAnchorElement>`.
- */
-type IntrinsicHTMLAttributes = JSX.IntrinsicElements;
-
-type DefaultElementType = 'input';
-
-/**
- * The intrinsic HTML element names that `useTextField` supports; e.g. `input`,
- * `textarea`.
- */
-type TextFieldIntrinsicElements = keyof Pick<IntrinsicHTMLElements, 'input' | 'textarea'>;
-
-/**
- * The HTML element interfaces that `useTextField` supports based on what is
- * defined for `TextFieldIntrinsicElements`; e.g. `HTMLInputElement`,
- * `HTMLTextAreaElement`.
- */
-type TextFieldHTMLElementType = Pick<IntrinsicHTMLElements, TextFieldIntrinsicElements>;
-
-/**
- * The HTML attributes interfaces that `useTextField` supports based on what
- * is defined for `TextFieldIntrinsicElements`; e.g. `InputHTMLAttributes`,
- * `TextareaHTMLAttributes`.
- */
-type TextFieldHTMLAttributesType = Pick<IntrinsicHTMLAttributes, TextFieldIntrinsicElements>;
-
-/**
- * The type of `inputProps` returned by `useTextField`; e.g. `InputHTMLAttributes`,
- * `TextareaHTMLAttributes`.
- */
-type TextFieldInputProps<T extends TextFieldIntrinsicElements> = TextFieldHTMLAttributesType[T];
-
-export interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> extends AriaTextFieldProps<TextFieldHTMLElementType[T]> {
-  /**
-   * The HTML element used to render the input, e.g. 'input', or 'textarea'.
-   * It determines whether certain HTML attributes will be included in `inputProps`.
-   * For example, [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type).
-   * @default 'input'
-   */
-  inputElementType?: T,
-  /**
-   * Controls whether inputted text is automatically capitalized and, if so, in what manner.
-   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize).
-   */
-  autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters',
-  /**
-   * An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).
-   */
-  enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
-}
-
-/**
- * The type of `ref` object that can be passed to `useTextField` based on the given
- * intrinsic HTML element name; e.g.`RefObject<HTMLInputElement>`,
- * `RefObject<HTMLTextAreaElement>`.
- */
-type TextFieldRefObject<T extends TextFieldIntrinsicElements> = RefObject<TextFieldHTMLElementType[T] | null>;
-
-export interface TextFieldAria<T extends TextFieldIntrinsicElements = DefaultElementType> extends ValidationResult {
-  /** Props for the input element. */
-  inputProps: TextFieldInputProps<T>,
-  /** Props for the text field's visible label element, if any. */
-  labelProps: DOMAttributes | LabelHTMLAttributes<HTMLLabelElement>,
-  /** Props for the text field's description element, if any. */
-  descriptionProps: DOMAttributes,
-  /** Props for the text field's error message element, if any. */
-  errorMessageProps: DOMAttributes
-}
-
-/**
- * Provides the behavior and accessibility implementation for a text field.
- * @param props - Props for the text field.
- * @param ref - Ref to the HTML input or textarea element.
- */
-export function useTextField<T extends TextFieldIntrinsicElements = DefaultElementType>(
-  props: AriaTextFieldOptions<T>,
-  ref: TextFieldRefObject<T>
-): TextFieldAria<T> {
-  let {
-    inputElementType = 'input',
-    isDisabled = false,
-    isRequired = false,
-    isReadOnly = false,
-    type = 'text',
-    validationBehavior = 'aria'
-  } = props;
-  let [value, setValue] = useControlledState<string>(props.value, props.defaultValue || '', props.onChange);
-  let {focusableProps} = useFocusable<TextFieldHTMLElementType[T]>(props, ref);
-  let validationState = useFormValidationState({
-    ...props,
-    value
-  });
-  let {isInvalid, validationErrors, validationDetails} = validationState.displayValidation;
-  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
-    ...props,
-    isInvalid,
-    errorMessage: props.errorMessage || validationErrors
-  });
-  let domProps = filterDOMProps(props, {labelable: true});
-
-  const inputOnlyProps = {
-    type,
-    pattern: props.pattern
-  };
-
-  let [initialValue] = useState(value);
-  useFormReset(ref, props.defaultValue ?? initialValue, setValue);
-  useFormValidation(props, validationState, ref);
-
-  return {
-    labelProps,
-    inputProps: mergeProps(
-      domProps,
-      inputElementType === 'input' ? inputOnlyProps : undefined,
-      {
-        disabled: isDisabled,
-        readOnly: isReadOnly,
-        required: isRequired && validationBehavior === 'native',
-        'aria-required': (isRequired && validationBehavior === 'aria') || undefined,
-        'aria-invalid': isInvalid || undefined,
-        'aria-errormessage': props['aria-errormessage'],
-        'aria-activedescendant': props['aria-activedescendant'],
-        'aria-autocomplete': props['aria-autocomplete'],
-        'aria-haspopup': props['aria-haspopup'],
-        'aria-controls': props['aria-controls'],
-        value,
-        onChange: (e: ChangeEvent<HTMLInputElement>) => setValue(getEventTarget(e).value),
-        autoComplete: props.autoComplete,
-        autoCapitalize: props.autoCapitalize,
-        maxLength: props.maxLength,
-        minLength: props.minLength,
-        name: props.name,
-        form: props.form,
-        placeholder: props.placeholder,
-        inputMode: props.inputMode,
-        autoCorrect: props.autoCorrect,
-        spellCheck: props.spellCheck,
-        [parseInt(React.version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: props.enterKeyHint,
-
-        // Clipboard events
-        onCopy: props.onCopy,
-        onCut: props.onCut,
-        onPaste: props.onPaste,
-
-        // Composition events
-        onCompositionEnd: props.onCompositionEnd,
-        onCompositionStart: props.onCompositionStart,
-        onCompositionUpdate: props.onCompositionUpdate,
-
-        // Selection events
-        onSelect: props.onSelect,
-
-        // Input events
-        onBeforeInput: props.onBeforeInput,
-        onInput: props.onInput,
-        ...focusableProps,
-        ...fieldProps
-      }
-    ),
-    descriptionProps,
-    errorMessageProps,
-    isInvalid,
-    validationErrors,
-    validationDetails
-  };
-}