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

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

@@ -0,0 +1,158 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.datepickerRangeOverridesProps = exports.datepickerRangeControlsOverridesProps = exports.datepickerRangeContextProps = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _sharedPropTypes = require("../../common/utils/sharedPropTypes");
+
+var datepickerRangeControlsOverridesProps = _propTypes.default.shape({
+  /**
+   * Overrides for the Flex component that wraps the Start and End Date input fields,
+   * see https://chakra-ui.com/docs/components/flex/props for more
+   */
+  controlsContainer: _propTypes.default.object,
+
+  /** Overrides for the Start Date Input components */
+  startDateInputComponentOverrides: _sharedPropTypes.inputComponentOverridesProps,
+
+  /** Overrides for the End Date Input components */
+  endDateInputComponentOverrides: _sharedPropTypes.inputComponentOverridesProps
+});
+
+exports.datepickerRangeControlsOverridesProps = datepickerRangeControlsOverridesProps;
+
+var datepickerRangeOverridesProps = _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 DatepickerRange 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 components */
+  datepickerRangeControlsOverrides: datepickerRangeControlsOverridesProps,
+
+  /** An optional Object containing style and prop overrides to be applied to the Popover body, Calendar, and Header componets */
+  datepickerRangeBodyOverrides: _sharedPropTypes.datepickerBodyOverridesProps
+});
+
+exports.datepickerRangeOverridesProps = datepickerRangeOverridesProps;
+var props = {
+  /** An optional (pre-selected) Start Date to populate the Datepicker Range with  */
+  initialStartDate: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.instanceOf(Date)]),
+
+  /** An optional (pre-selected) End Date to populate the Datepicker Range with */
+  initialEndDate: _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
+   *
+   * @param {string|object} startDate
+   * @param {string|object} endDate
+   * @param {boolean} startIsSelected
+   * @param {boolean} endIsSelected
+   */
+  onDateChange: _propTypes.default.func,
+
+  /** Whether to render the Popover within a Portal or not */
+  usePortal: _propTypes.default.bool,
+
+  /** Whether to display the Start Date Input as invalid or not */
+  isStartInvalid: _propTypes.default.bool,
+
+  /** Whether to display the End Date Input as invalid or not */
+  isEndInvalid: _propTypes.default.bool,
+
+  /** Whether to show the Calendar Icon in the Input field. */
+  useInputIcons: _propTypes.default.bool,
+
+  /** A string to use as the Start Input form label */
+  startDateInputLabelText: _propTypes.default.string,
+
+  /** A string to use as the Start Input placeholder text */
+  startDateInputPlaceholderText: _propTypes.default.string,
+
+  /** A string to use as the Start Input form Error text */
+  startDateInputErrorText: _propTypes.default.string,
+
+  /** A string to use as the End Input form label */
+  endDateInputLabelText: _propTypes.default.string,
+
+  /** A string to use as the End Input placeholder text */
+  endDateInputPlaceholderText: _propTypes.default.string,
+
+  /** A string to use as the End Input form Error text */
+  endDateInputErrorText: _propTypes.default.string,
+
+  /** An optional Object containing style and prop overrides to be applied to the component and child components */
+  datepickerRangeOverrides: datepickerRangeOverridesProps
+};
+
+var chakraUseDisclosureProps = _propTypes.default.shape({
+  isOpen: _propTypes.default.bool,
+  onOpen: _propTypes.default.func,
+  onClose: _propTypes.default.func
+});
+
+var datepickerRangeContextProps = {
+  today: _propTypes.default.shape({
+    today: _propTypes.default.instanceOf(Date),
+    setToday: _propTypes.default.func
+  }),
+  date: _propTypes.default.shape({
+    date: _propTypes.default.instanceOf(Date),
+    setDate: _propTypes.default.func
+  }),
+  selectedStartDate: _propTypes.default.shape({
+    selectedStartDate: _propTypes.default.instanceOf(Date),
+    setSelectedStartDate: _propTypes.default.func
+  }),
+  selectedEndDate: _propTypes.default.shape({
+    selectedEndDate: _propTypes.default.instanceOf(Date),
+    setSelectedEndDate: _propTypes.default.func
+  }),
+  startIsSelected: _propTypes.default.shape({
+    startIsSelected: _propTypes.default.bool,
+    setStartIsSelected: _propTypes.default.func
+  }),
+  endIsSelected: _propTypes.default.shape({
+    endIsSelected: _propTypes.default.bool,
+    setEndIsSelected: _propTypes.default.func
+  }),
+  disableBeforeDate: _propTypes.default.shape({
+    disableBeforeDate: _propTypes.default.instanceOf(Date),
+    setDisableBeforeDate: _propTypes.default.func
+  }),
+  disableAfterDate: _propTypes.default.shape({
+    disableAfterDate: _propTypes.default.instanceOf(Date),
+    setDisableAfterDate: _propTypes.default.func
+  }),
+  isStartInvalid: _propTypes.default.bool,
+  isEndInvalid: _propTypes.default.bool,
+  disclosure: _propTypes.default.instanceOf(chakraUseDisclosureProps)
+};
+exports.datepickerRangeContextProps = datepickerRangeContextProps;
+var _default = props;
+exports.default = _default;

package/dist/components/Datepicker/{Datepicker.stories.js → Single/Datepicker.stories.js}

@@ -40,7 +40,7 @@ var _default = {
     removeBaseHtmlClass: true
   },
   argTypes: {
-    initialValue: {
+    initialSelectedDate: {
       description: 'An optional (pre-selected) Selected Date to populate the Datepicker with',
       control: {
         type: 'text'
@@ -52,6 +52,22 @@ var _default = {
         }
       }
     },
+    usePortal: {
+      description: 'Whether to render the Popover within a Portal or not',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        category: 'display',
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: false
+        }
+      },
+      defaultValue: false
+    },
     useInputIcons: {
       description: 'Whether to show the Calendar Icon in the Input field',
       control: {
@@ -183,32 +199,32 @@ var Default = DatepickerTemplate.bind({});
 exports.Default = Default;
 var WithInitialValue = DatepickerTemplate.bind({});
 exports.WithInitialValue = WithInitialValue;
-WithInitialValue.argTypes = _objectSpread({}, (0, _disableArgs.default)(['onDateChange', 'disableBefore', 'disableAfter', 'isInvalid', 'useInputIcons', 'dateInputLabelText', 'dateInputPlaceholderText', 'dateInputErrorText']));
+WithInitialValue.argTypes = _objectSpread({}, (0, _disableArgs.default)(['onDateChange', 'usePortal', 'disableBefore', 'disableAfter', 'isInvalid', 'useInputIcons', 'dateInputLabelText', 'dateInputPlaceholderText', 'dateInputErrorText']));
 WithInitialValue.args = {
-  initialValue: new Intl.DateTimeFormat('en-US').format(new Date().setDate(new Date().getDate() + 1))
+  initialSelectedDate: new Intl.DateTimeFormat('en-US').format(new Date().setDate(new Date().getDate() + 1))
 };
 var DisableBeforeAfter = DatepickerTemplate.bind({});
 exports.DisableBeforeAfter = DisableBeforeAfter;
-DisableBeforeAfter.argTypes = _objectSpread({}, (0, _disableArgs.default)(['onDateChange', 'initialValue', 'isInvalid', 'useInputIcons', 'dateInputLabelText', 'dateInputPlaceholderText', 'dateInputErrorText']));
+DisableBeforeAfter.argTypes = _objectSpread({}, (0, _disableArgs.default)(['onDateChange', 'usePortal', 'initialSelectedDate', 'isInvalid', 'useInputIcons', 'dateInputLabelText', 'dateInputPlaceholderText', 'dateInputErrorText']));
 DisableBeforeAfter.args = {
   disableBefore: new Intl.DateTimeFormat('en-US').format(new Date().setDate(new Date().getDate() - 5)),
   disableAfter: new Intl.DateTimeFormat('en-US').format(new Date().setDate(new Date().getDate() + 25))
 };
 var UseInputIcon = DatepickerTemplate.bind({});
 exports.UseInputIcon = UseInputIcon;
-UseInputIcon.argTypes = _objectSpread({}, (0, _disableArgs.default)(['onDateChange', 'initialValue', 'disableBefore', 'disableAfter', 'isInvalid', 'dateInputLabelText', 'dateInputPlaceholderText', 'dateInputErrorText']));
+UseInputIcon.argTypes = _objectSpread({}, (0, _disableArgs.default)(['onDateChange', 'usePortal', 'initialSelectedDate', 'disableBefore', 'disableAfter', 'isInvalid', 'dateInputLabelText', 'dateInputPlaceholderText', 'dateInputErrorText']));
 UseInputIcon.args = {
   useInputIcons: true
 };
 var WithCustomPlaceholder = DatepickerTemplate.bind({});
 exports.WithCustomPlaceholder = WithCustomPlaceholder;
-WithCustomPlaceholder.argTypes = _objectSpread({}, (0, _disableArgs.default)(['onDateChange', 'initialValue', 'disableBefore', 'disableAfter', 'isInvalid', 'useInputIcons', 'dateInputLabelText', 'dateInputErrorText']));
+WithCustomPlaceholder.argTypes = _objectSpread({}, (0, _disableArgs.default)(['onDateChange', 'usePortal', 'initialSelectedDate', 'disableBefore', 'disableAfter', 'isInvalid', 'useInputIcons', 'dateInputLabelText', 'dateInputErrorText']));
 WithCustomPlaceholder.args = {
   dateInputPlaceholderText: 'Oh, look a placeholder'
 };
 var WithFormControl = DatepickerTemplate.bind({});
 exports.WithFormControl = WithFormControl;
-WithFormControl.argTypes = _objectSpread({}, (0, _disableArgs.default)(['onDateChange', 'initialValue', 'disableBefore', 'disableAfter']));
+WithFormControl.argTypes = _objectSpread({}, (0, _disableArgs.default)(['onDateChange', 'usePortal', 'initialSelectedDate', 'disableBefore', 'disableAfter']));
 WithFormControl.args = {
   isInvalid: false,
   useInputIcons: true,
@@ -217,36 +233,39 @@ WithFormControl.args = {
 };
 var WithOverrides = DatepickerTemplate.bind({});
 exports.WithOverrides = WithOverrides;
-WithOverrides.argTypes = _objectSpread(_objectSpread({}, (0, _disableArgs.default)(['initialValue', 'disableBefore', 'disableAfter', 'isInvalid', 'useInputIcons', 'dateInputLabelText', 'dateInputPlaceholderText', 'dateInputErrorText', 'onDateChange'])), {}, {
+WithOverrides.argTypes = _objectSpread(_objectSpread({}, (0, _disableArgs.default)(['initialSelectedDate', 'usePortal', 'disableBefore', 'disableAfter', 'isInvalid', 'useInputIcons', 'dateInputLabelText', 'dateInputPlaceholderText', 'dateInputErrorText', 'onDateChange'])), {}, {
   datepickerOverrides: {
     control: 'object'
   }
 });
 WithOverrides.args = {
   datepickerOverrides: {
-    inputComponentOverrides: {
-      formControl: {
-        backgroundColor: 'blue.100'
-      },
-      formLabel: {
-        color: 'pink',
-        fontWeight: 'bold',
-        fontSize: '1.5rem'
-      },
-      inputGroup: {
-        size: 'lg'
-      },
-      input: {
-        borderColor: 'yellow.800',
-        _hover: {
-          borderColor: 'yellow.400'
+    datepickerControlOverrides: {
+      controlsContainer: {},
+      inputComponentOverrides: {
+        formControl: {
+          backgroundColor: 'blue.100'
+        },
+        formLabel: {
+          color: 'pink',
+          fontWeight: 'bold',
+          fontSize: '1.5rem'
+        },
+        inputGroup: {
+          size: 'lg'
+        },
+        input: {
+          borderColor: 'yellow.800',
+          _hover: {
+            borderColor: 'yellow.400'
+          }
+        },
+        inputRightElement: {
+          backgroundColor: 'red.200'
+        },
+        formErrorMessage: {
+          color: 'red.900'
         }
-      },
-      inputRightElement: {
-        backgroundColor: 'red.200'
-      },
-      formErrorMessage: {
-        color: 'red.900'
       }
     },
     popover: {

package/dist/components/Datepicker/{DatepickerContext.js → Single/DatepickerContext.js}

@@ -29,8 +29,8 @@ var useDatepicker = function useDatepicker() {
 exports.useDatepicker = useDatepicker;
 
 var DatepickerProvider = function DatepickerProvider(_ref) {
-  var _ref$initialValue = _ref.initialValue,
-      initialValue = _ref$initialValue === void 0 ? null : _ref$initialValue,
+  var _ref$initialSelectedD = _ref.initialSelectedDate,
+      initialSelectedDate = _ref$initialSelectedD === void 0 ? null : _ref$initialSelectedD,
       _ref$disableBefore = _ref.disableBefore,
       disableBefore = _ref$disableBefore === void 0 ? null : _ref$disableBefore,
       _ref$disableAfter = _ref.disableAfter,
@@ -40,9 +40,9 @@ var DatepickerProvider = function DatepickerProvider(_ref) {
   // Today
   var today = (0, _react.useState)(new Date()); // Date used to keep track of what Month is in view
 
-  var date = (0, _react.useState)(initialValue ? new Date(initialValue) : new Date()); // Currently selected date
+  var date = (0, _react.useState)(initialSelectedDate ? new Date(initialSelectedDate) : new Date()); // Currently selected date
 
-  var selectedDate = (0, _react.useState)(initialValue ? new Date(initialValue) : null); // The date where days in the past should be disabled
+  var selectedDate = (0, _react.useState)(initialSelectedDate ? new Date(initialSelectedDate) : null); // The date where days in the past should be disabled
 
   var disableBeforeDate = (0, _react.useState)(disableBefore ? new Date(disableBefore) : null); // The date where days in the future should be disabled
 

package/dist/components/Datepicker/{DatepickerSingle.js → Single/DatepickerSingle.js}

@@ -13,13 +13,14 @@ var _propTypes = _interopRequireDefault(require("./utils/propTypes"));
 
 var _DatepickerContext = require("./DatepickerContext");
 
-var _DatepickerContainer = _interopRequireDefault(require("./DatepickerContainer"));
+var _components = require("./components");
 
 var DatepickerSingle = function DatepickerSingle(_ref) {
-  var initialValue = _ref.initialValue,
+  var initialSelectedDate = _ref.initialSelectedDate,
       disableBefore = _ref.disableBefore,
       disableAfter = _ref.disableAfter,
       onDateChange = _ref.onDateChange,
+      usePortal = _ref.usePortal,
       isInvalid = _ref.isInvalid,
       useInputIcons = _ref.useInputIcons,
       dateInputLabelText = _ref.dateInputLabelText,
@@ -27,12 +28,13 @@ var DatepickerSingle = function DatepickerSingle(_ref) {
       dateInputErrorText = _ref.dateInputErrorText,
       datepickerOverrides = _ref.datepickerOverrides;
   return /*#__PURE__*/_react.default.createElement(_DatepickerContext.DatepickerProvider, {
-    initialValue: initialValue,
+    initialSelectedDate: initialSelectedDate,
     disableBefore: disableBefore,
     disableAfter: disableAfter,
     isInvalid: isInvalid
-  }, /*#__PURE__*/_react.default.createElement(_DatepickerContainer.default, {
+  }, /*#__PURE__*/_react.default.createElement(_components.DatepickerContainer, {
     onDateChange: onDateChange,
+    usePortal: usePortal,
     useInputIcons: useInputIcons,
     dateInputLabelText: dateInputLabelText,
     dateInputPlaceholderText: dateInputPlaceholderText,
@@ -42,6 +44,7 @@ var DatepickerSingle = function DatepickerSingle(_ref) {
 };
 
 DatepickerSingle.defaultProps = {
+  usePortal: false,
   useInputIcons: true,
   isInvalid: false,
   dateInputLabelText: 'Select a Date',

package/dist/components/Datepicker/{components → Single/components}/DateRow.js

@@ -17,13 +17,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@chakra-ui/react");
 
-var _DatepickerContext = require("../DatepickerContext");
+var _dateRowCalculations = require("../../common/utils/dateRowCalculations");
 
-var _propTypes = require("../utils/propTypes");
+var _generalCalculations = require("../../common/utils/generalCalculations");
 
-var _dateRowArithmentic = require("../utils/dateRowArithmentic");
+var _sharedPropTypes = require("../../common/utils/sharedPropTypes");
 
-var _generalCalculations = require("../utils/generalCalculations");
+var _DatepickerContext = require("../DatepickerContext");
 
 var calendarDateContainerStyleProps = {
   marginTop: 0,
@@ -65,15 +65,15 @@ var getCalendarDateStyleProps = function getCalendarDateStyleProps(today, date,
       borderColor: 'white',
       color: 'text.secondary.light'
     },
-    borderColor: (0, _dateRowArithmentic.selected)(calendarDate, selectedDate) ? 'white' : 'transparent',
-    fontWeight: (0, _dateRowArithmentic.selected)(calendarDate, selectedDate) ? 'semibold' : (0, _dateRowArithmentic.isToday)(calendarDate, today) ? 'bold' : 'base',
-    zIndex: (0, _dateRowArithmentic.selected)(calendarDate, selectedDate) ? '1200' : '1100',
-    backgroundColor: (0, _dateRowArithmentic.selected)(calendarDate, selectedDate) ? 'primary.default' : 'transparent',
-    color: (0, _dateRowArithmentic.selected)(calendarDate, selectedDate) ? 'text.primary.dark' : (0, _dateRowArithmentic.outOfMonth)(calendarDate, date) || (0, _dateRowArithmentic.isBeforeDisabledDate)(calendarDate, disableBeforeDate) || (0, _dateRowArithmentic.isAfterDisabledDate)(calendarDate, disableAfterDate) ? 'text.secondary.light' : 'text.primary.light',
+    borderColor: (0, _dateRowCalculations.selectedSingle)(calendarDate, selectedDate) ? 'white' : 'transparent',
+    fontWeight: (0, _dateRowCalculations.selectedSingle)(calendarDate, selectedDate) ? 'semibold' : (0, _dateRowCalculations.isToday)(calendarDate, today) ? 'bold' : 'base',
+    zIndex: (0, _dateRowCalculations.selectedSingle)(calendarDate, selectedDate) ? '1200' : '1100',
+    backgroundColor: (0, _dateRowCalculations.selectedSingle)(calendarDate, selectedDate) ? 'primary.default' : 'transparent',
+    color: (0, _dateRowCalculations.selectedSingle)(calendarDate, selectedDate) ? 'text.primary.dark' : (0, _dateRowCalculations.outOfMonth)(calendarDate, date) || (0, _dateRowCalculations.isBeforeDisabledDate)(calendarDate, disableBeforeDate) || (0, _dateRowCalculations.isAfterDisabledDate)(calendarDate, disableAfterDate) ? 'text.secondary.light' : 'text.primary.light',
     _hover: {
       borderWidth: '1px',
-      borderColor: (0, _dateRowArithmentic.selected)(calendarDate, selectedDate) ? 'white' : 'primary.default',
-      backgroundColor: (0, _dateRowArithmentic.selected)(calendarDate, selectedDate) ? 'primary.600' : 'transparent'
+      borderColor: (0, _dateRowCalculations.selectedSingle)(calendarDate, selectedDate) ? 'white' : 'primary.default',
+      backgroundColor: (0, _dateRowCalculations.selectedSingle)(calendarDate, selectedDate) ? 'primary.600' : 'transparent'
     },
     _disabled: {
       cursor: 'not-allowed',
@@ -117,26 +117,27 @@ var DateRow = function DateRow(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(_react2.Tbody, (0, _extends2.default)({
-    "data-testid": "calendarDatesContainer"
+    "data-testid": "Datepicker-calendarDatesContainer"
   }, dateRowOverrides === null || dateRowOverrides === void 0 ? void 0 : dateRowOverrides.tbody), (0, _map.default)(dates).call(dates, function (week, index) {
     return /*#__PURE__*/_react.default.createElement(_react2.Tr, (0, _extends2.default)({
       key: index,
       border: "none",
-      "data-testid": "calendarRow"
+      "data-testid": "Datepicker-calendarRow"
     }, dateRowOverrides === null || dateRowOverrides === void 0 ? void 0 : dateRowOverrides.tr), (0, _map.default)(week).call(week, function (calendarDate, idx) {
       return /*#__PURE__*/_react.default.createElement(_react2.Td, (0, _extends2.default)({
         key: idx,
-        "data-date": (0, _generalCalculations.formatForDataDate)(calendarDate)
+        "data-date": (0, _generalCalculations.formatForDataDate)(calendarDate),
+        "data-testid": "Datepicker-calendarDate-Td"
       }, calendarDateContainerStyleProps, {
-        disabled: (0, _dateRowArithmentic.isBeforeDisabledDate)(calendarDate, disableBeforeDate) || (0, _dateRowArithmentic.isAfterDisabledDate)(calendarDate, disableAfterDate)
+        disabled: (0, _dateRowCalculations.isBeforeDisabledDate)(calendarDate, disableBeforeDate) || (0, _dateRowCalculations.isAfterDisabledDate)(calendarDate, disableAfterDate)
       }, dateRowOverrides === null || dateRowOverrides === void 0 ? void 0 : dateRowOverrides.td), /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({
         value: calendarDate,
         onClick: handleSelect(calendarDate),
         role: "gridcell",
-        "data-testid": "dateColumn-calendarDate"
+        "data-testid": "Datepicker-calendarDate-Button"
       }, getCalendarDateStyleProps(today, date, calendarDate, selectedDate, disableBeforeDate, disableAfterDate), {
-        disabled: (0, _dateRowArithmentic.isBeforeDisabledDate)(calendarDate, disableBeforeDate) || (0, _dateRowArithmentic.isAfterDisabledDate)(calendarDate, disableAfterDate)
-      }, dateRowOverrides === null || dateRowOverrides === void 0 ? void 0 : dateRowOverrides.button), (0, _dateRowArithmentic.getButtonText)(calendarDate)));
+        disabled: (0, _dateRowCalculations.isBeforeDisabledDate)(calendarDate, disableBeforeDate) || (0, _dateRowCalculations.isAfterDisabledDate)(calendarDate, disableAfterDate)
+      }, dateRowOverrides === null || dateRowOverrides === void 0 ? void 0 : dateRowOverrides.button), (0, _dateRowCalculations.getButtonText)(calendarDate)));
     }));
   }));
 };

package/dist/components/Datepicker/{DatepickerContainer.js → Single/components/DatepickerContainer.js}

@@ -2,39 +2,53 @@
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
 
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
 
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.getPopoverProps = exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@chakra-ui/react");
 
-var _propTypes = require("./utils/propTypes");
+var _components = require("../../common/components");
 
-var _DatepickerContext = require("./DatepickerContext");
+var _propTypes = require("../utils/propTypes");
 
-var _DatepickerDays = _interopRequireDefault(require("./components/DatepickerDays"));
+var _DatepickerContext = require("../DatepickerContext");
 
-var _DatepickerHeader = _interopRequireDefault(require("./components/DatepickerHeader"));
+var _DateRow = _interopRequireDefault(require("./DateRow"));
 
-var _DatepickerControl = _interopRequireDefault(require("./components/DatepickerControl"));
+var _DatepickerControl = _interopRequireDefault(require("./DatepickerControl"));
 
 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; }
 
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 var popoverContentStyleProps = {
   width: {
     base: 304,
@@ -58,55 +72,94 @@ var popoverBodyStyleProps = {
   alignItems: 'center'
 };
 
-var DatepickerContainer = function DatepickerContainer(_ref) {
+var getPopoverProps = function getPopoverProps(_ref) {
+  var isOpen = _ref.isOpen,
+      onCloseCallback = _ref.onCloseCallback,
+      isMobile = _ref.isMobile;
+  return {
+    isOpen: isOpen,
+    onClose: onCloseCallback,
+    closeOnBlur: true,
+    returnFocusOnClose: false,
+    isLazy: true,
+    lazyBehavior: 'keepMounted',
+    openDelay: 250,
+    closeDelay: 250,
+    placement: !isMobile ? 'bottom-start' : 'bottom',
+    modifiers: [{
+      name: 'customStyles',
+      enabled: true,
+      phase: 'write',
+      fn: function fn(_ref2) {
+        var state = _ref2.state;
+        return _objectSpread(_objectSpread({}, state), {}, {
+          styles: _objectSpread(_objectSpread({}, state.styles), {}, {
+            popper: _objectSpread(_objectSpread({}, state.styles.popper), {}, {
+              zIndex: 'var(--chakra-zIndices-layer10)'
+            })
+          })
+        });
+      }
+    }]
+  };
+};
+
+exports.getPopoverProps = getPopoverProps;
+
+var DatepickerContainer = function DatepickerContainer(_ref3) {
   var _datepickerOverrides$, _datepickerOverrides$2, _datepickerOverrides$3;
 
-  var onDateChange = _ref.onDateChange,
-      useInputIcons = _ref.useInputIcons,
-      dateInputLabelText = _ref.dateInputLabelText,
-      dateInputPlaceholderText = _ref.dateInputPlaceholderText,
-      dateInputErrorText = _ref.dateInputErrorText,
-      datepickerOverrides = _ref.datepickerOverrides;
+  var onDateChange = _ref3.onDateChange,
+      usePortal = _ref3.usePortal,
+      useInputIcons = _ref3.useInputIcons,
+      dateInputLabelText = _ref3.dateInputLabelText,
+      dateInputPlaceholderText = _ref3.dateInputPlaceholderText,
+      dateInputErrorText = _ref3.dateInputErrorText,
+      datepickerOverrides = _ref3.datepickerOverrides;
 
   var _useDatepicker = (0, _DatepickerContext.useDatepicker)(),
       _useDatepicker$select = (0, _slicedToArray2.default)(_useDatepicker.selectedDate, 1),
       selectedDate = _useDatepicker$select[0],
-      isInvalid = _useDatepicker.isInvalid,
       _useDatepicker$disclo = _useDatepicker.disclosure,
       isOpen = _useDatepicker$disclo.isOpen,
       onClose = _useDatepicker$disclo.onClose;
 
+  var isMobile = (0, _react2.useBreakpointValue)({
+    base: true,
+    mobileXL: false
+  });
   (0, _react.useEffect)(function () {
     onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange({
       selectedDate: selectedDate
     }); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedDate]);
-  return /*#__PURE__*/_react.default.createElement(_react2.Popover, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_react2.Popover, (0, _extends2.default)({}, getPopoverProps({
     isOpen: isOpen,
-    onClose: onClose,
-    closeOnBlur: true,
-    returnFocusOnClose: false,
-    isLazy: true,
-    placement: "bottom-start"
-  }, datepickerOverrides === null || datepickerOverrides === void 0 ? void 0 : datepickerOverrides.popover), /*#__PURE__*/_react.default.createElement(_DatepickerControl.default, {
+    onCloseCallback: onClose,
+    isMobile: isMobile
+  }), datepickerOverrides === null || datepickerOverrides === void 0 ? void 0 : datepickerOverrides.popover), /*#__PURE__*/_react.default.createElement(_DatepickerControl.default, {
     value: selectedDate,
     useInputIcons: useInputIcons,
-    isInputInvalid: isInvalid,
     inputLabelText: dateInputLabelText,
     inputPlaceholderText: dateInputPlaceholderText,
     errorText: dateInputErrorText,
-    inputComponentOverrides: datepickerOverrides === null || datepickerOverrides === void 0 ? void 0 : datepickerOverrides.inputComponentOverrides
-  }), /*#__PURE__*/_react.default.createElement(_react2.Portal, datepickerOverrides === null || datepickerOverrides === void 0 ? void 0 : datepickerOverrides.portal, /*#__PURE__*/_react.default.createElement(_react2.PopoverContent, (0, _extends2.default)({
+    datepickerControlOverrides: datepickerOverrides === null || datepickerOverrides === void 0 ? void 0 : datepickerOverrides.datepickerControlOverrides
+  }), /*#__PURE__*/_react.default.createElement(_components.WithPortal, (0, _extends2.default)({
+    usePortal: usePortal
+  }, datepickerOverrides === null || datepickerOverrides === void 0 ? void 0 : datepickerOverrides.portal), /*#__PURE__*/_react.default.createElement(_react2.PopoverContent, (0, _extends2.default)({
     role: "dialog",
     "aria-modal": "true",
     "aria-label": "Choose Date",
-    "data-testid": "PopoverContent"
+    "data-testid": "Datepicker-PopoverContent"
   }, popoverContentStyleProps, datepickerOverrides === null || datepickerOverrides === void 0 ? void 0 : datepickerOverrides.popoverContent), /*#__PURE__*/_react.default.createElement(_react2.PopoverBody, (0, _extends2.default)({
-    "data-testid": "PopoverBody"
-  }, popoverBodyStyleProps, datepickerOverrides === null || datepickerOverrides === void 0 ? void 0 : (_datepickerOverrides$ = datepickerOverrides.datepickerBodyOverrides) === null || _datepickerOverrides$ === void 0 ? void 0 : _datepickerOverrides$.popoverBody), /*#__PURE__*/_react.default.createElement(_DatepickerHeader.default, {
-    datepickerHeaderOverrides: datepickerOverrides === null || datepickerOverrides === void 0 ? void 0 : (_datepickerOverrides$2 = datepickerOverrides.datepickerBodyOverrides) === null || _datepickerOverrides$2 === void 0 ? void 0 : _datepickerOverrides$2.datepickerHeaderOverrides
-  }), /*#__PURE__*/_react.default.createElement(_DatepickerDays.default, {
-    datepickerDaysOverrides: datepickerOverrides === null || datepickerOverrides === void 0 ? void 0 : (_datepickerOverrides$3 = datepickerOverrides.datepickerBodyOverrides) === null || _datepickerOverrides$3 === void 0 ? void 0 : _datepickerOverrides$3.datepickerDaysOverrides
+    "data-testid": "Datepicker-PopoverBody"
+  }, popoverBodyStyleProps, datepickerOverrides === null || datepickerOverrides === void 0 ? void 0 : (_datepickerOverrides$ = datepickerOverrides.datepickerBodyOverrides) === null || _datepickerOverrides$ === void 0 ? void 0 : _datepickerOverrides$.popoverBody), /*#__PURE__*/_react.default.createElement(_components.DatepickerHeader, {
+    datepickerHeaderOverrides: datepickerOverrides === null || datepickerOverrides === void 0 ? void 0 : (_datepickerOverrides$2 = datepickerOverrides.datepickerBodyOverrides) === null || _datepickerOverrides$2 === void 0 ? void 0 : _datepickerOverrides$2.datepickerHeaderOverrides,
+    context: _DatepickerContext.DatepickerContext
+  }), /*#__PURE__*/_react.default.createElement(_components.DatepickerDays, {
+    datepickerDaysOverrides: datepickerOverrides === null || datepickerOverrides === void 0 ? void 0 : (_datepickerOverrides$3 = datepickerOverrides.datepickerBodyOverrides) === null || _datepickerOverrides$3 === void 0 ? void 0 : _datepickerOverrides$3.datepickerDaysOverrides,
+    context: _DatepickerContext.DatepickerContext,
+    DateRow: _DateRow.default
   })))));
 };