@7shifts/sous-chef 2.9.0 → 2.10.0

package/dist/index.js

@@ -8,13 +8,15 @@ var Select = require('react-select');
 var Select__default = _interopDefault(Select);
 var DayPickerInput = _interopDefault(require('react-day-picker/DayPickerInput'));
 var dateFns = require('date-fns');
-var reactDayPicker = require('react-day-picker');
+var DayPicker = require('react-day-picker');
+var DayPicker__default = _interopDefault(DayPicker);
 var dateFnsFormat = _interopDefault(require('date-fns/format'));
 var dateFnsParse = _interopDefault(require('date-fns/parse'));
 var startOfDay = _interopDefault(require('date-fns/startOfDay'));
 var eachDayOfInterval = _interopDefault(require('date-fns/eachDayOfInterval'));
 var parseTime = _interopDefault(require('time-autocomplete/src/core/AMPMParser'));
 var ReactModal = _interopDefault(require('react-modal'));
+require('react-day-picker/lib/style.css');
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -5310,14 +5312,14 @@ var DatePickerCalendar = function DatePickerCalendar(_ref) {
 
 var inputStyles = {"text-field":"_1btTx","date-field":"_1Sc9D","text-field--invalid":"_2feYp","date-field--invalid":"_2SNat","text-field--prefixed":"_E18JV","date-field--prefixed":"_jLolW","text-field--suffixed":"_27J43","date-field--suffixed":"_3eTNi"};
 
-var styles$s = {"container":"_v1b-5","wrapper":"_3mrLu","interactionDisabled":"_1J9dh","DayPicker-Day":"_8FcQE","navBar":"_1SPuq","todayButton":"_24FJ6","navButtonInteractionDisabled":"_Oxdm9","navButtonPrev":"_20uqc","navButtonNext":"_3C53z","months":"_M_eHz","month":"_3RPpJ","caption":"_1FXNw","weekdays":"_3KcRU","weekdaysRow":"_1fO_e","weekday":"_c1Y-X","body":"_34mA1","week":"_1PmqZ","day":"_1AWH2","disabled":"_3vJkw","selected":"_1DR0N","outside":"_276GV","footer":"_2M5xr","today":"_3N6fj","overlayWrapper":"_3Zqgu","overlay":"_20Ncd","weekNumber":"_2hb-S"};
+var dayStyles = {"container":"_v1b-5","wrapper":"_3mrLu","interactionDisabled":"_1J9dh","DayPicker-Day":"_8FcQE","navBar":"_1SPuq","todayButton":"_24FJ6","navButtonInteractionDisabled":"_Oxdm9","navButtonPrev":"_20uqc","navButtonNext":"_3C53z","months":"_M_eHz","month":"_3RPpJ","caption":"_1FXNw","weekdays":"_3KcRU","weekdaysRow":"_1fO_e","weekday":"_c1Y-X","body":"_34mA1","week":"_1PmqZ","day":"_1AWH2","disabled":"_3vJkw","selected":"_1DR0N","outside":"_276GV","footer":"_2M5xr","today":"_3N6fj","overlayWrapper":"_3Zqgu","overlay":"_20Ncd","weekNumber":"_2hb-S"};
 
 function parseDate(str, format, locale) {
   var parsed = dateFnsParse(str, format, new Date(), {
     locale: locale
   });
 
-  if (str.length === format.length && reactDayPicker.DateUtils.isDate(parsed)) {
+  if (str.length === format.length && DayPicker.DateUtils.isDate(parsed)) {
     return parsed;
   }
 
@@ -5394,7 +5396,7 @@ var DateField = function DateField(_ref) {
     error: controllers.error
   };
   var dayPickerProps = {
-    classNames: styles$s,
+    classNames: dayStyles,
     disabledDays: function disabledDays(day) {
       return _disabledDays && _disabledDays(setToMidnight(day));
     },
@@ -5411,7 +5413,7 @@ var DateField = function DateField(_ref) {
     })
   }, React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$s,
+    classNames: dayStyles,
     formatDate: formatDate,
     parseDate: parseDate,
     placeholder: placeholder || format.toUpperCase(),
@@ -5520,7 +5522,7 @@ var getFormikError = function getFormikError(error) {
   return undefined;
 };
 
-var styles$t = {"container":"_1Ini2","wrapper":"_21VnL","interactionDisabled":"_wJ6Cb","DayPicker-Day":"_1c48y","navBar":"_3KwsN","todayButton":"_10CBO","navButtonInteractionDisabled":"_dHL-D","navButtonPrev":"_6kNi3","navButtonNext":"_13W_e","months":"_1FeSY","month":"_wU6A4","caption":"_AMbAo","weekdays":"_1LEst","weekdaysRow":"_2XECo","weekday":"_1C5ry","body":"_11F-Y","week":"_3MAFk","day":"_mG73F","disabled":"_2pgnH","selected":"_MtLaz","outside":"_CRqyX","footer":"_2KG9-","today":"_2JA2y","overlayWrapper":"_1JWbc","overlay":"_2tL6g","weekNumber":"_3u72O","text-field":"_25rf7","date-range-field":"_3qVhi","text-field--invalid":"_2M9Ud","text-field--prefixed":"_3TUb2","text-field--suffixed":"_foqL0","date-range-field--invalid":"_3df9R","date-range-field--disabled":"_2Nkht"};
+var styles$s = {"container":"_1Ini2","wrapper":"_21VnL","interactionDisabled":"_wJ6Cb","DayPicker-Day":"_1c48y","navBar":"_3KwsN","todayButton":"_10CBO","navButtonInteractionDisabled":"_dHL-D","navButtonPrev":"_6kNi3","navButtonNext":"_13W_e","months":"_1FeSY","month":"_wU6A4","caption":"_AMbAo","weekdays":"_1LEst","weekdaysRow":"_2XECo","weekday":"_1C5ry","body":"_11F-Y","week":"_3MAFk","day":"_mG73F","disabled":"_2pgnH","selected":"_MtLaz","outside":"_CRqyX","footer":"_2KG9-","today":"_2JA2y","overlayWrapper":"_1JWbc","overlay":"_2tL6g","weekNumber":"_3u72O","text-field":"_25rf7","date-range-field":"_3qVhi","text-field--invalid":"_2M9Ud","text-field--prefixed":"_3TUb2","text-field--suffixed":"_foqL0","date-range-field--invalid":"_3df9R","date-range-field--disabled":"_2Nkht"};
 
 var FromDate = function FromDate(_ref) {
   var name = _ref.name,
@@ -5558,7 +5560,7 @@ var FromDate = function FromDate(_ref) {
   }
 
   var dayPickerProps = {
-    classNames: styles$t,
+    classNames: styles$s,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -5585,7 +5587,7 @@ var FromDate = function FromDate(_ref) {
   };
   return React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$t,
+    classNames: styles$s,
     selectedDay: start,
     value: start,
     formatDate: formatDate,
@@ -5658,7 +5660,7 @@ var ToDate = function ToDate(_ref, ref) {
   }
 
   var dayPickerProps = {
-    classNames: styles$t,
+    classNames: styles$s,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -5677,7 +5679,7 @@ var ToDate = function ToDate(_ref, ref) {
   };
   return React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$t,
+    classNames: styles$s,
     selectedDay: end,
     value: end,
     formatDate: formatDate,
@@ -5761,7 +5763,7 @@ var DateRangeField = function DateRangeField(_ref) {
       start = _controllers$value.start,
       end = _controllers$value.end;
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$t['date-range-field'], (_classnames = {}, _classnames[styles$t['date-range-field--invalid']] = hasError, _classnames[styles$t['date-range-field--disabled']] = disabled, _classnames))
+    className: classnames(styles$s['date-range-field'], (_classnames = {}, _classnames[styles$s['date-range-field--invalid']] = hasError, _classnames[styles$s['date-range-field--disabled']] = disabled, _classnames))
   }, React__default.createElement(IconCalendarAlt, {
     size: "medium",
     color: GREY400
@@ -5811,7 +5813,7 @@ var DateRangeField = function DateRangeField(_ref) {
   })));
 };
 
-var styles$u = {"container":"_okDvi","wrapper":"_17XdD","interactionDisabled":"_1O7OT","DayPicker-Day":"_3noGA","navBar":"_1Hl3Q","todayButton":"_m0Vs9","navButtonInteractionDisabled":"_1ULWH","navButtonPrev":"_3gjq8","navButtonNext":"_1m-Kd","months":"_Fq6Xh","month":"_3i0Oo","caption":"_36X9Y","weekdays":"_1aWPn","weekdaysRow":"_3HXCK","weekday":"_t-ctd","body":"_XAbiR","week":"_3Nwep","day":"_3nNcG","disabled":"_1M4ZF","selected":"_2PEs8","outside":"_1PIJa","footer":"_2T_z1","today":"_1hVM6","overlayWrapper":"_1L-hI","overlay":"_dDPZb","weekNumber":"_1alhT"};
+var weekStyles = {"container":"_okDvi","wrapper":"_17XdD","interactionDisabled":"_1O7OT","DayPicker-Day":"_3noGA","navBar":"_1Hl3Q","todayButton":"_m0Vs9","navButtonInteractionDisabled":"_1ULWH","navButtonPrev":"_3gjq8","navButtonNext":"_1m-Kd","months":"_Fq6Xh","month":"_3i0Oo","caption":"_36X9Y","weekdays":"_1aWPn","weekdaysRow":"_3HXCK","weekday":"_t-ctd","body":"_XAbiR","week":"_3Nwep","day":"_3nNcG","disabled":"_1M4ZF","selected":"_2PEs8","outside":"_1PIJa","footer":"_2T_z1","today":"_1hVM6","overlayWrapper":"_1L-hI","overlay":"_dDPZb","weekNumber":"_1alhT"};
 
 var WeekField = function WeekField(_ref) {
   var _classnames;
@@ -5886,7 +5888,7 @@ var WeekField = function WeekField(_ref) {
   };
 
   var dayPickerProps = {
-    classNames: styles$u,
+    classNames: weekStyles,
     disabledDays: function disabledDays(day) {
       return _disabledDays && _disabledDays(setToMidnight(day));
     },
@@ -5916,7 +5918,7 @@ var WeekField = function WeekField(_ref) {
     })
   }, React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$u,
+    classNames: weekStyles,
     formatDate: formatDate,
     parseDate: parseDate,
     placeholder: placeholder || format.toUpperCase(),
@@ -6112,9 +6114,9 @@ var PercentageElement = function PercentageElement(_ref, ref) {
 
 var PercentageField = React.forwardRef(PercentageElement);
 
-var styles$v = {"overlay":"_2puqJ","overlay--after-open":"_1167h","overlay--before-close":"_t_t7L","content":"_wQQ_2","content--after-open":"_3jwux","content--before-close":"_2c2QP"};
+var styles$t = {"overlay":"_2puqJ","overlay--after-open":"_1167h","overlay--before-close":"_t_t7L","content":"_wQQ_2","content--after-open":"_3jwux","content--before-close":"_2c2QP"};
 
-var styles$w = {"header":"_36nxW","sub-header":"_2XwRD"};
+var styles$u = {"header":"_36nxW","sub-header":"_2XwRD"};
 
 var ModalHeader = function ModalHeader(_ref) {
   var header = _ref.header,
@@ -6126,12 +6128,12 @@ var ModalHeader = function ModalHeader(_ref) {
     flex: [1],
     alignItems: "center"
   }, React__default.createElement("span", {
-    className: styles$w['header']
+    className: styles$u['header']
   }, header), React__default.createElement(Button$1, {
     theme: "link-icon",
     onClick: onClose
   }, React__default.createElement(IconTimes, null))), subHeader && React__default.createElement("div", {
-    className: styles$w['sub-header']
+    className: styles$u['sub-header']
   }, subHeader));
 };
 
@@ -6167,14 +6169,14 @@ var Modal = function Modal(_ref) {
     contentLabel: "Modal",
     appElement: rootElementId && document.getElementById(rootElementId) || undefined,
     overlayClassName: {
-      base: styles$v['overlay'],
-      afterOpen: styles$v['overlay--after-open'],
-      beforeClose: styles$v['overlay--before-close']
+      base: styles$t['overlay'],
+      afterOpen: styles$t['overlay--after-open'],
+      beforeClose: styles$t['overlay--before-close']
     },
     className: {
-      base: styles$v['content'],
-      afterOpen: styles$v['content--after-open'],
-      beforeClose: styles$v['content--before-close']
+      base: styles$t['content'],
+      afterOpen: styles$t['content--after-open'],
+      beforeClose: styles$t['content--before-close']
     }
   }, React__default.createElement(ModalHeader, {
     header: header,
@@ -6187,16 +6189,16 @@ Modal.setAppElement = function (rootElement) {
   ReactModal.setAppElement(rootElement);
 };
 
-var styles$x = {"modal-body":"_2J-ku"};
+var styles$v = {"modal-body":"_2J-ku"};
 
 var ModalBody = function ModalBody(_ref) {
   var children = _ref.children;
   return React__default.createElement("div", {
-    className: styles$x['modal-body']
+    className: styles$v['modal-body']
   }, children);
 };
 
-var styles$y = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
+var styles$w = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
 
 var ModalFooter = function ModalFooter(_ref) {
   var children = _ref.children,
@@ -6217,7 +6219,7 @@ var ModalFooter = function ModalFooter(_ref) {
     return React__default.createElement(FooterContainer, null, React__default.createElement(Inline, {
       justifyContent: "space-between"
     }, React__default.createElement("div", {
-      className: classnames((_classnames = {}, _classnames[styles$y['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
+      className: classnames((_classnames = {}, _classnames[styles$w['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
     }, tertiaryButton || React__default.createElement("div", null)), React__default.createElement(Inline, {
       space: 12
     }, secondaryButton, primaryButton)));
@@ -6245,7 +6247,7 @@ var FooterContainer = function FooterContainer(_ref2) {
   var childrenItens = React__default.Children.toArray(children);
   var hasCustomAlignment = childrenItens.length === 1 && childrenItens[0].type === Inline;
   return React__default.createElement("div", {
-    className: styles$y['modal-footer']
+    className: styles$w['modal-footer']
   }, React__default.createElement(Inline, {
     justifyContent: "end",
     space: 12,
@@ -6253,7 +6255,161 @@ var FooterContainer = function FooterContainer(_ref2) {
   }, children));
 };
 
-var styles$z = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
+var CALENDAR_MODE = {
+  DAY: 'day',
+  WEEK: 'week'
+};
+var CALENDAR_PLACEMENT = {
+  BOTTOM: 'bottom',
+  TOP: 'top'
+};
+
+var calculateCalendarPosition = function calculateCalendarPosition(placement, anchorPosition, calendarDimensions) {
+  if (!calendarDimensions) {
+    return {
+      left: 0,
+      top: 0
+    };
+  }
+
+  var horizontalPosition = getHorizontalPosition(anchorPosition, calendarDimensions);
+  var verticalPosition = getVerticalPosition(anchorPosition, placement, calendarDimensions);
+  return _extends({}, horizontalPosition, verticalPosition);
+};
+
+var getHorizontalPosition = function getHorizontalPosition(anchorPosition, calendarDimensions) {
+  var innerWidth = window.innerWidth;
+  var calendarRight = anchorPosition.left + calendarDimensions.width;
+
+  if (innerWidth > calendarRight + BUFFER) {
+    return {
+      left: anchorPosition.left
+    };
+  }
+
+  return {
+    left: anchorPosition.right - calendarDimensions.width
+  };
+};
+
+var getVerticalPosition = function getVerticalPosition(anchorPosition, placement, calendarDimensions) {
+  var calendarTopAboveTrigger = anchorPosition.top - calendarDimensions.height - PADDING;
+  var calendarTopBelowTrigger = anchorPosition.bottom + PADDING;
+
+  if (placement === CALENDAR_PLACEMENT.TOP) {
+    if (calendarTopAboveTrigger < 0) {
+      return {
+        top: anchorPosition.bottom + PADDING
+      };
+    }
+
+    return {
+      top: calendarTopAboveTrigger + window.scrollY
+    };
+  } else {
+    if (calendarTopBelowTrigger + calendarDimensions.height > window.innerHeight) {
+      return {
+        top: calendarTopAboveTrigger + window.scrollY
+      };
+    }
+
+    return {
+      top: calendarTopBelowTrigger + window.scrollY
+    };
+  }
+};
+
+var Calendar = function Calendar(_ref) {
+  var _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? CALENDAR_MODE.DAY : _ref$mode,
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? CALENDAR_PLACEMENT.BOTTOM : _ref$position,
+      _ref$weekStart = _ref.weekStart,
+      weekStart = _ref$weekStart === void 0 ? 0 : _ref$weekStart,
+      selected = _ref.selected,
+      onSelect = _ref.onSelect,
+      onClickOutside = _ref.onClickOutside,
+      disabledDays = _ref.disabledDays,
+      anchorRef = _ref.anchorRef;
+
+  var _useState = React.useState(null),
+      calendarRef = _useState[0],
+      setCalendarRef = _useState[1];
+
+  var style = mode === CALENDAR_MODE.DAY ? dayStyles : weekStyles;
+  var anchorNode = anchorRef.current;
+  useOnClickOutside({
+    current: calendarRef
+  }, function (event) {
+    var _anchorRef$current;
+
+    if (!((_anchorRef$current = anchorRef.current) !== null && _anchorRef$current !== void 0 && _anchorRef$current.contains(event === null || event === void 0 ? void 0 : event.srcElement))) {
+      onClickOutside();
+    }
+  });
+  var weekRange = selected ? createWeekRange(selected, weekStart) : undefined;
+  var selectedRange = weekRange && {
+    from: weekRange.start,
+    to: weekRange.end
+  };
+
+  var handleSelect = function handleSelect(day) {
+    var selectedDate = setToMidnight(day);
+
+    if (mode === CALENDAR_MODE.DAY) {
+      onSelect(selectedDate);
+    } else {
+      var _weekRange = createWeekRange(selectedDate, weekStart);
+
+      onSelect(_weekRange.start);
+    }
+
+    setTimeout(function () {
+      onClickOutside();
+    }, 100);
+  };
+
+  if (!anchorNode) {
+    return null;
+  }
+
+  var anchorPosition = anchorNode.getBoundingClientRect();
+  var calendarPosition = calculateCalendarPosition(position, anchorPosition, calendarRef === null || calendarRef === void 0 ? void 0 : calendarRef.getBoundingClientRect());
+  return React__default.createElement(Portal, null, React__default.createElement("div", {
+    className: style.overlayWrapper
+  }, React__default.createElement("div", {
+    className: style.overlay,
+    ref: function ref(_ref2) {
+      return setCalendarRef(_ref2);
+    },
+    style: _extends({}, calendarPosition, {
+      zIndex: Z_INDEX_LAYERS.MODAL
+    })
+  }, React__default.createElement(DayPicker__default, {
+    format: "MM/dd/yyyy",
+    classNames: style,
+    onDayClick: function onDayClick(day, activeModifiers) {
+      var isDateDisabled = Object.keys(activeModifiers).find(function (modifier) {
+        return modifier.includes('disabled');
+      });
+
+      if (!Boolean(isDateDisabled)) {
+        handleSelect(day);
+      }
+    },
+    selectedDays: mode === CALENDAR_MODE.DAY ? selected : selectedRange,
+    disabledDays: disabledDays,
+    months: MONTH_NAMES,
+    weekdaysLong: DAYS,
+    weekdaysShort: DAYS.map(function (day) {
+      return day.substring(0, 2);
+    }),
+    showOutsideDays: mode === CALENDAR_MODE.WEEK,
+    firstDayOfWeek: weekStart
+  }))));
+};
+
+var styles$x = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
 
 var _excluded$a = ["children", "theme", "title"];
 
@@ -6276,16 +6432,16 @@ var Badge = function Badge(_ref, forwardedRef) {
     overlay: title,
     ref: ref
   }, React__default.createElement("div", Object.assign({
-    className: classnames(styles$z['badge'], (_classnames = {}, _classnames[styles$z['badge--success']] = theme === 'success', _classnames[styles$z['badge--danger']] = theme === 'danger', _classnames[styles$z['badge--info']] = theme === 'info', _classnames[styles$z['badge--warning']] = theme === 'warning', _classnames)),
+    className: classnames(styles$x['badge'], (_classnames = {}, _classnames[styles$x['badge--success']] = theme === 'success', _classnames[styles$x['badge--danger']] = theme === 'danger', _classnames[styles$x['badge--info']] = theme === 'info', _classnames[styles$x['badge--warning']] = theme === 'warning', _classnames)),
     ref: ref
   }, otherProps), children));
 };
 
 var Badge$1 = React.forwardRef(Badge);
 
-var styles$A = {"avatar":"_2wJGB","avatar--small":"_3QTSo","avatar__badge":"_2Rl8S","avatar--medium":"_1zwj0","avatar--large":"_3-U6x","avatar--extra-large":"_3qn2q"};
+var styles$y = {"avatar":"_2wJGB","avatar--small":"_3QTSo","avatar__badge":"_2Rl8S","avatar--medium":"_1zwj0","avatar--large":"_3-U6x","avatar--extra-large":"_3qn2q"};
 
-var styles$B = {"avatar-image":"_GKL9P"};
+var styles$z = {"avatar-image":"_GKL9P"};
 
 var AvatarImage = function AvatarImage(_ref) {
   var url = _ref.url,
@@ -6310,7 +6466,7 @@ var AvatarImage = function AvatarImage(_ref) {
   }
 
   return React__default.createElement("div", {
-    className: styles$B['avatar-image']
+    className: styles$z['avatar-image']
   }, React__default.createElement(IconUserSolid, {
     size: "flexible",
     color: color
@@ -6378,7 +6534,7 @@ var Avatar = function Avatar(_ref) {
 
   var backgroundColor = url ? GREY200 : color;
   return React__default.createElement("div", {
-    className: classnames(styles$A['avatar'], (_classnames = {}, _classnames[styles$A['avatar--small']] = size === 'small', _classnames[styles$A['avatar--medium']] = size === 'medium', _classnames[styles$A['avatar--large']] = size === 'large', _classnames[styles$A['avatar--extra-large']] = size === 'extra-large', _classnames)),
+    className: classnames(styles$y['avatar'], (_classnames = {}, _classnames[styles$y['avatar--small']] = size === 'small', _classnames[styles$y['avatar--medium']] = size === 'medium', _classnames[styles$y['avatar--large']] = size === 'large', _classnames[styles$y['avatar--extra-large']] = size === 'extra-large', _classnames)),
     style: {
       backgroundColor: children || url && !showIconInsteadOfImage ? backgroundColor : defaultProfilePictureColors.backgroundColor
     }
@@ -6390,13 +6546,14 @@ var Avatar = function Avatar(_ref) {
       return setShowIconInsteadOfImage(true);
     }
   }), badge && size !== 'small' && React__default.createElement("div", {
-    className: styles$A['avatar__badge']
+    className: styles$y['avatar__badge']
   }, badge));
 };
 
 exports.Avatar = Avatar;
 exports.Badge = Badge$1;
 exports.Button = Button$1;
+exports.Calendar = Calendar;
 exports.CheckboxField = CheckboxField;
 exports.CurrencyField = CurrencyField;
 exports.DataTable = DataTable;