@react-spectrum/textfield 3.0.0-nightly-641446f65-240905

package/src/TextArea.tsx

@@ -0,0 +1,97 @@
+/*
+ * 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 {chain, useLayoutEffect} from '@react-aria/utils';
+import React, {Ref, useCallback, useRef} from 'react';
+import {SpectrumTextAreaProps, TextFieldRef} from '@react-types/textfield';
+import {TextFieldBase} from './TextFieldBase';
+import {useControlledState} from '@react-stately/utils';
+import {useFormProps} from '@react-spectrum/form';
+import {useProviderProps} from '@react-spectrum/provider';
+import {useTextField} from '@react-aria/textfield';
+
+function TextArea(props: SpectrumTextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {
+  props = useProviderProps(props);
+  props = useFormProps(props);
+  let {
+    isDisabled = false,
+    isQuiet = false,
+    isReadOnly = false,
+    isRequired = false,
+    onChange,
+    ...otherProps
+  } = props;
+
+  // not in stately because this is so we know when to re-measure, which is a spectrum design
+  let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue ?? '', () => {});
+  let inputRef = useRef<HTMLTextAreaElement>(null);
+
+  let onHeightChange = useCallback(() => {
+    // Quiet textareas always grow based on their text content.
+    // Standard textareas also grow by default, unless an explicit height is set.
+    if ((isQuiet || !props.height) && inputRef.current) {
+      let input = inputRef.current;
+      let prevAlignment = input.style.alignSelf;
+      let prevOverflow = input.style.overflow;
+      // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.
+      // The measure/applied height is also incorrect/reset if we turn on and off
+      // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062
+      let isFirefox = 'MozAppearance' in input.style;
+      if (!isFirefox) {
+        input.style.overflow = 'hidden';
+      }
+      input.style.alignSelf = 'start';
+      input.style.height = 'auto';
+      // offsetHeight - clientHeight accounts for the border/padding.
+      input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;
+      input.style.overflow = prevOverflow;
+      input.style.alignSelf = prevAlignment;
+    }
+  }, [isQuiet, inputRef, props.height]);
+
+  useLayoutEffect(() => {
+    if (inputRef.current) {
+      onHeightChange();
+    }
+  }, [onHeightChange, inputValue, inputRef]);
+
+  if (props.placeholder) {
+    console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text');
+  }
+
+  let result = useTextField({
+    ...props,
+    onChange: chain(onChange, setInputValue),
+    inputElementType: 'textarea'
+  }, inputRef);
+
+  return (
+    <TextFieldBase
+      {...otherProps}
+      ref={ref}
+      inputRef={inputRef}
+      {...result}
+      multiLine
+      isDisabled={isDisabled}
+      isQuiet={isQuiet}
+      isReadOnly={isReadOnly}
+      isRequired={isRequired} />
+  );
+}
+
+/**
+ * TextAreas are multiline text inputs, useful for cases where users have
+ * a sizable amount of text to enter. They allow for all customizations that
+ * are available to text fields.
+ */
+let _TextArea = React.forwardRef(TextArea);
+export {_TextArea as TextArea};

package/src/TextField.tsx

@@ -0,0 +1,46 @@
+/*
+ * 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 React, {forwardRef, Ref, useRef} from 'react';
+import {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';
+import {TextFieldBase} from './TextFieldBase';
+import {useFormProps} from '@react-spectrum/form';
+import {useProviderProps} from '@react-spectrum/provider';
+import {useTextField} from '@react-aria/textfield';
+
+function TextField(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {
+  props = useProviderProps(props);
+  props = useFormProps(props);
+
+  let inputRef = useRef<HTMLInputElement>(null);
+  let result = useTextField(props, inputRef);
+
+  if (props.placeholder) {
+    console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text');
+  }
+
+  return (
+    <TextFieldBase
+      {...props}
+      {...result}
+      ref={ref}
+      inputRef={inputRef} />
+  );
+}
+
+/**
+ * TextFields are text inputs that allow users to input custom text entries
+ * with a keyboard. Various decorations can be displayed around the field to
+ * communicate the entry requirements.
+ */
+const _TextField = forwardRef(TextField);
+export {_TextField as TextField};

package/src/TextFieldBase.tsx

@@ -0,0 +1,169 @@
+/*
+ * 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';
+import {mergeProps} 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';
+
+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
+}
+
+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 validationIcon = isInvalid ? <AlertMedium /> : <CheckmarkMedium />;
+  let validation = cloneElement(validationIcon, {
+    UNSAFE_className: classNames(
+      styles,
+      'spectrum-Textfield-validationIcon',
+      validationIconClassName
+    )
+  });
+
+  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>
+  );
+}
+
+const _TextFieldBase = forwardRef(TextFieldBase);
+export {_TextFieldBase as TextFieldBase};

package/src/index.ts

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+/// <reference types="css-module-types" />
+
+export {TextArea} from './TextArea';
+export {TextField} from './TextField';
+export {TextFieldBase} from './TextFieldBase';
+export type {SpectrumTextFieldProps, SpectrumTextAreaProps} from '@react-types/textfield';