@akinon/akifilter 1.0.5 → 1.1.1-rc.0

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;AA2B1B,OAAO,KAAK,EAAkB,eAAe,EAAE,MAAM,SAAS,CAAC;AAU/D,KAAK,oBAAoB,GAAG,WAAW,CAAC;AA2BxC,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;AAqnBF,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;AAWzB,OAAO,KAAK,MAAM,OAAO,CAAC;AA2B1B,OAAO,KAAK,EAAkB,eAAe,EAAE,MAAM,SAAS,CAAC;AAY/D,KAAK,oBAAoB,GAAG,WAAW,CAAC;AA2BxC,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;AAirBF,eAAO,MAAM,SAAS;KACpB,YAAY,SAAS,oBAAoB,uBAElC,cAAc,CAAC,YAAY,CAAC;;CAmBpC,CAAC"}

package/dist/cjs/akifilter.js

@@ -18,6 +18,7 @@ const akiform_1 = require("@akinon/akiform");
 const ui_button_1 = require("@akinon/ui-button");
 const ui_card_1 = require("@akinon/ui-card");
 const ui_checkbox_1 = require("@akinon/ui-checkbox");
+const ui_collapse_1 = require("@akinon/ui-collapse");
 const ui_date_picker_1 = require("@akinon/ui-date-picker");
 const ui_input_1 = require("@akinon/ui-input");
 const ui_input_number_1 = require("@akinon/ui-input-number");
@@ -55,14 +56,18 @@ const resolveClearedFieldValue = (field, defaultValue) => {
     }
 };
 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]);
-    const externalDefaults = react_1.default.useMemo(() => (0, schema_1.normaliseValuesBySchema)(filterSchema, defaultValues), [filterSchema, defaultValues]);
+    // Separate regular fields from section fields
+    const { regularFields, sectionFields } = react_1.default.useMemo(() => (0, schema_1.partitionSchema)(filterSchema), [filterSchema]);
+    // Flatten schema for storage and form value operations
+    const flattenedSchema = react_1.default.useMemo(() => (0, schema_1.flattenSchema)(filterSchema), [filterSchema]);
+    const storageKey = react_1.default.useMemo(() => (0, storage_1.buildStorageKey)(regularFields, storageNamespace), [regularFields, storageNamespace]);
+    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(() => {
         var _a;
-        return (0, schema_1.normaliseValuesBySchema)(filterSchema, (_a = (0, storage_1.readStoredValues)(filterSchema, storageKey)) !== null && _a !== void 0 ? _a : undefined);
-    }, [filterSchema, storageKey]);
+        return (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)({
         defaultValues: mergedDefaultValues
@@ -76,7 +81,7 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
         if (!formValues) {
             return [];
         }
-        return filterSchema.reduce((acc, field) => {
+        return flattenedSchema.reduce((acc, field) => {
             const key = String(field.key);
             const currentValue = formValues[key];
             if (currentValue === undefined || currentValue === null) {
@@ -132,24 +137,24 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
             acc.push({ key, label, value: resolveValue() });
             return acc;
         }, []);
-    }, [filterSchema, formValues]);
+    }, [flattenedSchema, formValues]);
     const resolveInitialVisibleKeys = react_1.default.useCallback(() => {
-        const storedKeys = (0, storage_1.readVisibleKeys)(filterSchema, storageKey);
+        const storedKeys = (0, storage_1.readVisibleKeys)(regularFields, storageKey);
         if (storedKeys && storedKeys.length > 0) {
-            return (0, schema_1.ensureSchemaOrder)(filterSchema, storedKeys);
+            return (0, schema_1.ensureSchemaOrder)(regularFields, storedKeys);
         }
-        return (0, schema_1.deriveDefaultVisibleKeys)(filterSchema);
-    }, [filterSchema, storageKey]);
+        return (0, schema_1.deriveDefaultVisibleKeys)(regularFields);
+    }, [regularFields, storageKey]);
     const [visibleKeys, setVisibleKeys] = react_1.default.useState(resolveInitialVisibleKeys);
     react_1.default.useEffect(() => {
         setVisibleKeys(previous => {
-            const ordered = (0, schema_1.ensureSchemaOrder)(filterSchema, previous);
+            const ordered = (0, schema_1.ensureSchemaOrder)(regularFields, previous);
             if (ordered.length) {
                 return ordered;
             }
             return resolveInitialVisibleKeys();
         });
-    }, [filterSchema, resolveInitialVisibleKeys]);
+    }, [regularFields, resolveInitialVisibleKeys]);
     react_1.default.useEffect(() => {
         (0, storage_1.writeVisibleKeys)(storageKey, visibleKeys);
         onVisibleFieldsChange === null || onVisibleFieldsChange === void 0 ? void 0 : onVisibleFieldsChange(visibleKeys);
@@ -157,12 +162,12 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
     react_1.default.useEffect(() => {
         formMethods.reset(mergedDefaultValues);
     }, [formMethods, mergedDefaultValues]);
-    const normalisedValues = react_1.default.useMemo(() => (0, values_1.normaliseOutputValues)(filterSchema, formValues), [filterSchema, formValues]);
+    const normalisedValues = react_1.default.useMemo(() => (0, values_1.normaliseOutputValues)(flattenedSchema, formValues), [flattenedSchema, formValues]);
     const hasInitialValuesRef = react_1.default.useRef(false);
     react_1.default.useEffect(() => {
-        const initialValues = (0, values_1.normaliseOutputValues)(filterSchema, mergedDefaultValues);
+        const initialValues = (0, values_1.normaliseOutputValues)(flattenedSchema, mergedDefaultValues);
         hasInitialValuesRef.current = Object.keys(initialValues).length > 0;
-    }, [filterSchema, mergedDefaultValues]);
+    }, [flattenedSchema, 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);
@@ -214,7 +219,7 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
     }, [storageKey]);
     const handleClearAll = react_1.default.useCallback(() => {
         const clearedDefaults = Object.assign({}, baseDefaultValues);
-        filterSchema.forEach(field => {
+        flattenedSchema.forEach(field => {
             const key = String(field.key);
             const defaultValue = baseDefaultValues[key];
             const resolved = resolveClearedFieldValue(field, defaultValue);
@@ -230,13 +235,20 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
             keepTouched: false
         });
         onClearAll === null || onClearAll === void 0 ? void 0 : onClearAll();
-        const nextValues = (0, values_1.normaliseOutputValues)(filterSchema, clearedDefaults);
+        const nextValues = (0, values_1.normaliseOutputValues)(flattenedSchema, 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]);
+    }, [
+        baseDefaultValues,
+        flattenedSchema,
+        formMethods,
+        onClearAll,
+        onValuesChange,
+        persistValues
+    ]);
     const handleOpenModal = react_1.default.useCallback(() => {
         setIsModalOpen(true);
         setSearchTerm('');
@@ -254,11 +266,11 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
             const nextKeys = exists
                 ? prev.filter(item => item !== key)
                 : [...prev, key];
-            return (0, schema_1.ensureSchemaOrder)(filterSchema, nextKeys);
+            return (0, schema_1.ensureSchemaOrder)(regularFields, nextKeys);
         });
-    }, [filterSchema]);
+    }, [regularFields]);
     const handleRemoveFilter = react_1.default.useCallback((key) => {
-        const schemaField = filterSchema.find(field => String(field.key) === key);
+        const schemaField = flattenedSchema.find(field => String(field.key) === key);
         if (!schemaField) {
             return;
         }
@@ -274,7 +286,7 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
         // Compute the updated values immediately (don't wait for debounce)
         const currentValues = formMethods.getValues() || {};
         const updatedFormValues = Object.assign(Object.assign({}, currentValues), { [fieldPath]: nextValue });
-        const nextValues = (0, values_1.normaliseOutputValues)(filterSchema, updatedFormValues);
+        const nextValues = (0, values_1.normaliseOutputValues)(flattenedSchema, updatedFormValues);
         const nextSerialised = JSON.stringify(nextValues);
         // Persist immediately (bypass debounce for remove action)
         persistValues(nextValues);
@@ -287,7 +299,7 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
         onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(nextValues);
     }, [
         baseDefaultValues,
-        filterSchema,
+        flattenedSchema,
         formMethods,
         onValuesChange,
         persistValues
@@ -295,20 +307,20 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
     const filteredFields = react_1.default.useMemo(() => {
         const normalisedTerm = searchTerm.trim().toLowerCase();
         if (!normalisedTerm) {
-            return filterSchema;
+            return regularFields;
         }
-        return filterSchema.filter(field => {
+        return regularFields.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]);
+    }, [regularFields, searchTerm]);
     const paginatedFields = react_1.default.useMemo(() => {
         const start = (modalPage - 1) * modalPageSize;
         return filteredFields.slice(start, start + modalPageSize);
     }, [filteredFields, modalPage, modalPageSize]);
-    const visibleFields = react_1.default.useMemo(() => filterSchema.filter(field => visibleKeys.includes(String(field.key))), [filterSchema, visibleKeys]);
+    const visibleFields = react_1.default.useMemo(() => regularFields.filter(field => visibleKeys.includes(String(field.key))), [regularFields, visibleKeys]);
     const renderFieldComponent = (field) => {
         const ariaLabel = (0, schema_1.getFieldAriaLabel)(field);
         switch (field.type) {
@@ -335,10 +347,17 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
                     });
                 }
                 return (react_1.default.createElement(ui_typography_1.Text, { type: "secondary", className: "akinon-filter__unsupported" }, i18n_1.i18n.t('form.unsupportedField', { field: String(field.type) })));
+            case 'section':
+                // Section fields should not be rendered inline
+                // They are rendered separately after the main grid
+                return null;
             default:
                 return (react_1.default.createElement(ui_typography_1.Text, { type: "secondary", className: "akinon-filter__unsupported" }, i18n_1.i18n.t('form.unsupportedField', { field: String(field.type) })));
         }
     };
+    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(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 },
             react_1.default.createElement(filter_toolbar_1.FilterToolbar, { onOpenModal: handleOpenModal, enableImportCsv: enableImportCsv, enableImportXls: enableImportXls, onImportCsv: onImportCsv, onImportXls: onImportXls }),
@@ -346,8 +365,17 @@ 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), 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))),
+                        visibleFields.map(renderFormField),
+                        visibleFields.length === 0 ? (react_1.default.createElement("div", { className: "akinon-filter__empty" }, i18n_1.i18n.t('form.noVisibleFields'))) : null),
+                    sectionFields.length > 0 && (react_1.default.createElement("div", { className: "akinon-filter__section-fields" }, sectionFields.map(section => {
+                        return (react_1.default.createElement(ui_collapse_1.Collapse, { key: section.key, defaultActiveKey: section.key, ghost: true, items: [
+                                {
+                                    key: section.key,
+                                    label: section.label,
+                                    children: (react_1.default.createElement("div", { className: "akinon-filter__form-grid" }, section.fields.map(renderFormField)))
+                                }
+                            ] }));
+                    }))))),
             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);
                     setModalPage(1);

package/dist/cjs/styles.css

@@ -51,6 +51,15 @@
   top: 1px;
 }
 
+.akinon-filter__common-filters {
+  margin-top: 2rem;
+}
+
+.akinon-filter__common-filters-title {
+  color: var(--color-gray-500);
+  margin-bottom: 1rem;
+}
+
 .akinon-filter__form-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -65,6 +74,27 @@
   width: 100%;
 }
 
+.akinon-filter__section-fields {
+  margin-top: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.akinon-filter__section-fields .akinon-collapse-header {
+  padding-bottom: 0 !important;
+}
+
+.akinon-filter__section-fields .akinon-collapse-header-text {
+  color: var(--color-gray-500);
+}
+
+.akinon-filter__section-fields .akinon-collapse-expand-icon .akinon-collapse-arrow {
+  font-size: 1rem !important;
+  color: var(--color-gray-500) !important;
+}
+
+
 @media (max-width: 1024px) {
   .akinon-filter__form-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));

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

@@ -1,5 +1,19 @@
 import type { FieldValues } from '@akinon/akiform';
 import type { AkifilterField, AkifilterSchema } from '../types';
+/**
+ * Flattens schema by extracting all nested fields from section fields.
+ * This is used for storage operations and form value management.
+ */
+export declare const flattenSchema: <TFieldValues extends FieldValues = FieldValues>(schema: AkifilterSchema<TFieldValues>) => AkifilterSchema<TFieldValues>;
+/**
+ * Separates section fields from regular fields.
+ */
+export declare const partitionSchema: <TFieldValues extends FieldValues = FieldValues>(schema: AkifilterSchema<TFieldValues>) => {
+    regularFields: AkifilterSchema<TFieldValues>;
+    sectionFields: Array<AkifilterField<TFieldValues> & {
+        fields: AkifilterSchema<TFieldValues>;
+    }>;
+};
 export declare const getDisplayLabel: <TFieldValues extends FieldValues = FieldValues>(field: AkifilterField<TFieldValues>) => string;
 export declare const getFieldAriaLabel: <TFieldValues extends FieldValues = FieldValues>(field: AkifilterField<TFieldValues>) => string;
 export declare const ensureSchemaOrder: <TFieldValues extends FieldValues = FieldValues>(schema: AkifilterSchema<TFieldValues>, keys: string[]) => string[];

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

@@ -1 +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"}
+{"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;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,YAAY,SAAS,WAAW,GAAG,WAAW,EAC1E,QAAQ,eAAe,CAAC,YAAY,CAAC,KACpC,eAAe,CAAC,YAAY,CAW9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,YAAY,SAAS,WAAW,GAAG,WAAW,EAC5E,QAAQ,eAAe,CAAC,YAAY,CAAC,KACpC;IACD,aAAa,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC7C,aAAa,EAAE,KAAK,CAClB,cAAc,CAAC,YAAY,CAAC,GAAG;QAC7B,MAAM,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;KACvC,CACF,CAAC;CAwBH,CAAC;AAEF,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

@@ -1,8 +1,42 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.normaliseValuesBySchema = exports.extractDefaultValues = exports.deriveDefaultVisibleKeys = exports.ensureSchemaOrder = exports.getFieldAriaLabel = exports.getDisplayLabel = void 0;
+exports.normaliseValuesBySchema = exports.extractDefaultValues = exports.deriveDefaultVisibleKeys = exports.ensureSchemaOrder = exports.getFieldAriaLabel = exports.getDisplayLabel = exports.partitionSchema = exports.flattenSchema = void 0;
 const akidate_1 = require("@akinon/akidate");
 const constants_1 = require("../constants");
+/**
+ * Flattens schema by extracting all nested fields from section fields.
+ * This is used for storage operations and form value management.
+ */
+const flattenSchema = (schema) => {
+    return schema.reduce((acc, field) => {
+        if (field.type === 'section' && 'fields' in field) {
+            // Recursively flatten nested section fields
+            return [
+                ...acc,
+                ...(0, exports.flattenSchema)(field.fields)
+            ];
+        }
+        return [...acc, field];
+    }, []);
+};
+exports.flattenSchema = flattenSchema;
+/**
+ * Separates section fields from regular fields.
+ */
+const partitionSchema = (schema) => {
+    const regularFields = [];
+    const sectionFields = [];
+    schema.forEach(field => {
+        if (field.type === 'section') {
+            sectionFields.push(field);
+        }
+        else {
+            regularFields.push(field);
+        }
+    });
+    return { regularFields, sectionFields };
+};
+exports.partitionSchema = partitionSchema;
 const getDisplayLabel = (field) => {
     return field.label || field.placeholder || String(field.key);
 };

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;AA2B1B,OAAO,KAAK,EAAkB,eAAe,EAAE,MAAM,SAAS,CAAC;AAU/D,KAAK,oBAAoB,GAAG,WAAW,CAAC;AA2BxC,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;AAqnBF,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;AAWzB,OAAO,KAAK,MAAM,OAAO,CAAC;AA2B1B,OAAO,KAAK,EAAkB,eAAe,EAAE,MAAM,SAAS,CAAC;AAY/D,KAAK,oBAAoB,GAAG,WAAW,CAAC;AA2BxC,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;AAirBF,eAAO,MAAM,SAAS;KACpB,YAAY,SAAS,oBAAoB,uBAElC,cAAc,CAAC,YAAY,CAAC;;CAmBpC,CAAC"}

package/dist/esm/akifilter.js

@@ -15,6 +15,7 @@ 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 { Collapse } from '@akinon/ui-collapse';
 import { DatePicker } from '@akinon/ui-date-picker';
 import { Input, InputTextArea } from '@akinon/ui-input';
 import { InputNumber } from '@akinon/ui-input-number';
@@ -31,7 +32,7 @@ import { VisibilityModal } from './components/visibility-modal';
 import { BOOLEAN_STRING, DATE_FORMAT, 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 { deriveDefaultVisibleKeys, ensureSchemaOrder, extractDefaultValues, flattenSchema, getFieldAriaLabel, normaliseValuesBySchema, partitionSchema } from './utils/schema';
 import { normaliseOutputValues } from './utils/values';
 const resolveClearedFieldValue = (field, defaultValue) => {
     if (defaultValue !== undefined) {
@@ -52,14 +53,18 @@ const resolveClearedFieldValue = (field, defaultValue) => {
     }
 };
 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]);
+    // Separate regular fields from section fields
+    const { regularFields, sectionFields } = React.useMemo(() => partitionSchema(filterSchema), [filterSchema]);
+    // Flatten schema for storage and form value operations
+    const flattenedSchema = React.useMemo(() => flattenSchema(filterSchema), [filterSchema]);
+    const storageKey = React.useMemo(() => buildStorageKey(regularFields, storageNamespace), [regularFields, storageNamespace]);
+    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(() => {
         var _a;
-        return normaliseValuesBySchema(filterSchema, (_a = readStoredValues(filterSchema, storageKey)) !== null && _a !== void 0 ? _a : undefined);
-    }, [filterSchema, storageKey]);
+        return 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({
         defaultValues: mergedDefaultValues
@@ -73,7 +78,7 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
         if (!formValues) {
             return [];
         }
-        return filterSchema.reduce((acc, field) => {
+        return flattenedSchema.reduce((acc, field) => {
             const key = String(field.key);
             const currentValue = formValues[key];
             if (currentValue === undefined || currentValue === null) {
@@ -129,24 +134,24 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
             acc.push({ key, label, value: resolveValue() });
             return acc;
         }, []);
-    }, [filterSchema, formValues]);
+    }, [flattenedSchema, formValues]);
     const resolveInitialVisibleKeys = React.useCallback(() => {
-        const storedKeys = readVisibleKeys(filterSchema, storageKey);
+        const storedKeys = readVisibleKeys(regularFields, storageKey);
         if (storedKeys && storedKeys.length > 0) {
-            return ensureSchemaOrder(filterSchema, storedKeys);
+            return ensureSchemaOrder(regularFields, storedKeys);
         }
-        return deriveDefaultVisibleKeys(filterSchema);
-    }, [filterSchema, storageKey]);
+        return deriveDefaultVisibleKeys(regularFields);
+    }, [regularFields, storageKey]);
     const [visibleKeys, setVisibleKeys] = React.useState(resolveInitialVisibleKeys);
     React.useEffect(() => {
         setVisibleKeys(previous => {
-            const ordered = ensureSchemaOrder(filterSchema, previous);
+            const ordered = ensureSchemaOrder(regularFields, previous);
             if (ordered.length) {
                 return ordered;
             }
             return resolveInitialVisibleKeys();
         });
-    }, [filterSchema, resolveInitialVisibleKeys]);
+    }, [regularFields, resolveInitialVisibleKeys]);
     React.useEffect(() => {
         writeVisibleKeys(storageKey, visibleKeys);
         onVisibleFieldsChange === null || onVisibleFieldsChange === void 0 ? void 0 : onVisibleFieldsChange(visibleKeys);
@@ -154,12 +159,12 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
     React.useEffect(() => {
         formMethods.reset(mergedDefaultValues);
     }, [formMethods, mergedDefaultValues]);
-    const normalisedValues = React.useMemo(() => normaliseOutputValues(filterSchema, formValues), [filterSchema, formValues]);
+    const normalisedValues = React.useMemo(() => normaliseOutputValues(flattenedSchema, formValues), [flattenedSchema, formValues]);
     const hasInitialValuesRef = React.useRef(false);
     React.useEffect(() => {
-        const initialValues = normaliseOutputValues(filterSchema, mergedDefaultValues);
+        const initialValues = normaliseOutputValues(flattenedSchema, mergedDefaultValues);
         hasInitialValuesRef.current = Object.keys(initialValues).length > 0;
-    }, [filterSchema, mergedDefaultValues]);
+    }, [flattenedSchema, mergedDefaultValues]);
     const serialisedValues = React.useMemo(() => JSON.stringify(normalisedValues), [normalisedValues]);
     const debouncedSerialisedValues = useDebouncedValue(serialisedValues, FILTER_DEBOUNCE_DELAY);
     const lastPersistedValuesRef = React.useRef(null);
@@ -211,7 +216,7 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
     }, [storageKey]);
     const handleClearAll = React.useCallback(() => {
         const clearedDefaults = Object.assign({}, baseDefaultValues);
-        filterSchema.forEach(field => {
+        flattenedSchema.forEach(field => {
             const key = String(field.key);
             const defaultValue = baseDefaultValues[key];
             const resolved = resolveClearedFieldValue(field, defaultValue);
@@ -227,13 +232,20 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
             keepTouched: false
         });
         onClearAll === null || onClearAll === void 0 ? void 0 : onClearAll();
-        const nextValues = normaliseOutputValues(filterSchema, clearedDefaults);
+        const nextValues = normaliseOutputValues(flattenedSchema, 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]);
+    }, [
+        baseDefaultValues,
+        flattenedSchema,
+        formMethods,
+        onClearAll,
+        onValuesChange,
+        persistValues
+    ]);
     const handleOpenModal = React.useCallback(() => {
         setIsModalOpen(true);
         setSearchTerm('');
@@ -251,11 +263,11 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
             const nextKeys = exists
                 ? prev.filter(item => item !== key)
                 : [...prev, key];
-            return ensureSchemaOrder(filterSchema, nextKeys);
+            return ensureSchemaOrder(regularFields, nextKeys);
         });
-    }, [filterSchema]);
+    }, [regularFields]);
     const handleRemoveFilter = React.useCallback((key) => {
-        const schemaField = filterSchema.find(field => String(field.key) === key);
+        const schemaField = flattenedSchema.find(field => String(field.key) === key);
         if (!schemaField) {
             return;
         }
@@ -271,7 +283,7 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
         // Compute the updated values immediately (don't wait for debounce)
         const currentValues = formMethods.getValues() || {};
         const updatedFormValues = Object.assign(Object.assign({}, currentValues), { [fieldPath]: nextValue });
-        const nextValues = normaliseOutputValues(filterSchema, updatedFormValues);
+        const nextValues = normaliseOutputValues(flattenedSchema, updatedFormValues);
         const nextSerialised = JSON.stringify(nextValues);
         // Persist immediately (bypass debounce for remove action)
         persistValues(nextValues);
@@ -284,7 +296,7 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
         onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(nextValues);
     }, [
         baseDefaultValues,
-        filterSchema,
+        flattenedSchema,
         formMethods,
         onValuesChange,
         persistValues
@@ -292,20 +304,20 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
     const filteredFields = React.useMemo(() => {
         const normalisedTerm = searchTerm.trim().toLowerCase();
         if (!normalisedTerm) {
-            return filterSchema;
+            return regularFields;
         }
-        return filterSchema.filter(field => {
+        return regularFields.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]);
+    }, [regularFields, 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 visibleFields = React.useMemo(() => regularFields.filter(field => visibleKeys.includes(String(field.key))), [regularFields, visibleKeys]);
     const renderFieldComponent = (field) => {
         const ariaLabel = getFieldAriaLabel(field);
         switch (field.type) {
@@ -332,10 +344,17 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
                     });
                 }
                 return (React.createElement(Text, { type: "secondary", className: "akinon-filter__unsupported" }, i18n.t('form.unsupportedField', { field: String(field.type) })));
+            case 'section':
+                // Section fields should not be rendered inline
+                // They are rendered separately after the main grid
+                return null;
             default:
                 return (React.createElement(Text, { type: "secondary", className: "akinon-filter__unsupported" }, i18n.t('form.unsupportedField', { field: String(field.type) })));
         }
     };
+    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(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 }),
@@ -343,8 +362,17 @@ 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), 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))),
+                        visibleFields.map(renderFormField),
+                        visibleFields.length === 0 ? (React.createElement("div", { className: "akinon-filter__empty" }, i18n.t('form.noVisibleFields'))) : null),
+                    sectionFields.length > 0 && (React.createElement("div", { className: "akinon-filter__section-fields" }, sectionFields.map(section => {
+                        return (React.createElement(Collapse, { key: section.key, defaultActiveKey: section.key, ghost: true, items: [
+                                {
+                                    key: section.key,
+                                    label: section.label,
+                                    children: (React.createElement("div", { className: "akinon-filter__form-grid" }, section.fields.map(renderFormField)))
+                                }
+                            ] }));
+                    }))))),
             React.createElement(VisibilityModal, { open: isModalOpen, onClose: handleCloseModal, searchTerm: searchTerm, paginatedFields: paginatedFields, filteredCount: filteredFields.length, visibleKeys: visibleKeys, onSearchTermChange: value => {
                     setSearchTerm(value);
                     setModalPage(1);

package/dist/esm/styles.css

@@ -51,6 +51,15 @@
   top: 1px;
 }
 
+.akinon-filter__common-filters {
+  margin-top: 2rem;
+}
+
+.akinon-filter__common-filters-title {
+  color: var(--color-gray-500);
+  margin-bottom: 1rem;
+}
+
 .akinon-filter__form-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -65,6 +74,27 @@
   width: 100%;
 }
 
+.akinon-filter__section-fields {
+  margin-top: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.akinon-filter__section-fields .akinon-collapse-header {
+  padding-bottom: 0 !important;
+}
+
+.akinon-filter__section-fields .akinon-collapse-header-text {
+  color: var(--color-gray-500);
+}
+
+.akinon-filter__section-fields .akinon-collapse-expand-icon .akinon-collapse-arrow {
+  font-size: 1rem !important;
+  color: var(--color-gray-500) !important;
+}
+
+
 @media (max-width: 1024px) {
   .akinon-filter__form-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));

package/dist/esm/utils/schema.d.ts

@@ -1,5 +1,19 @@
 import type { FieldValues } from '@akinon/akiform';
 import type { AkifilterField, AkifilterSchema } from '../types';
+/**
+ * Flattens schema by extracting all nested fields from section fields.
+ * This is used for storage operations and form value management.
+ */
+export declare const flattenSchema: <TFieldValues extends FieldValues = FieldValues>(schema: AkifilterSchema<TFieldValues>) => AkifilterSchema<TFieldValues>;
+/**
+ * Separates section fields from regular fields.
+ */
+export declare const partitionSchema: <TFieldValues extends FieldValues = FieldValues>(schema: AkifilterSchema<TFieldValues>) => {
+    regularFields: AkifilterSchema<TFieldValues>;
+    sectionFields: Array<AkifilterField<TFieldValues> & {
+        fields: AkifilterSchema<TFieldValues>;
+    }>;
+};
 export declare const getDisplayLabel: <TFieldValues extends FieldValues = FieldValues>(field: AkifilterField<TFieldValues>) => string;
 export declare const getFieldAriaLabel: <TFieldValues extends FieldValues = FieldValues>(field: AkifilterField<TFieldValues>) => string;
 export declare const ensureSchemaOrder: <TFieldValues extends FieldValues = FieldValues>(schema: AkifilterSchema<TFieldValues>, keys: string[]) => string[];

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

@@ -1 +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"}
+{"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;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,YAAY,SAAS,WAAW,GAAG,WAAW,EAC1E,QAAQ,eAAe,CAAC,YAAY,CAAC,KACpC,eAAe,CAAC,YAAY,CAW9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,YAAY,SAAS,WAAW,GAAG,WAAW,EAC5E,QAAQ,eAAe,CAAC,YAAY,CAAC,KACpC;IACD,aAAa,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC7C,aAAa,EAAE,KAAK,CAClB,cAAc,CAAC,YAAY,CAAC,GAAG;QAC7B,MAAM,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;KACvC,CACF,CAAC;CAwBH,CAAC;AAEF,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/esm/utils/schema.js

@@ -1,5 +1,37 @@
 import { akidate } from '@akinon/akidate';
 import { DEFAULT_VISIBLE_COUNT } from '../constants';
+/**
+ * Flattens schema by extracting all nested fields from section fields.
+ * This is used for storage operations and form value management.
+ */
+export const flattenSchema = (schema) => {
+    return schema.reduce((acc, field) => {
+        if (field.type === 'section' && 'fields' in field) {
+            // Recursively flatten nested section fields
+            return [
+                ...acc,
+                ...flattenSchema(field.fields)
+            ];
+        }
+        return [...acc, field];
+    }, []);
+};
+/**
+ * Separates section fields from regular fields.
+ */
+export const partitionSchema = (schema) => {
+    const regularFields = [];
+    const sectionFields = [];
+    schema.forEach(field => {
+        if (field.type === 'section') {
+            sectionFields.push(field);
+        }
+        else {
+            regularFields.push(field);
+        }
+    });
+    return { regularFields, sectionFields };
+};
 export const getDisplayLabel = (field) => {
     return field.label || field.placeholder || String(field.key);
 };

package/package.json

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