@react-spectrum/textfield 3.14.4 → 3.15.0

package/src/TextFieldBase.tsx

@@ -1,182 +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 AlertMedium from '@spectrum-icons/ui/AlertMedium';
-import CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';
-import {classNames, createFocusableRef} from '@react-spectrum/utils';
-import {Field} from '@react-spectrum/label';
-// @ts-ignore
-import intlMessages from '../intl/*.json';
-import {mergeProps, useId} from '@react-aria/utils';
-import {PressEvents, RefObject, ValidationResult} from '@react-types/shared';
-import React, {cloneElement, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, Ref, TextareaHTMLAttributes, useImperativeHandle, useRef} from 'react';
-import {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';
-import styles from '@adobe/spectrum-css-temp/components/textfield/vars.css';
-import {useFocusRing} from '@react-aria/focus';
-import {useHover} from '@react-aria/interactions';
-import {useLocalizedStringFormatter} from '@react-aria/i18n';
-
-interface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange' | 'validate'>, PressEvents, Partial<ValidationResult> {
-  wrapperChildren?: ReactElement | ReactElement[],
-  inputClassName?: string,
-  validationIconClassName?: string,
-  multiLine?: boolean,
-  labelProps?: LabelHTMLAttributes<HTMLLabelElement>,
-  inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>,
-  descriptionProps?: HTMLAttributes<HTMLElement>,
-  errorMessageProps?: HTMLAttributes<HTMLElement>,
-  inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement | null>,
-  loadingIndicator?: ReactElement,
-  isLoading?: boolean,
-  disableFocusRing?: boolean
-}
-
-export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {
-  let {
-    validationState = props.isInvalid ? 'invalid' : null,
-    icon,
-    isQuiet = false,
-    isDisabled,
-    multiLine,
-    autoFocus,
-    inputClassName,
-    wrapperChildren,
-    labelProps,
-    inputProps,
-    descriptionProps,
-    errorMessageProps,
-    inputRef: userInputRef,
-    isLoading,
-    loadingIndicator,
-    validationIconClassName,
-    disableFocusRing
-  } = props;
-  let {hoverProps, isHovered} = useHover({isDisabled});
-  let domRef = useRef<HTMLDivElement>(null);
-  let defaultInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
-  let inputRef = userInputRef || defaultInputRef;
-
-  // Expose imperative interface for ref
-  useImperativeHandle(ref, () => ({
-    ...createFocusableRef(domRef, inputRef),
-    select() {
-      if (inputRef.current) {
-        inputRef.current.select();
-      }
-    },
-    getInputElement() {
-      return inputRef.current;
-    }
-  }));
-
-  let ElementType: React.ElementType = multiLine ? 'textarea' : 'input';
-  let isInvalid = validationState === 'invalid' && !isDisabled;
-
-  if (icon) {
-    let UNSAFE_className = classNames(
-      styles,
-      icon.props && (icon.props as any).UNSAFE_className,
-      'spectrum-Textfield-icon'
-    );
-
-    icon = cloneElement(icon, {
-      UNSAFE_className,
-      size: 'S'
-    } as any);
-  }
-
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/textfield');
-  let validId = useId();
-  let validationIcon = isInvalid
-    ? <AlertMedium />
-    : <CheckmarkMedium id={validId} aria-hidden aria-label={stringFormatter.format('valid')} />;
-  let validation = cloneElement(validationIcon, {
-    UNSAFE_className: classNames(
-      styles,
-      'spectrum-Textfield-validationIcon',
-      validationIconClassName
-    )
-  });
-
-  // Add validation icon IDREF to aria-describedby when validationState is valid
-  let inputPropsAriaDescribedBy = inputProps['aria-describedby'];
-  if (
-    !isInvalid && validationState === 'valid' && !isLoading && !isDisabled &&
-    (!inputPropsAriaDescribedBy || !inputPropsAriaDescribedBy.includes(validId))
-  ) {
-    inputProps['aria-describedby'] = [inputPropsAriaDescribedBy, validId].join(' ').trim();
-  }
-
-  let {focusProps, isFocusVisible} = useFocusRing({
-    isTextInput: true,
-    autoFocus
-  });
-
-  let textField = (
-    <div
-      className={
-        classNames(
-          styles,
-          'spectrum-Textfield',
-          {
-            'spectrum-Textfield--invalid': isInvalid,
-            'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,
-            'spectrum-Textfield--loadable': loadingIndicator,
-            'spectrum-Textfield--quiet': isQuiet,
-            'spectrum-Textfield--multiline': multiLine,
-            'focus-ring': !disableFocusRing && isFocusVisible
-          }
-        )
-      }>
-      <ElementType
-        {...mergeProps(inputProps, hoverProps, focusProps)}
-        ref={inputRef as any}
-        rows={multiLine ? 1 : undefined}
-        className={
-          classNames(
-            styles,
-            'spectrum-Textfield-input',
-            {
-              'spectrum-Textfield-inputIcon': icon,
-              'is-hovered': isHovered
-            },
-            inputClassName
-          )
-        } />
-      {icon}
-      {validationState && !isLoading && !isDisabled ? validation : null}
-      {isLoading && loadingIndicator}
-      {wrapperChildren}
-    </div>
-  );
-
-  return (
-    <Field
-      {...props}
-      labelProps={labelProps}
-      descriptionProps={descriptionProps}
-      errorMessageProps={errorMessageProps}
-      wrapperClassName={
-        classNames(
-          styles,
-          'spectrum-Textfield-wrapper',
-          {
-            'spectrum-Textfield-wrapper--quiet': isQuiet
-          }
-        )
-      }
-      showErrorIcon={false}
-      ref={domRef}>
-      {textField}
-    </Field>
-  );
-});