@akinon/akifilter 1.0.0 → 1.0.2

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;AAUzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAsB1B,OAAO,KAAK,EAAkB,eAAe,EAAE,MAAM,SAAS,CAAC;AAU/D,KAAK,oBAAoB,GAAG,WAAW,CAAC;AAExC,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;AAohBF,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,EAEX,IAAI,EAGL,MAAM,iBAAiB,CAAC;AAUzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAsB1B,OAAO,KAAK,EAAkB,eAAe,EAAE,MAAM,SAAS,CAAC;AAU/D,KAAK,oBAAoB,GAAG,WAAW,CAAC;AA0BxC,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;AAulBF,eAAO,MAAM,SAAS;KACpB,YAAY,SAAS,oBAAoB,uBAElC,cAAc,CAAC,YAAY,CAAC;;CAmBpC,CAAC"}

package/dist/cjs/akifilter.js

@@ -36,6 +36,23 @@ 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 resolveClearedFieldValue = (field, defaultValue) => {
+    if (defaultValue !== undefined) {
+        return defaultValue;
+    }
+    switch (field.type) {
+        case 'text':
+        case 'textarea':
+            return '';
+        case 'checkbox':
+            return false;
+        case 'date':
+        case 'select':
+            return null;
+        default:
+            return undefined;
+    }
+};
 const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onValuesChange, onVisibleFieldsChange, onImportCsv, onImportXls, onClearAll, enableImportCsv, enableImportXls }) => {
     const storageKey = react_1.default.useMemo(() => (0, storage_1.buildStorageKey)(filterSchema, storageNamespace), [filterSchema, storageNamespace]);
     const schemaDefaults = react_1.default.useMemo(() => (0, schema_1.normaliseValuesBySchema)(filterSchema, (0, schema_1.extractDefaultValues)(filterSchema)), [filterSchema]);
@@ -73,7 +90,7 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
             if (field.type === 'checkbox' && currentValue !== true) {
                 return acc;
             }
-            const label = field.placeholder || field.label || key;
+            const label = field.label || field.placeholder || key;
             const resolveSelectLabel = () => {
                 var _a;
                 if (!('options' in field) || !field.options) {
@@ -137,12 +154,25 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
         formMethods.reset(mergedDefaultValues);
     }, [formMethods, mergedDefaultValues]);
     const normalisedValues = react_1.default.useMemo(() => (0, values_1.normaliseOutputValues)(filterSchema, formValues), [filterSchema, formValues]);
-    const initialOutputValues = react_1.default.useMemo(() => (0, values_1.normaliseOutputValues)(filterSchema, mergedDefaultValues), [filterSchema, mergedDefaultValues]);
-    const hasInitialValues = react_1.default.useMemo(() => Object.keys(initialOutputValues).length > 0, [initialOutputValues]);
+    const hasInitialValuesRef = react_1.default.useRef(false);
+    react_1.default.useEffect(() => {
+        const initialValues = (0, values_1.normaliseOutputValues)(filterSchema, mergedDefaultValues);
+        hasInitialValuesRef.current = Object.keys(initialValues).length > 0;
+    }, [filterSchema, mergedDefaultValues]);
     const serialisedValues = react_1.default.useMemo(() => JSON.stringify(normalisedValues), [normalisedValues]);
     const debouncedSerialisedValues = (0, use_debounced_value_1.useDebouncedValue)(serialisedValues, constants_1.FILTER_DEBOUNCE_DELAY);
     const lastPersistedValuesRef = react_1.default.useRef(null);
     const hasEmittedValuesRef = react_1.default.useRef(false);
+    const persistValues = react_1.default.useCallback((values, serialised) => {
+        const nextSerialised = serialised !== null && serialised !== void 0 ? serialised : JSON.stringify(values);
+        lastPersistedValuesRef.current = nextSerialised;
+        if (Object.keys(values).length === 0) {
+            (0, storage_1.clearStoredValues)(storageKey);
+            return nextSerialised;
+        }
+        (0, storage_1.writeStoredValues)(storageKey, values);
+        return nextSerialised;
+    }, [storageKey]);
     react_1.default.useEffect(() => {
         if (debouncedSerialisedValues == null) {
             return;
@@ -153,30 +183,45 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
         }
         const parsedValues = JSON.parse(debouncedSerialisedValues);
         const isEmpty = Object.keys(parsedValues).length === 0;
-        if (!hasEmittedValuesRef.current && isEmpty && !hasInitialValues) {
+        if (!hasEmittedValuesRef.current &&
+            isEmpty &&
+            !hasInitialValuesRef.current) {
             hasEmittedValuesRef.current = true;
-            lastPersistedValuesRef.current = debouncedSerialisedValues;
-            (0, storage_1.clearStoredValues)(storageKey);
+            persistValues(parsedValues, debouncedSerialisedValues);
             return;
         }
         hasEmittedValuesRef.current = true;
-        lastPersistedValuesRef.current = debouncedSerialisedValues;
         onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(parsedValues);
-        if (isEmpty) {
-            (0, storage_1.clearStoredValues)(storageKey);
-        }
-        else {
-            (0, storage_1.writeStoredValues)(storageKey, parsedValues);
-        }
-    }, [debouncedSerialisedValues, hasInitialValues, onValuesChange, storageKey]);
+        persistValues(parsedValues, debouncedSerialisedValues);
+    }, [debouncedSerialisedValues, onValuesChange, persistValues]);
     react_1.default.useEffect(() => {
         lastPersistedValuesRef.current = null;
     }, [storageKey]);
     const handleClearAll = react_1.default.useCallback(() => {
-        formMethods.reset(baseDefaultValues);
+        const clearedDefaults = Object.assign({}, baseDefaultValues);
+        filterSchema.forEach(field => {
+            const key = String(field.key);
+            const defaultValue = baseDefaultValues[key];
+            const resolved = resolveClearedFieldValue(field, defaultValue);
+            if (resolved === undefined) {
+                delete clearedDefaults[key];
+            }
+            else {
+                clearedDefaults[key] = resolved;
+            }
+        });
+        formMethods.reset(clearedDefaults, {
+            keepDirty: false,
+            keepTouched: false
+        });
         onClearAll === null || onClearAll === void 0 ? void 0 : onClearAll();
-        (0, storage_1.clearStoredValues)(storageKey);
-    }, [baseDefaultValues, formMethods, onClearAll, storageKey]);
+        const nextValues = (0, values_1.normaliseOutputValues)(filterSchema, clearedDefaults);
+        hasInitialValuesRef.current = Object.keys(nextValues).length > 0;
+        const nextSerialised = persistValues(nextValues);
+        hasEmittedValuesRef.current = true;
+        lastPersistedValuesRef.current = nextSerialised !== null && nextSerialised !== void 0 ? nextSerialised : null;
+        onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(nextValues);
+    }, [baseDefaultValues, filterSchema, formMethods, onClearAll, persistValues]);
     const handleOpenModal = react_1.default.useCallback(() => {
         setIsModalOpen(true);
         setSearchTerm('');
@@ -203,10 +248,26 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
             return;
         }
         const defaultValue = baseDefaultValues[String(schemaField.key)];
-        formMethods.resetField(schemaField.key, {
-            defaultValue
+        const fieldPath = schemaField.key;
+        const nextValue = resolveClearedFieldValue(schemaField, defaultValue);
+        formMethods.setValue(fieldPath, nextValue, {
+            shouldDirty: false,
+            shouldTouch: false,
+            shouldValidate: false
         });
-    }, [baseDefaultValues, filterSchema, formMethods]);
+        const nextValues = (0, values_1.normaliseOutputValues)(filterSchema, formMethods.getValues());
+        const nextSerialised = persistValues(nextValues);
+        hasEmittedValuesRef.current = true;
+        lastPersistedValuesRef.current = nextSerialised !== null && nextSerialised !== void 0 ? nextSerialised : null;
+        hasInitialValuesRef.current = Object.keys(nextValues).length > 0;
+        onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(nextValues);
+    }, [
+        baseDefaultValues,
+        filterSchema,
+        formMethods,
+        onValuesChange,
+        persistValues
+    ]);
     const filteredFields = react_1.default.useMemo(() => {
         const normalisedTerm = searchTerm.trim().toLowerCase();
         if (!normalisedTerm) {
@@ -236,7 +297,7 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
             case 'checkbox':
                 return react_1.default.createElement(ui_checkbox_1.Checkbox, null, field.label);
             case 'date':
-                return (react_1.default.createElement(ui_date_picker_1.DatePicker, { placeholder: field.placeholder, size: "large", showTime: field.showTime, suffixIcon: "calendar", suffixIconSize: "16px", "aria-label": ariaLabel }));
+                return (react_1.default.createElement(ui_date_picker_1.DatePicker, { placeholder: field.placeholder, showTime: field.showTime, suffixIcon: "calendar", suffixIconSize: "16px", "aria-label": ariaLabel }));
             case 'textarea':
                 return (react_1.default.createElement(ui_input_1.InputTextArea, { placeholder: field.placeholder, autoSize: { minRows: 3, maxRows: 6 }, "aria-label": ariaLabel }));
             case 'custom':
@@ -261,7 +322,7 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
             react_1.default.createElement("div", { className: "akinon-filter__body" },
                 react_1.default.createElement(akiform_1.Akiform, { layout: "vertical", className: "akinon-filter__form" },
                     react_1.default.createElement("div", { className: "akinon-filter__form-grid", "data-testid": "akifilter-form-grid" },
-                        visibleFields.map(field => (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), valuePropName: field.type === 'checkbox' ? 'checked' : undefined }, renderFieldComponent(field)))),
+                        visibleFields.map(field => (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)))),
                         visibleFields.length === 0 ? (react_1.default.createElement("div", { className: "akinon-filter__empty" }, i18n_1.i18n.t('form.noVisibleFields'))) : null))),
             react_1.default.createElement(visibility_modal_1.VisibilityModal, { open: isModalOpen, onClose: handleCloseModal, searchTerm: searchTerm, paginatedFields: paginatedFields, filteredCount: filteredFields.length, visibleKeys: visibleKeys, onSearchTermChange: value => {
                     setSearchTerm(value);

package/dist/cjs/common/theme-overrides.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-overrides.d.ts","sourceRoot":"","sources":["../../../src/common/theme-overrides.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAEnC,eAAO,MAAM,cAAc,EAAE,WAsB5B,CAAC"}
+{"version":3,"file":"theme-overrides.d.ts","sourceRoot":"","sources":["../../../src/common/theme-overrides.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAEnC,eAAO,MAAM,cAAc,EAAE,WAkB5B,CAAC"}

package/dist/cjs/common/theme-overrides.js

@@ -3,7 +3,4 @@ var _a, _b;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.themeOverrides = void 0;
 const ui_theme_1 = require("@akinon/ui-theme");
-exports.themeOverrides = Object.assign(Object.assign({}, ui_theme_1.theme), { algorithm: ui_theme_1.theme.algorithm, token: {
-        colorTextBase: ui_theme_1.theme.colors.ebonyClay['900'],
-        colorText: ui_theme_1.theme.colors.ebonyClay['900']
-    }, components: Object.assign(Object.assign({}, ui_theme_1.theme.components), { Typography: Object.assign(Object.assign({}, (_a = ui_theme_1.theme.components) === null || _a === void 0 ? void 0 : _a.Typography), { colorTextHeading: ui_theme_1.theme.colors.neutral['100'], colorText: ui_theme_1.theme.colors.neutral['500'], titleMarginBottom: 0 }), Modal: Object.assign(Object.assign({}, (_b = ui_theme_1.theme.components) === null || _b === void 0 ? void 0 : _b.Modal), { headerBg: ui_theme_1.theme.colors.ebonyClay['600'], contentBg: ui_theme_1.theme.colors.ebonyClay['600'], titleColor: ui_theme_1.theme.colors.neutral['200'] }) }) });
+exports.themeOverrides = Object.assign(Object.assign({}, ui_theme_1.theme), { algorithm: ui_theme_1.theme.algorithm, components: Object.assign(Object.assign({}, ui_theme_1.theme.components), { Typography: Object.assign(Object.assign({}, (_a = ui_theme_1.theme.components) === null || _a === void 0 ? void 0 : _a.Typography), { colorTextHeading: ui_theme_1.theme.colors.neutral['100'], colorText: ui_theme_1.theme.colors.neutral['500'], titleMarginBottom: 0 }), Modal: Object.assign(Object.assign({}, (_b = ui_theme_1.theme.components) === null || _b === void 0 ? void 0 : _b.Modal), { headerBg: ui_theme_1.theme.colors.ebonyClay['600'], contentBg: ui_theme_1.theme.colors.ebonyClay['600'], titleColor: ui_theme_1.theme.colors.neutral['200'] }) }) });

package/dist/cjs/styles.css

@@ -54,7 +54,7 @@
 .akinon-filter__form-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 16px;
+  gap: 8px;
 }
 
 .akinon-filter__form-grid > .akinon-form-item {
@@ -120,7 +120,7 @@
   color: color(--color-ebonyClay-500);
   font-size: 12px;
   position: relative;
-  top: 2px;
+  top: 1px;
 }
 
 .akinon-filter__modal-list {
@@ -172,11 +172,13 @@
   max-width: 360px;
 }
 
-/* Modal window. */
-
-.akinon-filter__modal {
+.akinon-filter__field--number {
+  display: block;
+  width: auto;
 }
 
+/* Modal window. */
+
 .akinon-filter__modal-toolbar {
   margin-bottom: 1rem;
 }

package/dist/cjs/utils/schema.js

@@ -4,7 +4,7 @@ exports.normaliseValuesBySchema = exports.extractDefaultValues = exports.deriveD
 const akidate_1 = require("@akinon/akidate");
 const constants_1 = require("../constants");
 const getDisplayLabel = (field) => {
-    return field.placeholder || field.label || String(field.key);
+    return field.label || field.placeholder || String(field.key);
 };
 exports.getDisplayLabel = getDisplayLabel;
 const getFieldAriaLabel = (field) => {

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;AAUzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAsB1B,OAAO,KAAK,EAAkB,eAAe,EAAE,MAAM,SAAS,CAAC;AAU/D,KAAK,oBAAoB,GAAG,WAAW,CAAC;AAExC,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;AAohBF,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,EAEX,IAAI,EAGL,MAAM,iBAAiB,CAAC;AAUzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAsB1B,OAAO,KAAK,EAAkB,eAAe,EAAE,MAAM,SAAS,CAAC;AAU/D,KAAK,oBAAoB,GAAG,WAAW,CAAC;AA0BxC,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;AAulBF,eAAO,MAAM,SAAS;KACpB,YAAY,SAAS,oBAAoB,uBAElC,cAAc,CAAC,YAAY,CAAC;;CAmBpC,CAAC"}

package/dist/esm/akifilter.js

@@ -33,6 +33,23 @@ import { useDebouncedValue } from './hooks/use-debounced-value';
 import { i18n } from './i18n';
 import { deriveDefaultVisibleKeys, ensureSchemaOrder, extractDefaultValues, getFieldAriaLabel, normaliseValuesBySchema } from './utils/schema';
 import { normaliseOutputValues } from './utils/values';
+const resolveClearedFieldValue = (field, defaultValue) => {
+    if (defaultValue !== undefined) {
+        return defaultValue;
+    }
+    switch (field.type) {
+        case 'text':
+        case 'textarea':
+            return '';
+        case 'checkbox':
+            return false;
+        case 'date':
+        case 'select':
+            return null;
+        default:
+            return undefined;
+    }
+};
 const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onValuesChange, onVisibleFieldsChange, onImportCsv, onImportXls, onClearAll, enableImportCsv, enableImportXls }) => {
     const storageKey = React.useMemo(() => buildStorageKey(filterSchema, storageNamespace), [filterSchema, storageNamespace]);
     const schemaDefaults = React.useMemo(() => normaliseValuesBySchema(filterSchema, extractDefaultValues(filterSchema)), [filterSchema]);
@@ -70,7 +87,7 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
             if (field.type === 'checkbox' && currentValue !== true) {
                 return acc;
             }
-            const label = field.placeholder || field.label || key;
+            const label = field.label || field.placeholder || key;
             const resolveSelectLabel = () => {
                 var _a;
                 if (!('options' in field) || !field.options) {
@@ -134,12 +151,25 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
         formMethods.reset(mergedDefaultValues);
     }, [formMethods, mergedDefaultValues]);
     const normalisedValues = React.useMemo(() => normaliseOutputValues(filterSchema, formValues), [filterSchema, formValues]);
-    const initialOutputValues = React.useMemo(() => normaliseOutputValues(filterSchema, mergedDefaultValues), [filterSchema, mergedDefaultValues]);
-    const hasInitialValues = React.useMemo(() => Object.keys(initialOutputValues).length > 0, [initialOutputValues]);
+    const hasInitialValuesRef = React.useRef(false);
+    React.useEffect(() => {
+        const initialValues = normaliseOutputValues(filterSchema, mergedDefaultValues);
+        hasInitialValuesRef.current = Object.keys(initialValues).length > 0;
+    }, [filterSchema, mergedDefaultValues]);
     const serialisedValues = React.useMemo(() => JSON.stringify(normalisedValues), [normalisedValues]);
     const debouncedSerialisedValues = useDebouncedValue(serialisedValues, FILTER_DEBOUNCE_DELAY);
     const lastPersistedValuesRef = React.useRef(null);
     const hasEmittedValuesRef = React.useRef(false);
+    const persistValues = React.useCallback((values, serialised) => {
+        const nextSerialised = serialised !== null && serialised !== void 0 ? serialised : JSON.stringify(values);
+        lastPersistedValuesRef.current = nextSerialised;
+        if (Object.keys(values).length === 0) {
+            clearStoredValues(storageKey);
+            return nextSerialised;
+        }
+        writeStoredValues(storageKey, values);
+        return nextSerialised;
+    }, [storageKey]);
     React.useEffect(() => {
         if (debouncedSerialisedValues == null) {
             return;
@@ -150,30 +180,45 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
         }
         const parsedValues = JSON.parse(debouncedSerialisedValues);
         const isEmpty = Object.keys(parsedValues).length === 0;
-        if (!hasEmittedValuesRef.current && isEmpty && !hasInitialValues) {
+        if (!hasEmittedValuesRef.current &&
+            isEmpty &&
+            !hasInitialValuesRef.current) {
             hasEmittedValuesRef.current = true;
-            lastPersistedValuesRef.current = debouncedSerialisedValues;
-            clearStoredValues(storageKey);
+            persistValues(parsedValues, debouncedSerialisedValues);
             return;
         }
         hasEmittedValuesRef.current = true;
-        lastPersistedValuesRef.current = debouncedSerialisedValues;
         onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(parsedValues);
-        if (isEmpty) {
-            clearStoredValues(storageKey);
-        }
-        else {
-            writeStoredValues(storageKey, parsedValues);
-        }
-    }, [debouncedSerialisedValues, hasInitialValues, onValuesChange, storageKey]);
+        persistValues(parsedValues, debouncedSerialisedValues);
+    }, [debouncedSerialisedValues, onValuesChange, persistValues]);
     React.useEffect(() => {
         lastPersistedValuesRef.current = null;
     }, [storageKey]);
     const handleClearAll = React.useCallback(() => {
-        formMethods.reset(baseDefaultValues);
+        const clearedDefaults = Object.assign({}, baseDefaultValues);
+        filterSchema.forEach(field => {
+            const key = String(field.key);
+            const defaultValue = baseDefaultValues[key];
+            const resolved = resolveClearedFieldValue(field, defaultValue);
+            if (resolved === undefined) {
+                delete clearedDefaults[key];
+            }
+            else {
+                clearedDefaults[key] = resolved;
+            }
+        });
+        formMethods.reset(clearedDefaults, {
+            keepDirty: false,
+            keepTouched: false
+        });
         onClearAll === null || onClearAll === void 0 ? void 0 : onClearAll();
-        clearStoredValues(storageKey);
-    }, [baseDefaultValues, formMethods, onClearAll, storageKey]);
+        const nextValues = normaliseOutputValues(filterSchema, clearedDefaults);
+        hasInitialValuesRef.current = Object.keys(nextValues).length > 0;
+        const nextSerialised = persistValues(nextValues);
+        hasEmittedValuesRef.current = true;
+        lastPersistedValuesRef.current = nextSerialised !== null && nextSerialised !== void 0 ? nextSerialised : null;
+        onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(nextValues);
+    }, [baseDefaultValues, filterSchema, formMethods, onClearAll, persistValues]);
     const handleOpenModal = React.useCallback(() => {
         setIsModalOpen(true);
         setSearchTerm('');
@@ -200,10 +245,26 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
             return;
         }
         const defaultValue = baseDefaultValues[String(schemaField.key)];
-        formMethods.resetField(schemaField.key, {
-            defaultValue
+        const fieldPath = schemaField.key;
+        const nextValue = resolveClearedFieldValue(schemaField, defaultValue);
+        formMethods.setValue(fieldPath, nextValue, {
+            shouldDirty: false,
+            shouldTouch: false,
+            shouldValidate: false
         });
-    }, [baseDefaultValues, filterSchema, formMethods]);
+        const nextValues = normaliseOutputValues(filterSchema, formMethods.getValues());
+        const nextSerialised = persistValues(nextValues);
+        hasEmittedValuesRef.current = true;
+        lastPersistedValuesRef.current = nextSerialised !== null && nextSerialised !== void 0 ? nextSerialised : null;
+        hasInitialValuesRef.current = Object.keys(nextValues).length > 0;
+        onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(nextValues);
+    }, [
+        baseDefaultValues,
+        filterSchema,
+        formMethods,
+        onValuesChange,
+        persistValues
+    ]);
     const filteredFields = React.useMemo(() => {
         const normalisedTerm = searchTerm.trim().toLowerCase();
         if (!normalisedTerm) {
@@ -233,7 +294,7 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
             case 'checkbox':
                 return React.createElement(Checkbox, null, field.label);
             case 'date':
-                return (React.createElement(DatePicker, { placeholder: field.placeholder, size: "large", showTime: field.showTime, suffixIcon: "calendar", suffixIconSize: "16px", "aria-label": ariaLabel }));
+                return (React.createElement(DatePicker, { placeholder: field.placeholder, showTime: field.showTime, suffixIcon: "calendar", suffixIconSize: "16px", "aria-label": ariaLabel }));
             case 'textarea':
                 return (React.createElement(InputTextArea, { placeholder: field.placeholder, autoSize: { minRows: 3, maxRows: 6 }, "aria-label": ariaLabel }));
             case 'custom':
@@ -258,7 +319,7 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
             React.createElement("div", { className: "akinon-filter__body" },
                 React.createElement(Akiform, { layout: "vertical", className: "akinon-filter__form" },
                     React.createElement("div", { className: "akinon-filter__form-grid", "data-testid": "akifilter-form-grid" },
-                        visibleFields.map(field => (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), valuePropName: field.type === 'checkbox' ? 'checked' : undefined }, renderFieldComponent(field)))),
+                        visibleFields.map(field => (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)))),
                         visibleFields.length === 0 ? (React.createElement("div", { className: "akinon-filter__empty" }, i18n.t('form.noVisibleFields'))) : null))),
             React.createElement(VisibilityModal, { open: isModalOpen, onClose: handleCloseModal, searchTerm: searchTerm, paginatedFields: paginatedFields, filteredCount: filteredFields.length, visibleKeys: visibleKeys, onSearchTermChange: value => {
                     setSearchTerm(value);

package/dist/esm/common/theme-overrides.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-overrides.d.ts","sourceRoot":"","sources":["../../../src/common/theme-overrides.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAEnC,eAAO,MAAM,cAAc,EAAE,WAsB5B,CAAC"}
+{"version":3,"file":"theme-overrides.d.ts","sourceRoot":"","sources":["../../../src/common/theme-overrides.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAEnC,eAAO,MAAM,cAAc,EAAE,WAkB5B,CAAC"}

package/dist/esm/common/theme-overrides.js

@@ -1,6 +1,3 @@
 var _a, _b;
 import { theme } from '@akinon/ui-theme';
-export const themeOverrides = Object.assign(Object.assign({}, theme), { algorithm: theme.algorithm, token: {
-        colorTextBase: theme.colors.ebonyClay['900'],
-        colorText: theme.colors.ebonyClay['900']
-    }, components: Object.assign(Object.assign({}, theme.components), { Typography: Object.assign(Object.assign({}, (_a = theme.components) === null || _a === void 0 ? void 0 : _a.Typography), { colorTextHeading: theme.colors.neutral['100'], colorText: theme.colors.neutral['500'], titleMarginBottom: 0 }), Modal: Object.assign(Object.assign({}, (_b = theme.components) === null || _b === void 0 ? void 0 : _b.Modal), { headerBg: theme.colors.ebonyClay['600'], contentBg: theme.colors.ebonyClay['600'], titleColor: theme.colors.neutral['200'] }) }) });
+export const themeOverrides = Object.assign(Object.assign({}, theme), { algorithm: theme.algorithm, components: Object.assign(Object.assign({}, theme.components), { Typography: Object.assign(Object.assign({}, (_a = theme.components) === null || _a === void 0 ? void 0 : _a.Typography), { colorTextHeading: theme.colors.neutral['100'], colorText: theme.colors.neutral['500'], titleMarginBottom: 0 }), Modal: Object.assign(Object.assign({}, (_b = theme.components) === null || _b === void 0 ? void 0 : _b.Modal), { headerBg: theme.colors.ebonyClay['600'], contentBg: theme.colors.ebonyClay['600'], titleColor: theme.colors.neutral['200'] }) }) });

package/dist/esm/styles.css

@@ -54,7 +54,7 @@
 .akinon-filter__form-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 16px;
+  gap: 8px;
 }
 
 .akinon-filter__form-grid > .akinon-form-item {
@@ -120,7 +120,7 @@
   color: color(--color-ebonyClay-500);
   font-size: 12px;
   position: relative;
-  top: 2px;
+  top: 1px;
 }
 
 .akinon-filter__modal-list {
@@ -172,11 +172,13 @@
   max-width: 360px;
 }
 
-/* Modal window. */
-
-.akinon-filter__modal {
+.akinon-filter__field--number {
+  display: block;
+  width: auto;
 }
 
+/* Modal window. */
+
 .akinon-filter__modal-toolbar {
   margin-bottom: 1rem;
 }

package/dist/esm/utils/schema.js

@@ -1,7 +1,7 @@
 import { akidate } from '@akinon/akidate';
 import { DEFAULT_VISIBLE_COUNT } from '../constants';
 export const getDisplayLabel = (field) => {
-    return field.placeholder || field.label || String(field.key);
+    return field.label || field.placeholder || String(field.key);
 };
 export const getFieldAriaLabel = (field) => {
     return field.label || field.placeholder || String(field.key);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/akifilter",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "private": false,
   "description": "Akifilter is a filtering library for Akinon frontend applications.",
   "type": "module",
@@ -12,21 +12,21 @@
   "dependencies": {
     "antd": "^5.27.0",
     "react-error-boundary": "^6.0.0",
-    "@akinon/akilocale": "1.2.0",
     "@akinon/akiform": "1.1.1",
+    "@akinon/akidate": "1.1.1",
     "@akinon/icons": "1.1.0",
+    "@akinon/ui-button": "1.3.0",
+    "@akinon/akilocale": "1.2.0",
     "@akinon/ui-checkbox": "1.3.0",
     "@akinon/ui-card": "1.1.0",
+    "@akinon/ui-date-picker": "1.3.0",
     "@akinon/ui-input": "1.1.0",
-    "@akinon/akidate": "1.1.1",
     "@akinon/ui-input-number": "1.3.0",
-    "@akinon/ui-modal": "1.1.0",
     "@akinon/ui-pagination": "1.3.1",
-    "@akinon/ui-date-picker": "1.3.0",
+    "@akinon/ui-modal": "1.1.0",
     "@akinon/ui-select": "1.3.1",
     "@akinon/ui-space": "1.3.0",
-    "@akinon/ui-typography": "1.1.0",
-    "@akinon/ui-button": "1.3.0"
+    "@akinon/ui-typography": "1.1.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
@@ -36,8 +36,8 @@
     "@akinon/akiform-builder": "1.3.2",
     "@akinon/typescript-config": "1.1.0",
     "@akinon/ui-theme": "1.1.0",
-    "@akinon/utils": "1.1.1",
-    "@akinon/vitest-config": "1.1.0"
+    "@akinon/vitest-config": "1.1.0",
+    "@akinon/utils": "1.1.1"
   },
   "peerDependencies": {
     "react": "^18 || ^19",