@akinon/akifilter 0.5.4 → 1.0.1

package/dist/cjs/utils/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/utils/schema.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhE,eAAO,MAAM,eAAe,GAAI,YAAY,SAAS,WAAW,GAAG,WAAW,EAC5E,OAAO,cAAc,CAAC,YAAY,CAAC,KAClC,MAEF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,YAAY,SAAS,WAAW,GAAG,WAAW,EAE9C,OAAO,cAAc,CAAC,YAAY,CAAC,KAClC,MAEF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,YAAY,SAAS,WAAW,GAAG,WAAW,EAE9C,QAAQ,eAAe,CAAC,YAAY,CAAC,EACrC,MAAM,MAAM,EAAE,KACb,MAAM,EAGR,CAAC;AAEF,eAAO,MAAM,wBAAwB,GACnC,YAAY,SAAS,WAAW,GAAG,WAAW,EAE9C,QAAQ,eAAe,CAAC,YAAY,CAAC,KACpC,MAAM,EAUR,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,YAAY,SAAS,WAAW,GAAG,WAAW,EAE9C,QAAQ,eAAe,CAAC,YAAY,CAAC,KACpC,OAAO,CAAC,YAAY,CAQtB,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAClC,YAAY,SAAS,WAAW,GAAG,WAAW,EAE9C,QAAQ,eAAe,CAAC,YAAY,CAAC,EACrC,SAAS,OAAO,CAAC,YAAY,CAAC,KAC7B,OAAO,CAAC,YAAY,CA+BtB,CAAC"}

package/dist/cjs/utils/schema.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normaliseValuesBySchema = exports.extractDefaultValues = exports.deriveDefaultVisibleKeys = exports.ensureSchemaOrder = exports.getFieldAriaLabel = exports.getDisplayLabel = void 0;
+const akidate_1 = require("@akinon/akidate");
+const constants_1 = require("../constants");
+const getDisplayLabel = (field) => {
+    return field.label || field.placeholder || String(field.key);
+};
+exports.getDisplayLabel = getDisplayLabel;
+const getFieldAriaLabel = (field) => {
+    return field.label || field.placeholder || String(field.key);
+};
+exports.getFieldAriaLabel = getFieldAriaLabel;
+const ensureSchemaOrder = (schema, keys) => {
+    const keySet = new Set(keys.map(String));
+    return schema.map(field => String(field.key)).filter(key => keySet.has(key));
+};
+exports.ensureSchemaOrder = ensureSchemaOrder;
+const deriveDefaultVisibleKeys = (schema) => {
+    const explicitKeys = schema
+        .filter(field => field.isVisible)
+        .map(field => String(field.key));
+    if (explicitKeys.length > 0) {
+        return (0, exports.ensureSchemaOrder)(schema, Array.from(new Set(explicitKeys)));
+    }
+    return schema.slice(0, constants_1.DEFAULT_VISIBLE_COUNT).map(field => String(field.key));
+};
+exports.deriveDefaultVisibleKeys = deriveDefaultVisibleKeys;
+const extractDefaultValues = (schema) => {
+    return schema.reduce((acc, field) => {
+        if (field.defaultValue !== undefined) {
+            const key = field.key;
+            acc[key] = field.defaultValue;
+        }
+        return acc;
+    }, {});
+};
+exports.extractDefaultValues = extractDefaultValues;
+const normaliseValuesBySchema = (schema, values) => {
+    if (!values) {
+        return {};
+    }
+    return Object.keys(values).reduce((acc, key) => {
+        const field = schema.find(schemaField => String(schemaField.key) === String(key));
+        if (!field) {
+            acc[key] = values[key];
+            return acc;
+        }
+        const currentValue = values[key];
+        if (field.type === 'date') {
+            const parsed = akidate_1.akidate.parse(currentValue);
+            if (parsed) {
+                acc[key] = parsed;
+                return acc;
+            }
+        }
+        acc[key] = currentValue;
+        return acc;
+    }, {});
+};
+exports.normaliseValuesBySchema = normaliseValuesBySchema;

package/dist/cjs/utils/values.d.ts

@@ -0,0 +1,5 @@
+import type { FieldValues } from '@akinon/akiform';
+import type { AkifilterField, AkifilterSchema } from '../types';
+export declare const shouldPersistValue: <TFieldValues extends FieldValues = FieldValues>(field: AkifilterField<TFieldValues> | undefined, value: unknown) => boolean;
+export declare const normaliseOutputValues: <TFieldValues extends FieldValues = FieldValues>(schema: AkifilterSchema<TFieldValues>, values?: Partial<TFieldValues> | FieldValues) => Partial<TFieldValues>;
+//# sourceMappingURL=values.d.ts.map

package/dist/cjs/utils/values.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"values.d.ts","sourceRoot":"","sources":["../../../src/utils/values.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhE,eAAO,MAAM,kBAAkB,GAC7B,YAAY,SAAS,WAAW,GAAG,WAAW,EAE9C,OAAO,cAAc,CAAC,YAAY,CAAC,GAAG,SAAS,EAC/C,OAAO,OAAO,KACb,OAkBF,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,YAAY,SAAS,WAAW,GAAG,WAAW,EAE9C,QAAQ,eAAe,CAAC,YAAY,CAAC,EACrC,SAAS,OAAO,CAAC,YAAY,CAAC,GAAG,WAAW,KAC3C,OAAO,CAAC,YAAY,CA8BtB,CAAC"}

package/dist/cjs/utils/values.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normaliseOutputValues = exports.shouldPersistValue = void 0;
+const akidate_1 = require("@akinon/akidate");
+const shouldPersistValue = (field, value) => {
+    if (value === undefined || value === null) {
+        return false;
+    }
+    if (typeof value === 'string' && value.trim() === '') {
+        return false;
+    }
+    if (Array.isArray(value) && value.length === 0) {
+        return false;
+    }
+    if ((field === null || field === void 0 ? void 0 : field.type) === 'checkbox' && value !== true) {
+        return false;
+    }
+    return true;
+};
+exports.shouldPersistValue = shouldPersistValue;
+const normaliseOutputValues = (schema, values) => {
+    if (!values) {
+        return {};
+    }
+    const entries = Object.entries(values);
+    return entries.reduce((acc, [key, rawValue]) => {
+        const field = schema.find(schemaField => String(schemaField.key) === String(key));
+        if (!(0, exports.shouldPersistValue)(field, rawValue)) {
+            return acc;
+        }
+        let normalisedValue = rawValue;
+        if ((field === null || field === void 0 ? void 0 : field.type) === 'date') {
+            const normalised = akidate_1.akidate.toIsoDate(rawValue);
+            if (!normalised) {
+                return acc;
+            }
+            normalisedValue = akidate_1.akidate.formatIsoDate(normalised, 'YYYY-MM-DD');
+        }
+        acc[key] =
+            normalisedValue;
+        return acc;
+    }, {});
+};
+exports.normaliseOutputValues = normaliseOutputValues;

package/dist/esm/akifilter.d.ts

@@ -0,0 +1,53 @@
+import './styles.css';
+import { FieldValues, Path } from '@akinon/akiform';
+import React from 'react';
+import type { AkifilterSchema } from './types';
+type AkifilterFieldValues = FieldValues;
+export type AkifilterProps<TFieldValues extends AkifilterFieldValues = AkifilterFieldValues> = {
+    /**
+     * Declarative description of the filter fields.
+     */
+    filterSchema?: AkifilterSchema<TFieldValues>;
+    /**
+     * Optional namespace for local storage persistence.
+     */
+    storageNamespace?: string;
+    /**
+     * Default values supplied by the host application.
+     */
+    defaultValues?: Partial<TFieldValues>;
+    /**
+     * Notified on every value change with the normalised payload.
+     */
+    onValuesChange?: (values: Partial<TFieldValues>) => void;
+    /**
+     * Notified whenever visible field keys change.
+     */
+    onVisibleFieldsChange?: (keys: Array<Path<TFieldValues>>) => void;
+    /**
+     * Triggered when user opts to import filters via CSV.
+     */
+    onImportCsv?: () => void;
+    /**
+     * Triggered when user opts to import filters via XLS/XLSX.
+     */
+    onImportXls?: () => void;
+    /**
+     * Triggered when user requests clearing all filters.
+     */
+    onClearAll?: () => void;
+    /**
+     * Shows the CSV import button in the toolbar. Hidden by default.
+     */
+    enableImportCsv?: boolean;
+    /**
+     * Shows the XLS/XLSX import button in the toolbar. Hidden by default.
+     */
+    enableImportXls?: boolean;
+};
+export declare const Akifilter: {
+    <TFieldValues extends AkifilterFieldValues = FieldValues>(props: AkifilterProps<TFieldValues>): React.JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=akifilter.d.ts.map

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

@@ -0,0 +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;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

@@ -0,0 +1,356 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import './styles.css';
+import { akidate } from '@akinon/akidate';
+import { Akiform, FormItem, useForm, useWatch } from '@akinon/akiform';
+import { Button } from '@akinon/ui-button';
+import { Card } from '@akinon/ui-card';
+import { Checkbox } from '@akinon/ui-checkbox';
+import { DatePicker } from '@akinon/ui-date-picker';
+import { Input, InputTextArea } from '@akinon/ui-input';
+import { InputNumber } from '@akinon/ui-input-number';
+import { Select } from '@akinon/ui-select';
+import { Text, Title } from '@akinon/ui-typography';
+import { ConfigProvider } from 'antd';
+import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { buildStorageKey, clearStoredValues, readStoredValues, readVisibleKeys, writeStoredValues, writeVisibleKeys } from './common/storage';
+import { themeOverrides } from './common/theme-overrides';
+import { AppliedFilters } from './components/applied-filters';
+import { FilterToolbar } from './components/filter-toolbar';
+import { VisibilityModal } from './components/visibility-modal';
+import { DEFAULT_MODAL_PAGE_SIZE, FILTER_DEBOUNCE_DELAY } from './constants';
+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]);
+    const externalDefaults = React.useMemo(() => normaliseValuesBySchema(filterSchema, defaultValues), [filterSchema, defaultValues]);
+    const baseDefaultValues = React.useMemo(() => (Object.assign(Object.assign({}, schemaDefaults), externalDefaults)), [schemaDefaults, externalDefaults]);
+    const persistedDefaults = React.useMemo(() => {
+        var _a;
+        return normaliseValuesBySchema(filterSchema, (_a = readStoredValues(filterSchema, storageKey)) !== null && _a !== void 0 ? _a : undefined);
+    }, [filterSchema, storageKey]);
+    const mergedDefaultValues = React.useMemo(() => (Object.assign(Object.assign({}, baseDefaultValues), persistedDefaults)), [baseDefaultValues, persistedDefaults]);
+    const formMethods = useForm({
+        defaultValues: mergedDefaultValues
+    });
+    const formValues = useWatch({ control: formMethods.control });
+    const [isModalOpen, setIsModalOpen] = React.useState(false);
+    const [searchTerm, setSearchTerm] = React.useState('');
+    const [modalPage, setModalPage] = React.useState(1);
+    const [modalPageSize, setModalPageSize] = React.useState(DEFAULT_MODAL_PAGE_SIZE);
+    const appliedFilters = React.useMemo(() => {
+        if (!formValues) {
+            return [];
+        }
+        return filterSchema.reduce((acc, field) => {
+            const key = String(field.key);
+            const currentValue = formValues[key];
+            if (currentValue === undefined || currentValue === null) {
+                return acc;
+            }
+            if (typeof currentValue === 'string' && currentValue.trim() === '') {
+                return acc;
+            }
+            if (Array.isArray(currentValue) && currentValue.length === 0) {
+                return acc;
+            }
+            if (field.type === 'checkbox' && currentValue !== true) {
+                return acc;
+            }
+            const label = field.label || field.placeholder || key;
+            const resolveSelectLabel = () => {
+                var _a;
+                if (!('options' in field) || !field.options) {
+                    return String(currentValue);
+                }
+                const match = field.options.find(option => option.value === currentValue);
+                return String((_a = match === null || match === void 0 ? void 0 : match.label) !== null && _a !== void 0 ? _a : currentValue);
+            };
+            const resolveValue = () => {
+                if (field.type === 'select') {
+                    return resolveSelectLabel();
+                }
+                if (field.type === 'date') {
+                    const iso = akidate.toIsoDate(currentValue);
+                    if (iso) {
+                        return akidate.formatIsoDate(iso, 'YYYY-MM-DD');
+                    }
+                }
+                if (Array.isArray(currentValue)) {
+                    return currentValue.map((value) => String(value)).join(', ');
+                }
+                if (typeof currentValue === 'boolean') {
+                    return currentValue ? 'true' : 'false';
+                }
+                if (typeof currentValue === 'string' ||
+                    typeof currentValue === 'number') {
+                    return String(currentValue);
+                }
+                const iso = akidate.toIsoDate(currentValue);
+                if (iso) {
+                    return akidate.formatIsoDate(iso, 'YYYY-MM-DD');
+                }
+                return String(currentValue);
+            };
+            acc.push({ key, label, value: resolveValue() });
+            return acc;
+        }, []);
+    }, [filterSchema, formValues]);
+    const resolveInitialVisibleKeys = React.useCallback(() => {
+        const storedKeys = readVisibleKeys(filterSchema, storageKey);
+        if (storedKeys && storedKeys.length > 0) {
+            return ensureSchemaOrder(filterSchema, storedKeys);
+        }
+        return deriveDefaultVisibleKeys(filterSchema);
+    }, [filterSchema, storageKey]);
+    const [visibleKeys, setVisibleKeys] = React.useState(resolveInitialVisibleKeys);
+    React.useEffect(() => {
+        setVisibleKeys(previous => {
+            const ordered = ensureSchemaOrder(filterSchema, previous);
+            if (ordered.length) {
+                return ordered;
+            }
+            return resolveInitialVisibleKeys();
+        });
+    }, [filterSchema, resolveInitialVisibleKeys]);
+    React.useEffect(() => {
+        writeVisibleKeys(storageKey, visibleKeys);
+        onVisibleFieldsChange === null || onVisibleFieldsChange === void 0 ? void 0 : onVisibleFieldsChange(visibleKeys);
+    }, [visibleKeys, onVisibleFieldsChange, storageKey]);
+    React.useEffect(() => {
+        formMethods.reset(mergedDefaultValues);
+    }, [formMethods, mergedDefaultValues]);
+    const normalisedValues = React.useMemo(() => normaliseOutputValues(filterSchema, formValues), [filterSchema, formValues]);
+    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;
+        }
+        if (hasEmittedValuesRef.current &&
+            lastPersistedValuesRef.current === debouncedSerialisedValues) {
+            return;
+        }
+        const parsedValues = JSON.parse(debouncedSerialisedValues);
+        const isEmpty = Object.keys(parsedValues).length === 0;
+        if (!hasEmittedValuesRef.current &&
+            isEmpty &&
+            !hasInitialValuesRef.current) {
+            hasEmittedValuesRef.current = true;
+            persistValues(parsedValues, debouncedSerialisedValues);
+            return;
+        }
+        hasEmittedValuesRef.current = true;
+        onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(parsedValues);
+        persistValues(parsedValues, debouncedSerialisedValues);
+    }, [debouncedSerialisedValues, onValuesChange, persistValues]);
+    React.useEffect(() => {
+        lastPersistedValuesRef.current = null;
+    }, [storageKey]);
+    const handleClearAll = React.useCallback(() => {
+        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();
+        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('');
+        setModalPage(1);
+    }, []);
+    const handleCloseModal = React.useCallback(() => {
+        setIsModalOpen(false);
+    }, []);
+    const handleToggleVisibility = React.useCallback((key) => {
+        setVisibleKeys(prev => {
+            const exists = prev.includes(key);
+            if (exists && prev.length === 1) {
+                return prev;
+            }
+            const nextKeys = exists
+                ? prev.filter(item => item !== key)
+                : [...prev, key];
+            return ensureSchemaOrder(filterSchema, nextKeys);
+        });
+    }, [filterSchema]);
+    const handleRemoveFilter = React.useCallback((key) => {
+        const schemaField = filterSchema.find(field => String(field.key) === key);
+        if (!schemaField) {
+            return;
+        }
+        const defaultValue = baseDefaultValues[String(schemaField.key)];
+        const fieldPath = schemaField.key;
+        const nextValue = resolveClearedFieldValue(schemaField, defaultValue);
+        formMethods.setValue(fieldPath, nextValue, {
+            shouldDirty: false,
+            shouldTouch: false,
+            shouldValidate: false
+        });
+        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) {
+            return filterSchema;
+        }
+        return filterSchema.filter(field => {
+            const searchable = [field.label, field.placeholder, String(field.key)]
+                .filter(Boolean)
+                .map(value => String(value).toLowerCase());
+            return searchable.some(text => text.includes(normalisedTerm));
+        });
+    }, [filterSchema, searchTerm]);
+    const paginatedFields = React.useMemo(() => {
+        const start = (modalPage - 1) * modalPageSize;
+        return filteredFields.slice(start, start + modalPageSize);
+    }, [filteredFields, modalPage, modalPageSize]);
+    const visibleFields = React.useMemo(() => filterSchema.filter(field => visibleKeys.includes(String(field.key))), [filterSchema, visibleKeys]);
+    const renderFieldComponent = (field) => {
+        const ariaLabel = getFieldAriaLabel(field);
+        switch (field.type) {
+            case 'text':
+                return (React.createElement(Input, { placeholder: field.placeholder, size: "large", allowClear: true, "aria-label": ariaLabel }));
+            case 'number':
+                return (React.createElement(InputNumber, { placeholder: field.placeholder, size: "large", className: "akinon-filter__field--number", "aria-label": ariaLabel }));
+            case 'select':
+                return (React.createElement(Select, { placeholder: field.placeholder, size: "large", options: field.options, showSearch: true, optionFilterProp: "label", "aria-label": ariaLabel }));
+            case 'checkbox':
+                return React.createElement(Checkbox, null, field.label);
+            case 'date':
+                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':
+                if (typeof field.render === 'function') {
+                    return field.render({
+                        field,
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        control: formMethods.control,
+                        formValues: formMethods.getValues(),
+                        formState: formMethods.formState
+                    });
+                }
+                return (React.createElement(Text, { type: "secondary", className: "akinon-filter__unsupported" }, i18n.t('form.unsupportedField', { field: String(field.type) })));
+            default:
+                return (React.createElement(Text, { type: "secondary", className: "akinon-filter__unsupported" }, i18n.t('form.unsupportedField', { field: String(field.type) })));
+        }
+    };
+    return (React.createElement(Card, { size: "small", className: "akinon-filter shadow", "data-testid": "akifilter-root" },
+        React.createElement(ConfigProvider, { theme: themeOverrides },
+            React.createElement(FilterToolbar, { onOpenModal: handleOpenModal, enableImportCsv: enableImportCsv, enableImportXls: enableImportXls, onImportCsv: onImportCsv, onImportXls: onImportXls }),
+            React.createElement(AppliedFilters, { filters: appliedFilters, onRemove: handleRemoveFilter, onClearAll: handleClearAll }),
+            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), 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);
+                    setModalPage(1);
+                }, onToggleVisibility: handleToggleVisibility, onPaginationChange: (page, pageSize) => {
+                    setModalPage(page);
+                    if (pageSize !== modalPageSize) {
+                        setModalPageSize(pageSize);
+                    }
+                }, page: modalPage, pageSize: modalPageSize }))));
+};
+const AkifilterEmptyState = () => {
+    const { t } = i18n;
+    return (React.createElement(Card, { size: "small", className: "akinon-filter shadow", "data-testid": "akifilter-empty" },
+        React.createElement(ConfigProvider, { theme: themeOverrides },
+            React.createElement("div", { className: "akinon-filter__empty-state" },
+                React.createElement(Text, null, t('emptyState.message'))))));
+};
+const renderErrorFallback = ({ resetErrorBoundary }) => {
+    const { t } = i18n;
+    return (React.createElement(Card, { size: "small", className: "akinon-filter shadow", "data-testid": "akifilter-error" },
+        React.createElement(ConfigProvider, { theme: themeOverrides },
+            React.createElement("div", { className: "akinon-filter__error-state" },
+                React.createElement(Title, { level: 5, className: "akinon-filter__error-title" }, t('errors.title')),
+                React.createElement(Text, { type: "secondary", className: "akinon-filter__error-description" }, t('errors.description')),
+                React.createElement(Button, { type: "primary", onClick: resetErrorBoundary, size: "small" }, t('errors.retry'))))));
+};
+export const Akifilter = (props) => {
+    const { filterSchema } = props, restProps = __rest(props, ["filterSchema"]);
+    const resolvedSchema = (filterSchema !== null && filterSchema !== void 0 ? filterSchema : []);
+    const hasSchema = resolvedSchema.length > 0;
+    return (React.createElement(ErrorBoundary, { fallbackRender: renderErrorFallback }, hasSchema ? (React.createElement(AkifilterContent, Object.assign({}, restProps, { filterSchema: resolvedSchema }))) : (React.createElement(AkifilterEmptyState, null))));
+};
+Akifilter.displayName = 'Akifilter';

package/dist/esm/common/storage.d.ts

@@ -0,0 +1,10 @@
+import type { FieldValues } from '@akinon/akiform';
+import type { AkifilterField } from '../types';
+export declare const buildStorageKey: <TFieldValues extends FieldValues>(schema: AkifilterField<TFieldValues>[], namespace?: string) => string;
+export declare const readVisibleKeys: <TFieldValues extends FieldValues>(schema: AkifilterField<TFieldValues>[], storageKey: string) => string[] | null;
+export declare const writeVisibleKeys: (storageKey: string, keys: string[]) => void;
+export declare const clearVisibleKeys: (storageKey: string) => void;
+export declare const readStoredValues: <TFieldValues extends FieldValues>(schema: AkifilterField<TFieldValues>[], storageKey: string) => Partial<TFieldValues> | null;
+export declare const writeStoredValues: <TFieldValues extends FieldValues>(storageKey: string, values: Partial<TFieldValues>) => void;
+export declare const clearStoredValues: (storageKey: string) => void;
+//# sourceMappingURL=storage.d.ts.map

package/dist/esm/common/storage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storage.d.ts","sourceRoot":"","sources":["../../../src/common/storage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAqB/C,eAAO,MAAM,eAAe,GAAI,YAAY,SAAS,WAAW,EAC9D,QAAQ,cAAc,CAAC,YAAY,CAAC,EAAE,EACtC,YAAY,MAAM,KACjB,MAKF,CAAC;AAIF,eAAO,MAAM,eAAe,GAAI,YAAY,SAAS,WAAW,EAC9D,QAAQ,cAAc,CAAC,YAAY,CAAC,EAAE,EACtC,YAAY,MAAM,KACjB,MAAM,EAAE,GAAG,IAuBb,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,YAAY,MAAM,EAAE,MAAM,MAAM,EAAE,KAAG,IAQrE,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,YAAY,MAAM,KAAG,IAQrD,CAAC;AAKF,eAAO,MAAM,gBAAgB,GAAI,YAAY,SAAS,WAAW,EAC/D,QAAQ,cAAc,CAAC,YAAY,CAAC,EAAE,EACtC,YAAY,MAAM,KACjB,OAAO,CAAC,YAAY,CAAC,GAAG,IA+B1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,YAAY,SAAS,WAAW,EAChE,YAAY,MAAM,EAClB,QAAQ,OAAO,CAAC,YAAY,CAAC,KAC5B,IAeF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,YAAY,MAAM,KAAG,IAQtD,CAAC"}

package/dist/esm/common/storage.js

@@ -0,0 +1,114 @@
+const STORAGE_PREFIX = 'akifilter:v1';
+const VALUES_SUFFIX = ':values';
+const hashString = (value) => {
+    let hash = 0;
+    for (let i = 0; i < value.length; i += 1) {
+        const chr = value.charCodeAt(i);
+        hash = (hash << 5) - hash + chr;
+        hash |= 0; // Convert to 32bit integer
+    }
+    return Math.abs(hash).toString(36);
+};
+const buildSchemaSignature = (schema) => {
+    return schema.map(field => `${String(field.key)}:${field.type}`).join('|');
+};
+export const buildStorageKey = (schema, namespace) => {
+    const signature = buildSchemaSignature(schema);
+    const hashedSignature = hashString(signature);
+    const base = namespace ? namespace.trim() : 'default';
+    return `${STORAGE_PREFIX}:${base}:${hashedSignature}`;
+};
+const isBrowser = typeof window !== 'undefined';
+export const readVisibleKeys = (schema, storageKey) => {
+    if (!isBrowser)
+        return null;
+    try {
+        const rawValue = window.localStorage.getItem(storageKey);
+        if (!rawValue) {
+            return null;
+        }
+        const parsed = JSON.parse(rawValue);
+        if (!Array.isArray(parsed)) {
+            return null;
+        }
+        const schemaKeys = new Set(schema.map(field => String(field.key)));
+        return parsed.filter(key => schemaKeys.has(String(key)));
+    }
+    catch (error) {
+        console.warn('Akifilter: unable to read visibility state from storage', error);
+        return null;
+    }
+};
+export const writeVisibleKeys = (storageKey, keys) => {
+    if (!isBrowser)
+        return;
+    try {
+        window.localStorage.setItem(storageKey, JSON.stringify(keys));
+    }
+    catch (error) {
+        console.warn('Akifilter: unable to persist visibility state', error);
+    }
+};
+export const clearVisibleKeys = (storageKey) => {
+    if (!isBrowser)
+        return;
+    try {
+        window.localStorage.removeItem(storageKey);
+    }
+    catch (error) {
+        console.warn('Akifilter: unable to clear visibility state', error);
+    }
+};
+const buildValuesStorageKey = (storageKey) => `${storageKey}${VALUES_SUFFIX}`;
+export const readStoredValues = (schema, storageKey) => {
+    if (!isBrowser)
+        return null;
+    try {
+        const rawValue = window.localStorage.getItem(buildValuesStorageKey(storageKey));
+        if (!rawValue) {
+            return null;
+        }
+        const parsed = JSON.parse(rawValue);
+        if (!parsed || typeof parsed !== 'object') {
+            return null;
+        }
+        const schemaKeys = new Set(schema.map(field => String(field.key)));
+        return Object.entries(parsed).reduce((acc, [key, value]) => {
+            if (schemaKeys.has(String(key))) {
+                acc[key] =
+                    value;
+            }
+            return acc;
+        }, {});
+    }
+    catch (error) {
+        console.warn('Akifilter: unable to read values from storage', error);
+        return null;
+    }
+};
+export const writeStoredValues = (storageKey, values) => {
+    if (!isBrowser)
+        return;
+    const valuesKey = buildValuesStorageKey(storageKey);
+    const entries = Object.entries(values);
+    try {
+        if (entries.length === 0) {
+            window.localStorage.removeItem(valuesKey);
+            return;
+        }
+        window.localStorage.setItem(valuesKey, JSON.stringify(values));
+    }
+    catch (error) {
+        console.warn('Akifilter: unable to persist values', error);
+    }
+};
+export const clearStoredValues = (storageKey) => {
+    if (!isBrowser)
+        return;
+    try {
+        window.localStorage.removeItem(buildValuesStorageKey(storageKey));
+    }
+    catch (error) {
+        console.warn('Akifilter: unable to clear stored values', error);
+    }
+};