@7shifts/sous-chef 2.4.0 → 2.6.0

package/dist/forms/DatePickerCalendar/DatePickerCalendar.d.ts

@@ -7,6 +7,8 @@ declare type Props = {
     onFocus: () => void;
     tabIndex: number;
     children: React.ReactNode;
+    showCalendar: boolean;
+    onClickOutside: () => void;
 };
 declare const DatePickerCalendar: React.FC<Props>;
 export default DatePickerCalendar;

package/dist/forms/DateRangeField/DateRangeField.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
-import { WeekStart, DateRange } from '../../utils/date';
+import { WeekStart, DateRange, BlockedDays } from '../../utils/date';
 declare type Props = {
     name: string;
     /** If not provided it will generate a random id so the label links properly with the text input */
     id?: string;
     value?: DateRange;
+    /** It disable some dates so the user can't click on them. Refer to this [doc](https://react-day-picker.js.org/api/types/matcher) to see what values you can use. */
+    disabledDays?: BlockedDays;
     /** Reference this for valid formats: https://date-fns.org/v2.18.0/docs/format */
     format?: string;
     onChange?: (e: DateRange) => void;

package/dist/forms/DateRangeField/FromDate/FromDate.d.ts

@@ -1,8 +1,9 @@
-import { WeekStart } from '../../../utils/date';
+import { WeekStart, BlockedDays } from '../../../utils/date';
 declare type Props = {
     name: string;
     id: string;
     format: string;
+    disabledDays?: BlockedDays;
     start?: Date;
     end?: Date;
     placeholder: string;
@@ -12,5 +13,5 @@ declare type Props = {
     onChange: (e: Date) => void;
     onDayClick: () => void;
 };
-declare const FromDate: ({ name, id, format, start, end, placeholder, weekStart, disabled, readOnly, onChange, onDayClick }: Props) => JSX.Element;
+declare const FromDate: ({ name, id, format, disabledDays, start, end, placeholder, weekStart, disabled, readOnly, onChange, onDayClick }: Props) => JSX.Element;
 export default FromDate;

package/dist/forms/DateRangeField/ToDate/ToDate.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import { WeekStart } from '../../../utils/date';
+import { WeekStart, BlockedDays } from '../../../utils/date';
 declare type Props = {
     name: string;
     format: string;
+    disabledDays?: BlockedDays;
     start?: Date;
     end?: Date;
     placeholder: string;
@@ -10,6 +11,7 @@ declare type Props = {
     disabled?: boolean;
     readOnly: boolean;
     onChange: (e: Date) => void;
+    onBlur: () => void;
 };
 declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/dist/icons/components/IconBirthdayCake.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { IconSize } from '../types';
+declare type Props = {
+    size?: IconSize;
+    color?: string;
+} & React.SVGProps<SVGSVGElement>;
+declare const IconBirthdayCake: {
+    (props: Props): JSX.Element;
+    displayName: string;
+};
+export default IconBirthdayCake;

package/dist/icons/components/IconCalendarStar.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { IconSize } from '../types';
+declare type Props = {
+    size?: IconSize;
+    color?: string;
+} & React.SVGProps<SVGSVGElement>;
+declare const IconCalendarStar: {
+    (props: Props): JSX.Element;
+    displayName: string;
+};
+export default IconCalendarStar;

package/dist/icons/components/index.d.ts

@@ -12,6 +12,7 @@ export { default as IconBan } from './IconBan';
 export { default as IconBarsH } from './IconBarsH';
 export { default as IconBarsV } from './IconBarsV';
 export { default as IconBell } from './IconBell';
+export { default as IconBirthdayCake } from './IconBirthdayCake';
 export { default as IconBold } from './IconBold';
 export { default as IconBolt } from './IconBolt';
 export { default as IconBook } from './IconBook';
@@ -22,6 +23,7 @@ export { default as IconCalendarAlt } from './IconCalendarAlt';
 export { default as IconCalendarCheck } from './IconCalendarCheck';
 export { default as IconCalendarDay } from './IconCalendarDay';
 export { default as IconCalendarExclamation } from './IconCalendarExclamation';
+export { default as IconCalendarStar } from './IconCalendarStar';
 export { default as IconCalendarTomorrow } from './IconCalendarTomorrow';
 export { default as IconCalendar } from './IconCalendar';
 export { default as IconCameraSlash } from './IconCameraSlash';

package/dist/index.css

@@ -215,7 +215,7 @@ Please ask a designer if you have questions about which colours to use.
 }
 ._1iXKZ {
   background: #fff;
-  color: #464646;
+  color: #555;
 }
 ._2K2Xx {
   font-weight: 600;
@@ -247,7 +247,7 @@ Please ask a designer if you have questions about which colours to use.
 }
 ._2LAWl {
   border-top-color: #fff;
-  color: #464646;
+  color: #555;
 }
 /*********************************
 For new colours, see _colors.scss.
@@ -823,7 +823,7 @@ Please ask a designer if you have questions about which colours to use.
   font-weight: 600;
   font-family: "Proxima Nova", sans-serif;
   color: #555;
-  padding: 19px 17px 8px 17px;
+  padding: 20px 17px 8px 17px;
 }
 
 ._27x4v {
@@ -1785,7 +1785,7 @@ Please ask a designer if you have questions about which colours to use.
   cursor: default;
 }
 
-._276GV {
+._276GV:not(._3vJkw) {
   color: #c1c1c1;
   cursor: default;
 }
@@ -2003,7 +2003,7 @@ Please ask a designer if you have questions about which colours to use.
   cursor: default;
 }
 
-._CRqyX {
+._CRqyX:not(._2pgnH) {
   color: #c1c1c1;
   cursor: default;
 }
@@ -2331,7 +2331,7 @@ Please ask a designer if you have questions about which colours to use.
   cursor: default;
 }
 
-._1PIJa {
+._1PIJa:not(._1M4ZF) {
   color: #c1c1c1;
   cursor: default;
 }

package/dist/index.js

@@ -974,6 +974,21 @@ var IconBell = function IconBell(props) {
 
 IconBell.displayName = 'IconBell';
 
+var IconBirthdayCake = function IconBirthdayCake(props) {
+  return React__default.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": "icon-birthday-cake",
+    style: getIconStyles(props)
+  }, props), React__default.createElement("path", {
+    d: "M5 3.75c-.693 0-1.25-.557-1.25-1.25C3.75 1.29 5 1.602 5 0c.469 0 1.25 1.152 1.25 2.188C6.25 3.223 5.693 3.75 5 3.75Zm5 0c-.693 0-1.25-.557-1.25-1.25C8.75 1.29 10 1.602 10 0c.469 0 1.25 1.152 1.25 2.188 0 1.035-.557 1.562-1.25 1.562Zm5 0c-.693 0-1.25-.557-1.25-1.25C13.75 1.29 15 1.602 15 0c.469 0 1.25 1.152 1.25 2.188 0 1.035-.557 1.562-1.25 1.562ZM16.875 10h-1.25V4.375h-1.25V10h-3.75V4.375h-1.25V10h-3.75V4.375h-1.25V10h-1.25c-1.035 0-1.875.84-1.875 1.875V20h17.5v-8.125c0-1.035-.84-1.875-1.875-1.875Zm.625 8.75h-15v-2.814c.634-.37.935-.936 1.67-.936 1.092 0 1.22 1.25 2.92 1.25C8.763 16.25 8.934 15 10 15c1.1 0 1.219 1.25 2.92 1.25 1.694 0 1.827-1.25 2.92-1.25.722 0 1.025.565 1.66.936v2.814Zm0-4.39c-.376-.307-.829-.61-1.66-.61-1.697 0-1.83 1.25-2.92 1.25-1.082 0-1.229-1.25-2.92-1.25-1.674 0-1.844 1.25-2.91 1.25-1.1 0-1.219-1.25-2.92-1.25-.838 0-1.293.304-1.67.612v-2.487c0-.345.28-.625.625-.625h13.75c.345 0 .625.28.625.625v2.485Z",
+    fill: "currentColor"
+  }));
+};
+
+IconBirthdayCake.displayName = 'IconBirthdayCake';
+
 var IconBold = function IconBold(props) {
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
@@ -1149,6 +1164,21 @@ var IconCalendarExclamation = function IconCalendarExclamation(props) {
 
 IconCalendarExclamation.displayName = 'IconCalendarExclamation';
 
+var IconCalendarStar = function IconCalendarStar(props) {
+  return React__default.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": "icon-calendar-star",
+    style: getIconStyles(props)
+  }, props), React__default.createElement("path", {
+    d: "m6.952 14.406-.325 1.808c-.074.414.103.824.461 1.07a1.186 1.186 0 0 0 1.211.082l1.71-.851 1.71.85a1.2 1.2 0 0 0 1.215-.081c.358-.246.536-.656.461-1.07l-.325-1.808 1.38-1.276c.317-.293.428-.723.292-1.12a1.127 1.127 0 0 0-.93-.743l-1.912-.265-.853-1.644a1.166 1.166 0 0 0-1.038-.613c-.44 0-.836.235-1.03.61l-.853 1.643-1.911.266a1.127 1.127 0 0 0-.931.741c-.136.398-.025.828.292 1.12l1.376 1.281Zm2.044-2.268 1.013-1.948 1.014 1.948 2.265.312-1.64 1.52.388 2.139-2.027-1.008-2.027 1.011.387-2.139-1.64-1.519 2.267-.316Zm8.263-9.64h-1.977V.313a.322.322 0 0 0-.33-.312h-.659c-.18 0-.33.14-.33.312V2.5H6.055V.312A.322.322 0 0 0 5.724 0h-.658c-.182 0-.33.14-.33.312V2.5H2.759C1.667 2.499.78 3.338.78 4.373v13.742c0 1.035.886 1.874 1.978 1.874h14.5c1.092 0 1.978-.84 1.978-1.874V4.373c0-1.035-.886-1.874-1.977-1.874Zm.66 15.617c0 .344-.297.625-.66.625H2.76c-.363 0-.66-.281-.66-.625V7.496h15.82v10.62Zm0-11.868H2.099V4.373c0-.344.297-.625.66-.625h14.5c.363 0 .66.281.66.625v1.874Z",
+    fill: "currentColor"
+  }));
+};
+
+IconCalendarStar.displayName = 'IconCalendarStar';
+
 var IconCalendarTomorrow = function IconCalendarTomorrow(props) {
   return React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20",
@@ -3412,7 +3442,7 @@ var DataTable = function DataTable(_ref) {
       numberOfRows: numberOfRows,
       hasVerticalBorders: hasVerticalBorders
     }
-  }, React__default.createElement("div", null, columns && React__default.createElement(DataTableHeader, {
+  }, columns && React__default.createElement(DataTableHeader, {
     columns: columns,
     onSort: onSort,
     showActionMenu: showActionMenu
@@ -3440,7 +3470,7 @@ var DataTable = function DataTable(_ref) {
     hasNext: hasNext && !isLoading,
     onPreviousClick: onPreviousClick,
     onNextClick: onNextClick
-  }))));
+  })));
 };
 
 var DefaultItemComponent$1 = function DefaultItemComponent(_ref2) {
@@ -5087,8 +5117,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 = React.useRef(null);
+  useOnClickOutside(calendarRef, onClickOutside);
+
+  if (!showCalendar) {
+    return null;
+  }
+
   return React__default.createElement(Portal, null, React__default.createElement("div", {
     className: classNames.overlayWrapper,
     onBlur: onBlur,
@@ -5098,7 +5137,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)));
@@ -5168,6 +5208,11 @@ var DateField = function DateField(_ref) {
       _ref$readOnly = _ref.readOnly,
       readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
   var inputRef = React.useRef();
+
+  var _useState = React.useState(false),
+      showCalendar = _useState[0],
+      setShowCalendar = _useState[1];
+
   var controllers = useDateFieldControllers({
     name: name,
     id: inputId,
@@ -5209,10 +5254,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,
@@ -5226,7 +5278,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);
     }
   })));
 };
@@ -5264,7 +5322,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);
@@ -5278,12 +5336,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,
@@ -5291,12 +5370,29 @@ var FromDate = function FromDate(_ref) {
       disabled = _ref.disabled,
       readOnly = _ref.readOnly,
       onChange = _ref.onChange,
-      onDayClick = _ref.onDayClick;
+      _onDayClick = _ref.onDayClick;
+
+  var _useState = React.useState(false),
+      showCalendar = _useState[0],
+      setShowCalendar = _useState[1];
+
   var inputRef = React.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,
@@ -5310,12 +5406,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,
@@ -5326,9 +5428,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,
@@ -5340,7 +5449,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);
     }
   });
 };
@@ -5348,17 +5463,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 = React.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,
@@ -5372,9 +5506,7 @@ var ToDate = function ToDate(_ref, ref) {
       from: start,
       to: end
     }],
-    disabledDays: {
-      before: start
-    },
+    disabledDays: disabledDaysChecks,
     modifiers: modifiers,
     month: end || start,
     fromMonth: start
@@ -5388,9 +5520,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,
@@ -5401,7 +5540,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);
     }
   });
 };
@@ -5409,11 +5557,12 @@ var ToDate = function ToDate(_ref, ref) {
 var ToDate$1 = React.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,
@@ -5448,7 +5597,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
@@ -5461,6 +5610,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({
@@ -5484,7 +5634,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,
@@ -5524,6 +5676,10 @@ var WeekField = function WeekField(_ref) {
       hoverDate = _useState[0],
       setHoverDate = _useState[1];
 
+  var _useState2 = React.useState(false),
+      showCalendar = _useState2[0],
+      setShowCalendar = _useState2[1];
+
   var inputRef = React.useRef();
   var controllers = useDateFieldControllers({
     name: name,
@@ -5606,7 +5762,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,
@@ -5620,7 +5780,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);
     }
   })));
 };
@@ -5990,6 +6156,7 @@ exports.IconBan = IconBan;
 exports.IconBarsH = IconBarsH;
 exports.IconBarsV = IconBarsV;
 exports.IconBell = IconBell;
+exports.IconBirthdayCake = IconBirthdayCake;
 exports.IconBold = IconBold;
 exports.IconBolt = IconBolt;
 exports.IconBook = IconBook;
@@ -6001,6 +6168,7 @@ exports.IconCalendarAlt = IconCalendarAlt;
 exports.IconCalendarCheck = IconCalendarCheck;
 exports.IconCalendarDay = IconCalendarDay;
 exports.IconCalendarExclamation = IconCalendarExclamation;
+exports.IconCalendarStar = IconCalendarStar;
 exports.IconCalendarTomorrow = IconCalendarTomorrow;
 exports.IconCamera = IconCamera;
 exports.IconCameraSlash = IconCameraSlash;