@jobber/components 4.25.0 → 4.25.1

package/dist/DatePicker/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var DatePicker = require('../DatePicker-f54f9982.js');
+var DatePicker = require('../DatePicker-2bfdba58.js');
 require('react');
 require('classnames');
 require('react-datepicker');

package/dist/{DatePicker-f54f9982.js → DatePicker-2bfdba58.js}

@@ -82,12 +82,13 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
     const datePickerClassNames = classnames__default["default"](styles.datePicker, {
         [styles.inline]: inline,
     });
+    const { pickerRef } = useEscapeKeyToCloseDatePicker(open, ref);
     if (smartAutofocus) {
         useRefocusOnActivator.useRefocusOnActivator(open);
         React.useEffect(focusOnSelectedDate, [open]);
     }
     return (React__default["default"].createElement("div", { className: wrapperClassName, ref: ref },
-        React__default["default"].createElement(ReactDatePicker__default["default"], { calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, preventOpenOnFocus: true, minDate: minDate, useWeekdaysShort: true, customInput: React__default["default"].createElement(DatePickerActivator, { activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React__default["default"].createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: ["P", "PP", "PPP", "MMM dd yyyy", "MMMM dd yyyy"], highlightDates: highlightDates, onMonthChange: onMonthChange })));
+        React__default["default"].createElement(ReactDatePicker__default["default"], { ref: pickerRef, calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, preventOpenOnFocus: true, minDate: minDate, useWeekdaysShort: true, customInput: React__default["default"].createElement(DatePickerActivator, { activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React__default["default"].createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: ["P", "PP", "PPP", "MMM dd yyyy", "MMMM dd yyyy"], highlightDates: highlightDates, onMonthChange: onMonthChange })));
     /**
      * The onChange callback on ReactDatePicker returns a Date and an Event, but
      * the onChange in our interface only provides the Date. Simplifying the code
@@ -106,5 +107,28 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
         setOpen(false);
     }
 }
+function useEscapeKeyToCloseDatePicker(open, ref) {
+    const pickerRef = React.useRef(null);
+    const escFunction = (event) => {
+        var _a;
+        if (event.key === "Escape" && open) {
+            // Close the picker ourselves and prevent propagation so that ESC presses with the picker open
+            // do not close parent elements that may also be listening for ESC presses such as Modals
+            (_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.setOpen(false);
+            event.stopPropagation();
+        }
+    };
+    React.useEffect(() => {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", escFunction);
+        return () => {
+            var _a;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", escFunction);
+        };
+    }, [open, ref, pickerRef]);
+    return {
+        pickerRef,
+    };
+}
 
 exports.DatePicker = DatePicker;

package/dist/InputDate/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var omit = require('lodash/omit');
 var React = require('react');
 var FormField = require('../FormField-0f880b07.js');
-var DatePicker = require('../DatePicker-f54f9982.js');
+var DatePicker = require('../DatePicker-2bfdba58.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.25.0",
+  "version": "4.25.1",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -83,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "3d7aaaca66c9b265d9d81f1d7718e05b54da7b9b"
+  "gitHead": "a7f25a47c7b128c308f582d83238805f6606b401"
 }