@7shifts/sous-chef 2.5.1 → 2.6.0

package/dist/index.modern.js

@@ -5113,8 +5113,17 @@ var DatePickerCalendar = function DatePickerCalendar(_ref) {
       children = _ref.children,
       onBlur = _ref.onBlur,
       onFocus = _ref.onFocus,
-      tabIndex = _ref.tabIndex;
+      tabIndex = _ref.tabIndex,
+      showCalendar = _ref.showCalendar,
+      onClickOutside = _ref.onClickOutside;
   var inputPosition = inputNode.getBoundingClientRect();
+  var calendarRef = useRef(null);
+  useOnClickOutside(calendarRef, onClickOutside);
+
+  if (!showCalendar) {
+    return null;
+  }
+
   return React__default.createElement(Portal, null, React__default.createElement("div", {
     className: classNames.overlayWrapper,
     onBlur: onBlur,
@@ -5124,7 +5133,8 @@ var DatePickerCalendar = function DatePickerCalendar(_ref) {
       zIndex: 9999,
       left: inputPosition.left,
       top: inputPosition.top + window.scrollY + inputPosition.height + 3
-    }
+    },
+    ref: calendarRef
   }, React__default.createElement("div", {
     className: classNames.overlay
   }, children)));
@@ -5194,6 +5204,11 @@ var DateField = function DateField(_ref) {
       _ref$readOnly = _ref.readOnly,
       readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
   var inputRef = useRef();
+
+  var _useState = useState(false),
+      showCalendar = _useState[0],
+      setShowCalendar = _useState[1];
+
   var controllers = useDateFieldControllers({
     name: name,
     id: inputId,
@@ -5235,10 +5250,17 @@ var DateField = function DateField(_ref) {
     defaultValue: defaultValue,
     value: controllers.value || '',
     onDayChange: controllers.onChange,
-    onDayPickerHide: controllers.onBlur,
+    onDayPickerHide: function onDayPickerHide() {
+      controllers.onBlur();
+      setShowCalendar(false);
+    },
     overlayComponent: function overlayComponent(props) {
       return React__default.createElement(DatePickerCalendar, Object.assign({}, props, {
-        inputNode: inputRef.current
+        inputNode: inputRef.current,
+        showCalendar: showCalendar,
+        onClickOutside: function onClickOutside() {
+          return setShowCalendar(false);
+        }
       }));
     },
     dayPickerProps: dayPickerProps,
@@ -5252,7 +5274,13 @@ var DateField = function DateField(_ref) {
       autoComplete: 'off',
       ref: inputRef,
       readOnly: readOnly,
-      disabled: disabled
+      disabled: disabled,
+      onFocus: function onFocus() {
+        return setShowCalendar(true);
+      }
+    },
+    onDayPickerShow: function onDayPickerShow() {
+      return setShowCalendar(true);
     }
   })));
 };
@@ -5290,7 +5318,7 @@ var useRangeFieldControllers = function useRangeFieldControllers(_ref) {
 
   if (formik && formikState) {
     return _extends({}, initialControllers, {
-      error: error !== undefined ? initialControllers.error : formikState.error,
+      error: error !== undefined ? initialControllers.error : getFormikError(formikState.error),
       value: value !== undefined ? initialControllers.value : formikState.value,
       onChange: _onChange ? initialControllers.onChange : function (newValue) {
         formik.setFieldValue(name, newValue === undefined ? null : newValue);
@@ -5304,12 +5332,33 @@ var useRangeFieldControllers = function useRangeFieldControllers(_ref) {
   return initialControllers;
 };
 
+var getFormikError = function getFormikError(error) {
+  if (!error) {
+    return undefined;
+  }
+
+  if (typeof error === 'string') {
+    return error;
+  }
+
+  if (error.start) {
+    return error.start;
+  }
+
+  if (error.end) {
+    return error.end;
+  }
+
+  return undefined;
+};
+
 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,
       id = _ref.id,
       format = _ref.format,
+      disabledDays = _ref.disabledDays,
       start = _ref.start,
       end = _ref.end,
       placeholder = _ref.placeholder,
@@ -5317,12 +5366,29 @@ var FromDate = function FromDate(_ref) {
       disabled = _ref.disabled,
       readOnly = _ref.readOnly,
       onChange = _ref.onChange,
-      onDayClick = _ref.onDayClick;
+      _onDayClick = _ref.onDayClick;
+
+  var _useState = useState(false),
+      showCalendar = _useState[0],
+      setShowCalendar = _useState[1];
+
   var inputRef = useRef();
   var modifiers = {
     from: start,
     to: end
   };
+  var disabledDaysChecks = end ? [{
+    after: end
+  }] : [];
+
+  if (disabledDays) {
+    if (Array.isArray(disabledDays)) {
+      disabledDaysChecks.push.apply(disabledDaysChecks, disabledDays);
+    } else {
+      disabledDaysChecks.push(disabledDays);
+    }
+  }
+
   var dayPickerProps = {
     classNames: styles$s,
     months: MONTH_NAMES,
@@ -5336,12 +5402,18 @@ var FromDate = function FromDate(_ref) {
       from: start,
       to: end
     }],
-    disabledDays: {
-      after: end
-    },
+    disabledDays: disabledDaysChecks,
     toMonth: end,
     modifiers: modifiers,
-    onDayClick: onDayClick
+    onDayClick: function onDayClick(_, activeModifiers) {
+      var isDateDisabled = Object.keys(activeModifiers).find(function (modifier) {
+        return modifier;
+      });
+
+      if (!Boolean(isDateDisabled)) {
+        _onDayClick();
+      }
+    }
   };
   return React__default.createElement(DayPickerInput, {
     format: format,
@@ -5352,9 +5424,16 @@ var FromDate = function FromDate(_ref) {
     parseDate: parseDate,
     placeholder: placeholder,
     onDayChange: onChange,
+    onDayPickerHide: function onDayPickerHide() {
+      return setShowCalendar(false);
+    },
     overlayComponent: function overlayComponent(props) {
       return React__default.createElement(DatePickerCalendar, Object.assign({}, props, {
-        inputNode: inputRef.current
+        inputNode: inputRef.current,
+        showCalendar: showCalendar,
+        onClickOutside: function onClickOutside() {
+          return setShowCalendar(false);
+        }
       }));
     },
     dayPickerProps: dayPickerProps,
@@ -5366,7 +5445,13 @@ var FromDate = function FromDate(_ref) {
       readOnly: readOnly,
       disabled: disabled,
       'data-testid': "range-picker-field-from-" + name,
-      type: 'text'
+      type: 'text',
+      onFocus: function onFocus() {
+        return setShowCalendar(true);
+      }
+    },
+    onDayPickerShow: function onDayPickerShow() {
+      return setShowCalendar(true);
     }
   });
 };
@@ -5374,17 +5459,36 @@ var FromDate = function FromDate(_ref) {
 var ToDate = function ToDate(_ref, ref) {
   var name = _ref.name,
       format = _ref.format,
+      disabledDays = _ref.disabledDays,
       start = _ref.start,
       end = _ref.end,
       placeholder = _ref.placeholder,
       weekStart = _ref.weekStart,
       disabled = _ref.disabled,
       readOnly = _ref.readOnly,
-      onChange = _ref.onChange;
+      onChange = _ref.onChange,
+      _onBlur = _ref.onBlur;
+
+  var _useState = useState(false),
+      showCalendar = _useState[0],
+      setShowCalendar = _useState[1];
+
   var modifiers = {
     from: start,
     to: end
   };
+  var disabledDaysChecks = start ? [{
+    before: start
+  }] : [];
+
+  if (disabledDays) {
+    if (Array.isArray(disabledDays)) {
+      disabledDaysChecks.push.apply(disabledDaysChecks, disabledDays);
+    } else {
+      disabledDaysChecks.push(disabledDays);
+    }
+  }
+
   var dayPickerProps = {
     classNames: styles$s,
     months: MONTH_NAMES,
@@ -5398,9 +5502,7 @@ var ToDate = function ToDate(_ref, ref) {
       from: start,
       to: end
     }],
-    disabledDays: {
-      before: start
-    },
+    disabledDays: disabledDaysChecks,
     modifiers: modifiers,
     month: end || start,
     fromMonth: start
@@ -5414,9 +5516,16 @@ var ToDate = function ToDate(_ref, ref) {
     parseDate: parseDate,
     placeholder: placeholder,
     onDayChange: onChange,
+    onDayPickerHide: function onDayPickerHide() {
+      return setShowCalendar(false);
+    },
     overlayComponent: function overlayComponent(props) {
       return React__default.createElement(DatePickerCalendar, Object.assign({}, props, {
-        inputNode: ref === null || ref === void 0 ? void 0 : ref.current
+        inputNode: ref === null || ref === void 0 ? void 0 : ref.current,
+        showCalendar: showCalendar,
+        onClickOutside: function onClickOutside() {
+          return setShowCalendar(false);
+        }
       }));
     },
     dayPickerProps: dayPickerProps,
@@ -5427,7 +5536,16 @@ var ToDate = function ToDate(_ref, ref) {
       readOnly: readOnly,
       disabled: disabled,
       'data-testid': "range-picker-field-to-" + name,
-      type: 'text'
+      type: 'text',
+      onFocus: function onFocus() {
+        return setShowCalendar(true);
+      },
+      onBlur: function onBlur() {
+        setTimeout(_onBlur, 200);
+      }
+    },
+    onDayPickerShow: function onDayPickerShow() {
+      return setShowCalendar(true);
     }
   });
 };
@@ -5435,11 +5553,12 @@ var ToDate = function ToDate(_ref, ref) {
 var ToDate$1 = forwardRef(ToDate);
 
 var DateRangeField = function DateRangeField(_ref) {
-  var _classnames, _classnames2;
+  var _classnames;
 
   var name = _ref.name,
       inputId = _ref.id,
       value = _ref.value,
+      disabledDays = _ref.disabledDays,
       _ref$format = _ref.format,
       format = _ref$format === void 0 ? 'MM/dd/yyyy' : _ref$format,
       onChange = _ref.onChange,
@@ -5474,7 +5593,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$s['date-range-field'], (_classnames = {}, _classnames[styles$s['date-range-field--invalid']] = hasError, _classnames), (_classnames2 = {}, _classnames2[styles$s['date-range-field--disabled']] = disabled, _classnames2))
+    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
@@ -5487,6 +5606,7 @@ var DateRangeField = function DateRangeField(_ref) {
     placeholder: placeholder || format.toUpperCase(),
     weekStart: weekStart,
     disabled: disabled,
+    disabledDays: disabledDays,
     readOnly: readOnly,
     onChange: function onChange(val) {
       return controllers.onChange({
@@ -5510,7 +5630,9 @@ var DateRangeField = function DateRangeField(_ref) {
     placeholder: placeholder || format.toUpperCase(),
     weekStart: weekStart,
     disabled: disabled,
+    disabledDays: disabledDays,
     readOnly: readOnly,
+    onBlur: controllers.onBlur,
     onChange: function onChange(val) {
       return controllers.onChange({
         start: start,
@@ -5550,6 +5672,10 @@ var WeekField = function WeekField(_ref) {
       hoverDate = _useState[0],
       setHoverDate = _useState[1];
 
+  var _useState2 = useState(false),
+      showCalendar = _useState2[0],
+      setShowCalendar = _useState2[1];
+
   var inputRef = useRef();
   var controllers = useDateFieldControllers({
     name: name,
@@ -5632,7 +5758,11 @@ var WeekField = function WeekField(_ref) {
     onDayPickerHide: controllers.onBlur,
     overlayComponent: function overlayComponent(props) {
       return React__default.createElement(DatePickerCalendar, Object.assign({}, props, {
-        inputNode: inputRef.current
+        inputNode: inputRef.current,
+        showCalendar: showCalendar,
+        onClickOutside: function onClickOutside() {
+          return setShowCalendar(false);
+        }
       }));
     },
     dayPickerProps: dayPickerProps,
@@ -5646,7 +5776,13 @@ var WeekField = function WeekField(_ref) {
       autoComplete: 'off',
       ref: inputRef,
       readOnly: readOnly,
-      disabled: disabled
+      disabled: disabled,
+      onFocus: function onFocus() {
+        return setShowCalendar(true);
+      }
+    },
+    onDayPickerShow: function onDayPickerShow() {
+      return setShowCalendar(true);
     }
   })));
 };