pcm-shared-components 0.0.138 → 0.0.141

package/dist/components/Buttons/DropdownButton/index.js

@@ -31,6 +31,7 @@ export const DropdownButton = props => {
     menuData,
     variant,
     size,
+    menuAnchorLocation,
     theme
   } = props;
   const compTheme = theme ? theme : useTheme();
@@ -38,7 +39,8 @@ export const DropdownButton = props => {
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: defaultTheme
   }, /*#__PURE__*/React.createElement(ReusablePopupMenu, _extends({}, menuData, {
-    theme: defaultTheme
+    theme: defaultTheme,
+    menuAnchorLocation: menuAnchorLocation
   }), /*#__PURE__*/React.createElement(Button, {
     variant: variant,
     className: className,
@@ -55,7 +57,8 @@ DropdownButton.defaultProps = {
   color: 'primary',
   className: '',
   variant: 'text',
-  theme: {}
+  theme: {},
+  menuAnchorLocation: 'right'
 };
 DropdownButton.propTypes = {
   /** Name of the till being used. Note: if till name exist then inUse is true */
@@ -77,5 +80,8 @@ DropdownButton.propTypes = {
   size: PropTypes.oneOf(['small', 'medium', 'large']),
 
   /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
-  theme: PropTypes.object
+  theme: PropTypes.object,
+
+  /** Controls the location of the dropdown popup menu */
+  menuAnchorLocation: PropTypes.oneOf(['left', 'center', 'right'])
 };

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,22 +29,12 @@ export const DateRangeCalendar = props => {
     onFocusChange,
     startDate,
     endDate,
-    variant
+    variant,
+    zIndex
   } = props;
 
-  const isValidRenderFunction = functionToCheck => {
-    try {
-      //Makes sure we have a function and also that it's a valid react element which the calendar will use to display the date.
-      return functionToCheck && /*#__PURE__*/React.isValidElement(functionToCheck) ? true : false;
-    } catch (error) {
-      console.error(error);
-    }
-
-    return false;
-  };
-
   const handleOnDayRender = date => {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, onDayRender && isValidRenderFunction(onDayRender(date)) ? /*#__PURE__*/React.createElement(React.Fragment, null, onDayRender(date)) : /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, onDayRender ? /*#__PURE__*/React.createElement(React.Fragment, null, onDayRender(date)) : /*#__PURE__*/React.createElement("span", {
       className: ""
     }, new Date(date).getDate()));
   };
@@ -103,7 +92,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, {
@@ -126,8 +118,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
@@ -141,8 +133,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,
@@ -152,17 +143,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,
@@ -192,5 +182,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/dist/components/Menus/ReusablePopupMenu/index.js

@@ -94,5 +94,7 @@ ReusableMenu.propTypes = {
    * The theme object to apply to this object, if no theme provided then the component will used the default theme passed down by the ThemeProvider
    */
   theme: PropTypes.object,
+
+  /** Controls the location of the dropdown popup menu */
   menuAnchorLocation: PropTypes.oneOf(['left', 'center', 'right'])
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pcm-shared-components",
-  "version": "0.0.138",
+  "version": "0.0.141",
   "private": false,
   "main": "dist/index.js",
   "babel": {