@jobber/components 6.86.4 → 6.86.5

package/dist/DatePicker/DatePickerActivator.d.ts

@@ -1,7 +1,6 @@
-import type { ChangeEvent, ReactElement, RefObject } from "react";
+import type { ChangeEvent, ReactElement } from "react";
 import React from "react";
 import type { DatePickerProps as ReactDatePickerProps } from "react-datepicker";
-import type ReactDatePicker from "react-datepicker";
 export interface DatePickerActivatorProps extends Pick<ReactDatePickerProps, "value" | "id" | "ariaDescribedBy" | "ariaInvalid" | "ariaLabelledBy" | "ariaRequired"> {
     readonly activator?: ReactElement | ((props: DatePickerActivatorProps) => ReactElement);
     readonly fullWidth?: boolean;
@@ -10,6 +9,5 @@ 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

@@ -12744,7 +12744,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(DatePicker$1, { 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: [
+        React.createElement(DatePicker$1, { 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: [
                 dateFormat,
                 "P",
                 "PP",
@@ -12761,8 +12761,8 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
      * fail).
      */
     function handleChange(value) {
-        if (value)
-            onChange(value);
+        // TODO: Ticket created to update all DatePicker and InputDate usages to accept Date | null
+        onChange(value);
     }
     function handleCalendarOpen() {
         setOpen(true);

package/dist/DatePicker-es.js

@@ -12742,7 +12742,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(DatePicker$1, { 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: [
+        React__default.createElement(DatePicker$1, { 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: [
                 dateFormat,
                 "P",
                 "PP",
@@ -12759,8 +12759,8 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
      * fail).
      */
     function handleChange(value) {
-        if (value)
-            onChange(value);
+        // TODO: Ticket created to update all DatePicker and InputDate usages to accept Date | null
+        onChange(value);
     }
     function handleCalendarOpen() {
         setOpen(true);

package/dist/InputDate/InputDate.types.d.ts

@@ -53,16 +53,4 @@ export interface InputDateProps extends Omit<CommonFormFieldProps, "clearable">,
      * Text to display instead of a date value
      */
     readonly emptyValueLabel?: string;
-    /**
-     * Experimental:
-     * Whether to replace empty/invalid values with the original value on blur.
-     *
-     * This solves an immediate UX problem and is likely to change in the future.
-     * It prevents the input from retaining empty/invalid values when the user tabs
-     * into it, clears the value, and tabs away. In this scenario, the original
-     * value will be restored.
-     *
-     * @default false
-     */
-    readonly restoreLastValueOnBlur?: boolean;
 }

package/dist/InputDate/index.cjs

@@ -36,154 +36,10 @@ require('../useRefocusOnActivator-cjs.js');
 require('../AtlantisContext-cjs.js');
 require('../useSafeLayoutEffect-cjs.js');
 
-function _typeof(o) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
-}
-
-function requiredArgs(required, args) {
-  if (args.length < required) {
-    throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');
-  }
-}
-
-/**
- * @name isDate
- * @category Common Helpers
- * @summary Is the given value a date?
- *
- * @description
- * Returns true if the given value is an instance of Date. The function works for dates transferred across iframes.
- *
- * @param {*} value - the value to check
- * @returns {boolean} true if the given value is a date
- * @throws {TypeError} 1 arguments required
- *
- * @example
- * // For a valid date:
- * const result = isDate(new Date())
- * //=> true
- *
- * @example
- * // For an invalid date:
- * const result = isDate(new Date(NaN))
- * //=> true
- *
- * @example
- * // For some value:
- * const result = isDate('2014-02-31')
- * //=> false
- *
- * @example
- * // For an object:
- * const result = isDate({})
- * //=> false
- */
-function isDate(value) {
-  requiredArgs(1, arguments);
-  return value instanceof Date || _typeof(value) === 'object' && Object.prototype.toString.call(value) === '[object Date]';
-}
-
-/**
- * @name toDate
- * @category Common Helpers
- * @summary Convert the given argument to an instance of Date.
- *
- * @description
- * Convert the given argument to an instance of Date.
- *
- * If the argument is an instance of Date, the function returns its clone.
- *
- * If the argument is a number, it is treated as a timestamp.
- *
- * If the argument is none of the above, the function returns Invalid Date.
- *
- * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
- *
- * @param {Date|Number} argument - the value to convert
- * @returns {Date} the parsed date in the local time zone
- * @throws {TypeError} 1 argument required
- *
- * @example
- * // Clone the date:
- * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
- * //=> Tue Feb 11 2014 11:30:30
- *
- * @example
- * // Convert the timestamp to date:
- * const result = toDate(1392098430000)
- * //=> Tue Feb 11 2014 11:30:30
- */
-function toDate(argument) {
-  requiredArgs(1, arguments);
-  var argStr = Object.prototype.toString.call(argument);
-
-  // Clone the date
-  if (argument instanceof Date || _typeof(argument) === 'object' && argStr === '[object Date]') {
-    // Prevent the date to lose the milliseconds when passed to new Date() in IE10
-    return new Date(argument.getTime());
-  } else if (typeof argument === 'number' || argStr === '[object Number]') {
-    return new Date(argument);
-  } else {
-    if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {
-      // eslint-disable-next-line no-console
-      console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments");
-      // eslint-disable-next-line no-console
-      console.warn(new Error().stack);
-    }
-    return new Date(NaN);
-  }
-}
-
-/**
- * @name isValid
- * @category Common Helpers
- * @summary Is the given date valid?
- *
- * @description
- * Returns false if argument is Invalid Date and true otherwise.
- * Argument is converted to Date using `toDate`. See [toDate]{@link https://date-fns.org/docs/toDate}
- * Invalid Date is a Date, whose time value is NaN.
- *
- * Time value of Date: http://es5.github.io/#x15.9.1.1
- *
- * @param {*} date - the date to check
- * @returns {Boolean} the date is valid
- * @throws {TypeError} 1 argument required
- *
- * @example
- * // For the valid date:
- * const result = isValid(new Date(2014, 1, 31))
- * //=> true
- *
- * @example
- * // For the value, convertable into a date:
- * const result = isValid(1393804800000)
- * //=> true
- *
- * @example
- * // For the invalid date:
- * const result = isValid(new Date(''))
- * //=> false
- */
-function isValid(dirtyDate) {
-  requiredArgs(1, arguments);
-  if (!isDate(dirtyDate) && typeof dirtyDate !== 'number') {
-    return false;
-  }
-  var date = toDate(dirtyDate);
-  return !isNaN(Number(date));
-}
-
 function InputDate$1(inputProps) {
     const formFieldActionsRef = React.useRef(null);
     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, pickerRef } = activatorProps;
+            const { onChange, onClick, value } = activatorProps;
             const newActivatorProps = omit.omit(activatorProps, ["activator"]);
             const [isFocused, setIsFocused] = React.useState(false);
             const suffix = inputProps.showIcon !== false
@@ -206,30 +62,9 @@ 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);
-                        /**
-                         * This is an experimental workaround to solve a specific UX problem we have under certain conditions.
-                         * When you click to focus InputDate, ReactDatePicker becomes visible. If you delete the current date and blur
-                         * the input field by clicking away, ReactDatePicker will automatically set the date to whatever date was
-                         * currently selected.
-                         *
-                         * The above works great and is the expected user experience. ReactDatePicker fills in the empty value for us.
-                         *
-                         * However, there's a specific scenario where ReactDatePicker isn't visible: when you tab into the input date.
-                         * When you tab into it, clear the value, and tab away to blur, ReactDatePicker doesn't automatically fill in
-                         * the empty value because it wasn't visible/active.
-                         *
-                         * To solve this, we need to handle the blur event here and check if the value is empty or invalid. If it is,
-                         * we have to call onChange with the original input value which informs ReactDatePicker that is the current value.
-                         */
-                        if (inputProps.restoreLastValueOnBlur) {
-                            if ((!value || !isValid(value)) && inputProps.value) {
-                                (_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.setSelected(inputProps.value);
-                            }
-                        }
                     }, onFocus: () => {
                         inputProps.onFocus && inputProps.onFocus();
                         activatorProps.onFocus && activatorProps.onFocus();

package/dist/InputDate/index.mjs

@@ -34,154 +34,10 @@ import '../useRefocusOnActivator-es.js';
 import '../AtlantisContext-es.js';
 import '../useSafeLayoutEffect-es.js';
 
-function _typeof(o) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
-}
-
-function requiredArgs(required, args) {
-  if (args.length < required) {
-    throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');
-  }
-}
-
-/**
- * @name isDate
- * @category Common Helpers
- * @summary Is the given value a date?
- *
- * @description
- * Returns true if the given value is an instance of Date. The function works for dates transferred across iframes.
- *
- * @param {*} value - the value to check
- * @returns {boolean} true if the given value is a date
- * @throws {TypeError} 1 arguments required
- *
- * @example
- * // For a valid date:
- * const result = isDate(new Date())
- * //=> true
- *
- * @example
- * // For an invalid date:
- * const result = isDate(new Date(NaN))
- * //=> true
- *
- * @example
- * // For some value:
- * const result = isDate('2014-02-31')
- * //=> false
- *
- * @example
- * // For an object:
- * const result = isDate({})
- * //=> false
- */
-function isDate(value) {
-  requiredArgs(1, arguments);
-  return value instanceof Date || _typeof(value) === 'object' && Object.prototype.toString.call(value) === '[object Date]';
-}
-
-/**
- * @name toDate
- * @category Common Helpers
- * @summary Convert the given argument to an instance of Date.
- *
- * @description
- * Convert the given argument to an instance of Date.
- *
- * If the argument is an instance of Date, the function returns its clone.
- *
- * If the argument is a number, it is treated as a timestamp.
- *
- * If the argument is none of the above, the function returns Invalid Date.
- *
- * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
- *
- * @param {Date|Number} argument - the value to convert
- * @returns {Date} the parsed date in the local time zone
- * @throws {TypeError} 1 argument required
- *
- * @example
- * // Clone the date:
- * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
- * //=> Tue Feb 11 2014 11:30:30
- *
- * @example
- * // Convert the timestamp to date:
- * const result = toDate(1392098430000)
- * //=> Tue Feb 11 2014 11:30:30
- */
-function toDate(argument) {
-  requiredArgs(1, arguments);
-  var argStr = Object.prototype.toString.call(argument);
-
-  // Clone the date
-  if (argument instanceof Date || _typeof(argument) === 'object' && argStr === '[object Date]') {
-    // Prevent the date to lose the milliseconds when passed to new Date() in IE10
-    return new Date(argument.getTime());
-  } else if (typeof argument === 'number' || argStr === '[object Number]') {
-    return new Date(argument);
-  } else {
-    if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {
-      // eslint-disable-next-line no-console
-      console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments");
-      // eslint-disable-next-line no-console
-      console.warn(new Error().stack);
-    }
-    return new Date(NaN);
-  }
-}
-
-/**
- * @name isValid
- * @category Common Helpers
- * @summary Is the given date valid?
- *
- * @description
- * Returns false if argument is Invalid Date and true otherwise.
- * Argument is converted to Date using `toDate`. See [toDate]{@link https://date-fns.org/docs/toDate}
- * Invalid Date is a Date, whose time value is NaN.
- *
- * Time value of Date: http://es5.github.io/#x15.9.1.1
- *
- * @param {*} date - the date to check
- * @returns {Boolean} the date is valid
- * @throws {TypeError} 1 argument required
- *
- * @example
- * // For the valid date:
- * const result = isValid(new Date(2014, 1, 31))
- * //=> true
- *
- * @example
- * // For the value, convertable into a date:
- * const result = isValid(1393804800000)
- * //=> true
- *
- * @example
- * // For the invalid date:
- * const result = isValid(new Date(''))
- * //=> false
- */
-function isValid(dirtyDate) {
-  requiredArgs(1, arguments);
-  if (!isDate(dirtyDate) && typeof dirtyDate !== 'number') {
-    return false;
-  }
-  var date = toDate(dirtyDate);
-  return !isNaN(Number(date));
-}
-
 function InputDate$1(inputProps) {
     const formFieldActionsRef = useRef(null);
     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, pickerRef } = activatorProps;
+            const { onChange, onClick, value } = activatorProps;
             const newActivatorProps = omit(activatorProps, ["activator"]);
             const [isFocused, setIsFocused] = useState(false);
             const suffix = inputProps.showIcon !== false
@@ -204,30 +60,9 @@ 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);
-                        /**
-                         * This is an experimental workaround to solve a specific UX problem we have under certain conditions.
-                         * When you click to focus InputDate, ReactDatePicker becomes visible. If you delete the current date and blur
-                         * the input field by clicking away, ReactDatePicker will automatically set the date to whatever date was
-                         * currently selected.
-                         *
-                         * The above works great and is the expected user experience. ReactDatePicker fills in the empty value for us.
-                         *
-                         * However, there's a specific scenario where ReactDatePicker isn't visible: when you tab into the input date.
-                         * When you tab into it, clear the value, and tab away to blur, ReactDatePicker doesn't automatically fill in
-                         * the empty value because it wasn't visible/active.
-                         *
-                         * To solve this, we need to handle the blur event here and check if the value is empty or invalid. If it is,
-                         * we have to call onChange with the original input value which informs ReactDatePicker that is the current value.
-                         */
-                        if (inputProps.restoreLastValueOnBlur) {
-                            if ((!value || !isValid(value)) && inputProps.value) {
-                                (_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.setSelected(inputProps.value);
-                            }
-                        }
                     }, onFocus: () => {
                         inputProps.onFocus && inputProps.onFocus();
                         activatorProps.onFocus && activatorProps.onFocus();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.86.4",
+  "version": "6.86.5",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -543,5 +543,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "ce44648ac1907d316c2df884b5d9c7056e8e2943"
+  "gitHead": "69bf4a19f39dc779173c705accb66f3514f80604"
 }