@faasjs/react 4.0.0 → 4.1.0

package/README.md

@@ -16,13 +16,17 @@ React plugin for FaasJS.
 - Additional React functions:
   - Utils:
     - [equal](functions/equal.md): Compare two values for deep equality.
+    - [createSplittingContext](functions/createSplittingContext.md): Create a context for code splitting.
+    - [splittingState](functions/splittingState.md): Create a splitting states.
+  - Hooks:
     - [useEqualMemoize](functions/useEqualMemoize.md): Memoize a value with deep equality.
     - [useEqualEffect](functions/useEqualEffect.md): Run an effect with deep equality.
     - [useEqualMemo](functions/useEqualMemo.md): Memoize a value with deep equality.
     - [useEqualCallback](functions/useEqualCallback.md): Memoize a callback with deep equality.
     - [useConstant](functions/useConstant.md): Create a constant value with hooks.
-    - [createSplittingContext](functions/createSplittingContext.md): Create a context for code splitting.
-    - [splittingState](functions/splittingState.md): Create a splitting states.
+    - [usePrevious](functions/usePrevious.md): Get the previous value of a state.
+    - [useStateRef](functions/useStateRef.md): Create a state with a ref.
+  - Components:
     - [OptionalWrapper](functions/OptionalWrapper.md): Render a component optionally.
     - [ErrorBoundary](classes/ErrorBoundary.md): Catch errors in the component tree.
   - Fetch Data:
@@ -58,6 +62,7 @@ npm install @faasjs/react react
 - [useFormContext](functions/useFormContext.md)
 - [usePrevious](functions/usePrevious.md)
 - [useSplittingState](functions/useSplittingState.md)
+- [useStateRef](functions/useStateRef.md)
 - [validValues](functions/validValues.md)
 - [withFaasData](functions/withFaasData.md)
 

package/dist/index.d.mts

@@ -3,7 +3,7 @@ export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 import { Response, BaseUrl, ResponseError, Options, FaasBrowserClient } from '@faasjs/browser';
 export { Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
 import * as react from 'react';
-import { ReactNode, Dispatch, SetStateAction, JSX, ReactElement, Component, ComponentType, ComponentProps, JSXElementConstructor } from 'react';
+import { ReactNode, Dispatch, SetStateAction, RefObject, JSX, ReactElement, Component, ComponentType, ComponentProps, JSXElementConstructor } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -57,14 +57,6 @@ declare function useEqualMemo<T>(callback: () => T, dependencies: any[]): T;
  * @returns The result of the `useCallback` hook with memoized dependencies.
  */
 declare function useEqualCallback<T extends (...args: any[]) => any>(callback: T, dependencies: any[]): T;
-/**
- * Hook to store the previous value of a state or prop.
- *
- * @template T - The type of the value.
- * @param {T} value - The current value to be stored.
- * @returns {T | undefined} - The previous value, or undefined if there is no previous value.
- */
-declare function usePrevious<T>(value: T): T | undefined;
 
 /**
  * Creates a splitting context with the given default value.
@@ -197,6 +189,39 @@ type StatesWithSetters<T> = T & StateSetters<T>;
  */
 declare function useSplittingState<T extends Record<string, unknown>>(initialStates: T): StatesWithSetters<T>;
 
+/**
+ * Hook to store the previous value of a state or prop.
+ *
+ * @template T - The type of the value.
+ * @param {T} value - The current value to be stored.
+ * @returns {T | undefined} - The previous value, or undefined if there is no previous value.
+ */
+declare function usePrevious<T = any>(value: T): T | undefined;
+
+/**
+ * Custom hook that returns a stateful value and a ref to that value.
+ *
+ * @template T - The type of the value.
+ * @param {T} initialValue - The initial value of the state.
+ * @returns {[T, (value: T) => void, RefObject<T>]} - The stateful value, a function to set the value, and a ref to the value.
+ *
+ * @example
+ * ```tsx
+ * import { useStateRef } from '@faasjs/react'
+ *
+ * function MyComponent() {
+ *  const [value, setValue, ref] = useStateRef(0)
+ *
+ * return (
+ *   <div>
+ *     <p>Value: {value}</p>
+ *     <button onClick={() => setValue(value + 1)}>Increment</button>
+ *     <button onClick={() => console.log(ref.current)}>Submit</button>
+ *   </div>
+ * )
+ */
+declare function useStateRef<T = any>(initialValue?: T): [T, Dispatch<SetStateAction<T>>, RefObject<T>];
+
 /**
  * Injects FaasData props.
  */
@@ -413,7 +438,7 @@ declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
  */
 type FormButtonElementProps = {
     children?: React.ReactNode;
-    submitting?: boolean;
+    submitting: boolean;
     submit: () => Promise<void>;
 };
 
@@ -573,14 +598,14 @@ type FormProps<Values extends Record<string, any> = Record<string, any>, FormEle
  * }
  * ```
  */
-declare function FormContainer<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules>({ defaultValues, Elements, rules, lang, ...props }: FormProps<Values, FormElements, Rules>): react_jsx_runtime.JSX.Element;
+declare function FormContainer<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules>({ defaultValues, Elements, rules, lang, items, ...props }: FormProps<Values, FormElements, Rules>): react_jsx_runtime.JSX.Element;
 declare namespace FormContainer {
     var displayName: string;
     var whyDidYouRender: boolean;
 }
 
-type FormContextProps<Values extends Record<string, any> = Record<string, any>, Rules extends FormRules = typeof FormDefaultRules> = {
-    items: FormLabelElementProps[];
+type FormContextProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules> = {
+    items: FormItemProps<FormElements, InferFormRulesOptions<Rules>>[];
     onSubmit: (values: Values) => Promise<void>;
     Elements: FormElementTypes;
     lang: FormLang;
@@ -591,13 +616,14 @@ type FormContextProps<Values extends Record<string, any> = Record<string, any>,
     setValues: Dispatch<SetStateAction<Values>>;
     errors: Record<string, Error>;
     setErrors: Dispatch<SetStateAction<Record<string, Error>>>;
+    valuesRef: RefObject<Values>;
 };
-declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any>, FormRules> = FormContextProps<Record<string, any>, FormRules>>(props: {
+declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any>, FormElementTypes, FormRules> = FormContextProps<Record<string, any>, FormElementTypes, FormRules>>(props: {
     value?: Partial<NewT>;
     children: react.ReactNode;
     memo?: true | any[];
     initializeStates?: Partial<NewT>;
 }) => react.ReactNode;
-declare const useFormContext: <NewT extends FormContextProps<Record<string, any>, FormRules> = FormContextProps<Record<string, any>, FormRules>>() => Readonly<NewT>;
+declare const useFormContext: <NewT extends FormContextProps<Record<string, any>, FormElementTypes, FormRules> = FormContextProps<Record<string, any>, FormElementTypes, FormRules>>() => Readonly<NewT>;
 
-export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormButtonElementProps, type FormContextProps, FormContextProvider, FormDefaultElements, FormDefaultLang, FormDefaultRules, type FormDefaultRulesOptions, type FormElementTypes, type FormInputElementProps, FormItem, type FormItemName, type FormItemProps, type FormLabelElementProps, type FormLang, type FormProps, type FormRule, type FormRules, type InferFormRulesOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, usePrevious, useSplittingState, validValues, withFaasData };
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormButtonElementProps, type FormContextProps, FormContextProvider, FormDefaultElements, FormDefaultLang, FormDefaultRules, type FormDefaultRulesOptions, type FormElementTypes, type FormInputElementProps, FormItem, type FormItemName, type FormItemProps, type FormLabelElementProps, type FormLang, type FormProps, type FormRule, type FormRules, type InferFormRulesOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, usePrevious, useSplittingState, useStateRef, validValues, withFaasData };

package/dist/index.d.ts

@@ -3,7 +3,7 @@ export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 import { Response, BaseUrl, ResponseError, Options, FaasBrowserClient } from '@faasjs/browser';
 export { Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
 import * as react from 'react';
-import { ReactNode, Dispatch, SetStateAction, JSX, ReactElement, Component, ComponentType, ComponentProps, JSXElementConstructor } from 'react';
+import { ReactNode, Dispatch, SetStateAction, RefObject, JSX, ReactElement, Component, ComponentType, ComponentProps, JSXElementConstructor } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -57,14 +57,6 @@ declare function useEqualMemo<T>(callback: () => T, dependencies: any[]): T;
  * @returns The result of the `useCallback` hook with memoized dependencies.
  */
 declare function useEqualCallback<T extends (...args: any[]) => any>(callback: T, dependencies: any[]): T;
-/**
- * Hook to store the previous value of a state or prop.
- *
- * @template T - The type of the value.
- * @param {T} value - The current value to be stored.
- * @returns {T | undefined} - The previous value, or undefined if there is no previous value.
- */
-declare function usePrevious<T>(value: T): T | undefined;
 
 /**
  * Creates a splitting context with the given default value.
@@ -197,6 +189,39 @@ type StatesWithSetters<T> = T & StateSetters<T>;
  */
 declare function useSplittingState<T extends Record<string, unknown>>(initialStates: T): StatesWithSetters<T>;
 
+/**
+ * Hook to store the previous value of a state or prop.
+ *
+ * @template T - The type of the value.
+ * @param {T} value - The current value to be stored.
+ * @returns {T | undefined} - The previous value, or undefined if there is no previous value.
+ */
+declare function usePrevious<T = any>(value: T): T | undefined;
+
+/**
+ * Custom hook that returns a stateful value and a ref to that value.
+ *
+ * @template T - The type of the value.
+ * @param {T} initialValue - The initial value of the state.
+ * @returns {[T, (value: T) => void, RefObject<T>]} - The stateful value, a function to set the value, and a ref to the value.
+ *
+ * @example
+ * ```tsx
+ * import { useStateRef } from '@faasjs/react'
+ *
+ * function MyComponent() {
+ *  const [value, setValue, ref] = useStateRef(0)
+ *
+ * return (
+ *   <div>
+ *     <p>Value: {value}</p>
+ *     <button onClick={() => setValue(value + 1)}>Increment</button>
+ *     <button onClick={() => console.log(ref.current)}>Submit</button>
+ *   </div>
+ * )
+ */
+declare function useStateRef<T = any>(initialValue?: T): [T, Dispatch<SetStateAction<T>>, RefObject<T>];
+
 /**
  * Injects FaasData props.
  */
@@ -413,7 +438,7 @@ declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
  */
 type FormButtonElementProps = {
     children?: React.ReactNode;
-    submitting?: boolean;
+    submitting: boolean;
     submit: () => Promise<void>;
 };
 
@@ -573,14 +598,14 @@ type FormProps<Values extends Record<string, any> = Record<string, any>, FormEle
  * }
  * ```
  */
-declare function FormContainer<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules>({ defaultValues, Elements, rules, lang, ...props }: FormProps<Values, FormElements, Rules>): react_jsx_runtime.JSX.Element;
+declare function FormContainer<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules>({ defaultValues, Elements, rules, lang, items, ...props }: FormProps<Values, FormElements, Rules>): react_jsx_runtime.JSX.Element;
 declare namespace FormContainer {
     var displayName: string;
     var whyDidYouRender: boolean;
 }
 
-type FormContextProps<Values extends Record<string, any> = Record<string, any>, Rules extends FormRules = typeof FormDefaultRules> = {
-    items: FormLabelElementProps[];
+type FormContextProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules> = {
+    items: FormItemProps<FormElements, InferFormRulesOptions<Rules>>[];
     onSubmit: (values: Values) => Promise<void>;
     Elements: FormElementTypes;
     lang: FormLang;
@@ -591,13 +616,14 @@ type FormContextProps<Values extends Record<string, any> = Record<string, any>,
     setValues: Dispatch<SetStateAction<Values>>;
     errors: Record<string, Error>;
     setErrors: Dispatch<SetStateAction<Record<string, Error>>>;
+    valuesRef: RefObject<Values>;
 };
-declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any>, FormRules> = FormContextProps<Record<string, any>, FormRules>>(props: {
+declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any>, FormElementTypes, FormRules> = FormContextProps<Record<string, any>, FormElementTypes, FormRules>>(props: {
     value?: Partial<NewT>;
     children: react.ReactNode;
     memo?: true | any[];
     initializeStates?: Partial<NewT>;
 }) => react.ReactNode;
-declare const useFormContext: <NewT extends FormContextProps<Record<string, any>, FormRules> = FormContextProps<Record<string, any>, FormRules>>() => Readonly<NewT>;
+declare const useFormContext: <NewT extends FormContextProps<Record<string, any>, FormElementTypes, FormRules> = FormContextProps<Record<string, any>, FormElementTypes, FormRules>>() => Readonly<NewT>;
 
-export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormButtonElementProps, type FormContextProps, FormContextProvider, FormDefaultElements, FormDefaultLang, FormDefaultRules, type FormDefaultRulesOptions, type FormElementTypes, type FormInputElementProps, FormItem, type FormItemName, type FormItemProps, type FormLabelElementProps, type FormLang, type FormProps, type FormRule, type FormRules, type InferFormRulesOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, usePrevious, useSplittingState, validValues, withFaasData };
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormButtonElementProps, type FormContextProps, FormContextProvider, FormDefaultElements, FormDefaultLang, FormDefaultRules, type FormDefaultRulesOptions, type FormElementTypes, type FormInputElementProps, FormItem, type FormItemName, type FormItemProps, type FormLabelElementProps, type FormLang, type FormProps, type FormRule, type FormRules, type InferFormRulesOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, usePrevious, useSplittingState, useStateRef, validValues, withFaasData };

package/dist/index.js

@@ -77,13 +77,6 @@ function useEqualCallback(callback, dependencies) {
     useEqualMemoize(dependencies)
   );
 }
-function usePrevious(value) {
-  const ref = react.useRef(void 0);
-  react.useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-}
 function useSplittingState(initialStates) {
   const states = {};
   for (const key of Object.keys(initialStates)) {
@@ -135,6 +128,21 @@ function createSplittingContext(defaultValue) {
     use
   };
 }
+function usePrevious(value) {
+  const ref = react.useRef(void 0);
+  react.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+function useStateRef(initialValue) {
+  const [state, setState] = react.useState(initialValue ?? null);
+  const ref = react.useRef(state);
+  react.useEffect(() => {
+    ref.current = state;
+  }, [state]);
+  return [state, setState, ref];
+}
 function FaasDataWrapper(props) {
   const request = getClient(props.baseUrl).useFaas(
     props.action,
@@ -354,13 +362,14 @@ var FormContext = createSplittingContext([
   "onSubmit",
   "Elements",
   "lang",
+  "rules",
   "submitting",
   "setSubmitting",
   "values",
   "setValues",
   "errors",
   "setErrors",
-  "rules"
+  "valuesRef"
 ]);
 var FormContextProvider = FormContext.Provider;
 var useFormContext = FormContext.use;
@@ -468,38 +477,37 @@ function FormFooter() {
     submitting,
     setSubmitting,
     onSubmit,
-    values,
+    valuesRef,
     Elements,
     items,
     setErrors,
     lang,
     rules
   } = useFormContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Elements.Button,
-    {
-      submitting,
-      submit: async () => {
-        setSubmitting(true);
-        const errors = await validValues(rules, items, values, lang);
-        if (Object.keys(errors).length) {
-          setErrors(errors);
-          setSubmitting(false);
-          return;
-        }
-        onSubmit(values).finally(() => setSubmitting(false));
-      },
-      children: lang.submit
+  const handleSubmit = react.useCallback(async () => {
+    setSubmitting(true);
+    setErrors({});
+    const errors = await validValues(rules, items, valuesRef.current, lang);
+    if (Object.keys(errors).length) {
+      setErrors(errors);
+      setSubmitting(false);
+      return;
     }
+    onSubmit(valuesRef.current).finally(() => setSubmitting(false));
+  }, [setSubmitting, setErrors, rules, items, lang, onSubmit]);
+  const MemoizedButton = react.useMemo(
+    () => /* @__PURE__ */ jsxRuntime.jsx(Elements.Button, { submitting, submit: handleSubmit, children: lang.submit }),
+    [submitting, handleSubmit, lang.submit]
   );
+  return MemoizedButton;
 }
 FormFooter.displayName = "FormFooter";
 FormFooter.whyDidYouRender = true;
-var FormButtonElement = react.forwardRef(({ children, submit, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var FormButtonElement = react.forwardRef(({ children, submit, submitting, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "button",
   {
     type: "button",
-    disabled: props.submitting,
+    disabled: submitting,
     onClick: submit,
     ...props,
     ref,
@@ -553,23 +561,29 @@ function FormContainer({
   Elements,
   rules,
   lang,
+  items,
   ...props
 }) {
+  const [values, setValues, valuesRef] = useStateRef(
+    mergeValues(items, defaultValues)
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     FormContextProvider,
     {
       initializeStates: {
-        values: mergeValues(props.items, defaultValues),
         errors: {},
-        submitting: false,
-        Elements: Object.assign(
-          FormDefaultElements,
-          Elements
-        ),
+        submitting: false
+      },
+      value: {
+        Elements: Object.assign(FormDefaultElements, Elements),
         lang: Object.assign(FormDefaultLang, lang),
-        rules: Object.assign(FormDefaultRules, rules)
+        rules: Object.assign(FormDefaultRules, rules),
+        items,
+        values,
+        setValues,
+        valuesRef,
+        ...props
       },
-      value: props,
       memo: true,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(FormBody, {}),
@@ -604,5 +618,6 @@ exports.useFaas = useFaas;
 exports.useFormContext = useFormContext;
 exports.usePrevious = usePrevious;
 exports.useSplittingState = useSplittingState;
+exports.useStateRef = useStateRef;
 exports.validValues = validValues;
 exports.withFaasData = withFaasData;

package/dist/index.mjs

@@ -75,13 +75,6 @@ function useEqualCallback(callback, dependencies) {
     useEqualMemoize(dependencies)
   );
 }
-function usePrevious(value) {
-  const ref = useRef(void 0);
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-}
 function useSplittingState(initialStates) {
   const states = {};
   for (const key of Object.keys(initialStates)) {
@@ -133,6 +126,21 @@ function createSplittingContext(defaultValue) {
     use
   };
 }
+function usePrevious(value) {
+  const ref = useRef(void 0);
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+function useStateRef(initialValue) {
+  const [state, setState] = useState(initialValue ?? null);
+  const ref = useRef(state);
+  useEffect(() => {
+    ref.current = state;
+  }, [state]);
+  return [state, setState, ref];
+}
 function FaasDataWrapper(props) {
   const request = getClient(props.baseUrl).useFaas(
     props.action,
@@ -352,13 +360,14 @@ var FormContext = createSplittingContext([
   "onSubmit",
   "Elements",
   "lang",
+  "rules",
   "submitting",
   "setSubmitting",
   "values",
   "setValues",
   "errors",
   "setErrors",
-  "rules"
+  "valuesRef"
 ]);
 var FormContextProvider = FormContext.Provider;
 var useFormContext = FormContext.use;
@@ -466,38 +475,37 @@ function FormFooter() {
     submitting,
     setSubmitting,
     onSubmit,
-    values,
+    valuesRef,
     Elements,
     items,
     setErrors,
     lang,
     rules
   } = useFormContext();
-  return /* @__PURE__ */ jsx(
-    Elements.Button,
-    {
-      submitting,
-      submit: async () => {
-        setSubmitting(true);
-        const errors = await validValues(rules, items, values, lang);
-        if (Object.keys(errors).length) {
-          setErrors(errors);
-          setSubmitting(false);
-          return;
-        }
-        onSubmit(values).finally(() => setSubmitting(false));
-      },
-      children: lang.submit
+  const handleSubmit = useCallback(async () => {
+    setSubmitting(true);
+    setErrors({});
+    const errors = await validValues(rules, items, valuesRef.current, lang);
+    if (Object.keys(errors).length) {
+      setErrors(errors);
+      setSubmitting(false);
+      return;
     }
+    onSubmit(valuesRef.current).finally(() => setSubmitting(false));
+  }, [setSubmitting, setErrors, rules, items, lang, onSubmit]);
+  const MemoizedButton = useMemo(
+    () => /* @__PURE__ */ jsx(Elements.Button, { submitting, submit: handleSubmit, children: lang.submit }),
+    [submitting, handleSubmit, lang.submit]
   );
+  return MemoizedButton;
 }
 FormFooter.displayName = "FormFooter";
 FormFooter.whyDidYouRender = true;
-var FormButtonElement = forwardRef(({ children, submit, ...props }, ref) => /* @__PURE__ */ jsx(
+var FormButtonElement = forwardRef(({ children, submit, submitting, ...props }, ref) => /* @__PURE__ */ jsx(
   "button",
   {
     type: "button",
-    disabled: props.submitting,
+    disabled: submitting,
     onClick: submit,
     ...props,
     ref,
@@ -551,23 +559,29 @@ function FormContainer({
   Elements,
   rules,
   lang,
+  items,
   ...props
 }) {
+  const [values, setValues, valuesRef] = useStateRef(
+    mergeValues(items, defaultValues)
+  );
   return /* @__PURE__ */ jsxs(
     FormContextProvider,
     {
       initializeStates: {
-        values: mergeValues(props.items, defaultValues),
         errors: {},
-        submitting: false,
-        Elements: Object.assign(
-          FormDefaultElements,
-          Elements
-        ),
+        submitting: false
+      },
+      value: {
+        Elements: Object.assign(FormDefaultElements, Elements),
         lang: Object.assign(FormDefaultLang, lang),
-        rules: Object.assign(FormDefaultRules, rules)
+        rules: Object.assign(FormDefaultRules, rules),
+        items,
+        values,
+        setValues,
+        valuesRef,
+        ...props
       },
-      value: props,
       memo: true,
       children: [
         /* @__PURE__ */ jsx(FormBody, {}),
@@ -579,4 +593,4 @@ function FormContainer({
 FormContainer.displayName = "FormContainer";
 FormContainer.whyDidYouRender = true;
 
-export { ErrorBoundary, FaasDataWrapper, FaasReactClient, FormContainer as Form, FormContextProvider, FormDefaultElements, FormDefaultLang, FormDefaultRules, FormItem, OptionalWrapper, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useFormContext, usePrevious, useSplittingState, validValues, withFaasData };
+export { ErrorBoundary, FaasDataWrapper, FaasReactClient, FormContainer as Form, FormContextProvider, FormDefaultElements, FormDefaultLang, FormDefaultRules, FormItem, OptionalWrapper, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useFormContext, usePrevious, useSplittingState, useStateRef, validValues, withFaasData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/react",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -34,10 +34,10 @@
     "dist"
   ],
   "peerDependencies": {
-    "@faasjs/browser": "4.0.0"
+    "@faasjs/browser": "4.1.0"
   },
   "devDependencies": {
-    "@faasjs/browser": "4.0.0",
+    "@faasjs/browser": "4.1.0",
     "@types/react": "*",
     "react": "*"
   },