@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/cjs/Input/InputBox.js

@@ -0,0 +1,350 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _tabbable = require("tabbable");
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _system = require("../system");
+
+var _hooks = require("../hooks");
+
+var _Spinner = _interopRequireDefault(require("../Spinner"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _InputContext = _interopRequireDefault(require("./InputContext"));
+
+var _utils = require("./utils");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+// temporary until InputBox is converted to a functional component
+function DocumentEscape(_ref) {
+  var onEscape = _ref.onEscape;
+  (0, _hooks.useDocumentEvent)('keydown', function (event) {
+    if (event.keyCode === 27) {
+      onEscape();
+    }
+  });
+  return null;
+}
+
+var InputBox = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2["default"])(InputBox, _Component);
+
+  function InputBox(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setNode", function (node) {
+      _this.node = node;
+
+      if (_this.props.innerRef) {
+        _this.props.innerRef(node);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getBoxStyles", function () {
+      // allow child components (InputField) to access parent size info
+      return (0, _system.getBoxSize)(_this.props.size);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "focus", function (index) {
+      if (index === void 0) {
+        index = _this.props.focusChildIndex;
+      }
+
+      var node = _this.node;
+
+      if (node && index !== undefined) {
+        var tabbableChildren = (0, _tabbable.tabbable)(node);
+
+        if (tabbableChildren.length > 0) {
+          node = tabbableChildren[index];
+        }
+      }
+
+      if (node && node.focus) {
+        node.focus();
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "blur", function () {
+      if ((0, _utils.isTabbable)(_this.node)) {
+        _this.node.blur();
+      } else {
+        _this.setState({
+          isFocused: false
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleFocus", function (e) {
+      // only call focus method if focus was obtained by this element and not
+      // an inner element that can obtain focus
+      if (_this.props.focusChildrenOnFocus && e.target === _this.node) {
+        _this.focus();
+      }
+
+      if (_this.props.onFocus) {
+        _this.props.onFocus(e);
+      }
+
+      _this.setState({
+        isFocused: true
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleBlur", function (e) {
+      if (_this.props.onBlur) {
+        _this.props.onBlur(e);
+      }
+
+      _this.setState({
+        isFocused: false
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClear", function (e) {
+      if (_this.props.onClear) {
+        _this.props.onClear(e);
+      }
+
+      _this.focus();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseOver", function (e) {
+      if (_this.props.onMouseOver) {
+        _this.props.onMouseOver(e);
+      }
+
+      _this.setState({
+        isHovered: true
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseOut", function (e) {
+      if (_this.props.onMouseOut) {
+        _this.props.onMouseOut(e);
+      }
+
+      _this.setState({
+        isHovered: false
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDocumentEscape", function () {
+      _this.props.onClear();
+    });
+
+    if (props.id) {
+      _utils.inputs[props.id] = (0, _assertThisInitialized2["default"])(_this);
+    }
+
+    _this.state = {
+      isFocused: false,
+      isHovered: false
+    };
+    return _this;
+  }
+
+  var _proto = InputBox.prototype;
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    if (this.props.id) {
+      delete _utils.inputs[this.props.id];
+    }
+  };
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        _this$props$backgroun = _this$props.backgroundColor,
+        backgroundColor = _this$props$backgroun === void 0 ? 'surface' : _this$props$backgroun,
+        children = _this$props.children,
+        disabled = _this$props.disabled,
+        evenPadding = _this$props.evenPadding,
+        focusChildIndex = _this$props.focusChildIndex,
+        focusChildrenOnFocus = _this$props.focusChildrenOnFocus,
+        id = _this$props.id,
+        innerRef = _this$props.innerRef,
+        includeSpacing = _this$props.includeSpacing,
+        isLoading = _this$props.isLoading,
+        naked = _this$props.naked,
+        onClear = _this$props.onClear,
+        onBlur = _this$props.onBlur,
+        onFocus = _this$props.onFocus,
+        renderLeft = _this$props.renderLeft,
+        renderRight = _this$props.renderRight,
+        _this$props$secondary = _this$props.secondaryStroke,
+        secondaryStroke = _this$props$secondary === void 0 ? true : _this$props$secondary,
+        size = _this$props.size,
+        state = _this$props.state,
+        subdued = _this$props.subdued,
+        _this$props$tabIndex = _this$props.tabIndex,
+        tabIndex = _this$props$tabIndex === void 0 ? -1 : _this$props$tabIndex,
+        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["backgroundColor", "children", "disabled", "evenPadding", "focusChildIndex", "focusChildrenOnFocus", "id", "innerRef", "includeSpacing", "isLoading", "naked", "onClear", "onBlur", "onFocus", "renderLeft", "renderRight", "secondaryStroke", "size", "state", "subdued", "tabIndex"]);
+    var _this$state = this.state,
+        isFocused = _this$state.isFocused,
+        isHovered = _this$state.isHovered;
+
+    var _this$getBoxStyles = this.getBoxStyles(),
+        boxSize = _this$getBoxStyles.boxSize,
+        fontSize = _this$getBoxStyles.fontSize,
+        lineHeight = _this$getBoxStyles.lineHeight,
+        paddingHorizontal = _this$getBoxStyles.paddingHorizontal,
+        paddingVertical = _this$getBoxStyles.paddingVertical;
+
+    var dynamicProps = {
+      backgroundColor: backgroundColor,
+      paddingVertical: paddingVertical,
+      fontSize: fontSize,
+      lineHeight: lineHeight,
+      tabIndex: tabIndex,
+      zIndex: isFocused || isHovered ? 2 : 1
+    };
+    var renderSideProps = {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: boxSize,
+      height: '100%',
+      position: 'absolute',
+      top: 0
+    };
+    var spacingLeft = renderLeft ? boxSize : paddingHorizontal;
+    var spacingRight = renderRight ? boxSize : paddingHorizontal;
+
+    if (restProps.radius === 'pill') {
+      dynamicProps.paddingLeft = spacingLeft;
+      dynamicProps.paddingRight = spacingRight;
+    } else if (restProps.radius === 'pill-left') {
+      dynamicProps.paddingLeft = spacingLeft;
+      dynamicProps.paddingRight = spacingRight;
+    } else if (restProps.radius === 'pill-right') {
+      dynamicProps.paddingLeft = spacingLeft;
+      dynamicProps.paddingRight = spacingRight;
+    } else {
+      dynamicProps.paddingLeft = spacingLeft;
+      dynamicProps.paddingRight = spacingRight;
+    }
+
+    if (isLoading || onClear) {
+      dynamicProps.paddingRight = boxSize;
+    }
+
+    if (subdued) {
+      dynamicProps.backgroundColor = !disabled && isFocused ? 'highlightSecondary' : !disabled && isHovered ? state ? state + "-1" : 'highlight' : state ? state + "-0" : 'surfaceTertiary';
+    } else if (!naked) {
+      if (secondaryStroke) {
+        dynamicProps.boxShadow = !disabled && isFocused ? '0px 0px 0px 2px var(--colors-separator-focus-secondary)' : undefined;
+      }
+
+      dynamicProps.strokeAlign = 'inside';
+      dynamicProps.strokeWeight = 1;
+      dynamicProps.stroke = !disabled && isFocused ? state || 'separatorFocus' : state || (!disabled && isHovered ? 'separatorHover' : 'separatorSecondary');
+    }
+
+    if (id) {
+      dynamicProps['aria-labelledby'] = id + "-label";
+    }
+
+    if (evenPadding) {
+      dynamicProps.paddingLeft = dynamicProps.paddingVertical;
+      dynamicProps.paddingRight = dynamicProps.paddingVertical;
+    }
+
+    if (includeSpacing) {
+      dynamicProps.spacing = evenPadding ? dynamicProps.paddingVertical : paddingHorizontal;
+    }
+
+    if (disabled) {
+      restProps.cursor = 'not-allowed';
+      restProps.tabIndex = undefined;
+      restProps.opacity = 0.64;
+    } else if (!naked) {
+      if (isHovered && restProps.hover) {
+        Object.assign(restProps, restProps.hover);
+      }
+
+      if (isFocused && restProps.focus) {
+        Object.assign(restProps, restProps.focus);
+      }
+
+      restProps = _objectSpread(_objectSpread({}, restProps), {}, {
+        hover: _objectSpread({
+          strokeAlign: 'inside',
+          strokeWeight: 1
+        }, restProps.hover),
+        focus: _objectSpread({
+          strokeAlign: 'inside',
+          strokeWeight: 1
+        }, restProps.focus)
+      });
+    }
+
+    return /*#__PURE__*/_react["default"].createElement(_InputContext["default"].Provider, {
+      value: this
+    }, /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+      innerRef: this.setNode,
+      id: id,
+      axis: _StackView["default"].HORIZONTAL,
+      alignment: _StackView["default"].CENTER,
+      shrink: 0,
+      minHeight: boxSize,
+      radius: 3,
+      position: "relative",
+      cursor: "text",
+      outline: 0,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      onMouseOver: this.handleMouseOver,
+      onMouseOut: this.handleMouseOut,
+      children: children
+    }, dynamicProps, restProps), renderLeft && /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({}, renderSideProps, {
+      left: 0
+    }), typeof renderLeft === 'function' ? renderLeft(size) : /*#__PURE__*/(0, _react.cloneElement)(renderLeft, {
+      size: renderLeft.props && renderLeft.props.size || size
+    })), children, (isLoading || onClear || renderRight) && /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({}, renderSideProps, {
+      right: 0
+    }), isLoading ? /*#__PURE__*/_react["default"].createElement(_Spinner["default"], {
+      size: size
+    }) : onClear ? /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      icon: {
+        name: 'close'
+      },
+      title: "clear input value",
+      size: size,
+      theme: false,
+      onClick: this.handleClear
+    }) : typeof renderRight === 'function' ? renderRight(size) : /*#__PURE__*/(0, _react.cloneElement)(renderRight, {
+      size: renderRight.props && renderRight.props.size || size
+    })), onClear && /*#__PURE__*/_react["default"].createElement(DocumentEscape, {
+      onEscape: this.handleDocumentEscape
+    })));
+  };
+
+  return InputBox;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(InputBox, "defaultProps", {
+  focusChildrenOnFocus: true,
+  focusChildIndex: 0,
+  size: 'md'
+});
+InputBox.displayName = 'Input.InputBox';
+var _default = InputBox;
+exports["default"] = _default;

package/dist/cjs/Input/InputContext.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var InputContext = /*#__PURE__*/(0, _react.createContext)();
+var _default = InputContext;
+exports["default"] = _default;

package/dist/cjs/Input/InputField.js

@@ -0,0 +1,290 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _system = require("../system");
+
+var _utils = require("../utils");
+
+var _InputContext = _interopRequireDefault(require("./InputContext"));
+
+var _utils2 = require("./utils");
+
+var resetStyles = {
+  appearance: 'none',
+  outline: 0,
+  boxShadow: 'none',
+  MozAppearance: 'textfield',
+  '::-ms-clear': {
+    display: 'none'
+  },
+  '::-webkit-clear-button': {
+    display: 'none'
+  },
+  '::-webkit-inner-spin-button, ::-webkit-outer-spin-button': {
+    display: 'none'
+  },
+  '::-webkit-search-cancel-button': {
+    display: 'none'
+  }
+};
+
+var InputField = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2["default"])(InputField, _Component);
+
+  function InputField(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setNode", function (node) {
+      _this.node = node;
+
+      if (_this.props.innerRef) {
+        _this.props.innerRef(node);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getAutoWidthValue", function (defaultValue) {
+      return _this.props.autoWidth === true ? _this.props.value !== null && _this.props.value !== undefined ? _this.props.value : defaultValue : _this.props.autoWidth;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "preventFocus", function (event) {
+      if (_this.props.highlightOnInteraction && event.target === document.activeElement) {
+        event.preventDefault();
+        (0, _utils.selectFullTextRange)(event.target);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChange", function (event) {
+      if (_this.props.autoWidth !== undefined) {
+        if (_this.props.autoWidth === true) {
+          _this.setWidth(event.target.value);
+        } else {
+          _this.shouldUpdateWidth = true;
+        }
+      }
+
+      if (_this.props.onChange) {
+        _this.props.onChange(event);
+      }
+
+      _this.canHighlight = true;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleKeyDown", function (event) {
+      _this.canHighlight = true;
+
+      if (_this.props.onKeyDown) {
+        _this.props.onKeyDown(event);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleFocus", function (event) {
+      if (_this.props.highlightOnInteraction) {
+        (0, _utils.selectFullTextRange)(event.target);
+      }
+
+      if (_this.inputBox) {
+        _this.inputBox.setState({
+          isFocused: true
+        });
+      }
+
+      if (_this.props.onFocus) {
+        _this.props.onFocus(event);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleBlur", function (event) {
+      _this.canHighlight = false;
+
+      if (_this.props.highlightOnInteraction) {
+        (0, _utils.deselectCurrentTextRange)();
+      }
+
+      if (_this.inputBox) {
+        _this.inputBox.setState({
+          isFocused: false
+        });
+      }
+
+      if (_this.props.autoWidth !== undefined && _this.props.placeholder !== undefined && event.target.value === '') {
+        _this.setWidth(_this.props.placeholder);
+      }
+
+      if (_this.props.onBlur) {
+        _this.props.onBlur(event);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "focus", function () {
+      _this.node.focus();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "blur", function () {
+      _this.node.blur();
+    });
+    _this.state = {
+      isHovered: false
+    };
+    _this.shouldUpdateWidth = false;
+
+    if (props.id) {
+      _utils2.inputs[props.id] = (0, _assertThisInitialized2["default"])(_this);
+    }
+
+    return _this;
+  }
+
+  var _proto = InputField.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    if (this.props.autoWidth !== undefined) {
+      var autoWidthValue = this.getAutoWidthValue(this.props.defaultValue !== undefined ? this.props.defaultValue : this.props.placeholder);
+
+      if (autoWidthValue !== undefined) {
+        this.setWidth(autoWidthValue);
+      }
+    }
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
+    if (this.shouldUpdateWidth || this.props.autoWidth !== undefined && this.props.value !== undefined && this.props.value !== lastProps.value) {
+      this.setWidth(this.getAutoWidthValue(this.props.placeholder));
+      this.shouldUpdateWidth = false;
+    }
+
+    if (this.canHighlight && this.props.highlightOnInteraction) {
+      (0, _utils.selectFullTextRange)(this.node);
+      this.canHighlight = false;
+    }
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    if (this.props.id) {
+      delete _utils2.inputs[this.props.id];
+    }
+  };
+
+  _proto.setWidth = function setWidth(text) {
+    var autoWidthType = this.props.autoWidthType;
+    var textWidth = (0, _utils.getTextWidth)(text, this.node);
+
+    if (textWidth !== this._lastTextWidth) {
+      var cursorWidth = 1;
+
+      var _getComputedStyle = getComputedStyle(this.node),
+          borderLeftWidth = _getComputedStyle.borderLeftWidth,
+          borderRightWidth = _getComputedStyle.borderRightWidth,
+          paddingLeft = _getComputedStyle.paddingLeft,
+          paddingRight = _getComputedStyle.paddingRight;
+
+      var totalWidth = [borderLeftWidth, borderRightWidth, cursorWidth, paddingLeft, paddingRight, textWidth].reduce(function (total, val) {
+        return total + parseInt(val, 10);
+      }, 0);
+
+      if (autoWidthType === 'width' || autoWidthType === 'both') {
+        this.node.style.width = totalWidth + "px";
+      }
+
+      if (autoWidthType === 'basis' || autoWidthType === 'both') {
+        this.node.style.flexBasis = totalWidth + "px";
+      }
+
+      this._lastTextWidth = textWidth;
+    }
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var _this$props = this.props,
+        autoWidth = _this$props.autoWidth,
+        autoWidthType = _this$props.autoWidthType,
+        css = _this$props.css,
+        disabled = _this$props.disabled,
+        innerRef = _this$props.innerRef,
+        onBlur = _this$props.onBlur,
+        onChange = _this$props.onChange,
+        onFocus = _this$props.onFocus,
+        onKeyDown = _this$props.onKeyDown,
+        onMouseDown = _this$props.onMouseDown,
+        onMouseUp = _this$props.onMouseUp,
+        placeholderColor = _this$props.placeholderColor,
+        highlightOnInteraction = _this$props.highlightOnInteraction,
+        size = _this$props.size,
+        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["autoWidth", "autoWidthType", "css", "disabled", "innerRef", "onBlur", "onChange", "onFocus", "onKeyDown", "onMouseDown", "onMouseUp", "placeholderColor", "highlightOnInteraction", "size"]);
+    var placeholderColorStyles = {
+      '::placeholder': {
+        color: placeholderColor
+      },
+      '::-webkit-input-placeholder': {
+        color: placeholderColor
+      },
+      ':-moz-placeholder': {
+        color: placeholderColor
+      },
+      ':-ms-input-placeholder': {
+        color: placeholderColor
+      }
+    };
+    return /*#__PURE__*/_react["default"].createElement(_InputContext["default"].Consumer, null, function (inputBox) {
+      var _ref = inputBox ? inputBox.getBoxStyles() : (0, _system.getBoxSize)(size),
+          fontSize = _ref.fontSize,
+          lineHeight = _ref.lineHeight;
+
+      if (!_this2.inputBox) {
+        _this2.inputBox = inputBox;
+      }
+
+      if (_utils2.inputLabels[_this2.props.id]) {
+        restProps['aria-labelledby'] = _this2.props.id + "-label";
+      }
+
+      if (_this2.state.isHovered && restProps.hover) {
+        Object.assign(restProps, restProps.hover);
+      }
+
+      return /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
+        as: "input",
+        innerRef: _this2.setNode,
+        disabled: disabled,
+        grow: 1,
+        padding: 0,
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        fontSize: fontSize,
+        lineHeight: lineHeight,
+        minHeight: lineHeight,
+        onFocus: _this2.handleFocus,
+        onBlur: _this2.handleBlur,
+        onChange: _this2.handleChange,
+        onKeyDown: _this2.handleKeyDown,
+        onMouseDown: _this2.preventFocus,
+        onMouseUp: _this2.preventFocus,
+        css: [resetStyles, placeholderColorStyles, css]
+      }, restProps));
+    });
+  };
+
+  return InputField;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(InputField, "defaultProps", {
+  placeholderColor: 'foregroundTertiary',
+  autoWidthType: 'both'
+});
+InputField.displayName = 'Input.InputField';
+var _default = InputField;
+exports["default"] = _default;