@parallelworks/ui 0.19.1 → 0.21.0

package/dist/form/Form.js

@@ -8,10 +8,10 @@ import SectionHeader from "../components/SectionHeader.js";
 import { Table } from "../components/Table.js";
 import { useFieldControlProps, useFieldRequired } from "./fieldContext.js";
 import { resolvedFlag } from "./lib.js";
+import { getValueUsingPath } from "./utils/getValueUsingPath.js";
 import { FieldRegistryContext, Registry } from "./fieldRegistry.js";
 import { useParsedOpts } from "./useParsedOpts.js";
 import { usePrevious } from "./usePrevious.js";
-import { getValueUsingPath } from "./utils/getValueUsingPath.js";
 import { getParentValue } from "./utils/getParentValue.js";
 import { parseWizardConfig } from "./Wizard/utils.js";
 import { WizardContainer } from "./Wizard/WizardContainer.js";
@@ -71,8 +71,7 @@ function collectFieldsWithDefaults(options, values = {}, prefix = "") {
 	if (!options || typeof options !== "object") return result;
 	for (const [fieldName, rawField] of Object.entries(options)) {
 		const field = asSchemaField(rawField);
-		if (!field) continue;
-		if (fieldName === "$meta") continue;
+		if (fieldName === "$meta" || !field) continue;
 		const fullName = prefix ? `${prefix}${fieldName}` : fieldName;
 		if (field.type === "group") {
 			const groupItems = field.items || field.options;
@@ -200,7 +199,7 @@ function GroupHeader({ children, open, setOpen, title }) {
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
 			"aria-expanded": open,
-			className: cx("w-full flex items-center text-left transform ease-in transition cursor-pointer"),
+			className: "w-full flex items-center text-left transform ease-in transition cursor-pointer",
 			onClick: () => setOpen((open) => !open),
 			children: [/* @__PURE__ */ jsx(AngleRightIcon, { className: cx(open && "transform rotate-90 ", "px-1 text-[1.25rem]  transition ease-in ") }), /* @__PURE__ */ jsx("span", { children: title })]
 		}), children]
@@ -224,7 +223,7 @@ function getClosestParentIndex(parentPath) {
 	for (let i = parentPath.length - 1; i >= 0; i--) if (parentPath[i] === "]") {
 		let j = i - 1;
 		while (j >= 0 && parentPath[j] !== "[") j--;
-		return parseInt(parentPath.slice(j + 1, i));
+		return parseInt(parentPath.slice(j + 1, i), 10);
 	}
 }
 function MultiSelectionDropdown({ name, label = "", invalid = false, options: initialOptions = [], setFormDirty, onChange, parentValue }) {
@@ -232,30 +231,25 @@ function MultiSelectionDropdown({ name, label = "", invalid = false, options: in
 	const required = useFieldRequired();
 	const controlProps = useFieldControlProps();
 	const { setFieldValue } = useFormikContext();
-	const options = useMemo(() => {
-		return initialOptions.map((option) => {
-			const op = typeof option === "string" ? {
-				label: option,
-				value: option,
-				selected: false
-			} : { ...option };
-			if (field.value?.includes(op.value)) op.selected = true;
-			return op;
-		});
-	}, [initialOptions, field.value]);
+	const options = useMemo(() => initialOptions.map((option) => {
+		const op = typeof option === "string" ? {
+			label: option,
+			value: option
+		} : option;
+		return {
+			...op,
+			selected: !!field.value?.includes(op.value) || !!op.selected
+		};
+	}), [initialOptions, field.value]);
 	const handleOptionSelected = (selectedValue) => {
-		let selected = [];
-		if (field.value) selected = [...field.value];
-		selected.push(selectedValue);
-		setFieldValue(name, selected);
-		if (onChange) onChange(options);
+		setFieldValue(name, [...field.value ?? [], selectedValue]);
+		onChange?.(options);
 		setFormDirty(true);
 	};
 	const t = useStrings().common;
 	const handleRemoveOption = (key) => {
-		const selected = [...field.value.filter((item) => item !== key)];
-		setFieldValue(name, selected);
-		if (onChange) onChange(options);
+		setFieldValue(name, field.value.filter((item) => item !== key));
+		onChange?.(options);
 		setFormDirty(true);
 	};
 	const prevParent = usePrevious(parentValue);
@@ -279,7 +273,7 @@ function MultiSelectionDropdown({ name, label = "", invalid = false, options: in
 	}), /* @__PURE__ */ jsx(Table, { children: field.value && field.value.length > 0 ? options.filter((option) => option.selected).map((option) => {
 		return /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx(Table.Item, {
 			className: "w-full",
-			children: option?.label
+			children: option.label
 		}), /* @__PURE__ */ jsx(Table.Item, { children: /* @__PURE__ */ jsx("button", {
 			type: "button",
 			"aria-label": t.remove,
@@ -296,9 +290,8 @@ function MultiSelectionDropdown({ name, label = "", invalid = false, options: in
 var InputField = React.memo(function InputField({ label, field, setFormDirty, onChange, disabled = false, labelPosition = "left", missingFields = [], computeOn, spaceCompact = false, workflowForm = false, setFieldValue, setFieldTouched, values, currentValue }) {
 	const prevField = useRef(field);
 	const fieldObj = useMemo(() => {
-		if (deepEqual(prevField.current, field)) return prevField.current;
-		prevField.current = field;
-		return { ...field };
+		if (!deepEqual(prevField.current, field)) prevField.current = field;
+		return prevField.current;
 	}, [field]);
 	const tooltipComponent = useMemo(() => {
 		if (!fieldObj.tooltip) return null;
@@ -340,7 +333,7 @@ function FormikStateBridge({ onChange }) {
 	const prevEmitted = useRef(null);
 	useEffect(() => {
 		const { editorKeyPostfix: _, ...next } = values;
-		if (prevEmitted.current !== null && prevEmitted.current !== void 0 && deepEqual(prevEmitted.current, next)) return;
+		if (prevEmitted.current !== null && deepEqual(prevEmitted.current, next)) return;
 		prevEmitted.current = next;
 		onChange(next);
 	}, [values, onChange]);
@@ -374,18 +367,8 @@ function useFieldParse(optionsField, values, arrayIndex) {
 		c.result = null;
 	}
 	if (!c.hasExpressions) return optionsField;
-	if (c.inputDeps.size === 0) {
-		if (c.result !== null) return c.result;
-	}
 	if (c.result !== null) {
-		let changed = arrayIndex !== c.lastIndex;
-		if (!changed) {
-			for (const key of c.inputDeps) if (!deepEqual(values[key], c.lastRelevant[key])) {
-				changed = true;
-				break;
-			}
-		}
-		if (!changed) return c.result;
+		if (c.inputDeps.size === 0 || arrayIndex === c.lastIndex && [...c.inputDeps].every((key) => deepEqual(values[key], c.lastRelevant[key]))) return c.result;
 	}
 	c.result = engine.evaluate({
 		inputs: values,
@@ -398,7 +381,7 @@ function useFieldParse(optionsField, values, arrayIndex) {
 	for (const key of c.inputDeps) c.lastRelevant[key] = values[key];
 	return c.result;
 }
-var FormField = React.memo(function FormField({ id, optionsField, fieldName, values, setFormDirty, setFieldValue, setFieldTouched, parentInfo, labelPosition = "left", missingFields = [], spaceCompact = false, workflowForm = false }) {
+var FormField = React.memo(function FormField({ optionsField, fieldName, values, setFormDirty, setFieldValue, setFieldTouched, parentInfo, labelPosition = "left", missingFields = [], spaceCompact = false, workflowForm = false }) {
 	const parsedField = useFieldParse(optionsField, values, parentInfo?.arrayIndex);
 	const field = asSchemaField(parentInfo ? parsedField : optionsField);
 	if (field === null) return null;
@@ -409,41 +392,34 @@ var FormField = React.memo(function FormField({ id, optionsField, fieldName, val
 		name: fieldNamePrefix + fieldName,
 		optional: resolvedFlag(field.optional) ?? field.default !== void 0
 	};
-	if (!fieldObj["name"] || fieldName === "v3") return null;
+	if (!fieldObj.name || fieldName === "v3") return null;
 	if (field.hidden === true || !field.type) {
-		if (resolvedFlag(field.ignore) && !workflowForm) deleteFieldByPath(values, fieldObj["name"]);
+		if (resolvedFlag(field.ignore) && !workflowForm) deleteFieldByPath(values, fieldObj.name);
 		return null;
 	}
-	if (!field.type && field.options) fieldObj["type"] = "dropdown";
 	let onChange;
 	if (field.one_must_be_true && parentInfo?.onChange) {
 		const parentOnChange = parentInfo.onChange;
 		const parentArrayIndex = parentInfo.arrayIndex ?? 0;
-		const fieldOptions = fieldObj["options"];
+		const fieldOptions = fieldObj.options;
 		onChange = (val) => parentOnChange(fieldName, parentArrayIndex, flagValue(fieldOptions?.["offOption"], false), flagValue(fieldOptions?.["onOption"], true), val);
 	}
 	if (field.show_if !== void 0 || field.show_if_not !== void 0) {
-		let index;
-		if (parentInfo) {
-			if (!parentInfo?.arrayIndex) index = getClosestParentIndex(parentInfo.fieldNamePrefix);
-			else index = parentInfo.arrayIndex;
-		}
+		const index = parentInfo ? parentInfo.arrayIndex || getClosestParentIndex(parentInfo.fieldNamePrefix) : void 0;
 		let shouldShowField = true;
-		if (field.show_if !== void 0) shouldShowField = !!getParentValue(index, field.show_if, values, "", field);
-		if (shouldShowField && field.show_if_not !== void 0) shouldShowField = !getParentValue(index, field.show_if_not, values, "", field);
+		if (field.show_if !== void 0) shouldShowField = !!getParentValue(index, field.show_if, values, field);
+		if (shouldShowField && field.show_if_not !== void 0) shouldShowField = !getParentValue(index, field.show_if_not, values, field);
 		if (!shouldShowField) {
-			if (!workflowForm) deleteFieldByPath(values, fieldObj["name"]);
+			if (!workflowForm) deleteFieldByPath(values, fieldObj.name);
 			return null;
 		}
 	}
-	if (field.depends_on) {
-		if (parentInfo?.arrayIndex !== void 0) fieldObj["depends_on"] = field.depends_on.replace("[index]", `[${parentInfo.arrayIndex}]`);
-	}
+	if (field.depends_on && parentInfo?.arrayIndex !== void 0) fieldObj.depends_on = field.depends_on.replace("[index]", `[${parentInfo.arrayIndex}]`);
 	if (field.enable_if && field.disabled === false) {
 		if (typeof field.enable_if === "string") {
 			let path = field.enable_if;
 			if (parentInfo?.arrayIndex !== void 0) path = field.enable_if.replace("[index]", `[${parentInfo.arrayIndex}]`);
-			if (getValueUsingPath(values, path) === false) fieldObj["disabled"] = true;
+			if (getValueUsingPath(values, path) === false) fieldObj.disabled = true;
 		}
 	}
 	if (field.type === "group") {
@@ -477,51 +453,51 @@ var FormField = React.memo(function FormField({ id, optionsField, fieldName, val
 					})
 				})
 			})
-		}, fieldObj["name"]);
+		});
 	}
 	if (typeof field.type === "object" && field.depends_on) {
 		const parentValue = getValueUsingPath(values, field.depends_on);
 		const resolvedType = field.type[String(parentValue)];
 		if (!resolvedType) return null;
-		fieldObj["type"] = resolvedType;
+		fieldObj.type = resolvedType;
 	}
 	if (field.type === "range" && field.depends_on) {
 		const parentValue = getValueUsingPath(values, field.depends_on);
 		const { min, max } = field;
 		if (typeof min === "object" && typeof max === "object") {
-			fieldObj["min"] = min[String(parentValue)];
-			fieldObj["max"] = max[String(parentValue)];
+			fieldObj.min = min[String(parentValue)];
+			fieldObj.max = max[String(parentValue)];
 		}
 	}
 	if (field.resetOnChange) {
 		const parentValue = getValueUsingPath(values, field.resetOnChange);
 		const prevParentValue = field.prevParentValue;
-		if (prevParentValue !== void 0 && prevParentValue !== parentValue) deleteFieldByPath(values, fieldObj["name"]);
+		if (prevParentValue !== void 0 && prevParentValue !== parentValue) deleteFieldByPath(values, fieldObj.name);
 		field.prevParentValue = parentValue;
 	}
 	if (field.secondaryField) {
-		if (Array.isArray(field.secondaryField)) fieldObj["secondaryField"] = field.secondaryField.map((secondaryField) => fieldNamePrefix + secondaryField);
-		else fieldObj["secondaryField"] = fieldNamePrefix + field.secondaryField;
+		if (Array.isArray(field.secondaryField)) fieldObj.secondaryField = field.secondaryField.map((secondaryField) => fieldNamePrefix + secondaryField);
+		else fieldObj.secondaryField = fieldNamePrefix + field.secondaryField;
 	}
 	return /* @__PURE__ */ jsx("div", {
 		className: cx("flex w-full", labelPosition === "left" ? "mb-[15px]" : "mb-[5px]"),
 		children: /* @__PURE__ */ jsx(InputField, {
 			field: fieldObj,
-			label: fieldObj["label"],
+			label: fieldObj.label,
 			setFormDirty,
 			setFieldValue,
 			setFieldTouched,
 			values,
-			currentValue: getValueUsingPath(values, fieldObj["name"]),
+			currentValue: getValueUsingPath(values, fieldObj.name),
 			onChange,
-			disabled: Boolean(fieldObj["disabled"]),
-			computeOn: parentInfo?.computeOn || fieldObj["computeOn"],
+			disabled: Boolean(fieldObj.disabled),
+			computeOn: parentInfo?.computeOn || fieldObj.computeOn,
 			labelPosition,
 			missingFields,
 			spaceCompact,
 			workflowForm
 		})
-	}, `field-${id}`);
+	});
 }, (prev, next) => {
 	if (!deepEqual(prev.optionsField, next.optionsField)) return false;
 	if (prev.values !== next.values) return false;
@@ -533,8 +509,7 @@ var FormField = React.memo(function FormField({ id, optionsField, fieldName, val
 	return true;
 });
 function FieldsFromOptions({ options = {}, values, setFormDirty, setFieldValue, setFieldTouched, parentInfo, labelPosition = "left", missingFields = [], spaceCompact = false, workflowForm = false }) {
-	return Object.keys(options).map((fieldName, idx) => /* @__PURE__ */ jsx(FormField, {
-		id: idx,
+	return Object.keys(options).map((fieldName) => /* @__PURE__ */ jsx(FormField, {
 		optionsField: options[fieldName],
 		fieldName,
 		values,
@@ -552,27 +527,26 @@ var noop = () => {};
 function DynamicFormContent({ options, setValues, setFormDirty, labelPosition, missingFields, spaceCompact, organizationVariables, remoteVars, workflowForm, onSubmit, submitLabel, values, contextKey }) {
 	const { setFieldValue, setFieldTouched } = useFormikContext();
 	const opts = useParsedOpts(options, values, organizationVariables, void 0, void 0, remoteVars);
-	const handleChange = useCallback((state) => {
-		if (setValues) setValues(state);
-	}, [setValues]);
+	const handleChange = useCallback((state) => setValues?.(state), [setValues]);
 	const wizardConfig = parseWizardConfig(opts);
+	const meta = resolveMetaOverrides(options, labelPosition, spaceCompact);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx(DirtyStateBridge, { setFormDirty }),
 		/* @__PURE__ */ jsx(FormikStateBridge, { onChange: handleChange }),
 		/* @__PURE__ */ jsx(DynamicDefaultsSync, { options: opts }, contextKey ?? ""),
-		wizardConfig !== null && wizardConfig ? /* @__PURE__ */ jsx(WizardContainer, {
+		wizardConfig ? /* @__PURE__ */ jsx(WizardContainer, {
 			wizardConfig,
 			values,
 			onChange: handleChange,
 			onSubmit,
 			className: "w-full",
-			...resolveMetaOverrides(options, labelPosition, spaceCompact),
+			...meta,
 			missingFields,
 			workflowForm,
 			setFieldValue,
 			setFieldTouched
 		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FieldsFromOptions, {
-			...resolveMetaOverrides(options, labelPosition, spaceCompact),
+			...meta,
 			options: opts,
 			values,
 			setFormDirty,
@@ -591,7 +565,7 @@ function DynamicFormContent({ options, setValues, setFormDirty, labelPosition, m
 	] });
 }
 var NO_FIELDS = {};
-function DynamicForm({ formJSONs: options = {}, reinitialize = false, initialValues, setValues, setFormDirty = noop, formikRef, labelPosition = "left", missingFields = [], spaceCompact = false, organizationVariables, remoteVars, needsOrganizationVariables = false, onSubmit = void 0, submitLabel = "Submit", className = "w-full", workflowForm = false, contextKey, skipValueParse = false, fields = NO_FIELDS }) {
+function DynamicForm({ formJSONs: options = {}, reinitialize = false, initialValues, setValues, setFormDirty = noop, formikRef, labelPosition = "left", missingFields = [], spaceCompact = false, organizationVariables, remoteVars, needsOrganizationVariables = false, onSubmit, submitLabel = "Submit", className = "w-full", workflowForm = false, contextKey, skipValueParse = false, fields = NO_FIELDS }) {
 	const engine = useWorkflowEngine();
 	const [parseReady, setParseReady] = useState(() => engine.isReady());
 	useEffect(() => {

package/dist/form/SpecialTypes/DropdownWrapper.d.ts

@@ -8,9 +8,7 @@ export default function DropdownWrapper({ options, onChange, fieldObj, setFormDi
         disabled?: boolean | string | undefined;
         placeholder?: string | undefined;
         default?: unknown;
-        parentValue?: unknown;
         secondaryField?: string | string[] | undefined;
-        resetOnChange?: string | boolean | undefined;
         value?: string | undefined;
         autoselect?: boolean | string | Record<string, unknown> | undefined;
         allowCustomValue?: boolean | undefined;

package/dist/form/SpecialTypes/DropdownWrapper.js

@@ -2,7 +2,7 @@ import FormikCustomDropdown_default from "./FormikCustomDropdown.js";
 import { getPlaceholder } from "../utils/getPlaceholder.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/form/SpecialTypes/DropdownWrapper.tsx
-function DropdownWrapper({ options, onChange, fieldObj, setFormDirty, invalid = false, loading = false, disabled = void 0, allowCustomValue = void 0, currentValue, setFieldValue, setFieldTouched }) {
+function DropdownWrapper({ options, onChange, fieldObj, setFormDirty, invalid = false, loading = false, disabled, allowCustomValue, currentValue, setFieldValue, setFieldTouched }) {
 	return /* @__PURE__ */ jsx(FormikCustomDropdown_default, {
 		invalid,
 		className: "w-full",
@@ -14,9 +14,7 @@ function DropdownWrapper({ options, onChange, fieldObj, setFormDirty, invalid =
 		placeholder: getPlaceholder(fieldObj.placeholder, typeof fieldObj.default === "string" ? fieldObj.default : void 0),
 		name: fieldObj.name ?? "",
 		ariaLabel: fieldObj.label,
-		parentValue: fieldObj.parentValue,
 		secondaryField: fieldObj.secondaryField,
-		resetOnChange: fieldObj.resetOnChange,
 		value: fieldObj.value,
 		autoselect: fieldObj.autoselect === void 0 ? void 0 : Boolean(fieldObj.autoselect),
 		allowCustomValue: allowCustomValue ?? fieldObj.allowCustomValue,

package/dist/form/SpecialTypes/FormikCustomDropdown.d.ts

@@ -30,11 +30,9 @@ type FormikCustomDropdownProps = {
     options: React.ComponentProps<typeof Dropdown>['options'];
     setFormDirty: TSetFormDirty;
     onChange?: ((val: string) => void) | undefined;
-    parentValue?: unknown;
     className?: string;
     secondaryField?: string | string[] | undefined;
     disabled?: boolean;
-    resetOnChange?: string | boolean | undefined;
     loading?: boolean;
     invalid?: boolean;
     autoselect?: boolean | undefined;
@@ -46,7 +44,7 @@ type FormikCustomDropdownProps = {
     setFieldValue: (field: string, value: unknown, shouldValidate?: boolean) => void;
     setFieldTouched: (field: string, isTouched?: boolean, shouldValidate?: boolean) => void;
 };
-declare const _default: import("react").MemoExoticComponent<({ name, ariaLabel, options, setFormDirty, onChange, parentValue, className, secondaryField, disabled, loading, invalid, autoselect, value, allowCustomValue, customValueLabel, placeholder, currentValue, setFieldValue, setFieldTouched, }: FormikCustomDropdownProps) => import("react").JSX.Element>;
+declare const _default: import("react").MemoExoticComponent<({ name, ariaLabel, options, setFormDirty, onChange, className, secondaryField, disabled, loading, invalid, autoselect, value, allowCustomValue, customValueLabel, placeholder, currentValue, setFieldValue, setFieldTouched, }: FormikCustomDropdownProps) => import("react").JSX.Element>;
 export default _default;
 export declare const Testables: {
     toComparableOptions: typeof toComparableOptions;

package/dist/form/SpecialTypes/FormikCustomDropdown.js

@@ -41,23 +41,19 @@ function arePropsEqual(prev, next) {
 	} else if (prev[key] !== next[key]) return false;
 	return true;
 }
-var FormikCustomDropdown_default = memo(function FormikCustomDropdown({ name, ariaLabel, options, setFormDirty, onChange, parentValue, className, secondaryField, disabled = false, loading = false, invalid = false, autoselect, value, allowCustomValue = false, customValueLabel, placeholder, currentValue, setFieldValue, setFieldTouched }) {
+var FormikCustomDropdown_default = memo(function FormikCustomDropdown({ name, ariaLabel, options, setFormDirty, onChange, className, secondaryField, disabled = false, loading = false, invalid = false, autoselect, value, allowCustomValue = false, customValueLabel, placeholder, currentValue, setFieldValue, setFieldTouched }) {
 	const required = useFieldRequired();
 	const controlProps = useFieldControlProps();
-	const prevParentRef = useRef(parentValue);
 	const handleChange = (val) => {
 		if (secondaryField && typeof options[0] !== "string") {
 			const option = findSecondaryOption(options, val);
 			if (option) applySecondaryField(secondaryField, option.secondaryValue, setFieldValue);
 		}
-		if (onChange) onChange(val);
+		onChange?.(val);
 		setFieldValue(name, val);
 		setFieldTouched(name, true);
 		setFormDirty(true);
 	};
-	useEffect(() => {
-		prevParentRef.current = parentValue;
-	});
 	const prevOptions = useRef(null);
 	const syncAutoselect = useEffectEvent((options, autoselect) => {
 		if (deepEqual(prevOptions.current, toComparableOptions(options))) return;
@@ -68,7 +64,8 @@ var FormikCustomDropdown_default = memo(function FormikCustomDropdown({ name, ar
 		prevOptions.current = toComparableOptions(options);
 		if (autoselect === false || !options?.length) return;
 		if (autoselect === void 0) {
-			if (options.length && isCategory(options[0])) {
+			const [first] = options;
+			if (first && isCategory(first)) {
 				let optionCount = 0;
 				for (const category of options) {
 					if (isCategory(category)) optionCount += category.options.length;

package/dist/form/SpecialTypes/FormikCustomInput.js

@@ -1,7 +1,7 @@
 import { EyeIcon, EyeOffIcon } from "../../icons.js";
 import { useFieldControlProps, useFieldRequired } from "../fieldContext.js";
 import cx from "classnames";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useField, useFormikContext } from "formik";
 //#region src/form/SpecialTypes/FormikCustomInput.tsx
@@ -19,19 +19,21 @@ function FormikCustomInput({ name, type, step, placeholder, onChange, disabled,
 	useEffect(() => {
 		if (!isFocused.current) setLocalValue(value ?? field.value);
 	}, [field.value, value]);
-	const sanitizeName = useCallback((val) => {
-		if (sanitize === void 0) return lowercase ? val.toLowerCase() : val;
+	const sanitizeRegexp = useMemo(() => {
+		if (sanitize === void 0) return;
 		try {
-			const regexp = new RegExp(sanitize);
-			if (lowercase) val = val.toLowerCase();
-			return val.replace(regexp, "");
+			return new RegExp(sanitize, "g");
 		} catch {
 			console.error("Invalid regex for sanitization:", sanitize);
+			return;
 		}
-		return val;
-	}, [sanitize, lowercase]);
+	}, [sanitize]);
+	const sanitizeName = useCallback((val) => {
+		const cased = lowercase ? val.toLowerCase() : val;
+		return sanitizeRegexp ? cased.replace(sanitizeRegexp, "") : cased;
+	}, [sanitizeRegexp, lowercase]);
 	const flushToFormik = useCallback((val) => {
-		if (onChange) onChange(val);
+		onChange?.(val);
 		setFieldTouched(name, true);
 		setFieldValue(name, val);
 	}, [
@@ -41,11 +43,11 @@ function FormikCustomInput({ name, type, step, placeholder, onChange, disabled,
 		setFieldValue
 	]);
 	const handleChange = (e) => {
-		const text = sanitize ? sanitizeName(e.target.value) : e.target.value;
+		const text = sanitizeName(e.target.value);
 		let val = text;
 		if (type === "number") {
 			const parsed = parseFloat(text);
-			val = isNaN(parsed) ? void 0 : parsed;
+			val = Number.isNaN(parsed) ? void 0 : parsed;
 		}
 		if (type === "password" && val === "") val = defaultValue;
 		setLocalValue(val);

package/dist/form/Wizard/WizardContainer.js

@@ -20,10 +20,7 @@ function WizardContainer({ wizardConfig, values, onChange, onSubmit, className =
 		const errors = await validateForm();
 		const hasStepErrors = shouldFlatten ? stepFieldNames.some((fieldName) => errors[fieldName]) : stepFieldNames.some((fieldName) => hasNestedError(errors[stepKey], fieldName));
 		if (hasStepErrors) {
-			const touchedFields = stepFieldNames.reduce((acc, fieldName) => {
-				acc[fieldName] = true;
-				return acc;
-			}, {});
+			const touchedFields = Object.fromEntries(stepFieldNames.map((name) => [name, true]));
 			if (shouldFlatten) setTouched({
 				...touched,
 				...touchedFields
@@ -47,7 +44,7 @@ function WizardContainer({ wizardConfig, values, onChange, onSubmit, className =
 		validateStep: validateCurrentStep
 	});
 	const currentStepConfig = steps[currentStep];
-	const config_ = config.navigation || {};
+	const navigation = config.navigation ?? {};
 	const handleGoToNext = useCallback(async () => {
 		const success = await goToNext();
 		if (success) onChange?.(values);
@@ -57,22 +54,11 @@ function WizardContainer({ wizardConfig, values, onChange, onSubmit, className =
 		values,
 		onChange
 	]);
-	const handleJumpToStep = useCallback((stepKey) => {
-		if (!config_.allowJump || !visitedSteps.has(stepKey)) return false;
-		return jumpToStep(stepKey);
-	}, [
-		jumpToStep,
-		config_.allowJump,
-		visitedSteps
-	]);
 	const handleSubmit = useCallback(async () => {
 		if (!isLastStep) return;
 		const errors = await validateForm();
 		if (Object.keys(errors).length > 0) {
-			const touchedFields = Object.keys(values).reduce((acc, fieldName) => {
-				acc[fieldName] = true;
-				return acc;
-			}, {});
+			const touchedFields = Object.fromEntries(Object.keys(values).map((name) => [name, true]));
 			setTouched({
 				...touched,
 				...touchedFields
@@ -91,15 +77,15 @@ function WizardContainer({ wizardConfig, values, onChange, onSubmit, className =
 	return /* @__PURE__ */ jsxs("div", {
 		className,
 		children: [
-			config_.showSteps !== false && /* @__PURE__ */ jsx(WizardStepIndicator, {
+			navigation.showSteps !== false && /* @__PURE__ */ jsx(WizardStepIndicator, {
 				stepOrder,
 				currentStep,
 				steps,
 				visitedSteps,
 				invalidSteps,
-				onStepClick: handleJumpToStep,
-				allowJump: config_.allowJump,
-				hideStepNumbers: config_.hideStepNumbers
+				onStepClick: jumpToStep,
+				allowJump: navigation.allowJump,
+				hideStepNumbers: navigation.hideStepNumbers
 			}),
 			currentStepConfig && /* @__PURE__ */ jsx("div", {
 				className: "mb-4",
@@ -108,7 +94,6 @@ function WizardContainer({ wizardConfig, values, onChange, onSubmit, className =
 					stepConfig: currentStepConfig,
 					flatten: config.flatten,
 					values,
-					onValuesChange: onChange,
 					labelPosition,
 					missingFields,
 					spaceCompact,
@@ -119,9 +104,7 @@ function WizardContainer({ wizardConfig, values, onChange, onSubmit, className =
 				})
 			}),
 			/* @__PURE__ */ jsx(WizardNavigation, {
-				currentStep,
-				stepOrder,
-				canGoToNext: !isLastStep,
+				isLastStep,
 				canGoBack,
 				isCurrentStepValid: !invalidSteps.has(currentStep),
 				nextLabel: currentStepConfig?.nextLabel,

package/dist/form/Wizard/WizardNavigation.d.ts

@@ -1,2 +1,2 @@
 import type { WizardNavigationProps } from './types.js';
-export declare function WizardNavigation({ currentStep, stepOrder, canGoToNext, canGoBack, isCurrentStepValid, nextLabel, prevLabel, submitLabel, onNext, onPrevious, onSubmit, }: WizardNavigationProps): import("react").JSX.Element;
+export declare function WizardNavigation({ isLastStep, canGoBack, isCurrentStepValid, nextLabel, prevLabel, submitLabel, onNext, onPrevious, onSubmit, }: WizardNavigationProps): import("react").JSX.Element;

package/dist/form/Wizard/WizardNavigation.js

@@ -2,10 +2,9 @@ import Loader from "../../components/Loader.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/form/Wizard/WizardNavigation.tsx
-function WizardNavigation({ currentStep, stepOrder, canGoToNext, canGoBack, isCurrentStepValid, nextLabel, prevLabel, submitLabel = "Submit", onNext, onPrevious, onSubmit }) {
+function WizardNavigation({ isLastStep, canGoBack, isCurrentStepValid, nextLabel, prevLabel, submitLabel = "Submit", onNext, onPrevious, onSubmit }) {
 	const [isLoading, setIsLoading] = useState(false);
 	const [error, setError] = useState(null);
-	const isLastStep = stepOrder.indexOf(currentStep) === stepOrder.length - 1;
 	const handleNext = async () => {
 		setIsLoading(true);
 		setError(null);
@@ -44,7 +43,7 @@ function WizardNavigation({ currentStep, stepOrder, canGoToNext, canGoBack, isCu
 				backgroundColor: "var(--theme-app-bg)"
 			},
 			onMouseEnter: (e) => {
-				if (!(!canGoBack || isLoading)) e.currentTarget.style.backgroundColor = "var(--theme-hover)";
+				if (canGoBack && !isLoading) e.currentTarget.style.backgroundColor = "var(--theme-hover)";
 			},
 			onMouseLeave: (e) => {
 				e.currentTarget.style.backgroundColor = "var(--theme-app-bg)";
@@ -58,7 +57,7 @@ function WizardNavigation({ currentStep, stepOrder, canGoToNext, canGoBack, isCu
 			className: "px-8 py-3 rounded-lg font-medium transition-all duration-200 text-white flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg",
 			style: { backgroundColor: "var(--theme-element)" },
 			onMouseEnter: (e) => {
-				if (!(!isCurrentStepValid || isLoading)) e.currentTarget.style.filter = "brightness(0.9)";
+				if (isCurrentStepValid && !isLoading) e.currentTarget.style.filter = "brightness(0.9)";
 			},
 			onMouseLeave: (e) => {
 				e.currentTarget.style.filter = "brightness(1)";
@@ -71,11 +70,11 @@ function WizardNavigation({ currentStep, stepOrder, canGoToNext, canGoBack, isCu
 		}) : /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: handleNext,
-			disabled: !canGoToNext || isLoading,
+			disabled: isLoading,
 			className: "px-8 py-3 rounded-lg font-medium transition-all duration-200 text-white flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg",
 			style: { backgroundColor: "var(--theme-element)" },
 			onMouseEnter: (e) => {
-				if (!(!canGoToNext || isLoading)) e.currentTarget.style.filter = "brightness(0.9)";
+				if (!isLoading) e.currentTarget.style.filter = "brightness(0.9)";
 			},
 			onMouseLeave: (e) => {
 				e.currentTarget.style.filter = "brightness(1)";

package/dist/form/Wizard/WizardStepContent.d.ts

@@ -1,6 +1,6 @@
 import type { TSetFormDirty } from '../Form.js';
 import type { WizardStepContentProps } from './types.js';
-export declare function WizardStepContent({ currentStep, stepConfig, flatten, values, onValuesChange, setFormDirty, setFieldValue, setFieldTouched, ...fieldsProps }: WizardStepContentProps & {
+export declare function WizardStepContent({ currentStep, stepConfig, flatten, values, setFormDirty, setFieldValue, setFieldTouched, ...fieldsProps }: WizardStepContentProps & {
     setFormDirty: TSetFormDirty;
     setFieldValue: (field: string, value: unknown, shouldValidate?: boolean) => void;
     setFieldTouched: (field: string, touched?: boolean, shouldValidate?: boolean) => void;

package/dist/form/Wizard/WizardStepContent.js

@@ -1,8 +1,8 @@
 import { FieldsFromOptions } from "../Form.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/form/Wizard/WizardStepContent.tsx
-function WizardStepContent({ currentStep, stepConfig, flatten = true, values, onValuesChange, setFormDirty, setFieldValue, setFieldTouched, ...fieldsProps }) {
-	if (!stepConfig?.options) return null;
+function WizardStepContent({ currentStep, stepConfig, flatten = true, values, setFormDirty, setFieldValue, setFieldTouched, ...fieldsProps }) {
+	if (!stepConfig.options) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "mb-4 w-full",
 		children: [