@jobber/components 6.101.4 → 6.101.5-JOB-140604-4487daa.55

package/dist/FormField-cjs.js

@@ -14,22 +14,22 @@ var Spinner = require('./Spinner-cjs.js');
 var tslib_es6 = require('./tslib.es6-cjs.js');
 var reactHookForm = require('react-hook-form');
 
-var styles$1 = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","disabled":"Tz9LK9ABKMk-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","emptyPhoneNumber":"MVhuQuzUBUs-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
+var formFieldStyles = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","disabled":"Tz9LK9ABKMk-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","emptyPhoneNumber":"MVhuQuzUBUs-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
 
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
  */
 function AffixLabel({ label, variation = "prefix", labelRef, }) {
-    const affixLabelClass = classnames(styles$1.affixLabel, {
-        [styles$1.suffix]: variation === "suffix",
+    const affixLabelClass = classnames(formFieldStyles.affixLabel, {
+        [formFieldStyles.suffix]: variation === "suffix",
     });
     if (!label)
         return null;
     return (React.createElement("div", { ref: labelRef, className: affixLabelClass }, label));
 }
 function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
-    const affixIconClass = classnames(styles$1.affixIcon, {
-        [styles$1.suffix]: variation === "suffix",
+    const affixIconClass = classnames(formFieldStyles.affixIcon, {
+        [formFieldStyles.suffix]: variation === "suffix",
     });
     const iconSize = size === "small" ? "small" : "base";
     if (!icon)
@@ -51,7 +51,7 @@ function FormFieldDescription({ id, description, visible = true, }) {
     if (!visible)
         return null;
     const useStringFormat = !description || typeof description === "string";
-    return (React.createElement("div", { id: id, className: styles$1.description }, useStringFormat ? (React.createElement(Text.Text, { size: "small", variation: "subdued" }, description)) : (description)));
+    return (React.createElement("div", { id: id, className: formFieldStyles.description }, useStringFormat ? (React.createElement(Text.Text, { size: "small", variation: "subdued" }, description)) : (description)));
 }
 
 var styles = {"clearInput":"YmRTd-KeXv4-","spinning":"B25z9B8I3gs-"};
@@ -86,22 +86,22 @@ function useIsSafari() {
  */
 function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, error, max, prefixRef, suffixRef, maxLength, type, disabled, inline, showMiniLabel = true, }) {
     const isSafari = useIsSafari();
-    const wrapperClasses = classnames(styles$1.wrapper, size && styles$1[size], align && styles$1[align], {
-        [styles$1.miniLabel]: (showMiniLabel && placeholder && value !== "") ||
+    const wrapperClasses = classnames(formFieldStyles.wrapper, size && formFieldStyles[size], align && formFieldStyles[align], {
+        [formFieldStyles.miniLabel]: (showMiniLabel && placeholder && value !== "") ||
             (placeholder && type === "select") ||
             // Naively assume that if the the type is tel, it is the InputPhoneNumber
             (placeholder && type === "tel"),
-        [styles$1.text]: type === "textarea" || type === "text",
-        [styles$1.textarea]: type === "textarea",
-        [styles$1.safari]: isSafari && type === "textarea",
-        [styles$1.select]: type === "select",
-        [styles$1.invalid]: invalid !== null && invalid !== void 0 ? invalid : error,
-        [styles$1.disabled]: disabled,
-        [styles$1.maxLength]: maxLength,
-        [styles$1.timeInputLabel]: placeholder && type === "time" && placeholder && value === "",
+        [formFieldStyles.text]: type === "textarea" || type === "text",
+        [formFieldStyles.textarea]: type === "textarea",
+        [formFieldStyles.safari]: isSafari && type === "textarea",
+        [formFieldStyles.select]: type === "select",
+        [formFieldStyles.invalid]: invalid !== null && invalid !== void 0 ? invalid : error,
+        [formFieldStyles.disabled]: disabled,
+        [formFieldStyles.maxLength]: maxLength,
+        [formFieldStyles.timeInputLabel]: placeholder && type === "time" && placeholder && value === "",
     });
-    const containerClasses = classnames(styles$1.container, {
-        [styles$1.inline]: inline,
+    const containerClasses = classnames(formFieldStyles.container, {
+        [formFieldStyles.inline]: inline,
     });
     const wrapperInlineStyle = {
         ["--formField-maxLength"]: maxLength || max,
@@ -120,7 +120,7 @@ function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, e
         }));
     }, [value]);
     return {
-        inputStyle: styles$1.input,
+        inputStyle: formFieldStyles.input,
         wrapperClasses,
         containerClasses,
         wrapperInlineStyle,
@@ -150,8 +150,8 @@ function getAffixPaddding({ value, type, prefixWidth, suffixWidth, }) {
 }
 
 function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, clearable, onClear, readonly, toolbar, toolbarVisibility = "while-editing", showMiniLabel = true, wrapperRef, }) {
-    const prefixRef = React.useRef();
-    const suffixRef = React.useRef();
+    const prefixRef = React.useRef(null);
+    const suffixRef = React.useRef(null);
     const { wrapperClasses, containerClasses, wrapperInlineStyle, labelStyle } = useFormFieldWrapperStyles({
         align,
         max,
@@ -203,24 +203,24 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
  */
 function FormFieldInputHorizontalWrapper({ children, }) {
-    return React.createElement("div", { className: styles$1.horizontalWrapper }, children);
+    return React.createElement("div", { className: formFieldStyles.horizontalWrapper }, children);
 }
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
  */
 function FormFieldInputWrapperStyles({ children, }) {
-    return React.createElement("div", { className: styles$1.inputWrapper }, children);
+    return React.createElement("div", { className: formFieldStyles.inputWrapper }, children);
 }
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
  */
 function FormFieldWrapperMain({ children, tabIndex = -1, }) {
-    return (React.createElement("div", { className: styles$1.childrenWrapper, tabIndex: tabIndex }, children));
+    return (React.createElement("div", { className: formFieldStyles.childrenWrapper, tabIndex: tabIndex }, children));
 }
 function FormFieldLabel({ children, htmlFor, style, external = false, }) {
     if (!children)
         return null;
-    return (React.createElement("label", { className: external ? styles$1.externalLabel : styles$1.label, htmlFor: htmlFor, style: style }, children));
+    return (React.createElement("label", { className: external ? formFieldStyles.externalLabel : formFieldStyles.label, htmlFor: htmlFor, style: style }, children));
 }
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
@@ -230,13 +230,13 @@ function FormFieldWrapperToolbar({ toolbar, isToolbarVisible, toolbarAnimationEn
             duration: design.tokens["timing-base"] / 1000,
             ease: "easeInOut",
         }, tabIndex: -1 },
-        React.createElement("div", { className: styles$1.toolbar, "data-testid": "ATL-InputText-Toolbar" }, toolbar)))));
+        React.createElement("div", { className: formFieldStyles.toolbar, "data-testid": "ATL-InputText-Toolbar" }, toolbar)))));
 }
 
 function FormFieldPostFix({ variation, visible = true, className, }) {
     if (!visible)
         return null;
-    return (React.createElement("span", { className: classnames(styles$1.postfix, className) }, variation === "select" ? (React.createElement(Icon.Icon, { name: "arrowDown" })) : (React.createElement(Spinner.Spinner, { size: "small" }))));
+    return (React.createElement("span", { className: classnames(formFieldStyles.postfix, className) }, variation === "select" ? (React.createElement(Icon.Icon, { name: "arrowDown" })) : (React.createElement(Spinner.Spinner, { size: "small" }))));
 }
 
 /**
@@ -299,8 +299,8 @@ function useAtlantisFormFieldActions({ name, onChange, inputRef, onControllerCha
  */
 function useAtlantisFormField({ id, nameProp, name, useControllerField: useControllerField, description, disabled, readonly, keyboard, autofocus, pattern, type, value, handleChange, handleBlur, handleFocus, inline, validations, handleKeyDown, handleValidation, errorMessage, }) {
     const descriptionIdentifier = `descriptionUUID--${id}`;
-    const fieldProps = Object.assign(Object.assign(Object.assign({}, useControllerField), { id, className: classnames(styles$1.input, {
-            [styles$1.emptyPhoneNumber]: shouldAddPhoneNumberClass(type, value, pattern),
+    const fieldProps = Object.assign(Object.assign(Object.assign({}, useControllerField), { id, className: classnames(formFieldStyles.input, {
+            [formFieldStyles.emptyPhoneNumber]: shouldAddPhoneNumberClass(type, value, pattern),
         }), name: (validations || nameProp) && name, disabled: disabled, readOnly: readonly, inputMode: keyboard, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, autoFocus: autofocus }), (description &&
         !inline && { "aria-describedby": descriptionIdentifier }));
     const textFieldProps = Object.assign(Object.assign({}, fieldProps), { autoFocus: autofocus, onKeyDown: handleKeyDown });
@@ -383,6 +383,7 @@ function FormField(props) {
     return React.createElement(FormFieldInternal, Object.assign({}, props, { id: id }));
 }
 function FormFieldInternal(props) {
+    var _a;
     const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, id, inputRef, inline, keyboard, max, maxLength, min, name: nameProp, pattern, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, onKeyUp, clearable = "never", autofocus, } = props;
     const { name } = useAtlantisFormFieldName({ id, nameProp });
     const { errorMessage, inputRefs, useControllerField, setValue, onControllerBlur, onControllerChange, } = useAtlantisReactHookForm({
@@ -429,7 +430,10 @@ function FormFieldInternal(props) {
         handleValidation,
         handleKeyDown,
     });
-    return (React.createElement(FormFieldWrapper, Object.assign({}, props, { value: useControllerField.value, error: errorMessage, identifier: id, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear }), renderField()));
+    // Ensure focus tracking works by providing a wrapperRef when none is passed
+    const internalWrapperRef = React.useRef(null);
+    const wrapperRef = (_a = props.wrapperRef) !== null && _a !== void 0 ? _a : internalWrapperRef;
+    return (React.createElement(FormFieldWrapper, Object.assign({}, props, { value: useControllerField.value, error: errorMessage, identifier: id, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear, wrapperRef: wrapperRef }), renderField()));
     function renderField() {
         switch (type) {
             case "select":
@@ -466,8 +470,8 @@ exports.FormFieldPostFix = FormFieldPostFix;
 exports.FormFieldWrapper = FormFieldWrapper;
 exports.FormFieldWrapperMain = FormFieldWrapperMain;
 exports.FormFieldWrapperToolbar = FormFieldWrapperToolbar;
+exports.formFieldStyles = formFieldStyles;
 exports.mergeRefs = mergeRefs;
-exports.styles = styles$1;
 exports.useAtlantisFormField = useAtlantisFormField;
 exports.useAtlantisFormFieldActions = useAtlantisFormFieldActions;
 exports.useAtlantisFormFieldName = useAtlantisFormFieldName;

package/dist/FormField-es.js

@@ -12,22 +12,22 @@ import { S as Spinner } from './Spinner-es.js';
 import { _ as __rest } from './tslib.es6-es.js';
 import { useFormContext, useForm, useController } from 'react-hook-form';
 
-var styles$1 = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","disabled":"Tz9LK9ABKMk-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","emptyPhoneNumber":"MVhuQuzUBUs-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
+var formFieldStyles = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","disabled":"Tz9LK9ABKMk-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","emptyPhoneNumber":"MVhuQuzUBUs-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
 
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
  */
 function AffixLabel({ label, variation = "prefix", labelRef, }) {
-    const affixLabelClass = classnames(styles$1.affixLabel, {
-        [styles$1.suffix]: variation === "suffix",
+    const affixLabelClass = classnames(formFieldStyles.affixLabel, {
+        [formFieldStyles.suffix]: variation === "suffix",
     });
     if (!label)
         return null;
     return (React__default.createElement("div", { ref: labelRef, className: affixLabelClass }, label));
 }
 function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
-    const affixIconClass = classnames(styles$1.affixIcon, {
-        [styles$1.suffix]: variation === "suffix",
+    const affixIconClass = classnames(formFieldStyles.affixIcon, {
+        [formFieldStyles.suffix]: variation === "suffix",
     });
     const iconSize = size === "small" ? "small" : "base";
     if (!icon)
@@ -49,7 +49,7 @@ function FormFieldDescription({ id, description, visible = true, }) {
     if (!visible)
         return null;
     const useStringFormat = !description || typeof description === "string";
-    return (React__default.createElement("div", { id: id, className: styles$1.description }, useStringFormat ? (React__default.createElement(Text, { size: "small", variation: "subdued" }, description)) : (description)));
+    return (React__default.createElement("div", { id: id, className: formFieldStyles.description }, useStringFormat ? (React__default.createElement(Text, { size: "small", variation: "subdued" }, description)) : (description)));
 }
 
 var styles = {"clearInput":"YmRTd-KeXv4-","spinning":"B25z9B8I3gs-"};
@@ -84,22 +84,22 @@ function useIsSafari() {
  */
 function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, error, max, prefixRef, suffixRef, maxLength, type, disabled, inline, showMiniLabel = true, }) {
     const isSafari = useIsSafari();
-    const wrapperClasses = classnames(styles$1.wrapper, size && styles$1[size], align && styles$1[align], {
-        [styles$1.miniLabel]: (showMiniLabel && placeholder && value !== "") ||
+    const wrapperClasses = classnames(formFieldStyles.wrapper, size && formFieldStyles[size], align && formFieldStyles[align], {
+        [formFieldStyles.miniLabel]: (showMiniLabel && placeholder && value !== "") ||
             (placeholder && type === "select") ||
             // Naively assume that if the the type is tel, it is the InputPhoneNumber
             (placeholder && type === "tel"),
-        [styles$1.text]: type === "textarea" || type === "text",
-        [styles$1.textarea]: type === "textarea",
-        [styles$1.safari]: isSafari && type === "textarea",
-        [styles$1.select]: type === "select",
-        [styles$1.invalid]: invalid !== null && invalid !== void 0 ? invalid : error,
-        [styles$1.disabled]: disabled,
-        [styles$1.maxLength]: maxLength,
-        [styles$1.timeInputLabel]: placeholder && type === "time" && placeholder && value === "",
+        [formFieldStyles.text]: type === "textarea" || type === "text",
+        [formFieldStyles.textarea]: type === "textarea",
+        [formFieldStyles.safari]: isSafari && type === "textarea",
+        [formFieldStyles.select]: type === "select",
+        [formFieldStyles.invalid]: invalid !== null && invalid !== void 0 ? invalid : error,
+        [formFieldStyles.disabled]: disabled,
+        [formFieldStyles.maxLength]: maxLength,
+        [formFieldStyles.timeInputLabel]: placeholder && type === "time" && placeholder && value === "",
     });
-    const containerClasses = classnames(styles$1.container, {
-        [styles$1.inline]: inline,
+    const containerClasses = classnames(formFieldStyles.container, {
+        [formFieldStyles.inline]: inline,
     });
     const wrapperInlineStyle = {
         ["--formField-maxLength"]: maxLength || max,
@@ -118,7 +118,7 @@ function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, e
         }));
     }, [value]);
     return {
-        inputStyle: styles$1.input,
+        inputStyle: formFieldStyles.input,
         wrapperClasses,
         containerClasses,
         wrapperInlineStyle,
@@ -148,8 +148,8 @@ function getAffixPaddding({ value, type, prefixWidth, suffixWidth, }) {
 }
 
 function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, clearable, onClear, readonly, toolbar, toolbarVisibility = "while-editing", showMiniLabel = true, wrapperRef, }) {
-    const prefixRef = useRef();
-    const suffixRef = useRef();
+    const prefixRef = useRef(null);
+    const suffixRef = useRef(null);
     const { wrapperClasses, containerClasses, wrapperInlineStyle, labelStyle } = useFormFieldWrapperStyles({
         align,
         max,
@@ -201,24 +201,24 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
  */
 function FormFieldInputHorizontalWrapper({ children, }) {
-    return React__default.createElement("div", { className: styles$1.horizontalWrapper }, children);
+    return React__default.createElement("div", { className: formFieldStyles.horizontalWrapper }, children);
 }
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
  */
 function FormFieldInputWrapperStyles({ children, }) {
-    return React__default.createElement("div", { className: styles$1.inputWrapper }, children);
+    return React__default.createElement("div", { className: formFieldStyles.inputWrapper }, children);
 }
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
  */
 function FormFieldWrapperMain({ children, tabIndex = -1, }) {
-    return (React__default.createElement("div", { className: styles$1.childrenWrapper, tabIndex: tabIndex }, children));
+    return (React__default.createElement("div", { className: formFieldStyles.childrenWrapper, tabIndex: tabIndex }, children));
 }
 function FormFieldLabel({ children, htmlFor, style, external = false, }) {
     if (!children)
         return null;
-    return (React__default.createElement("label", { className: external ? styles$1.externalLabel : styles$1.label, htmlFor: htmlFor, style: style }, children));
+    return (React__default.createElement("label", { className: external ? formFieldStyles.externalLabel : formFieldStyles.label, htmlFor: htmlFor, style: style }, children));
 }
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
@@ -228,13 +228,13 @@ function FormFieldWrapperToolbar({ toolbar, isToolbarVisible, toolbarAnimationEn
             duration: tokens["timing-base"] / 1000,
             ease: "easeInOut",
         }, tabIndex: -1 },
-        React__default.createElement("div", { className: styles$1.toolbar, "data-testid": "ATL-InputText-Toolbar" }, toolbar)))));
+        React__default.createElement("div", { className: formFieldStyles.toolbar, "data-testid": "ATL-InputText-Toolbar" }, toolbar)))));
 }
 
 function FormFieldPostFix({ variation, visible = true, className, }) {
     if (!visible)
         return null;
-    return (React__default.createElement("span", { className: classnames(styles$1.postfix, className) }, variation === "select" ? (React__default.createElement(Icon, { name: "arrowDown" })) : (React__default.createElement(Spinner, { size: "small" }))));
+    return (React__default.createElement("span", { className: classnames(formFieldStyles.postfix, className) }, variation === "select" ? (React__default.createElement(Icon, { name: "arrowDown" })) : (React__default.createElement(Spinner, { size: "small" }))));
 }
 
 /**
@@ -297,8 +297,8 @@ function useAtlantisFormFieldActions({ name, onChange, inputRef, onControllerCha
  */
 function useAtlantisFormField({ id, nameProp, name, useControllerField: useControllerField, description, disabled, readonly, keyboard, autofocus, pattern, type, value, handleChange, handleBlur, handleFocus, inline, validations, handleKeyDown, handleValidation, errorMessage, }) {
     const descriptionIdentifier = `descriptionUUID--${id}`;
-    const fieldProps = Object.assign(Object.assign(Object.assign({}, useControllerField), { id, className: classnames(styles$1.input, {
-            [styles$1.emptyPhoneNumber]: shouldAddPhoneNumberClass(type, value, pattern),
+    const fieldProps = Object.assign(Object.assign(Object.assign({}, useControllerField), { id, className: classnames(formFieldStyles.input, {
+            [formFieldStyles.emptyPhoneNumber]: shouldAddPhoneNumberClass(type, value, pattern),
         }), name: (validations || nameProp) && name, disabled: disabled, readOnly: readonly, inputMode: keyboard, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, autoFocus: autofocus }), (description &&
         !inline && { "aria-describedby": descriptionIdentifier }));
     const textFieldProps = Object.assign(Object.assign({}, fieldProps), { autoFocus: autofocus, onKeyDown: handleKeyDown });
@@ -381,6 +381,7 @@ function FormField(props) {
     return React__default.createElement(FormFieldInternal, Object.assign({}, props, { id: id }));
 }
 function FormFieldInternal(props) {
+    var _a;
     const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, id, inputRef, inline, keyboard, max, maxLength, min, name: nameProp, pattern, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, onKeyUp, clearable = "never", autofocus, } = props;
     const { name } = useAtlantisFormFieldName({ id, nameProp });
     const { errorMessage, inputRefs, useControllerField, setValue, onControllerBlur, onControllerChange, } = useAtlantisReactHookForm({
@@ -427,7 +428,10 @@ function FormFieldInternal(props) {
         handleValidation,
         handleKeyDown,
     });
-    return (React__default.createElement(FormFieldWrapper, Object.assign({}, props, { value: useControllerField.value, error: errorMessage, identifier: id, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear }), renderField()));
+    // Ensure focus tracking works by providing a wrapperRef when none is passed
+    const internalWrapperRef = useRef(null);
+    const wrapperRef = (_a = props.wrapperRef) !== null && _a !== void 0 ? _a : internalWrapperRef;
+    return (React__default.createElement(FormFieldWrapper, Object.assign({}, props, { value: useControllerField.value, error: errorMessage, identifier: id, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear, wrapperRef: wrapperRef }), renderField()));
     function renderField() {
         switch (type) {
             case "select":
@@ -454,4 +458,4 @@ function setAutocomplete(autocompleteSetting) {
     return autocompleteSetting;
 }
 
-export { AffixIcon as A, FormFieldInputHorizontalWrapper as F, useAtlantisFormFieldActions as a, useAtlantisFormFieldName as b, useAtlantisReactHookForm as c, FormFieldInputWrapperStyles as d, FormFieldLabel as e, FormFieldWrapper as f, FormFieldWrapperMain as g, FormFieldWrapperToolbar as h, AffixLabel as i, useFormFieldWrapperStyles as j, FormField as k, FormFieldPostFix as l, mergeRefs as m, styles$1 as s, useAtlantisFormField as u };
+export { AffixIcon as A, FormFieldInputHorizontalWrapper as F, useAtlantisFormFieldActions as a, useAtlantisFormFieldName as b, useAtlantisReactHookForm as c, FormFieldInputWrapperStyles as d, FormFieldLabel as e, FormFieldWrapper as f, FormFieldWrapperMain as g, FormFieldWrapperToolbar as h, AffixLabel as i, useFormFieldWrapperStyles as j, FormField as k, formFieldStyles as l, FormFieldPostFix as m, mergeRefs as n, useAtlantisFormField as u };

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

@@ -1,11 +1,21 @@
 import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
-import type { InputTextRebuiltProps } from "../InputText/InputText.types";
-export interface InputDateRebuiltProps extends Omit<InputTextRebuiltProps, "clearable" | "onChange" | "value" | "prefix" | "suffix" | "multiline" | "rows" | "type" | "version"> {
+import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
+export interface InputDateRebuiltProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement | HTMLTextAreaElement>, KeyboardEvents<HTMLInputElement | HTMLTextAreaElement>, Omit<RebuiltInputCommonProps, "clearable" | "prefix" | "suffix"> {
     /**
      * A Date object value
      * (e.g., `new Date("11/11/2011")`)
      * */
     readonly value?: Date;
+    /**
+     * Callback for value changes.
+     * @param newValue - The new Date value
+     * @param event - Optional change event
+     */
+    readonly onChange: (newValue: Date, event?: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * @deprecated Use `onKeyDown` or `onKeyUp` instead.
+     */
+    readonly onEnter?: FormFieldProps["onEnter"];
     /**
      * The maximum selectable date.
      */
@@ -23,11 +33,6 @@ export interface InputDateRebuiltProps extends Omit<InputTextRebuiltProps, "clea
      * 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"> {
     /**

package/dist/InputDate/index.cjs

@@ -13,12 +13,12 @@ require('../Button-cjs.js');
 var DatePicker = require('../DatePicker-cjs.js');
 var InputText_index = require('../InputText/index.cjs');
 require('../_commonjsHelpers-cjs.js');
-require('../_baseGet-cjs.js');
+require('../_getAllKeys-cjs.js');
 require('../isTypedArray-cjs.js');
 require('../isObjectLike-cjs.js');
+require('../isSymbol-cjs.js');
 require('../identity-cjs.js');
 require('../_getTag-cjs.js');
-require('../isSymbol-cjs.js');
 require('../keysIn-cjs.js');
 require('../_baseAssignValue-cjs.js');
 require('../_baseFlatten-cjs.js');
@@ -35,6 +35,7 @@ require('../floating-ui.react-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
 require('../AtlantisContext-cjs.js');
+require('../filterDataAttributes-cjs.js');
 
 function InputDate$1(inputProps) {
     const formFieldActionsRef = React.useRef(null);
@@ -79,13 +80,9 @@ function InputDate$1(inputProps) {
         } }));
 }
 
-/**
- * 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) {
+    function handleChange(_newValue, event) {
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
     }
     function handleFocus(event) {
@@ -93,8 +90,8 @@ function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
         setIsFocused(true);
     }
     function handleBlur(event) {
-        setIsFocused(false);
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        setIsFocused(false);
     }
     return {
         handleBlur,
@@ -106,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);
             },
         });
@@ -135,7 +158,7 @@ const InputDateRebuilt = React.forwardRef((props, forwardedRef) => {
         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, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-invalid": activatorProps.ariaInvalid === "true" ? true : false, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, id: activatorProps.id, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
+            React.createElement(InputText_index.InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, 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);

package/dist/InputDate/index.mjs

@@ -11,12 +11,12 @@ import '../Button-es.js';
 import { D as DatePicker } from '../DatePicker-es.js';
 import { InputText } from '../InputText/index.mjs';
 import '../_commonjsHelpers-es.js';
-import '../_baseGet-es.js';
+import '../_getAllKeys-es.js';
 import '../isTypedArray-es.js';
 import '../isObjectLike-es.js';
+import '../isSymbol-es.js';
 import '../identity-es.js';
 import '../_getTag-es.js';
-import '../isSymbol-es.js';
 import '../keysIn-es.js';
 import '../_baseAssignValue-es.js';
 import '../_baseFlatten-es.js';
@@ -33,6 +33,7 @@ import '../floating-ui.react-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
 import '../AtlantisContext-es.js';
+import '../filterDataAttributes-es.js';
 
 function InputDate$1(inputProps) {
     const formFieldActionsRef = useRef(null);
@@ -77,13 +78,9 @@ function InputDate$1(inputProps) {
         } }));
 }
 
-/**
- * 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) {
+    function handleChange(_newValue, event) {
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
     }
     function handleFocus(event) {
@@ -91,8 +88,8 @@ function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
         setIsFocused(true);
     }
     function handleBlur(event) {
-        setIsFocused(false);
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        setIsFocused(false);
     }
     return {
         handleBlur,
@@ -104,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);
             },
         });
@@ -133,7 +156,7 @@ const InputDateRebuilt = forwardRef((props, forwardedRef) => {
         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.createElement("div", { onClick: onClick },
-            React__default.createElement(InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-invalid": activatorProps.ariaInvalid === "true" ? true : false, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, id: activatorProps.id, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
+            React__default.createElement(InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, 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);