selectic 3.0.2 → 3.0.3

package/dist/selectic.common.js

@@ -107,6 +107,7 @@ class SelecticStore {
             disabled: false,
             placeholder: '',
             hideFilter: false,
+            keepFilterOpen: false,
             allowRevert: undefined,
             allowClearSelection: false,
             autoSelect: true,
@@ -264,6 +265,10 @@ class SelecticStore {
         if (stateParam.hideFilter === 'auto') {
             delete stateParam.hideFilter;
         }
+        else if (stateParam.hideFilter === 'open') {
+            this.state.keepFilterOpen = true;
+            delete stateParam.hideFilter;
+        }
         /* Update state */
         assignObject(this.state, stateParam);
         /* XXX: should be done in 2 lines, in order to set the multiple state
@@ -1468,6 +1473,10 @@ let FilterPanel = class FilterPanel extends vtyx.Vue {
         this.store.commit('selectionIsExcluded', !this.selectionIsExcluded);
     }
     togglePanel() {
+        if (this.store.state.keepFilterOpen === true) {
+            this.closed = false;
+            return;
+        }
         this.closed = !this.closed;
     }
     getFocus() {
@@ -1484,7 +1493,8 @@ let FilterPanel = class FilterPanel extends vtyx.Vue {
     /* }}} */
     /* {{{ Life cycle */
     mounted() {
-        this.closed = !this.store.state.searchText;
+        const state = this.store.state;
+        this.closed = !state.keepFilterOpen && !state.searchText;
         document.addEventListener('keypress', this.onKeyPressed);
         this.getFocus();
     }
@@ -1493,24 +1503,27 @@ let FilterPanel = class FilterPanel extends vtyx.Vue {
     }
     /* }}} */
     render() {
+        const store = this.store;
+        const state = store.state;
+        const labels = store.data.labels;
         return (vtyx.h("div", { class: "filter-panel" },
             vtyx.h("div", { class: {
                     panelclosed: this.closed,
                     panelopened: !this.closed,
                 } },
                 vtyx.h("div", { class: "filter-panel__input form-group has-feedback" },
-                    vtyx.h("input", { type: "text", class: "form-control filter-input", placeholder: this.searchPlaceholder, value: this.store.state.searchText, on: {
+                    vtyx.h("input", { type: "text", class: "form-control filter-input", placeholder: this.searchPlaceholder, value: state.searchText, on: {
                             'input.stop.prevent': this.onInput,
                         }, ref: "filterInput" }),
                     vtyx.h("span", { class: "fa fa-search selectic-search-scope\n                                     form-control-feedback" })),
-                this.store.state.multiple && (vtyx.h("div", { class: "toggle-selectic" },
+                state.multiple && (vtyx.h("div", { class: "toggle-selectic" },
                     vtyx.h("label", { class: ['control-label', {
                                 'selectic__label-disabled': this.disableSelectAll,
                             }] },
-                        vtyx.h("input", { type: "checkbox", checked: this.store.state.status.areAllSelected, disabled: this.disableSelectAll, on: {
+                        vtyx.h("input", { type: "checkbox", checked: state.status.areAllSelected, disabled: this.disableSelectAll, on: {
                                 change: this.onSelectAll,
                             } }),
-                        this.store.data.labels.selectAll))),
+                        labels.selectAll))),
                 this.enableRevert && (vtyx.h("div", { class: ['toggle-selectic', {
                             'selectic__label-disabled': this.disableRevert,
                         }] },
@@ -1518,8 +1531,8 @@ let FilterPanel = class FilterPanel extends vtyx.Vue {
                         vtyx.h("input", { type: "checkbox", checked: this.selectionIsExcluded, disabled: this.disableRevert, on: {
                                 change: this.onExclude,
                             } }),
-                        this.store.data.labels.excludeResult)))),
-            vtyx.h("div", { class: "curtain-handler", on: {
+                        labels.excludeResult)))),
+            !state.keepFilterOpen && (vtyx.h("div", { class: "curtain-handler", on: {
                     'click.prevent.stop': this.togglePanel,
                 } },
                 vtyx.h("span", { class: "fa fa-search" }),
@@ -1527,7 +1540,7 @@ let FilterPanel = class FilterPanel extends vtyx.Vue {
                         'fa': true,
                         'fa-caret-down': this.closed,
                         'fa-caret-up': !this.closed,
-                    } }))));
+                    } })))));
     }
 };
 __decorate$3([
@@ -2370,7 +2383,7 @@ let Selectic = class Selectic extends vtyx.Vue {
     /* }}} */
     /* {{{ Life cycle */
     created() {
-        var _a, _b;
+        var _a, _b, _c;
         this._elementsListeners = [];
         this.store = new SelecticStore({
             options: this.options,
@@ -2383,8 +2396,7 @@ let Selectic = class Selectic extends vtyx.Vue {
             params: {
                 multiple: ((_a = this.multiple) !== null && _a !== void 0 ? _a : false) !== false,
                 pageSize: this.params.pageSize || 100,
-                hideFilter: this.params.hideFilter !== undefined
-                    ? this.params.hideFilter : 'auto',
+                hideFilter: (_b = this.params.hideFilter) !== null && _b !== void 0 ? _b : 'auto',
                 allowRevert: this.params.allowRevert,
                 allowClearSelection: this.params.allowClearSelection || false,
                 autoSelect: this.params.autoSelect === undefined
@@ -2399,7 +2411,7 @@ let Selectic = class Selectic extends vtyx.Vue {
                 formatSelection: this.params.formatSelection,
                 listPosition: this.params.listPosition || 'auto',
                 optionBehavior: this.params.optionBehavior,
-                isOpen: ((_b = this.open) !== null && _b !== void 0 ? _b : false) !== false,
+                isOpen: ((_c = this.open) !== null && _c !== void 0 ? _c : false) !== false,
             },
             fetchCallback: this.params.fetchCallback,
             getItemsCallback: this.params.getItemsCallback,
@@ -2551,4 +2563,4 @@ Selectic = __decorate([
 var Selectic$1 = Selectic;
 
 exports.changeTexts = changeTexts;
-exports['default'] = Selectic$1;
+exports["default"] = Selectic$1;

package/dist/selectic.esm.js

@@ -103,6 +103,7 @@ class SelecticStore {
             disabled: false,
             placeholder: '',
             hideFilter: false,
+            keepFilterOpen: false,
             allowRevert: undefined,
             allowClearSelection: false,
             autoSelect: true,
@@ -260,6 +261,10 @@ class SelecticStore {
         if (stateParam.hideFilter === 'auto') {
             delete stateParam.hideFilter;
         }
+        else if (stateParam.hideFilter === 'open') {
+            this.state.keepFilterOpen = true;
+            delete stateParam.hideFilter;
+        }
         /* Update state */
         assignObject(this.state, stateParam);
         /* XXX: should be done in 2 lines, in order to set the multiple state
@@ -1464,6 +1469,10 @@ let FilterPanel = class FilterPanel extends Vue {
         this.store.commit('selectionIsExcluded', !this.selectionIsExcluded);
     }
     togglePanel() {
+        if (this.store.state.keepFilterOpen === true) {
+            this.closed = false;
+            return;
+        }
         this.closed = !this.closed;
     }
     getFocus() {
@@ -1480,7 +1489,8 @@ let FilterPanel = class FilterPanel extends Vue {
     /* }}} */
     /* {{{ Life cycle */
     mounted() {
-        this.closed = !this.store.state.searchText;
+        const state = this.store.state;
+        this.closed = !state.keepFilterOpen && !state.searchText;
         document.addEventListener('keypress', this.onKeyPressed);
         this.getFocus();
     }
@@ -1489,24 +1499,27 @@ let FilterPanel = class FilterPanel extends Vue {
     }
     /* }}} */
     render() {
+        const store = this.store;
+        const state = store.state;
+        const labels = store.data.labels;
         return (h("div", { class: "filter-panel" },
             h("div", { class: {
                     panelclosed: this.closed,
                     panelopened: !this.closed,
                 } },
                 h("div", { class: "filter-panel__input form-group has-feedback" },
-                    h("input", { type: "text", class: "form-control filter-input", placeholder: this.searchPlaceholder, value: this.store.state.searchText, on: {
+                    h("input", { type: "text", class: "form-control filter-input", placeholder: this.searchPlaceholder, value: state.searchText, on: {
                             'input.stop.prevent': this.onInput,
                         }, ref: "filterInput" }),
                     h("span", { class: "fa fa-search selectic-search-scope\n                                     form-control-feedback" })),
-                this.store.state.multiple && (h("div", { class: "toggle-selectic" },
+                state.multiple && (h("div", { class: "toggle-selectic" },
                     h("label", { class: ['control-label', {
                                 'selectic__label-disabled': this.disableSelectAll,
                             }] },
-                        h("input", { type: "checkbox", checked: this.store.state.status.areAllSelected, disabled: this.disableSelectAll, on: {
+                        h("input", { type: "checkbox", checked: state.status.areAllSelected, disabled: this.disableSelectAll, on: {
                                 change: this.onSelectAll,
                             } }),
-                        this.store.data.labels.selectAll))),
+                        labels.selectAll))),
                 this.enableRevert && (h("div", { class: ['toggle-selectic', {
                             'selectic__label-disabled': this.disableRevert,
                         }] },
@@ -1514,8 +1527,8 @@ let FilterPanel = class FilterPanel extends Vue {
                         h("input", { type: "checkbox", checked: this.selectionIsExcluded, disabled: this.disableRevert, on: {
                                 change: this.onExclude,
                             } }),
-                        this.store.data.labels.excludeResult)))),
-            h("div", { class: "curtain-handler", on: {
+                        labels.excludeResult)))),
+            !state.keepFilterOpen && (h("div", { class: "curtain-handler", on: {
                     'click.prevent.stop': this.togglePanel,
                 } },
                 h("span", { class: "fa fa-search" }),
@@ -1523,7 +1536,7 @@ let FilterPanel = class FilterPanel extends Vue {
                         'fa': true,
                         'fa-caret-down': this.closed,
                         'fa-caret-up': !this.closed,
-                    } }))));
+                    } })))));
     }
 };
 __decorate$3([
@@ -2366,7 +2379,7 @@ let Selectic = class Selectic extends Vue {
     /* }}} */
     /* {{{ Life cycle */
     created() {
-        var _a, _b;
+        var _a, _b, _c;
         this._elementsListeners = [];
         this.store = new SelecticStore({
             options: this.options,
@@ -2379,8 +2392,7 @@ let Selectic = class Selectic extends Vue {
             params: {
                 multiple: ((_a = this.multiple) !== null && _a !== void 0 ? _a : false) !== false,
                 pageSize: this.params.pageSize || 100,
-                hideFilter: this.params.hideFilter !== undefined
-                    ? this.params.hideFilter : 'auto',
+                hideFilter: (_b = this.params.hideFilter) !== null && _b !== void 0 ? _b : 'auto',
                 allowRevert: this.params.allowRevert,
                 allowClearSelection: this.params.allowClearSelection || false,
                 autoSelect: this.params.autoSelect === undefined
@@ -2395,7 +2407,7 @@ let Selectic = class Selectic extends Vue {
                 formatSelection: this.params.formatSelection,
                 listPosition: this.params.listPosition || 'auto',
                 optionBehavior: this.params.optionBehavior,
-                isOpen: ((_b = this.open) !== null && _b !== void 0 ? _b : false) !== false,
+                isOpen: ((_c = this.open) !== null && _c !== void 0 ? _c : false) !== false,
             },
             fetchCallback: this.params.fetchCallback,
             getItemsCallback: this.params.getItemsCallback,

package/doc/params.md

@@ -10,13 +10,16 @@ This property is an object with several attributes which are listed below.
 
 ## hideFilter
 
-Type: `boolean` | `'auto'`
+Type: `boolean` | `'auto'` | `'open'`
 
 If `hideFilter` is set to `true`, the handler to open the filter panel is hidden and it will not be possible to search for options.
 
 If `hideFilter` is set to `'auto`, the handler to open the filter panel is hidden only if there is less than 10 options (when there is no scroll), and is displayed otherwise. _This is the default value_.
 
-If `hideFilter` is set to `true`, the handler to open the filter panel is always displayed.
+If `hideFilter` is set to `false`, the handler to open the filter panel is always displayed.
+
+If `hideFilter` is set to `'open'`, the handler to open or close the filter panel
+will not be displayed and the filter panel is always open.
 
 ```html
 <selectic

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "selectic",
-    "version": "3.0.2",
+    "version": "3.0.3",
     "description": "Smart Select for VueJS 3.x",
     "main": "dist/selectic.common.js",
     "module": "dist/selectic.esm.js",
@@ -36,12 +36,13 @@
         "test": "npm run build && tape test/**/*.spec.js"
     },
     "dependencies": {
-        "vtyx": "4.0.0"
+        "vtyx": "4.0.3"
     },
     "devDependencies": {
-        "rollup": "^2.56.3",
+        "@babel/types": "^7.16.7",
+        "rollup": "^2.63.0",
         "rollup-plugin-postcss": "^3.1.8",
-        "tape": "^4.13.3",
-        "typescript": "~4.4"
+        "tape": "^4.14.0",
+        "typescript": "~4.5"
     }
 }

package/src/Filter.tsx

@@ -100,6 +100,10 @@ export default class FilterPanel extends Vue<Props> {
     }
 
     private togglePanel() {
+        if (this.store.state.keepFilterOpen === true) {
+            this.closed = false;
+            return;
+        }
         this.closed = !this.closed;
     }
 
@@ -122,7 +126,8 @@ export default class FilterPanel extends Vue<Props> {
     /* {{{ Life cycle */
 
     public mounted() {
-        this.closed = !this.store.state.searchText;
+        const state = this.store.state;
+        this.closed = !state.keepFilterOpen && !state.searchText;
         document.addEventListener('keypress', this.onKeyPressed);
 
         this.getFocus();
@@ -135,6 +140,10 @@ export default class FilterPanel extends Vue<Props> {
     /* }}} */
 
     public render() {
+        const store = this.store;
+        const state = store.state;
+        const labels = store.data.labels;
+
         return (
             <div class="filter-panel">
                 <div
@@ -148,7 +157,7 @@ export default class FilterPanel extends Vue<Props> {
                             type="text"
                             class="form-control filter-input"
                             placeholder={this.searchPlaceholder}
-                            value={this.store.state.searchText}
+                            value={state.searchText}
                             on={{
                                 'input.stop.prevent': this.onInput,
                             }}
@@ -158,7 +167,7 @@ export default class FilterPanel extends Vue<Props> {
                                      form-control-feedback"
                         ></span>
                     </div>
-                    {this.store.state.multiple && (
+                    {state.multiple && (
                         <div class="toggle-selectic">
                             <label
                                 class={['control-label', {
@@ -167,13 +176,13 @@ export default class FilterPanel extends Vue<Props> {
                             >
                                 <input
                                     type="checkbox"
-                                    checked={this.store.state.status.areAllSelected}
+                                    checked={state.status.areAllSelected}
                                     disabled={this.disableSelectAll}
                                     on={{
                                         change: this.onSelectAll,
                                     }}
                                 />
-                                {this.store.data.labels.selectAll}
+                                {labels.selectAll}
                             </label>
                         </div>
                     )}
@@ -192,11 +201,13 @@ export default class FilterPanel extends Vue<Props> {
                                         change: this.onExclude,
                                     }}
                                 />
-                                {this.store.data.labels.excludeResult}
+                                {labels.excludeResult}
                             </label>
                         </div>
                     )}
                 </div>
+
+                {!state.keepFilterOpen && (
                 <div class="curtain-handler"
                      on={{
                          'click.prevent.stop': this.togglePanel,
@@ -209,6 +220,7 @@ export default class FilterPanel extends Vue<Props> {
                         'fa-caret-up': !this.closed,
                     }}></span>
                 </div>
+                )}
            </div>
         );
     }

package/src/Store.tsx

@@ -72,6 +72,15 @@ export type ListPosition =
     /* Display the list at bottom but if there is not enough space, display it at top */
   | 'auto';
 
+export type HideFilter =
+    /* Display or hide the filter panel */
+    boolean
+    /* The handler to open the filter panel is hidden only if there is less
+     * than 10 options */
+  | 'auto'
+    /* The panel filter is always open */
+  | 'open';
+
 export interface SelecticStoreStateParams {
     /* Equivalent of <select>'s "multiple" attribute */
     multiple?: boolean;
@@ -80,7 +89,7 @@ export interface SelecticStoreStateParams {
     placeholder?: string;
 
     /* Hide filter component when enabled */
-    hideFilter?: boolean | 'auto';
+    hideFilter?: HideFilter;
 
     /* Allow to reverse selection.
      * If true, parent should support the selectionIsExcluded property.
@@ -203,6 +212,9 @@ export interface SelecticStoreState {
     /* If true, filters and controls are hidden */
     hideFilter: boolean;
 
+    /* If true, the filter panel is always open */
+    keepFilterOpen: boolean;
+
     /* Allow to reverse selection.
      * If true, parent should support the selectionIsExcluded property.
      * If false, the action is never available.
@@ -404,6 +416,7 @@ export default class SelecticStore {
         disabled: false,
         placeholder: '',
         hideFilter: false,
+        keepFilterOpen: false,
         allowRevert: undefined,
         allowClearSelection: false,
         autoSelect: true,
@@ -625,6 +638,9 @@ export default class SelecticStore {
 
         if (stateParam.hideFilter === 'auto') {
             delete stateParam.hideFilter;
+        } else if (stateParam.hideFilter === 'open') {
+            this.state.keepFilterOpen = true;
+            delete stateParam.hideFilter;
         }
 
         /* Update state */

package/src/index.tsx

@@ -36,6 +36,7 @@ import Store, {
     FormatCallback,
     SelectionOverflow,
     ListPosition,
+    HideFilter,
 } from './Store';
 import MainInput from './MainInput';
 import ExtendedList from './ExtendedList';
@@ -55,6 +56,7 @@ export {
     FormatCallback,
     SelectionOverflow,
     ListPosition,
+    HideFilter,
 };
 
 type EventType = 'input' | 'change' | 'open' | 'close' | 'focus' | 'blur' | 'item:click';
@@ -83,7 +85,7 @@ export interface ParamProps {
     pageSize?: number;
 
     /* Hide the search control */
-    hideFilter?: boolean | 'auto';
+    hideFilter?: HideFilter;
 
     /* Allow to reverse selection.
      * If true, parent should support the selectionIsExcluded property.
@@ -774,8 +776,7 @@ export default class Selectic extends Vue<Props> {
             params: {
                 multiple: (this.multiple ?? false) !== false,
                 pageSize: this.params.pageSize || 100,
-                hideFilter: this.params.hideFilter !== undefined
-                          ? this.params.hideFilter : 'auto',
+                hideFilter: this.params.hideFilter ?? 'auto',
                 allowRevert: this.params.allowRevert, /* it can be undefined */
                 allowClearSelection: this.params.allowClearSelection || false,
                 autoSelect: this.params.autoSelect === undefined

package/test/Store/Store_creation.spec.js

@@ -943,6 +943,7 @@ tape.test('Store creation', (subT) => {
                 await sleep(0);
 
                 t.is(store.state.hideFilter, true);
+                t.is(store.state.keepFilterOpen, false);
                 t.end();
             });
 
@@ -956,6 +957,7 @@ tape.test('Store creation', (subT) => {
                 await sleep(0);
 
                 t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, false);
                 t.end();
             });
 
@@ -994,6 +996,7 @@ tape.test('Store creation', (subT) => {
                 await sleep(0);
 
                 t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, false);
                 t.end();
             });
         });
@@ -1009,6 +1012,7 @@ tape.test('Store creation', (subT) => {
                 await sleep(0);
 
                 t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, false);
                 t.end();
             });
 
@@ -1022,17 +1026,20 @@ tape.test('Store creation', (subT) => {
                 await sleep(0);
 
                 t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, false);
 
                 /* Assert it doesn't change after fetching data */
                 store.commit('isOpen', true);
                 await sleep(0);
 
                 t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, false);
 
                 store.commit('isOpen', false);
                 await sleep(0);
 
                 t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, false);
                 t.end();
             });
         });
@@ -1089,6 +1096,49 @@ tape.test('Store creation', (subT) => {
                 t.end();
             });
         });
+
+        st.test('having value "open"', (sTest) => {
+            sTest.test('should show filter with few options', async (t) => {
+                const store = new Store({
+                    options: getOptions(3),
+                    params: {
+                        hideFilter: 'open',
+                    },
+                });
+                await sleep(0);
+
+                t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, true);
+                t.end();
+            });
+
+            sTest.test('should show filter with dynamic options', async (t) => {
+                const store = new Store({
+                    fetchCallback: buildFetchCb({ total: 5 }),
+                    params: {
+                        hideFilter: 'open',
+                    },
+                });
+                await sleep(0);
+
+                t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, true);
+
+                /* Assert it doesn't change after fetching data */
+                store.commit('isOpen', true);
+                await sleep(0);
+
+                t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, true);
+
+                store.commit('isOpen', false);
+                await sleep(0);
+
+                t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, true);
+                t.end();
+            });
+        });
     });
 
     subT.test('"optionBehavior" property', (st) => {

package/test/helper.js

@@ -8,6 +8,7 @@ function getInitialState(replacedAttributes) {
         disabled: false,
         placeholder: '',
         hideFilter: false,
+        keepFilterOpen: false,
         allowRevert: undefined,
         allowClearSelection: false,
         autoSelect: true,

package/types/Store.d.ts

@@ -37,10 +37,11 @@ export declare type GetCallback = (_ids: OptionId[]) => Promise<OptionValue[]>;
 export declare type FormatCallback = (_option: OptionItem) => OptionItem;
 export declare type SelectionOverflow = 'collapsed' | 'multiline';
 export declare type ListPosition = 'bottom' | 'top' | 'auto';
+export declare type HideFilter = boolean | 'auto' | 'open';
 export interface SelecticStoreStateParams {
     multiple?: boolean;
     placeholder?: string;
-    hideFilter?: boolean | 'auto';
+    hideFilter?: HideFilter;
     allowRevert?: boolean;
     allowClearSelection?: boolean;
     pageSize?: number;
@@ -83,6 +84,7 @@ export interface SelecticStoreState {
     disabled: boolean;
     placeholder: string;
     hideFilter: boolean;
+    keepFilterOpen: boolean;
     allowRevert?: boolean;
     allowClearSelection: boolean;
     autoSelect: boolean;
@@ -147,6 +149,7 @@ export default class SelecticStore {
         disabled: boolean;
         placeholder: string;
         hideFilter: boolean;
+        keepFilterOpen: boolean;
         allowRevert?: boolean | undefined;
         allowClearSelection: boolean;
         autoSelect: boolean;

package/types/index.d.ts

@@ -1,9 +1,9 @@
 import { Vue, h } from 'vtyx';
 import './css/selectic.css';
-import { OptionProp, OptionId, StrictOptionId, GroupValue, SelectedValue, FetchCallback, GetCallback, PartialMessages, OptionValue, OptionItem, FormatCallback, SelectionOverflow, ListPosition } from './Store';
+import { OptionProp, OptionId, StrictOptionId, GroupValue, SelectedValue, FetchCallback, GetCallback, PartialMessages, OptionValue, OptionItem, FormatCallback, SelectionOverflow, ListPosition, HideFilter } from './Store';
 import MainInput from './MainInput';
 import ExtendedList from './ExtendedList';
-export { GroupValue, OptionValue, OptionItem, OptionProp, OptionId, StrictOptionId, SelectedValue, PartialMessages, GetCallback, FetchCallback, FormatCallback, SelectionOverflow, ListPosition, };
+export { GroupValue, OptionValue, OptionItem, OptionProp, OptionId, StrictOptionId, SelectedValue, PartialMessages, GetCallback, FetchCallback, FormatCallback, SelectionOverflow, ListPosition, HideFilter, };
 declare type EventType = 'input' | 'change' | 'open' | 'close' | 'focus' | 'blur' | 'item:click';
 export interface EventOptions {
     instance: Selectic;
@@ -17,7 +17,7 @@ export interface ParamProps {
     fetchCallback?: FetchCallback;
     getItemsCallback?: GetCallback;
     pageSize?: number;
-    hideFilter?: boolean | 'auto';
+    hideFilter?: HideFilter;
     allowRevert?: boolean;
     allowClearSelection?: boolean;
     autoSelect?: boolean;