@jobber/components 6.56.0 → 6.56.1

package/dist/DatePicker/DatePickerActivator.d.ts

@@ -1,5 +1,5 @@
-import React, { ChangeEvent, ReactElement } from "react";
-import { ReactDatePickerProps } from "react-datepicker";
+import React, { ChangeEvent, ReactElement, RefObject } from "react";
+import ReactDatePicker, { ReactDatePickerProps } from "react-datepicker";
 export interface DatePickerActivatorProps extends Pick<ReactDatePickerProps, "value" | "id" | "ariaDescribedBy" | "ariaInvalid" | "ariaLabelledBy" | "ariaRequired"> {
     readonly activator?: ReactElement | ((props: DatePickerActivatorProps) => ReactElement);
     readonly fullWidth?: boolean;
@@ -8,5 +8,6 @@ export interface DatePickerActivatorProps extends Pick<ReactDatePickerProps, "va
     onClick?(): void;
     onFocus?(): void;
     onKeyDown?(): void;
+    readonly pickerRef: RefObject<ReactDatePicker>;
 }
 export declare const DatePickerActivator: React.ForwardRefExoticComponent<DatePickerActivatorProps & React.RefAttributes<HTMLElement>>;

package/dist/DatePicker-cjs.js

@@ -7317,7 +7317,7 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
         React.useEffect(focusOnSelectedDate, [open]);
     }
     return (React.createElement("div", { className: wrapperClassName, ref: ref, "data-elevation": "elevated" },
-        React.createElement(Ht, { 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.createElement(DatePickerActivator, { activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React.createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: [
+        React.createElement(Ht, { 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.createElement(DatePickerActivator, { pickerRef: pickerRef, activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React.createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: [
                 dateFormat,
                 "P",
                 "PP",
@@ -7368,5 +7368,4 @@ function useEscapeKeyToCloseDatePicker(open, ref) {
 }
 
 exports.DatePicker = DatePicker;
-exports.format = format;
 exports.isValid = isValid;

package/dist/DatePicker-es.js

@@ -7315,7 +7315,7 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
         useEffect(focusOnSelectedDate, [open]);
     }
     return (React__default.createElement("div", { className: wrapperClassName, ref: ref, "data-elevation": "elevated" },
-        React__default.createElement(Ht, { 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.createElement(DatePickerActivator, { activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React__default.createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: [
+        React__default.createElement(Ht, { 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.createElement(DatePickerActivator, { pickerRef: pickerRef, activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React__default.createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: [
                 dateFormat,
                 "P",
                 "PP",
@@ -7365,4 +7365,4 @@ function useEscapeKeyToCloseDatePicker(open, ref) {
     };
 }
 
-export { DatePicker as D, format as f, isValid as i };
+export { DatePicker as D, isValid as i };

package/dist/InputDate/index.cjs

@@ -10,7 +10,6 @@ require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
 require('../Button-cjs.js');
-var AtlantisContext = require('../AtlantisContext-cjs.js');
 var InputText_index = require('../InputText/index.cjs');
 require('../_commonjsHelpers-cjs.js');
 require('../_baseGet-cjs.js');
@@ -28,6 +27,7 @@ require('react-dom');
 require('react-popper');
 require('../useRefocusOnActivator-cjs.js');
 require('../Typography-cjs.js');
+require('../AtlantisContext-cjs.js');
 require('../Icon-cjs.js');
 require('../Text-cjs.js');
 require('../useFormFieldFocus-cjs.js');
@@ -38,9 +38,8 @@ require('../useSafeLayoutEffect-cjs.js');
 
 function InputDate$1(inputProps) {
     const formFieldActionsRef = React.useRef(null);
-    const { dateFormat } = AtlantisContext.useAtlantisContext();
     return (React.createElement(DatePicker.DatePicker, { selected: inputProps.value, onChange: inputProps.onChange, disabled: inputProps.disabled, readonly: inputProps.readonly, fullWidth: !inputProps.inline, minDate: inputProps.minDate, maxDate: inputProps.maxDate, smartAutofocus: false, activator: activatorProps => {
-            const { onChange, onClick, value } = activatorProps;
+            const { onChange, onClick, value, pickerRef } = activatorProps;
             const newActivatorProps = omit.omit(activatorProps, ["activator"]);
             const [isFocused, setIsFocused] = React.useState(false);
             const suffix = inputProps.showIcon !== false
@@ -63,6 +62,7 @@ function InputDate$1(inputProps) {
                 React.createElement(FormField.FormField, Object.assign({}, newActivatorProps, inputProps, { value: showEmptyValueLabel ? inputProps.emptyValueLabel || "" : value, placeholder: inputProps.placeholder, onChange: (_, event) => {
                         onChange && onChange(event);
                     }, onBlur: () => {
+                        var _a;
                         inputProps.onBlur && inputProps.onBlur();
                         activatorProps.onBlur && activatorProps.onBlur();
                         setIsFocused(false);
@@ -83,12 +83,8 @@ function InputDate$1(inputProps) {
                          */
                         if (inputProps.restoreLastValueOnBlur) {
                             if ((!value || !DatePicker.isValid(value)) && inputProps.value) {
-                                onChange === null || onChange === void 0 ? void 0 : onChange({
-                                    // @ts-expect-error -- This is a hack to sync the value back to ReactDatePicker
-                                    target: {
-                                        value: DatePicker.format(inputProps.value, dateFormat),
-                                    },
-                                });
+                                // @ts-expect-error -- ReactDatePicker types don't include setSelected
+                                (_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.setSelected(inputProps.value);
                             }
                         }
                     }, onFocus: () => {

package/dist/InputDate/index.mjs

@@ -1,6 +1,6 @@
 import React__default, { useRef, useState, useEffect, forwardRef } from 'react';
 import { o as omit } from '../omit-es.js';
-import { D as DatePicker, i as isValid, f as format } from '../DatePicker-es.js';
+import { D as DatePicker, i as isValid } from '../DatePicker-es.js';
 import { k as FormField } from '../FormField-es.js';
 import 'classnames';
 import '../tslib.es6-es.js';
@@ -8,7 +8,6 @@ import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
 import '../Button-es.js';
-import { u as useAtlantisContext } from '../AtlantisContext-es.js';
 import { InputText } from '../InputText/index.mjs';
 import '../_commonjsHelpers-es.js';
 import '../_baseGet-es.js';
@@ -26,6 +25,7 @@ import 'react-dom';
 import 'react-popper';
 import '../useRefocusOnActivator-es.js';
 import '../Typography-es.js';
+import '../AtlantisContext-es.js';
 import '../Icon-es.js';
 import '../Text-es.js';
 import '../useFormFieldFocus-es.js';
@@ -36,9 +36,8 @@ import '../useSafeLayoutEffect-es.js';
 
 function InputDate$1(inputProps) {
     const formFieldActionsRef = useRef(null);
-    const { dateFormat } = useAtlantisContext();
     return (React__default.createElement(DatePicker, { selected: inputProps.value, onChange: inputProps.onChange, disabled: inputProps.disabled, readonly: inputProps.readonly, fullWidth: !inputProps.inline, minDate: inputProps.minDate, maxDate: inputProps.maxDate, smartAutofocus: false, activator: activatorProps => {
-            const { onChange, onClick, value } = activatorProps;
+            const { onChange, onClick, value, pickerRef } = activatorProps;
             const newActivatorProps = omit(activatorProps, ["activator"]);
             const [isFocused, setIsFocused] = useState(false);
             const suffix = inputProps.showIcon !== false
@@ -61,6 +60,7 @@ function InputDate$1(inputProps) {
                 React__default.createElement(FormField, Object.assign({}, newActivatorProps, inputProps, { value: showEmptyValueLabel ? inputProps.emptyValueLabel || "" : value, placeholder: inputProps.placeholder, onChange: (_, event) => {
                         onChange && onChange(event);
                     }, onBlur: () => {
+                        var _a;
                         inputProps.onBlur && inputProps.onBlur();
                         activatorProps.onBlur && activatorProps.onBlur();
                         setIsFocused(false);
@@ -81,12 +81,8 @@ function InputDate$1(inputProps) {
                          */
                         if (inputProps.restoreLastValueOnBlur) {
                             if ((!value || !isValid(value)) && inputProps.value) {
-                                onChange === null || onChange === void 0 ? void 0 : onChange({
-                                    // @ts-expect-error -- This is a hack to sync the value back to ReactDatePicker
-                                    target: {
-                                        value: format(inputProps.value, dateFormat),
-                                    },
-                                });
+                                // @ts-expect-error -- ReactDatePicker types don't include setSelected
+                                (_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.setSelected(inputProps.value);
                             }
                         }
                     }, onFocus: () => {