@akinon/akifilter 1.8.0 → 1.9.0

package/dist/esm/components/filter-toolbar.js

@@ -2,28 +2,14 @@ import { Button } from '@akinon/ui-button';
 import { Space } from '@akinon/ui-space';
 import { Title } from '@akinon/ui-typography';
 import React from 'react';
+import { CSV_ACCEPT, XLS_ACCEPT } from '../constants';
 import { i18n } from '../i18n';
-const FileImportButton = ({ accept, label, onImport }) => {
-    const inputRef = React.useRef(null);
-    const handleClick = () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click(); };
-    const handleChange = (e) => {
-        var _a;
-        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (file) {
-            onImport(file);
-        }
-        // Reset so same file can be re-selected
-        e.target.value = '';
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("input", { ref: inputRef, type: "file", accept: accept, style: { display: 'none' }, onChange: handleChange }),
-        React.createElement(Button, { className: "akinon-filter__toolbar-item akinon-filter__toolbar-item--file", icon: "filter", iconSize: 13, onClick: handleClick, type: "primary", title: label, "aria-label": label }, label)));
-};
+import { FileImportButton } from './file-import-button';
 export const FilterToolbar = ({ onOpenModal, enableImportCsv, enableImportXls, onImportCsv, onImportXls }) => {
     return (React.createElement("div", { className: "akinon-filter__top" },
         React.createElement(Title, { className: "akinon-filter__title", level: 4 }, i18n.t('header.title')),
         React.createElement(Space, { className: "akinon-filter__toolbar", size: 6 },
-            enableImportCsv && onImportCsv ? (React.createElement(FileImportButton, { accept: ".csv", label: i18n.t('header.actions.importCsv'), onImport: onImportCsv })) : null,
-            enableImportXls && onImportXls ? (React.createElement(FileImportButton, { accept: ".xls,.xlsx", label: i18n.t('header.actions.importXls'), onImport: onImportXls })) : null,
+            enableImportCsv && onImportCsv ? (React.createElement(FileImportButton, { accept: CSV_ACCEPT, label: i18n.t('header.actions.importCsv'), onImport: onImportCsv })) : null,
+            enableImportXls && onImportXls ? (React.createElement(FileImportButton, { accept: XLS_ACCEPT, label: i18n.t('header.actions.importXls'), onImport: onImportXls })) : null,
             React.createElement(Button, { className: "akinon-filter__toolbar-item", icon: "filter", iconSize: 16, onClick: onOpenModal, type: "primary", title: i18n.t('header.actions.selectFilters'), "aria-label": i18n.t('header.actions.selectFilters') }))));
 };

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

@@ -1,7 +1,19 @@
 import type { FieldValues } from '@akinon/akiform';
 import React from 'react';
 import type { AkifilterField, AkifilterSectionField } from '../types';
-type SectionFieldsetProps<TFieldValues extends FieldValues = FieldValues> = {
+type SectionImportHandlers = {
+    /**
+     * Called with the CSV file picked from the section header. Only rendered when
+     * the section also opts in through `enableImportCsv`.
+     */
+    onImportCsv?: (file: File) => void;
+    /**
+     * Called with the XLS/XLSX file picked from the section header. Only rendered
+     * when the section also opts in through `enableImportXls`.
+     */
+    onImportXls?: (file: File) => void;
+};
+type SectionFieldsetProps<TFieldValues extends FieldValues = FieldValues> = SectionImportHandlers & {
     section: AkifilterSectionField<TFieldValues>;
     /**
      * Base storage key of the host Akifilter; combined with the section key to
@@ -22,7 +34,9 @@ type SectionFieldsetProps<TFieldValues extends FieldValues = FieldValues> = {
 /**
  * Renders a single section field. Sections flagged with `selectableFields`
  * expose a funnel icon + visibility modal; all others render every field
- * inline as before.
+ * inline as before. Both variants render CSV/XLS import buttons in the header
+ * when the section sets `enableImportCsv` / `enableImportXls` and the host
+ * supplies the matching handler.
  */
 export declare const SectionFieldset: <TFieldValues extends FieldValues = FieldValues>(props: SectionFieldsetProps<TFieldValues>) => React.JSX.Element;
 export {};

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

@@ -1 +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"}
+{"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;AAQ1B,OAAO,KAAK,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AA+CtE,KAAK,qBAAqB,GAAG;IAC3B;;;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;CACpC,CAAC;AA8JF,KAAK,oBAAoB,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,IACtE,qBAAqB,GAAG;IACtB,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;AAiHJ;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,GAAI,YAAY,SAAS,WAAW,GAAG,WAAW,EAC5E,OAAO,oBAAoB,CAAC,YAAY,CAAC,sBAO1C,CAAC"}

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

@@ -4,10 +4,12 @@ import { Collapse } from '@akinon/ui-collapse';
 import { Title } from '@akinon/ui-typography';
 import React from 'react';
 import { buildSectionVisibilityKey } from '../common/storage';
+import { CSV_ACCEPT, XLS_ACCEPT } from '../constants';
 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 { FileImportButton } from './file-import-button';
 import { VisibilityModal } from './visibility-modal';
 const ExpandIcon = ({ isActive }) => ({
     name: 'chevron_down',
@@ -30,11 +32,83 @@ const SectionCollapse = ({ sectionKey, label, defaultExpanded, children }) => (R
             children: React.createElement("div", { className: "akinon-filter__form-grid" }, children)
         }
     ] }));
+/**
+ * Resolves the action buttons a section header should render. Import buttons
+ * require both the schema flag and a handler — mirroring how the top-level
+ * toolbar pairs `enableImportCsv` with `onImportCsv` — so a flag without a
+ * handler renders nothing instead of a dead button.
+ */
+const resolveSectionHeaderActions = ({ section, onImportCsv, onImportXls, onOpenVisibilityModal }) => {
+    var _a;
+    const sectionLabel = String((_a = section.label) !== null && _a !== void 0 ? _a : section.key);
+    const showCsv = Boolean(section.enableImportCsv && onImportCsv);
+    const showXls = Boolean(section.enableImportXls && onImportXls);
+    const showFunnel = Boolean(section.selectableFields && onOpenVisibilityModal);
+    if (!showCsv && !showXls && !showFunnel) {
+        return null;
+    }
+    return (
+    // rc-collapse puts both `onClick` and an Enter-handling `onKeyDown` on the
+    // panel header, and the header is this group's ancestor. Guarding the group
+    // once covers every header action — mouse and keyboard alike — so
+    // activating one never toggles the panel underneath it.
+    React.createElement("div", { className: "akinon-filter__section-actions", onClick: event => event.stopPropagation(), onKeyDown: event => {
+            if (event.key === 'Enter') {
+                // Only the bubbling is stopped; the button's own activation still runs.
+                event.stopPropagation();
+            }
+        }, role: "presentation" },
+        showCsv && onImportCsv ? (React.createElement(FileImportButton, { accept: CSV_ACCEPT, label: i18n.t('section.actions.importCsv'), title: i18n.t('section.actions.importCsvTooltip', {
+                section: sectionLabel
+            }), onImport: onImportCsv, className: "akinon-filter__section-import akinon-filter__section-import--csv" })) : null,
+        showXls && onImportXls ? (React.createElement(FileImportButton, { accept: XLS_ACCEPT, label: i18n.t('section.actions.importXls'), title: i18n.t('section.actions.importXlsTooltip', {
+                section: sectionLabel
+            }), onImport: onImportXls, className: "akinon-filter__section-import akinon-filter__section-import--xls" })) : null,
+        showFunnel && onOpenVisibilityModal ? (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();
+                onOpenVisibilityModal();
+            } })) : null));
+};
+/**
+ * Collapse variant used whenever a section header carries action buttons.
+ * Controlled so we can render our own chevron and keep the actions pinned to
+ * the far right of the header (after the arrow).
+ */
+const SectionActionsCollapse = ({ sectionKey, label, defaultExpanded, actions, isSelectable, children }) => {
+    const [activeKeys, setActiveKeys] = React.useState(defaultExpanded === false ? [] : [sectionKey]);
+    const isExpanded = activeKeys.includes(sectionKey);
+    const header = (React.createElement("div", { className: "akinon-filter__section-header-content" },
+        React.createElement(Title, { className: "akinon-filter__title", level: 4 }, 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'
+            } }),
+        actions));
+    return (React.createElement(Collapse, { activeKey: activeKeys, onChange: keys => setActiveKeys((Array.isArray(keys) ? keys : [keys]).map(String)), ghost: true, items: [
+            {
+                key: sectionKey,
+                label: header,
+                headerClass: [
+                    'akinon-filter__section-header',
+                    'akinon-filter__section-header--actions',
+                    // Kept for backwards compatibility with host styles that target
+                    // the original selectable-section modifier.
+                    isSelectable ? 'akinon-filter__section-header--selectable' : null
+                ]
+                    .filter(Boolean)
+                    .join(' '),
+                showArrow: false,
+                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.
+ * mirroring the top-level filter field-selection behaviour. Import buttons are
+ * rendered alongside the funnel when the section opts into them.
  */
-const SelectableSectionFieldset = ({ section, storageKey, renderFormField, onRemoveField, formValues }) => {
+const SelectableSectionFieldset = ({ section, storageKey, renderFormField, onRemoveField, formValues, onImportCsv, onImportXls }) => {
     const sectionStorageKey = React.useMemo(() => buildSectionVisibilityKey(storageKey, section.key), [storageKey, section.key]);
     const { visibleKeys, setVisibleKeys, visibleFields, openModal, modalProps } = useFieldVisibility({
         fields: section.fields,
@@ -50,44 +124,42 @@ const SelectableSectionFieldset = ({ section, storageKey, renderFormField, onRem
         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();
-            } })));
+    const actions = resolveSectionHeaderActions({
+        section,
+        onImportCsv,
+        onImportXls,
+        onOpenVisibilityModal: 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(SectionActionsCollapse, { sectionKey: String(section.key), label: section.label, defaultExpanded: section.defaultExpanded, actions: actions, isSelectable: true }, visibleFields.map(renderFormField)),
         React.createElement(VisibilityModal, Object.assign({}, modalProps))));
 };
+/**
+ * A section that always renders every one of its fields. Falls back to the
+ * plain collapse markup unless the header needs action buttons (e.g. import).
+ */
+const PlainSectionFieldset = ({ section, renderFormField, onImportCsv, onImportXls }) => {
+    const actions = resolveSectionHeaderActions({
+        section,
+        onImportCsv,
+        onImportXls
+    });
+    const fields = section.fields.map(field => renderFormField(field));
+    if (actions) {
+        return (React.createElement(SectionActionsCollapse, { sectionKey: String(section.key), label: section.label, defaultExpanded: section.defaultExpanded, actions: actions, isSelectable: false }, fields));
+    }
+    return (React.createElement(SectionCollapse, { sectionKey: String(section.key), label: React.createElement(Title, { className: "akinon-filter__title", level: 4 }, section.label), defaultExpanded: section.defaultExpanded }, fields));
+};
 /**
  * Renders a single section field. Sections flagged with `selectableFields`
  * expose a funnel icon + visibility modal; all others render every field
- * inline as before.
+ * inline as before. Both variants render CSV/XLS import buttons in the header
+ * when the section sets `enableImportCsv` / `enableImportXls` and the host
+ * supplies the matching handler.
  */
 export const SectionFieldset = (props) => {
-    const { section, renderFormField } = props;
-    if (section.selectableFields) {
+    if (props.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)));
+    return React.createElement(PlainSectionFieldset, Object.assign({}, props));
 };

package/dist/esm/components/visibility-modal.js

@@ -6,7 +6,7 @@ import { Pagination } from '@akinon/ui-pagination';
 import { Text } from '@akinon/ui-typography';
 import React from 'react';
 import { i18n } from '../i18n';
-import { getDisplayLabel } from '../utils/schema';
+import { getVisibilityLabel } from '../utils/schema';
 export const VisibilityModal = ({ open, searchTerm, paginatedFields, filteredCount, visibleKeys, onClose, onSearchTermChange, onToggleVisibility, onPaginationChange, page, pageSize }) => {
     const handleSearchChange = React.useCallback(event => {
         onSearchTermChange(event.target.value);
@@ -19,7 +19,7 @@ export const VisibilityModal = ({ open, searchTerm, paginatedFields, filteredCou
                 }, size: "large" })),
         React.createElement("div", { className: "akinon-filter__modal-list" }, paginatedFields.length === 0 ? (React.createElement(Text, { type: "secondary" }, i18n.t('modal.empty'))) : (paginatedFields.map(field => {
             const key = String(field.key);
-            return (React.createElement(Checkbox, { key: key, checked: visibleKeys.includes(key), onChange: () => onToggleVisibility(key), className: "akinon-filter__modal-checkbox" }, getDisplayLabel(field)));
+            return (React.createElement(Checkbox, { key: key, checked: visibleKeys.includes(key), onChange: () => onToggleVisibility(key), className: "akinon-filter__modal-checkbox" }, getVisibilityLabel(field)));
         }))),
         filteredCount > pageSize ? (React.createElement("div", { className: "akinon-filter__modal-pagination" },
             React.createElement(Pagination, { current: page, pageSize: pageSize, total: filteredCount, showSizeChanger: false, onChange: onPaginationChange }))) : null));

package/dist/esm/constants.d.ts

@@ -1,6 +1,12 @@
 export declare const DEFAULT_VISIBLE_COUNT = 8;
 export declare const DEFAULT_MODAL_PAGE_SIZE = 40;
 export declare const FILTER_DEBOUNCE_DELAY = 300;
+/**
+ * `accept` values for the CSV / XLS import buttons. Shared by the top-level
+ * toolbar and the per-section import buttons so both accept the same files.
+ */
+export declare const CSV_ACCEPT = ".csv";
+export declare const XLS_ACCEPT = ".xls,.xlsx";
 export declare const DATE_FORMAT = "YYYY-MM-DD";
 export declare const DATETIME_FORMAT = "YYYY-MM-DD HH:mm:ss";
 export declare const BOOLEAN_STRING: {

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

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB,IAAI,CAAC;AACvC,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC,eAAO,MAAM,WAAW,eAAe,CAAC;AACxC,eAAO,MAAM,eAAe,wBAAwB,CAAC;AAErD,eAAO,MAAM,cAAc;;;CAGjB,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;CAUd,CAAC;AAEX,eAAO,MAAM,WAAW;;;CAGd,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB,IAAI,CAAC;AACvC,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC;;;GAGG;AACH,eAAO,MAAM,UAAU,SAAS,CAAC;AACjC,eAAO,MAAM,UAAU,eAAe,CAAC;AAEvC,eAAO,MAAM,WAAW,eAAe,CAAC;AACxC,eAAO,MAAM,eAAe,wBAAwB,CAAC;AAErD,eAAO,MAAM,cAAc;;;CAGjB,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;CAUd,CAAC;AAEX,eAAO,MAAM,WAAW;;;CAGd,CAAC"}

package/dist/esm/constants.js

@@ -1,6 +1,12 @@
 export const DEFAULT_VISIBLE_COUNT = 8;
 export const DEFAULT_MODAL_PAGE_SIZE = 40;
 export const FILTER_DEBOUNCE_DELAY = 300;
+/**
+ * `accept` values for the CSV / XLS import buttons. Shared by the top-level
+ * toolbar and the per-section import buttons so both accept the same files.
+ */
+export const CSV_ACCEPT = '.csv';
+export const XLS_ACCEPT = '.xls,.xlsx';
 export const DATE_FORMAT = 'YYYY-MM-DD';
 export const DATETIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
 export const BOOLEAN_STRING = {

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

@@ -1 +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"}
+{"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;;;;;;;;;;;;oCA0HP,MAAM;kCA3D9B,MAAM;mCAgEiB,MAAM,YAAY,MAAM;;;;CA6BxD,CAAC"}

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

@@ -73,7 +73,16 @@ export const useFieldVisibility = ({ fields, storageKey, onVisibleKeysChange })
             return fields;
         }
         return fields.filter(field => {
-            const searchable = [field.label, field.placeholder, String(field.key)]
+            // `visibilityLabel` first: the modal renders it in place of `label`, so
+            // searching has to match the text the user can actually see. `label`
+            // stays searchable too — an overridden field is still findable by the
+            // name the rest of the form uses.
+            const searchable = [
+                field.visibilityLabel,
+                field.label,
+                field.placeholder,
+                String(field.key)
+            ]
                 .filter(Boolean)
                 .map(value => String(value).toLowerCase());
             return searchable.some(text => text.includes(normalisedTerm));

package/dist/esm/i18n/translations/en.d.ts

@@ -7,6 +7,14 @@ declare const translations: {
             readonly importXls: "XLS";
         };
     };
+    readonly section: {
+        readonly actions: {
+            readonly importCsv: "CSV";
+            readonly importXls: "XLS";
+            readonly importCsvTooltip: "Import {{section}} filters from a CSV file";
+            readonly importXlsTooltip: "Import {{section}} filters from an XLS file";
+        };
+    };
     readonly applied: {
         readonly label: "Active filters:";
         readonly empty: "No filters applied yet.";

package/dist/esm/i18n/translations/en.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CR,CAAC;AAEX,eAAe,YAAY,CAAC"}
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDR,CAAC;AAEX,eAAe,YAAY,CAAC"}

package/dist/esm/i18n/translations/en.js

@@ -7,6 +7,14 @@ const translations = {
             importXls: 'XLS'
         }
     },
+    section: {
+        actions: {
+            importCsv: 'CSV',
+            importXls: 'XLS',
+            importCsvTooltip: 'Import {{section}} filters from a CSV file',
+            importXlsTooltip: 'Import {{section}} filters from an XLS file'
+        }
+    },
     applied: {
         label: 'Active filters:',
         empty: 'No filters applied yet.',

package/dist/esm/i18n/translations/tr.d.ts

@@ -7,6 +7,14 @@ declare const translations: {
             readonly importXls: "XLS";
         };
     };
+    readonly section: {
+        readonly actions: {
+            readonly importCsv: "CSV";
+            readonly importXls: "XLS";
+            readonly importCsvTooltip: "{{section}} filtrelerini CSV dosyasından içe aktar";
+            readonly importXlsTooltip: "{{section}} filtrelerini XLS dosyasından içe aktar";
+        };
+    };
     readonly applied: {
         readonly label: "Aktif filtreler:";
         readonly empty: "Henüz filtre uygulanmadı.";

package/dist/esm/i18n/translations/tr.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CR,CAAC;AAEX,eAAe,YAAY,CAAC"}
+{"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDR,CAAC;AAEX,eAAe,YAAY,CAAC"}

package/dist/esm/i18n/translations/tr.js

@@ -7,6 +7,14 @@ const translations = {
             importXls: 'XLS'
         }
     },
+    section: {
+        actions: {
+            importCsv: 'CSV',
+            importXls: 'XLS',
+            importCsvTooltip: '{{section}} filtrelerini CSV dosyasından içe aktar',
+            importXlsTooltip: '{{section}} filtrelerini XLS dosyasından içe aktar'
+        }
+    },
     applied: {
         label: 'Aktif filtreler:',
         empty: 'Henüz filtre uygulanmadı.',

package/dist/esm/styles.css

@@ -26,15 +26,39 @@
   height: 36px;
 }
 
+/*
+ * Every filter action button is the same 36px square so the toolbar and the
+ * section headers line up on both axes. The `.akinon-filter` prefix is what
+ * makes the width stick: antd sizes icon-only buttons from its own
+ * `controlHeight` at two-class specificity, which a lone class cannot beat.
+ */
+.akinon-filter .akinon-filter__toolbar-item {
+  width: 36px;
+  justify-content: center;
+}
+
+/*
+ * File import buttons stay square like every other toolbar action, with the
+ * icon stacked above its short label. Both must be centred by hand: antd lays
+ * the button out as a flex row and separates icon from label with
+ * `margin-inline-*`, which reads as a stray horizontal offset — the icon
+ * drifting off centre — once the direction is column.
+ */
 .akinon-filter__toolbar-item--file {
   width: 36px;
-  font-size: 11px;
-  font-weight: bold;
   flex-direction: column;
-  justify-content: flex-end;
+  align-items: center;
+  justify-content: center;
   gap: 2px;
-  padding-inline: 0;
-  padding-block-end: 4px;
+  padding: 0;
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.akinon-filter__toolbar-item--file > span {
+  margin-inline: 0 !important;
+  line-height: 1;
 }
 
 .akinon-filter__applied {
@@ -77,8 +101,8 @@
   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 {
+/* Let the header text span fill the header so the actions can sit at the far right. */
+.akinon-filter__section-header--actions .akinon-collapse-header-text {
   flex: 1 1 auto !important;
 }
 
@@ -86,10 +110,11 @@
   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;
+/* Action buttons pinned to the far right of the header, after title and arrow. */
+.akinon-filter__section-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
   margin-left: auto;
 }
 

package/dist/esm/types.d.ts

@@ -13,8 +13,40 @@ export interface AkifilterFieldConfig<TFieldValues extends FieldValues = FieldVa
      */
     visible?: boolean | ((formValues: TFieldValues, currentVisible?: boolean) => boolean);
 }
-type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
-export type AkifilterField<TFieldValues extends FieldValues = FieldValues> = DistributiveOmit<FormField<TFieldValues>, 'config'> & {
+/**
+ * One applied-filter chip produced by a field that owns several filters at
+ * once (see `appliedChips`).
+ */
+export type AkifilterFieldChip = {
+    /**
+     * Identifies the chip inside its field. Passed back to
+     * `onRemoveAppliedChip` when the chip is removed, so it has to be stable for
+     * the same logical entry (e.g. the filter type it represents) and unique
+     * within the field — two chips sharing an id cannot be told apart on
+     * removal.
+     */
+    id: string;
+    /**
+     * Text before the colon. Defaults to the field's applied label
+     * (`appliedLabel`, else `label`).
+     */
+    label?: string;
+    /**
+     * Text after the colon — already formatted, since only the field knows how
+     * to render its own value.
+     */
+    value: string;
+    /**
+     * Renders the chip with the exclude styling. Defaults to whether the field
+     * belongs to an exclude section.
+     */
+    isExclude?: boolean;
+};
+/**
+ * Props Akifilter adds on top of the shared `FormField`. Kept separate so the
+ * mapping below can apply them to nested fields as well as top-level ones.
+ */
+type AkifilterFieldExtras<TFieldValues extends FieldValues = FieldValues> = {
     /**
      * Configuration options for field behavior (disabled, visible).
      */
@@ -24,14 +56,109 @@ export type AkifilterField<TFieldValues extends FieldValues = FieldValues> = Dis
      * Only applicable when `type` is `'file'`.
      */
     fileAccept?: string;
+    /**
+     * Expands this field's value into one chip per entry, instead of the single
+     * chip Akifilter derives from the value itself.
+     *
+     * This is what lets one field own several filters at once — a value that
+     * holds a bucket per filter type, a range that reads better as two chips,
+     * and so on. Because the buckets stay inside the field's form value,
+     * Akifilter persists and rehydrates them like any other value; nothing has
+     * to be mirrored outside the component.
+     *
+     * Pair it with `onRemoveAppliedChip` to make the chips removable. Return an
+     * empty array for "no chips right now".
+     *
+     * Only called while the field's own value is non-empty: the emptiness rules
+     * that suppress a plain chip (`null`/`undefined`, a blank string, an empty
+     * array) suppress these too. `formValues` is there to *format* the chips —
+     * a unit or a mode held by a sibling field — not to derive them from a
+     * sibling while this field holds nothing.
+     */
+    appliedChips?: (context: {
+        field: AkifilterField<TFieldValues>;
+        value: unknown;
+        formValues: Partial<TFieldValues>;
+    }) => AkifilterFieldChip[];
+    /**
+     * Maps the removal of one `appliedChips` chip back onto a new value for the
+     * field, which Akifilter then commits, persists and emits.
+     *
+     * Return the value the field should hold after the removal — `null` to clear
+     * the field entirely. Without this callback the chips render but cannot be
+     * removed.
+     */
+    onRemoveAppliedChip?: (context: {
+        field: AkifilterField<TFieldValues>;
+        value: unknown;
+        id: string;
+    }) => unknown;
+    /**
+     * Renders a CSV import button in the section header, paired with the
+     * `onSectionImportCsv` callback. Section fields only.
+     */
+    enableImportCsv?: boolean;
+    /**
+     * Renders an XLS/XLSX import button in the section header, paired with the
+     * `onSectionImportXls` callback. Section fields only.
+     */
+    enableImportXls?: boolean;
+    /**
+     * Overrides `label` for this field's applied-filter chip only.
+     *
+     * The form input and the "select visible filters" modal keep using `label`.
+     * Use this when the chip needs a shorter or more explicit name than the form
+     * does (e.g. `label: 'Created At'` next to a date range, `appliedLabel:
+     * 'Order date'` in the chip).
+     */
+    appliedLabel?: string;
+    /**
+     * Overrides `label` for this field's row in the "select visible filters"
+     * modal only. Also what the modal's search box matches against.
+     *
+     * The form input and the applied-filter chip keep using `label`. Use this
+     * when the modal lists fields out of context and needs a fully qualified
+     * name (e.g. `label: 'Status'`, `visibilityLabel: 'Order status'`).
+     */
+    visibilityLabel?: string;
 };
+/**
+ * Applies `AkifilterFieldExtras` to one member of the `FormField` union.
+ *
+ * Container fields (`section`, `field-array`, `column`) get their `fields`
+ * re-typed recursively: without that, the shared `FormField[]` child type
+ * would reject every Akifilter-only prop — a field inside a section could not
+ * declare `config.visible`, `fileAccept`, or a label override at all.
+ */
+type Akifiltered<TField, TFieldValues extends FieldValues> = TField extends {
+    fields: unknown[];
+} ? Omit<TField, 'config' | 'fields'> & AkifilterFieldExtras<TFieldValues> & {
+    fields: AkifilterField<TFieldValues>[];
+} : Omit<TField, 'config'> & AkifilterFieldExtras<TFieldValues>;
+/**
+ * A single Akifilter schema entry. `TField` below is a naked type parameter,
+ * so the conditional distributes over every member of the `FormField` union
+ * and each variant keeps its own discriminating `type` literal.
+ */
+export type AkifilterField<TFieldValues extends FieldValues = FieldValues> = Akifiltered<FormField<TFieldValues>, TFieldValues>;
 /**
  * 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 AkifilterSectionField<TFieldValues extends FieldValues = FieldValues> = Omit<SectionField<TFieldValues>, 'collapsible' | 'fields'> & {
+    /**
+     * Child fields, typed as Akifilter fields rather than the shared
+     * `FormField` so section children accept the same Akifilter-only props as
+     * top-level ones (`config.visible`, `fileAccept`, the label overrides).
+     */
+    fields: AkifilterField<TFieldValues>[];
+    /** Renders a CSV import button in the section header. */
+    enableImportCsv?: boolean;
+    /** Renders an XLS/XLSX import button in the section header. */
+    enableImportXls?: boolean;
+};
 export type AkifilterFieldKey<TFieldValues extends FieldValues = FieldValues> = Path<TFieldValues>;
 export type AkifilterSchema<TFieldValues extends FieldValues = FieldValues> = AkifilterField<TFieldValues>[];
 /**
@@ -88,5 +215,21 @@ export interface AkifilterActionsRef {
      */
     clearValue: (keys: string | string[]) => void;
 }
+declare module '@akinon/akiform-builder' {
+    interface FieldExtensions {
+        /** @see AkifilterField.appliedLabel */
+        appliedLabel?: AkifilterField['appliedLabel'];
+        /** @see AkifilterField.visibilityLabel */
+        visibilityLabel?: AkifilterField['visibilityLabel'];
+        /** @see AkifilterField.appliedChips */
+        appliedChips?: AkifilterField['appliedChips'];
+        /** @see AkifilterField.onRemoveAppliedChip */
+        onRemoveAppliedChip?: AkifilterField['onRemoveAppliedChip'];
+        /** @see AkifilterField.enableImportCsv */
+        enableImportCsv?: boolean;
+        /** @see AkifilterField.enableImportXls */
+        enableImportXls?: boolean;
+    }
+}
 export {};
 //# sourceMappingURL=types.d.ts.map