@pingux/astro 1.1.1-alpha.1 → 1.1.1-alpha.5

package/lib/cjs/components/ImageUploadField/ImageUploadField.test.js

@@ -0,0 +1,439 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _ImageUploadField = _interopRequireDefault(require("./ImageUploadField"));
+
+var _index = require("../../index");
+
+var _react3 = require("@emotion/react");
+
+var testLabel = 'test-label';
+var testButtonId = 'image-preview-button';
+var testHelperText = 'test-helper-text';
+var testImageURL = 'test-image-url';
+var testImageURL2 = 'test-image-url2';
+var imageUploadImagePreview = 'image-upload-image-preview';
+var imageUploadNoImagePreview = 'image-upload-no-image-preview';
+var file = new File(['(⌐□_□)'], 'chucknorris.png', {
+  type: 'image/png'
+});
+var notImageFileName = 'nice-song.mp3';
+var notImageFile = new File(['(⌐□_□)'], notImageFileName, {
+  type: 'audio/mpeg'
+});
+var originalValue = global.URL.createObjectURL;
+var defaultProps = {
+  label: testLabel,
+  helperText: testHelperText
+};
+beforeAll(function () {
+  global.URL.createObjectURL = jest.fn(function () {
+    return testImageURL;
+  });
+});
+afterAll(function () {
+  global.URL.createObjectURL = originalValue;
+});
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$renderFn = _ref.renderFn,
+      renderFn = _ref$renderFn === void 0 ? _testWrapper.render : _ref$renderFn;
+
+  return renderFn((0, _react3.jsx)(_ImageUploadField["default"], (0, _extends2["default"])({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+(0, _testAxe["default"])(getComponent);
+test('should render image upload component by default', function () {
+  getComponent();
+
+  var imageUploadButton = _testWrapper.screen.getByTestId(testButtonId);
+
+  expect(imageUploadButton).toBeInstanceOf(HTMLButtonElement);
+  expect(imageUploadButton).toBeInTheDocument();
+});
+test('should render div with icon when focused', function () {
+  getComponent();
+
+  var imageUploadButton = _testWrapper.screen.getByTestId(testButtonId);
+
+  imageUploadButton.focus();
+
+  var hoveredPreview = _testWrapper.screen.getByTestId('image-upload-hovered-preview');
+
+  expect(hoveredPreview).toBeInstanceOf(HTMLDivElement);
+  expect(hoveredPreview).toBeInTheDocument();
+  imageUploadButton.blur();
+  expect(hoveredPreview).not.toBeInTheDocument();
+});
+test('should upload a file', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+  var imageUploadButton, imageUploadInput, imagePreview;
+  return _regenerator["default"].wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          getComponent();
+          imageUploadButton = _testWrapper.screen.getByTestId(testButtonId);
+
+          _userEvent["default"].click(imageUploadButton);
+
+          imageUploadInput = _testWrapper.screen.getByTestId('image-upload-input');
+
+          _react2.fireEvent.change(imageUploadInput, {
+            target: {
+              files: [file]
+            }
+          });
+
+          _context.next = 7;
+          return _testWrapper.screen.findByTestId(imageUploadImagePreview);
+
+        case 7:
+          imagePreview = _context.sent;
+          expect(imagePreview).toBeInTheDocument();
+          expect(imagePreview).toHaveAttribute('src');
+
+        case 10:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _callee);
+})));
+test('should upload a file if label clicked', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+  var imageUploadLabel, imageUploadInput, imagePreview;
+  return _regenerator["default"].wrap(function _callee2$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          getComponent();
+          imageUploadLabel = _testWrapper.screen.getByText(testLabel);
+
+          _userEvent["default"].click(imageUploadLabel);
+
+          imageUploadInput = _testWrapper.screen.getByTestId('image-upload-input');
+
+          _react2.fireEvent.change(imageUploadInput, {
+            target: {
+              files: [file]
+            }
+          });
+
+          _context2.next = 7;
+          return _testWrapper.screen.findByTestId(imageUploadImagePreview);
+
+        case 7:
+          imagePreview = _context2.sent;
+          expect(imagePreview).toBeInTheDocument();
+          expect(imagePreview).toHaveAttribute('src');
+
+        case 10:
+        case "end":
+          return _context2.stop();
+      }
+    }
+  }, _callee2);
+})));
+test('should show the menu if label clicked when preview image exists', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+  var imageUploadLabel, imagePreview;
+  return _regenerator["default"].wrap(function _callee3$(_context3) {
+    while (1) {
+      switch (_context3.prev = _context3.next) {
+        case 0:
+          getComponent();
+          imageUploadLabel = _testWrapper.screen.getByText(testLabel);
+
+          _react2.fireEvent.change(_testWrapper.screen.getByTestId('image-upload-input'), {
+            target: {
+              files: [file]
+            }
+          });
+
+          _context3.next = 5;
+          return _testWrapper.screen.findByTestId(imageUploadImagePreview);
+
+        case 5:
+          imagePreview = _context3.sent;
+          expect(imagePreview).toBeInTheDocument();
+          expect(imagePreview).toHaveAttribute('src');
+
+          _userEvent["default"].click(imageUploadLabel);
+
+          expect(_testWrapper.screen.getByText('Upload New Image')).toBeInTheDocument();
+          expect(_testWrapper.screen.getByText('Remove Image')).toBeInTheDocument();
+
+        case 11:
+        case "end":
+          return _context3.stop();
+      }
+    }
+  }, _callee3);
+})));
+test('should change image if the corresponding menu option clicked', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+  var imagePreview;
+  return _regenerator["default"].wrap(function _callee4$(_context4) {
+    while (1) {
+      switch (_context4.prev = _context4.next) {
+        case 0:
+          getComponent();
+
+          _react2.fireEvent.change(_testWrapper.screen.getByTestId('image-upload-input'), {
+            target: {
+              files: [file]
+            }
+          });
+
+          _context4.next = 4;
+          return _testWrapper.screen.findByTestId(imageUploadImagePreview);
+
+        case 4:
+          imagePreview = _context4.sent;
+          expect(imagePreview).toBeInTheDocument();
+          expect(imagePreview).toHaveAttribute('src');
+          global.URL.createObjectURL.mockImplementationOnce(function () {
+            return testImageURL2;
+          });
+
+          _userEvent["default"].click(_testWrapper.screen.getByTestId(testButtonId));
+
+          _userEvent["default"].click(_testWrapper.screen.getByText('Upload New Image'));
+
+          _react2.fireEvent.change(_testWrapper.screen.getByTestId('image-upload-input'), {
+            target: {
+              files: [file]
+            }
+          });
+
+          expect(imagePreview).toBeInTheDocument();
+          expect(imagePreview).toHaveAttribute('src');
+
+        case 13:
+        case "end":
+          return _context4.stop();
+      }
+    }
+  }, _callee4);
+})));
+test('should call onChange cb (when provided) when a file is uploaded', function () {
+  var testOnChange = jest.fn();
+  getComponent({
+    onChange: testOnChange
+  });
+
+  _react2.fireEvent.change(_testWrapper.screen.getByTestId('image-upload-input'), {
+    target: {
+      files: [file]
+    }
+  });
+
+  expect(testOnChange).toHaveBeenCalledTimes(1);
+});
+test('should call onRemove cb (when provided) when a file is uploaded', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+  var testOnRemove, imagePreview;
+  return _regenerator["default"].wrap(function _callee5$(_context5) {
+    while (1) {
+      switch (_context5.prev = _context5.next) {
+        case 0:
+          testOnRemove = jest.fn();
+          getComponent({
+            onRemove: testOnRemove
+          });
+
+          _react2.fireEvent.change(_testWrapper.screen.getByTestId('image-upload-input'), {
+            target: {
+              files: [file]
+            }
+          });
+
+          _context5.next = 5;
+          return _testWrapper.screen.findByTestId(imageUploadImagePreview);
+
+        case 5:
+          imagePreview = _context5.sent;
+
+          _userEvent["default"].click(_testWrapper.screen.getByTestId(testButtonId));
+
+          expect(imagePreview).toBeInTheDocument();
+
+          _userEvent["default"].click(_testWrapper.screen.getByText('Remove Image'));
+
+          expect(imagePreview).not.toBeInTheDocument();
+          expect(testOnRemove).toHaveBeenCalledTimes(1);
+
+        case 11:
+        case "end":
+          return _context5.stop();
+      }
+    }
+  }, _callee5);
+})));
+test('should not call onChange cb (when provided) if uploaded file is not allowed by fileTypes', function () {
+  var testOnChange = jest.fn();
+  getComponent({
+    onChange: testOnChange,
+    fileTypes: ['audio']
+  });
+
+  _react2.fireEvent.change(_testWrapper.screen.getByTestId('image-upload-input'), {
+    target: {
+      files: [file]
+    }
+  });
+
+  expect(testOnChange).toHaveBeenCalledTimes(0);
+});
+test('should render helper text', function () {
+  getComponent();
+  expect(_testWrapper.screen.getByText(testHelperText)).toBeInTheDocument();
+});
+test('should render the file name when file type is not image', function () {
+  getComponent({
+    fileTypes: ['audio']
+  });
+
+  _react2.fireEvent.change(_testWrapper.screen.getByTestId('image-upload-input'), {
+    target: {
+      files: [notImageFile]
+    }
+  });
+
+  expect(_testWrapper.screen.getByText(notImageFileName)).toBeInTheDocument();
+});
+test('should render default preview image if defined initially', function () {
+  getComponent({
+    defaultPreviewImage: 'some-image'
+  });
+  expect(_testWrapper.screen.queryByTestId(imageUploadImagePreview)).toBeInTheDocument();
+  expect(_testWrapper.screen.queryByTestId(imageUploadNoImagePreview)).not.toBeInTheDocument();
+});
+test('should render new preview image if defined later', function () {
+  var _getComponent = getComponent(),
+      rerender = _getComponent.rerender;
+
+  expect(_testWrapper.screen.queryByTestId(imageUploadNoImagePreview)).toBeInTheDocument();
+  expect(_testWrapper.screen.queryByTestId(imageUploadImagePreview)).not.toBeInTheDocument();
+  getComponent({
+    defaultPreviewImage: 'some-image'
+  }, {
+    renderFn: rerender
+  });
+  expect(_testWrapper.screen.queryByTestId(imageUploadImagePreview)).toBeInTheDocument();
+  expect(_testWrapper.screen.queryByTestId(imageUploadNoImagePreview)).not.toBeInTheDocument();
+});
+test('should render loader if isLoading prop is true', function () {
+  var _getComponent2 = getComponent(),
+      rerender = _getComponent2.rerender;
+
+  expect(_testWrapper.screen.queryByRole('progressbar')).not.toBeInTheDocument();
+  getComponent({
+    isLoading: true
+  }, {
+    renderFn: rerender
+  });
+  expect(_testWrapper.screen.queryByRole('progressbar')).toBeInTheDocument();
+});
+test('should render loader if isLoading prop is true', function () {
+  var _getComponent3 = getComponent(),
+      rerender = _getComponent3.rerender;
+
+  expect(_testWrapper.screen.queryByRole('progressbar')).not.toBeInTheDocument();
+  getComponent({
+    isLoading: true
+  }, {
+    renderFn: rerender
+  });
+  expect(_testWrapper.screen.queryByRole('progressbar')).toBeInTheDocument();
+});
+test('should render image preview and menu when previewImage prop is supplied', function () {
+  getComponent({
+    previewImage: 'test'
+  });
+  expect(_testWrapper.screen.queryByTestId(imageUploadImagePreview)).toBeInTheDocument();
+  expect(_testWrapper.screen.queryByTestId(imageUploadImagePreview)).toHaveAttribute('src', 'test');
+  expect(_testWrapper.screen.queryByTestId(imageUploadNoImagePreview)).not.toBeInTheDocument();
+
+  _userEvent["default"].click(_testWrapper.screen.getByTestId(testButtonId));
+
+  expect(_testWrapper.screen.getByText('Upload New Image')).toBeInTheDocument();
+  expect(_testWrapper.screen.getByText('Remove Image')).toBeInTheDocument();
+});
+test('loader size can be changed via the prop', function () {
+  var testLoaderSize = 17;
+  getComponent({
+    isLoading: true,
+    loaderSize: testLoaderSize
+  });
+  expect(_testWrapper.screen.getByTestId('image-preview-button__loader')).toHaveStyle({
+    'font-size': "".concat(testLoaderSize, "px")
+  });
+});
+test('should show the menu if label clicked when preview image exists', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+  var customUploadProp, customRemoveProp, imageUploadLabel, imagePreview;
+  return _regenerator["default"].wrap(function _callee6$(_context6) {
+    while (1) {
+      switch (_context6.prev = _context6.next) {
+        case 0:
+          customUploadProp = 'Custom Upload';
+          customRemoveProp = 'Custom Remove';
+          getComponent({
+            uploadItemText: customUploadProp,
+            removeItemText: customRemoveProp
+          });
+          imageUploadLabel = _testWrapper.screen.getByText(testLabel);
+
+          _react2.fireEvent.change(_testWrapper.screen.getByTestId('image-upload-input'), {
+            target: {
+              files: [file]
+            }
+          });
+
+          _context6.next = 7;
+          return _testWrapper.screen.findByTestId(imageUploadImagePreview);
+
+        case 7:
+          imagePreview = _context6.sent;
+          expect(imagePreview).toBeInTheDocument();
+          expect(imagePreview).toHaveAttribute('src');
+
+          _userEvent["default"].click(imageUploadLabel);
+
+          expect(_testWrapper.screen.getByText(customUploadProp)).toBeInTheDocument();
+          expect(_testWrapper.screen.getByText(customRemoveProp)).toBeInTheDocument();
+
+        case 13:
+        case "end":
+          return _context6.stop();
+      }
+    }
+  }, _callee6);
+})));
+test('should render node element if passed as default image', function () {
+  getComponent({
+    defaultPreviewImage: (0, _react3.jsx)(_index.Image, null)
+  });
+
+  var img = _testWrapper.screen.getByRole('img');
+
+  expect(img).toBeInstanceOf(HTMLImageElement);
+  expect(img).toBeInTheDocument();
+});

package/lib/cjs/components/ImageUploadField/ImageUploadFieldBase.js

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _visuallyHidden = require("@react-aria/visually-hidden");
+
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _index = require("../../index");
+
+var _useField2 = _interopRequireDefault(require("../../hooks/useField"));
+
+var _FieldHelperText = _interopRequireDefault(require("../FieldHelperText"));
+
+var _Input = _interopRequireDefault(require("../Input"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Label = _interopRequireDefault(require("../Label"));
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _react2 = require("@emotion/react");
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(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) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+var ImageUploadFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, inputRef) {
+  var children = props.children,
+      fileName = props.fileName,
+      fileTypes = props.fileTypes,
+      handleInputChange = props.handleInputChange,
+      handleLabelClick = props.handleLabelClick,
+      handleOpenMenuChange = props.handleOpenMenuChange,
+      helperText = props.helperText,
+      isImageType = props.isImageType,
+      isMenuOpen = props.isMenuOpen,
+      status = props.status;
+
+  var _useField = (0, _useField2["default"])(_objectSpread({}, (0, _omit["default"])(props, ['onRemove']))),
+      fieldContainerProps = _useField.fieldContainerProps,
+      fieldControlProps = _useField.fieldControlProps,
+      fieldLabelProps = _useField.fieldLabelProps;
+
+  var labelRef = (0, _react.useRef)();
+
+  var _useVisuallyHidden = (0, _visuallyHidden.useVisuallyHidden)(),
+      visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
+
+  var acceptableInputTypes = (0, _react.useMemo)(function () {
+    return "".concat(fileTypes === null || fileTypes === void 0 ? void 0 : fileTypes.join('/*, '), "/*");
+  }, [fileTypes]);
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    variant: "forms.input.wrapper"
+  }, fieldContainerProps), (0, _react2.jsx)(_Label["default"], (0, _extends2["default"])({}, fieldLabelProps, {
+    onClick: handleLabelClick,
+    ref: labelRef
+  })), (0, _react2.jsx)(_index.PopoverMenu, {
+    isOpen: isMenuOpen,
+    onOpenChange: handleOpenMenuChange
+  }, children), (0, _react2.jsx)(_Input["default"], (0, _extends2["default"])({}, fieldControlProps, visuallyHiddenProps, {
+    accept: acceptableInputTypes,
+    "data-testid": "image-upload-input",
+    onChange: handleInputChange,
+    ref: inputRef,
+    type: "file",
+    value: ""
+  })), !isImageType && (0, _react2.jsx)(_FieldHelperText["default"], {
+    status: _statuses["default"].DEFAULT
+  }, fileName), helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
+    status: status
+  }, helperText));
+});
+ImageUploadFieldBase.propTypes = {
+  fileName: _propTypes["default"].string,
+  fileTypes: _propTypes["default"].arrayOf(_propTypes["default"].oneOf(['application', 'audio', 'example', 'application', 'image', 'model', 'text', 'video'])),
+  handleInputChange: _propTypes["default"].func,
+  handleLabelClick: _propTypes["default"].func,
+  handleOpenMenuChange: _propTypes["default"].func,
+  helperText: _propTypes["default"].node,
+  isImageType: _propTypes["default"].bool,
+  isMenuOpen: _propTypes["default"].bool,
+  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"]))
+};
+ImageUploadFieldBase.displayName = 'ImageUploadFieldBase';
+var _default = ImageUploadFieldBase;
+exports["default"] = _default;

package/lib/cjs/components/ImageUploadField/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _ImageUploadField["default"];
+  }
+});
+
+var _ImageUploadField = _interopRequireDefault(require("./ImageUploadField"));

package/lib/cjs/components/Input/Input.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _themeUi = require("theme-ui");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _hooks = require("../../hooks");
+
+var _isValidPositiveInt = _interopRequireDefault(require("../../utils/devUtils/props/isValidPositiveInt"));
+
+var _react2 = require("@emotion/react");
+
+/**
+ * Base input component.
+ *
+ * Accepts relevant styling props from [styled-system](https://styled-system.com/table).
+ * Built on top of [Input from Theme-UI](https://theme-ui.com/components/input/).
+ *
+ * **Note**: It's recommended to use a more specific field component when possible.
+ */
+var Input = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var name = props.name,
+      placeholder = props.placeholder,
+      maxLength = props.maxLength,
+      others = (0, _objectWithoutProperties2["default"])(props, ["name", "placeholder", "maxLength"]);
+  var ariaLabel = props['aria-label'] || name;
+  (0, _hooks.useAriaLabelWarning)('Input', ariaLabel || placeholder);
+
+  if (!ariaLabel && !placeholder) {
+    ariaLabel = 'Input';
+  }
+
+  return (0, _react2.jsx)(_themeUi.Input, (0, _extends2["default"])({
+    "aria-label": ariaLabel,
+    ref: ref,
+    name: name,
+    placeholder: placeholder,
+    maxLength: maxLength === 0 ? 'null' : maxLength
+  }, others));
+});
+Input.displayName = 'Input';
+Input.propTypes = {
+  /** Defines a string value that labels the current element. */
+  'aria-label': _propTypes["default"].string,
+
+  /** Id of input. */
+  id: _propTypes["default"].string,
+
+  /** Name of input. */
+  name: _propTypes["default"].string,
+
+  /** Max length of input value */
+  maxLength: _isValidPositiveInt["default"],
+
+  /** Type of input. Accepts most [HTML input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types) */
+  type: _propTypes["default"].string,
+
+  /** Placeholder for the input */
+  placeholder: _propTypes["default"].string
+};
+var _default = Input;
+exports["default"] = _default;