@akinon/akifilter 1.8.0 → 1.9.0

package/dist/cjs/components/file-import-button.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileImportButton = void 0;
+const ui_button_1 = require("@akinon/ui-button");
+const react_1 = require("react");
+/**
+ * Button that opens the native file picker and hands the selected file to
+ * `onImport`. Shared by the top-level filter toolbar and the section headers so
+ * both surfaces behave identically.
+ */
+const FileImportButton = ({ accept, label, title, onImport, className }) => {
+    const inputRef = react_1.default.useRef(null);
+    const resolvedTitle = title !== null && title !== void 0 ? title : label;
+    const handleClick = () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click(); };
+    const handleChange = (event) => {
+        var _a;
+        const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (file) {
+            onImport(file);
+        }
+        // Reset so same file can be re-selected
+        event.target.value = '';
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("input", { ref: inputRef, type: "file", accept: accept, style: { display: 'none' }, onChange: handleChange }),
+        react_1.default.createElement(ui_button_1.Button, { className: [
+                'akinon-filter__toolbar-item',
+                'akinon-filter__toolbar-item--file',
+                className
+            ]
+                .filter(Boolean)
+                .join(' '), icon: "filter", 
+            // Smaller than the icon-only toolbar buttons: the icon shares its 36px
+            // square with the label underneath it.
+            iconSize: 12, onClick: handleClick, type: "primary", title: resolvedTitle, "aria-label": resolvedTitle }, label)));
+};
+exports.FileImportButton = FileImportButton;

package/dist/cjs/components/filter-toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filter-toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/filter-toolbar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,kBAAkB,GAAG;IACxB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACpC,CAAC;AAgDF,eAAO,MAAM,aAAa,GAAI,6EAM3B,kBAAkB,sBAoCpB,CAAC"}
+{"version":3,"file":"filter-toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/filter-toolbar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,KAAK,kBAAkB,GAAG;IACxB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,6EAM3B,kBAAkB,sBAoCpB,CAAC"}

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

@@ -5,29 +5,15 @@ const ui_button_1 = require("@akinon/ui-button");
 const ui_space_1 = require("@akinon/ui-space");
 const ui_typography_1 = require("@akinon/ui-typography");
 const react_1 = require("react");
+const constants_1 = require("../constants");
 const i18n_1 = require("../i18n");
-const FileImportButton = ({ accept, label, onImport }) => {
-    const inputRef = react_1.default.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_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("input", { ref: inputRef, type: "file", accept: accept, style: { display: 'none' }, onChange: handleChange }),
-        react_1.default.createElement(ui_button_1.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)));
-};
+const file_import_button_1 = require("./file-import-button");
 const FilterToolbar = ({ onOpenModal, enableImportCsv, enableImportXls, onImportCsv, onImportXls }) => {
     return (react_1.default.createElement("div", { className: "akinon-filter__top" },
         react_1.default.createElement(ui_typography_1.Title, { className: "akinon-filter__title", level: 4 }, i18n_1.i18n.t('header.title')),
         react_1.default.createElement(ui_space_1.Space, { className: "akinon-filter__toolbar", size: 6 },
-            enableImportCsv && onImportCsv ? (react_1.default.createElement(FileImportButton, { accept: ".csv", label: i18n_1.i18n.t('header.actions.importCsv'), onImport: onImportCsv })) : null,
-            enableImportXls && onImportXls ? (react_1.default.createElement(FileImportButton, { accept: ".xls,.xlsx", label: i18n_1.i18n.t('header.actions.importXls'), onImport: onImportXls })) : null,
+            enableImportCsv && onImportCsv ? (react_1.default.createElement(file_import_button_1.FileImportButton, { accept: constants_1.CSV_ACCEPT, label: i18n_1.i18n.t('header.actions.importCsv'), onImport: onImportCsv })) : null,
+            enableImportXls && onImportXls ? (react_1.default.createElement(file_import_button_1.FileImportButton, { accept: constants_1.XLS_ACCEPT, label: i18n_1.i18n.t('header.actions.importXls'), onImport: onImportXls })) : null,
             react_1.default.createElement(ui_button_1.Button, { className: "akinon-filter__toolbar-item", icon: "filter", iconSize: 16, onClick: onOpenModal, type: "primary", title: i18n_1.i18n.t('header.actions.selectFilters'), "aria-label": i18n_1.i18n.t('header.actions.selectFilters') }))));
 };
 exports.FilterToolbar = FilterToolbar;

package/dist/cjs/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/cjs/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/cjs/components/section-fieldset.js

@@ -7,10 +7,12 @@ const ui_collapse_1 = require("@akinon/ui-collapse");
 const ui_typography_1 = require("@akinon/ui-typography");
 const react_1 = require("react");
 const storage_1 = require("../common/storage");
+const constants_1 = require("../constants");
 const use_dynamic_visibility_1 = require("../hooks/use-dynamic-visibility");
 const use_field_visibility_1 = require("../hooks/use-field-visibility");
 const use_visibility_cleanup_1 = require("../hooks/use-visibility-cleanup");
 const i18n_1 = require("../i18n");
+const file_import_button_1 = require("./file-import-button");
 const visibility_modal_1 = require("./visibility-modal");
 const ExpandIcon = ({ isActive }) => ({
     name: 'chevron_down',
@@ -33,11 +35,83 @@ const SectionCollapse = ({ sectionKey, label, defaultExpanded, children }) => (r
             children: react_1.default.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_1.default.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_1.default.createElement(file_import_button_1.FileImportButton, { accept: constants_1.CSV_ACCEPT, label: i18n_1.i18n.t('section.actions.importCsv'), title: i18n_1.i18n.t('section.actions.importCsvTooltip', {
+                section: sectionLabel
+            }), onImport: onImportCsv, className: "akinon-filter__section-import akinon-filter__section-import--csv" })) : null,
+        showXls && onImportXls ? (react_1.default.createElement(file_import_button_1.FileImportButton, { accept: constants_1.XLS_ACCEPT, label: i18n_1.i18n.t('section.actions.importXls'), title: i18n_1.i18n.t('section.actions.importXlsTooltip', {
+                section: sectionLabel
+            }), onImport: onImportXls, className: "akinon-filter__section-import akinon-filter__section-import--xls" })) : null,
+        showFunnel && onOpenVisibilityModal ? (react_1.default.createElement(ui_button_1.Button, { className: "akinon-filter__toolbar-item akinon-filter__section-funnel", icon: "filter", iconSize: 16, type: "primary", title: i18n_1.i18n.t('header.actions.selectFilters'), "aria-label": i18n_1.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_1.default.useState(defaultExpanded === false ? [] : [sectionKey]);
+    const isExpanded = activeKeys.includes(sectionKey);
+    const header = (react_1.default.createElement("div", { className: "akinon-filter__section-header-content" },
+        react_1.default.createElement(ui_typography_1.Title, { className: "akinon-filter__title", level: 4 }, label),
+        react_1.default.createElement(icons_1.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_1.default.createElement(ui_collapse_1.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_1.default.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_1.default.useMemo(() => (0, storage_1.buildSectionVisibilityKey)(storageKey, section.key), [storageKey, section.key]);
     const { visibleKeys, setVisibleKeys, visibleFields, openModal, modalProps } = (0, use_field_visibility_1.useFieldVisibility)({
         fields: section.fields,
@@ -53,45 +127,43 @@ 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_1.default.useState(section.defaultExpanded === false ? [] : [sectionKey]);
-    const isExpanded = activeKeys.includes(sectionKey);
-    const label = (react_1.default.createElement("div", { className: "akinon-filter__section-header-content" },
-        react_1.default.createElement(ui_typography_1.Title, { className: "akinon-filter__title", level: 4 }, section.label),
-        react_1.default.createElement(icons_1.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_1.default.createElement(ui_button_1.Button, { className: "akinon-filter__toolbar-item akinon-filter__section-funnel", icon: "filter", iconSize: 16, type: "primary", title: i18n_1.i18n.t('header.actions.selectFilters'), "aria-label": i18n_1.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_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(ui_collapse_1.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_1.default.createElement("div", { className: "akinon-filter__form-grid" }, visibleFields.map(renderFormField)))
-                }
-            ] }),
+        react_1.default.createElement(SectionActionsCollapse, { sectionKey: String(section.key), label: section.label, defaultExpanded: section.defaultExpanded, actions: actions, isSelectable: true }, visibleFields.map(renderFormField)),
         react_1.default.createElement(visibility_modal_1.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_1.default.createElement(SectionActionsCollapse, { sectionKey: String(section.key), label: section.label, defaultExpanded: section.defaultExpanded, actions: actions, isSelectable: false }, fields));
+    }
+    return (react_1.default.createElement(SectionCollapse, { sectionKey: String(section.key), label: react_1.default.createElement(ui_typography_1.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.
  */
 const SectionFieldset = (props) => {
-    const { section, renderFormField } = props;
-    if (section.selectableFields) {
+    if (props.section.selectableFields) {
         return react_1.default.createElement(SelectableSectionFieldset, Object.assign({}, props));
     }
-    const label = (react_1.default.createElement(ui_typography_1.Title, { className: "akinon-filter__title", level: 4 }, section.label));
-    return (react_1.default.createElement(SectionCollapse, { sectionKey: String(section.key), label: label, defaultExpanded: section.defaultExpanded }, section.fields.map(renderFormField)));
+    return react_1.default.createElement(PlainSectionFieldset, Object.assign({}, props));
 };
 exports.SectionFieldset = SectionFieldset;

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

@@ -22,7 +22,7 @@ const VisibilityModal = ({ open, searchTerm, paginatedFields, filteredCount, vis
                 }, size: "large" })),
         react_1.default.createElement("div", { className: "akinon-filter__modal-list" }, paginatedFields.length === 0 ? (react_1.default.createElement(ui_typography_1.Text, { type: "secondary" }, i18n_1.i18n.t('modal.empty'))) : (paginatedFields.map(field => {
             const key = String(field.key);
-            return (react_1.default.createElement(ui_checkbox_1.Checkbox, { key: key, checked: visibleKeys.includes(key), onChange: () => onToggleVisibility(key), className: "akinon-filter__modal-checkbox" }, (0, schema_1.getDisplayLabel)(field)));
+            return (react_1.default.createElement(ui_checkbox_1.Checkbox, { key: key, checked: visibleKeys.includes(key), onChange: () => onToggleVisibility(key), className: "akinon-filter__modal-checkbox" }, (0, schema_1.getVisibilityLabel)(field)));
         }))),
         filteredCount > pageSize ? (react_1.default.createElement("div", { className: "akinon-filter__modal-pagination" },
             react_1.default.createElement(ui_pagination_1.Pagination, { current: page, pageSize: pageSize, total: filteredCount, showSizeChanger: false, onChange: onPaginationChange }))) : null));

package/dist/cjs/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/cjs/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/cjs/constants.js

@@ -1,9 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FIELD_MODES = exports.FIELD_TYPES = exports.BOOLEAN_STRING = exports.DATETIME_FORMAT = exports.DATE_FORMAT = exports.FILTER_DEBOUNCE_DELAY = exports.DEFAULT_MODAL_PAGE_SIZE = exports.DEFAULT_VISIBLE_COUNT = void 0;
+exports.FIELD_MODES = exports.FIELD_TYPES = exports.BOOLEAN_STRING = exports.DATETIME_FORMAT = exports.DATE_FORMAT = exports.XLS_ACCEPT = exports.CSV_ACCEPT = exports.FILTER_DEBOUNCE_DELAY = exports.DEFAULT_MODAL_PAGE_SIZE = exports.DEFAULT_VISIBLE_COUNT = void 0;
 exports.DEFAULT_VISIBLE_COUNT = 8;
 exports.DEFAULT_MODAL_PAGE_SIZE = 40;
 exports.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.
+ */
+exports.CSV_ACCEPT = '.csv';
+exports.XLS_ACCEPT = '.xls,.xlsx';
 exports.DATE_FORMAT = 'YYYY-MM-DD';
 exports.DATETIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
 exports.BOOLEAN_STRING = {

package/dist/cjs/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/cjs/hooks/use-field-visibility.js

@@ -76,7 +76,16 @@ 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/cjs/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/cjs/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/cjs/i18n/translations/en.js

@@ -9,6 +9,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/cjs/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/cjs/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/cjs/i18n/translations/tr.js

@@ -9,6 +9,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/cjs/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;
 }