@jobber/components 6.12.1 → 6.13.0

package/dist/FormField/FormFieldTypes.d.ts

@@ -103,7 +103,7 @@ export interface CommonFormFieldProps {
      * Experimental:
      * Determine which version of the FormField to use.
      * Right now this isn't used but it will be used in the future
-     * to allow us to release new versions of our form inputs without breaking existing functionality
+     * to allow us to release new versions of our form inputs without breaking existing functionality.
      */
     version?: 1;
 }

package/dist/InputDate/InputDate.d.ts

@@ -1,28 +1,2 @@
-import { CommonFormFieldProps, FormFieldProps } from "../FormField";
-interface InputDateProps extends Omit<CommonFormFieldProps, "clearable">, Pick<FormFieldProps, "readonly" | "disabled" | "onEnter" | "onFocus" | "inputRef" | "validations" | "placeholder" | "onChange" | "onBlur"> {
-    /**
-     * A Date object value
-     * (e.g., `new Date("11/11/2011")`)
-     * */
-    readonly value?: Date;
-    onChange(newValue: Date): void;
-    /**
-     * The maximum selectable date.
-     */
-    readonly maxDate?: Date;
-    /**
-     * The minimum selectable date.
-     */
-    readonly minDate?: Date;
-    /**
-     * Whether to show the calendar icon
-     * @default true
-     */
-    readonly showIcon?: boolean;
-    /**
-     * Text to display instead of a date value
-     */
-    readonly emptyValueLabel?: string;
-}
+import { InputDateProps } from "./InputDate.types";
 export declare function InputDate(inputProps: InputDateProps): JSX.Element;
-export {};

package/dist/InputDate/InputDate.rebuilt.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { InputDateRebuiltProps } from "./InputDate.types";
+export declare const InputDateRebuilt: React.ForwardRefExoticComponent<InputDateRebuiltProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,56 @@
+import { CommonFormFieldProps, FormFieldProps } from "../FormField";
+import { InputTextRebuiltProps } from "../InputText/InputText.types";
+export interface InputDateRebuiltProps extends Omit<InputTextRebuiltProps, "clearable" | "onChange" | "value" | "prefix" | "suffix" | "multiline" | "rows" | "type" | "version"> {
+    /**
+     * A Date object value
+     * (e.g., `new Date("11/11/2011")`)
+     * */
+    readonly value?: Date;
+    /**
+     * The maximum selectable date.
+     */
+    readonly maxDate?: Date;
+    /**
+     * The minimum selectable date.
+     */
+    readonly minDate?: Date;
+    /**
+     * Whether to show the calendar icon
+     * @default true
+     */
+    readonly showIcon?: boolean;
+    /**
+     * Text to display instead of a date value
+     */
+    readonly emptyValueLabel?: string;
+    /**
+     * Version 2 is highly experimental, avoid using it unless you have talked with Atlantis first.
+     */
+    readonly version: 2;
+    readonly onChange: (newValue: Date, event?: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export interface InputDateProps extends Omit<CommonFormFieldProps, "clearable">, Pick<FormFieldProps, "readonly" | "disabled" | "onEnter" | "onFocus" | "inputRef" | "validations" | "placeholder" | "onChange" | "onBlur"> {
+    /**
+     * A Date object value
+     * (e.g., `new Date("11/11/2011")`)
+     * */
+    readonly value?: Date;
+    onChange(newValue: Date): void;
+    /**
+     * The maximum selectable date.
+     */
+    readonly maxDate?: Date;
+    /**
+     * The minimum selectable date.
+     */
+    readonly minDate?: Date;
+    /**
+     * Whether to show the calendar icon
+     * @default true
+     */
+    readonly showIcon?: boolean;
+    /**
+     * Text to display instead of a date value
+     */
+    readonly emptyValueLabel?: string;
+}

package/dist/InputDate/index.cjs

@@ -1,7 +1,16 @@
 'use strict';
 
-var InputDate = require('../InputDate-cjs.js');
-require('../omit-cjs.js');
+var React = require('react');
+var omit = require('../omit-cjs.js');
+var FormField = require('../FormField-cjs.js');
+require('../tslib.es6-cjs.js');
+require('react-hook-form');
+require('framer-motion');
+require('@jobber/design');
+require('classnames');
+require('react-router-dom');
+var DatePicker = require('../DatePicker-cjs.js');
+var InputText_index = require('../InputText/index.cjs');
 require('../_commonjsHelpers-cjs.js');
 require('../_baseGet-cjs.js');
 require('../isTypedArray-cjs.js');
@@ -13,28 +22,140 @@ require('../keysIn-cjs.js');
 require('../_baseAssignValue-cjs.js');
 require('../_baseFlatten-cjs.js');
 require('../_setToString-cjs.js');
-require('react');
-require('../FormField-cjs.js');
-require('framer-motion');
-require('@jobber/design');
-require('classnames');
 require('../Button-cjs.js');
-require('react-router-dom');
 require('../Icon-cjs.js');
 require('../Typography-cjs.js');
 require('../Text-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
-require('../tslib.es6-cjs.js');
-require('react-hook-form');
-require('../DatePicker-cjs.js');
 require('../index-cjs.js');
 require('react-dom');
 require('react-popper');
 require('../useRefocusOnActivator-cjs.js');
 require('../AtlantisContext-cjs.js');
+require('../useSafeLayoutEffect-cjs.js');
+
+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 } = activatorProps;
+            const newActivatorProps = omit.omit(activatorProps, ["activator"]);
+            const [isFocused, setIsFocused] = React.useState(false);
+            const suffix = inputProps.showIcon !== false
+                ? {
+                    icon: "calendar",
+                    ariaLabel: "Show calendar",
+                    onClick: onClick && onClick,
+                }
+                : undefined;
+            // Set form field to formatted date string immediately, to avoid validations
+            //  triggering incorrectly when it blurs (to handle the datepicker UI click)
+            React.useEffect(() => {
+                var _a;
+                value && ((_a = formFieldActionsRef.current) === null || _a === void 0 ? void 0 : _a.setValue(value));
+            }, [value]);
+            const showEmptyValueLabel = !value && !isFocused;
+            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.createElement("div", { onClick: onClick },
+                React.createElement(FormField.FormField, Object.assign({}, newActivatorProps, inputProps, { value: showEmptyValueLabel ? inputProps.emptyValueLabel || "" : value, placeholder: inputProps.placeholder, onChange: (_, event) => {
+                        onChange && onChange(event);
+                    }, onBlur: () => {
+                        inputProps.onBlur && inputProps.onBlur();
+                        activatorProps.onBlur && activatorProps.onBlur();
+                        setIsFocused(false);
+                    }, onFocus: () => {
+                        inputProps.onFocus && inputProps.onFocus();
+                        activatorProps.onFocus && activatorProps.onFocus();
+                        setIsFocused(true);
+                    }, onKeyUp: event => {
+                        var _a;
+                        if (inputProps.showIcon === false &&
+                            event.key === "ArrowDown") {
+                            (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);
+                        }
+                    }, actionsRef: formFieldActionsRef, suffix: suffix }))));
+        } }));
+}
+
+/**
+ * Combines the actions on the InputDate such as onChange, onFocus, onBlur to forward event handler passed to the InputDate component to the DatePicker component.
+ * DO not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
+ */
+function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
+    const [isFocused, setIsFocused] = React.useState(false);
+    function handleChange(_, event) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    }
+    function handleFocus(event) {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+        setIsFocused(true);
+    }
+    function handleBlur(event) {
+        setIsFocused(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }
+    return {
+        handleBlur,
+        handleChange,
+        handleFocus,
+        isFocused,
+    };
+}
 
+const InputDateRebuilt = React.forwardRef(function InputDateInternal(props, inputRefs) {
+    const { onChange } = props;
+    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 }));
+    function InputDateActivator(activatorProps) {
+        const { onClick, value } = activatorProps;
+        const newActivatorProps = omit.omit(activatorProps, ["activator", "fullWidth"]);
+        const { handleChange, handleFocus, handleBlur, isFocused } = useInputDateActivatorActions({
+            onChange: newActivatorProps.onChange,
+            onFocus: event => {
+                var _a, _b;
+                (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                (_b = newActivatorProps.onFocus) === null || _b === void 0 ? void 0 : _b.call(newActivatorProps);
+            },
+            onBlur: event => {
+                var _a, _b;
+                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                (_b = newActivatorProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(newActivatorProps);
+            },
+        });
+        const suffix = props.showIcon !== false
+            ? {
+                icon: "calendar",
+                ariaLabel: "Show calendar",
+                onClick: onClick && onClick,
+            }
+            : undefined;
+        const showEmptyValueLabel = !value && !isFocused;
+        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.createElement("div", { onClick: onClick },
+            React.createElement(InputText_index.InputText, Object.assign({}, newActivatorProps, props, { version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: inputRefs, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
+                    var _a, _b;
+                    if (props.showIcon === false && event.key === "ArrowDown") {
+                        (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);
+                    }
+                    (_b = props.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(props, event);
+                }, onChange: handleChange }))));
+    }
+});
 
+function isNewInputDateProps(props) {
+    return props.version === 2;
+}
+const InputDate = React.forwardRef(function InputDateShim(props, ref) {
+    if (isNewInputDateProps(props)) {
+        return React.createElement(InputDateRebuilt, Object.assign({}, props, { ref: ref }));
+    }
+    else {
+        return React.createElement(InputDate$1, Object.assign({}, props));
+    }
+});
 
-exports.InputDate = InputDate.InputDate;
+exports.InputDate = InputDate;

package/dist/InputDate/index.d.ts

@@ -1 +1,4 @@
-export { InputDate } from "./InputDate";
+import React from "react";
+import { InputDateProps as InputDateLegacyProps, InputDateRebuiltProps } from "./InputDate.types";
+export type InputDateProps = InputDateLegacyProps | InputDateRebuiltProps;
+export declare const InputDate: React.ForwardRefExoticComponent<InputDateProps & React.RefAttributes<HTMLInputElement>>;

package/dist/InputDate/index.mjs

@@ -1,5 +1,14 @@
-export { I as InputDate } from '../InputDate-es.js';
-import '../omit-es.js';
+import React, { useRef, useState, useEffect, forwardRef } from 'react';
+import { o as omit } from '../omit-es.js';
+import { f as FormField } from '../FormField-es.js';
+import '../tslib.es6-es.js';
+import 'react-hook-form';
+import 'framer-motion';
+import '@jobber/design';
+import 'classnames';
+import 'react-router-dom';
+import { D as DatePicker } from '../DatePicker-es.js';
+import { InputText } from '../InputText/index.mjs';
 import '../_commonjsHelpers-es.js';
 import '../_baseGet-es.js';
 import '../isTypedArray-es.js';
@@ -11,24 +20,140 @@ import '../keysIn-es.js';
 import '../_baseAssignValue-es.js';
 import '../_baseFlatten-es.js';
 import '../_setToString-es.js';
-import 'react';
-import '../FormField-es.js';
-import 'framer-motion';
-import '@jobber/design';
-import 'classnames';
 import '../Button-es.js';
-import 'react-router-dom';
 import '../Icon-es.js';
 import '../Typography-es.js';
 import '../Text-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
-import '../tslib.es6-es.js';
-import 'react-hook-form';
-import '../DatePicker-es.js';
 import '../index-es.js';
 import 'react-dom';
 import 'react-popper';
 import '../useRefocusOnActivator-es.js';
 import '../AtlantisContext-es.js';
+import '../useSafeLayoutEffect-es.js';
+
+function InputDate$1(inputProps) {
+    const formFieldActionsRef = useRef(null);
+    return (React.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 newActivatorProps = omit(activatorProps, ["activator"]);
+            const [isFocused, setIsFocused] = useState(false);
+            const suffix = inputProps.showIcon !== false
+                ? {
+                    icon: "calendar",
+                    ariaLabel: "Show calendar",
+                    onClick: onClick && onClick,
+                }
+                : undefined;
+            // Set form field to formatted date string immediately, to avoid validations
+            //  triggering incorrectly when it blurs (to handle the datepicker UI click)
+            useEffect(() => {
+                var _a;
+                value && ((_a = formFieldActionsRef.current) === null || _a === void 0 ? void 0 : _a.setValue(value));
+            }, [value]);
+            const showEmptyValueLabel = !value && !isFocused;
+            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.createElement("div", { onClick: onClick },
+                React.createElement(FormField, Object.assign({}, newActivatorProps, inputProps, { value: showEmptyValueLabel ? inputProps.emptyValueLabel || "" : value, placeholder: inputProps.placeholder, onChange: (_, event) => {
+                        onChange && onChange(event);
+                    }, onBlur: () => {
+                        inputProps.onBlur && inputProps.onBlur();
+                        activatorProps.onBlur && activatorProps.onBlur();
+                        setIsFocused(false);
+                    }, onFocus: () => {
+                        inputProps.onFocus && inputProps.onFocus();
+                        activatorProps.onFocus && activatorProps.onFocus();
+                        setIsFocused(true);
+                    }, onKeyUp: event => {
+                        var _a;
+                        if (inputProps.showIcon === false &&
+                            event.key === "ArrowDown") {
+                            (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);
+                        }
+                    }, actionsRef: formFieldActionsRef, suffix: suffix }))));
+        } }));
+}
+
+/**
+ * Combines the actions on the InputDate such as onChange, onFocus, onBlur to forward event handler passed to the InputDate component to the DatePicker component.
+ * DO not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
+ */
+function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
+    const [isFocused, setIsFocused] = useState(false);
+    function handleChange(_, event) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    }
+    function handleFocus(event) {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+        setIsFocused(true);
+    }
+    function handleBlur(event) {
+        setIsFocused(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }
+    return {
+        handleBlur,
+        handleChange,
+        handleFocus,
+        isFocused,
+    };
+}
+
+const InputDateRebuilt = forwardRef(function InputDateInternal(props, inputRefs) {
+    const { onChange } = props;
+    return (React.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 }));
+    function InputDateActivator(activatorProps) {
+        const { onClick, value } = activatorProps;
+        const newActivatorProps = omit(activatorProps, ["activator", "fullWidth"]);
+        const { handleChange, handleFocus, handleBlur, isFocused } = useInputDateActivatorActions({
+            onChange: newActivatorProps.onChange,
+            onFocus: event => {
+                var _a, _b;
+                (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                (_b = newActivatorProps.onFocus) === null || _b === void 0 ? void 0 : _b.call(newActivatorProps);
+            },
+            onBlur: event => {
+                var _a, _b;
+                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                (_b = newActivatorProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(newActivatorProps);
+            },
+        });
+        const suffix = props.showIcon !== false
+            ? {
+                icon: "calendar",
+                ariaLabel: "Show calendar",
+                onClick: onClick && onClick,
+            }
+            : undefined;
+        const showEmptyValueLabel = !value && !isFocused;
+        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.createElement("div", { onClick: onClick },
+            React.createElement(InputText, Object.assign({}, newActivatorProps, props, { version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: inputRefs, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
+                    var _a, _b;
+                    if (props.showIcon === false && event.key === "ArrowDown") {
+                        (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);
+                    }
+                    (_b = props.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(props, event);
+                }, onChange: handleChange }))));
+    }
+});
+
+function isNewInputDateProps(props) {
+    return props.version === 2;
+}
+const InputDate = forwardRef(function InputDateShim(props, ref) {
+    if (isNewInputDateProps(props)) {
+        return React.createElement(InputDateRebuilt, Object.assign({}, props, { ref: ref }));
+    }
+    else {
+        return React.createElement(InputDate$1, Object.assign({}, props));
+    }
+});
+
+export { InputDate };

package/dist/InputDate/useInputDateActivatorActions.d.ts

@@ -0,0 +1,16 @@
+import { ChangeEvent, FocusEvent } from "react";
+import { InputDateRebuiltProps } from "./InputDate.types";
+import { DatePickerActivatorProps } from "../DatePicker/DatePickerActivator";
+export interface useInputDateActivatorActionsProps extends Pick<InputDateRebuiltProps, "onFocus" | "onBlur"> {
+    onChange: DatePickerActivatorProps["onChange"];
+}
+/**
+ * Combines the actions on the InputDate such as onChange, onFocus, onBlur to forward event handler passed to the InputDate component to the DatePicker component.
+ * DO not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
+ */
+export declare function useInputDateActivatorActions({ onChange, onBlur, onFocus, }: useInputDateActivatorActionsProps): {
+    handleBlur: (event: FocusEvent<HTMLInputElement>) => void;
+    handleChange: (_: unknown, event?: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
+    isFocused: boolean;
+};

package/dist/InputText/index.cjs

@@ -159,7 +159,7 @@ function insertAtCursor(input, newText) {
  * Combines the actions on the InputText such as onChange, onEnter, onFocus, onBlur, and onClear to forward information to the consumers of the InputText.
  * DO not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
  */
-function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, }) {
+function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, }) {
     function handleClear() {
         var _a;
         handleBlur();
@@ -171,6 +171,7 @@ function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, })
         onChange === null || onChange === void 0 ? void 0 : onChange(newValue, event);
     }
     function handleKeyDown(event) {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
         if (!onEnter)
             return;
         if (event.key !== "Enter")
@@ -202,8 +203,8 @@ function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, })
 function useInputTextFormField(_a) {
     var { id, name, description, inline, handleChange, handleBlur, handleFocus, handleKeyDown, error } = _a, rest = tslib_es6.__rest(_a, ["id", "name", "description", "inline", "handleChange", "handleBlur", "handleFocus", "handleKeyDown", "error"]);
     const descriptionIdentifier = `descriptionUUID--${id}`;
-    const fieldProps = Object.assign(Object.assign(Object.assign({ id, className: FormField.styles.input, name, disabled: rest.disabled, inputMode: rest.inputMode, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus }, (description &&
-        !inline && { "aria-describedby": descriptionIdentifier })), { "aria-invalid": rest["aria-invalid"] || error || rest.invalid ? true : undefined, autoFocus: rest.autoFocus, invalid: error || rest.invalid ? "true" : undefined, onKeyDown: handleKeyDown }), rest);
+    const fieldProps = Object.assign(Object.assign(Object.assign(Object.assign({}, rest), { id, className: FormField.styles.input, name, disabled: rest.disabled, inputMode: rest.inputMode, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus }), (description &&
+        !inline && { "aria-describedby": descriptionIdentifier })), { "aria-invalid": rest["aria-invalid"] || error || rest.invalid ? true : undefined, autoFocus: rest.autoFocus, invalid: error || rest.invalid ? "true" : undefined, onKeyDown: handleKeyDown });
     return { fieldProps, descriptionIdentifier };
 }
 
@@ -229,6 +230,7 @@ const InputTextSPAR = React.forwardRef(function InputTextInternal(props, inputRe
         onChange: props.onChange,
         onBlur: props.onBlur,
         onFocus: props.onFocus,
+        onKeyDown: props.onKeyDown,
         onEnter: props.onEnter,
         inputRef: inputTextRef,
     });

package/dist/InputText/index.mjs

@@ -157,7 +157,7 @@ function insertAtCursor(input, newText) {
  * Combines the actions on the InputText such as onChange, onEnter, onFocus, onBlur, and onClear to forward information to the consumers of the InputText.
  * DO not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
  */
-function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, }) {
+function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, }) {
     function handleClear() {
         var _a;
         handleBlur();
@@ -169,6 +169,7 @@ function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, })
         onChange === null || onChange === void 0 ? void 0 : onChange(newValue, event);
     }
     function handleKeyDown(event) {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
         if (!onEnter)
             return;
         if (event.key !== "Enter")
@@ -200,8 +201,8 @@ function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, })
 function useInputTextFormField(_a) {
     var { id, name, description, inline, handleChange, handleBlur, handleFocus, handleKeyDown, error } = _a, rest = __rest(_a, ["id", "name", "description", "inline", "handleChange", "handleBlur", "handleFocus", "handleKeyDown", "error"]);
     const descriptionIdentifier = `descriptionUUID--${id}`;
-    const fieldProps = Object.assign(Object.assign(Object.assign({ id, className: styles.input, name, disabled: rest.disabled, inputMode: rest.inputMode, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus }, (description &&
-        !inline && { "aria-describedby": descriptionIdentifier })), { "aria-invalid": rest["aria-invalid"] || error || rest.invalid ? true : undefined, autoFocus: rest.autoFocus, invalid: error || rest.invalid ? "true" : undefined, onKeyDown: handleKeyDown }), rest);
+    const fieldProps = Object.assign(Object.assign(Object.assign(Object.assign({}, rest), { id, className: styles.input, name, disabled: rest.disabled, inputMode: rest.inputMode, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus }), (description &&
+        !inline && { "aria-describedby": descriptionIdentifier })), { "aria-invalid": rest["aria-invalid"] || error || rest.invalid ? true : undefined, autoFocus: rest.autoFocus, invalid: error || rest.invalid ? "true" : undefined, onKeyDown: handleKeyDown });
     return { fieldProps, descriptionIdentifier };
 }
 
@@ -227,6 +228,7 @@ const InputTextSPAR = forwardRef(function InputTextInternal(props, inputRefs) {
         onChange: props.onChange,
         onBlur: props.onBlur,
         onFocus: props.onFocus,
+        onKeyDown: props.onKeyDown,
         onEnter: props.onEnter,
         inputRef: inputTextRef,
     });

package/dist/InputText/useInputTextActions.d.ts

@@ -1,13 +1,13 @@
 import { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
 import { InputTextRebuiltProps } from "./InputText.types";
-export interface useInputTextActionsProps extends Pick<InputTextRebuiltProps, "onChange" | "onEnter" | "onFocus" | "onBlur"> {
+export interface useInputTextActionsProps extends Pick<InputTextRebuiltProps, "onChange" | "onEnter" | "onFocus" | "onBlur" | "onKeyDown"> {
     inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>;
 }
 /**
  * Combines the actions on the InputText such as onChange, onEnter, onFocus, onBlur, and onClear to forward information to the consumers of the InputText.
  * DO not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
  */
-export declare function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, }: useInputTextActionsProps): {
+export declare function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, }: useInputTextActionsProps): {
     handleClear: () => void;
     handleChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     handleKeyDown: (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;

package/dist/InputText/useInputTextFormField.d.ts

@@ -50,15 +50,25 @@ export interface UseInputTextFormFieldReturn {
  */
 export declare function useInputTextFormField({ id, name, description, inline, handleChange, handleBlur, handleFocus, handleKeyDown, error, ...rest }: useInputTextFormFieldProps): {
     fieldProps: {
-        invalid: string | boolean | undefined;
+        "aria-invalid": boolean | undefined;
+        autoFocus: boolean | undefined;
+        invalid: string | undefined;
+        onKeyDown: (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+        "aria-describedby"?: string | undefined;
+        id: string;
+        className: string;
+        name: string;
+        disabled: boolean | undefined;
+        inputMode: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        onChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+        onBlur: () => void;
+        onFocus: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
         accept?: string | undefined;
         alt?: string | undefined;
         autoComplete?: string | undefined;
-        autoFocus: boolean | undefined;
         capture?: boolean | "user" | "environment" | undefined;
         checked?: boolean | undefined;
         crossOrigin?: "anonymous" | "use-credentials" | "" | undefined;
-        disabled: boolean | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         form?: string | undefined;
         formAction?: string | undefined;
@@ -83,13 +93,11 @@ export declare function useInputTextFormField({ id, name, description, inline, h
         type?: import("react").HTMLInputTypeAttribute | undefined;
         value?: string | ReadonlyArray<string> | number | undefined;
         width?: number | string | undefined;
-        onChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | ReadonlyArray<string> | undefined;
         suppressContentEditableWarning?: boolean | undefined;
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
-        className: string;
         contentEditable?: (boolean | "false" | "true") | "inherit" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
@@ -125,7 +133,6 @@ export declare function useInputTextFormField({ id, name, description, inline, h
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        inputMode: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
         is?: string | undefined;
         'aria-activedescendant'?: string | undefined;
         'aria-atomic'?: (boolean | "false" | "true") | undefined;
@@ -137,7 +144,6 @@ export declare function useInputTextFormField({ id, name, description, inline, h
         'aria-colspan'?: number | undefined;
         'aria-controls'?: string | undefined;
         'aria-current'?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
-        "aria-describedby"?: string | undefined;
         'aria-details'?: string | undefined;
         'aria-disabled'?: (boolean | "false" | "true") | undefined;
         'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
@@ -147,7 +153,6 @@ export declare function useInputTextFormField({ id, name, description, inline, h
         'aria-grabbed'?: (boolean | "false" | "true") | undefined;
         'aria-haspopup'?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
         'aria-hidden'?: (boolean | "false" | "true") | undefined;
-        "aria-invalid": boolean | "false" | "true" | "grammar" | "spelling" | undefined;
         'aria-keyshortcuts'?: string | undefined;
         'aria-label'?: string | undefined;
         'aria-labelledby'?: string | undefined;
@@ -191,9 +196,7 @@ export declare function useInputTextFormField({ id, name, description, inline, h
         onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onCompositionUpdate?: import("react").CompositionEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
-        onFocus: import("react").FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
         onFocusCapture?: import("react").FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
-        onBlur: import("react").FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
         onBlurCapture?: import("react").FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onChangeCapture?: import("react").FormEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onBeforeInput?: import("react").FormEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
@@ -210,7 +213,6 @@ export declare function useInputTextFormField({ id, name, description, inline, h
         onLoadCapture?: import("react").ReactEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onError?: import("react").ReactEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onErrorCapture?: import("react").ReactEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
-        onKeyDown: import("react").KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
         onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onKeyPress?: import("react").KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
@@ -340,8 +342,6 @@ export declare function useInputTextFormField({ id, name, description, inline, h
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
-        id: string;
-        name: string;
     };
     descriptionIdentifier: string;
 };

package/dist/index.cjs

@@ -49,7 +49,7 @@ var Grid = require('./Grid-cjs.js');
 var Heading = require('./Heading-cjs.js');
 var InlineLabel = require('./InlineLabel-cjs.js');
 var InputAvatar = require('./InputAvatar-cjs.js');
-var InputDate = require('./InputDate-cjs.js');
+var InputDate_index = require('./InputDate/index.cjs');
 var InputEmail = require('./InputEmail-cjs.js');
 var InputFile = require('./InputFile-cjs.js');
 var InputGroup = require('./InputGroup-cjs.js');
@@ -244,7 +244,7 @@ exports.Grid = Grid.Grid;
 exports.Heading = Heading.Heading;
 exports.InlineLabel = InlineLabel.InlineLabel;
 exports.InputAvatar = InputAvatar.InputAvatar;
-exports.InputDate = InputDate.InputDate;
+exports.InputDate = InputDate_index.InputDate;
 exports.InputEmail = InputEmail.InputEmail;
 exports.validationMessage = InputEmail.validationMessage;
 exports.InputFile = InputFile.InputFile;

package/dist/index.mjs

@@ -47,7 +47,7 @@ export { G as GRID_TEST_ID, a as Grid } from './Grid-es.js';
 export { H as Heading } from './Heading-es.js';
 export { I as InlineLabel } from './InlineLabel-es.js';
 export { I as InputAvatar } from './InputAvatar-es.js';
-export { I as InputDate } from './InputDate-es.js';
+export { InputDate } from './InputDate/index.mjs';
 export { I as InputEmail, v as validationMessage } from './InputEmail-es.js';
 export { I as InputFile, u as updateFiles } from './InputFile-es.js';
 export { I as InputGroup } from './InputGroup-es.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.12.1",
+  "version": "6.13.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -488,5 +488,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "1a784622c21bff8c1719a88909490843f0941b7b"
+  "gitHead": "f0244f2c2569fdaf6722ca6f48df1342774d78e9"
 }

package/dist/InputDate-cjs.js

@@ -1,57 +0,0 @@
-'use strict';
-
-var omit = require('./omit-cjs.js');
-var React = require('react');
-var FormField = require('./FormField-cjs.js');
-require('./tslib.es6-cjs.js');
-require('react-hook-form');
-require('framer-motion');
-require('@jobber/design');
-require('classnames');
-require('react-router-dom');
-var DatePicker = require('./DatePicker-cjs.js');
-
-function InputDate(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 } = activatorProps;
-            const newActivatorProps = omit.omit(activatorProps, ["activator"]);
-            const [isFocused, setIsFocused] = React.useState(false);
-            const suffix = inputProps.showIcon !== false
-                ? {
-                    icon: "calendar",
-                    ariaLabel: "Show calendar",
-                    onClick: onClick && onClick,
-                }
-                : undefined;
-            // Set form field to formatted date string immediately, to avoid validations
-            //  triggering incorrectly when it blurs (to handle the datepicker UI click)
-            React.useEffect(() => {
-                var _a;
-                value && ((_a = formFieldActionsRef.current) === null || _a === void 0 ? void 0 : _a.setValue(value));
-            }, [value]);
-            const showEmptyValueLabel = !value && !isFocused;
-            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.createElement("div", { onClick: onClick },
-                React.createElement(FormField.FormField, Object.assign({}, newActivatorProps, inputProps, { value: showEmptyValueLabel ? inputProps.emptyValueLabel || "" : value, placeholder: inputProps.placeholder, onChange: (_, event) => {
-                        onChange && onChange(event);
-                    }, onBlur: () => {
-                        inputProps.onBlur && inputProps.onBlur();
-                        activatorProps.onBlur && activatorProps.onBlur();
-                        setIsFocused(false);
-                    }, onFocus: () => {
-                        inputProps.onFocus && inputProps.onFocus();
-                        activatorProps.onFocus && activatorProps.onFocus();
-                        setIsFocused(true);
-                    }, onKeyUp: event => {
-                        var _a;
-                        if (inputProps.showIcon === false &&
-                            event.key === "ArrowDown") {
-                            (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);
-                        }
-                    }, actionsRef: formFieldActionsRef, suffix: suffix }))));
-        } }));
-}
-
-exports.InputDate = InputDate;

package/dist/InputDate-es.js

@@ -1,55 +0,0 @@
-import { o as omit } from './omit-es.js';
-import React, { useRef, useState, useEffect } from 'react';
-import { f as FormField } from './FormField-es.js';
-import './tslib.es6-es.js';
-import 'react-hook-form';
-import 'framer-motion';
-import '@jobber/design';
-import 'classnames';
-import 'react-router-dom';
-import { D as DatePicker } from './DatePicker-es.js';
-
-function InputDate(inputProps) {
-    const formFieldActionsRef = useRef(null);
-    return (React.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 newActivatorProps = omit(activatorProps, ["activator"]);
-            const [isFocused, setIsFocused] = useState(false);
-            const suffix = inputProps.showIcon !== false
-                ? {
-                    icon: "calendar",
-                    ariaLabel: "Show calendar",
-                    onClick: onClick && onClick,
-                }
-                : undefined;
-            // Set form field to formatted date string immediately, to avoid validations
-            //  triggering incorrectly when it blurs (to handle the datepicker UI click)
-            useEffect(() => {
-                var _a;
-                value && ((_a = formFieldActionsRef.current) === null || _a === void 0 ? void 0 : _a.setValue(value));
-            }, [value]);
-            const showEmptyValueLabel = !value && !isFocused;
-            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.createElement("div", { onClick: onClick },
-                React.createElement(FormField, Object.assign({}, newActivatorProps, inputProps, { value: showEmptyValueLabel ? inputProps.emptyValueLabel || "" : value, placeholder: inputProps.placeholder, onChange: (_, event) => {
-                        onChange && onChange(event);
-                    }, onBlur: () => {
-                        inputProps.onBlur && inputProps.onBlur();
-                        activatorProps.onBlur && activatorProps.onBlur();
-                        setIsFocused(false);
-                    }, onFocus: () => {
-                        inputProps.onFocus && inputProps.onFocus();
-                        activatorProps.onFocus && activatorProps.onFocus();
-                        setIsFocused(true);
-                    }, onKeyUp: event => {
-                        var _a;
-                        if (inputProps.showIcon === false &&
-                            event.key === "ArrowDown") {
-                            (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);
-                        }
-                    }, actionsRef: formFieldActionsRef, suffix: suffix }))));
-        } }));
-}
-
-export { InputDate as I };