@jfdevelops/react-multi-step-form 1.0.0-alpha.21 → 1.0.0-alpha.23

package/dist/field.cjs

@@ -1,13 +1,21 @@
+let react = require("react");
 
 //#region src/field.tsx
 let field;
 (function(_field) {
-	function create(propsCreator) {
-		const Field = (props) => {
+	function create(propsCreator, subscribe, getValue) {
+		return (0, react.memo)((props) => {
 			const { children, name } = props;
-			return children(propsCreator(name));
-		};
-		return Field;
+			const subscribeFn = subscribe || (() => () => {});
+			const getValueFn = getValue || (() => void 0);
+			const currentValue = (0, react.useSyncExternalStore)(subscribeFn, () => getValueFn(name), () => getValueFn(name));
+			let createdProps = propsCreator(name);
+			if (getValue) createdProps = {
+				...createdProps,
+				defaultValue: currentValue
+			};
+			return children(createdProps);
+		}, (prevProps, nextProps) => prevProps.name === nextProps.name);
 	}
 	_field.create = create;
 })(field || (field = {}));

package/dist/field.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"field.cjs","names":["Field: field.component<TResolvedStep, TTargetStep>"],"sources":["../src/field.tsx"],"sourcesContent":["import type {\n  AnyResolvedStep,\n  fields,\n  Override,\n  Updater,\n} from '@jfdevelops/multi-step-form-core';\nimport type { ReactNode } from 'react';\n\nexport namespace field {\n  type sharedProps<TField extends string> = {\n    /**\n     * The name of the field.\n     */\n    name: TField;\n  };\n\n  export type childrenProps<\n    TResolvedStep extends AnyResolvedStep,\n    TTargetStep extends keyof TResolvedStep,\n    TField extends fields.getDeep<TResolvedStep, TTargetStep>,\n    TValue extends fields.resolveDeepPath<\n      TResolvedStep,\n      TTargetStep,\n      TField\n    > = fields.resolveDeepPath<TResolvedStep, TTargetStep, TField>\n  > = sharedProps<TField> &\n    Override<\n      fields.get<TResolvedStep, TTargetStep>[fields.parentOf<TField>],\n      'defaultValue',\n      TValue\n    > & {\n      /**\n       * A useful wrapper around `update` to update the specific field.\n       * @param value The new value for the field.\n       */\n      onInputChange: (value: Updater<TValue>) => void;\n      /**\n       * Resets the field's value to the original value that was\n       * defined in the config.\n       */\n      reset: () => void;\n    };\n  export type props<\n    TResolvedStep extends AnyResolvedStep,\n    TTargetStep extends keyof TResolvedStep,\n    TField extends fields.getDeep<TResolvedStep, TTargetStep>\n  > = sharedProps<TField> & {\n    children: (\n      props: childrenProps<TResolvedStep, TTargetStep, TField>\n    ) => ReactNode;\n  };\n  export type component<\n    TResolvedStep extends AnyResolvedStep,\n    TTargetStep extends keyof TResolvedStep\n  > = <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(\n    props: props<TResolvedStep, TTargetStep, TField>\n  ) => ReactNode;\n\n  /**\n   * Create a field.\n   * @param propsCreator\n   * @returns\n   */\n  export function create<\n    TResolvedStep extends AnyResolvedStep,\n    TTargetStep extends keyof TResolvedStep\n  >(\n    propsCreator: <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(\n      name: TField\n    ) => field.childrenProps<TResolvedStep, TTargetStep, TField>\n  ) {\n    const Field: field.component<TResolvedStep, TTargetStep> = (props) => {\n      const { children, name } = props;\n      const createdProps = propsCreator(name);\n\n      return children(createdProps);\n    };\n\n    return Field;\n  }\n}\n"],"mappings":";;;;CA+DS,SAAS,OAId,cAGA;EACA,MAAMA,SAAsD,UAAU;GACpE,MAAM,EAAE,UAAU,SAAS;AAG3B,UAAO,SAFc,aAAa,KAAK,CAEV;;AAG/B,SAAO"}
+{"version":3,"file":"field.cjs","names":[],"sources":["../src/field.tsx"],"sourcesContent":["import type {\n  AnyResolvedStep,\n  fields,\n  Override,\n  Updater,\n} from '@jfdevelops/multi-step-form-core';\nimport type { ReactNode } from 'react';\nimport { memo, useSyncExternalStore } from 'react';\n\nexport namespace field {\n  type sharedProps<TField extends string> = {\n    /**\n     * The name of the field.\n     */\n    name: TField;\n  };\n\n  export type childrenProps<\n    TResolvedStep extends AnyResolvedStep,\n    TTargetStep extends keyof TResolvedStep,\n    TField extends fields.getDeep<TResolvedStep, TTargetStep>,\n    TValue extends fields.resolveDeepPath<\n      TResolvedStep,\n      TTargetStep,\n      TField\n    > = fields.resolveDeepPath<TResolvedStep, TTargetStep, TField>\n  > = sharedProps<TField> &\n    Override<\n      fields.get<TResolvedStep, TTargetStep>[fields.parentOf<TField>],\n      'defaultValue',\n      TValue\n    > & {\n      /**\n       * A useful wrapper around `update` to update the specific field.\n       * @param value The new value for the field.\n       */\n      onInputChange: (value: Updater<TValue>) => void;\n      /**\n       * Resets the field's value to the original value that was\n       * defined in the config.\n       */\n      reset: () => void;\n    };\n  export type props<\n    TResolvedStep extends AnyResolvedStep,\n    TTargetStep extends keyof TResolvedStep,\n    TField extends fields.getDeep<TResolvedStep, TTargetStep>\n  > = sharedProps<TField> & {\n    children: (\n      props: childrenProps<TResolvedStep, TTargetStep, TField>\n    ) => ReactNode;\n  };\n  export type component<\n    TResolvedStep extends AnyResolvedStep,\n    TTargetStep extends keyof TResolvedStep\n  > = <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(\n    props: props<TResolvedStep, TTargetStep, TField>\n  ) => ReactNode;\n\n  /**\n   * Create a field.\n   * @param propsCreator\n   * @param subscribe - Optional subscription function for reactivity\n   * @param getValue - Optional function to get the current field value reactively\n   * @returns\n   */\n  export function create<\n    TResolvedStep extends AnyResolvedStep,\n    TTargetStep extends keyof TResolvedStep\n  >(\n    propsCreator: <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(\n      name: TField\n    ) => field.childrenProps<TResolvedStep, TTargetStep, TField>,\n    subscribe?: (listener: () => void) => () => void,\n    getValue?: <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(\n      name: TField\n    ) => fields.resolveDeepPath<TResolvedStep, TTargetStep, TField>\n  ) {\n    const Field: field.component<TResolvedStep, TTargetStep> = memo(\n      (props) => {\n        const { children, name } = props;\n\n        // Always call the hook, but use no-op functions if subscribe/getValue aren't provided\n        const subscribeFn = subscribe || (() => () => {});\n        const getValueFn = getValue || (() => undefined);\n\n        // Subscribe to changes to trigger rerenders\n        const currentValue = useSyncExternalStore(\n          subscribeFn,\n          () => getValueFn(name),\n          () => getValueFn(name)\n        );\n\n        let createdProps = propsCreator(name);\n\n        // If getValue is provided, override defaultValue with the reactive value\n        if (getValue) {\n          createdProps = {\n            ...createdProps,\n            defaultValue: currentValue,\n          } as typeof createdProps;\n        }\n\n        return children(createdProps);\n      },\n      // Custom comparison: only compare the `name` prop\n      // The `children` function will always be a new reference, but that's okay\n      // because we only re-render when the field value changes (via useSyncExternalStore)\n      // or when the `name` prop changes\n      (prevProps, nextProps) => prevProps.name === nextProps.name\n    );\n\n    return Field;\n  }\n}\n"],"mappings":";;;;;CAkES,SAAS,OAId,cAGA,WACA,UAGA;AAmCA,0BAjCG,UAAU;GACT,MAAM,EAAE,UAAU,SAAS;GAG3B,MAAM,cAAc,0BAA0B;GAC9C,MAAM,aAAa,mBAAmB;GAGtC,MAAM,+CACJ,mBACM,WAAW,KAAK,QAChB,WAAW,KAAK,CACvB;GAED,IAAI,eAAe,aAAa,KAAK;AAGrC,OAAI,SACF,gBAAe;IACb,GAAG;IACH,cAAc;IACf;AAGH,UAAO,SAAS,aAAa;MAM9B,WAAW,cAAc,UAAU,SAAS,UAAU,KACxD"}

package/dist/field.d.cts

@@ -28,9 +28,11 @@ declare namespace field {
   /**
    * Create a field.
    * @param propsCreator
+   * @param subscribe - Optional subscription function for reactivity
+   * @param getValue - Optional function to get the current field value reactively
    * @returns
    */
-  export function create<TResolvedStep extends AnyResolvedStep, TTargetStep extends keyof TResolvedStep>(propsCreator: <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(name: TField) => field.childrenProps<TResolvedStep, TTargetStep, TField>): component<TResolvedStep, TTargetStep>;
+  export function create<TResolvedStep extends AnyResolvedStep, TTargetStep extends keyof TResolvedStep>(propsCreator: <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(name: TField) => field.childrenProps<TResolvedStep, TTargetStep, TField>, subscribe?: (listener: () => void) => () => void, getValue?: <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(name: TField) => fields.resolveDeepPath<TResolvedStep, TTargetStep, TField>): component<TResolvedStep, TTargetStep>;
   export {};
 }
 //#endregion

package/dist/field.d.mts

@@ -28,9 +28,11 @@ declare namespace field {
   /**
    * Create a field.
    * @param propsCreator
+   * @param subscribe - Optional subscription function for reactivity
+   * @param getValue - Optional function to get the current field value reactively
    * @returns
    */
-  export function create<TResolvedStep extends AnyResolvedStep, TTargetStep extends keyof TResolvedStep>(propsCreator: <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(name: TField) => field.childrenProps<TResolvedStep, TTargetStep, TField>): component<TResolvedStep, TTargetStep>;
+  export function create<TResolvedStep extends AnyResolvedStep, TTargetStep extends keyof TResolvedStep>(propsCreator: <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(name: TField) => field.childrenProps<TResolvedStep, TTargetStep, TField>, subscribe?: (listener: () => void) => () => void, getValue?: <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(name: TField) => fields.resolveDeepPath<TResolvedStep, TTargetStep, TField>): component<TResolvedStep, TTargetStep>;
   export {};
 }
 //#endregion

package/dist/field.mjs

@@ -1,12 +1,21 @@
+import { memo, useSyncExternalStore } from "react";
+
 //#region src/field.tsx
 let field;
 (function(_field) {
-	function create(propsCreator) {
-		const Field = (props) => {
+	function create(propsCreator, subscribe, getValue) {
+		return memo((props) => {
 			const { children, name } = props;
-			return children(propsCreator(name));
-		};
-		return Field;
+			const subscribeFn = subscribe || (() => () => {});
+			const getValueFn = getValue || (() => void 0);
+			const currentValue = useSyncExternalStore(subscribeFn, () => getValueFn(name), () => getValueFn(name));
+			let createdProps = propsCreator(name);
+			if (getValue) createdProps = {
+				...createdProps,
+				defaultValue: currentValue
+			};
+			return children(createdProps);
+		}, (prevProps, nextProps) => prevProps.name === nextProps.name);
 	}
 	_field.create = create;
 })(field || (field = {}));

package/dist/field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"field.mjs","names":["Field: field.component<TResolvedStep, TTargetStep>"],"sources":["../src/field.tsx"],"sourcesContent":["import type {\n  AnyResolvedStep,\n  fields,\n  Override,\n  Updater,\n} from '@jfdevelops/multi-step-form-core';\nimport type { ReactNode } from 'react';\n\nexport namespace field {\n  type sharedProps<TField extends string> = {\n    /**\n     * The name of the field.\n     */\n    name: TField;\n  };\n\n  export type childrenProps<\n    TResolvedStep extends AnyResolvedStep,\n    TTargetStep extends keyof TResolvedStep,\n    TField extends fields.getDeep<TResolvedStep, TTargetStep>,\n    TValue extends fields.resolveDeepPath<\n      TResolvedStep,\n      TTargetStep,\n      TField\n    > = fields.resolveDeepPath<TResolvedStep, TTargetStep, TField>\n  > = sharedProps<TField> &\n    Override<\n      fields.get<TResolvedStep, TTargetStep>[fields.parentOf<TField>],\n      'defaultValue',\n      TValue\n    > & {\n      /**\n       * A useful wrapper around `update` to update the specific field.\n       * @param value The new value for the field.\n       */\n      onInputChange: (value: Updater<TValue>) => void;\n      /**\n       * Resets the field's value to the original value that was\n       * defined in the config.\n       */\n      reset: () => void;\n    };\n  export type props<\n    TResolvedStep extends AnyResolvedStep,\n    TTargetStep extends keyof TResolvedStep,\n    TField extends fields.getDeep<TResolvedStep, TTargetStep>\n  > = sharedProps<TField> & {\n    children: (\n      props: childrenProps<TResolvedStep, TTargetStep, TField>\n    ) => ReactNode;\n  };\n  export type component<\n    TResolvedStep extends AnyResolvedStep,\n    TTargetStep extends keyof TResolvedStep\n  > = <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(\n    props: props<TResolvedStep, TTargetStep, TField>\n  ) => ReactNode;\n\n  /**\n   * Create a field.\n   * @param propsCreator\n   * @returns\n   */\n  export function create<\n    TResolvedStep extends AnyResolvedStep,\n    TTargetStep extends keyof TResolvedStep\n  >(\n    propsCreator: <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(\n      name: TField\n    ) => field.childrenProps<TResolvedStep, TTargetStep, TField>\n  ) {\n    const Field: field.component<TResolvedStep, TTargetStep> = (props) => {\n      const { children, name } = props;\n      const createdProps = propsCreator(name);\n\n      return children(createdProps);\n    };\n\n    return Field;\n  }\n}\n"],"mappings":";;;CA+DS,SAAS,OAId,cAGA;EACA,MAAMA,SAAsD,UAAU;GACpE,MAAM,EAAE,UAAU,SAAS;AAG3B,UAAO,SAFc,aAAa,KAAK,CAEV;;AAG/B,SAAO"}
+{"version":3,"file":"field.mjs","names":[],"sources":["../src/field.tsx"],"sourcesContent":["import type {\n  AnyResolvedStep,\n  fields,\n  Override,\n  Updater,\n} from '@jfdevelops/multi-step-form-core';\nimport type { ReactNode } from 'react';\nimport { memo, useSyncExternalStore } from 'react';\n\nexport namespace field {\n  type sharedProps<TField extends string> = {\n    /**\n     * The name of the field.\n     */\n    name: TField;\n  };\n\n  export type childrenProps<\n    TResolvedStep extends AnyResolvedStep,\n    TTargetStep extends keyof TResolvedStep,\n    TField extends fields.getDeep<TResolvedStep, TTargetStep>,\n    TValue extends fields.resolveDeepPath<\n      TResolvedStep,\n      TTargetStep,\n      TField\n    > = fields.resolveDeepPath<TResolvedStep, TTargetStep, TField>\n  > = sharedProps<TField> &\n    Override<\n      fields.get<TResolvedStep, TTargetStep>[fields.parentOf<TField>],\n      'defaultValue',\n      TValue\n    > & {\n      /**\n       * A useful wrapper around `update` to update the specific field.\n       * @param value The new value for the field.\n       */\n      onInputChange: (value: Updater<TValue>) => void;\n      /**\n       * Resets the field's value to the original value that was\n       * defined in the config.\n       */\n      reset: () => void;\n    };\n  export type props<\n    TResolvedStep extends AnyResolvedStep,\n    TTargetStep extends keyof TResolvedStep,\n    TField extends fields.getDeep<TResolvedStep, TTargetStep>\n  > = sharedProps<TField> & {\n    children: (\n      props: childrenProps<TResolvedStep, TTargetStep, TField>\n    ) => ReactNode;\n  };\n  export type component<\n    TResolvedStep extends AnyResolvedStep,\n    TTargetStep extends keyof TResolvedStep\n  > = <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(\n    props: props<TResolvedStep, TTargetStep, TField>\n  ) => ReactNode;\n\n  /**\n   * Create a field.\n   * @param propsCreator\n   * @param subscribe - Optional subscription function for reactivity\n   * @param getValue - Optional function to get the current field value reactively\n   * @returns\n   */\n  export function create<\n    TResolvedStep extends AnyResolvedStep,\n    TTargetStep extends keyof TResolvedStep\n  >(\n    propsCreator: <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(\n      name: TField\n    ) => field.childrenProps<TResolvedStep, TTargetStep, TField>,\n    subscribe?: (listener: () => void) => () => void,\n    getValue?: <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(\n      name: TField\n    ) => fields.resolveDeepPath<TResolvedStep, TTargetStep, TField>\n  ) {\n    const Field: field.component<TResolvedStep, TTargetStep> = memo(\n      (props) => {\n        const { children, name } = props;\n\n        // Always call the hook, but use no-op functions if subscribe/getValue aren't provided\n        const subscribeFn = subscribe || (() => () => {});\n        const getValueFn = getValue || (() => undefined);\n\n        // Subscribe to changes to trigger rerenders\n        const currentValue = useSyncExternalStore(\n          subscribeFn,\n          () => getValueFn(name),\n          () => getValueFn(name)\n        );\n\n        let createdProps = propsCreator(name);\n\n        // If getValue is provided, override defaultValue with the reactive value\n        if (getValue) {\n          createdProps = {\n            ...createdProps,\n            defaultValue: currentValue,\n          } as typeof createdProps;\n        }\n\n        return children(createdProps);\n      },\n      // Custom comparison: only compare the `name` prop\n      // The `children` function will always be a new reference, but that's okay\n      // because we only re-render when the field value changes (via useSyncExternalStore)\n      // or when the `name` prop changes\n      (prevProps, nextProps) => prevProps.name === nextProps.name\n    );\n\n    return Field;\n  }\n}\n"],"mappings":";;;;;CAkES,SAAS,OAId,cAGA,WACA,UAGA;AAmCA,SAlC2D,MACxD,UAAU;GACT,MAAM,EAAE,UAAU,SAAS;GAG3B,MAAM,cAAc,0BAA0B;GAC9C,MAAM,aAAa,mBAAmB;GAGtC,MAAM,eAAe,qBACnB,mBACM,WAAW,KAAK,QAChB,WAAW,KAAK,CACvB;GAED,IAAI,eAAe,aAAa,KAAK;AAGrC,OAAI,SACF,gBAAe;IACb,GAAG;IACH,cAAc;IACf;AAGH,UAAO,SAAS,aAAa;MAM9B,WAAW,cAAc,UAAU,SAAS,UAAU,KACxD"}

package/dist/form-config.d.mts

@@ -1,7 +1,7 @@
 import { AnyResolvedStep as AnyResolvedStep$1, CreatedMultiStepFormComponent } from "./step-schema.mjs";
 import { Expand, HelperFnChosenSteps, StepNumbers, ValidStepKey } from "@jfdevelops/multi-step-form-core";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { ComponentPropsWithRef, JSX } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/form-config.d.ts
 declare namespace MultiStepFormSchemaConfig {

package/dist/hooks/use-selector.cjs

@@ -0,0 +1,16 @@
+let react = require("react");
+
+//#region src/hooks/use-selector.ts
+function createUseSelector(createCtx, subscribe) {
+	return (selector) => {
+		return (0, react.useSyncExternalStore)(subscribe, () => {
+			return selector(createCtx());
+		}, () => {
+			return selector(createCtx());
+		});
+	};
+}
+
+//#endregion
+exports.createUseSelector = createUseSelector;
+//# sourceMappingURL=use-selector.cjs.map

package/dist/hooks/use-selector.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-selector.cjs","names":[],"sources":["../../src/hooks/use-selector.ts"],"sourcesContent":["import type {\n  AnyResolvedStep,\n  StepNumbers,\n  HelperFnChosenSteps,\n  Expand,\n  HelperFnCtx,\n} from '@jfdevelops/multi-step-form-core';\nimport { useSyncExternalStore } from 'react';\n\nexport type UseSelector<\n  TResolvedStep extends AnyResolvedStep,\n  TSteps extends StepNumbers<TResolvedStep>,\n  TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n> = ReturnType<typeof createUseSelector<TResolvedStep, TSteps, TChosenSteps>>;\nexport type SelectorFn<\n  TResolvedStep extends AnyResolvedStep,\n  TSteps extends StepNumbers<TResolvedStep>,\n  TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>,\n  TSelected\n> = (\n  ctx: Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>\n) => TSelected;\n\nexport function createUseSelector<\n  TResolvedStep extends AnyResolvedStep,\n  TSteps extends StepNumbers<TResolvedStep>,\n  TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n>(\n  createCtx: () => Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>,\n  subscribe: (listener: () => void) => () => void\n) {\n  return <selected>(\n    selector: SelectorFn<TResolvedStep, TSteps, TChosenSteps, selected>\n  ) => {\n    return useSyncExternalStore(\n      subscribe,\n      () => {\n        const currentCtx = createCtx();\n        return selector(currentCtx);\n      },\n      () => {\n        const currentCtx = createCtx();\n        return selector(currentCtx);\n      }\n    );\n  };\n}\n"],"mappings":";;;AAuBA,SAAgB,kBAKd,WACA,WACA;AACA,SACE,aACG;AACH,yCACE,iBACM;AAEJ,UAAO,SADY,WAAW,CACH;WAEvB;AAEJ,UAAO,SADY,WAAW,CACH;IAE9B"}

package/dist/hooks/use-selector.d.cts

@@ -0,0 +1,9 @@
+import { AnyResolvedStep, Expand, HelperFnChosenSteps, HelperFnCtx, StepNumbers } from "@jfdevelops/multi-step-form-core";
+
+//#region src/hooks/use-selector.d.ts
+type UseSelector<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>> = ReturnType<typeof createUseSelector<TResolvedStep, TSteps, TChosenSteps>>;
+type SelectorFn<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>, TSelected> = (ctx: Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>) => TSelected;
+declare function createUseSelector<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>>(createCtx: () => Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>, subscribe: (listener: () => void) => () => void): <selected>(selector: SelectorFn<TResolvedStep, TSteps, TChosenSteps, selected>) => selected;
+//#endregion
+export { SelectorFn, UseSelector };
+//# sourceMappingURL=use-selector.d.cts.map

package/dist/hooks/use-selector.d.mts

@@ -0,0 +1,9 @@
+import { AnyResolvedStep, Expand, HelperFnChosenSteps, HelperFnCtx, StepNumbers } from "@jfdevelops/multi-step-form-core";
+
+//#region src/hooks/use-selector.d.ts
+type UseSelector<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>> = ReturnType<typeof createUseSelector<TResolvedStep, TSteps, TChosenSteps>>;
+type SelectorFn<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>, TSelected> = (ctx: Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>) => TSelected;
+declare function createUseSelector<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>>(createCtx: () => Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>, subscribe: (listener: () => void) => () => void): <selected>(selector: SelectorFn<TResolvedStep, TSteps, TChosenSteps, selected>) => selected;
+//#endregion
+export { SelectorFn, UseSelector };
+//# sourceMappingURL=use-selector.d.mts.map

package/dist/hooks/use-selector.mjs

@@ -0,0 +1,16 @@
+import { useSyncExternalStore } from "react";
+
+//#region src/hooks/use-selector.ts
+function createUseSelector(createCtx, subscribe) {
+	return (selector) => {
+		return useSyncExternalStore(subscribe, () => {
+			return selector(createCtx());
+		}, () => {
+			return selector(createCtx());
+		});
+	};
+}
+
+//#endregion
+export { createUseSelector };
+//# sourceMappingURL=use-selector.mjs.map

package/dist/hooks/use-selector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-selector.mjs","names":[],"sources":["../../src/hooks/use-selector.ts"],"sourcesContent":["import type {\n  AnyResolvedStep,\n  StepNumbers,\n  HelperFnChosenSteps,\n  Expand,\n  HelperFnCtx,\n} from '@jfdevelops/multi-step-form-core';\nimport { useSyncExternalStore } from 'react';\n\nexport type UseSelector<\n  TResolvedStep extends AnyResolvedStep,\n  TSteps extends StepNumbers<TResolvedStep>,\n  TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n> = ReturnType<typeof createUseSelector<TResolvedStep, TSteps, TChosenSteps>>;\nexport type SelectorFn<\n  TResolvedStep extends AnyResolvedStep,\n  TSteps extends StepNumbers<TResolvedStep>,\n  TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>,\n  TSelected\n> = (\n  ctx: Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>\n) => TSelected;\n\nexport function createUseSelector<\n  TResolvedStep extends AnyResolvedStep,\n  TSteps extends StepNumbers<TResolvedStep>,\n  TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n>(\n  createCtx: () => Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>,\n  subscribe: (listener: () => void) => () => void\n) {\n  return <selected>(\n    selector: SelectorFn<TResolvedStep, TSteps, TChosenSteps, selected>\n  ) => {\n    return useSyncExternalStore(\n      subscribe,\n      () => {\n        const currentCtx = createCtx();\n        return selector(currentCtx);\n      },\n      () => {\n        const currentCtx = createCtx();\n        return selector(currentCtx);\n      }\n    );\n  };\n}\n"],"mappings":";;;AAuBA,SAAgB,kBAKd,WACA,WACA;AACA,SACE,aACG;AACH,SAAO,qBACL,iBACM;AAEJ,UAAO,SADY,WAAW,CACH;WAEvB;AAEJ,UAAO,SADY,WAAW,CACH;IAE9B"}

package/dist/selector.cjs

@@ -0,0 +1,27 @@
+const require_use_selector = require('./hooks/use-selector.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/selector.tsx
+let selector;
+(function(_selector) {
+	function create(createCtx, subscribe) {
+		const useSelector = require_use_selector.createUseSelector(createCtx, subscribe);
+		const Selector = ({ selector: selector$1, children }) => {
+			const selected = useSelector(selector$1);
+			if (children) return (0, react.createElement)(react_jsx_runtime.Fragment, null, children(selected));
+			return (0, react.createElement)(react_jsx_runtime.Fragment, null, String(selected ?? ""));
+		};
+		return (0, react.memo)(Selector, () => false);
+	}
+	_selector.create = create;
+})(selector || (selector = {}));
+
+//#endregion
+Object.defineProperty(exports, 'selector', {
+  enumerable: true,
+  get: function () {
+    return selector;
+  }
+});
+//# sourceMappingURL=selector.cjs.map

package/dist/selector.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"selector.cjs","names":["createUseSelector","Selector: component<TResolvedStep, TSteps, TChosenSteps>","selector","Fragment"],"sources":["../src/selector.tsx"],"sourcesContent":["import {\n  AnyResolvedStep,\n  StepNumbers,\n  HelperFnChosenSteps,\n  Expand,\n  HelperFnCtx,\n} from '@jfdevelops/multi-step-form-core';\nimport { createUseSelector, SelectorFn } from './hooks/use-selector';\nimport { Fragment } from 'react/jsx-runtime';\nimport { createElement, memo } from 'react';\n\nexport namespace selector {\n  export type props<\n    TResolvedStep extends AnyResolvedStep,\n    TSteps extends StepNumbers<TResolvedStep>,\n    TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>,\n    TSelected\n  > = {\n    selector: SelectorFn<TResolvedStep, TSteps, TChosenSteps, TSelected>;\n    children?: (selected: TSelected) => React.ReactNode;\n  };\n  export type component<\n    TResolvedStep extends AnyResolvedStep,\n    TSteps extends StepNumbers<TResolvedStep>,\n    TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n  > =\n    /**\n     * A component for reactively displaying a value from the form context.\n     * Unlike `useSelector`, this component only re-renders itself, not the parent component.\n     * Use this when you want to display a reactive value without causing parent re-renders.\n     *\n     * @param selector - A function that receives the current step's context and returns the selected value\n     * @param children - Optional render prop that receives the selected value\n     *\n     * @example\n     * <Selector selector={(ctx) => ctx.step1.fields.firstName.defaultValue}>\n     *   {(value) => <p>First name: {value}</p>}\n     * </Selector>\n     */\n    <TSelected>(\n      props: props<TResolvedStep, TSteps, TChosenSteps, TSelected>\n    ) => React.ReactNode;\n\n  export function create<\n    TResolvedStep extends AnyResolvedStep,\n    TSteps extends StepNumbers<TResolvedStep>,\n    TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n  >(\n    createCtx: () => Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>,\n    subscribe: (listener: () => void) => () => void\n  ) {\n    const useSelector = createUseSelector(createCtx, subscribe);\n    const Selector: component<TResolvedStep, TSteps, TChosenSteps> = ({\n      selector,\n      children,\n    }) => {\n      const selected = useSelector(selector);\n\n      if (children) {\n        return createElement(Fragment, null, children(selected));\n      }\n      return createElement(Fragment, null, String(selected ?? ''));\n    };\n\n    return memo(\n      Selector,\n      // Always return false to allow re-renders when the selected value changes\n      // The memoization is just to prevent re-renders when parent re-renders\n      () => false\n    );\n  }\n}\n"],"mappings":";;;;;;;CA2CS,SAAS,OAKd,WACA,WACA;EACA,MAAM,cAAcA,uCAAkB,WAAW,UAAU;EAC3D,MAAMC,YAA4D,EAChE,sBACA,eACI;GACJ,MAAM,WAAW,YAAYC,WAAS;AAEtC,OAAI,SACF,iCAAqBC,4BAAU,MAAM,SAAS,SAAS,CAAC;AAE1D,mCAAqBA,4BAAU,MAAM,OAAO,YAAY,GAAG,CAAC;;AAG9D,yBACE,gBAGM,MACP"}

package/dist/selector.d.cts

@@ -0,0 +1,30 @@
+import { SelectorFn } from "./hooks/use-selector.cjs";
+import { AnyResolvedStep, Expand, HelperFnChosenSteps, HelperFnCtx, StepNumbers } from "@jfdevelops/multi-step-form-core";
+import * as react0 from "react";
+
+//#region src/selector.d.ts
+declare namespace selector {
+  type props<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>, TSelected> = {
+    selector: SelectorFn<TResolvedStep, TSteps, TChosenSteps, TSelected>;
+    children?: (selected: TSelected) => React.ReactNode;
+  };
+  type component<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>> =
+  /**
+   * A component for reactively displaying a value from the form context.
+   * Unlike `useSelector`, this component only re-renders itself, not the parent component.
+   * Use this when you want to display a reactive value without causing parent re-renders.
+   *
+   * @param selector - A function that receives the current step's context and returns the selected value
+   * @param children - Optional render prop that receives the selected value
+   *
+   * @example
+   * <Selector selector={(ctx) => ctx.step1.fields.firstName.defaultValue}>
+   *   {(value) => <p>First name: {value}</p>}
+   * </Selector>
+   */
+  <TSelected>(props: props<TResolvedStep, TSteps, TChosenSteps, TSelected>) => React.ReactNode;
+  function create<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>>(createCtx: () => Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>, subscribe: (listener: () => void) => () => void): react0.MemoExoticComponent<component<TResolvedStep, TSteps, TChosenSteps>>;
+}
+//#endregion
+export { selector };
+//# sourceMappingURL=selector.d.cts.map

package/dist/selector.d.mts

@@ -0,0 +1,30 @@
+import { SelectorFn } from "./hooks/use-selector.mjs";
+import { AnyResolvedStep, Expand, HelperFnChosenSteps, HelperFnCtx, StepNumbers } from "@jfdevelops/multi-step-form-core";
+import * as react0 from "react";
+
+//#region src/selector.d.ts
+declare namespace selector {
+  type props<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>, TSelected> = {
+    selector: SelectorFn<TResolvedStep, TSteps, TChosenSteps, TSelected>;
+    children?: (selected: TSelected) => React.ReactNode;
+  };
+  type component<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>> =
+  /**
+   * A component for reactively displaying a value from the form context.
+   * Unlike `useSelector`, this component only re-renders itself, not the parent component.
+   * Use this when you want to display a reactive value without causing parent re-renders.
+   *
+   * @param selector - A function that receives the current step's context and returns the selected value
+   * @param children - Optional render prop that receives the selected value
+   *
+   * @example
+   * <Selector selector={(ctx) => ctx.step1.fields.firstName.defaultValue}>
+   *   {(value) => <p>First name: {value}</p>}
+   * </Selector>
+   */
+  <TSelected>(props: props<TResolvedStep, TSteps, TChosenSteps, TSelected>) => React.ReactNode;
+  function create<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>>(createCtx: () => Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>, subscribe: (listener: () => void) => () => void): react0.MemoExoticComponent<component<TResolvedStep, TSteps, TChosenSteps>>;
+}
+//#endregion
+export { selector };
+//# sourceMappingURL=selector.d.mts.map

package/dist/selector.mjs

@@ -0,0 +1,22 @@
+import { createUseSelector } from "./hooks/use-selector.mjs";
+import { createElement, memo } from "react";
+import { Fragment } from "react/jsx-runtime";
+
+//#region src/selector.tsx
+let selector;
+(function(_selector) {
+	function create(createCtx, subscribe) {
+		const useSelector = createUseSelector(createCtx, subscribe);
+		const Selector = ({ selector: selector$1, children }) => {
+			const selected = useSelector(selector$1);
+			if (children) return createElement(Fragment, null, children(selected));
+			return createElement(Fragment, null, String(selected ?? ""));
+		};
+		return memo(Selector, () => false);
+	}
+	_selector.create = create;
+})(selector || (selector = {}));
+
+//#endregion
+export { selector };
+//# sourceMappingURL=selector.mjs.map

package/dist/selector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"selector.mjs","names":["Selector: component<TResolvedStep, TSteps, TChosenSteps>","selector"],"sources":["../src/selector.tsx"],"sourcesContent":["import {\n  AnyResolvedStep,\n  StepNumbers,\n  HelperFnChosenSteps,\n  Expand,\n  HelperFnCtx,\n} from '@jfdevelops/multi-step-form-core';\nimport { createUseSelector, SelectorFn } from './hooks/use-selector';\nimport { Fragment } from 'react/jsx-runtime';\nimport { createElement, memo } from 'react';\n\nexport namespace selector {\n  export type props<\n    TResolvedStep extends AnyResolvedStep,\n    TSteps extends StepNumbers<TResolvedStep>,\n    TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>,\n    TSelected\n  > = {\n    selector: SelectorFn<TResolvedStep, TSteps, TChosenSteps, TSelected>;\n    children?: (selected: TSelected) => React.ReactNode;\n  };\n  export type component<\n    TResolvedStep extends AnyResolvedStep,\n    TSteps extends StepNumbers<TResolvedStep>,\n    TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n  > =\n    /**\n     * A component for reactively displaying a value from the form context.\n     * Unlike `useSelector`, this component only re-renders itself, not the parent component.\n     * Use this when you want to display a reactive value without causing parent re-renders.\n     *\n     * @param selector - A function that receives the current step's context and returns the selected value\n     * @param children - Optional render prop that receives the selected value\n     *\n     * @example\n     * <Selector selector={(ctx) => ctx.step1.fields.firstName.defaultValue}>\n     *   {(value) => <p>First name: {value}</p>}\n     * </Selector>\n     */\n    <TSelected>(\n      props: props<TResolvedStep, TSteps, TChosenSteps, TSelected>\n    ) => React.ReactNode;\n\n  export function create<\n    TResolvedStep extends AnyResolvedStep,\n    TSteps extends StepNumbers<TResolvedStep>,\n    TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n  >(\n    createCtx: () => Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>,\n    subscribe: (listener: () => void) => () => void\n  ) {\n    const useSelector = createUseSelector(createCtx, subscribe);\n    const Selector: component<TResolvedStep, TSteps, TChosenSteps> = ({\n      selector,\n      children,\n    }) => {\n      const selected = useSelector(selector);\n\n      if (children) {\n        return createElement(Fragment, null, children(selected));\n      }\n      return createElement(Fragment, null, String(selected ?? ''));\n    };\n\n    return memo(\n      Selector,\n      // Always return false to allow re-renders when the selected value changes\n      // The memoization is just to prevent re-renders when parent re-renders\n      () => false\n    );\n  }\n}\n"],"mappings":";;;;;;;CA2CS,SAAS,OAKd,WACA,WACA;EACA,MAAM,cAAc,kBAAkB,WAAW,UAAU;EAC3D,MAAMA,YAA4D,EAChE,sBACA,eACI;GACJ,MAAM,WAAW,YAAYC,WAAS;AAEtC,OAAI,SACF,QAAO,cAAc,UAAU,MAAM,SAAS,SAAS,CAAC;AAE1D,UAAO,cAAc,UAAU,MAAM,OAAO,YAAY,GAAG,CAAC;;AAG9D,SAAO,KACL,gBAGM,MACP"}

package/dist/step-schema.cjs

@@ -1,5 +1,7 @@
 const require_field = require('./field.cjs');
 const require_form_config = require('./form-config.cjs');
+const require_use_selector = require('./hooks/use-selector.cjs');
+const require_selector = require('./selector.cjs');
 const require_utils = require('./utils.cjs');
 let __jfdevelops_multi_step_form_core = require("@jfdevelops/multi-step-form-core");
 let __jfdevelops_multi_step_form_core__internals = require("@jfdevelops/multi-step-form-core/_internals");
@@ -43,12 +45,11 @@ var MultiStepFormStepSchema = class extends __jfdevelops_multi_step_form_core.Mu
 			const key = `step${step}`;
 			const stepData = [key];
 			const id = form?.id ?? key;
-			const ctx = (0, __jfdevelops_multi_step_form_core.createCtx)(this.value, stepData);
 			return { createComponent: this.createStepSpecificComponentFactory(stepData, {
 				isStepSpecific: true,
 				defaultId: id,
 				form
-			}, ctx) };
+			}) };
 		});
 	}
 	createFormComponent(form, defaultId) {
@@ -59,18 +60,30 @@ var MultiStepFormStepSchema = class extends __jfdevelops_multi_step_form_core.Mu
 		};
 		return (props) => render(ctx, props);
 	}
-	createStepSpecificComponentImpl(stepData, config, input, extraInput = {}) {
+	createResolvedCtx(options) {
+		const { logger, stepData, ctxData } = options;
+		let resolvedCtx = (0, __jfdevelops_multi_step_form_core.createCtx)(this.value, stepData);
+		if (ctxData) {
+			const [targetStep] = stepData;
+			const { [targetStep]: _, ...values } = this.value;
+			resolvedCtx = require_utils.resolvedCtxCreator(logger, values)({
+				ctx: resolvedCtx,
+				ctxData
+			});
+		}
+		return resolvedCtx;
+	}
+	createStepSpecificComponentImpl(stepData, config, extraConfig) {
 		return (fn) => ((props) => {
-			const hookResults = {};
-			for (const [key, value] of Object.entries(extraInput)) if (typeof value === "function") try {
-				hookResults[key] = value();
-			} catch (error) {
-				const errorMessage = error instanceof Error ? error.message : String(error);
-				throw new Error(`[multi-step-form] Error calling hook "${key}" in useFormInstance.render: ${errorMessage}\n\nThis usually means:\n1. The hook is being called outside of a React component\n2. The hook has invalid dependencies or configuration\n3. There's an error in your hook implementation\n\nOriginal error: ${errorMessage}`, { cause: error });
-			}
-			else hookResults[key] = value;
+			const ctxData = extraConfig?.ctxData;
+			const logger = extraConfig?.logger ?? new __jfdevelops_multi_step_form_core.MultiStepFormLogger();
+			const resolvedCtx = this.createResolvedCtx({
+				stepData,
+				ctxData,
+				logger
+			});
+			const hookResults = require_utils.getValidatedCustomInputHooks(extraConfig?.input?.(resolvedCtx) ?? {});
 			const { defaultId, form } = config;
-			const { ctx } = input;
 			const [step] = stepData;
 			(0, __jfdevelops_multi_step_form_core.invariant)(this.steps.isValidStepKey(step), `[createComponent]: the target step ${step} is invalid. Note, this error shouldn't appear as the target step should always be valid. If you see this error, please open an issue.`);
 			const stepNumber = Number.parseInt(step.replace("step", ""));
@@ -78,14 +91,14 @@ var MultiStepFormStepSchema = class extends __jfdevelops_multi_step_form_core.Mu
 			const current = this.value[step];
 			(0, __jfdevelops_multi_step_form_core.invariant)("fields" in current, `[${step}:createComponent]: unable to find the "fields" for the current step`);
 			(0, __jfdevelops_multi_step_form_core.invariant)(typeof current.fields === "object", `[${step}:createComponent]: the "fields" property must be an object, was ${typeof current.fields}`);
-			const stepUpdater = this.#internal.createStepUpdaterFn(step);
 			const Field = require_field.field.create((name) => {
-				const currentFields = Object.keys(current.fields);
+				const currentStep = this.value[step];
+				const currentFields = Object.keys(currentStep.fields);
 				(0, __jfdevelops_multi_step_form_core.invariant)(typeof name === "string", (formatter) => `[${step}:Field]: the "name" prop must be a string and a valid field for ${step}. Available fields include: "${formatter.format(currentFields)}"`);
-				(0, __jfdevelops_multi_step_form_core.invariant)(name in current.fields, (formatter) => `[${step}:Field]: the field "${name}" doesn't exist for the current step. Available fields include: "${formatter.format(currentFields)}".`);
-				(0, __jfdevelops_multi_step_form_core.invariant)("update" in current, `[${step}:Field]: No "update" function was found`);
+				(0, __jfdevelops_multi_step_form_core.invariant)(name in currentStep.fields, (formatter) => `[${step}:Field]: the field "${name}" doesn't exist for the current step. Available fields include: "${formatter.format(currentFields)}".`);
+				(0, __jfdevelops_multi_step_form_core.invariant)("update" in currentStep, `[${step}:Field]: No "update" function was found`);
 				const defaultValue = this.getValue(step, name);
-				const { label, nameTransformCasing, type } = current.fields[name];
+				const { label, nameTransformCasing, type } = currentStep.fields[name];
 				const targetFields = `fields.${name}.defaultValue`;
 				return {
 					defaultValue,
@@ -108,12 +121,24 @@ var MultiStepFormStepSchema = class extends __jfdevelops_multi_step_form_core.Mu
 						targetStep: step
 					})
 				};
-			});
+			}, this.subscribe, (name) => this.getValue(step, name));
+			const useSelector = require_use_selector.createUseSelector(() => this.createResolvedCtx({
+				stepData,
+				ctxData,
+				logger
+			}), this.subscribe);
+			const Selector = require_selector.selector.create(() => this.createResolvedCtx({
+				stepData,
+				ctxData,
+				logger
+			}), this.subscribe);
 			let fnInput = {
-				ctx,
-				onInputChange: stepUpdater,
+				ctx: resolvedCtx,
+				onInputChange: this.#internal.createStepUpdaterFn(step),
 				reset: this.#internal.createStepResetterFn(step),
 				Field,
+				useSelector,
+				Selector,
 				...hookResults
 			};
 			if (form) {
@@ -131,23 +156,14 @@ var MultiStepFormStepSchema = class extends __jfdevelops_multi_step_form_core.Mu
 			}, props);
 		});
 	}
-	createStepSpecificComponentFactory(stepData, config, ctx) {
+	createStepSpecificComponentFactory(stepData, config) {
 		const createStepSpecificComponentImpl = this.createStepSpecificComponentImpl.bind(this);
 		const createDefaultValues$1 = this.createDefaultValues.bind(this);
-		const resolvedValues = this.value;
 		const [targetStep] = stepData;
-		const update = this.#internal.createStepUpdaterFn(targetStep).bind(this.#internal);
-		const reset = this.#internal.createStepResetterFn(targetStep).bind(this.#internal);
 		function impl(optionsOrFn, fn) {
-			function createResolvedCtx(additionalCtx) {
-				return additionalCtx ? { ctx: {
-					...ctx,
-					...additionalCtx
-				} } : { ctx };
-			}
 			function createStepSpecificComponent() {
 				(0, __jfdevelops_multi_step_form_core.invariant)(typeof optionsOrFn === "function", "The first argument must be a function");
-				return createStepSpecificComponentImpl(stepData, config, createResolvedCtx(void 0))(optionsOrFn);
+				return createStepSpecificComponentImpl(stepData, config)(optionsOrFn);
 			}
 			if (typeof optionsOrFn === "object") {
 				const { useFormInstance, ctxData, debug } = optionsOrFn;
@@ -158,34 +174,25 @@ var MultiStepFormStepSchema = class extends __jfdevelops_multi_step_form_core.Mu
 					}
 				});
 				logger.info("First argument is an object");
-				const { [targetStep]: _, ...values } = resolvedValues;
 				(0, __jfdevelops_multi_step_form_core.invariant)(typeof fn === "function", "The second argument must be a function");
-				const createdCtx = require_utils.resolvedCtxCreator(logger, values);
 				if (useFormInstance) {
 					const { render, alias = StepSpecificComponent.DEFAULT_FORM_INSTANCE_ALIAS } = useFormInstance;
 					const [step] = stepData;
-					const defaultValues = createDefaultValues$1(step);
-					const resolvedCtx = ctxData ? createdCtx({
-						ctx,
-						ctxData
-					}) : ctx;
-					const renderInput = {
-						ctx: resolvedCtx,
-						defaultValues
-					};
 					return createStepSpecificComponentImpl(stepData, config, {
-						ctx: resolvedCtx,
-						update,
-						reset
-					}, { [alias]: () => render(renderInput) })(fn);
+						logger,
+						ctxData,
+						input: (ctx) => {
+							const defaultValues = createDefaultValues$1(step);
+							return { [alias]: () => render({
+								ctx,
+								defaultValues
+							}) };
+						}
+					})(fn);
 				}
 				if (ctxData) return createStepSpecificComponentImpl(stepData, config, {
-					ctx: createdCtx({
-						ctx,
-						ctxData
-					}),
-					update,
-					reset
+					logger,
+					ctxData
 				})(fn);
 				return createStepSpecificComponent();
 			}