@akinon/akifilter 1.7.1 → 1.8.0

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

@@ -1,6 +1,5 @@
 import type { FieldValues } from '@akinon/akiform';
-import { FIELD_TYPES } from '../constants';
-import type { AkifilterField, AkifilterSchema } from '../types';
+import type { AkifilterField, AkifilterSchema, AkifilterSectionField } from '../types';
 /**
  * Flattens schema by extracting all nested fields from section fields.
  * This is used for storage operations and form value management.
@@ -11,18 +10,9 @@ export declare const flattenSchema: <TFieldValues extends FieldValues = FieldVal
  */
 export declare const partitionSchema: <TFieldValues extends FieldValues = FieldValues>(schema: AkifilterSchema<TFieldValues>) => {
     regularFields: AkifilterSchema<TFieldValues>;
-    sectionFields: Array<AkifilterField<TFieldValues> & {
-        type: typeof FIELD_TYPES.SECTION;
-        fields: AkifilterSchema<TFieldValues>;
-        defaultExpanded?: boolean;
-        isExcludeSection?: boolean;
-    }>;
+    sectionFields: Array<AkifilterSectionField<TFieldValues>>;
 };
-export declare const deriveExcludeSectionKeys: <TFieldValues extends FieldValues = FieldValues>(sectionFields: Array<AkifilterField<TFieldValues> & {
-    type: typeof FIELD_TYPES.SECTION;
-    fields: AkifilterSchema<TFieldValues>;
-    isExcludeSection?: boolean;
-}>) => Set<string>;
+export declare const deriveExcludeSectionKeys: <TFieldValues extends FieldValues = FieldValues>(sectionFields: Array<AkifilterSectionField<TFieldValues>>) => Set<string>;
 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,EAAsC,WAAW,EAAE,MAAM,cAAc,CAAC;AAC/E,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,IAAI,EAAE,OAAO,WAAW,CAAC,OAAO,CAAC;QACjC,MAAM,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;QACtC,eAAe,CAAC,EAAE,OAAO,CAAC;QAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;KAC5B,CACF,CAAC;CAwBH,CAAC;AAEF,eAAO,MAAM,wBAAwB,GACnC,YAAY,SAAS,WAAW,GAAG,WAAW,EAE9C,eAAe,KAAK,CAClB,cAAc,CAAC,YAAY,CAAC,GAAG;IAC7B,IAAI,EAAE,OAAO,WAAW,CAAC,OAAO,CAAC;IACjC,MAAM,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACtC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CACF,KACA,GAAG,CAAC,MAAM,CAKV,CAAC;AAEJ,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;AAkBF;;GAEG;AACH,eAAO,MAAM,sBAAsB,GACjC,YAAY,SAAS,WAAW,GAAG,WAAW,EAE9C,OAAO,cAAc,CAAC,YAAY,CAAC,EACnC,aAAa,YAAY,EACzB,iBAAiB,OAAO,KACvB,OAAO,GAAG,SAC8D,CAAC;AAE5E,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,oBAAoB,GAAI,YAAY,SAAS,WAAW,EACnE,OAAO,cAAc,CAAC,YAAY,CAAC,KAClC,OAA4C,CAAC;AAEhD,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,CA0CtB,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/utils/schema.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAInD,OAAO,KAAK,EACV,cAAc,EACd,eAAe,EACf,qBAAqB,EACtB,MAAM,UAAU,CAAC;AAElB;;;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,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC,CAAC;CAc3D,CAAC;AAEF,eAAO,MAAM,wBAAwB,GACnC,YAAY,SAAS,WAAW,GAAG,WAAW,EAE9C,eAAe,KAAK,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC,KACxD,GAAG,CAAC,MAAM,CAKV,CAAC;AAEJ,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;AAkBF;;GAEG;AACH,eAAO,MAAM,sBAAsB,GACjC,YAAY,SAAS,WAAW,GAAG,WAAW,EAE9C,OAAO,cAAc,CAAC,YAAY,CAAC,EACnC,aAAa,YAAY,EACzB,iBAAiB,OAAO,KACvB,OAAO,GAAG,SAC8D,CAAC;AAE5E,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,oBAAoB,GAAI,YAAY,SAAS,WAAW,EACnE,OAAO,cAAc,CAAC,YAAY,CAAC,KAClC,OAA4C,CAAC;AAEhD,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,CA0CtB,CAAC"}

package/dist/esm/akifilter.d.ts

@@ -1,6 +1,5 @@
 import './styles.css';
 import { FieldValues, Path } from '@akinon/akiform';
-import { type PanelProps } from '@akinon/ui-collapse';
 import React from 'react';
 import { type AppliedFilter } from './components/applied-filters';
 import type { AkifilterActionsRef, AkifilterButton, AkifilterSchema } from './types';
@@ -73,15 +72,6 @@ export type AkifilterProps<TFieldValues extends AkifilterFieldValues = Akifilter
      */
     onFilterButtonsChange?: (activeButtons: AkifilterButton[]) => void;
 };
-export declare const ExpandIcon: ({ isActive }: PanelProps) => {
-    name: "chevron_down";
-    size: number;
-    style: {
-        transform: string;
-        transition: string;
-        marginTop: number;
-    };
-};
 export declare const Akifilter: {
     <TFieldValues extends AkifilterFieldValues = FieldValues>(props: AkifilterProps<TFieldValues>): React.JSX.Element;
     displayName: string;

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,EACX,IAAI,EAIL,MAAM,iBAAiB,CAAC;AAIzB,OAAO,EAAY,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAShE,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,OAAO,EACL,KAAK,aAAa,EAEnB,MAAM,8BAA8B,CAAC;AAetC,OAAO,KAAK,EACV,mBAAmB,EACnB,eAAe,EAEf,eAAe,EAChB,MAAM,SAAS,CAAC;AAcjB,KAAK,oBAAoB,GAAG,WAAW,CAAC;AA2KxC,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;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IAClD;;;OAGG;IACH,sBAAsB,CAAC,EAAE,aAAa,EAAE,CAAC;IACzC;;OAEG;IACH,sBAAsB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C;;;;;OAKG;IACH,aAAa,CAAC,EAAE,eAAe,EAAE,CAAC;IAClC;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,aAAa,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;CACpE,CAAC;AAq9BF,eAAO,MAAM,UAAU,GAAI,cAAc,UAAU;;;;;;;;CAQjD,CAAC;AA8CH,eAAO,MAAM,SAAS;KACpB,YAAY,SAAS,oBAAoB,uBAElC,cAAc,CAAC,YAAY,CAAC;;CAoBpC,CAAC"}
+{"version":3,"file":"akifilter.d.ts","sourceRoot":"","sources":["../../src/akifilter.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAGtB,OAAO,EAIL,WAAW,EACX,IAAI,EAIL,MAAM,iBAAiB,CAAC;AAYzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,EACL,KAAK,aAAa,EAEnB,MAAM,8BAA8B,CAAC;AAgBtC,OAAO,KAAK,EACV,mBAAmB,EACnB,eAAe,EAEf,eAAe,EAChB,MAAM,SAAS,CAAC;AAWjB,KAAK,oBAAoB,GAAG,WAAW,CAAC;AA2KxC,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;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IAClD;;;OAGG;IACH,sBAAsB,CAAC,EAAE,aAAa,EAAE,CAAC;IACzC;;OAEG;IACH,sBAAsB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C;;;;;OAKG;IACH,aAAa,CAAC,EAAE,eAAe,EAAE,CAAC;IAClC;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,aAAa,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;CACpE,CAAC;AA+3BF,eAAO,MAAM,SAAS;KACpB,YAAY,SAAS,oBAAoB,uBAElC,cAAc,CAAC,YAAY,CAAC;;CAoBpC,CAAC"}

package/dist/esm/akifilter.js

@@ -15,7 +15,6 @@ import { Akiform, useController, useForm, useWatch } from '@akinon/akiform';
 import { Button } from '@akinon/ui-button';
 import { Card } from '@akinon/ui-card';
 import { Checkbox } from '@akinon/ui-checkbox';
-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';
@@ -25,18 +24,20 @@ import { Upload } from '@akinon/ui-upload';
 import { ConfigProvider } from 'antd';
 import React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { buildStorageKey, clearStoredButtonValues, clearStoredValues, readStoredButtonValues, readStoredValues, readVisibleKeys, writeStoredButtonValues, writeStoredValues, writeVisibleKeys } from './common/storage';
+import { buildStorageKey, clearStoredButtonValues, clearStoredValues, readStoredButtonValues, readStoredValues, writeStoredButtonValues, writeStoredValues } from './common/storage';
 import { themeOverrides } from './common/theme-overrides';
 import { AppliedFilters } from './components/applied-filters';
 import { FilterButtons } from './components/filter-buttons';
 import { FilterToolbar } from './components/filter-toolbar';
+import { SectionFieldset } from './components/section-fieldset';
 import { VisibilityModal } from './components/visibility-modal';
-import { BOOLEAN_STRING, DEFAULT_MODAL_PAGE_SIZE, FIELD_MODES, FIELD_TYPES, FILTER_DEBOUNCE_DELAY } from './constants';
+import { BOOLEAN_STRING, FIELD_MODES, FIELD_TYPES, FILTER_DEBOUNCE_DELAY } from './constants';
 import { useDebouncedValue } from './hooks/use-debounced-value';
 import { useDynamicVisibility } from './hooks/use-dynamic-visibility';
+import { useFieldVisibility } from './hooks/use-field-visibility';
 import { useVisibilityCleanup } from './hooks/use-visibility-cleanup';
 import { i18n } from './i18n';
-import { deriveDefaultVisibleKeys, deriveExcludeSectionKeys, ensureSchemaOrder, extractDefaultValues, flattenSchema, getFieldAriaLabel, normaliseValuesBySchema, partitionSchema, resolveFieldVisibility } from './utils/schema';
+import { deriveExcludeSectionKeys, extractDefaultValues, flattenSchema, getFieldAriaLabel, normaliseValuesBySchema, partitionSchema } from './utils/schema';
 import { normaliseOutputValues } from './utils/values';
 /**
  * Prefix for applied-filter chip keys that originate from filter buttons.
@@ -149,10 +150,6 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
         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);
     // --- Filter buttons (quick-filter toggles) ---------------------------------
     // A button is identified by its `value`, which must be unique across the
     // whole `filterButtons` array.
@@ -280,41 +277,14 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
             value: button.label
         }));
     }, [filterButtons, activeButtonValues]);
-    const resolveInitialVisibleKeys = React.useCallback(() => {
-        const storedKeys = readVisibleKeys(regularFields, storageKey);
-        const defaultKeys = deriveDefaultVisibleKeys(regularFields);
-        const baseKeys = storedKeys && storedKeys.length > 0
-            ? ensureSchemaOrder(regularFields, storedKeys)
-            : defaultKeys;
-        return regularFields.reduce((acc, field) => {
-            const key = String(field.key);
-            const explicitVisibility = resolveFieldVisibility(field);
-            if (explicitVisibility !== undefined) {
-                if (explicitVisibility)
-                    acc.push(key);
-                return acc;
-            }
-            // No explicit boolean visibility, use stored/default
-            if (baseKeys.includes(key)) {
-                acc.push(key);
-            }
-            return acc;
-        }, []);
-    }, [regularFields, storageKey]);
-    const [visibleKeys, setVisibleKeys] = React.useState(resolveInitialVisibleKeys);
-    React.useEffect(() => {
-        setVisibleKeys(previous => {
-            const ordered = ensureSchemaOrder(regularFields, previous);
-            if (ordered.length) {
-                return ordered;
-            }
-            return resolveInitialVisibleKeys();
-        });
-    }, [regularFields, resolveInitialVisibleKeys]);
-    React.useEffect(() => {
-        writeVisibleKeys(storageKey, visibleKeys);
-        onVisibleFieldsChange === null || onVisibleFieldsChange === void 0 ? void 0 : onVisibleFieldsChange(visibleKeys);
-    }, [visibleKeys, onVisibleFieldsChange, storageKey]);
+    const handleVisibleKeysChange = React.useCallback((keys) => {
+        onVisibleFieldsChange === null || onVisibleFieldsChange === void 0 ? void 0 : onVisibleFieldsChange(keys);
+    }, [onVisibleFieldsChange]);
+    const { visibleKeys, setVisibleKeys, visibleFields, openModal, modalProps } = useFieldVisibility({
+        fields: regularFields,
+        storageKey,
+        onVisibleKeysChange: handleVisibleKeysChange
+    });
     const normalisedValues = React.useMemo(() => normaliseOutputValues(flattenedSchema, formValues), [flattenedSchema, formValues]);
     const hasInitialValuesRef = React.useRef(false);
     React.useEffect(() => {
@@ -445,26 +415,6 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
         emitValues,
         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(regularFields, nextKeys);
-        });
-    }, [regularFields]);
     const handleRemoveFilter = React.useCallback((key) => {
         const schemaField = flattenedSchema.find(field => String(field.key) === key);
         if (!schemaField) {
@@ -545,23 +495,6 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
             keysArray.forEach(key => handleRemoveFilter(key));
         }
     }), [handleRemoveFilter]);
-    const filteredFields = React.useMemo(() => {
-        const normalisedTerm = searchTerm.trim().toLowerCase();
-        if (!normalisedTerm) {
-            return regularFields;
-        }
-        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));
-        });
-    }, [regularFields, searchTerm]);
-    const paginatedFields = React.useMemo(() => {
-        const start = (modalPage - 1) * modalPageSize;
-        return filteredFields.slice(start, start + modalPageSize);
-    }, [filteredFields, modalPage, modalPageSize]);
-    const visibleFields = React.useMemo(() => regularFields.filter(field => visibleKeys.includes(String(field.key))), [regularFields, visibleKeys]);
     // Dynamic visibility
     useDynamicVisibility({
         regularFields,
@@ -652,7 +585,7 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
     };
     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(FilterToolbar, { onOpenModal: openModal, enableImportCsv: enableImportCsv, enableImportXls: enableImportXls, onImportCsv: onImportCsv, onImportXls: onImportXls }),
             React.createElement(AppliedFilters, { filters: [
                     ...appliedFilters,
                     ...buttonAppliedFilters,
@@ -663,35 +596,9 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
                     React.createElement("div", { className: "akinon-filter__form-grid", "data-testid": "akifilter-form-grid" },
                         visibleFields.map(renderFormField),
                         visibleFields.length === 0 && regularFields.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, { expandIconPosition: "end", key: section.key, expandIcon: ExpandIcon, defaultActiveKey: section.defaultExpanded === false ? [] : [section.key], ghost: true, items: [
-                                {
-                                    key: section.key,
-                                    label: (React.createElement(Title, { className: "akinon-filter__title", level: 4 }, section.label)),
-                                    headerClass: 'akinon-filter__section-header',
-                                    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);
-                }, onToggleVisibility: handleToggleVisibility, onPaginationChange: (page, pageSize) => {
-                    setModalPage(page);
-                    if (pageSize !== modalPageSize) {
-                        setModalPageSize(pageSize);
-                    }
-                }, page: modalPage, pageSize: modalPageSize }))));
+                    sectionFields.length > 0 && (React.createElement("div", { className: "akinon-filter__section-fields" }, sectionFields.map(section => (React.createElement(SectionFieldset, { key: String(section.key), section: section, storageKey: storageKey, renderFormField: renderFormField, onRemoveField: handleRemoveFilter, formValues: normalisedValues }))))))),
+            React.createElement(VisibilityModal, Object.assign({}, modalProps)))));
 };
-export const ExpandIcon = ({ isActive }) => ({
-    name: 'chevron_down',
-    size: 10,
-    style: {
-        transform: isActive ? 'rotate(-180deg)' : 'rotate(0deg)',
-        transition: 'transform 0.2s ease-in-out',
-        marginTop: 8
-    }
-});
 const AkifilterEmptyState = () => {
     const { t } = i18n;
     return (React.createElement(Card, { size: "small", className: "akinon-filter shadow", "data-testid": "akifilter-empty" },

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

@@ -3,6 +3,7 @@ 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 buildSectionVisibilityKey: (storageKey: string, sectionKey: string | number) => string;
 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;

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

@@ -1 +1 @@
-{"version":3,"file":"storage.d.ts","sourceRoot":"","sources":["../../../src/common/storage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AA4B/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,IAoBb,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;AAKF,eAAO,MAAM,sBAAsB,GACjC,YAAY,MAAM,KACjB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,IAwB3B,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAClC,YAAY,MAAM,EAClB,QAAQ,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KAC7B,IAcF,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,YAAY,MAAM,KAAG,IAQ5D,CAAC"}
+{"version":3,"file":"storage.d.ts","sourceRoot":"","sources":["../../../src/common/storage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AA4B/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,IAoBb,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,YAAY,MAAM,EAAE,MAAM,MAAM,EAAE,KAAG,IAQrE,CAAC;AAEF,eAAO,MAAM,yBAAyB,GACpC,YAAY,MAAM,EAClB,YAAY,MAAM,GAAG,MAAM,KAC1B,MAAuD,CAAC;AAE3D,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;AAKF,eAAO,MAAM,sBAAsB,GACjC,YAAY,MAAM,KACjB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,IAwB3B,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAClC,YAAY,MAAM,EAClB,QAAQ,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KAC7B,IAcF,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,YAAY,MAAM,KAAG,IAQ5D,CAAC"}

package/dist/esm/common/storage.js

@@ -56,6 +56,7 @@ export const writeVisibleKeys = (storageKey, keys) => {
         console.warn(i18n.t('errors.storage.writeVisibility'), error);
     }
 };
+export const buildSectionVisibilityKey = (storageKey, sectionKey) => `${storageKey}:section:${String(sectionKey)}`;
 export const clearVisibleKeys = (storageKey) => {
     if (!isBrowser)
         return;

package/dist/esm/components/section-fieldset.d.ts

@@ -0,0 +1,29 @@
+import type { FieldValues } from '@akinon/akiform';
+import React from 'react';
+import type { AkifilterField, AkifilterSectionField } from '../types';
+type SectionFieldsetProps<TFieldValues extends FieldValues = FieldValues> = {
+    section: AkifilterSectionField<TFieldValues>;
+    /**
+     * Base storage key of the host Akifilter; combined with the section key to
+     * persist this section's visible-field selection.
+     */
+    storageKey: string;
+    renderFormField: (field: AkifilterField<TFieldValues>) => React.ReactNode;
+    /**
+     * Clears a field's form value; used to drop the value of a field that gets
+     * hidden from the section.
+     */
+    onRemoveField: (key: string) => void;
+    /**
+     * Current normalised form values, needed to resolve dynamic visibility.
+     */
+    formValues: Partial<TFieldValues> | undefined;
+};
+/**
+ * Renders a single section field. Sections flagged with `selectableFields`
+ * expose a funnel icon + visibility modal; all others render every field
+ * inline as before.
+ */
+export declare const SectionFieldset: <TFieldValues extends FieldValues = FieldValues>(props: SectionFieldsetProps<TFieldValues>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=section-fieldset.d.ts.map

package/dist/esm/components/section-fieldset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-fieldset.d.ts","sourceRoot":"","sources":["../../../src/components/section-fieldset.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAKnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AA8CtE,KAAK,oBAAoB,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,IAAI;IAC1E,OAAO,EAAE,qBAAqB,CAAC,YAAY,CAAC,CAAC;IAC7C;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,YAAY,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1E;;;OAGG;IACH,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC;CAC/C,CAAC;AAwGF;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,YAAY,SAAS,WAAW,GAAG,WAAW,EAC5E,OAAO,oBAAoB,CAAC,YAAY,CAAC,sBAuB1C,CAAC"}

package/dist/esm/components/section-fieldset.js

@@ -0,0 +1,93 @@
+import { Icon } from '@akinon/icons';
+import { Button } from '@akinon/ui-button';
+import { Collapse } from '@akinon/ui-collapse';
+import { Title } from '@akinon/ui-typography';
+import React from 'react';
+import { buildSectionVisibilityKey } from '../common/storage';
+import { useDynamicVisibility } from '../hooks/use-dynamic-visibility';
+import { useFieldVisibility } from '../hooks/use-field-visibility';
+import { useVisibilityCleanup } from '../hooks/use-visibility-cleanup';
+import { i18n } from '../i18n';
+import { VisibilityModal } from './visibility-modal';
+const ExpandIcon = ({ isActive }) => ({
+    name: 'chevron_down',
+    size: 10,
+    style: {
+        transform: isActive ? 'rotate(-180deg)' : 'rotate(0deg)',
+        transition: 'transform 0.2s ease-in-out',
+        marginTop: 8
+    }
+});
+/**
+ * Presentational wrapper around the collapsible panel used by every section,
+ * so the selectable and plain variants share one markup.
+ */
+const SectionCollapse = ({ sectionKey, label, defaultExpanded, children }) => (React.createElement(Collapse, { expandIconPosition: "end", expandIcon: ExpandIcon, defaultActiveKey: defaultExpanded === false ? [] : [sectionKey], ghost: true, items: [
+        {
+            key: sectionKey,
+            label,
+            headerClass: 'akinon-filter__section-header',
+            children: React.createElement("div", { className: "akinon-filter__form-grid" }, children)
+        }
+    ] }));
+/**
+ * A section whose header exposes a funnel icon that opens the visibility modal,
+ * mirroring the top-level filter field-selection behaviour.
+ */
+const SelectableSectionFieldset = ({ section, storageKey, renderFormField, onRemoveField, formValues }) => {
+    const sectionStorageKey = React.useMemo(() => buildSectionVisibilityKey(storageKey, section.key), [storageKey, section.key]);
+    const { visibleKeys, setVisibleKeys, visibleFields, openModal, modalProps } = useFieldVisibility({
+        fields: section.fields,
+        storageKey: sectionStorageKey
+    });
+    useDynamicVisibility({
+        regularFields: section.fields,
+        formValues,
+        setVisibleKeys
+    });
+    useVisibilityCleanup({
+        visibleKeys,
+        regularFields: section.fields,
+        onRemove: onRemoveField
+    });
+    // Controlled so we can render our own chevron in the header and keep the
+    // funnel button pinned to the far right (after the arrow).
+    const sectionKey = String(section.key);
+    const [activeKeys, setActiveKeys] = React.useState(section.defaultExpanded === false ? [] : [sectionKey]);
+    const isExpanded = activeKeys.includes(sectionKey);
+    const label = (React.createElement("div", { className: "akinon-filter__section-header-content" },
+        React.createElement(Title, { className: "akinon-filter__title", level: 4 }, section.label),
+        React.createElement(Icon, { icon: "chevron_down", size: 10, className: "akinon-filter__section-arrow", style: {
+                transform: isExpanded ? 'rotate(-180deg)' : 'rotate(0deg)',
+                transition: 'transform 0.2s ease-in-out'
+            } }),
+        React.createElement(Button, { className: "akinon-filter__toolbar-item akinon-filter__section-funnel", icon: "filter", iconSize: 16, type: "primary", title: i18n.t('header.actions.selectFilters'), "aria-label": i18n.t('header.actions.selectFilters'), onClick: event => {
+                // Prevent the header click from toggling the collapse.
+                event.stopPropagation();
+                openModal();
+            } })));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Collapse, { activeKey: activeKeys, onChange: keys => setActiveKeys((Array.isArray(keys) ? keys : [keys]).map(String)), ghost: true, items: [
+                {
+                    key: sectionKey,
+                    label,
+                    headerClass: 'akinon-filter__section-header akinon-filter__section-header--selectable',
+                    showArrow: false,
+                    children: (React.createElement("div", { className: "akinon-filter__form-grid" }, visibleFields.map(renderFormField)))
+                }
+            ] }),
+        React.createElement(VisibilityModal, Object.assign({}, modalProps))));
+};
+/**
+ * Renders a single section field. Sections flagged with `selectableFields`
+ * expose a funnel icon + visibility modal; all others render every field
+ * inline as before.
+ */
+export const SectionFieldset = (props) => {
+    const { section, renderFormField } = props;
+    if (section.selectableFields) {
+        return React.createElement(SelectableSectionFieldset, Object.assign({}, props));
+    }
+    const label = (React.createElement(Title, { className: "akinon-filter__title", level: 4 }, section.label));
+    return (React.createElement(SectionCollapse, { sectionKey: String(section.key), label: label, defaultExpanded: section.defaultExpanded }, section.fields.map(renderFormField)));
+};

package/dist/esm/hooks/use-field-visibility.d.ts

@@ -0,0 +1,45 @@
+import { type FieldValues } from '@akinon/akiform';
+import React from 'react';
+import type { AkifilterSchema } from '../types';
+type UseFieldVisibilityParams<TFieldValues extends FieldValues> = {
+    /**
+     * Fields whose visibility this hook manages (top-level filters or the fields
+     * of a single section).
+     */
+    fields: AkifilterSchema<TFieldValues>;
+    /**
+     * Storage key under which the visible-field selection is persisted. Callers
+     * pass distinct keys per group so selections never collide.
+     */
+    storageKey: string;
+    /**
+     * Notified whenever the resolved visible keys change.
+     */
+    onVisibleKeysChange?: (keys: string[]) => void;
+};
+/**
+ * Encapsulates the visible-field selection and its accompanying modal state for
+ * a single group of fields. Used both for the top-level filters and for each
+ * selectable section so the two share one implementation.
+ */
+export declare const useFieldVisibility: <TFieldValues extends FieldValues = FieldValues>({ fields, storageKey, onVisibleKeysChange }: UseFieldVisibilityParams<TFieldValues>) => {
+    visibleKeys: string[];
+    setVisibleKeys: React.Dispatch<React.SetStateAction<string[]>>;
+    visibleFields: import("../types").AkifilterField<TFieldValues>[];
+    openModal: () => void;
+    modalProps: {
+        open: boolean;
+        searchTerm: string;
+        paginatedFields: import("../types").AkifilterField<TFieldValues>[];
+        filteredCount: number;
+        visibleKeys: string[];
+        onClose: () => void;
+        onSearchTermChange: (value: string) => void;
+        onToggleVisibility: (key: string) => void;
+        onPaginationChange: (page: number, pageSize: number) => void;
+        page: number;
+        pageSize: number;
+    };
+};
+export {};
+//# sourceMappingURL=use-field-visibility.d.ts.map

package/dist/esm/hooks/use-field-visibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-field-visibility.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-field-visibility.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAOhD,KAAK,wBAAwB,CAAC,YAAY,SAAS,WAAW,IAAI;IAChE;;;OAGG;IACH,MAAM,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACtC;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC7B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,6CAIC,wBAAwB,CAAC,YAAY,CAAC;;;;;;;;;;;;oCAiHP,MAAM;kCAlD9B,MAAM;mCAuDiB,MAAM,YAAY,MAAM;;;;CA6BxD,CAAC"}

package/dist/esm/hooks/use-field-visibility.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import { readVisibleKeys, writeVisibleKeys } from '../common/storage';
+import { DEFAULT_MODAL_PAGE_SIZE } from '../constants';
+import { deriveDefaultVisibleKeys, ensureSchemaOrder, resolveFieldVisibility } from '../utils/schema';
+/**
+ * Encapsulates the visible-field selection and its accompanying modal state for
+ * a single group of fields. Used both for the top-level filters and for each
+ * selectable section so the two share one implementation.
+ */
+export const useFieldVisibility = ({ fields, storageKey, onVisibleKeysChange }) => {
+    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 resolveInitialVisibleKeys = React.useCallback(() => {
+        const storedKeys = readVisibleKeys(fields, storageKey);
+        const defaultKeys = deriveDefaultVisibleKeys(fields);
+        const baseKeys = storedKeys && storedKeys.length > 0
+            ? ensureSchemaOrder(fields, storedKeys)
+            : defaultKeys;
+        return fields.reduce((acc, field) => {
+            const key = String(field.key);
+            const explicitVisibility = resolveFieldVisibility(field);
+            if (explicitVisibility !== undefined) {
+                if (explicitVisibility)
+                    acc.push(key);
+                return acc;
+            }
+            // No explicit boolean visibility, use stored/default
+            if (baseKeys.includes(key)) {
+                acc.push(key);
+            }
+            return acc;
+        }, []);
+    }, [fields, storageKey]);
+    const [visibleKeys, setVisibleKeys] = React.useState(resolveInitialVisibleKeys);
+    React.useEffect(() => {
+        setVisibleKeys(previous => {
+            const ordered = ensureSchemaOrder(fields, previous);
+            if (ordered.length) {
+                return ordered;
+            }
+            return resolveInitialVisibleKeys();
+        });
+    }, [fields, resolveInitialVisibleKeys]);
+    React.useEffect(() => {
+        writeVisibleKeys(storageKey, visibleKeys);
+        onVisibleKeysChange === null || onVisibleKeysChange === void 0 ? void 0 : onVisibleKeysChange(visibleKeys);
+    }, [visibleKeys, onVisibleKeysChange, storageKey]);
+    const openModal = React.useCallback(() => {
+        setIsModalOpen(true);
+        setSearchTerm('');
+        setModalPage(1);
+    }, []);
+    const closeModal = 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(fields, nextKeys);
+        });
+    }, [fields]);
+    const filteredFields = React.useMemo(() => {
+        const normalisedTerm = searchTerm.trim().toLowerCase();
+        if (!normalisedTerm) {
+            return fields;
+        }
+        return fields.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));
+        });
+    }, [fields, searchTerm]);
+    const paginatedFields = React.useMemo(() => {
+        const start = (modalPage - 1) * modalPageSize;
+        return filteredFields.slice(start, start + modalPageSize);
+    }, [filteredFields, modalPage, modalPageSize]);
+    const visibleFields = React.useMemo(() => fields.filter(field => visibleKeys.includes(String(field.key))), [fields, visibleKeys]);
+    const modalProps = React.useMemo(() => ({
+        open: isModalOpen,
+        searchTerm,
+        paginatedFields,
+        filteredCount: filteredFields.length,
+        visibleKeys,
+        onClose: closeModal,
+        onSearchTermChange: (value) => {
+            setSearchTerm(value);
+            setModalPage(1);
+        },
+        onToggleVisibility: handleToggleVisibility,
+        onPaginationChange: (page, pageSize) => {
+            setModalPage(page);
+            if (pageSize !== modalPageSize) {
+                setModalPageSize(pageSize);
+            }
+        },
+        page: modalPage,
+        pageSize: modalPageSize
+    }), [
+        isModalOpen,
+        searchTerm,
+        paginatedFields,
+        filteredFields.length,
+        visibleKeys,
+        closeModal,
+        handleToggleVisibility,
+        modalPage,
+        modalPageSize
+    ]);
+    return {
+        visibleKeys,
+        setVisibleKeys,
+        visibleFields,
+        openModal,
+        modalProps
+    };
+};

package/dist/esm/styles.css

@@ -70,6 +70,29 @@
   flex: unset !important;
 }
 
+.akinon-filter__section-header-content {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+/* Let the header text span fill the header so the funnel can sit at the far right. */
+.akinon-filter__section-header--selectable .akinon-collapse-header-text {
+  flex: 1 1 auto !important;
+}
+
+.akinon-filter__section-arrow {
+  color: var(--color-gray-500);
+}
+
+/* Funnel pinned to the far right of the header, after the title and arrow. */
+.akinon-filter__section-funnel.akinon-filter__toolbar-item {
+  width: 36px;
+  justify-content: center;
+  margin-left: auto;
+}
+
 .akinon-filter__buttons {
   display: flex;
   align-items: center;

package/dist/esm/types.d.ts

@@ -1,5 +1,5 @@
 import type { FieldValues, Path } from '@akinon/akiform';
-import type { FormField } from '@akinon/akiform-builder';
+import type { FormField, SectionField } from '@akinon/akiform-builder';
 import type { IconName } from '@akinon/icons';
 export interface AkifilterFieldConfig<TFieldValues extends FieldValues = FieldValues> {
     /**
@@ -25,6 +25,13 @@ export type AkifilterField<TFieldValues extends FieldValues = FieldValues> = Dis
      */
     fileAccept?: string;
 };
+/**
+ * Section field as consumed by Akifilter. Derived from the shared
+ * `SectionField` so flags like `selectableFields`/`isExcludeSection` stay
+ * single-sourced, but omits `collapsible` — Akifilter always renders sections
+ * as collapsible panels and does not honor that prop.
+ */
+export type AkifilterSectionField<TFieldValues extends FieldValues = FieldValues> = Omit<SectionField<TFieldValues>, 'collapsible'>;
 export type AkifilterFieldKey<TFieldValues extends FieldValues = FieldValues> = Path<TFieldValues>;
 export type AkifilterSchema<TFieldValues extends FieldValues = FieldValues> = AkifilterField<TFieldValues>[];
 /**