@spothero/ui 17.1.0-beta.0 → 17.1.0-beta.3

package/dist/components/Datepicker/Single/components/DatepickerControl.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@chakra-ui/react");
+
+var _components = require("../../common/components");
+
+var _propTypes = require("../utils/propTypes");
+
+var _DatepickerContext = require("../DatepickerContext");
+
+var DatepickerControl = function DatepickerControl(_ref) {
+  var value = _ref.value,
+      useInputIcons = _ref.useInputIcons,
+      inputLabelText = _ref.inputLabelText,
+      inputPlaceholderText = _ref.inputPlaceholderText,
+      errorText = _ref.errorText,
+      datepickerControlOverrides = _ref.datepickerControlOverrides;
+
+  var _useDatepicker = (0, _DatepickerContext.useDatepicker)(),
+      isInvalid = _useDatepicker.isInvalid,
+      onOpen = _useDatepicker.disclosure.onOpen;
+
+  return /*#__PURE__*/_react.default.createElement(_react2.Flex, (0, _extends2.default)({
+    "data-testid": "Datepicker-ControlsContainer"
+  }, datepickerControlOverrides === null || datepickerControlOverrides === void 0 ? void 0 : datepickerControlOverrides.controlsContainer), /*#__PURE__*/_react.default.createElement(_components.DatepickerInput, {
+    asSingle: true,
+    onClick: onOpen,
+    value: value,
+    useInputIcons: useInputIcons,
+    isInputInvalid: isInvalid,
+    inputLabelText: inputLabelText,
+    placeholderText: inputPlaceholderText,
+    errorText: errorText,
+    context: _DatepickerContext.DatepickerContext,
+    inputComponentOverrides: datepickerControlOverrides === null || datepickerControlOverrides === void 0 ? void 0 : datepickerControlOverrides.inputComponentOverrides
+  }));
+};
+
+var _default = DatepickerControl;
+exports.default = _default;

package/dist/components/Datepicker/Single/components/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DateRow", {
+  enumerable: true,
+  get: function get() {
+    return _DateRow.default;
+  }
+});
+Object.defineProperty(exports, "DatepickerContainer", {
+  enumerable: true,
+  get: function get() {
+    return _DatepickerContainer.default;
+  }
+});
+Object.defineProperty(exports, "DatepickerControl", {
+  enumerable: true,
+  get: function get() {
+    return _DatepickerControl.default;
+  }
+});
+
+var _DateRow = _interopRequireDefault(require("./DateRow"));
+
+var _DatepickerControl = _interopRequireDefault(require("./DatepickerControl"));
+
+var _DatepickerContainer = _interopRequireDefault(require("./DatepickerContainer"));

package/dist/components/Datepicker/Single/utils/propTypes.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.datepickerOverridesProps = exports.datepickerControlOverridesProps = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _sharedPropTypes = require("../../common/utils/sharedPropTypes");
+
+var datepickerControlOverridesProps = _propTypes.default.shape({
+  /**
+   * Overrides for the Flex component that wraps the input field,
+   * see https://chakra-ui.com/docs/components/flex/props for more
+   */
+  controlsContainer: _propTypes.default.object,
+
+  /** Overrides for the Input component */
+  inputComponentOverrides: _sharedPropTypes.inputComponentOverridesProps
+});
+
+exports.datepickerControlOverridesProps = datepickerControlOverridesProps;
+
+var datepickerOverridesProps = _propTypes.default.shape({
+  /**
+   * Overrides for the parent Popover component,
+   * see https://chakra-ui.com/docs/components/popover/props for more
+   */
+  popover: _propTypes.default.object,
+
+  /**
+   * Overrides for the Portal component that wraps the Datepicker calendar Popover, see https://chakra-ui.com/docs/components/portal/props for more
+   */
+  portal: _propTypes.default.object,
+
+  /**
+   * Overrides for the PopoverContent component,
+   * see https://chakra-ui.com/docs/components/popover/props#other-props for more
+   */
+  popoverContent: _propTypes.default.object,
+
+  /** An optional Object containing style and prop overrides to be applied to the Form and Control component */
+  datepickerControlOverrides: datepickerControlOverridesProps,
+
+  /** An optional Object containing style and prop overrides to be applied to the Popover body, Calendar, and Header componets */
+  datepickerBodyOverrides: _sharedPropTypes.datepickerBodyOverridesProps
+});
+
+exports.datepickerOverridesProps = datepickerOverridesProps;
+var props = {
+  /** An optional (pre-selected) Selected Date to populate the Datepicker with  */
+  initialValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.instanceOf(Date)]),
+
+  /** A string in the format 'MM/DD/YYYY' representing the date where days before it should be disabled in the calendar */
+  disableBefore: _propTypes.default.string,
+
+  /** A string in the format 'MM/DD/YYYY' representing the date where days after it should be disabled in the calendar. */
+  disableAfter: _propTypes.default.string,
+
+  /** A callback function to execute on changes */
+  onDateChange: _propTypes.default.func,
+
+  /** Whether to render the Popover within a Portal or not */
+  usePortal: _propTypes.default.bool,
+
+  /** Whether to display the Selected Date Input as invalid or not */
+  isInvalid: _propTypes.default.bool,
+
+  /** Whether to show the Calendar Icon in the Input field. */
+  useInputIcons: _propTypes.default.bool,
+
+  /** A string to use as the Input form label */
+  dateInputLabelText: _propTypes.default.string,
+
+  /** A string to use as the Input placeholder text */
+  dateInputPlaceholderText: _propTypes.default.string,
+
+  /** A string to use as the Input form Error Text */
+  dateInputErrorText: _propTypes.default.string,
+
+  /** An optional Object containing style and prop overrides to be applied to the component and child components */
+  datepickerOverrides: datepickerOverridesProps
+};
+var _default = props;
+exports.default = _default;

package/dist/components/Datepicker/{components → common/components}/DatepickerDays.js

@@ -23,18 +23,14 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@chakra-ui/react");
 
-var _DatepickerContext = require("../DatepickerContext");
-
-var _constants = require("../constants");
+var _constants = require("../utils/constants");
 
 var _getWeeksOfMonth = require("../utils/getWeeksOfMonth");
 
-var _propTypes = require("../utils/propTypes");
+var _sharedPropTypes = require("../utils/sharedPropTypes");
 
 var _generalCalculations = require("../utils/generalCalculations");
 
-var _DateRow = _interopRequireDefault(require("./DateRow"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -72,13 +68,15 @@ var getDatepickerCalendarThStyleProps = function getDatepickerCalendarThStylePro
 };
 
 var DatepickerDays = function DatepickerDays(_ref) {
-  var datepickerDaysOverrides = _ref.datepickerDaysOverrides;
+  var datepickerDaysOverrides = _ref.datepickerDaysOverrides,
+      context = _ref.context,
+      DateRow = _ref.DateRow;
 
-  var _useDatepicker = (0, _DatepickerContext.useDatepicker)(),
-      _useDatepicker$today = (0, _slicedToArray2.default)(_useDatepicker.today, 1),
-      today = _useDatepicker$today[0],
-      _useDatepicker$date = (0, _slicedToArray2.default)(_useDatepicker.date, 1),
-      date = _useDatepicker$date[0];
+  var _useContext = (0, _react.useContext)(context),
+      _useContext$today = (0, _slicedToArray2.default)(_useContext.today, 1),
+      today = _useContext$today[0],
+      _useContext$date = (0, _slicedToArray2.default)(_useContext.date, 1),
+      date = _useContext$date[0];
 
   var _useState = (0, _react.useState)(),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -90,17 +88,22 @@ var DatepickerDays = function DatepickerDays(_ref) {
   }, [date]);
   return /*#__PURE__*/_react.default.createElement(_react2.Table, (0, _extends2.default)({
     role: "grid",
-    "aria-labelledby": "id-grid-label"
-  }, datepickerCalendarTableStyleProps, datepickerDaysOverrides === null || datepickerDaysOverrides === void 0 ? void 0 : datepickerDaysOverrides.table), /*#__PURE__*/_react.default.createElement(_react2.Thead, (0, _extends2.default)({}, datepickerTheadStyleProps, datepickerDaysOverrides === null || datepickerDaysOverrides === void 0 ? void 0 : datepickerDaysOverrides.thead), /*#__PURE__*/_react.default.createElement(_react2.Tr, null, (0, _map.default)(_constants.DAY_NAMES).call(_constants.DAY_NAMES, function (day, index) {
+    "aria-labelledby": "id-grid-label",
+    "data-testid": "DatepickerDays-Table"
+  }, datepickerCalendarTableStyleProps, datepickerDaysOverrides === null || datepickerDaysOverrides === void 0 ? void 0 : datepickerDaysOverrides.table), /*#__PURE__*/_react.default.createElement(_react2.Thead, (0, _extends2.default)({
+    "data-testid": "DatepickerDays-Thead"
+  }, datepickerTheadStyleProps, datepickerDaysOverrides === null || datepickerDaysOverrides === void 0 ? void 0 : datepickerDaysOverrides.thead), /*#__PURE__*/_react.default.createElement(_react2.Tr, {
+    "data-testid": "daysOfWeek-row"
+  }, (0, _map.default)(_constants.DAY_NAMES).call(_constants.DAY_NAMES, function (day, index) {
     return /*#__PURE__*/_react.default.createElement(_react2.Th, (0, _extends2.default)({
       key: index,
       scope: "col",
       abbr: day.full,
       "data-testid": "daysOfWeek-title"
     }, getDatepickerCalendarThStyleProps(today, weeks, index), datepickerDaysOverrides === null || datepickerDaysOverrides === void 0 ? void 0 : datepickerDaysOverrides.th), day.abbv);
-  }))), /*#__PURE__*/_react.default.createElement(_DateRow.default, {
+  }))), /*#__PURE__*/_react.default.createElement(DateRow, {
     dates: weeks !== null && weeks !== void 0 ? weeks : [],
-    dateRowOverrides: datepickerDaysOverrides === null || datepickerDaysOverrides === void 0 ? void 0 : datepickerDaysOverrides.dateRow
+    dateRowOverrides: datepickerDaysOverrides === null || datepickerDaysOverrides === void 0 ? void 0 : datepickerDaysOverrides.dateRowOverrides
   }));
 };
 

package/dist/components/Datepicker/{components → common/components}/DatepickerHeader.js

@@ -1,5 +1,11 @@
 "use strict";
 
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -7,17 +13,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
-var _freeze = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/freeze"));
-
-var _symbol = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/symbol"));
-
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@chakra-ui/react");
 
@@ -25,16 +27,14 @@ var _chevronLeft = _interopRequireDefault(require("@spothero/icons/chevron-left"
 
 var _chevronRight = _interopRequireDefault(require("@spothero/icons/chevron-right"));
 
-var _constants = require("../constants");
+var _constants = require("../utils/constants");
 
-var _DatepickerContext = require("../DatepickerContext");
+var _sharedPropTypes = require("../utils/sharedPropTypes");
 
-var _propTypes = require("../utils/propTypes");
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var Directions = (0, _freeze.default)({
-  Forward: (0, _symbol.default)('forward'),
-  Backward: (0, _symbol.default)('backward')
-});
 var monthSelectionButtonStyleProps = {
   size: 'sm',
   variant: 'ghost',
@@ -53,20 +53,21 @@ var monthTitleStyleProps = {
 var DatepickerHeader = function DatepickerHeader(_ref) {
   var _context;
 
-  var datepickerHeaderOverrides = _ref.datepickerHeaderOverrides;
-  var context = (0, _DatepickerContext.useDatepicker)();
+  var datepickerHeaderOverrides = _ref.datepickerHeaderOverrides,
+      context = _ref.context;
 
-  var _context$date = (0, _slicedToArray2.default)(context.date, 2),
-      date = _context$date[0],
-      setDate = _context$date[1];
+  var _useContext = (0, _react.useContext)(context),
+      _useContext$date = (0, _slicedToArray2.default)(_useContext.date, 2),
+      date = _useContext$date[0],
+      setDate = _useContext$date[1];
 
   var month = date.getMonth();
   var year = date.getFullYear();
 
   var onChange = function onChange(dir) {
     return function () {
-      var terminator = dir === Directions.Backward ? 0 : 11;
-      var adder = dir === Directions.Backward ? -1 : 1;
+      var terminator = dir === _constants.CALENDAR_CONTROL_DIRECTIONS.Backward ? 0 : 11;
+      var adder = dir === _constants.CALENDAR_CONTROL_DIRECTIONS.Backward ? -1 : 1;
 
       if (month === terminator) {
         date.setFullYear(year + adder, Math.abs(11 - month));
@@ -83,27 +84,31 @@ var DatepickerHeader = function DatepickerHeader(_ref) {
 
 
   return /*#__PURE__*/_react.default.createElement(_react2.Flex, (0, _extends2.default)({
+    "data-testid": "DatepickerHeader-HeaderContainer",
     alignItems: "center",
     marginBottom: 2,
     width: "100%"
   }, datepickerHeaderOverrides === null || datepickerHeaderOverrides === void 0 ? void 0 : datepickerHeaderOverrides.headerContainer), /*#__PURE__*/_react.default.createElement(_react2.IconButton, (0, _extends2.default)({
+    "data-testid": "DatepickerHeader-IconButton-Left",
     icon: /*#__PURE__*/_react.default.createElement(_chevronLeft.default, {
       height: 16,
       width: 16,
       fill: "black"
     }),
-    onClick: onChange(Directions.Backward),
+    onClick: onChange(_constants.CALENDAR_CONTROL_DIRECTIONS.Backward),
     "aria-label": "previous month"
   }, monthSelectionButtonStyleProps, datepickerHeaderOverrides === null || datepickerHeaderOverrides === void 0 ? void 0 : datepickerHeaderOverrides.iconButton)), /*#__PURE__*/_react.default.createElement(_react2.Flex, (0, _extends2.default)({
+    "data-testid": "DatepickerHeader-MonthTitle",
     "aria-live": "polite",
     id: "id-grid-label"
   }, monthTitleStyleProps, datepickerHeaderOverrides === null || datepickerHeaderOverrides === void 0 ? void 0 : datepickerHeaderOverrides.title), (0, _concat.default)(_context = "".concat(monthName, " ")).call(_context, year)), /*#__PURE__*/_react.default.createElement(_react2.IconButton, (0, _extends2.default)({
+    "data-testid": "DatepickerHeader-IconButton-Right",
     icon: /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
       height: 16,
       width: 16,
       fill: "black"
     }),
-    onClick: onChange(Directions.Forward),
+    onClick: onChange(_constants.CALENDAR_CONTROL_DIRECTIONS.Forward),
     "aria-label": "next month"
   }, monthSelectionButtonStyleProps, datepickerHeaderOverrides === null || datepickerHeaderOverrides === void 0 ? void 0 : datepickerHeaderOverrides.iconButton)));
   /* eslint-enable react/jsx-curly-brace-presence */

package/dist/components/Datepicker/common/components/DatepickerInput.js

@@ -0,0 +1,127 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@chakra-ui/react");
+
+var _calendar = _interopRequireDefault(require("@spothero/icons/calendar"));
+
+var _sharedPropTypes = require("../utils/sharedPropTypes");
+
+var _generalCalculations = require("../utils/generalCalculations");
+
+var _WithPopoverAnchor = _interopRequireDefault(require("./WithPopoverAnchor"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var formLabelStyleProps = {
+  as: 'label',
+  fontSize: 'sm',
+  fontWeight: 'semibold',
+  color: 'text.secondary.light',
+  marginBottom: 1
+};
+var formErrorMessageStyleProps = {
+  color: 'error',
+  fontSize: 'xs',
+  marginTop: 1
+};
+
+var getInputStyleProps = function getInputStyleProps(isOpen, isSelected, useInputIcons) {
+  return {
+    paddingRight: useInputIcons ? '2.625rem' : 'initial',
+    borderColor: isOpen && isSelected ? 'brandBlue' : 'gray.medium',
+    _hover: {
+      borderColor: isOpen && isSelected ? 'primary.600' : 'gray.300'
+    }
+  };
+};
+
+var DatepickerInput = function DatepickerInput(_ref) {
+  var _ref$asSingle = _ref.asSingle,
+      asSingle = _ref$asSingle === void 0 ? false : _ref$asSingle,
+      isSelected = _ref.isSelected,
+      onClick = _ref.onClick,
+      selectionPosition = _ref.selectionPosition,
+      value = _ref.value,
+      useInputIcons = _ref.useInputIcons,
+      isInputInvalid = _ref.isInputInvalid,
+      inputLabelText = _ref.inputLabelText,
+      placeholderText = _ref.placeholderText,
+      errorText = _ref.errorText,
+      context = _ref.context,
+      inputComponentOverrides = _ref.inputComponentOverrides;
+
+  var _useContext = (0, _react.useContext)(context),
+      _useContext$disclosur = _useContext.disclosure,
+      onOpen = _useContext$disclosur.onOpen,
+      onClose = _useContext$disclosur.onClose,
+      isOpen = _useContext$disclosur.isOpen;
+
+  var dataTestIDString = "DatepickerInput".concat(asSingle ? '' : "-".concat(selectionPosition));
+
+  var handleKeyboardControls = function handleKeyboardControls(evt) {
+    var keyCode = evt.code;
+
+    if (keyCode === 'Enter' || keyCode === 'Space') {
+      onOpen();
+    } else if (keyCode === 'Escape') {
+      onClose();
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react2.Box, (0, _extends2.default)({
+    "data-testid": "".concat(dataTestIDString, "-InputComponentContainer"),
+    width: "100%"
+  }, inputComponentOverrides === null || inputComponentOverrides === void 0 ? void 0 : inputComponentOverrides.inputGroupContainer), /*#__PURE__*/_react.default.createElement(_react2.FormControl, (0, _extends2.default)({
+    "data-testid": "".concat(dataTestIDString, "-FormControl"),
+    isInvalid: isInputInvalid
+  }, inputComponentOverrides === null || inputComponentOverrides === void 0 ? void 0 : inputComponentOverrides.formControl), inputLabelText && /*#__PURE__*/_react.default.createElement(_react2.FormLabel, (0, _extends2.default)({
+    "data-testid": "".concat(dataTestIDString, "-FormLabel")
+  }, formLabelStyleProps, inputComponentOverrides === null || inputComponentOverrides === void 0 ? void 0 : inputComponentOverrides.formLabel), inputLabelText), /*#__PURE__*/_react.default.createElement(_WithPopoverAnchor.default, {
+    isSelected: asSingle ? isOpen : isSelected
+  }, /*#__PURE__*/_react.default.createElement(_react2.InputGroup, (0, _extends2.default)({
+    "data-testid": "".concat(dataTestIDString, "-InputGroup")
+  }, inputComponentOverrides === null || inputComponentOverrides === void 0 ? void 0 : inputComponentOverrides.inputGroup), /*#__PURE__*/_react.default.createElement(_react2.Input, (0, _extends2.default)({
+    "data-testid": "".concat(dataTestIDString, "-InputField"),
+    name: dataTestIDString,
+    placeholder: placeholderText,
+    value: (0, _generalCalculations.formatValueForInputDisplay)(value),
+    onClick: onClick,
+    onKeyDown: handleKeyboardControls,
+    isReadOnly: true
+  }, getInputStyleProps(isOpen, asSingle ? true : isSelected, useInputIcons), inputComponentOverrides === null || inputComponentOverrides === void 0 ? void 0 : inputComponentOverrides.input)), useInputIcons && /*#__PURE__*/_react.default.createElement(_react2.InputRightElement, (0, _extends2.default)({
+    "data-testid": "".concat(dataTestIDString, "-InputRightElement"),
+    color: isInputInvalid ? 'error' : 'gray.dark',
+    pointerEvents: "none",
+    zIndex: "base"
+  }, inputComponentOverrides === null || inputComponentOverrides === void 0 ? void 0 : inputComponentOverrides.inputRightElement), /*#__PURE__*/_react.default.createElement(_react2.Icon, {
+    "data-testid": "".concat(dataTestIDString, "-InputRightElement-Icon"),
+    as: _calendar.default,
+    color: "inherit",
+    height: 5,
+    width: 5
+  })))), /*#__PURE__*/_react.default.createElement(_react2.FormErrorMessage, (0, _extends2.default)({
+    "data-testid": "".concat(dataTestIDString, "-FormErrorMessage")
+  }, formErrorMessageStyleProps, inputComponentOverrides === null || inputComponentOverrides === void 0 ? void 0 : inputComponentOverrides.formErrorMessage), errorText)));
+};
+
+var _default = DatepickerInput;
+exports.default = _default;

package/dist/components/{DatepickerRange → Datepicker/common}/components/WithPopoverAnchor.js

@@ -14,7 +14,9 @@ var _react2 = require("@chakra-ui/react");
 var WithPopoverAnchor = function WithPopoverAnchor(_ref) {
   var isSelected = _ref.isSelected,
       children = _ref.children;
-  return isSelected ? /*#__PURE__*/_react.default.createElement(_react2.PopoverAnchor, null, children) : children;
+  return isSelected ? /*#__PURE__*/_react.default.createElement(_react2.PopoverAnchor, {
+    "data-testid": "Datepicker-PopoverAnchor"
+  }, children) : children;
 };
 
 var _default = WithPopoverAnchor;

package/dist/components/Datepicker/common/components/WithPortal.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@chakra-ui/react");
+
+var WithPortal = function WithPortal(_ref) {
+  var usePortal = _ref.usePortal,
+      children = _ref.children,
+      overrideProps = _ref.overrideProps;
+  return usePortal ? /*#__PURE__*/_react.default.createElement(_react2.Portal, (0, _extends2.default)({
+    "data-testid": "Datepicker-Portal"
+  }, overrideProps), children) : children;
+};
+
+var _default = WithPortal;
+exports.default = _default;

package/dist/components/Datepicker/common/components/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DatepickerDays", {
+  enumerable: true,
+  get: function get() {
+    return _DatepickerDays.default;
+  }
+});
+Object.defineProperty(exports, "DatepickerHeader", {
+  enumerable: true,
+  get: function get() {
+    return _DatepickerHeader.default;
+  }
+});
+Object.defineProperty(exports, "DatepickerInput", {
+  enumerable: true,
+  get: function get() {
+    return _DatepickerInput.default;
+  }
+});
+Object.defineProperty(exports, "WithPortal", {
+  enumerable: true,
+  get: function get() {
+    return _WithPortal.default;
+  }
+});
+
+var _WithPortal = _interopRequireDefault(require("./WithPortal"));
+
+var _DatepickerDays = _interopRequireDefault(require("./DatepickerDays"));
+
+var _DatepickerInput = _interopRequireDefault(require("./DatepickerInput"));
+
+var _DatepickerHeader = _interopRequireDefault(require("./DatepickerHeader"));

package/dist/components/Datepicker/common/utils/constants.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FULL_MONTH_NAMES = exports.DAY_NAMES = exports.CALENDAR_CONTROL_DIRECTIONS = void 0;
+
+var _freeze = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/freeze"));
+
+var _symbol = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/symbol"));
+
+var DAY_NAMES = [{
+  abbv: 'Su',
+  full: 'Sunday'
+}, {
+  abbv: 'Mo',
+  full: 'Monday'
+}, {
+  abbv: 'Tu',
+  full: 'Tuesday'
+}, {
+  abbv: 'We',
+  full: 'Wednesday'
+}, {
+  abbv: 'Th',
+  full: 'Thursday'
+}, {
+  abbv: 'Fr',
+  full: 'Friday'
+}, {
+  abbv: 'Sa',
+  full: 'Saturday'
+}];
+exports.DAY_NAMES = DAY_NAMES;
+var FULL_MONTH_NAMES = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+exports.FULL_MONTH_NAMES = FULL_MONTH_NAMES;
+var CALENDAR_CONTROL_DIRECTIONS = (0, _freeze.default)({
+  Forward: (0, _symbol.default)('forward'),
+  Backward: (0, _symbol.default)('backward')
+});
+exports.CALENDAR_CONTROL_DIRECTIONS = CALENDAR_CONTROL_DIRECTIONS;