@akinon/akifilter 1.3.6 → 1.4.0

package/dist/cjs/akifilter.d.ts

@@ -1,6 +1,7 @@
 import './styles.css';
 import { FieldValues, Path } from '@akinon/akiform';
 import React from 'react';
+import { type AppliedFilter } from './components/applied-filters';
 import type { AkifilterActionsRef, AkifilterSchema } from './types';
 type AkifilterFieldValues = FieldValues;
 export type AkifilterProps<TFieldValues extends AkifilterFieldValues = AkifilterFieldValues> = {
@@ -25,13 +26,15 @@ export type AkifilterProps<TFieldValues extends AkifilterFieldValues = Akifilter
      */
     onVisibleFieldsChange?: (keys: Array<Path<TFieldValues>>) => void;
     /**
-     * Triggered when user opts to import filters via CSV.
+     * Triggered when user selects a file via the CSV import button.
+     * Receives the selected File object.
      */
-    onImportCsv?: () => void;
+    onImportCsv?: (file: File) => void;
     /**
-     * Triggered when user opts to import filters via XLS/XLSX.
+     * Triggered when user selects a file via the XLS import button.
+     * Receives the selected File object.
      */
-    onImportXls?: () => void;
+    onImportXls?: (file: File) => void;
     /**
      * Triggered when user requests clearing all filters.
      */
@@ -48,6 +51,15 @@ export type AkifilterProps<TFieldValues extends AkifilterFieldValues = Akifilter
      * Ref to access imperative filter actions like clearing values.
      */
     filterActionsRef?: React.Ref<AkifilterActionsRef>;
+    /**
+     * Additional chips to display in the applied filters area alongside form-based filters.
+     * Useful for out-of-band filters such as file uploads.
+     */
+    externalAppliedFilters?: AppliedFilter[];
+    /**
+     * Called when the user removes an externally-provided chip.
+     */
+    onRemoveExternalFilter?: (key: string) => void;
 };
 export declare const Akifilter: {
     <TFieldValues extends AkifilterFieldValues = FieldValues>(props: AkifilterProps<TFieldValues>): React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"akifilter.d.ts","sourceRoot":"","sources":["../../src/akifilter.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAGtB,OAAO,EAIL,WAAW,EACX,IAAI,EAIL,MAAM,iBAAiB,CAAC;AAWzB,OAAO,KAAK,MAAM,OAAO,CAAC;AA0B1B,OAAO,KAAK,EACV,mBAAmB,EAEnB,eAAe,EAChB,MAAM,SAAS,CAAC;AAYjB,KAAK,oBAAoB,GAAG,WAAW,CAAC;AA0HxC,MAAM,MAAM,cAAc,CACxB,YAAY,SAAS,oBAAoB,GAAG,oBAAoB,IAC9D;IACF;;OAEG;IACH,YAAY,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC7C;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACtC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,KAAK,IAAI,CAAC;IAClE;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;CACnD,CAAC;AA8wBF,eAAO,MAAM,SAAS;KACpB,YAAY,SAAS,oBAAoB,uBAElC,cAAc,CAAC,YAAY,CAAC;;CAmBpC,CAAC"}
+{"version":3,"file":"akifilter.d.ts","sourceRoot":"","sources":["../../src/akifilter.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAGtB,OAAO,EAIL,WAAW,EACX,IAAI,EAIL,MAAM,iBAAiB,CAAC;AAazB,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EACL,KAAK,aAAa,EAEnB,MAAM,8BAA8B,CAAC;AAYtC,OAAO,KAAK,EACV,mBAAmB,EAEnB,eAAe,EAChB,MAAM,SAAS,CAAC;AAajB,KAAK,oBAAoB,GAAG,WAAW,CAAC;AA8JxC,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;CAChD,CAAC;AAu1BF,eAAO,MAAM,SAAS;KACpB,YAAY,SAAS,oBAAoB,uBAElC,cAAc,CAAC,YAAY,CAAC;;CAmBpC,CAAC"}

package/dist/cjs/akifilter.js

@@ -24,6 +24,7 @@ const ui_input_1 = require("@akinon/ui-input");
 const ui_input_number_1 = require("@akinon/ui-input-number");
 const ui_select_1 = require("@akinon/ui-select");
 const ui_typography_1 = require("@akinon/ui-typography");
+const ui_upload_1 = require("@akinon/ui-upload");
 const antd_1 = require("antd");
 const react_1 = require("react");
 const react_error_boundary_1 = require("react-error-boundary");
@@ -34,6 +35,8 @@ const filter_toolbar_1 = require("./components/filter-toolbar");
 const visibility_modal_1 = require("./components/visibility-modal");
 const constants_1 = require("./constants");
 const use_debounced_value_1 = require("./hooks/use-debounced-value");
+const use_dynamic_visibility_1 = require("./hooks/use-dynamic-visibility");
+const use_visibility_cleanup_1 = require("./hooks/use-visibility-cleanup");
 const i18n_1 = require("./i18n");
 const schema_1 = require("./utils/schema");
 const values_1 = require("./utils/values");
@@ -63,6 +66,21 @@ const FilterFormItem = (_a) => {
     });
     return (react_1.default.createElement(akiform_1.Akiform.Item, Object.assign({}, props, { validateStatus: fieldState.invalid ? 'error' : undefined, help: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.help, className: props.className }), childrenWithProps));
 };
+const FileFilterInput = ({ value, onChange, accept, disabled, 'aria-label': ariaLabel }) => {
+    const handleBeforeUpload = (file) => {
+        var _a;
+        onChange === null || onChange === void 0 ? void 0 : onChange((_a = file.originFileObj) !== null && _a !== void 0 ? _a : file);
+        // Prevent antd from uploading automatically
+        return false;
+    };
+    const handleRemove = () => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(null);
+    };
+    const fileList = value
+        ? [{ uid: value.name, name: value.name, originFileObj: value }]
+        : [];
+    return (react_1.default.createElement(ui_upload_1.Upload, { accept: accept, beforeUpload: handleBeforeUpload, onRemove: handleRemove, fileList: fileList, maxCount: 1, disabled: disabled, "aria-label": ariaLabel }));
+};
 /**
  * Checks if a field should be disabled based on config.disabled property.
  */
@@ -74,17 +92,6 @@ const checkIsDisabled = (field, formValues) => {
     }
     return Boolean(configDisabled);
 };
-/**
- * Checks if a field should be visible based on config.visible property.
- */
-const checkIsVisible = (field, formValues) => {
-    var _a;
-    const configVisible = (_a = field.config) === null || _a === void 0 ? void 0 : _a.visible;
-    if (typeof configVisible === 'function') {
-        return configVisible(formValues);
-    }
-    return configVisible !== false;
-};
 const resolveClearedFieldValue = (field, defaultValue) => {
     if (defaultValue !== undefined) {
         return defaultValue;
@@ -97,13 +104,19 @@ const resolveClearedFieldValue = (field, defaultValue) => {
             return false;
         case 'number':
         case 'date':
+            return null;
         case 'select':
+            if (field.mode === 'multiple' || field.mode === 'tags') {
+                return [];
+            }
+            return null;
+        case 'file':
             return null;
         default:
             return undefined;
     }
 };
-const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onValuesChange, onVisibleFieldsChange, onImportCsv, onImportXls, onClearAll, enableImportCsv, enableImportXls, filterActionsRef }) => {
+const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onValuesChange, onVisibleFieldsChange, onImportCsv, onImportXls, onClearAll, enableImportCsv, enableImportXls, filterActionsRef, externalAppliedFilters, onRemoveExternalFilter }) => {
     // Separate regular fields from section fields
     const { regularFields, sectionFields } = react_1.default.useMemo(() => (0, schema_1.partitionSchema)(filterSchema), [filterSchema]);
     // Flatten schema for storage and form value operations
@@ -151,15 +164,29 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
                 return acc;
             }
             const label = field.label || field.placeholder || key;
-            const resolveSelectLabel = () => {
+            const fieldOptions = 'options' in field && field.options ? field.options : undefined;
+            const resolveLabel = (val) => {
                 var _a;
-                if (!('options' in field) || !field.options) {
+                const match = fieldOptions === null || fieldOptions === void 0 ? void 0 : fieldOptions.find(option => option.value === val);
+                return String((_a = match === null || match === void 0 ? void 0 : match.label) !== null && _a !== void 0 ? _a : val);
+            };
+            const resolveArrayLabels = (values) => {
+                return values.map(resolveLabel).join(', ');
+            };
+            const resolveSelectLabel = () => {
+                if (!fieldOptions) {
                     return String(currentValue);
                 }
-                const match = field.options.find(option => option.value === currentValue);
-                return String((_a = match === null || match === void 0 ? void 0 : match.label) !== null && _a !== void 0 ? _a : currentValue);
+                if (Array.isArray(currentValue)) {
+                    return resolveArrayLabels(currentValue);
+                }
+                return resolveLabel(currentValue);
             };
             const resolveValue = () => {
+                if (field.type === 'file') {
+                    const fileValue = currentValue;
+                    return fileValue instanceof File ? fileValue.name : String(fileValue);
+                }
                 if (field.type === 'select') {
                     return resolveSelectLabel();
                 }
@@ -178,7 +205,7 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
                     }
                 }
                 if (Array.isArray(currentValue)) {
-                    return currentValue.map((value) => String(value)).join(', ');
+                    return resolveArrayLabels(currentValue);
                 }
                 if (typeof currentValue === 'boolean') {
                     return currentValue ? constants_1.BOOLEAN_STRING.TRUE : constants_1.BOOLEAN_STRING.FALSE;
@@ -200,10 +227,24 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
     }, [flattenedSchema, formValues]);
     const resolveInitialVisibleKeys = react_1.default.useCallback(() => {
         const storedKeys = (0, storage_1.readVisibleKeys)(regularFields, storageKey);
-        if (storedKeys && storedKeys.length > 0) {
-            return (0, schema_1.ensureSchemaOrder)(regularFields, storedKeys);
-        }
-        return (0, schema_1.deriveDefaultVisibleKeys)(regularFields);
+        const defaultKeys = (0, schema_1.deriveDefaultVisibleKeys)(regularFields);
+        const baseKeys = storedKeys && storedKeys.length > 0
+            ? (0, schema_1.ensureSchemaOrder)(regularFields, storedKeys)
+            : defaultKeys;
+        return regularFields.reduce((acc, field) => {
+            const key = String(field.key);
+            const explicitVisibility = (0, schema_1.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_1.default.useState(resolveInitialVisibleKeys);
     react_1.default.useEffect(() => {
@@ -428,8 +469,31 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
         const start = (modalPage - 1) * modalPageSize;
         return filteredFields.slice(start, start + modalPageSize);
     }, [filteredFields, modalPage, modalPageSize]);
-    const visibleFields = react_1.default.useMemo(() => regularFields.filter(field => visibleKeys.includes(String(field.key)) &&
-        checkIsVisible(field, formValues !== null && formValues !== void 0 ? formValues : {})), [regularFields, visibleKeys, formValues]);
+    const visibleFields = react_1.default.useMemo(() => regularFields.filter(field => visibleKeys.includes(String(field.key))), [regularFields, visibleKeys]);
+    // Dynamic visibility
+    (0, use_dynamic_visibility_1.useDynamicVisibility)({
+        regularFields,
+        formValues: normalisedValues,
+        setVisibleKeys
+    });
+    // Visibility cleanup
+    (0, use_visibility_cleanup_1.useVisibilityCleanup)({
+        visibleKeys,
+        regularFields,
+        onRemove: handleRemoveFilter
+    });
+    const handleAppliedFilterRemove = react_1.default.useCallback((key) => {
+        if (externalAppliedFilters === null || externalAppliedFilters === void 0 ? void 0 : externalAppliedFilters.some(f => f.key === key)) {
+            onRemoveExternalFilter === null || onRemoveExternalFilter === void 0 ? void 0 : onRemoveExternalFilter(key);
+        }
+        else {
+            handleRemoveFilter(key);
+        }
+    }, [externalAppliedFilters, onRemoveExternalFilter, handleRemoveFilter]);
+    const handleClearAllApplied = react_1.default.useCallback(() => {
+        handleClearAll();
+        externalAppliedFilters === null || externalAppliedFilters === void 0 ? void 0 : externalAppliedFilters.forEach(f => onRemoveExternalFilter === null || onRemoveExternalFilter === void 0 ? void 0 : onRemoveExternalFilter(f.key));
+    }, [handleClearAll, externalAppliedFilters, onRemoveExternalFilter]);
     const renderFieldComponent = (field) => {
         const ariaLabel = (0, schema_1.getFieldAriaLabel)(field);
         const isDisabled = checkIsDisabled(field, formValues !== null && formValues !== void 0 ? formValues : {});
@@ -439,17 +503,20 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
             case 'number':
                 return (react_1.default.createElement(ui_input_number_1.InputNumber, { placeholder: field.placeholder, size: "large", className: "akinon-filter__field--number", "aria-label": ariaLabel, disabled: isDisabled }));
             case 'select':
-                return (react_1.default.createElement(ui_select_1.Select, { placeholder: field.placeholder, size: "large", options: field.options, showSearch: true, optionFilterProp: "label", "aria-label": ariaLabel, disabled: isDisabled }));
+                return (react_1.default.createElement(ui_select_1.Select, { placeholder: field.placeholder, size: "large", options: field.options, showSearch: true, optionFilterProp: "label", "aria-label": ariaLabel, disabled: isDisabled, mode: field.mode }));
             case 'checkbox':
                 return react_1.default.createElement(ui_checkbox_1.Checkbox, { disabled: isDisabled }, field.label);
             case 'date':
                 return (react_1.default.createElement(ui_date_picker_1.DatePicker, { placeholder: field.placeholder, showTime: field.showTime, suffixIcon: "calendar", suffixIconSize: "16px", "aria-label": ariaLabel, disabled: isDisabled }));
             case 'textarea':
                 return (react_1.default.createElement(ui_input_1.InputTextArea, { placeholder: field.placeholder, autoSize: { minRows: 3, maxRows: 6 }, "aria-label": ariaLabel, disabled: isDisabled }));
+            case 'file':
+                return (react_1.default.createElement(FileFilterInput, { accept: field.fileAccept, "aria-label": ariaLabel, disabled: isDisabled }));
             case 'custom':
                 if (typeof field.render === 'function') {
                     return field.render({
-                        field,
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        field: field,
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         control: formMethods.control,
                         formValues: formMethods.getValues(),
@@ -471,7 +538,7 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
     return (react_1.default.createElement(ui_card_1.Card, { size: "small", className: "akinon-filter shadow", "data-testid": "akifilter-root" },
         react_1.default.createElement(antd_1.ConfigProvider, { theme: theme_overrides_1.themeOverrides },
             react_1.default.createElement(filter_toolbar_1.FilterToolbar, { onOpenModal: handleOpenModal, enableImportCsv: enableImportCsv, enableImportXls: enableImportXls, onImportCsv: onImportCsv, onImportXls: onImportXls }),
-            react_1.default.createElement(applied_filters_1.AppliedFilters, { filters: appliedFilters, onRemove: handleRemoveFilter, onClearAll: handleClearAll }),
+            react_1.default.createElement(applied_filters_1.AppliedFilters, { filters: [...appliedFilters, ...(externalAppliedFilters !== null && externalAppliedFilters !== void 0 ? externalAppliedFilters : [])], onRemove: handleAppliedFilterRemove, onClearAll: handleClearAllApplied }),
             react_1.default.createElement("div", { className: "akinon-filter__body" },
                 react_1.default.createElement(akiform_1.Akiform, { layout: "vertical", className: "akinon-filter__form" },
                     react_1.default.createElement("div", { className: "akinon-filter__form-grid", "data-testid": "akifilter-form-grid" },

package/dist/cjs/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;AAqB/C,eAAO,MAAM,eAAe,GAAI,YAAY,SAAS,WAAW,EAC9D,QAAQ,cAAc,CAAC,YAAY,CAAC,EAAE,EACtC,YAAY,MAAM,KACjB,MAKF,CAAC;AAIF,eAAO,MAAM,eAAe,GAAI,YAAY,SAAS,WAAW,EAC9D,QAAQ,cAAc,CAAC,YAAY,CAAC,EAAE,EACtC,YAAY,MAAM,KACjB,MAAM,EAAE,GAAG,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"}
+{"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;AA2B/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"}

package/dist/cjs/common/storage.js

@@ -14,7 +14,12 @@ const hashString = (value) => {
     return Math.abs(hash).toString(36);
 };
 const buildSchemaSignature = (schema) => {
-    return schema.map(field => `${String(field.key)}:${field.type}`).join('|');
+    return schema
+        .map(field => {
+        const mode = field.type === 'select' && field.mode ? `:${field.mode}` : '';
+        return `${String(field.key)}:${field.type}${mode}`;
+    })
+        .join('|');
 };
 const buildStorageKey = (schema, namespace) => {
     const signature = buildSchemaSignature(schema);

package/dist/cjs/components/applied-filters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"applied-filters.d.ts","sourceRoot":"","sources":["../../../src/components/applied-filters.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,aAAa,GAAG;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,mCAI5B,mBAAmB,sBAoDrB,CAAC;AAEF,YAAY,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"applied-filters.d.ts","sourceRoot":"","sources":["../../../src/components/applied-filters.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,aAAa,GAAG;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,mCAI5B,mBAAmB,sBAwDrB,CAAC;AAEF,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/cjs/components/applied-filters.js

@@ -13,9 +13,9 @@ const AppliedFilters = ({ filters, onRemove, onClearAll }) => {
         react_1.default.createElement(ui_space_1.Space, { className: "akinon-filter__applied-summary", size: 8 },
             react_1.default.createElement(ui_typography_1.Text, { className: "akinon-filter__applied-label" }, i18n_1.i18n.t('applied.label')),
             hasFilters ? (react_1.default.createElement(ui_space_1.Space, { className: "akinon-filter__applied-items", size: 8, wrap: true }, filters.map(item => (react_1.default.createElement("div", { key: `${item.key}-${item.value}`, className: "akinon-filter__chip" },
-                react_1.default.createElement("span", { className: "akinon-filter__chip-label" },
+                item.label ? (react_1.default.createElement("span", { className: "akinon-filter__chip-label" },
                     item.label,
-                    ":"),
+                    ":")) : null,
                 react_1.default.createElement("span", { className: "akinon-filter__chip-value" }, item.value),
                 react_1.default.createElement("button", { type: "button", "aria-label": i18n_1.i18n.t('applied.clearSingle', {
                         field: item.label

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

@@ -3,8 +3,8 @@ type FilterToolbarProps = {
     onOpenModal: () => void;
     enableImportCsv?: boolean;
     enableImportXls?: boolean;
-    onImportCsv?: () => void;
-    onImportXls?: () => void;
+    onImportCsv?: (file: File) => void;
+    onImportXls?: (file: File) => void;
 };
 export declare const FilterToolbar: ({ onOpenModal, enableImportCsv, enableImportXls, onImportCsv, onImportXls }: FilterToolbarProps) => React.JSX.Element;
 export {};

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,MAAM,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,6EAM3B,kBAAkB,sBAwCpB,CAAC"}
+{"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"}

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

@@ -6,12 +6,28 @@ const ui_space_1 = require("@akinon/ui-space");
 const ui_typography_1 = require("@akinon/ui-typography");
 const react_1 = require("react");
 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 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(ui_button_1.Button, { className: "akinon-filter__toolbar-item", onClick: onImportCsv, type: "primary" }, i18n_1.i18n.t('header.actions.importCsv'))) : null,
-            enableImportXls && onImportXls ? (react_1.default.createElement(ui_button_1.Button, { className: "akinon-filter__toolbar-item", onClick: onImportXls, type: "primary" }, i18n_1.i18n.t('header.actions.importXls'))) : null,
+            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,
             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/filter-builder.d.ts

@@ -1,9 +1,9 @@
 import type { FieldValues } from '@akinon/akiform';
 import { field } from '@akinon/akiform-builder';
-import type { AkifilterField } from './types';
+import type { AkifilterField, AkifilterFieldConfig } from './types';
 type BaseBuilder<TFieldValues extends FieldValues> = ReturnType<typeof field<TFieldValues>>;
-type AkifilterFieldBuilder<TFieldValues extends FieldValues> = BaseBuilder<TFieldValues> & {
-    visible(isVisible?: boolean): AkifilterFieldBuilder<TFieldValues>;
+type AkifilterFieldBuilder<TFieldValues extends FieldValues> = Omit<BaseBuilder<TFieldValues>, 'build' | 'config'> & {
+    config(cfg: AkifilterFieldConfig<TFieldValues>): AkifilterFieldBuilder<TFieldValues>;
     build(): AkifilterField<TFieldValues>;
 };
 export declare const filterField: <TFieldValues extends FieldValues = FieldValues>() => AkifilterFieldBuilder<TFieldValues>;

package/dist/cjs/filter-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filter-builder.d.ts","sourceRoot":"","sources":["../../src/filter-builder.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,KAAK,WAAW,CAAC,YAAY,SAAS,WAAW,IAAI,UAAU,CAC7D,OAAO,KAAK,CAAC,YAAY,CAAC,CAC3B,CAAC;AAEF,KAAK,qBAAqB,CAAC,YAAY,SAAS,WAAW,IACzD,WAAW,CAAC,YAAY,CAAC,GAAG;IAC1B,OAAO,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,qBAAqB,CAAC,YAAY,CAAC,CAAC;IAClE,KAAK,IAAI,cAAc,CAAC,YAAY,CAAC,CAAC;CACvC,CAAC;AAEJ,eAAO,MAAM,WAAW,GACtB,YAAY,SAAS,WAAW,GAAG,WAAW,0CA8B/C,CAAC;AAEF,YAAY,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"filter-builder.d.ts","sourceRoot":"","sources":["../../src/filter-builder.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,KAAK,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAEpE,KAAK,WAAW,CAAC,YAAY,SAAS,WAAW,IAAI,UAAU,CAC7D,OAAO,KAAK,CAAC,YAAY,CAAC,CAC3B,CAAC;AAEF,KAAK,qBAAqB,CAAC,YAAY,SAAS,WAAW,IAAI,IAAI,CACjE,WAAW,CAAC,YAAY,CAAC,EACzB,OAAO,GAAG,QAAQ,CACnB,GAAG;IACF,MAAM,CACJ,GAAG,EAAE,oBAAoB,CAAC,YAAY,CAAC,GACtC,qBAAqB,CAAC,YAAY,CAAC,CAAC;IACvC,KAAK,IAAI,cAAc,CAAC,YAAY,CAAC,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,WAAW,GACtB,YAAY,SAAS,WAAW,GAAG,WAAW,0CA+B/C,CAAC;AAEF,YAAY,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/cjs/filter-builder.js

@@ -4,21 +4,18 @@ exports.filterField = void 0;
 const akiform_builder_1 = require("@akinon/akiform-builder");
 const filterField = () => {
     const baseBuilder = (0, akiform_builder_1.field)();
-    let visibility;
+    let fieldConfig;
     const builder = baseBuilder;
-    builder.visible = (isVisible = true) => {
-        visibility = isVisible;
+    builder.config = cfg => {
+        fieldConfig = Object.assign(Object.assign({}, fieldConfig), cfg);
         return builder;
     };
     const originalBuild = baseBuilder.build.bind(baseBuilder);
     builder.build = () => {
         const builtField = originalBuild();
         const filterFieldDefinition = Object.assign({}, builtField);
-        if (visibility !== undefined) {
-            filterFieldDefinition.isVisible = visibility;
-        }
-        else {
-            delete filterFieldDefinition.isVisible;
+        if (fieldConfig !== undefined) {
+            filterFieldDefinition.config = Object.assign(Object.assign({}, filterFieldDefinition.config), fieldConfig);
         }
         return filterFieldDefinition;
     };

package/dist/cjs/hooks/use-dynamic-visibility.d.ts

@@ -0,0 +1,8 @@
+import type { FieldValues } from '@akinon/akiform';
+import type { AkifilterSchema } from '../types';
+export declare const useDynamicVisibility: <TFieldValues extends FieldValues>({ regularFields, formValues, setVisibleKeys }: {
+    regularFields: AkifilterSchema<TFieldValues>;
+    formValues: Partial<TFieldValues> | undefined;
+    setVisibleKeys: React.Dispatch<React.SetStateAction<string[]>>;
+}) => void;
+//# sourceMappingURL=use-dynamic-visibility.d.ts.map

package/dist/cjs/hooks/use-dynamic-visibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-dynamic-visibility.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-dynamic-visibility.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AA0ChD,eAAO,MAAM,oBAAoB,GAAI,YAAY,SAAS,WAAW,EAAE,+CAIpE;IACD,aAAa,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC7C,UAAU,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC;IAC9C,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;CAChE,SAcA,CAAC"}

package/dist/cjs/hooks/use-dynamic-visibility.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDynamicVisibility = void 0;
+const react_1 = require("react");
+const schema_1 = require("../utils/schema");
+const computeDynamicKeys = (fields, prev, formValues) => {
+    const prevSet = new Set(prev);
+    const fieldKeySet = new Set(fields.map(f => String(f.key)));
+    const { keys, changed } = fields.reduce((acc, field) => {
+        const key = String(field.key);
+        const isCurrentlyVisible = prevSet.has(key);
+        if (!(0, schema_1.hasDynamicVisibility)(field)) {
+            if (isCurrentlyVisible)
+                acc.keys.push(key);
+            return acc;
+        }
+        const shouldBeVisible = (0, schema_1.resolveFieldVisibility)(field, formValues, isCurrentlyVisible);
+        if (shouldBeVisible)
+            acc.keys.push(key);
+        if (shouldBeVisible !== isCurrentlyVisible)
+            acc.changed = true;
+        return acc;
+    }, { keys: prev.filter(k => !fieldKeySet.has(k)), changed: false });
+    return changed ? (0, schema_1.ensureSchemaOrder)(fields, keys) : null;
+};
+const useDynamicVisibility = ({ regularFields, formValues, setVisibleKeys }) => {
+    (0, react_1.useEffect)(() => {
+        if (!regularFields.some(schema_1.hasDynamicVisibility))
+            return;
+        setVisibleKeys(prev => {
+            var _a;
+            return ((_a = computeDynamicKeys(regularFields, prev, (formValues !== null && formValues !== void 0 ? formValues : {}))) !== null && _a !== void 0 ? _a : prev);
+        });
+    }, [regularFields, formValues, setVisibleKeys]);
+};
+exports.useDynamicVisibility = useDynamicVisibility;

package/dist/cjs/hooks/use-visibility-cleanup.d.ts

@@ -0,0 +1,13 @@
+import type { FieldValues } from '@akinon/akiform';
+import type { AkifilterSchema } from '../types';
+/**
+ * Cleans up form values when fields become hidden.
+ * On first render, clears fields explicitly marked as invisible.
+ * On subsequent renders, clears fields that were removed from visibleKeys.
+ */
+export declare const useVisibilityCleanup: <TFieldValues extends FieldValues = FieldValues>({ visibleKeys, regularFields, onRemove }: {
+    visibleKeys: string[];
+    regularFields: AkifilterSchema<TFieldValues>;
+    onRemove: (key: string) => void;
+}) => void;
+//# sourceMappingURL=use-visibility-cleanup.d.ts.map

package/dist/cjs/hooks/use-visibility-cleanup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-visibility-cleanup.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-visibility-cleanup.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAInD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AA+BhD;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAC/B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,0CAIC;IACD,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC7C,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,SAcA,CAAC"}

package/dist/cjs/hooks/use-visibility-cleanup.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVisibilityCleanup = void 0;
+const lodash_es_1 = require("lodash-es");
+const react_1 = require("react");
+const schema_1 = require("../utils/schema");
+const getInitialKeysToClean = (fields) => fields
+    .filter(field => (0, schema_1.resolveFieldVisibility)(field) === false)
+    .map(field => String(field.key));
+const getRemovedKeys = (prev, current) => prev.filter(key => !current.includes(key));
+const cleanupKeys = (keys, onRemove) => {
+    keys.forEach(key => onRemove(key));
+};
+const resolveKeysToClean = ({ prev, current, fields }) => {
+    if (prev === null)
+        return getInitialKeysToClean(fields);
+    if ((0, lodash_es_1.isEqual)(prev, current))
+        return [];
+    return getRemovedKeys(prev, current);
+};
+/**
+ * Cleans up form values when fields become hidden.
+ * On first render, clears fields explicitly marked as invisible.
+ * On subsequent renders, clears fields that were removed from visibleKeys.
+ */
+const useVisibilityCleanup = ({ visibleKeys, regularFields, onRemove }) => {
+    const previousVisibleKeysRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const prev = previousVisibleKeysRef.current;
+        previousVisibleKeysRef.current = visibleKeys;
+        const keysToClean = resolveKeysToClean({
+            prev,
+            current: visibleKeys,
+            fields: regularFields
+        });
+        cleanupKeys(keysToClean, onRemove);
+    }, [visibleKeys, onRemove, regularFields]);
+};
+exports.useVisibilityCleanup = useVisibilityCleanup;

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

@@ -3,8 +3,8 @@ declare const translations: {
         readonly title: "Filters";
         readonly actions: {
             readonly selectFilters: "Select filters";
-            readonly importCsv: "Import CSV";
-            readonly importXls: "Import XLS/XLSX";
+            readonly importCsv: "CSV";
+            readonly importXls: "XLS";
         };
     };
     readonly applied: {

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

@@ -5,8 +5,8 @@ const translations = {
         title: 'Filters',
         actions: {
             selectFilters: 'Select filters',
-            importCsv: 'Import CSV',
-            importXls: 'Import XLS/XLSX'
+            importCsv: 'CSV',
+            importXls: 'XLS'
         }
     },
     applied: {

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

@@ -3,8 +3,8 @@ declare const translations: {
         readonly title: "Filtreler";
         readonly actions: {
             readonly selectFilters: "Filtreleri seç";
-            readonly importCsv: "CSV içe aktar";
-            readonly importXls: "XLS/XLSX içe aktar";
+            readonly importCsv: "CSV";
+            readonly importXls: "XLS";
         };
     };
     readonly applied: {

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

@@ -5,8 +5,8 @@ const translations = {
         title: 'Filtreler',
         actions: {
             selectFilters: 'Filtreleri seç',
-            importCsv: 'CSV içe aktar',
-            importXls: 'XLS/XLSX içe aktar'
+            importCsv: 'CSV',
+            importXls: 'XLS'
         }
     },
     applied: {

package/dist/cjs/index.d.ts

@@ -1,4 +1,5 @@
 export * from './akifilter';
+export * from './components/applied-filters';
 export * from './filter-builder';
 export * from './i18n';
 export * from './types';

package/dist/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}

package/dist/cjs/index.js

@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./akifilter"), exports);
+__exportStar(require("./components/applied-filters"), exports);
 __exportStar(require("./filter-builder"), exports);
 __exportStar(require("./i18n"), exports);
 __exportStar(require("./types"), exports);