@primer/react/dist/TextInput/TextInput.js

An implementation of GitHub's Primer Design System using React

import React, { useState, useId, useCallback } from 'react';
import { isValidElementType } from 'react-is';
import { clsx } from 'clsx';
import TextInputInnerVisualSlot from '../internal/components/TextInputInnerVisualSlot.js';
import { TextInputWrapper } from '../internal/components/TextInputWrapper.js';
import TextInputAction from '../internal/components/TextInputInnerAction.js';
import UnstyledTextInput from '../internal/components/UnstyledTextInput.js';
import VisuallyHidden from '../_VisuallyHidden.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';

// using forwardRef is important so that other components can autofocus the input
const TextInput = /*#__PURE__*/React.forwardRef(({
  icon: IconComponent,
  leadingVisual: LeadingVisual,
  trailingVisual: TrailingVisual,
  trailingAction,
  block,
  className,
  contrast,
  disabled,
  loading,
  loaderPosition = 'auto',
  loaderText = 'Loading',
  monospace,
  validationStatus,
  size: sizeProp,
  onFocus,
  onBlur,
  // start deprecated props
  variant: variantProp,
  width: widthProp,
  minWidth: minWidthProp,
  maxWidth: maxWidthProp,
  // end deprecated props
  type = 'text',
  required,
  ...inputProps
}, ref) => {
  const [isInputFocused, setIsInputFocused] = useState(false);
  const inputRef = useProvidedRefOrCreate(ref);
  // this class is necessary to style FilterSearch, plz no touchy!
  const wrapperClasses = clsx(className, 'TextInput-wrapper');
  const showLeadingLoadingIndicator = loading && (loaderPosition === 'leading' || Boolean(LeadingVisual && loaderPosition !== 'trailing'));
  const showTrailingLoadingIndicator = loading && (loaderPosition === 'trailing' || Boolean(loaderPosition === 'auto' && !LeadingVisual));

  // Date/time input types that have segment-based focus
  const isSegmentedInputType = type === 'date' || type === 'time' || type === 'datetime-local';
  const focusInput = e => {
    // Don't call focus() if the input itself was clicked on date/time inputs.
    if (e.target !== inputRef.current || !isSegmentedInputType) {
      var _inputRef$current;
      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
    }
  };
  const leadingVisualId = useId();
  const trailingVisualId = useId();
  const loadingId = useId();
  const inputDescribedBy = clsx(inputProps['aria-describedby'], LeadingVisual && leadingVisualId, TrailingVisual && trailingVisualId, loading && loadingId) || undefined;
  const handleInputFocus = useCallback(e_0 => {
    setIsInputFocused(true);
    onFocus && onFocus(e_0);
  }, [onFocus]);
  const handleInputBlur = useCallback(e_1 => {
    setIsInputFocused(false);
    onBlur && onBlur(e_1);
  }, [onBlur]);
  return /*#__PURE__*/jsxs(TextInputWrapper, {
    block: block,
    className: wrapperClasses,
    validationStatus: validationStatus,
    contrast: contrast,
    disabled: disabled,
    monospace: monospace,
    size: sizeProp,
    width: widthProp,
    minWidth: minWidthProp,
    maxWidth: maxWidthProp,
    variant: variantProp,
    hasLeadingVisual: Boolean(LeadingVisual || showLeadingLoadingIndicator),
    hasTrailingVisual: Boolean(TrailingVisual || showTrailingLoadingIndicator),
    hasTrailingAction: Boolean(trailingAction),
    isInputFocused: isInputFocused,
    onClick: focusInput,
    "aria-busy": Boolean(loading),
    children: [IconComponent && /*#__PURE__*/jsx(IconComponent, {
      className: "TextInput-icon"
    }), /*#__PURE__*/jsx(TextInputInnerVisualSlot, {
      visualPosition: "leading",
      showLoadingIndicator: showLeadingLoadingIndicator,
      hasLoadingIndicator: typeof loading === 'boolean',
      id: leadingVisualId,
      children: typeof LeadingVisual !== 'string' && isValidElementType(LeadingVisual) ? /*#__PURE__*/jsx(LeadingVisual, {}) : LeadingVisual
    }), /*#__PURE__*/jsx(UnstyledTextInput
    // @ts-expect-error it needs a non nullable ref
    , {
      ref: inputRef,
      disabled: disabled,
      onFocus: handleInputFocus,
      onBlur: handleInputBlur,
      type: type,
      "aria-required": required,
      "aria-invalid": validationStatus === 'error' ? 'true' : undefined,
      ...inputProps,
      "aria-describedby": inputDescribedBy,
      "data-component": "input"
    }), loading && /*#__PURE__*/jsx(VisuallyHidden, {
      id: loadingId,
      children: loaderText
    }), /*#__PURE__*/jsx(TextInputInnerVisualSlot, {
      visualPosition: "trailing",
      showLoadingIndicator: showTrailingLoadingIndicator,
      hasLoadingIndicator: typeof loading === 'boolean',
      id: trailingVisualId,
      "data-testid": "text-input-trailing-visual",
      children: typeof TrailingVisual !== 'string' && isValidElementType(TrailingVisual) ? /*#__PURE__*/jsx(TrailingVisual, {}) : TrailingVisual
    }), trailingAction]
  });
});
TextInput.displayName = 'TextInput';
var TextInput$1 = Object.assign(TextInput, {
  __SLOT__: Symbol('TextInput'),
  Action: TextInputAction
});

export { TextInput$1 as default };