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

An implementation of GitHub's Primer Design System using React

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var styled = require('styled-components');
var styledSystem = require('styled-system');
var constants = require('../../constants.js');
var sx = require('../../sx.js');
var UnstyledTextInput = require('./UnstyledTextInput.js');
var toggleStyledComponent = require('../utils/toggleStyledComponent.js');
require('../../FeatureFlags/FeatureFlags.js');
var useFeatureFlag = require('../../FeatureFlags/useFeatureFlag.js');
require('../../FeatureFlags/DefaultFeatureFlags.js');
var clsx = require('clsx');
var TextInputWrapper_module = require('./TextInputWrapper.module.css.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);

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.toggleStyledComponent(UnstyledTextInput.TEXT_INPUT_CSS_MODULES_FEATURE_FLAG, 'span', styled__default.default.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);}&{", " ", " ", " ", "}"], constants.get('fontSizes.1'), constants.get('colors.fg.default'), constants.get('colors.canvas.default'), constants.get('colors.border.default'), constants.get('radii.2'), constants.get('shadows.primer.shadow.inset'), constants.get('colors.fg.muted'), constants.get('colors.accent.fg'), constants.get('colors.accent.fg'), constants.get('colors.canvas.inset'), constants.get('colors.primer.fg.disabled'), constants.get('colors.input.disabledBg'), constants.get('colors.border.default'), constants.get('fonts.mono'), constants.get('colors.danger.emphasis'), constants.get('colors.accent.fg'), constants.get('colors.accent.fg'), constants.get('colors.success.emphasis'), constants.get('breakpoints.1'), styledSystem.width, styledSystem.minWidth, styledSystem.maxWidth, sx.default));
const TextInputBaseWrapper = /*#__PURE__*/React__default.default.forwardRef(function TextInputBaseWrapper({
  className,
  style,
  variant,
  size,
  isInputFocused,
  hasTrailingAction,
  validationStatus,
  disabled,
  contrast,
  monospace,
  block,
  width,
  minWidth,
  maxWidth,
  ...restProps
}, forwardRef) {
  const enabled = useFeatureFlag.useFeatureFlag(UnstyledTextInput.TEXT_INPUT_CSS_MODULES_FEATURE_FLAG);
  const widthProps = enabled ? {} : {
    width,
    minWidth,
    maxWidth
  };
  return /*#__PURE__*/React__default.default.createElement(StyledTextInputBaseWrapper, _extends({
    ref: forwardRef,
    className: clsx.clsx(className, enabled && TextInputWrapper_module.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.toggleStyledComponent(UnstyledTextInput.TEXT_INPUT_CSS_MODULES_FEATURE_FLAG, TextInputBaseWrapper, styled__default.default(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);}&{", "}"], constants.get('space.2'), constants.get('colors.fg.muted'), sx.default));
const TextInputWrapper = /*#__PURE__*/React__default.default.forwardRef(function TextInputWrapper({
  className,
  hasLeadingVisual,
  hasTrailingVisual,
  ...restProps
}, forwardRef) {
  const enabled = useFeatureFlag.useFeatureFlag(UnstyledTextInput.TEXT_INPUT_CSS_MODULES_FEATURE_FLAG);
  if (enabled) {
    return /*#__PURE__*/React__default.default.createElement(TextInputBaseWrapper, _extends({
      ref: forwardRef,
      className: clsx.clsx(className, TextInputWrapper_module.TextInputWrapper),
      "data-leading-visual": hasLeadingVisual || undefined,
      "data-trailing-visual": hasTrailingVisual || undefined
    }, restProps));
  } else {
    return /*#__PURE__*/React__default.default.createElement(StyledTextInputWrapper, _extends({
      ref: forwardRef,
      className: className,
      "data-leading-visual": hasLeadingVisual || undefined,
      "data-trailing-visual": hasTrailingVisual || undefined
    }, restProps));
  }
});

exports.TextInputBaseWrapper = TextInputBaseWrapper;
exports.TextInputWrapper = TextInputWrapper;
exports.default = TextInputWrapper;