@akinon/akifilter 1.2.0-next.1 → 1.2.0-next.11

package/dist/cjs/akifilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"akifilter.d.ts","sourceRoot":"","sources":["../../src/akifilter.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAGtB,OAAO,EAIL,WAAW,EAEX,IAAI,EAGL,MAAM,iBAAiB,CAAC;AAWzB,OAAO,KAAK,MAAM,OAAO,CAAC;AA0B1B,OAAO,KAAK,EAAkB,eAAe,EAAE,MAAM,SAAS,CAAC;AAY/D,KAAK,oBAAoB,GAAG,WAAW,CAAC;AA2DxC,MAAM,MAAM,cAAc,CACxB,YAAY,SAAS,oBAAoB,GAAG,oBAAoB,IAC9D;IACF;;OAEG;IACH,YAAY,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC7C;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACtC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,KAAK,IAAI,CAAC;IAClE;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAgsBF,eAAO,MAAM,SAAS;KACpB,YAAY,SAAS,oBAAoB,uBAElC,cAAc,CAAC,YAAY,CAAC;;CAmBpC,CAAC"}
+{"version":3,"file":"akifilter.d.ts","sourceRoot":"","sources":["../../src/akifilter.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAGtB,OAAO,EAIL,WAAW,EACX,IAAI,EAIL,MAAM,iBAAiB,CAAC;AAWzB,OAAO,KAAK,MAAM,OAAO,CAAC;AA0B1B,OAAO,KAAK,EAAkB,eAAe,EAAE,MAAM,SAAS,CAAC;AAY/D,KAAK,oBAAoB,GAAG,WAAW,CAAC;AA0HxC,MAAM,MAAM,cAAc,CACxB,YAAY,SAAS,oBAAoB,GAAG,oBAAoB,IAC9D;IACF;;OAEG;IACH,YAAY,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC7C;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACtC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,KAAK,IAAI,CAAC;IAClE;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAqwBF,eAAO,MAAM,SAAS;KACpB,YAAY,SAAS,oBAAoB,uBAElC,cAAc,CAAC,YAAY,CAAC;;CAmBpC,CAAC"}

package/dist/cjs/akifilter.js

@@ -37,6 +37,32 @@ const use_debounced_value_1 = require("./hooks/use-debounced-value");
 const i18n_1 = require("./i18n");
 const schema_1 = require("./utils/schema");
 const values_1 = require("./utils/values");
+const FilterFormItem = (_a) => {
+    var _b, _c;
+    var { children, control, name, valuePropName } = _a, props = __rest(_a, ["children", "control", "name", "valuePropName"]);
+    const { field, fieldState } = (0, akiform_1.useController)({ name, control });
+    const childrenWithProps = react_1.default.Children.map(children, child => {
+        if (react_1.default.isValidElement(child)) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const typedChild = child;
+            return react_1.default.cloneElement(typedChild, Object.assign(Object.assign(Object.assign({}, field), { 
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                onChange: (...params) => {
+                    var _a, _b;
+                    (_b = (_a = typedChild.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, params);
+                    field.onChange(...params);
+                }, onBlur: () => {
+                    var _a, _b;
+                    (_b = (_a = typedChild.props).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    field.onBlur();
+                }, ref: undefined }), (valuePropName && {
+                [valuePropName]: field.value
+            })));
+        }
+        return child;
+    });
+    return (react_1.default.createElement(akiform_1.Akiform.Item, Object.assign({}, props, { validateStatus: fieldState.invalid ? 'error' : undefined, help: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.help, className: props.className }), childrenWithProps));
+};
 /**
  * Checks if a field should be disabled based on config.disabled property.
  */
@@ -86,9 +112,15 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
     const schemaDefaults = react_1.default.useMemo(() => (0, schema_1.normaliseValuesBySchema)(flattenedSchema, (0, schema_1.extractDefaultValues)(flattenedSchema)), [flattenedSchema]);
     const externalDefaults = react_1.default.useMemo(() => (0, schema_1.normaliseValuesBySchema)(flattenedSchema, defaultValues), [flattenedSchema, defaultValues]);
     const baseDefaultValues = react_1.default.useMemo(() => (Object.assign(Object.assign({}, schemaDefaults), externalDefaults)), [schemaDefaults, externalDefaults]);
-    const persistedDefaults = react_1.default.useMemo(() => {
+    // Use state for persistedDefaults to make it reactive to localStorage changes
+    const [persistedDefaults, setPersistedDefaults] = react_1.default.useState(() => {
         var _a;
         return (0, schema_1.normaliseValuesBySchema)(flattenedSchema, (_a = (0, storage_1.readStoredValues)(regularFields, storageKey)) !== null && _a !== void 0 ? _a : undefined);
+    });
+    // Re-read from localStorage when storageKey changes
+    react_1.default.useEffect(() => {
+        var _a;
+        setPersistedDefaults((0, schema_1.normaliseValuesBySchema)(flattenedSchema, (_a = (0, storage_1.readStoredValues)(regularFields, storageKey)) !== null && _a !== void 0 ? _a : undefined));
     }, [flattenedSchema, regularFields, storageKey]);
     const mergedDefaultValues = react_1.default.useMemo(() => (Object.assign(Object.assign({}, baseDefaultValues), persistedDefaults)), [baseDefaultValues, persistedDefaults]);
     const formMethods = (0, akiform_1.useForm)({
@@ -187,8 +219,20 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
         (0, storage_1.writeVisibleKeys)(storageKey, visibleKeys);
         onVisibleFieldsChange === null || onVisibleFieldsChange === void 0 ? void 0 : onVisibleFieldsChange(visibleKeys);
     }, [visibleKeys, onVisibleFieldsChange, storageKey]);
+    // Track previous mergedDefaultValues to avoid unnecessary resets
+    const previousMergedDefaultValuesRef = react_1.default.useRef(null);
     react_1.default.useEffect(() => {
-        formMethods.reset(mergedDefaultValues);
+        const serialised = JSON.stringify(mergedDefaultValues);
+        // Skip if the values haven't actually changed (deep comparison)
+        if (previousMergedDefaultValuesRef.current === serialised) {
+            return;
+        }
+        // Skip reset on initial mount - useForm already uses defaultValues
+        if (previousMergedDefaultValuesRef.current === null) {
+            previousMergedDefaultValuesRef.current = serialised;
+            return;
+        }
+        previousMergedDefaultValuesRef.current = serialised;
     }, [formMethods, mergedDefaultValues]);
     const normalisedValues = react_1.default.useMemo(() => (0, values_1.normaliseOutputValues)(flattenedSchema, formValues), [flattenedSchema, formValues]);
     const hasInitialValuesRef = react_1.default.useRef(false);
@@ -245,6 +289,38 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
     react_1.default.useEffect(() => {
         lastPersistedValuesRef.current = null;
     }, [storageKey]);
+    // Track previous serialised values to detect field removals
+    const previousSerialisedValuesRef = react_1.default.useRef(serialisedValues);
+    // Immediate effect for field removals (bypasses debounce)
+    react_1.default.useEffect(() => {
+        const previous = previousSerialisedValuesRef.current;
+        const current = serialisedValues;
+        previousSerialisedValuesRef.current = current;
+        // Skip if this is the initial render
+        if (!hasEmittedValuesRef.current) {
+            return;
+        }
+        // Skip if values haven't actually changed
+        if (previous === current) {
+            return;
+        }
+        const prevParsed = JSON.parse(previous);
+        const currParsed = JSON.parse(current);
+        // Detect if a field was removed (existed in prev but not in current)
+        const prevKeys = Object.keys(prevParsed);
+        const currKeys = Object.keys(currParsed);
+        const removedKeys = prevKeys.filter(key => !currKeys.includes(key));
+        // If a field was removed, immediately persist and emit (bypass debounce)
+        if (removedKeys.length > 0) {
+            const nextSerialised = current;
+            persistValues(currParsed, nextSerialised);
+            lastPersistedValuesRef.current = nextSerialised;
+            currentSerialisedValuesRef.current = nextSerialised;
+            // Update persistedDefaults to prevent stale mergedDefaultValues on re-render
+            setPersistedDefaults(currParsed);
+            onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(currParsed);
+        }
+    }, [serialisedValues, onValuesChange, persistValues]);
     const handleClearAll = react_1.default.useCallback(() => {
         const clearedDefaults = Object.assign({}, schemaDefaults);
         flattenedSchema.forEach(field => {
@@ -303,24 +379,26 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
             return;
         }
         const defaultValue = schemaDefaults[String(schemaField.key)];
-        const fieldPath = schemaField.key;
         const nextValue = resolveClearedFieldValue(schemaField, defaultValue);
-        // Update the form value
-        formMethods.setValue(fieldPath, nextValue, {
-            shouldDirty: false,
-            shouldTouch: false,
-            shouldValidate: false
-        });
-        // Compute the updated values immediately (don't wait for debounce)
-        const currentValues = formMethods.getValues() || {};
-        const updatedFormValues = Object.assign(Object.assign({}, currentValues), { [fieldPath]: nextValue });
+        // Manually construct the updated form values instead of relying on setValue + getValues
+        // because setValue is batched and getValues() wouldn't reflect the change immediately
+        const currentFormValues = formMethods.getValues();
+        const updatedFormValues = Object.assign(Object.assign({}, currentFormValues), { [String(schemaField.key)]: nextValue });
+        // Normalize the values (removes empty/undefined entries)
         const nextValues = (0, values_1.normaliseOutputValues)(flattenedSchema, updatedFormValues);
+        // Update form state
+        formMethods.reset(updatedFormValues, {
+            keepDirty: false,
+            keepTouched: false,
+            keepValues: false
+        });
         const nextSerialised = JSON.stringify(nextValues);
         // Persist immediately (bypass debounce for remove action)
         persistValues(nextValues);
         // Update refs to mark this as the latest persisted state
         lastPersistedValuesRef.current = nextSerialised;
         currentSerialisedValuesRef.current = nextSerialised;
+        previousSerialisedValuesRef.current = nextSerialised; // Prevent immediate effect from re-emitting
         hasEmittedValuesRef.current = true;
         hasInitialValuesRef.current = Object.keys(nextValues).length > 0;
         // Emit the change to parent
@@ -387,7 +465,7 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
         }
     };
     const renderFormField = (field) => {
-        return (react_1.default.createElement(akiform_1.FormItem, { key: String(field.key), control: formMethods.control, name: field.key, tooltip: field.tooltip, help: field.help, labelDescription: field.labelDescription, required: Boolean(field.validation), className: "mb-0", valuePropName: field.type === 'checkbox' ? 'checked' : undefined }, renderFieldComponent(field)));
+        return (react_1.default.createElement(FilterFormItem, { key: String(field.key), control: formMethods.control, name: field.key, tooltip: field.tooltip, help: field.help, labelDescription: field.labelDescription, required: Boolean(field.validation), className: "mb-0", valuePropName: field.type === 'checkbox' ? 'checked' : undefined }, renderFieldComponent(field)));
     };
     return (react_1.default.createElement(ui_card_1.Card, { size: "small", className: "akinon-filter shadow", "data-testid": "akifilter-root" },
         react_1.default.createElement(antd_1.ConfigProvider, { theme: theme_overrides_1.themeOverrides },

package/dist/esm/akifilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"akifilter.d.ts","sourceRoot":"","sources":["../../src/akifilter.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAGtB,OAAO,EAIL,WAAW,EAEX,IAAI,EAGL,MAAM,iBAAiB,CAAC;AAWzB,OAAO,KAAK,MAAM,OAAO,CAAC;AA0B1B,OAAO,KAAK,EAAkB,eAAe,EAAE,MAAM,SAAS,CAAC;AAY/D,KAAK,oBAAoB,GAAG,WAAW,CAAC;AA2DxC,MAAM,MAAM,cAAc,CACxB,YAAY,SAAS,oBAAoB,GAAG,oBAAoB,IAC9D;IACF;;OAEG;IACH,YAAY,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC7C;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACtC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,KAAK,IAAI,CAAC;IAClE;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAgsBF,eAAO,MAAM,SAAS;KACpB,YAAY,SAAS,oBAAoB,uBAElC,cAAc,CAAC,YAAY,CAAC;;CAmBpC,CAAC"}
+{"version":3,"file":"akifilter.d.ts","sourceRoot":"","sources":["../../src/akifilter.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAGtB,OAAO,EAIL,WAAW,EACX,IAAI,EAIL,MAAM,iBAAiB,CAAC;AAWzB,OAAO,KAAK,MAAM,OAAO,CAAC;AA0B1B,OAAO,KAAK,EAAkB,eAAe,EAAE,MAAM,SAAS,CAAC;AAY/D,KAAK,oBAAoB,GAAG,WAAW,CAAC;AA0HxC,MAAM,MAAM,cAAc,CACxB,YAAY,SAAS,oBAAoB,GAAG,oBAAoB,IAC9D;IACF;;OAEG;IACH,YAAY,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC7C;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACtC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,KAAK,IAAI,CAAC;IAClE;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAqwBF,eAAO,MAAM,SAAS;KACpB,YAAY,SAAS,oBAAoB,uBAElC,cAAc,CAAC,YAAY,CAAC;;CAmBpC,CAAC"}

package/dist/esm/akifilter.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import './styles.css';
 import { akidate } from '@akinon/akidate';
-import { Akiform, FormItem, useForm, useWatch } from '@akinon/akiform';
+import { Akiform, useController, useForm, useWatch } from '@akinon/akiform';
 import { Button } from '@akinon/ui-button';
 import { Card } from '@akinon/ui-card';
 import { Checkbox } from '@akinon/ui-checkbox';
@@ -34,6 +34,32 @@ import { useDebouncedValue } from './hooks/use-debounced-value';
 import { i18n } from './i18n';
 import { deriveDefaultVisibleKeys, ensureSchemaOrder, extractDefaultValues, flattenSchema, getFieldAriaLabel, normaliseValuesBySchema, partitionSchema } from './utils/schema';
 import { normaliseOutputValues } from './utils/values';
+const FilterFormItem = (_a) => {
+    var _b, _c;
+    var { children, control, name, valuePropName } = _a, props = __rest(_a, ["children", "control", "name", "valuePropName"]);
+    const { field, fieldState } = useController({ name, control });
+    const childrenWithProps = React.Children.map(children, child => {
+        if (React.isValidElement(child)) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const typedChild = child;
+            return React.cloneElement(typedChild, Object.assign(Object.assign(Object.assign({}, field), { 
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                onChange: (...params) => {
+                    var _a, _b;
+                    (_b = (_a = typedChild.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, params);
+                    field.onChange(...params);
+                }, onBlur: () => {
+                    var _a, _b;
+                    (_b = (_a = typedChild.props).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    field.onBlur();
+                }, ref: undefined }), (valuePropName && {
+                [valuePropName]: field.value
+            })));
+        }
+        return child;
+    });
+    return (React.createElement(Akiform.Item, Object.assign({}, props, { validateStatus: fieldState.invalid ? 'error' : undefined, help: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.help, className: props.className }), childrenWithProps));
+};
 /**
  * Checks if a field should be disabled based on config.disabled property.
  */
@@ -83,9 +109,15 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
     const schemaDefaults = React.useMemo(() => normaliseValuesBySchema(flattenedSchema, extractDefaultValues(flattenedSchema)), [flattenedSchema]);
     const externalDefaults = React.useMemo(() => normaliseValuesBySchema(flattenedSchema, defaultValues), [flattenedSchema, defaultValues]);
     const baseDefaultValues = React.useMemo(() => (Object.assign(Object.assign({}, schemaDefaults), externalDefaults)), [schemaDefaults, externalDefaults]);
-    const persistedDefaults = React.useMemo(() => {
+    // Use state for persistedDefaults to make it reactive to localStorage changes
+    const [persistedDefaults, setPersistedDefaults] = React.useState(() => {
         var _a;
         return normaliseValuesBySchema(flattenedSchema, (_a = readStoredValues(regularFields, storageKey)) !== null && _a !== void 0 ? _a : undefined);
+    });
+    // Re-read from localStorage when storageKey changes
+    React.useEffect(() => {
+        var _a;
+        setPersistedDefaults(normaliseValuesBySchema(flattenedSchema, (_a = readStoredValues(regularFields, storageKey)) !== null && _a !== void 0 ? _a : undefined));
     }, [flattenedSchema, regularFields, storageKey]);
     const mergedDefaultValues = React.useMemo(() => (Object.assign(Object.assign({}, baseDefaultValues), persistedDefaults)), [baseDefaultValues, persistedDefaults]);
     const formMethods = useForm({
@@ -184,8 +216,20 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
         writeVisibleKeys(storageKey, visibleKeys);
         onVisibleFieldsChange === null || onVisibleFieldsChange === void 0 ? void 0 : onVisibleFieldsChange(visibleKeys);
     }, [visibleKeys, onVisibleFieldsChange, storageKey]);
+    // Track previous mergedDefaultValues to avoid unnecessary resets
+    const previousMergedDefaultValuesRef = React.useRef(null);
     React.useEffect(() => {
-        formMethods.reset(mergedDefaultValues);
+        const serialised = JSON.stringify(mergedDefaultValues);
+        // Skip if the values haven't actually changed (deep comparison)
+        if (previousMergedDefaultValuesRef.current === serialised) {
+            return;
+        }
+        // Skip reset on initial mount - useForm already uses defaultValues
+        if (previousMergedDefaultValuesRef.current === null) {
+            previousMergedDefaultValuesRef.current = serialised;
+            return;
+        }
+        previousMergedDefaultValuesRef.current = serialised;
     }, [formMethods, mergedDefaultValues]);
     const normalisedValues = React.useMemo(() => normaliseOutputValues(flattenedSchema, formValues), [flattenedSchema, formValues]);
     const hasInitialValuesRef = React.useRef(false);
@@ -242,6 +286,38 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
     React.useEffect(() => {
         lastPersistedValuesRef.current = null;
     }, [storageKey]);
+    // Track previous serialised values to detect field removals
+    const previousSerialisedValuesRef = React.useRef(serialisedValues);
+    // Immediate effect for field removals (bypasses debounce)
+    React.useEffect(() => {
+        const previous = previousSerialisedValuesRef.current;
+        const current = serialisedValues;
+        previousSerialisedValuesRef.current = current;
+        // Skip if this is the initial render
+        if (!hasEmittedValuesRef.current) {
+            return;
+        }
+        // Skip if values haven't actually changed
+        if (previous === current) {
+            return;
+        }
+        const prevParsed = JSON.parse(previous);
+        const currParsed = JSON.parse(current);
+        // Detect if a field was removed (existed in prev but not in current)
+        const prevKeys = Object.keys(prevParsed);
+        const currKeys = Object.keys(currParsed);
+        const removedKeys = prevKeys.filter(key => !currKeys.includes(key));
+        // If a field was removed, immediately persist and emit (bypass debounce)
+        if (removedKeys.length > 0) {
+            const nextSerialised = current;
+            persistValues(currParsed, nextSerialised);
+            lastPersistedValuesRef.current = nextSerialised;
+            currentSerialisedValuesRef.current = nextSerialised;
+            // Update persistedDefaults to prevent stale mergedDefaultValues on re-render
+            setPersistedDefaults(currParsed);
+            onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(currParsed);
+        }
+    }, [serialisedValues, onValuesChange, persistValues]);
     const handleClearAll = React.useCallback(() => {
         const clearedDefaults = Object.assign({}, schemaDefaults);
         flattenedSchema.forEach(field => {
@@ -300,24 +376,26 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
             return;
         }
         const defaultValue = schemaDefaults[String(schemaField.key)];
-        const fieldPath = schemaField.key;
         const nextValue = resolveClearedFieldValue(schemaField, defaultValue);
-        // Update the form value
-        formMethods.setValue(fieldPath, nextValue, {
-            shouldDirty: false,
-            shouldTouch: false,
-            shouldValidate: false
-        });
-        // Compute the updated values immediately (don't wait for debounce)
-        const currentValues = formMethods.getValues() || {};
-        const updatedFormValues = Object.assign(Object.assign({}, currentValues), { [fieldPath]: nextValue });
+        // Manually construct the updated form values instead of relying on setValue + getValues
+        // because setValue is batched and getValues() wouldn't reflect the change immediately
+        const currentFormValues = formMethods.getValues();
+        const updatedFormValues = Object.assign(Object.assign({}, currentFormValues), { [String(schemaField.key)]: nextValue });
+        // Normalize the values (removes empty/undefined entries)
         const nextValues = normaliseOutputValues(flattenedSchema, updatedFormValues);
+        // Update form state
+        formMethods.reset(updatedFormValues, {
+            keepDirty: false,
+            keepTouched: false,
+            keepValues: false
+        });
         const nextSerialised = JSON.stringify(nextValues);
         // Persist immediately (bypass debounce for remove action)
         persistValues(nextValues);
         // Update refs to mark this as the latest persisted state
         lastPersistedValuesRef.current = nextSerialised;
         currentSerialisedValuesRef.current = nextSerialised;
+        previousSerialisedValuesRef.current = nextSerialised; // Prevent immediate effect from re-emitting
         hasEmittedValuesRef.current = true;
         hasInitialValuesRef.current = Object.keys(nextValues).length > 0;
         // Emit the change to parent
@@ -384,7 +462,7 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
         }
     };
     const renderFormField = (field) => {
-        return (React.createElement(FormItem, { key: String(field.key), control: formMethods.control, name: field.key, tooltip: field.tooltip, help: field.help, labelDescription: field.labelDescription, required: Boolean(field.validation), className: "mb-0", valuePropName: field.type === 'checkbox' ? 'checked' : undefined }, renderFieldComponent(field)));
+        return (React.createElement(FilterFormItem, { key: String(field.key), control: formMethods.control, name: field.key, tooltip: field.tooltip, help: field.help, labelDescription: field.labelDescription, required: Boolean(field.validation), className: "mb-0", valuePropName: field.type === 'checkbox' ? 'checked' : undefined }, renderFieldComponent(field)));
     };
     return (React.createElement(Card, { size: "small", className: "akinon-filter shadow", "data-testid": "akifilter-root" },
         React.createElement(ConfigProvider, { theme: themeOverrides },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/akifilter",
-  "version": "1.2.0-next.1",
+  "version": "1.2.0-next.11",
   "private": false,
   "description": "Akifilter is a filtering library for Akinon frontend applications.",
   "type": "module",
@@ -14,31 +14,31 @@
     "react-error-boundary": "^6.0.0",
     "@akinon/akiform": "1.1.2",
     "@akinon/akilocale": "1.2.1",
-    "@akinon/ui-button": "1.4.0-next.1",
     "@akinon/icons": "1.1.2-next.1",
+    "@akinon/ui-button": "1.4.0-next.1",
     "@akinon/ui-card": "1.1.3-next.1",
     "@akinon/ui-checkbox": "1.3.3-next.1",
     "@akinon/ui-collapse": "1.3.2-next.1",
     "@akinon/ui-date-picker": "1.3.3-next.1",
-    "@akinon/ui-input-number": "1.3.3-next.1",
+    "@akinon/akidate": "1.1.3-next.0",
     "@akinon/ui-input": "1.1.3-next.1",
-    "@akinon/ui-select": "1.3.4-next.1",
-    "@akinon/ui-typography": "1.1.2-next.0",
+    "@akinon/ui-input-number": "1.3.3-next.1",
     "@akinon/ui-modal": "1.1.3-next.1",
+    "@akinon/ui-space": "1.3.3-next.1",
+    "@akinon/ui-select": "1.3.4-next.1",
     "@akinon/ui-pagination": "1.3.4-next.1",
-    "@akinon/akidate": "1.1.3-next.0",
-    "@akinon/ui-space": "1.3.3-next.1"
+    "@akinon/ui-typography": "1.1.2-next.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
     "typescript": "*",
-    "@akinon/utils": "1.1.4-next.1",
     "@akinon/akiform-builder": "1.3.5-next.1",
     "@akinon/typescript-config": "1.1.1",
-    "@akinon/vitest-config": "1.1.1",
-    "@akinon/ui-theme": "1.1.3-next.1"
+    "@akinon/ui-theme": "1.1.3-next.1",
+    "@akinon/utils": "1.1.4-next.1",
+    "@akinon/vitest-config": "1.1.1"
   },
   "peerDependencies": {
     "react": "^18 || ^19",