@react-native-ama/forms 1.2.0 → 2.0.0-beta.0

package/dist/components/Form.d.ts

@@ -1,13 +1,16 @@
 import * as React from 'react';
 export type FormProps = React.PropsWithChildren<{
     onSubmit: () => boolean | Promise<boolean>;
-    ref?: React.RefObject<FormActions>;
 }>;
 export type FormActions = {
     focusFirstInvalidField: () => void;
     focusFieldAt: (fieldNumber: number) => void;
 };
-export declare const Form: React.ForwardRefExoticComponent<Omit<FormProps, "ref"> & React.RefAttributes<FormActions>>;
+export declare const Form: React.ForwardRefExoticComponent<{
+    onSubmit: () => boolean | Promise<boolean>;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<FormActions>>;
 export type FormContextValue = {
     refs?: FormRef[];
     submitForm: () => Promise<void>;

package/dist/components/Form.js

@@ -33,14 +33,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useForm = exports.FormContext = exports.Form = void 0;
-const core_1 = require("@react-native-ama/core");
-const internal_1 = require("@react-native-ama/internal");
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
+const useFocus_1 = require("../hooks/useFocus");
 exports.Form = React.forwardRef(({ children, onSubmit }, ref) => {
     const refs = React.useRef([]);
-    const { setFocus } = (0, core_1.useFocus)();
-    const checks = __DEV__ ? core_1.useChecks === null || core_1.useChecks === void 0 ? void 0 : (0, core_1.useChecks)() : undefined;
+    const { setFocus } = (0, useFocus_1.useFocus)();
     const focusField = React.useCallback((nextField) => {
         var _a, _b, _c;
         /**
@@ -54,58 +52,40 @@ exports.Form = React.forwardRef(({ children, onSubmit }, ref) => {
         ((_c = nextRefElement === null || nextRefElement === void 0 ? void 0 : nextRefElement.current) === null || _c === void 0 ? void 0 : _c.focus) &&
             (nextField === null || nextField === void 0 ? void 0 : nextField.hasFocusCallback) &&
             (nextField === null || nextField === void 0 ? void 0 : nextField.isEditable);
-        __DEV__ &&
-            nextRefElement == null &&
-            (checks === null || checks === void 0 ? void 0 : checks.logResult('nextRefElement', {
-                message: 'No next field found. Make sure you wrapped your form inside the <Form /> component',
-                rule: 'NO_UNDEFINED',
-            }));
         if (callFocus) {
             /**
              * On some apps, if we call focus immediately and the field is already focused we lose the focus.
              * Same happens if we do not call `focus` if the field is already focused.
              */
-            const timeoutValue = (0, internal_1.isFocused)(nextRefElement.current) ? 50 : 0;
+            const timeoutValue = isFocused(nextRefElement.current) ? 50 : 0;
             setTimeout(() => {
                 var _a;
                 (_a = nextRefElement === null || nextRefElement === void 0 ? void 0 : nextRefElement.current) === null || _a === void 0 ? void 0 : _a.focus();
-                __DEV__ &&
-                    nextRefElement &&
-                    (checks === null || checks === void 0 ? void 0 : checks.checkFocusTrap({
-                        ref: nextRefElement,
-                        shouldHaveFocus: true,
-                    }));
             }, timeoutValue);
         }
         else if (nextRefElement === null || nextRefElement === void 0 ? void 0 : nextRefElement.current) {
             setFocus(nextRefElement === null || nextRefElement === void 0 ? void 0 : nextRefElement.current);
         }
-    }, [checks, setFocus]);
-    const focusFieldAt = React.useCallback((position) => {
+    }, [setFocus]);
+    const focusFieldAt = (position) => {
         react_native_1.InteractionManager.runAfterInteractions(() => {
             setTimeout(() => {
                 const fieldWithError = refs.current[position];
                 focusField(fieldWithError);
             }, 0);
         });
-    }, [focusField]);
-    const focusFirstInvalidField = React.useCallback(() => {
-        const fieldWithError = (refs.current || []).findIndex(fieldRef => fieldRef.hasValidation && fieldRef.hasError);
-        __DEV__ &&
-            fieldWithError == null &&
-            (checks === null || checks === void 0 ? void 0 : checks.logResult('Form', {
-                message: 'The form validation has failed, but no component with error was found',
-                rule: 'NO_UNDEFINED',
-            }));
+    };
+    const focusFirstInvalidField = () => {
+        const fieldWithError = (refs.current || []).findIndex((fieldRef) => fieldRef.hasValidation && fieldRef.hasError);
         focusFieldAt(fieldWithError);
-    }, [focusFieldAt, checks]);
-    const submitForm = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    };
+    const submitForm = () => __awaiter(void 0, void 0, void 0, function* () {
         const isValid = yield onSubmit();
         if (isValid) {
             return;
         }
         focusFirstInvalidField();
-    }), [focusFirstInvalidField, onSubmit]);
+    });
     React.useImperativeHandle(ref, () => ({
         focusFirstInvalidField,
         focusFieldAt,
@@ -133,3 +113,6 @@ const useForm = ({ suppressError } = { suppressError: false }) => {
     return context;
 };
 exports.useForm = useForm;
+const isFocused = (input) => {
+    return input === null || input === void 0 ? void 0 : input.isFocused();
+};

package/dist/components/FormSubmit.d.ts

@@ -1,10 +1,8 @@
 import React from 'react';
-import { PressableProps } from 'react-native';
-export type FormSubmitProps = React.PropsWithChildren<{
-    accessibilityLabel: string;
-    accessibilityHint?: string;
-    busy: boolean;
-    style?: PressableProps['style'];
-    testID?: string;
-}>;
-export declare const FormSubmit: (props: FormSubmitProps) => React.JSX.Element;
+export type FormSubmitRenderProps = {
+    onPress: () => Promise<void>;
+};
+export type FormSubmitProps = {
+    children: (props: FormSubmitRenderProps) => React.ReactNode;
+};
+export declare const FormSubmit: ({ children }: FormSubmitProps) => React.JSX.Element;

package/dist/components/FormSubmit.js

@@ -4,22 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormSubmit = void 0;
-const core_1 = require("@react-native-ama/core");
-const core_2 = require("@react-native-ama/core");
 const react_1 = __importDefault(require("react"));
-const react_native_1 = require("react-native");
 const Form_1 = require("../components/Form");
-const FormSubmit = (props) => {
+const FormSubmit = ({ children }) => {
     const { submitForm } = (0, Form_1.useForm)();
-    const { isScreenReaderEnabled } = (0, core_1.useAMAContext)();
-    return (<react_native_1.Pressable accessibilityRole="button" pointerEvents="box-only" // prevent event propagation to children eg Pressable
-     {...props} onPress={submitForm}>
-      {isScreenReaderEnabled ? (<FormSubmitForScreenReader children={props.children}/>) : (props.children)}
-    </react_native_1.Pressable>);
+    return <>{children({ onPress: submitForm })}</>;
 };
 exports.FormSubmit = FormSubmit;
-const FormSubmitForScreenReader = ({ children, }) => {
-    return (<core_2.HideChildrenFromAccessibilityTree>
-      {children}
-    </core_2.HideChildrenFromAccessibilityTree>);
-};

package/dist/components/TextInput.d.ts

@@ -1,13 +1,45 @@
 import * as React from 'react';
 import { TextInput as RNTextInput, TextInputProps as RNTextInputProps } from 'react-native';
 import { UseTextInput } from '../hooks/useTextInput';
-export type TextInputProps = RNTextInputProps & Omit<UseTextInput, 'required' | 'accessibilityLabel'> & {
-    labelComponent: JSX.Element;
+export declare const a11yProps: Pick<TextInputProps, 'accessibilityElementsHidden' | 'importantForAccessibility'>;
+type A11yProps = typeof a11yProps;
+type TextInputBaseProps = Omit<RNTextInputProps, 'accessibilityLabel' | 'aria-label'> & Omit<UseTextInput, 'required' | 'accessibilityLabel'> & {
     labelPosition?: 'beforeInput' | 'afterInput';
     nextFormField?: React.RefObject<RNTextInput>;
     id?: string;
     nextFieldId?: string;
-    errorComponent?: JSX.Element;
     errorPosition?: 'belowLabel' | 'afterInput';
+    renderLabel?: (a11yProps: A11yProps) => React.ReactNode;
+    renderError?: (a11yProps: A11yProps) => React.ReactNode;
 };
-export declare const TextInput: React.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React.RefAttributes<RNTextInput>>;
+export type TextInputProps = (TextInputBaseProps & {
+    accessibilityLabel: string;
+    'aria-label'?: never;
+}) | (TextInputBaseProps & {
+    'aria-label': string;
+    accessibilityLabel?: never;
+});
+export declare const TextInput: React.ForwardRefExoticComponent<(Omit<Omit<RNTextInputProps, "accessibilityLabel" | "aria-label"> & Omit<UseTextInput, "accessibilityLabel" | "required"> & {
+    labelPosition?: "beforeInput" | "afterInput" | undefined;
+    nextFormField?: React.RefObject<RNTextInput> | undefined;
+    id?: string | undefined;
+    nextFieldId?: string | undefined;
+    errorPosition?: "afterInput" | "belowLabel" | undefined;
+    renderLabel?: ((a11yProps: A11yProps) => React.ReactNode) | undefined;
+    renderError?: ((a11yProps: A11yProps) => React.ReactNode) | undefined;
+} & {
+    accessibilityLabel: string;
+    'aria-label'?: undefined;
+}, "ref"> | Omit<Omit<RNTextInputProps, "accessibilityLabel" | "aria-label"> & Omit<UseTextInput, "accessibilityLabel" | "required"> & {
+    labelPosition?: "beforeInput" | "afterInput" | undefined;
+    nextFormField?: React.RefObject<RNTextInput> | undefined;
+    id?: string | undefined;
+    nextFieldId?: string | undefined;
+    errorPosition?: "afterInput" | "belowLabel" | undefined;
+    renderLabel?: ((a11yProps: A11yProps) => React.ReactNode) | undefined;
+    renderError?: ((a11yProps: A11yProps) => React.ReactNode) | undefined;
+} & {
+    'aria-label': string;
+    accessibilityLabel?: undefined;
+}, "ref">) & React.RefAttributes<RNTextInput>>;
+export {};

package/dist/components/TextInput.js

@@ -34,88 +34,35 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextInput = void 0;
-const core_1 = require("@react-native-ama/core");
-const core_2 = require("@react-native-ama/core");
-const internal_1 = require("@react-native-ama/internal");
-const internal_2 = require("@react-native-ama/internal");
+exports.TextInput = exports.a11yProps = void 0;
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const useTextInput_1 = require("../hooks/useTextInput");
+exports.a11yProps = {
+    importantForAccessibility: 'no-hide-descendants',
+    accessibilityElementsHidden: true,
+};
+const labelA11yProps = {
+    importantForAccessibility: 'no-hide-descendants',
+    accessibilityElementsHidden: true,
+};
 exports.TextInput = React.forwardRef((_a, forwardedRef) => {
     var _b;
-    var { labelComponent, labelPosition = 'beforeInput', nextFormField, id, nextFieldId, accessibilityHint, hasError, errorComponent, errorPosition = 'afterInput', hasValidation, errorMessage } = _a, rest = __rest(_a, ["labelComponent", "labelPosition", "nextFormField", "id", "nextFieldId", "accessibilityHint", "hasError", "errorComponent", "errorPosition", "hasValidation", "errorMessage"]);
+    var { nextFormField, id, nextFieldId, accessibilityHint, hasError, hasValidation, errorMessage, accessibilityLabel, labelPosition = 'beforeInput', errorPosition = 'afterInput', renderLabel, renderError } = _a, rest = __rest(_a, ["nextFormField", "id", "nextFieldId", "accessibilityHint", "hasError", "hasValidation", "errorMessage", "accessibilityLabel", "labelPosition", "errorPosition", "renderLabel", "renderError"]);
     const inputRef = React.useRef(null);
     React.useImperativeHandle(forwardedRef, () => inputRef.current);
-    const showLabelBeforeInput = labelPosition === 'beforeInput';
-    const accessibilityLabel = React.useMemo(() => (0, internal_2.maybeGenerateStringFromElement)(labelComponent, rest.accessibilityLabel), [labelComponent, rest.accessibilityLabel]);
     const textInputProps = (0, useTextInput_1.useTextInput)(Object.assign(Object.assign({}, rest), { ref: inputRef, id,
         nextFieldId, nextFormFieldRef: nextFormField, hasError,
         hasValidation,
-        errorMessage, required: false, accessibilityLabel }));
-    const checks = __DEV__ ? core_2.useChecks === null || core_2.useChecks === void 0 ? void 0 : (0, core_2.useChecks)() : undefined;
-    __DEV__ &&
-        (checks === null || checks === void 0 ? void 0 : checks.noUndefinedProperty({
-            properties: { labelComponent },
-            property: 'labelComponent',
-            rule: 'NO_FORM_LABEL',
-        }));
-    __DEV__ &&
-        (checks === null || checks === void 0 ? void 0 : checks.noUndefinedProperty({
-            properties: { accessibilityLabel },
-            property: 'accessibilityLabel',
-            rule: 'NO_ACCESSIBILITY_LABEL',
-        }));
-    __DEV__ &&
-        (accessibilityLabel === null || accessibilityLabel === void 0 ? void 0 : accessibilityLabel.trim()) === '' &&
-        (checks === null || checks === void 0 ? void 0 : checks.logResult('NO_ACCESSIBILITY_LABEL', {
-            rule: 'NO_ACCESSIBILITY_LABEL',
-            message: 'No accessibility label provided',
-        }));
-    __DEV__ &&
-        hasValidation &&
-        (checks === null || checks === void 0 ? void 0 : checks.noUndefinedProperty({
-            // @ts-ignore
-            properties: { errorComponent },
-            property: 'errorComponent',
-            rule: 'NO_FORM_ERROR',
-        }));
-    const style = __DEV__ && // @ts-ignore
-        (internal_1.applyStyle === null || internal_1.applyStyle === void 0 ? void 0 : (0, internal_1.applyStyle)({
-            // @ts-ignore
-            style: (textInputProps === null || textInputProps === void 0 ? void 0 : textInputProps.style) || {},
-            debugStyle: checks === null || checks === void 0 ? void 0 : checks.debugStyle,
-        }));
-    const accessibilityHiddenLabel = React.useMemo(() => (<core_1.HideChildrenFromAccessibilityTree>
-          {labelComponent}
-        </core_1.HideChildrenFromAccessibilityTree>), [labelComponent]);
-    const errorText = React.useMemo(() => {
-        return hasValidation && hasError
-            ? (0, internal_2.maybeGenerateStringFromElement)(errorComponent, errorMessage)
-            : '';
-    }, [hasValidation, hasError, errorComponent, errorMessage]);
-    const renderError = () => {
-        return (<core_1.HideChildrenFromAccessibilityTree>
-          {errorComponent}
-        </core_1.HideChildrenFromAccessibilityTree>);
-    };
-    const fullAccessibilityHint = (_b = [accessibilityHint || '', errorText || '']
-        .filter(item => item.length > 0)) === null || _b === void 0 ? void 0 : _b.join(', ');
-    return __DEV__ ? (<>
-        {showLabelBeforeInput ? accessibilityHiddenLabel : null}
-        {hasError && errorPosition === 'belowLabel' ? renderError() : null}
-        <react_native_1.TextInput 
-    // @ts-ignore
-    ref={inputRef} {...rest} {...textInputProps} style={style} accessibilityLabel={accessibilityLabel} accessibilityHint={fullAccessibilityHint}/>
-        {showLabelBeforeInput ? null : accessibilityHiddenLabel}
-        {hasError && errorPosition === 'afterInput' ? renderError() : null}
-      </>) : (<>
-        {showLabelBeforeInput ? accessibilityHiddenLabel : null}
-        {hasError && errorPosition === 'belowLabel' ? renderError() : null}
-        <react_native_1.TextInput 
-    // @ts-ignore
-    ref={inputRef} {...rest} {...textInputProps} accessibilityLabel={accessibilityLabel} accessibilityHint={fullAccessibilityHint}/>
-        {showLabelBeforeInput ? null : accessibilityHiddenLabel}
-        {hasError && errorPosition === 'afterInput' ? renderError() : null}
+        errorMessage, required: false, accessibilityLabel: accessibilityLabel || (rest === null || rest === void 0 ? void 0 : rest['aria-label']) }));
+    const fullAccessibilityHint = (_b = [accessibilityHint, errorMessage]
+        .filter(Boolean)) === null || _b === void 0 ? void 0 : _b.join(', ');
+    const showError = hasError && renderError;
+    return (<>
+        {labelPosition === 'beforeInput' ? renderLabel === null || renderLabel === void 0 ? void 0 : renderLabel(labelA11yProps) : null}
+        {errorPosition === 'belowLabel' && showError ? renderError === null || renderError === void 0 ? void 0 : renderError(labelA11yProps) : null}
+        <react_native_1.TextInput ref={inputRef} {...rest} {...textInputProps} accessibilityLabel={accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : rest['aria-label']} accessibilityHint={fullAccessibilityHint}/>
+        {labelPosition === 'afterInput' ? renderLabel === null || renderLabel === void 0 ? void 0 : renderLabel(labelA11yProps) : null}
+        {errorPosition === 'afterInput' && showError ? renderError === null || renderError === void 0 ? void 0 : renderError(labelA11yProps) : null}
       </>);
 });

package/dist/hooks/useFocus.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare const useFocus: (refComponent?: React.RefObject<any>) => {
+    setFocus: (component: null | number | React.Component<any, any> | React.ComponentClass<any>) => void;
+};

package/dist/hooks/useFocus.js

@@ -0,0 +1,69 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocus = void 0;
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const useFocus = (refComponent) => {
+    const setFocus = React.useCallback((component) => {
+        if (!component) {
+            return;
+        }
+        react_native_1.InteractionManager.runAfterInteractions(() => {
+            try {
+                const elementId = (0, react_native_1.findNodeHandle)(component);
+                if (elementId) {
+                    react_native_1.AccessibilityInfo.setAccessibilityFocus(elementId);
+                    setTimeout(() => {
+                        react_native_1.AccessibilityInfo.setAccessibilityFocus(elementId); //ISSUE: https://github.com/facebook/react-native/issues/30097
+                    }, 100);
+                }
+                else if (__DEV__) {
+                    console.warn(
+                    // @ts-ignore
+                    `${SHELL_COLORS.BG_RED}AMA.${SHELL_COLORS.RESET} ${SHELL_COLORS.BLUE}useFocus${SHELL_COLORS.RESET}: ${SHELL_COLORS.YELLOW}Ref element not found${SHELL_COLORS.RESET}`);
+                }
+            }
+            catch (error) {
+                if (__DEV__) {
+                    console.warn(
+                    // @ts-ignore
+                    `${SHELL_COLORS.BG_RED}AMA.${SHELL_COLORS.RESET} ${SHELL_COLORS.BLUE}useFocus${SHELL_COLORS.RESET}: ${SHELL_COLORS.YELLOW}Error finding node handle${SHELL_COLORS.RESET} \n`, error);
+                }
+            }
+        });
+    }, []);
+    React.useEffect(() => {
+        if (!refComponent) {
+            return;
+        }
+        setFocus(refComponent.current);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [refComponent]);
+    return {
+        setFocus,
+    };
+};
+exports.useFocus = useFocus;

package/dist/hooks/useFormField.d.ts

@@ -14,14 +14,8 @@ export type UseFormField = {
     errorMessage?: string;
     suppressError?: boolean;
 };
-export declare const useFormField: ({ ref, hasFocusCallback, id, nextFieldId, nextFormFieldRef, hasValidation, hasError, accessibilityHint, errorMessage, editable, suppressError, style, }: UseFormField) => {
-    focusNextFormField: () => void;
-    isLastField: () => boolean;
-    style: any;
-    accessibilityHint: string;
-} | {
+export declare const useFormField: ({ ref, hasFocusCallback, id, nextFieldId, nextFormFieldRef, hasValidation, hasError, accessibilityHint, errorMessage, editable, suppressError, }: UseFormField) => {
     focusNextFormField: () => void;
     accessibilityHint: string;
     isLastField: () => boolean;
-    style?: undefined;
 };

package/dist/hooks/useFormField.js

@@ -4,36 +4,50 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFormField = void 0;
-const core_1 = require("@react-native-ama/core");
-const internal_1 = require("@react-native-ama/internal");
 const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
 const Form_1 = require("../components/Form");
-const useFormField = ({ ref, hasFocusCallback, id, nextFieldId, nextFormFieldRef, hasValidation, hasError, accessibilityHint, errorMessage, editable = true, suppressError, style = {}, }) => {
+const checkFocusTrap_1 = require("../utils/checkFocusTrap");
+let _useAMAContext = null;
+try {
+    _useAMAContext = require('@react-native-ama/core').useAMAContext;
+}
+catch (_a) {
+    // core is an optional peer — fall back to null
+}
+const getTrackError = () => {
+    var _a, _b;
+    try {
+        return (_b = (_a = _useAMAContext === null || _useAMAContext === void 0 ? void 0 : _useAMAContext()) === null || _a === void 0 ? void 0 : _a.trackError) !== null && _b !== void 0 ? _b : null;
+    }
+    catch (_c) {
+        return null;
+    }
+};
+const useFormField = ({ ref, hasFocusCallback, id, nextFieldId, nextFormFieldRef, hasValidation, hasError, accessibilityHint, errorMessage, editable = true, suppressError, }) => {
     const { refs, submitForm, focusField } = (0, Form_1.useForm)({ suppressError });
     const fieldRef = react_1.default.useRef(ref);
-    const checks = __DEV__ ? core_1.useChecks === null || core_1.useChecks === void 0 ? void 0 : (0, core_1.useChecks)() : undefined;
+    const trackError = __DEV__ ? getTrackError() : null;
     const getMyIndex = () => {
         const allRefs = refs;
-        const item = allRefs.find(r => r.ref === fieldRef);
+        const item = allRefs.find((r) => r.ref === fieldRef);
         return item ? allRefs.indexOf(item) : -1;
     };
     const focusNextFormField = () => {
-        var _a;
         const isLastItem = isLastField();
         if (isLastItem) {
             react_native_1.Keyboard.dismiss();
             submitForm();
             return;
         }
-        const currentField = refs[getMyIndex()];
-        focusField === null || focusField === void 0 ? void 0 : focusField(getNextFieldRef());
         __DEV__ &&
-            (currentField === null || currentField === void 0 ? void 0 : currentField.hasFocusCallback) &&
-            (checks === null || checks === void 0 ? void 0 : checks.checkFocusTrap({
-                ref: (_a = currentField === null || currentField === void 0 ? void 0 : currentField.ref) === null || _a === void 0 ? void 0 : _a.current,
+            hasFocusCallback &&
+            (checkFocusTrap_1.checkFocusTrap === null || checkFocusTrap_1.checkFocusTrap === void 0 ? void 0 : (0, checkFocusTrap_1.checkFocusTrap)({
+                ref: fieldRef.current,
                 shouldHaveFocus: false,
+                trackError: trackError !== null && trackError !== void 0 ? trackError : null,
             }));
+        focusField === null || focusField === void 0 ? void 0 : focusField(getNextFieldRef());
     };
     const getNextFieldRef = () => {
         const allRefs = refs || [];
@@ -43,7 +57,7 @@ const useFormField = ({ ref, hasFocusCallback, id, nextFieldId, nextFormFieldRef
             };
         }
         else if (nextFieldId) {
-            return allRefs.find(item => item.id === nextFieldId);
+            return allRefs.find((item) => item.id === nextFieldId);
         }
         return allRefs[getMyIndex() + 1];
     };
@@ -67,7 +81,7 @@ const useFormField = ({ ref, hasFocusCallback, id, nextFieldId, nextFormFieldRef
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     react_1.default.useEffect(() => {
-        const myRefIndex = refs === null || refs === void 0 ? void 0 : refs.findIndex(item => item.ref === fieldRef);
+        const myRefIndex = refs === null || refs === void 0 ? void 0 : refs.findIndex((item) => item.ref === fieldRef);
         // @ts-ignore
         refs[myRefIndex].hasError = hasError;
         // @ts-ignore
@@ -76,17 +90,10 @@ const useFormField = ({ ref, hasFocusCallback, id, nextFieldId, nextFormFieldRef
     const fullAccessibilityHint = [accessibilityHint, errorMessage]
         .filter(Boolean)
         .join(',');
-    return __DEV__
-        ? {
-            focusNextFormField,
-            isLastField,
-            style: internal_1.applyStyle === null || internal_1.applyStyle === void 0 ? void 0 : (0, internal_1.applyStyle)({ style, debugStyle: checks === null || checks === void 0 ? void 0 : checks.debugStyle }),
-            accessibilityHint: fullAccessibilityHint,
-        }
-        : {
-            focusNextFormField,
-            accessibilityHint: fullAccessibilityHint,
-            isLastField,
-        };
+    return {
+        focusNextFormField,
+        accessibilityHint: fullAccessibilityHint,
+        isLastField,
+    };
 };
 exports.useFormField = useFormField;

package/dist/hooks/useFormSubmit.d.ts

@@ -0,0 +1,4 @@
+export type UseFormSubmit = {
+    submitForm: () => Promise<void>;
+};
+export declare const useFormSubmit: () => UseFormSubmit;

package/dist/hooks/useFormSubmit.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormSubmit = void 0;
+const Form_1 = require("../components/Form");
+const useFormSubmit = () => {
+    const { submitForm } = (0, Form_1.useForm)();
+    const handleSubmit = () => {
+        return submitForm();
+    };
+    return {
+        submitForm: handleSubmit,
+    };
+};
+exports.useFormSubmit = useFormSubmit;