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

package/dist/components/{DatepickerRange → Datepicker/Range}/DatepickerRange.js

@@ -13,14 +13,15 @@ var _propTypes = _interopRequireDefault(require("./utils/propTypes"));
 
 var _DatepickerRangeContext = require("./DatepickerRangeContext");
 
-var _DatepickerRangeContainer = _interopRequireDefault(require("./DatepickerRangeContainer"));
+var _components = require("./components");
 
 var DatepickerRange = function DatepickerRange(_ref) {
   var initialStartDate = _ref.initialStartDate,
       initialEndDate = _ref.initialEndDate,
       disableBefore = _ref.disableBefore,
       disableAfter = _ref.disableAfter,
-      onChange = _ref.onChange,
+      onDateChange = _ref.onDateChange,
+      usePortal = _ref.usePortal,
       useInputIcons = _ref.useInputIcons,
       isStartInvalid = _ref.isStartInvalid,
       startDateInputLabelText = _ref.startDateInputLabelText,
@@ -38,8 +39,9 @@ var DatepickerRange = function DatepickerRange(_ref) {
     disableAfter: disableAfter,
     isStartInvalid: isStartInvalid,
     isEndInvalid: isEndInvalid
-  }, /*#__PURE__*/_react.default.createElement(_DatepickerRangeContainer.default, {
-    onChange: onChange,
+  }, /*#__PURE__*/_react.default.createElement(_components.DatepickerRangeContainer, {
+    onDateChange: onDateChange,
+    usePortal: usePortal,
     useInputIcons: useInputIcons,
     startDateInputLabelText: startDateInputLabelText,
     startDateInputPlaceholderText: startDateInputPlaceholderText,
@@ -52,6 +54,7 @@ var DatepickerRange = function DatepickerRange(_ref) {
 };
 
 DatepickerRange.defaultProps = {
+  usePortal: false,
   useInputIcons: true,
   isStartInvalid: false,
   startDateInputLabelText: 'Enter After',

package/dist/components/{DatepickerRange → Datepicker/Range}/DatepickerRange.stories.js

@@ -64,6 +64,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: {
@@ -224,7 +240,7 @@ var _default = {
       },
       defaultValue: false
     },
-    onChange: {
+    onDateChange: {
       description: 'A callback function to execute on changes',
       table: {
         category: 'events',
@@ -263,34 +279,34 @@ WithInitialStartDate.args = {
   initialStartDate: new Intl.DateTimeFormat('en-US').format(new Date().setDate(new Date().getDate() + 1)),
   initialEndDate: ''
 };
-WithInitialStartDate.argTypes = _objectSpread({}, (0, _disableArgs.default)(['disableBefore', 'disableAfter', 'onChange', 'startDateInputPlaceholderText', 'endDateInputPlaceholderText', 'isStartInvalid', 'isEndInvalid', 'useInputIcons', 'startDateInputLabelText', 'endDateInputLabelText', 'startDateInputErrorText', 'endDateInputErrorText', 'datepickerRangeOverrides']));
+WithInitialStartDate.argTypes = _objectSpread({}, (0, _disableArgs.default)(['disableBefore', 'disableAfter', 'onDateChange', 'usePortal', 'startDateInputPlaceholderText', 'endDateInputPlaceholderText', 'isStartInvalid', 'isEndInvalid', 'useInputIcons', 'startDateInputLabelText', 'endDateInputLabelText', 'startDateInputErrorText', 'endDateInputErrorText', 'datepickerRangeOverrides']));
 var WithInitialStartAndEndDate = DatepickerRangeTemplate.bind({});
 exports.WithInitialStartAndEndDate = WithInitialStartAndEndDate;
 WithInitialStartAndEndDate.args = {
   initialStartDate: new Intl.DateTimeFormat('en-US').format(new Date().setDate(new Date().getDate() - 3)),
   initialEndDate: new Intl.DateTimeFormat('en-US').format(new Date().setDate(new Date().getDate() + 5))
 };
-WithInitialStartAndEndDate.argTypes = _objectSpread({}, (0, _disableArgs.default)(['disableBefore', 'disableAfter', 'onChange', 'startDateInputPlaceholderText', 'endDateInputPlaceholderText', 'isStartInvalid', 'isEndInvalid', 'useInputIcons', 'startDateInputLabelText', 'endDateInputLabelText', 'startDateInputErrorText', 'endDateInputErrorText', 'datepickerRangeOverrides']));
+WithInitialStartAndEndDate.argTypes = _objectSpread({}, (0, _disableArgs.default)(['disableBefore', 'disableAfter', 'onDateChange', 'usePortal', 'startDateInputPlaceholderText', 'endDateInputPlaceholderText', 'isStartInvalid', 'isEndInvalid', 'useInputIcons', 'startDateInputLabelText', 'endDateInputLabelText', 'startDateInputErrorText', 'endDateInputErrorText', 'datepickerRangeOverrides']));
 var DisableBeforeAfter = DatepickerRangeTemplate.bind({});
 exports.DisableBeforeAfter = DisableBeforeAfter;
 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))
 };
-DisableBeforeAfter.argTypes = _objectSpread({}, (0, _disableArgs.default)(['onChange', 'startDateInputPlaceholderText', 'endDateInputPlaceholderText', 'initialStartDate', 'initialEndDate', 'isStartInvalid', 'isEndInvalid', 'useInputIcons', 'startDateInputLabelText', 'endDateInputLabelText', 'startDateInputErrorText', 'endDateInputErrorText', 'datepickerRangeOverrides']));
+DisableBeforeAfter.argTypes = _objectSpread({}, (0, _disableArgs.default)(['onDateChange', 'usePortal', 'startDateInputPlaceholderText', 'endDateInputPlaceholderText', 'initialStartDate', 'initialEndDate', 'isStartInvalid', 'isEndInvalid', 'useInputIcons', 'startDateInputLabelText', 'endDateInputLabelText', 'startDateInputErrorText', 'endDateInputErrorText', 'datepickerRangeOverrides']));
 var UseInputIcons = DatepickerRangeTemplate.bind({});
 exports.UseInputIcons = UseInputIcons;
 UseInputIcons.args = {
   useInputIcons: true
 };
-UseInputIcons.argTypes = _objectSpread({}, (0, _disableArgs.default)(['onChange', 'startDateInputPlaceholderText', 'endDateInputPlaceholderText', 'initialStartDate', 'initialEndDate', 'disableBefore', 'disableAfter', 'isStartInvalid', 'isEndInvalid', 'startDateInputLabelText', 'endDateInputLabelText', 'startDateInputErrorText', 'endDateInputErrorText', 'datepickerRangeOverrides']));
+UseInputIcons.argTypes = _objectSpread({}, (0, _disableArgs.default)(['onDateChange', 'usePortal', 'startDateInputPlaceholderText', 'endDateInputPlaceholderText', 'initialStartDate', 'initialEndDate', 'disableBefore', 'disableAfter', 'isStartInvalid', 'isEndInvalid', 'startDateInputLabelText', 'endDateInputLabelText', 'startDateInputErrorText', 'endDateInputErrorText', 'datepickerRangeOverrides']));
 var WithCustomPlaceholder = DatepickerRangeTemplate.bind({});
 exports.WithCustomPlaceholder = WithCustomPlaceholder;
 WithCustomPlaceholder.args = {
   startDateInputPlaceholderText: 'Hey a Placeholder!',
   endDateInputPlaceholderText: 'Oh, look another one'
 };
-WithCustomPlaceholder.argTypes = _objectSpread({}, (0, _disableArgs.default)(['onChange', 'initialStartDate', 'initialEndDate', 'disableBefore', 'disableAfter', 'isStartInvalid', 'isEndInvalid', 'useInputIcons', 'startDateInputLabelText', 'endDateInputLabelText', 'startDateInputErrorText', 'endDateInputErrorText', 'datepickerRangeOverrides']));
+WithCustomPlaceholder.argTypes = _objectSpread({}, (0, _disableArgs.default)(['onDateChange', 'usePortal', 'initialStartDate', 'initialEndDate', 'disableBefore', 'disableAfter', 'isStartInvalid', 'isEndInvalid', 'useInputIcons', 'startDateInputLabelText', 'endDateInputLabelText', 'startDateInputErrorText', 'endDateInputErrorText', 'datepickerRangeOverrides']));
 var WithFormControl = DatepickerRangeTemplate.bind({});
 exports.WithFormControl = WithFormControl;
 WithFormControl.args = {
@@ -302,10 +318,10 @@ WithFormControl.args = {
   endDateInputLabelText: 'Custom End Label',
   endDateInputErrorText: 'End Date Error Message'
 };
-WithFormControl.argTypes = _objectSpread({}, (0, _disableArgs.default)(['onChange', 'startDateInputPlaceholderText', 'endDateInputPlaceholderText', 'initialStartDate', 'initialEndDate', 'disableBefore', 'disableAfter', 'datepickerRangeOverrides']));
+WithFormControl.argTypes = _objectSpread({}, (0, _disableArgs.default)(['onDateChange', 'startDateInputPlaceholderText', 'endDateInputPlaceholderText', 'initialStartDate', 'initialEndDate', 'disableBefore', 'disableAfter', 'datepickerRangeOverrides']));
 var WithOverrides = DatepickerRangeTemplate.bind({});
 exports.WithOverrides = WithOverrides;
-WithOverrides.argTypes = _objectSpread(_objectSpread({}, (0, _disableArgs.default)(['onChange', 'startDateInputPlaceholderText', 'endDateInputPlaceholderText', 'initialStartDate', 'initialEndDate', 'disableBefore', 'disableAfter', 'isStartInvalid', 'isEndInvalid', 'useInputIcons', 'startDateInputLabelText', 'endDateInputLabelText', 'startDateInputErrorText', 'endDateInputErrorText'])), {}, {
+WithOverrides.argTypes = _objectSpread(_objectSpread({}, (0, _disableArgs.default)(['onDateChange', 'usePortal', 'startDateInputPlaceholderText', 'endDateInputPlaceholderText', 'initialStartDate', 'initialEndDate', 'disableBefore', 'disableAfter', 'isStartInvalid', 'isEndInvalid', 'useInputIcons', 'startDateInputLabelText', 'endDateInputLabelText', 'startDateInputErrorText', 'endDateInputErrorText'])), {}, {
   datepickerRangeOverrides: {
     control: 'object'
   }
@@ -380,7 +396,7 @@ WithOverrides.args = {
         width: 425,
         backgroundColor: 'blue.200'
       },
-      datepickerRangeHeaderOverrides: {
+      datepickerHeaderOverrides: {
         headerContainer: {
           margin: 0
         },
@@ -395,7 +411,7 @@ WithOverrides.args = {
           fontSize: 'sm'
         }
       },
-      datepickerRangeDaysOverrides: {
+      datepickerDaysOverrides: {
         table: {},
         thead: {},
         th: {},

package/dist/components/{DatepickerRange → Datepicker/Range}/components/DateRow.js

@@ -33,13 +33,13 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@chakra-ui/react");
 
-var _propTypes = require("../utils/propTypes");
+var _dateRowCalculations = require("../../common/utils/dateRowCalculations");
 
-var _DatepickerRangeContext = require("../DatepickerRangeContext");
+var _generalCalculations = require("../../common/utils/generalCalculations");
 
-var _generalCalculations = require("../utils/generalCalculations");
+var _sharedPropTypes = require("../../common/utils/sharedPropTypes");
 
-var _dateRowArithmentic = require("../utils/dateRowArithmentic");
+var _DatepickerRangeContext = require("../DatepickerRangeContext");
 
 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); }
 
@@ -58,33 +58,33 @@ var handleCalendarDateContainerBackgroundColorStyles = function handleCalendarDa
 
   if (selectedStartDate && !selectedEndDate) {
     // Styles for Dates between Start and Hovered Dates
-    if ((0, _dateRowArithmentic.withinRange)(calendarDate, hoveredDate, selectedStartDate)) {
+    if ((0, _dateRowCalculations.withinRange)(calendarDate, hoveredDate, selectedStartDate)) {
       return _objectSpread(_objectSpread({}, defaultStyles), {}, {
         backgroundColor: 'primary.100'
       });
     } // Styles for Start Date depending on which direction the Hovered Date is in
-    else if ((0, _dateRowArithmentic.areEqual)(calendarDate, selectedStartDate)) {
+    else if ((0, _dateRowCalculations.areEqual)(calendarDate, selectedStartDate)) {
       return _objectSpread(_objectSpread({}, defaultStyles), {}, {
         backgroundColor: 'primary.100',
-        borderLeftRadius: !hoveredDate || (0, _dateRowArithmentic.isAfterStart)(hoveredDate, selectedStartDate) || (0, _dateRowArithmentic.areEqual)(hoveredDate, selectedStartDate) ? 'full' : 'none',
-        borderRightRadius: !hoveredDate || (0, _dateRowArithmentic.isBeforeStart)(hoveredDate, selectedStartDate) || (0, _dateRowArithmentic.areEqual)(hoveredDate, selectedStartDate) ? 'full' : 'none'
+        borderLeftRadius: !hoveredDate || (0, _dateRowCalculations.isAfterStart)(hoveredDate, selectedStartDate) || (0, _dateRowCalculations.areEqual)(hoveredDate, selectedStartDate) ? 'full' : 'none',
+        borderRightRadius: !hoveredDate || (0, _dateRowCalculations.isBeforeStart)(hoveredDate, selectedStartDate) || (0, _dateRowCalculations.areEqual)(hoveredDate, selectedStartDate) ? 'full' : 'none'
       });
     } // Styles for the Hovered Date depending on which direction the Start Date is in
-    else if ((0, _dateRowArithmentic.areEqual)(calendarDate, hoveredDate)) {
+    else if ((0, _dateRowCalculations.areEqual)(calendarDate, hoveredDate)) {
       return _objectSpread(_objectSpread({}, defaultStyles), {}, {
         backgroundColor: 'primary.100',
-        borderLeftRadius: (0, _dateRowArithmentic.isBeforeStart)(hoveredDate, selectedStartDate) ? 'full' : 'none',
-        borderRightRadius: (0, _dateRowArithmentic.isAfterStart)(hoveredDate, selectedStartDate) ? 'full' : 'none'
+        borderLeftRadius: (0, _dateRowCalculations.isBeforeStart)(hoveredDate, selectedStartDate) ? 'full' : 'none',
+        borderRightRadius: (0, _dateRowCalculations.isAfterStart)(hoveredDate, selectedStartDate) ? 'full' : 'none'
       });
     }
-  } // Start and End date selected
+  } // Start and End date selectedRange
   else if (selectedStartDate && selectedEndDate) {
     // Styles for Dates between Start and End Dates
-    if ((0, _dateRowArithmentic.withinRange)(calendarDate, selectedEndDate, selectedStartDate) || (0, _dateRowArithmentic.areEqual)(calendarDate, selectedStartDate) || (0, _dateRowArithmentic.areEqual)(calendarDate, selectedEndDate)) {
+    if ((0, _dateRowCalculations.withinRange)(calendarDate, selectedEndDate, selectedStartDate) || (0, _dateRowCalculations.areEqual)(calendarDate, selectedStartDate) || (0, _dateRowCalculations.areEqual)(calendarDate, selectedEndDate)) {
       return _objectSpread(_objectSpread({}, defaultStyles), {}, {
         backgroundColor: 'primary.100',
-        borderLeftRadius: (0, _dateRowArithmentic.areEqual)(calendarDate, selectedStartDate) ? 'full' : 'none',
-        borderRightRadius: (0, _dateRowArithmentic.areEqual)(calendarDate, selectedEndDate) ? 'full' : 'none'
+        borderLeftRadius: (0, _dateRowCalculations.areEqual)(calendarDate, selectedStartDate) ? 'full' : 'none',
+        borderRightRadius: (0, _dateRowCalculations.areEqual)(calendarDate, selectedEndDate) ? 'full' : 'none'
       });
     }
   } // Default Styling
@@ -130,15 +130,15 @@ var getCalendarDateStyleProps = function getCalendarDateStyleProps(today, date,
       base: 10,
       tablet: 12
     },
-    borderColor: (0, _dateRowArithmentic.selected)(calendarDate, selectedStartDate, selectedEndDate) ? 'white' : 'transparent',
-    fontWeight: (0, _dateRowArithmentic.selected)(calendarDate, selectedStartDate, selectedEndDate) ? 'semibold' : (0, _dateRowArithmentic.isToday)(calendarDate, today) ? 'bold' : 'base',
-    zIndex: (0, _dateRowArithmentic.selected)(calendarDate, selectedStartDate, selectedEndDate) ? '1200' : '1100',
-    backgroundColor: (0, _dateRowArithmentic.selected)(calendarDate, selectedStartDate, selectedEndDate) ? 'primary.default' : 'transparent',
-    color: (0, _dateRowArithmentic.selected)(calendarDate, selectedStartDate, selectedEndDate) ? '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.selectedRange)(calendarDate, selectedStartDate, selectedEndDate) ? 'white' : 'transparent',
+    fontWeight: (0, _dateRowCalculations.selectedRange)(calendarDate, selectedStartDate, selectedEndDate) ? 'semibold' : (0, _dateRowCalculations.isToday)(calendarDate, today) ? 'bold' : 'base',
+    zIndex: (0, _dateRowCalculations.selectedRange)(calendarDate, selectedStartDate, selectedEndDate) ? '1200' : '1100',
+    backgroundColor: (0, _dateRowCalculations.selectedRange)(calendarDate, selectedStartDate, selectedEndDate) ? 'primary.default' : 'transparent',
+    color: (0, _dateRowCalculations.selectedRange)(calendarDate, selectedStartDate, selectedEndDate) ? '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, selectedStartDate, selectedEndDate) ? 'white' : 'primary.default',
-      backgroundColor: (0, _dateRowArithmentic.selected)(calendarDate, selectedStartDate, selectedEndDate) ? 'primary.600' : 'white'
+      borderColor: (0, _dateRowCalculations.selectedRange)(calendarDate, selectedStartDate, selectedEndDate) ? 'white' : 'primary.default',
+      backgroundColor: (0, _dateRowCalculations.selectedRange)(calendarDate, selectedStartDate, selectedEndDate) ? 'primary.600' : 'white'
     },
     _active: {
       backgroundColor: 'gray.light',
@@ -231,27 +231,28 @@ 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"
       }, getCalendarDateContainerStyleProps(selectedStartDate, selectedEndDate, hoveredDate, calendarDate), {
-        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,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
-        "data-testid": "dateColumn-calendarDate",
+        "data-testid": "Datepicker-calendarDate-Button",
         onClick: handleSelect(calendarDate)
       }, getCalendarDateStyleProps(today, date, calendarDate, selectedStartDate, selectedEndDate, 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/{DatepickerRange → Datepicker/Range/components}/DatepickerRangeContainer.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 _DatepickerRangeContext = require("./DatepickerRangeContext");
+var _components = require("../../common/components");
 
-var _propTypes = require("./utils/propTypes");
+var _DatepickerRangeContext = require("../DatepickerRangeContext");
 
-var _DatepickerDays = _interopRequireDefault(require("./components/DatepickerDays"));
+var _propTypes = require("../utils/propTypes");
 
-var _DatepickerHeader = _interopRequireDefault(require("./components/DatepickerHeader"));
+var _DateRow = _interopRequireDefault(require("./DateRow"));
 
-var _DatepickerRangeControls = _interopRequireDefault(require("./components/DatepickerRangeControls"));
+var _DatepickerRangeControls = _interopRequireDefault(require("./DatepickerRangeControls"));
 
 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,18 +72,55 @@ var popoverBodyStyleProps = {
   alignItems: 'center'
 };
 
-var DatepickerRangeContainer = function DatepickerRangeContainer(_ref) {
+var getPopoverProps = function getPopoverProps(_ref) {
+  var isOpen = _ref.isOpen,
+      onCloseCallback = _ref.onCloseCallback,
+      startIsSelected = _ref.startIsSelected,
+      endIsSelected = _ref.endIsSelected,
+      isMobile = _ref.isMobile;
+  return {
+    isOpen: isOpen,
+    onClose: onCloseCallback,
+    closeOnBlur: true,
+    returnFocusOnClose: false,
+    isLazy: true,
+    lazyBehavior: 'keepMounted',
+    openDelay: 250,
+    closeDelay: 250,
+    placement: startIsSelected && !endIsSelected && !isMobile ? 'bottom-start' : !startIsSelected && endIsSelected && !isMobile ? 'bottom-end' : '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 DatepickerRangeContainer = function DatepickerRangeContainer(_ref3) {
   var _datepickerRangeOverr, _datepickerRangeOverr2, _datepickerRangeOverr3;
 
-  var onChange = _ref.onChange,
-      useInputIcons = _ref.useInputIcons,
-      startDateInputLabelText = _ref.startDateInputLabelText,
-      startDateInputPlaceholderText = _ref.startDateInputPlaceholderText,
-      startDateInputErrorText = _ref.startDateInputErrorText,
-      endDateInputLabelText = _ref.endDateInputLabelText,
-      endDateInputPlaceholderText = _ref.endDateInputPlaceholderText,
-      endDateInputErrorText = _ref.endDateInputErrorText,
-      datepickerRangeOverrides = _ref.datepickerRangeOverrides;
+  var onDateChange = _ref3.onDateChange,
+      usePortal = _ref3.usePortal,
+      useInputIcons = _ref3.useInputIcons,
+      startDateInputLabelText = _ref3.startDateInputLabelText,
+      startDateInputPlaceholderText = _ref3.startDateInputPlaceholderText,
+      startDateInputErrorText = _ref3.startDateInputErrorText,
+      endDateInputLabelText = _ref3.endDateInputLabelText,
+      endDateInputPlaceholderText = _ref3.endDateInputPlaceholderText,
+      endDateInputErrorText = _ref3.endDateInputErrorText,
+      datepickerRangeOverrides = _ref3.datepickerRangeOverrides;
 
   var _useDatepickerRange = (0, _DatepickerRangeContext.useDatepickerRange)(),
       _useDatepickerRange$s = (0, _slicedToArray2.default)(_useDatepickerRange.selectedStartDate, 1),
@@ -92,40 +143,53 @@ var DatepickerRangeContainer = function DatepickerRangeContainer(_ref) {
     mobileXL: false
   });
 
-  var onClickStart = function onClickStart() {
-    onOpen();
-    setStartIsSelected(true);
+  var handlePopoverClose = function handlePopoverClose() {
+    setStartIsSelected(false);
     setEndIsSelected(false);
+    onClose();
   };
 
-  var onClickEnd = function onClickEnd() {
-    onOpen();
-    setStartIsSelected(false);
-    setEndIsSelected(true);
+  var onClickStart = function onClickStart() {
+    if (!isOpen) {
+      onOpen();
+      setStartIsSelected(true);
+      setEndIsSelected(false);
+    } else if (isOpen && !startIsSelected) {
+      setStartIsSelected(true);
+      setEndIsSelected(false);
+    } else if (isOpen && startIsSelected) {
+      handlePopoverClose();
+    }
   };
 
-  var handlePopoverClose = function handlePopoverClose() {
-    setStartIsSelected(false);
-    setEndIsSelected(false);
-    onClose();
+  var onClickEnd = function onClickEnd() {
+    if (!isOpen) {
+      onOpen();
+      setStartIsSelected(false);
+      setEndIsSelected(true);
+    } else if (isOpen && !endIsSelected) {
+      setStartIsSelected(false);
+      setEndIsSelected(true);
+    } else if (isOpen && endIsSelected) {
+      handlePopoverClose();
+    }
   };
 
   (0, _react.useEffect)(function () {
-    onChange === null || onChange === void 0 ? void 0 : onChange({
+    onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange({
       startDate: selectedStartDate,
       endDate: selectedEndDate,
       startIsSelected: startIsSelected,
       endIsSelected: endIsSelected
     }); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedStartDate, selectedEndDate, startIsSelected, endIsSelected]);
-  return /*#__PURE__*/_react.default.createElement(_react2.Popover, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_react2.Popover, (0, _extends2.default)({}, getPopoverProps({
     isOpen: isOpen,
-    onClose: handlePopoverClose,
-    closeOnBlur: true,
-    returnFocusOnClose: false,
-    isLazy: true,
-    placement: startIsSelected && !endIsSelected && !isMobile ? 'bottom-start' : !startIsSelected && endIsSelected && !isMobile ? 'bottom-end' : 'bottom'
-  }, datepickerRangeOverrides === null || datepickerRangeOverrides === void 0 ? void 0 : datepickerRangeOverrides.popover), /*#__PURE__*/_react.default.createElement(_DatepickerRangeControls.default, {
+    onCloseCallback: handlePopoverClose,
+    startIsSelected: startIsSelected,
+    endIsSelected: endIsSelected,
+    isMobile: isMobile
+  }), datepickerRangeOverrides === null || datepickerRangeOverrides === void 0 ? void 0 : datepickerRangeOverrides.popover), /*#__PURE__*/_react.default.createElement(_DatepickerRangeControls.default, {
     selectedStartDate: selectedStartDate,
     startIsSelected: startIsSelected,
     onClickStart: onClickStart,
@@ -140,17 +204,22 @@ var DatepickerRangeContainer = function DatepickerRangeContainer(_ref) {
     endDateInputPlaceholderText: endDateInputPlaceholderText,
     endDateInputErrorText: endDateInputErrorText,
     datepickerRangeControlsOverrides: datepickerRangeOverrides === null || datepickerRangeOverrides === void 0 ? void 0 : datepickerRangeOverrides.datepickerRangeControlsOverrides
-  }), /*#__PURE__*/_react.default.createElement(_react2.Portal, datepickerRangeOverrides === null || datepickerRangeOverrides === void 0 ? void 0 : datepickerRangeOverrides.portal, /*#__PURE__*/_react.default.createElement(_react2.PopoverContent, (0, _extends2.default)({
+  }), /*#__PURE__*/_react.default.createElement(_components.WithPortal, (0, _extends2.default)({
+    usePortal: usePortal
+  }, datepickerRangeOverrides === null || datepickerRangeOverrides === void 0 ? void 0 : datepickerRangeOverrides.portal), /*#__PURE__*/_react.default.createElement(_react2.PopoverContent, (0, _extends2.default)({
     role: "dialog",
     "aria-modal": "true",
     "aria-label": "Choose Date",
     "data-testid": "PopoverContent"
   }, popoverContentStyleProps, datepickerRangeOverrides === null || datepickerRangeOverrides === void 0 ? void 0 : datepickerRangeOverrides.popoverContent), /*#__PURE__*/_react.default.createElement(_react2.PopoverBody, (0, _extends2.default)({
     "data-testid": "PopoverBody"
-  }, popoverBodyStyleProps, datepickerRangeOverrides === null || datepickerRangeOverrides === void 0 ? void 0 : (_datepickerRangeOverr = datepickerRangeOverrides.datepickerRangeBodyOverrides) === null || _datepickerRangeOverr === void 0 ? void 0 : _datepickerRangeOverr.popoverBody), /*#__PURE__*/_react.default.createElement(_DatepickerHeader.default, {
-    datepickerRangeHeaderOverrides: datepickerRangeOverrides === null || datepickerRangeOverrides === void 0 ? void 0 : (_datepickerRangeOverr2 = datepickerRangeOverrides.datepickerRangeBodyOverrides) === null || _datepickerRangeOverr2 === void 0 ? void 0 : _datepickerRangeOverr2.datepickerRangeHeaderOverrides
-  }), /*#__PURE__*/_react.default.createElement(_DatepickerDays.default, {
-    datepickerRangeDaysOverrides: datepickerRangeOverrides === null || datepickerRangeOverrides === void 0 ? void 0 : (_datepickerRangeOverr3 = datepickerRangeOverrides.datepickerRangeBodyOverrides) === null || _datepickerRangeOverr3 === void 0 ? void 0 : _datepickerRangeOverr3.datepickerRangeDaysOverrides
+  }, popoverBodyStyleProps, datepickerRangeOverrides === null || datepickerRangeOverrides === void 0 ? void 0 : (_datepickerRangeOverr = datepickerRangeOverrides.datepickerRangeBodyOverrides) === null || _datepickerRangeOverr === void 0 ? void 0 : _datepickerRangeOverr.popoverBody), /*#__PURE__*/_react.default.createElement(_components.DatepickerHeader, {
+    datepickerHeaderOverrides: datepickerRangeOverrides === null || datepickerRangeOverrides === void 0 ? void 0 : (_datepickerRangeOverr2 = datepickerRangeOverrides.datepickerRangeBodyOverrides) === null || _datepickerRangeOverr2 === void 0 ? void 0 : _datepickerRangeOverr2.datepickerHeaderOverrides,
+    context: _DatepickerRangeContext.DatepickerRangeContext
+  }), /*#__PURE__*/_react.default.createElement(_components.DatepickerDays, {
+    datepickerDaysOverrides: datepickerRangeOverrides === null || datepickerRangeOverrides === void 0 ? void 0 : (_datepickerRangeOverr3 = datepickerRangeOverrides.datepickerRangeBodyOverrides) === null || _datepickerRangeOverr3 === void 0 ? void 0 : _datepickerRangeOverr3.datepickerDaysOverrides,
+    context: _DatepickerRangeContext.DatepickerRangeContext,
+    DateRow: _DateRow.default
   })))));
 };
 

package/dist/components/{DatepickerRange → Datepicker/Range}/components/DatepickerRangeControls.js

@@ -13,12 +13,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@chakra-ui/react");
 
+var _components = require("../../common/components");
+
 var _DatepickerRangeContext = require("../DatepickerRangeContext");
 
 var _propTypes = require("../utils/propTypes");
 
-var _DatepickerRangeInput = _interopRequireDefault(require("./DatepickerRangeInput"));
-
 var DatepickerRangeControls = function DatepickerRangeControls(_ref) {
   var selectedStartDate = _ref.selectedStartDate,
       startIsSelected = _ref.startIsSelected,
@@ -40,6 +40,7 @@ var DatepickerRangeControls = function DatepickerRangeControls(_ref) {
       isEndInvalid = _useDatepickerRange.isEndInvalid;
 
   return /*#__PURE__*/_react.default.createElement(_react2.Flex, (0, _extends2.default)({
+    "data-testid": "Datepicker-ControlsContainer",
     direction: {
       base: 'column',
       mobileXL: 'row'
@@ -48,7 +49,7 @@ var DatepickerRangeControls = function DatepickerRangeControls(_ref) {
       base: 2,
       tablet: 9
     }
-  }, datepickerRangeControlsOverrides === null || datepickerRangeControlsOverrides === void 0 ? void 0 : datepickerRangeControlsOverrides.controlsContainer), /*#__PURE__*/_react.default.createElement(_DatepickerRangeInput.default, {
+  }, datepickerRangeControlsOverrides === null || datepickerRangeControlsOverrides === void 0 ? void 0 : datepickerRangeControlsOverrides.controlsContainer), /*#__PURE__*/_react.default.createElement(_components.DatepickerInput, {
     isSelected: startIsSelected,
     onClick: onClickStart,
     selectionPosition: "start",
@@ -58,8 +59,9 @@ var DatepickerRangeControls = function DatepickerRangeControls(_ref) {
     inputLabelText: startDateInputLabelText,
     placeholderText: startDateInputPlaceholderText,
     errorText: startDateInputErrorText,
+    context: _DatepickerRangeContext.DatepickerRangeContext,
     inputComponentOverrides: datepickerRangeControlsOverrides === null || datepickerRangeControlsOverrides === void 0 ? void 0 : datepickerRangeControlsOverrides.startDateInputComponentOverrides
-  }), /*#__PURE__*/_react.default.createElement(_DatepickerRangeInput.default, {
+  }), /*#__PURE__*/_react.default.createElement(_components.DatepickerInput, {
     isSelected: endIsSelected,
     onClick: onClickEnd,
     selectionPosition: "end",
@@ -69,6 +71,7 @@ var DatepickerRangeControls = function DatepickerRangeControls(_ref) {
     inputLabelText: endDateInputLabelText,
     placeholderText: endDateInputPlaceholderText,
     errorText: endDateInputErrorText,
+    context: _DatepickerRangeContext.DatepickerRangeContext,
     inputComponentOverrides: datepickerRangeControlsOverrides === null || datepickerRangeControlsOverrides === void 0 ? void 0 : datepickerRangeControlsOverrides.endDateInputComponentOverrides
   }));
 };

package/dist/components/Datepicker/Range/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, "DatepickerRangeContainer", {
+  enumerable: true,
+  get: function get() {
+    return _DatepickerRangeContainer.default;
+  }
+});
+Object.defineProperty(exports, "DatepickerRangeControls", {
+  enumerable: true,
+  get: function get() {
+    return _DatepickerRangeControls.default;
+  }
+});
+
+var _DateRow = _interopRequireDefault(require("./DateRow"));
+
+var _DatepickerRangeControls = _interopRequireDefault(require("./DatepickerRangeControls"));
+
+var _DatepickerRangeContainer = _interopRequireDefault(require("./DatepickerRangeContainer"));