pcm-shared-components 0.0.140 → 0.0.143

package/dist/components/Date/DateRangeCalendar/index.js

@@ -19,8 +19,7 @@ import './css/style.css';
 export const DateRangeCalendar = props => {
   const {
     minBookingDate,
-    numberOfMonthsMobile,
-    numberOfMonthsDesktop,
+    numberOfMonthsVisible,
     dateFormat,
     minBookingDays,
     onDayRender,
@@ -30,7 +29,9 @@ export const DateRangeCalendar = props => {
     onFocusChange,
     startDate,
     endDate,
-    variant
+    variant,
+    vertical,
+    zIndex
   } = props;
 
   const handleOnDayRender = date => {
@@ -92,7 +93,10 @@ export const DateRangeCalendar = props => {
         selectDateDateFontSize: 18,
         dateRangeArrowIconColor: orange[700],
         inputLabelBorder: variant === 'outlined' ? undefined : 'none',
-        datepickerBorderRadius: 5
+        datepickerBorderRadius: 5,
+        datepickerZIndex: zIndex,
+        dateRangeZIndex: zIndex,
+        dateSingleZIndex: zIndex
       }
     }
   }, /*#__PURE__*/React.createElement(DateRangeInput, {
@@ -115,8 +119,8 @@ export const DateRangeCalendar = props => {
     firstDayOfWeek: 0,
     minBookingDays: minBookingDays,
     minBookingDate: minBookingDate,
-    vertical: window.innerWidth < 800 ? true : false,
-    numberOfMonths: window.innerWidth < 800 ? numberOfMonthsMobile : numberOfMonthsDesktop,
+    vertical: vertical,
+    numberOfMonths: numberOfMonthsVisible,
     onDatesChange: handleOnDatesChange,
     onFocusChange: handleOnFocusChange,
     startDate: startDate // Date or null
@@ -130,8 +134,7 @@ export const DateRangeCalendar = props => {
 export default DateRangeCalendar;
 DateRangeCalendar.defaultProps = {
   minBookingDate: new Date(new Date().setDate(new Date().getDate() + 1)),
-  numberOfMonthsMobile: 1,
-  numberOfMonthsDesktop: 2,
+  numberOfMonthsVisible: 2,
   dateFormat: 'MMM d, yyyy',
   minBookingDays: 1,
   onDayRender: undefined,
@@ -141,17 +144,16 @@ DateRangeCalendar.defaultProps = {
   startDate: null,
   endDate: null,
   focusedInput: null,
-  variant: 'standard'
+  variant: 'standard',
+  vertical: false,
+  zIndex: 1000
 };
 DateRangeCalendar.propTypes = {
   /** Used to provide the minimum booking date.  To allow date selection past todays date simply pas it an old past date example 'new Date('1999-10-02')' */
   minBookingDate: PropTypes.instanceOf(Date),
 
-  /** Number of calendar months to display when we are in mobile view.*/
-  numberOfMonthsMobile: PropTypes.number,
-
-  /** Number of calendar months to display when we are in desktop view.*/
-  numberOfMonthsDesktop: PropTypes.number,
+  /** Number of calendar months to display.*/
+  numberOfMonthsVisible: PropTypes.number,
 
   /** Date format to use when displaying the selected dates in the text boxes.*/
   dateFormat: PropTypes.string,
@@ -181,5 +183,11 @@ DateRangeCalendar.propTypes = {
   focusedInput: PropTypes.oneOf(['startDate', 'endDate', null]),
 
   /** Controls the type of border to display around the date input boxes*/
-  variant: PropTypes.oneOf(['outlined', 'standard', 'none'])
+  variant: PropTypes.oneOf(['outlined', 'standard', 'none']),
+
+  /** Controls the orientation of the calendar */
+  vertical: PropTypes.bool,
+
+  /** Controls the z-index of the calendar dropdown date selection */
+  zIndex: PropTypes.number
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pcm-shared-components",
-  "version": "0.0.140",
+  "version": "0.0.143",
   "private": false,
   "main": "dist/index.js",
   "babel": {
@@ -54,8 +54,8 @@
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
     "@datepicker-react/styled": "^2.8.4",
-    "@emotion/react": "^11.8.1",
-    "@emotion/styled": "^11.8.1",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
     "@mdi/js": "^6.5.95",
     "@mdi/react": "^1.5.0",
     "@mdx-js/loader": "^2.0.0",