@react-native-ama/forms 1.0.0

package/dist/core/src/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimedAction = exports.useFocus = exports.useChecks = exports.useButtonChecks = exports.HideChildrenFromAccessibilityTree = exports.useAMAContext = exports.AMAProvider = exports.AutofocusContainer = void 0;
+// Components
+var AutofocusContainer_1 = require("./components/AutofocusContainer");
+Object.defineProperty(exports, "AutofocusContainer", { enumerable: true, get: function () { return AutofocusContainer_1.AutofocusContainer; } });
+var AMAProvider_1 = require("./components/AMAProvider");
+Object.defineProperty(exports, "AMAProvider", { enumerable: true, get: function () { return AMAProvider_1.AMAProvider; } });
+Object.defineProperty(exports, "useAMAContext", { enumerable: true, get: function () { return AMAProvider_1.useAMAContext; } });
+var HideChildrenFromAccessibilityTree_1 = require("./components/HideChildrenFromAccessibilityTree");
+Object.defineProperty(exports, "HideChildrenFromAccessibilityTree", { enumerable: true, get: function () { return HideChildrenFromAccessibilityTree_1.HideChildrenFromAccessibilityTree; } });
+// Hooks
+var useButtonChecks_1 = require("./hooks/useButtonChecks");
+Object.defineProperty(exports, "useButtonChecks", { enumerable: true, get: function () { return useButtonChecks_1.useButtonChecks; } });
+var useChecks_1 = require("./hooks/useChecks");
+Object.defineProperty(exports, "useChecks", { enumerable: true, get: function () { return useChecks_1.useChecks; } });
+var useFocus_1 = require("./hooks/useFocus");
+Object.defineProperty(exports, "useFocus", { enumerable: true, get: function () { return useFocus_1.useFocus; } });
+var useTimedAction_1 = require("./hooks/useTimedAction");
+Object.defineProperty(exports, "useTimedAction", { enumerable: true, get: function () { return useTimedAction_1.useTimedAction; } });

package/dist/forms/src/components/Form.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export type FormProps = React.PropsWithChildren<{
+    onSubmit: () => boolean | Promise<boolean>;
+    ref?: React.RefObject<FormActions>;
+}>;
+export type FormActions = {
+    focusFirstInvalidField: () => void;
+};
+export declare const Form: React.ForwardRefExoticComponent<Omit<FormProps, "ref"> & React.RefAttributes<FormActions>>;
+export type FormContextValue = {
+    refs?: FormRef[];
+    submitForm: () => Promise<void>;
+    focusField?: (nextField?: Partial<FormRef> | undefined) => void;
+};
+export type FormRef = {
+    ref: React.RefObject<any>;
+    hasFocusCallback: boolean;
+    id: string | undefined;
+    hasValidation: boolean;
+    hasError?: boolean;
+    isEditable?: boolean;
+};
+export declare const FormContext: React.Context<FormContextValue | null>;
+export declare const useForm: () => FormContextValue;

package/dist/forms/src/components/Form.js

@@ -0,0 +1,122 @@
+"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;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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");
+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 focusField = (nextField) => {
+        var _a, _b, _c;
+        /**
+         * Refs passed as prop have another ".current"
+         */
+        const nextRefElement = ((_b = (_a = nextField === null || nextField === void 0 ? void 0 : nextField.ref) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.current)
+            ? nextField === null || nextField === void 0 ? void 0 : nextField.ref.current
+            : nextField === null || nextField === void 0 ? void 0 : nextField.ref;
+        const callFocus = 
+        // @ts-ignore
+        ((_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;
+            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);
+        }
+    };
+    const submitForm = () => __awaiter(void 0, void 0, void 0, function* () {
+        const isValid = yield onSubmit();
+        if (isValid) {
+            return;
+        }
+        focusFirstInvalidField();
+    });
+    const focusFirstInvalidField = () => {
+        react_native_1.InteractionManager.runAfterInteractions(() => {
+            setTimeout(() => {
+                const fieldWithError = (refs.current || []).find(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',
+                    }));
+                focusField(fieldWithError);
+            }, 0);
+        });
+    };
+    React.useImperativeHandle(ref, () => ({
+        focusFirstInvalidField,
+    }));
+    return (<exports.FormContext.Provider value={{ refs: refs.current, submitForm, focusField }}>
+        {children}
+      </exports.FormContext.Provider>);
+});
+exports.FormContext = React.createContext(null);
+const useForm = () => {
+    const context = React.useContext(exports.FormContext);
+    if (!context) {
+        __DEV__ &&
+            console.error('Please wrap your form field inside the <Form /> component');
+        throw new Error('useForm must be used within a FormContextProvider, please wrap your form field inside the <Form /> component');
+    }
+    return context;
+};
+exports.useForm = useForm;

package/dist/forms/src/components/FormField.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { TouchableWithoutFeedbackProps } from 'react-native';
+import { UseFormField } from '../hooks/useFormField';
+export type FormFieldProps = React.PropsWithChildren<TouchableWithoutFeedbackProps & Omit<UseFormField, 'hasFocusCallback' | 'nextFormFieldRef' | 'nextFieldId' | 'editable'> & {
+    wrapInsideAccessibleView?: boolean;
+}>;
+export declare const FormField: ({ children, wrapInsideAccessibleView, ...props }: FormFieldProps) => React.JSX.Element;

package/dist/forms/src/components/FormField.js

@@ -0,0 +1,52 @@
+"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;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormField = void 0;
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const useFormField_1 = require("../hooks/useFormField");
+const FormField = (_a) => {
+    var { children, wrapInsideAccessibleView = true } = _a, props = __rest(_a, ["children", "wrapInsideAccessibleView"]);
+    const viewRef = React.useRef(null);
+    // @ts-ignore
+    const formProps = (0, useFormField_1.useFormField)(Object.assign({ hasFocusCallback: false, ref: viewRef }, props));
+    return wrapInsideAccessibleView ? (<react_native_1.TouchableWithoutFeedback {...props} ref={viewRef} {...formProps}>
+      <react_native_1.View accessible>{children}</react_native_1.View>
+    </react_native_1.TouchableWithoutFeedback>) : (<react_native_1.TouchableWithoutFeedback {...props} ref={viewRef} {...formProps}>
+      <>{children}</>
+    </react_native_1.TouchableWithoutFeedback>);
+};
+exports.FormField = FormField;

package/dist/forms/src/components/FormSubmit.d.ts

@@ -0,0 +1,10 @@
+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;

package/dist/forms/src/components/FormSubmit.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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 { 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>);
+};
+exports.FormSubmit = FormSubmit;
+const FormSubmitForScreenReader = ({ children, }) => {
+    return (<core_2.HideChildrenFromAccessibilityTree>
+      {children}
+    </core_2.HideChildrenFromAccessibilityTree>);
+};

package/dist/forms/src/components/FormSwitch.d.ts

@@ -0,0 +1,4 @@
+import { SwitchListItemProps } from '@react-native-ama/react-native';
+import React from 'react';
+export type FormSwitchProps = SwitchListItemProps;
+export declare const FormSwitch: (props: FormSwitchProps) => React.JSX.Element;

package/dist/forms/src/components/FormSwitch.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormSwitch = void 0;
+const react_native_1 = require("@react-native-ama/react-native");
+const react_1 = __importDefault(require("react"));
+const FormField_1 = require("./FormField");
+const FormSwitch = (props) => {
+    return (<FormField_1.FormField hasValidation={false}>
+      <react_native_1.SwitchListItem {...props}/>
+    </FormField_1.FormField>);
+};
+exports.FormSwitch = FormSwitch;

package/dist/forms/src/components/TextInput.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { TextInput as RNTextInput, TextInputProps as RNTextInputProps } from 'react-native';
+export type TextInputProps = RNTextInputProps & {
+    labelComponent: JSX.Element;
+    labelPosition?: 'beforeInput' | 'afterInput';
+    nextFormField?: React.RefObject<RNTextInput>;
+    id?: string;
+    nextFieldId?: string;
+    hasValidation: boolean;
+    errorComponent?: JSX.Element;
+    hasError?: boolean;
+    errorPosition?: 'belowLabel' | 'afterInput';
+    errorMessage?: string;
+};
+export declare const TextInput: React.ForwardRefExoticComponent<RNTextInputProps & {
+    labelComponent: JSX.Element;
+    labelPosition?: "beforeInput" | "afterInput" | undefined;
+    nextFormField?: React.RefObject<RNTextInput> | undefined;
+    id?: string | undefined;
+    nextFieldId?: string | undefined;
+    hasValidation: boolean;
+    errorComponent?: JSX.Element | undefined;
+    hasError?: boolean | undefined;
+    errorPosition?: "afterInput" | "belowLabel" | undefined;
+    errorMessage?: string | undefined;
+} & React.RefAttributes<RNTextInput>>;

package/dist/forms/src/components/TextInput.js

@@ -0,0 +1,123 @@
+"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;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    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");
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const useTextInput_1 = require("../hooks/useTextInput");
+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"]);
+    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]);
+    // @ts-ignore
+    const textInputProps = (0, useTextInput_1.useTextInput)(Object.assign({ required: false, ref: inputRef, id,
+        nextFieldId, nextFormFieldRef: nextFormField, hasError,
+        hasValidation,
+        errorMessage,
+        accessibilityLabel }, rest));
+    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}
+      </>);
+});

package/dist/forms/src/hooks/useFormField.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+export type UseFormField = {
+    ref?: React.RefObject<any> | React.ForwardedRef<any> | null;
+    hasFocusCallback: boolean;
+    id?: string;
+    nextFieldId?: string;
+    nextFormFieldRef?: React.RefObject<any>;
+    accessibilityHint?: string;
+    style?: ViewStyle;
+    editable?: boolean;
+    hasValidation: boolean;
+    hasError?: boolean;
+    errorMessage?: string;
+};
+export declare const useFormField: ({ ref, hasFocusCallback, id, nextFieldId, nextFormFieldRef, hasValidation, hasError, accessibilityHint, errorMessage, editable, style, }: UseFormField) => {
+    focusNextFormField: () => void;
+    isLastField: () => boolean;
+    style: any;
+    accessibilityHint: string;
+} | {
+    focusNextFormField: () => void;
+    accessibilityHint: string;
+    isLastField: () => boolean;
+    style?: undefined;
+};

package/dist/forms/src/hooks/useFormField.js

@@ -0,0 +1,92 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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, style = {}, }) => {
+    const { refs, submitForm, focusField } = (0, Form_1.useForm)();
+    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 getMyIndex = () => {
+        const allRefs = refs;
+        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,
+                shouldHaveFocus: false,
+            }));
+    };
+    const getNextFieldRef = () => {
+        const allRefs = refs || [];
+        if (nextFormFieldRef) {
+            return {
+                ref: nextFormFieldRef,
+            };
+        }
+        else if (nextFieldId) {
+            return allRefs.find(item => item.id === nextFieldId);
+        }
+        return allRefs[getMyIndex() + 1];
+    };
+    const isLastField = () => {
+        const myIndex = getMyIndex();
+        return myIndex === refs.length - 1;
+    };
+    react_1.default.useEffect(() => {
+        refs === null || refs === void 0 ? void 0 : refs.push({
+            ref: fieldRef,
+            hasFocusCallback,
+            id,
+            hasValidation,
+            hasError,
+            isEditable: editable,
+        });
+        return () => {
+            const myIndex = getMyIndex();
+            refs === null || refs === void 0 ? void 0 : refs.splice(myIndex, 1);
+        };
+        // 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);
+        // @ts-ignore
+        refs[myRefIndex].hasError = hasError;
+        // @ts-ignore
+        refs[myRefIndex].isEditable = editable;
+    }, [editable, hasError, refs]);
+    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,
+        };
+};
+exports.useFormField = useFormField;