@jobber/components 6.105.1 → 6.105.2

package/dist/DatePicker/DatePicker.d.ts

@@ -40,6 +40,10 @@ interface BaseDatePickerProps {
      * Change handler when the selected month changes
      */
     onMonthChange?(val: Date): void;
+    /**
+     * Callback when the calendar open state changes
+     */
+    onOpenChange?(open: boolean): void;
 }
 interface DatePickerModalProps extends BaseDatePickerProps {
     /**
@@ -66,5 +70,5 @@ interface DatePickerInlineProps extends BaseDatePickerProps {
     readonly inline?: boolean;
 }
 type DatePickerProps = XOR<DatePickerModalProps, DatePickerInlineProps>;
-export declare function DatePicker({ onChange, onMonthChange, activator, inline, selected, readonly, disabled, fullWidth, smartAutofocus, maxDate, minDate, highlightDates, firstDayOfWeek, }: DatePickerProps): React.JSX.Element;
+export declare function DatePicker({ onChange, onMonthChange, onOpenChange, activator, inline, selected, readonly, disabled, fullWidth, smartAutofocus, maxDate, minDate, highlightDates, firstDayOfWeek, }: DatePickerProps): React.JSX.Element;
 export {};

package/dist/DatePicker-cjs.js

@@ -12705,7 +12705,7 @@ function useFocusOnSelectedDate() {
 }
 
 /*eslint max-statements: ["error", 14]*/
-function DatePicker({ onChange, onMonthChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, firstDayOfWeek, }) {
+function DatePicker({ onChange, onMonthChange, onOpenChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, firstDayOfWeek, }) {
     const { ref, focusOnSelectedDate } = useFocusOnSelectedDate();
     const [open, setOpen] = React.useState(false);
     const { dateFormat, firstDayOfWeek: contextFirstDayOfWeek } = AtlantisContext.useAtlantisContext();
@@ -12752,9 +12752,11 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
     }
     function handleCalendarOpen() {
         setOpen(true);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
     }
     function handleCalendarClose() {
         setOpen(false);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
     }
 }
 function useEscapeKeyToCloseDatePicker(open, ref) {

package/dist/DatePicker-es.js

@@ -12703,7 +12703,7 @@ function useFocusOnSelectedDate() {
 }
 
 /*eslint max-statements: ["error", 14]*/
-function DatePicker({ onChange, onMonthChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, firstDayOfWeek, }) {
+function DatePicker({ onChange, onMonthChange, onOpenChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, firstDayOfWeek, }) {
     const { ref, focusOnSelectedDate } = useFocusOnSelectedDate();
     const [open, setOpen] = useState(false);
     const { dateFormat, firstDayOfWeek: contextFirstDayOfWeek } = useAtlantisContext();
@@ -12750,9 +12750,11 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
     }
     function handleCalendarOpen() {
         setOpen(true);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
     }
     function handleCalendarClose() {
         setOpen(false);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
     }
 }
 function useEscapeKeyToCloseDatePicker(open, ref) {

package/dist/InputDate/index.cjs

@@ -103,21 +103,47 @@ function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
 
 const InputDateRebuilt = React.forwardRef((props, forwardedRef) => {
     const { onChange } = props;
+    const isCalendarOpenRef = React.useRef(false);
+    const inputFocusedRef = React.useRef(false);
+    const compositeFocusedRef = React.useRef(false);
+    const lastBlurEventRef = React.useRef(null);
     return (React.createElement(DatePicker.DatePicker, { selected: props.value, onChange: newValue => {
             onChange(newValue);
-        }, disabled: props.disabled, readonly: props.readOnly, fullWidth: !props.inline, minDate: props.minDate, maxDate: props.maxDate, smartAutofocus: false, activator: InputDateActivator }));
+        }, disabled: props.disabled, readonly: props.readOnly, fullWidth: !props.inline, minDate: props.minDate, maxDate: props.maxDate, smartAutofocus: false, activator: InputDateActivator, onOpenChange: open => {
+            var _a;
+            isCalendarOpenRef.current = open;
+            // When calendar closes, fire onBlur if input is also not focused
+            if (!open &&
+                !inputFocusedRef.current &&
+                compositeFocusedRef.current &&
+                lastBlurEventRef.current) {
+                compositeFocusedRef.current = false;
+                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, lastBlurEventRef.current);
+            }
+        } }));
     function InputDateActivator(activatorProps) {
         const { onClick, value } = activatorProps;
         const { handleChange, handleFocus, handleBlur, isFocused } = useInputDateActivatorActions({
             onChange: activatorProps.onChange,
             onFocus: event => {
                 var _a, _b;
-                (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                inputFocusedRef.current = true;
+                // Fire parent's onFocus only when the composite component first receives focus
+                if (!compositeFocusedRef.current) {
+                    compositeFocusedRef.current = true;
+                    (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                }
                 (_b = activatorProps.onFocus) === null || _b === void 0 ? void 0 : _b.call(activatorProps);
             },
             onBlur: event => {
                 var _a, _b;
-                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                inputFocusedRef.current = false;
+                lastBlurEventRef.current = event;
+                // Only fire parent's onBlur if calendar is also closed
+                if (!isCalendarOpenRef.current && compositeFocusedRef.current) {
+                    compositeFocusedRef.current = false;
+                    (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                }
                 (_b = activatorProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(activatorProps);
             },
         });

package/dist/InputDate/index.mjs

@@ -101,21 +101,47 @@ function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
 
 const InputDateRebuilt = forwardRef((props, forwardedRef) => {
     const { onChange } = props;
+    const isCalendarOpenRef = useRef(false);
+    const inputFocusedRef = useRef(false);
+    const compositeFocusedRef = useRef(false);
+    const lastBlurEventRef = useRef(null);
     return (React__default.createElement(DatePicker, { selected: props.value, onChange: newValue => {
             onChange(newValue);
-        }, disabled: props.disabled, readonly: props.readOnly, fullWidth: !props.inline, minDate: props.minDate, maxDate: props.maxDate, smartAutofocus: false, activator: InputDateActivator }));
+        }, disabled: props.disabled, readonly: props.readOnly, fullWidth: !props.inline, minDate: props.minDate, maxDate: props.maxDate, smartAutofocus: false, activator: InputDateActivator, onOpenChange: open => {
+            var _a;
+            isCalendarOpenRef.current = open;
+            // When calendar closes, fire onBlur if input is also not focused
+            if (!open &&
+                !inputFocusedRef.current &&
+                compositeFocusedRef.current &&
+                lastBlurEventRef.current) {
+                compositeFocusedRef.current = false;
+                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, lastBlurEventRef.current);
+            }
+        } }));
     function InputDateActivator(activatorProps) {
         const { onClick, value } = activatorProps;
         const { handleChange, handleFocus, handleBlur, isFocused } = useInputDateActivatorActions({
             onChange: activatorProps.onChange,
             onFocus: event => {
                 var _a, _b;
-                (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                inputFocusedRef.current = true;
+                // Fire parent's onFocus only when the composite component first receives focus
+                if (!compositeFocusedRef.current) {
+                    compositeFocusedRef.current = true;
+                    (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                }
                 (_b = activatorProps.onFocus) === null || _b === void 0 ? void 0 : _b.call(activatorProps);
             },
             onBlur: event => {
                 var _a, _b;
-                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                inputFocusedRef.current = false;
+                lastBlurEventRef.current = event;
+                // Only fire parent's onBlur if calendar is also closed
+                if (!isCalendarOpenRef.current && compositeFocusedRef.current) {
+                    compositeFocusedRef.current = false;
+                    (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                }
                 (_b = activatorProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(activatorProps);
             },
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.105.1",
+  "version": "6.105.2",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "2e40c551d4af9f4de5d134287b55928b73a518b9"
+  "gitHead": "a4b58acea68d4e33629e47aba6f812c2c1259d96"
 }