pouncejs/dist/cjs/components/utils/Input/InputElement.js

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireDefault(require("react"));

var _InputContext = require("./InputContext");

var _Box = _interopRequireDefault(require("../../Box"));

var _useTheme = _interopRequireDefault(require("../../../utils/useTheme"));

var InputElement = /*#__PURE__*/_react.default.forwardRef(function InputElement(_ref, ref) {
  var readOnly = _ref.readOnly,
      standalone = _ref.standalone,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["readOnly", "standalone"]);

  var _useInputContext = (0, _InputContext.useInputContext)(),
      disabled = _useInputContext.disabled,
      required = _useInputContext.required,
      invalid = _useInputContext.invalid;

  var theme = (0, _useTheme.default)();
  var pt = standalone ? 14 : 5;
  var pb = standalone ? 14 : 2;
  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
    ref: ref,
    as: "input",
    width: "100%",
    height: "100%",
    px: 4,
    pt: pt,
    pb: pb,
    position: "relative",
    color: "white-200",
    fontSize: "medium",
    fontWeight: "medium",
    backgroundColor: "transparent",
    border: 0,
    _placeholder: {
      opacity: standalone ? 1 : 0,
      color: standalone ? 'gray-300' : 'white-200',
      transition: 'opacity 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
      fontWeight: standalone ? 'normal' : 'medium'
    },
    _focus: {
      '::placeholder': {
        opacity: 0.4,
        color: standalone ? 'white-200' : undefined,
        fontWeight: standalone ? 'medium' : undefined
      }
    } // @ts-ignore `WebkitBoxShadow` and `WebkitTextFillColor` are not part of the TS CSS typings
    ,
    _autofill: {
      WebkitBoxShadow: "0 0 0 30px " + theme.colors['navyblue-600'] + " inset",
      WebkitTextFillColor: theme.colors['white-200'],
      borderRadius: 'medium'
    },
    disabled: disabled,
    "aria-disabled": disabled,
    readOnly: readOnly,
    "aria-readonly": readOnly,
    required: required,
    "aria-required": required,
    "aria-invalid": invalid
  }, rest));
});

var _default = InputElement;
exports.default = _default;