@primer/react/lib-esm/internal/components/TextInputWrapper.js

An implementation of GitHub's Primer Design System using React

import React from 'react';
import styled from 'styled-components';
import { width, minWidth, maxWidth } from 'styled-system';
import { get } from '../../constants.js';
import sx from '../../sx.js';
import { TEXT_INPUT_CSS_MODULES_FEATURE_FLAG } from './UnstyledTextInput.js';
import { toggleStyledComponent } from '../utils/toggleStyledComponent.js';
import '../../FeatureFlags/FeatureFlags.js';
import { useFeatureFlag } from '../../FeatureFlags/useFeatureFlag.js';
import '../../FeatureFlags/DefaultFeatureFlags.js';
import { clsx } from 'clsx';
import styles from './TextInputWrapper.module.css.js';

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const StyledTextInputBaseWrapper = toggleStyledComponent(TEXT_INPUT_CSS_MODULES_FEATURE_FLAG, 'span', styled.span.withConfig({
  displayName: "TextInputWrapper__StyledTextInputBaseWrapper",
  componentId: "sc-1mqhpbi-0"
})(["font-size:", ";line-height:var(--base-size-20);color:", ";vertical-align:middle;background-color:", ";border:1px solid var(--control-borderColor-rest,", ");border-radius:", ";outline:none;box-shadow:", ";display:inline-flex;align-items:stretch;min-height:var(--base-size-32);overflow:hidden;input,textarea{cursor:text;}select{cursor:pointer;}input,textarea,select{&::placeholder{color:var(---control-fgColor-placeholder,", ");}}&:where([data-trailing-action][data-focused]),&:where(:not([data-trailing-action]):focus-within){border-color:", ";outline:2px solid ", ";outline-offset:-1px;}> textarea{padding:var(--base-size-12);}&:where([data-contrast]){background-color:", ";}&:where([data-disabled]){color:", ";background-color:", ";box-shadow:none;border-color:var(--control-borderColor-disabled,", ");input,textarea,select{cursor:not-allowed;}}&:where([data-monospace]){font-family:", ";}&:where([data-validation='error']){border-color:", ";&:where([data-trailing-action][data-focused]),&:where(:not([data-trailing-action])):focus-within{border-color:", ";outline:2px solid ", ";outline-offset:-1px;}}&:where([data-validation='success']){border-color:", ";}&:where([data-block]){width:100%;display:flex;align-self:stretch;}@media (min-width:", "){font-size:var(--text-body-size-medium);}--inner-action-size:var(--base-size-24);&:where([data-size='small']){--inner-action-size:var(--base-size-20);min-height:var(--base-size-28);padding-top:3px;padding-right:var(--base-size-8);padding-bottom:3px;padding-left:var(--base-size-8);font-size:var(--text-body-size-small);line-height:var(--base-size-20);}&:where([data-size='large']){--inner-action-size:var(--base-size-28);height:var(--base-size-40);padding-top:10px;padding-right:var(--base-size-8);padding-bottom:10px;padding-left:var(--base-size-8);}&:where([data-variant='small']){min-height:28px;padding-top:3px;padding-right:var(--base-size-8);padding-bottom:3px;padding-left:var(--base-size-8);font-size:(--text-body-size-small);line-height:var(--base-size-20);}&:where([data-variant='large']){padding-top:10px;padding-right:var(--base-size-8);padding-bottom:10px;padding-left:var(--base-size-8);font-size:var(--text-title-size-medium);}&{", " ", " ", " ", "}"], get('fontSizes.1'), get('colors.fg.default'), get('colors.canvas.default'), get('colors.border.default'), get('radii.2'), get('shadows.primer.shadow.inset'), get('colors.fg.muted'), get('colors.accent.fg'), get('colors.accent.fg'), get('colors.canvas.inset'), get('colors.primer.fg.disabled'), get('colors.input.disabledBg'), get('colors.border.default'), get('fonts.mono'), get('colors.danger.emphasis'), get('colors.accent.fg'), get('colors.accent.fg'), get('colors.success.emphasis'), get('breakpoints.1'), width, minWidth, maxWidth, sx));
const TextInputBaseWrapper = /*#__PURE__*/React.forwardRef(function TextInputBaseWrapper({
  className,
  style,
  variant,
  size,
  isInputFocused,
  hasTrailingAction,
  validationStatus,
  disabled,
  contrast,
  monospace,
  block,
  width,
  minWidth,
  maxWidth,
  ...restProps
}, forwardRef) {
  const enabled = useFeatureFlag(TEXT_INPUT_CSS_MODULES_FEATURE_FLAG);
  const widthProps = enabled ? {} : {
    width,
    minWidth,
    maxWidth
  };
  return /*#__PURE__*/React.createElement(StyledTextInputBaseWrapper, _extends({
    ref: forwardRef,
    className: clsx(className, enabled && styles.TextInputBaseWrapper),
    "data-block": block || undefined,
    "data-contrast": contrast || undefined,
    "data-disabled": disabled || undefined,
    "data-focused": isInputFocused || undefined,
    "data-monospace": monospace || undefined,
    "data-size": size || undefined,
    "data-trailing-action": hasTrailingAction || undefined,
    "data-validation": validationStatus || undefined,
    "data-variant": variant || undefined,
    style: enabled && typeof width === 'string' ? {
      width,
      ...style
    } : style
  }, widthProps, restProps));
});
TextInputBaseWrapper.displayName = 'TextInputBaseWrapper';
const StyledTextInputWrapper = toggleStyledComponent(TEXT_INPUT_CSS_MODULES_FEATURE_FLAG, TextInputBaseWrapper, styled(TextInputBaseWrapper).withConfig({
  displayName: "TextInputWrapper__StyledTextInputWrapper",
  componentId: "sc-1mqhpbi-1"
})(["background-repeat:no-repeat;background-position:right 8px center;& > :not(:last-child){margin-right:", ";}.TextInput-icon,.TextInput-action{align-self:center;color:", ";flex-shrink:0;}padding-right:0;padding-left:0;> input,> select{padding-right:0;padding-left:0;}&:where([data-leading-visual]){padding-left:var(--base-size-12);}&:where([data-trailing-visual]:not([data-trailing-action])){padding-right:var(--base-size-12);}&:where(:not([data-leading-visual])) > input,&:where(:not([data-leading-visual])) > select{padding-left:var(--base-size-12);}&:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,&:where(:not([data-trailing-visual]):not([data-trailing-action])) > select{padding-right:var(--base-size-12);}&{", "}"], get('space.2'), get('colors.fg.muted'), sx));
const TextInputWrapper = /*#__PURE__*/React.forwardRef(function TextInputWrapper({
  className,
  hasLeadingVisual,
  hasTrailingVisual,
  ...restProps
}, forwardRef) {
  const enabled = useFeatureFlag(TEXT_INPUT_CSS_MODULES_FEATURE_FLAG);
  if (enabled) {
    return /*#__PURE__*/React.createElement(TextInputBaseWrapper, _extends({
      ref: forwardRef,
      className: clsx(className, styles.TextInputWrapper),
      "data-leading-visual": hasLeadingVisual || undefined,
      "data-trailing-visual": hasTrailingVisual || undefined
    }, restProps));
  } else {
    return /*#__PURE__*/React.createElement(StyledTextInputWrapper, _extends({
      ref: forwardRef,
      className: className,
      "data-leading-visual": hasLeadingVisual || undefined,
      "data-trailing-visual": hasTrailingVisual || undefined
    }, restProps));
  }
});

export { TextInputBaseWrapper, TextInputWrapper, TextInputWrapper as default };