Function TextFieldComponent

packages/shared/src/components/fields/TextField.tsx:52–267

(
  {
    className = {},
    inputId,
    name,
    label,
    maxLength,
    showMaxLength = true,
    value,
    saveHintSpace = false,
    progress,
    hint,
    hintIcon,
    valid,
    validityChanged,
    valueChanged,
    placeholder,
    style,
    fieldType = 'primary',
    fieldSize,
    variant = FieldVariant.Filled,
    isLocked,
    readOnly = isLocked,
    leftIcon,
    actionButton,
    disabled,
    rightIcon,
    required,
    pressed,
    onBlur: onExternalBlur,
    focused: focusedProp,
    inputRef: inputRefProp,
    ...props
  }: TextFieldProps,
  ref: ForwardedRef<HTMLDivElement>,
)

}

function TextFieldComponent(
  {
    className = {},
    inputId,
    name,
    label,
    maxLength,
    showMaxLength = true,
    value,
    saveHintSpace = false,
    progress,
    hint,
    hintIcon,
    valid,
    validityChanged,
    valueChanged,
    placeholder,
    style,
    fieldType = 'primary',
    fieldSize,
    variant = FieldVariant.Filled,
    isLocked,
    readOnly = isLocked,
    leftIcon,
    actionButton,
    disabled,
    rightIcon,
    required,
    pressed,
    onBlur: onExternalBlur,
    focused: focusedProp,
    inputRef: inputRefProp,
    ...props
  }: TextFieldProps,
  ref: ForwardedRef<HTMLDivElement>,
): ReactElement {
  const {
    validInput,
    focused: focusedHook,
    hasInput,
    focusInput,
    inputRef,
    onFocus,
    onBlur,
    onInput,
    inputLength,
  } = useInputFieldFunctions({
    value,
    valueChanged,
    valid,
    validityChanged,
  });
  const focused = focusedProp || focusedHook;
  const isPrimaryField = fieldType === 'primary';
  const isSecondaryField = fieldType === 'secondary';
  const isTertiaryField = fieldType === 'tertiary';
  const invalid = validInput === false || (required && inputLength === 0);
  const hasValue = hasInput || !!inputRef?.current?.value?.length;