@jobber/components 6.5.2 → 6.5.4-MIKEpull--7b61b13.30

package/dist/FormField-cjs.js

@@ -1,19 +1,17 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
-var reactHookForm = require('react-hook-form');
-var classnames = require('classnames');
 var framerMotion = require('framer-motion');
 var design = require('@jobber/design');
+var classnames = require('classnames');
 var Button = require('./Button-cjs.js');
 var Icon = require('./Icon-cjs.js');
 var Text = require('./Text-cjs.js');
 var useFormFieldFocus = require('./useFormFieldFocus-cjs.js');
 var InputValidation = require('./InputValidation-cjs.js');
 var Spinner = require('./Spinner-cjs.js');
-
-var styles$1 = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","disabled":"Tz9LK9ABKMk-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","hasAction":"OLE9N3Uem4o-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
+var tslib_es6 = require('./tslib.es6-cjs.js');
+var reactHookForm = require('react-hook-form');
 
 var useShowClear$1 = {};
 
@@ -35,10 +33,14 @@ function useShowClear({ clearable, multiline, focused, hasValue, disabled = fals
     }
 }
 
+var styles$1 = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","disabled":"Tz9LK9ABKMk-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","hasAction":"OLE9N3Uem4o-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
+
 function AffixLabel({ label, variation = "prefix", labelRef, }) {
     const affixLabelClass = classnames(styles$1.affixLabel, {
         [styles$1.suffix]: variation === "suffix",
     });
+    if (!label)
+        return null;
     return (React.createElement("div", { ref: labelRef, className: affixLabelClass }, label));
 }
 function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
@@ -48,7 +50,7 @@ function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
     });
     const iconSize = size === "small" ? "small" : "base";
     if (!icon)
-        return React.createElement(React.Fragment, null);
+        return null;
     return (React.createElement("div", { className: affixIconClass }, onClick ? (React.createElement(Button.Button
     /**
      * We can cast the ariaLabel here as a `Suffix`
@@ -62,14 +64,18 @@ function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
         ariaLabel: ariaLabel, icon: icon, onClick: onClick, variation: "subtle", type: "tertiary", size: iconSize })) : (React.createElement(Icon.Icon, { name: icon, size: iconSize, color: "greyBlue" }))));
 }
 
-function FormFieldDescription({ id, description, }) {
+function FormFieldDescription({ id, description, visible = true, }) {
+    if (!visible)
+        return null;
     return (React.createElement("div", { id: id, className: styles$1.description },
         React.createElement(Text.Text, { size: "small", variation: "subdued" }, description)));
 }
 
 var styles = {"clearInput":"YmRTd-KeXv4-","spinning":"B25z9B8I3gs-"};
 
-function ClearAction({ onClick }) {
+function ClearAction({ onClick, visible, }) {
+    if (!visible)
+        return null;
     return (React.createElement("button", { className: styles.clearInput, onClick: onClick, type: "button", "aria-label": "Clear input" },
         React.createElement(Icon.Icon, { name: "remove", size: "small" })));
 }
@@ -92,8 +98,10 @@ function useIsSafari() {
         : false;
 }
 
-// eslint-disable-next-line max-statements
-function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, clearable, onClear, toolbar, toolbarVisibility = "while-editing", wrapperRef, }) {
+/**
+ * Hook for getting the correct styles for the FormField and its children
+ */
+function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, error, max, prefixRef, suffixRef, maxLength, type, disabled, inline, }) {
     const isSafari = useIsSafari();
     const wrapperClasses = classnames(styles$1.wrapper, size && styles$1[size], align && styles$1[align], {
         [styles$1.miniLabel]: (placeholder && value !== "") ||
@@ -115,15 +123,67 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
     const wrapperInlineStyle = {
         ["--formField-maxLength"]: maxLength || max,
     };
-    const prefixRef = React.useRef();
-    const suffixRef = React.useRef();
     const [labelStyle, setLabelStyle] = React.useState({
         paddingLeft: undefined,
         paddingRight: undefined,
     });
     React.useEffect(() => {
-        setLabelStyle(getAffixPaddding);
+        var _a, _b;
+        setLabelStyle(getAffixPaddding({
+            value,
+            type,
+            prefixWidth: ((_a = prefixRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0,
+            suffixWidth: ((_b = suffixRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0,
+        }));
     }, [value]);
+    return {
+        inputStyle: styles$1.input,
+        wrapperClasses,
+        containerClasses,
+        wrapperInlineStyle,
+        labelStyle,
+        setLabelStyle,
+    };
+}
+function getAffixPaddding({ value, type, prefixWidth, suffixWidth, }) {
+    const hasValue = value !== "";
+    const newPadding = {
+        paddingLeft: undefined,
+        paddingRight: undefined,
+    };
+    // Naively assume that if the the type is tel, it is the InputPhoneNumber
+    if (type === "tel")
+        return newPadding;
+    if (prefixWidth && !hasValue) {
+        newPadding.paddingLeft = offset(prefixWidth);
+    }
+    if (suffixWidth && !hasValue) {
+        newPadding.paddingRight = offset(suffixWidth);
+    }
+    function offset(width) {
+        return `calc(${width}px + var(--space-smallest)`;
+    }
+    return newPadding;
+}
+
+function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, clearable, onClear, toolbar, toolbarVisibility = "while-editing", wrapperRef, }) {
+    const prefixRef = React.useRef();
+    const suffixRef = React.useRef();
+    const { wrapperClasses, containerClasses, wrapperInlineStyle, labelStyle } = useFormFieldWrapperStyles({
+        align,
+        max,
+        maxLength,
+        prefixRef,
+        suffixRef,
+        placeholder,
+        value,
+        invalid,
+        error,
+        type,
+        disabled,
+        inline,
+        size,
+    });
     const { focused } = useFormFieldFocus.useFormFieldFocus({ wrapperRef });
     const showClear = useShowClear_2({
         clearable,
@@ -139,50 +199,124 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
     });
     return (React.createElement("div", { className: containerClasses },
         React.createElement("div", { className: wrapperClasses, style: wrapperInlineStyle, "data-testid": "Form-Field-Wrapper", ref: wrapperRef },
-            React.createElement("div", { className: styles$1.horizontalWrapper },
-                (prefix === null || prefix === void 0 ? void 0 : prefix.icon) && React.createElement(AffixIcon, Object.assign({}, prefix, { size: size })),
-                React.createElement("div", { className: styles$1.inputWrapper },
-                    placeholder && (React.createElement("label", { className: styles$1.label, htmlFor: identifier, style: (prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) || (suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current)
+            React.createElement(FormFieldInputHorizontalWrapper, null,
+                React.createElement(AffixIcon, Object.assign({}, prefix, { size: size })),
+                React.createElement(FormFieldInputWrapperStyles, null,
+                    React.createElement(FormFieldLabel, { placeholder: placeholder, identifier: identifier, style: (prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) || (suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current)
                             ? labelStyle
-                            : undefined }, placeholder)),
-                    (prefix === null || prefix === void 0 ? void 0 : prefix.label) && React.createElement(AffixLabel, Object.assign({}, prefix, { labelRef: prefixRef })),
-                    React.createElement("div", { className: styles$1.childrenWrapper, tabIndex: -1 }, children),
-                    (suffix === null || suffix === void 0 ? void 0 : suffix.label) && (React.createElement(AffixLabel, Object.assign({}, suffix, { labelRef: suffixRef, variation: "suffix" })))),
-                showClear && React.createElement(ClearAction, { onClick: onClear }),
-                (suffix === null || suffix === void 0 ? void 0 : suffix.icon) && (React.createElement(AffixIcon, Object.assign({}, suffix, { variation: "suffix", size: size })))),
-            React.createElement(framerMotion.AnimatePresence, { initial: toolbarVisibility === "always" ? false : true }, isToolbarVisible && (React.createElement(framerMotion.motion.div, { key: "toolbar", initial: toolbarAnimationEnd, animate: toolbarAnimationStart, exit: toolbarAnimationEnd, transition: {
-                    duration: design.tokens["timing-base"] / 1000,
-                    ease: "easeInOut",
-                }, tabIndex: -1 },
-                React.createElement("div", { className: styles$1.toolbar, "data-testid": "ATL-InputText-Toolbar" }, toolbar))))),
-        description && !inline && (React.createElement(FormFieldDescription, { id: descriptionIdentifier, description: description })),
-        error && !inline && React.createElement(InputValidation.InputValidation, { message: error })));
-    function getAffixPaddding() {
-        const hasValue = value !== "";
-        const newPadding = {
-            paddingLeft: undefined,
-            paddingRight: undefined,
-        };
-        // Naively assume that if the the type is tel, it is the InputPhoneNumber
-        if (type === "tel")
-            return newPadding;
-        if ((prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) && !hasValue) {
-            const { offsetWidth } = prefixRef.current;
-            newPadding.paddingLeft = offset(offsetWidth);
-        }
-        if ((suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current) && !hasValue) {
-            const { offsetWidth } = suffixRef.current;
-            newPadding.paddingRight = offset(offsetWidth);
+                            : undefined }),
+                    React.createElement(AffixLabel, Object.assign({}, prefix, { labelRef: prefixRef })),
+                    React.createElement(FormFieldWrapperMain, null, children),
+                    React.createElement(AffixLabel, Object.assign({}, suffix, { labelRef: suffixRef, variation: "suffix" }))),
+                React.createElement(ClearAction, { onClick: onClear, visible: showClear }),
+                React.createElement(AffixIcon, Object.assign({}, suffix, { variation: "suffix", size: size }))),
+            React.createElement(FormFieldWrapperToolbar, { toolbarVisibility: toolbarVisibility, isToolbarVisible: isToolbarVisible, toolbarAnimationEnd: toolbarAnimationEnd, toolbarAnimationStart: toolbarAnimationStart, toolbar: toolbar })),
+        React.createElement(FormFieldDescription, { visible: !!description && !inline, id: descriptionIdentifier, description: description }),
+        React.createElement(InputValidation.InputValidation, { message: error, visible: !!error && !inline })));
+}
+function FormFieldInputHorizontalWrapper({ children, }) {
+    return React.createElement("div", { className: styles$1.horizontalWrapper }, children);
+}
+function FormFieldInputWrapperStyles({ children, }) {
+    return React.createElement("div", { className: styles$1.inputWrapper }, children);
+}
+function FormFieldWrapperMain({ children, tabIndex = -1, }) {
+    return (React.createElement("div", { className: styles$1.childrenWrapper, tabIndex: tabIndex }, children));
+}
+function FormFieldLabel({ placeholder, identifier, style, }) {
+    if (!placeholder)
+        return null;
+    return (React.createElement("label", { className: styles$1.label, htmlFor: identifier, style: style }, placeholder));
+}
+function FormFieldWrapperToolbar({ toolbar, isToolbarVisible, toolbarAnimationEnd, toolbarAnimationStart, toolbarVisibility, }) {
+    return (React.createElement(framerMotion.AnimatePresence, { initial: toolbarVisibility === "always" ? false : true }, isToolbarVisible && (React.createElement(framerMotion.motion.div, { key: "toolbar", initial: toolbarAnimationEnd, animate: toolbarAnimationStart, exit: toolbarAnimationEnd, transition: {
+            duration: design.tokens["timing-base"] / 1000,
+            ease: "easeInOut",
+        }, tabIndex: -1 },
+        React.createElement("div", { className: styles$1.toolbar, "data-testid": "ATL-InputText-Toolbar" }, toolbar)))));
+}
+
+function FormFieldPostFix({ variation, visible = true, }) {
+    if (!visible)
+        return null;
+    return (React.createElement("span", { className: styles$1.postfix }, variation === "select" ? (React.createElement(Icon.Icon, { name: "arrowDown" })) : (React.createElement(Spinner.Spinner, { size: "small" }))));
+}
+
+/**
+ * Combines the actions from the props of the FormField with the actions from react-hook-form. This is used to
+ * manage the form state of a field through react-hook-form while providing support for additional callbacks
+ */
+function useAtlantisFormFieldActions({ name, onChange, inputRef, onControllerChange, onControllerBlur, onEnter, readonly, type, setValue, onFocus, onBlur, onValidation, }) {
+    function handleClear() {
+        var _a;
+        handleBlur();
+        setValue(name, "", { shouldValidate: true });
+        onChange && onChange("");
+        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    function handleChange(event) {
+        let newValue;
+        newValue = event.currentTarget.value;
+        if (type === "number" && newValue.length > 0) {
+            newValue = parseFloat(newValue);
         }
-        function offset(width) {
-            return `calc(${width}px + var(--space-smallest)`;
+        onChange && onChange(newValue, event);
+        onControllerChange(event);
+    }
+    function handleKeyDown(event) {
+        if (!onEnter)
+            return;
+        if (event.key !== "Enter")
+            return;
+        if (event.shiftKey || event.ctrlKey)
+            return;
+        event.preventDefault();
+        onEnter && onEnter(event);
+    }
+    function handleFocus(event) {
+        const target = event.currentTarget;
+        if (target.select) {
+            setTimeout(() => readonly && target.select());
         }
-        return newPadding;
+        onFocus && onFocus();
+    }
+    function handleBlur() {
+        onBlur && onBlur();
+        onControllerBlur();
+    }
+    function handleValidation(message) {
+        onValidation && onValidation(message);
     }
+    return {
+        handleClear,
+        handleChange,
+        handleKeyDown,
+        handleFocus,
+        handleBlur,
+        handleValidation,
+    };
 }
 
-function FormFieldPostFix({ variation }) {
-    return (React.createElement("span", { className: styles$1.postfix }, variation === "select" ? (React.createElement(Icon.Icon, { name: "arrowDown" })) : (React.createElement(Spinner.Spinner, { size: "small" }))));
+/**
+ * Provides the props for the html fields rendered by the FormField component
+ */
+function useAtlantisFormField({ id, nameProp, name, useControllerField: useControllerField, description, disabled, readonly, keyboard, autofocus, handleChange, handleBlur, handleFocus, inline, validations, handleKeyDown, handleValidation, errorMessage, }) {
+    const descriptionIdentifier = `descriptionUUID--${id}`;
+    const fieldProps = Object.assign(Object.assign(Object.assign({}, useControllerField), { id, className: styles$1.input, 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 });
+    React.useEffect(() => handleValidation(errorMessage), [errorMessage]);
+    return { textFieldProps, fieldProps, descriptionIdentifier };
+}
+
+function useAtlantisFormFieldName({ id, nameProp, }) {
+    /**
+     * Generate a name if one is not supplied, this is the name
+     * that will be used for react-hook-form and not neccessarily
+     * attached to the DOM
+     */
+    const name = nameProp ? nameProp : `generatedName--${id}`;
+    return { name };
 }
 
 /**
@@ -202,50 +336,93 @@ function mergeRefs(refs) {
     };
 }
 
-function FormField(props) {
-    // Warning: do not move useId into FormFieldInternal. This must be here to avoid
-    // a problem where useId isn't stable across multiple StrictMode renders.
-    // https://github.com/facebook/react/issues/27103
-    const id = React.useId();
-    return React.createElement(FormFieldInternal, Object.assign({}, props, { id: id }));
-}
-// eslint-disable-next-line max-statements
-function FormFieldInternal(props) {
+/**
+ * Hook used to manage the form state of a field through react-hook-form
+ */
+function useAtlantisReactForm({ actionsRef, name, defaultValue, value, validations, inputRef, }) {
     var _a;
-    const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, id, inputRef, inline, keyboard, max, maxLength, min, name: nameProp, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, onKeyUp, clearable = "never", autofocus, } = props;
     const formContext = reactHookForm.useFormContext();
     // If there isn't a Form Context being provided, get a form for this field.
     const { control, setValue, watch } = formContext !== null && formContext !== void 0 ? formContext : reactHookForm.useForm({ mode: "onTouched" });
-    const descriptionIdentifier = `descriptionUUID--${id}`;
-    /**
-     * Generate a name if one is not supplied, this is the name
-     * that will be used for react-hook-form and not neccessarily
-     * attached to the DOM
-     */
-    const name = nameProp ? nameProp : `generatedName--${id}`;
-    React.useEffect(() => {
-        if (value != undefined) {
-            setValue(name, value);
-        }
-    }, [value, watch(name)]);
     React.useImperativeHandle(actionsRef, () => ({
         setValue: newValue => {
             setValue(name, newValue, { shouldValidate: true });
         },
     }));
-    const _b = reactHookForm.useController({
+    const { field, fieldState: { error }, } = reactHookForm.useController({
         name,
         control,
         rules: validations,
         defaultValue: (_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : "",
-    }), _c = _b.field, { onChange: onControllerChange, onBlur: onControllerBlur, ref: fieldRef } = _c, rest = tslib_es6.__rest(_c, ["onChange", "onBlur", "ref"]), { fieldState: { error } } = _b;
-    const errorMessage = (error === null || error === void 0 ? void 0 : error.message) || "";
-    React.useEffect(() => handleValidation(errorMessage), [errorMessage]);
-    const fieldProps = Object.assign(Object.assign(Object.assign({}, rest), { id, className: styles$1.input, 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 });
+    });
+    const { onChange, onBlur, ref: fieldRef } = field, useControllerField = tslib_es6.__rest(field, ["onChange", "onBlur", "ref"]);
+    React.useEffect(() => {
+        if (value != undefined) {
+            setValue(name, value);
+        }
+    }, [value, watch(name)]);
     const inputRefs = mergeRefs([inputRef, fieldRef]);
-    return (React.createElement(FormFieldWrapper, Object.assign({}, props, { value: rest.value, error: errorMessage, identifier: id, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear }), renderField()));
+    return {
+        inputRefs,
+        useControllerField,
+        setValue,
+        errorMessage: (error === null || error === void 0 ? void 0 : error.message) || "",
+        onControllerChange: onChange,
+        onControllerBlur: onBlur,
+    };
+}
+
+function FormField(props) {
+    // Warning: do not move useId into FormFieldInternal. This must be here to avoid
+    // a problem where useId isn't stable across multiple StrictMode renders.
+    // https://github.com/facebook/react/issues/27103
+    const id = React.useId();
+    return React.createElement(FormFieldInternal, Object.assign({}, props, { id: id }));
+}
+function FormFieldInternal(props) {
+    const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, id, inputRef, inline, keyboard, max, maxLength, min, name: nameProp, 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, } = useAtlantisReactForm({
+        actionsRef,
+        name,
+        defaultValue,
+        value,
+        validations,
+        inputRef,
+    });
+    const { handleValidation, handleBlur, handleChange, handleClear, handleFocus, handleKeyDown, } = useAtlantisFormFieldActions({
+        onChange,
+        onEnter,
+        readonly,
+        type,
+        onFocus,
+        setValue,
+        onBlur,
+        onValidation,
+        onControllerBlur,
+        onControllerChange,
+        name,
+    });
+    const { textFieldProps, fieldProps, descriptionIdentifier } = useAtlantisFormField({
+        id,
+        useControllerField,
+        name,
+        nameProp,
+        description,
+        validations: !!validations,
+        disabled,
+        readonly,
+        keyboard,
+        autofocus,
+        handleChange,
+        handleBlur,
+        handleFocus,
+        inline,
+        errorMessage,
+        handleValidation,
+        handleKeyDown,
+    });
+    return (React.createElement(FormFieldWrapper, Object.assign({}, props, { value: useControllerField.value, error: errorMessage, identifier: id, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear }), renderField()));
     function renderField() {
         switch (type) {
             case "select":
@@ -261,46 +438,6 @@ function FormFieldInternal(props) {
                     children));
         }
     }
-    function handleClear() {
-        var _a;
-        handleBlur();
-        setValue(name, "", { shouldValidate: true });
-        onChange && onChange("");
-        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    function handleChange(event) {
-        let newValue;
-        newValue = event.currentTarget.value;
-        if (type === "number" && newValue.length > 0) {
-            newValue = parseFloat(newValue);
-        }
-        onChange && onChange(newValue, event);
-        onControllerChange(event);
-    }
-    function handleKeyDown(event) {
-        if (!onEnter)
-            return;
-        if (event.key !== "Enter")
-            return;
-        if (event.shiftKey || event.ctrlKey)
-            return;
-        event.preventDefault();
-        onEnter && onEnter(event);
-    }
-    function handleFocus(event) {
-        const target = event.currentTarget;
-        if (target.select) {
-            setTimeout(() => readonly && target.select());
-        }
-        onFocus && onFocus();
-    }
-    function handleBlur() {
-        onBlur && onBlur();
-        onControllerBlur();
-    }
-    function handleValidation(message) {
-        onValidation && onValidation(message);
-    }
 }
 function setAutocomplete(autocompleteSetting) {
     if (autocompleteSetting === true) {
@@ -313,3 +450,9 @@ function setAutocomplete(autocompleteSetting) {
 }
 
 exports.FormField = FormField;
+exports.FormFieldWrapper = FormFieldWrapper;
+exports.useAtlantisFormField = useAtlantisFormField;
+exports.useAtlantisFormFieldActions = useAtlantisFormFieldActions;
+exports.useAtlantisFormFieldName = useAtlantisFormFieldName;
+exports.useAtlantisReactForm = useAtlantisReactForm;
+exports.useFormFieldWrapperStyles = useFormFieldWrapperStyles;