@jobber/components 4.24.4 → 4.24.5

package/dist/DatePicker/index.js

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

package/dist/{DatePicker-38b0c40b.js → DatePicker-f54f9982.js}

@@ -87,7 +87,7 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
         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, 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"], { 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

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-38b0c40b.js');
+var DatePicker = require('../DatePicker-f54f9982.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');
@@ -41,13 +41,16 @@ function InputDate(inputProps) {
             // Set form field to formatted date string immediately, to avoid validations
             //  triggering incorrectly when it blurs (to handle the datepicker UI click)
             value && ((_a = formFieldActionsRef.current) === null || _a === void 0 ? void 0 : _a.setValue(value));
-            return (React__default["default"].createElement(FormField.FormField, Object.assign({}, newActivatorProps, inputProps, { value: value, onChange: (_, event) => onChange && onChange(event), onBlur: () => {
-                    inputProps.onBlur && inputProps.onBlur();
-                    activatorProps.onBlur && activatorProps.onBlur();
-                }, onFocus: () => {
-                    inputProps.onFocus && inputProps.onFocus();
-                    activatorProps.onFocus && activatorProps.onFocus();
-                }, actionsRef: formFieldActionsRef, suffix: suffix })));
+            return (
+            // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
+            React__default["default"].createElement("div", { onClick: onClick },
+                React__default["default"].createElement(FormField.FormField, Object.assign({}, newActivatorProps, inputProps, { value: value, onChange: (_, event) => onChange && onChange(event), onBlur: () => {
+                        inputProps.onBlur && inputProps.onBlur();
+                        activatorProps.onBlur && activatorProps.onBlur();
+                    }, onFocus: () => {
+                        inputProps.onFocus && inputProps.onFocus();
+                        activatorProps.onFocus && activatorProps.onFocus();
+                    }, actionsRef: formFieldActionsRef, suffix: suffix }))));
         } }));
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.24.4",
+  "version": "4.24.5",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -83,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "4da1716d6977ab813a6fef96cc48ffb94743ed21"
+  "gitHead": "c0a82e625d476957c5feac09767bd768d733188f"
 }