@furystack/shades-common-components 7.0.0 → 8.0.0

package/esm/services/collection-service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collection-service.d.ts","sourceRoot":"","sources":["../../src/services/collection-service.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAEjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,EAAY,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAE5D,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,OAAO,EAAE,CAAC,EAAE,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,CAAC,OAAO,SAAS,KAAK,CAAC,MAAM,CAAC,CAAC,EAC1D,aAAa,EAAE,WAAW,CAAC,CAAC,EAAE,OAAO,CAAC,KACnC,OAAO,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;AAEvD,MAAM,WAAW,wBAAwB,CAAC,CAAC;IACzC;;OAEG;IACH,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAA;IACtB;;OAEG;IACH,eAAe,EAAE,WAAW,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;IAC/C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,CAAA;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAE/B;;;OAGG;IAEH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAErC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,qBAAa,iBAAiB,CAAC,CAAC,CAAE,YAAW,UAAU;IAoJzC,OAAO,CAAC,OAAO;IAnJpB,OAAO;IAOP,UAAU,UAAW,CAAC,aAA8C;IAEpE,cAAc,UAAW,CAAC,UAEhC;IAEM,mBAAmB,UAAW,CAAC,UAErC;IAEM,eAAe,UAAW,CAAC,UAEjC;IAED,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAa;IAE/B,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,CAAA;IAE1B,IAAI,qCAAoE;IAExE,KAAK,2BAAsD;IAE3D,SAAS,2BAAsC;IAE/C,aAAa,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;IAE9D,YAAY,iCAAgD;IAE5D,SAAS,uBAA+B;IAExC,UAAU,0BAA0B;IAEpC,QAAQ,2BAA6B;IAErC,aAAa,CAAC,EAAE,EAAE,aAAa;IA6E/B,cAAc,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,UAAU;gBA6B1B,OAAO,EAAE,wBAAwB,CAAC,CAAC,CAAC;IA4B3C,oBAAoB,CAAC,KAAK,EAAE,CAAC;CAG3C"}
+{"version":3,"file":"collection-service.d.ts","sourceRoot":"","sources":["../../src/services/collection-service.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAElD,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,OAAO,EAAE,CAAC,EAAE,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,wBAAwB,CAAC,CAAC;IACzC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,CAAA;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAE/B;;;OAGG;IAEH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;CACtC;AAED,qBAAa,iBAAiB,CAAC,CAAC,CAAE,YAAW,UAAU;IA2IzC,OAAO,CAAC,OAAO;IA1IpB,OAAO;IAQP,UAAU,UAAW,CAAC,aAA8C;IAEpE,cAAc,UAAW,CAAC,UAEhC;IAEM,mBAAmB,UAAW,CAAC,UAErC;IAEM,eAAe,UAAW,CAAC,UAEjC;IAEM,IAAI,qCAAoE;IAExE,YAAY,iCAAgD;IAE5D,SAAS,uBAA+B;IAExC,UAAU,0BAA0B;IAEpC,QAAQ,2BAA6B;IAErC,aAAa,CAAC,EAAE,EAAE,aAAa;IA6E/B,cAAc,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,UAAU;gBA6B1B,OAAO,GAAE,wBAAwB,CAAC,CAAC,CAAM;IAEtD,oBAAoB,CAAC,KAAK,EAAE,CAAC;CAGrC"}

package/esm/services/collection-service.js

@@ -1,12 +1,12 @@
-import { Lock } from 'semaphore-async-await';
-import { debounce, ObservableValue } from '@furystack/utils';
+import { ObservableValue } from '@furystack/utils';
 export class CollectionService {
     options;
     dispose() {
-        this.querySettings.dispose();
         this.data.dispose();
-        this.error.dispose();
-        this.isLoading.dispose();
+        this.selection.dispose();
+        this.searchTerm.dispose();
+        this.hasFocus.dispose();
+        this.focusedEntry.dispose();
     }
     isSelected = (entry) => this.selection.getValue().includes(entry);
     addToSelection = (entry) => {
@@ -18,12 +18,7 @@ export class CollectionService {
     toggleSelection = (entry) => {
         this.isSelected(entry) ? this.removeFromSelection(entry) : this.addToSelection(entry);
     };
-    loadLock = new Lock();
-    getEntries;
     data = new ObservableValue({ count: 0, entries: [] });
-    error = new ObservableValue(undefined);
-    isLoading = new ObservableValue(false);
-    querySettings;
     focusedEntry = new ObservableValue(undefined);
     selection = new ObservableValue([]);
     searchTerm = new ObservableValue('');
@@ -125,34 +120,10 @@ export class CollectionService {
         }
         this.focusedEntry.setValue(entry);
     }
-    constructor(options) {
+    constructor(options = {}) {
         this.options = options;
-        this.querySettings = new ObservableValue(this.options.defaultSettings);
-        const loader = this.options.debounceMs
-            ? debounce(this.options.loader, this.options.debounceMs)
-            : this.options.loader;
-        this.getEntries = async (opt) => {
-            await this.loadLock.acquire();
-            try {
-                this.error.setValue(undefined);
-                this.isLoading.setValue(true);
-                const result = await loader(opt);
-                this.data.setValue(result);
-                return result;
-            }
-            catch (error) {
-                this.error.setValue(error);
-                throw error;
-            }
-            finally {
-                this.loadLock.release();
-                this.isLoading.setValue(false);
-            }
-        };
-        this.querySettings.subscribe((val) => this.getEntries(val));
-        this.getEntries(this.querySettings.getValue());
     }
-    async handleRowDoubleClick(entry) {
+    handleRowDoubleClick(entry) {
         this.options.onRowDoubleClick?.(entry);
     }
 }

package/esm/services/collection-service.js.map

@@ -1 +1 @@
-{"version":3,"file":"collection-service.js","sourceRoot":"","sources":["../../src/services/collection-service.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAE5C,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AA4C5D,MAAM,OAAO,iBAAiB;IAoJR;IAnJb,OAAO;QACZ,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAA;QAC5B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAA;QACnB,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAA;QACpB,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAA;IAC1B,CAAC;IAEM,UAAU,GAAG,CAAC,KAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEpE,cAAc,GAAG,CAAC,KAAQ,EAAE,EAAE;QACnC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,KAAK,CAAC,CAAC,CAAA;IAChE,CAAC,CAAA;IAEM,mBAAmB,GAAG,CAAC,KAAQ,EAAE,EAAE;QACxC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAA;IAC/E,CAAC,CAAA;IAEM,eAAe,GAAG,CAAC,KAAQ,EAAE,EAAE;QACpC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;IACvF,CAAC,CAAA;IAEgB,QAAQ,GAAG,IAAI,IAAI,EAAE,CAAA;IAE/B,UAAU,CAAgB;IAE1B,IAAI,GAAG,IAAI,eAAe,CAAoB,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAA;IAExE,KAAK,GAAG,IAAI,eAAe,CAAsB,SAAS,CAAC,CAAA;IAE3D,SAAS,GAAG,IAAI,eAAe,CAAU,KAAK,CAAC,CAAA;IAE/C,aAAa,CAAiD;IAE9D,YAAY,GAAG,IAAI,eAAe,CAAgB,SAAS,CAAC,CAAA;IAE5D,SAAS,GAAG,IAAI,eAAe,CAAM,EAAE,CAAC,CAAA;IAExC,UAAU,GAAG,IAAI,eAAe,CAAC,EAAE,CAAC,CAAA;IAEpC,QAAQ,GAAG,IAAI,eAAe,CAAC,KAAK,CAAC,CAAA;IAErC,aAAa,CAAC,EAAiB;QACpC,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAA;QACxC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAA;QACzC,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAA;QACjD,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAA;QACjD,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAA;QAE7C,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC;gBACf,KAAK,GAAG;oBACN,EAAE,CAAC,cAAc,EAAE,CAAA;oBACnB,YAAY;wBACV,IAAI,CAAC,SAAS,CAAC,QAAQ,CACrB,eAAe,CAAC,QAAQ,CAAC,YAAY,CAAC;4BACpC,CAAC,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,YAAY,CAAC;4BACnD,CAAC,CAAC,CAAC,GAAG,eAAe,EAAE,YAAY,CAAC,CACvC,CAAA;oBACH,MAAK;gBACP,KAAK,GAAG;oBACN,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;oBAC5E,MAAK;gBACP,KAAK,GAAG;oBACN,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;oBAChC,MAAK;gBACP,KAAK,GAAG;oBACN,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;oBAC3B,MAAK;gBACP,KAAK,QAAQ;oBACX,YAAY;wBACV,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC;4BAC/C,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,YAAY,CAAC,CAAC,CAAC;4BAC3F,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;oBAC5E,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;oBAErG,MAAK;gBACP,KAAK,SAAS;oBACZ,EAAE,CAAC,cAAc,EAAE,CAAA;oBACnB,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;oBAClG,MAAK;gBACP,KAAK,WAAW;oBACd,EAAE,CAAC,cAAc,EAAE,CAAA;oBACnB,IAAI,CAAC,YAAY,CAAC,QAAQ,CACxB,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CACxF,CAAA;oBACD,MAAK;gBACP,KAAK,MAAM,CAAC,CAAC,CAAC;oBACZ,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;oBACtC,MAAK;gBACP,CAAC;gBACD,KAAK,KAAK,CAAC,CAAC,CAAC;oBACX,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAA;oBACvD,MAAK;gBACP,CAAC;gBACD,KAAK,KAAK,CAAC,CAAC,CAAC;oBACX,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;oBACjC,MAAK;gBACP,CAAC;gBACD,KAAK,QAAQ,CAAC,CAAC,CAAC;oBACd,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;oBAC5B,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;oBAC3B,MAAK;gBACP,CAAC;gBACD;oBACE,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;wBACpD,MAAM,mBAAmB,GAAG,UAAU,GAAG,EAAE,CAAC,GAAG,CAAA;wBAC/C,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAClC,CAAC,CAAC,EAAE,EAAE,CACJ,IAAI,CAAC,OAAO,CAAC,WAAW;4BACvB,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAS,EAAE,QAAQ,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,CACnF,CAAA;wBACD,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAA;wBAC3C,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAA;oBAC/C,CAAC;YACL,CAAC;QACH,CAAC;IACH,CAAC;IAEM,cAAc,CAAC,KAAQ,EAAE,EAAc;QAC5C,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,KAAK,CAAC,CAAA;QAChC,MAAM,qBAAqB,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAA;QACvD,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAA;QAChD,IAAI,EAAE,CAAC,OAAO,EAAE,CAAC;YACf,IAAI,qBAAqB,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC1C,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAA;YAC3E,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,GAAG,qBAAqB,EAAE,KAAK,CAAC,CAAC,CAAA;YAC5D,CAAC;QACH,CAAC;QACD,IAAI,EAAE,CAAC,QAAQ,EAAE,CAAC;YAChB,MAAM,gBAAgB,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,WAAW,CAAC,CAAA;YACzF,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAA;YAC7E,MAAM,SAAS,GAAG,CAAC,GAAG,qBAAqB,CAAC,CAAA;YAC5C,IAAI,gBAAgB,GAAG,UAAU,EAAE,CAAC;gBAClC,KAAK,IAAI,CAAC,GAAG,UAAU,EAAE,CAAC,IAAI,gBAAgB,EAAE,CAAC,EAAE,EAAE,CAAC;oBACpD,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;gBACjD,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,KAAK,IAAI,CAAC,GAAG,gBAAgB,EAAE,CAAC,IAAI,UAAU,EAAE,CAAC,EAAE,EAAE,CAAC;oBACpD,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;gBACjD,CAAC;YACH,CAAC;YACD,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;QACpC,CAAC;QACD,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IACnC,CAAC;IAED,YAAoB,OAAoC;QAApC,YAAO,GAAP,OAAO,CAA6B;QACtD,IAAI,CAAC,aAAa,GAAG,IAAI,eAAe,CAAiC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAA;QAEtG,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU;YACpC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;YACxD,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAA;QAEvB,IAAI,CAAC,UAAU,GAAG,KAAK,EAAE,GAAG,EAAE,EAAE;YAC9B,MAAM,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAA;YAC7B,IAAI,CAAC;gBACH,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;gBAC9B,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;gBAC7B,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,GAAG,CAAC,CAAA;gBAChC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;gBAC1B,OAAO,MAAM,CAAA;YACf,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;gBAC1B,MAAM,KAAK,CAAA;YACb,CAAC;oBAAS,CAAC;gBACT,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAA;gBACvB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;YAChC,CAAC;QACH,CAAC,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAA;QAC3D,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC,CAAA;IAChD,CAAC;IAEM,KAAK,CAAC,oBAAoB,CAAC,KAAQ;QACxC,IAAI,CAAC,OAAO,CAAC,gBAAgB,EAAE,CAAC,KAAK,CAAC,CAAA;IACxC,CAAC;CACF"}
+{"version":3,"file":"collection-service.js","sourceRoot":"","sources":["../../src/services/collection-service.ts"],"names":[],"mappings":"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"}

package/esm/services/collection-service.spec.js

@@ -5,11 +5,8 @@ const testEntries = [{ foo: 1 }, { foo: 2 }, { foo: 3 }];
 describe('CollectionService', () => {
     describe('Selection', () => {
         it('Should add and remove selection', async () => {
-            await usingAsync(new CollectionService({
-                defaultSettings: {},
-                loader: async () => ({ count: 3, entries: testEntries }),
-            }), async (collectionService) => {
-                await collectionService.getEntries({});
+            await usingAsync(new CollectionService({}), async (collectionService) => {
+                collectionService.data.setValue({ count: 3, entries: testEntries });
                 testEntries.forEach((entry) => {
                     expect(collectionService.isSelected(entry)).toBe(false);
                 });

package/esm/services/collection-service.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"collection-service.spec.js","sourceRoot":"","sources":["../../src/services/collection-service.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAE3D,MAAM,WAAW,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAA;AAExD,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;QACzB,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;YAC/C,MAAM,UAAU,CACd,IAAI,iBAAiB,CAAC;gBACpB,eAAe,EAAE,EAAE;gBACnB,MAAM,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC;aACzD,CAAC,EACF,KAAK,EAAE,iBAAiB,EAAE,EAAE;gBAC1B,MAAM,iBAAiB,CAAC,UAAU,CAAC,EAAE,CAAC,CAAA;gBACtC,WAAW,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;oBAC5B,MAAM,CAAC,iBAAiB,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;gBACzD,CAAC,CAAC,CAAA;gBAEF,iBAAiB,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAA;gBAEhD,MAAM,CAAC,iBAAiB,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;gBAC/D,MAAM,CAAC,iBAAiB,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;gBAChE,MAAM,CAAC,iBAAiB,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;gBAEhE,iBAAiB,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAA;gBAErD,MAAM,CAAC,iBAAiB,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;gBAEhE,iBAAiB,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAA;gBACjD,MAAM,CAAC,iBAAiB,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACjE,CAAC,CACF,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
+{"version":3,"file":"collection-service.spec.js","sourceRoot":"","sources":["../../src/services/collection-service.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAE3D,MAAM,WAAW,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAA;AAExD,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;QACzB,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;YAC/C,MAAM,UAAU,CAAC,IAAI,iBAAiB,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE;gBACtE,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC,CAAA;gBACnE,WAAW,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;oBAC5B,MAAM,CAAC,iBAAiB,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;gBACzD,CAAC,CAAC,CAAA;gBAEF,iBAAiB,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAA;gBAEhD,MAAM,CAAC,iBAAiB,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;gBAC/D,MAAM,CAAC,iBAAiB,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;gBAChE,MAAM,CAAC,iBAAiB,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;gBAEhE,iBAAiB,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAA;gBAErD,MAAM,CAAC,iBAAiB,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;gBAEhE,iBAAiB,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAA;gBACjD,MAAM,CAAC,iBAAiB,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACjE,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@furystack/shades-common-components",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "description": "",
   "type": "module",
   "scripts": {

package/src/components/data-grid/body.tsx

@@ -2,7 +2,6 @@ import type { CollectionService } from '../../services/collection-service.js'
 import type { ChildrenList } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
 import type { DataRowCells } from './data-grid.js'
-import { Loader } from '../loader.js'
 import { DataGridRow } from './data-grid-row.js'
 
 export interface DataGridBodyProps<T> {
@@ -29,16 +28,6 @@ export const DataGridBody: <T>(props: DataGridBodyProps<T>, children: ChildrenLi
   },
   render: ({ props, useObservable }) => {
     const [data] = useObservable('data', props.service.data)
-    const [isLoading] = useObservable('isLoading', props.service.isLoading)
-
-    if (isLoading) {
-      return (
-        <div style={{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center', width: '100%' }}>
-          {/* TODO: Skeleton */}
-          {props.loaderComponent || <Loader style={{ height: '128px', width: '128px' }} />}
-        </div>
-      )
-    }
 
     if (!data?.entries?.length) {
       return props.emptyComponent || <div> - No Data - </div>

package/src/components/data-grid/data-grid-row.tsx

@@ -39,52 +39,55 @@ export const DataGridRow: <T>(props: DataGridRowProps<T>, children: ChildrenList
       }
     }
 
-    // TODO: getLast is elmiminated, do we need it?
-    const [selection] = useObservable('isSelected', service.selection, { onChange: attachSelectedStyles })
+    const attachFocusedStyle = (newEntry?: any) => {
+      if (newEntry === props.entry) {
+        attachStyles(element, {
+          style: props.focusedRowStyle || {
+            boxShadow: `0 0 50px 1px rgba(255,255,255,0.2) inset, 0 0 35px 1px var(--shades-theme-palette-primary-main) inset, 2px 0px 5px 0px rgba(0,0,0,0.3)`,
+            transition: 'box-shadow 0.1s ease-in-out',
+            fontWeight: 'bolder',
+          },
+        })
 
-    attachSelectedStyles(selection)
+        element.classList.add('focused')
 
-    // TODO: getLast is elmiminated, do we need it?
-    const [focus] = useObservable('focus', service.focusedEntry, {
-      onChange: (newEntry) => {
-        if (newEntry === props.entry) {
-          attachStyles(element, {
-            style: props.focusedRowStyle || {
-              boxShadow: `0 0 0 1px ${theme.palette.primary.main}`,
-              fontWeight: 'bolder',
-            },
-          })
+        const headerHeight = element.closest('table')?.querySelector('th')?.getBoundingClientRect().height || 42
 
-          element.classList.add('focused')
+        const parent = element.closest('.shade-grid-wrapper') as HTMLElement
+        const maxTop = element.offsetTop - headerHeight
+        const currentTop = parent.scrollTop
+        if (maxTop < currentTop) {
+          parent.scrollTo({ top: maxTop, behavior: 'smooth' })
+        }
 
-          const headerHeight = element.closest('table')?.querySelector('th')?.getBoundingClientRect().height || 42
+        const footerHeight =
+          element.closest('shade-data-grid')?.querySelector('shade-data-grid-footer')?.getBoundingClientRect().height ||
+          42
+        const visibleMaxTop = parent.clientHeight - footerHeight
+        const desiredMaxTop = element.offsetTop + element.clientHeight
+        if (desiredMaxTop > visibleMaxTop) {
+          parent.scrollTo({ top: desiredMaxTop - visibleMaxTop, behavior: 'smooth' })
+        }
+      } else {
+        element.classList.remove('focused')
+        attachStyles(element, {
+          style: props.unfocusedRowStyle || {
+            boxShadow: 'none',
+            fontWeight: 'inherit',
+          },
+        })
+      }
+    }
 
-          const parent = element.closest('.shade-grid-wrapper') as HTMLElement
-          const maxTop = element.offsetTop - headerHeight
-          const currentTop = parent.scrollTop
-          if (maxTop < currentTop) {
-            parent.scrollTo({ top: maxTop, behavior: 'smooth' })
-          }
+    const [selection] = useObservable('isSelected', service.selection, {
+      onChange: attachSelectedStyles,
+    })
+    attachSelectedStyles(selection)
 
-          const footerHeight =
-            element.closest('shade-data-grid')?.querySelector('shade-data-grid-footer')?.getBoundingClientRect()
-              .height || 42
-          const visibleMaxTop = parent.clientHeight - footerHeight
-          const desiredMaxTop = element.offsetTop + element.clientHeight
-          if (desiredMaxTop > visibleMaxTop) {
-            parent.scrollTo({ top: desiredMaxTop - visibleMaxTop, behavior: 'smooth' })
-          }
-        } else {
-          element.classList.remove('focused')
-          attachStyles(element, {
-            style: props.unfocusedRowStyle || {
-              boxShadow: 'none',
-              fontWeight: 'inherit',
-            },
-          })
-        }
-      },
+    const [focus] = useObservable('focus', service.focusedEntry, {
+      onChange: attachFocusedStyle,
     })
+    attachFocusedStyle(focus)
 
     element.style.display = 'table-row'
     element.style.cursor = 'default'

package/src/components/data-grid/data-grid.tsx

@@ -7,6 +7,8 @@ import { DataGridBody } from './body.js'
 import { DataGridFooter } from './footer.js'
 import { ThemeProviderService } from '../../services/theme-provider-service.js'
 import { ClickAwayService } from '../../services/click-away-service.js'
+import type { FindOptions } from '@furystack/core'
+import type { ObservableValue } from '@furystack/utils'
 
 export type DataHeaderCells<T> = {
   [TKey in keyof T | 'default']?: (name: keyof T) => JSX.Element
@@ -27,7 +29,12 @@ export interface DataGridProps<T> {
   /**
    * A collection service to use for data source
    */
-  service: CollectionService<T>
+  collectionService: CollectionService<T>
+  /**
+   * The query settings to use for the data source
+   */
+  findOptions: ObservableValue<FindOptions<T, Array<keyof T>>>
+
   /**
    * A list of custom header components to use
    */
@@ -68,12 +75,10 @@ export interface DataGridProps<T> {
   loaderComponent?: JSX.Element
 }
 
-export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => JSX.Element<any> = Shade<
-  DataGridProps<any>
->({
+export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => JSX.Element<any> = Shade({
   shadowDomName: 'shade-data-grid',
   constructed: ({ props }) => {
-    const listener = (ev: KeyboardEvent) => props.service.handleKeyDown(ev)
+    const listener = (ev: KeyboardEvent) => props.collectionService.handleKeyDown(ev)
     window.addEventListener('keydown', listener)
     return () => window.removeEventListener('keydown', listener)
   },
@@ -85,12 +90,13 @@ export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => J
       'clickAway',
       () =>
         new ClickAwayService(element, () => {
-          props.service.hasFocus.setValue(false)
+          props.collectionService.hasFocus.setValue(false)
         }),
     )
 
     const headerStyle: Partial<CSSStyleDeclaration> = {
       backdropFilter: 'blur(12px) saturate(180%)',
+      background: 'rgba(128,128,128,0.3)',
       color: theme.text.secondary,
       height: '38px',
       alignItems: 'center',
@@ -114,18 +120,24 @@ export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => J
           zIndex: '1',
         }}
         onclick={() => {
-          props.service.hasFocus.setValue(true)
+          props.collectionService.hasFocus.setValue(true)
         }}
         ariaMultiSelectable="true"
       >
         <table style={{ width: '100%', maxHeight: 'calc(100% - 4em)', position: 'relative' }}>
           <thead>
             <tr>
-              {props.columns.map((column: any) => {
+              {props.columns.map((column) => {
                 return (
                   <th style={headerStyle}>
                     {props.headerComponents?.[column]?.(column) || props.headerComponents?.default?.(column) || (
-                      <DataGridHeader<any, typeof column> field={column} collectionService={props.service} />
+                      <DataGridHeader<
+                        ReturnType<typeof props.collectionService.data.getValue>['entries'][number],
+                        typeof column
+                      >
+                        field={column}
+                        findOptions={props.findOptions}
+                      />
                     )}
                   </th>
                 )
@@ -134,10 +146,10 @@ export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => J
           </thead>
           <DataGridBody
             columns={props.columns}
-            service={props.service}
+            service={props.collectionService}
             rowComponents={props.rowComponents}
-            onRowClick={(entry, ev) => props.service.handleRowClick(entry, ev)}
-            onRowDoubleClick={(entry) => props.service.handleRowDoubleClick(entry)}
+            onRowClick={(entry, ev) => props.collectionService.handleRowClick(entry, ev)}
+            onRowDoubleClick={(entry) => props.collectionService.handleRowDoubleClick(entry)}
             style={props.styles?.cell}
             focusedRowStyle={props.focusedRowStyle}
             selectedRowStyle={props.selectedRowStyle}
@@ -147,7 +159,7 @@ export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => J
             loaderComponent={props.loaderComponent}
           />
         </table>
-        <DataGridFooter service={props.service} />
+        <DataGridFooter service={props.collectionService} findOptions={props.findOptions} />
       </div>
     )
   },

package/src/components/data-grid/footer.tsx

@@ -1,20 +1,29 @@
 import { Shade, createComponent } from '@furystack/shades'
 import { ThemeProviderService } from '../../services/theme-provider-service.js'
 import type { CollectionService } from '../../services/collection-service.js'
+import type { FindOptions } from '@furystack/core'
+import type { ObservableValue } from '@furystack/utils'
 
 export const dataGridItemsPerPage = [10, 20, 25, 50, 100, Infinity]
 
-export const DataGridFooter = Shade<{ service: CollectionService<any> }>({
+export const DataGridFooter = Shade<{
+  service: CollectionService<any>
+  findOptions: ObservableValue<FindOptions<any, any[]>>
+}>({
   shadowDomName: 'shade-data-grid-footer',
   render: ({ props, injector, useObservable }) => {
     const { theme } = injector.getInstance(ThemeProviderService)
 
-    const [currentData] = useObservable('dataUpdater', props.service.data)
+    const { service, findOptions } = props
+    const [currentData] = useObservable('dataUpdater', service.data)
+    const [currentOptions, setCurrentOptions] = useObservable('optionsUpdater', findOptions, {
+      filter: (newValue, oldValue) => {
+        return newValue.top !== oldValue.top || newValue.skip !== oldValue.skip
+      },
+    })
 
-    const [currentQuerySettings] = useObservable('querySettings', props.service.querySettings)
-
-    const top = currentQuerySettings.top || Infinity
-    const skip = currentQuerySettings.skip || 0
+    const top = currentOptions.top || Infinity
+    const skip = currentOptions.skip || 0
     const currentPage = Math.ceil(skip) / (top || 1)
     const currentEntriesPerPage = top
 
@@ -39,13 +48,10 @@ export const DataGridFooter = Shade<{ service: CollectionService<any> }>({
               style={{ margin: '0 1em' }}
               onchange={(ev) => {
                 const value = parseInt((ev.target as any).value, 10)
-                const currentQuery = props.service.querySettings.getValue()
-                props.service.querySettings.setValue({ ...currentQuery, skip: (currentQuery.top || 0) * value })
+                setCurrentOptions({ ...currentOptions, skip: (currentOptions.top || 0) * value })
               }}
             >
-              {[
-                ...new Array(Math.ceil(currentData.count / (props.service.querySettings.getValue().top || Infinity))),
-              ].map((_val, index) => (
+              {[...new Array(Math.ceil(currentData.count / (currentOptions.top || Infinity)))].map((_val, index) => (
                 <option value={index.toString()} selected={currentPage === index}>
                   {(index + 1).toString()}
                 </option>
@@ -59,8 +65,8 @@ export const DataGridFooter = Shade<{ service: CollectionService<any> }>({
             style={{ margin: '0 1em' }}
             onchange={(ev) => {
               const value = parseInt((ev.currentTarget as any).value as string, 10)
-              props.service.querySettings.setValue({
-                ...currentQuerySettings,
+              setCurrentOptions({
+                ...currentOptions,
                 top: value,
                 skip: currentPage * value,
               })

package/src/components/data-grid/header.tsx

@@ -1,33 +1,33 @@
-import type { FindOptions } from '@furystack/core'
+import type { FilterType, FindOptions } from '@furystack/core'
 import type { ChildrenList } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
-import type { CollectionService } from '../../services/collection-service.js'
 import { Input } from '../inputs/input.js'
 import { Form } from '../form.js'
 import { Button } from '../button.js'
-import { ObservableValue } from '@furystack/utils'
+import { ObservableValue, sleepAsync } from '@furystack/utils'
 import { collapse, expand } from '../animations.js'
 
 export interface DataGridHeaderProps<T, K extends keyof T> {
-  collectionService: CollectionService<T>
   field: K
+  findOptions: ObservableValue<FindOptions<T, K[]>>
 }
 
-export interface DataGridHeaderState<T> {
-  querySettings: FindOptions<T, any>
+export interface DataGridHeaderState<T, K extends keyof T> {
+  findOptions: FindOptions<T, K[]>
   isSearchOpened: boolean
   updateSearchValue: (value: string) => void
 }
 
-export const OrderButton = Shade<{ collectionService: CollectionService<any>; field: string }>({
+export const OrderButton = Shade<{
+  field: string
+  findOptions: ObservableValue<FindOptions<any, any[]>>
+}>({
   shadowDomName: 'data-grid-order-button',
   render: ({ props, useObservable }) => {
-    const [currentQuerySettings, setQuerySettings] = useObservable(
-      'currentQuerySettings',
-      props.collectionService.querySettings,
-    )
-    const currentOrder = Object.keys(currentQuerySettings.order || {})[0]
-    const currentOrderDirection = Object.values(currentQuerySettings.order || {})[0]
+    const [findOptions, onFindOptionsChange] = useObservable('findOptions', props.findOptions, {})
+
+    const currentOrder = Object.keys(findOptions.order || {})[0]
+    const currentOrderDirection = Object.values(findOptions.order || {})[0]
     return (
       <Button
         title="Change order"
@@ -46,8 +46,8 @@ export const OrderButton = Shade<{ collectionService: CollectionService<any>; fi
             newDirection = currentOrderDirection === 'ASC' ? 'DESC' : 'ASC'
           }
           newOrder[props.field] = newDirection
-          setQuerySettings({
-            ...currentQuerySettings,
+          onFindOptionsChange({
+            ...findOptions,
             order: newOrder,
           })
         }}
@@ -58,22 +58,21 @@ export const OrderButton = Shade<{ collectionService: CollectionService<any>; fi
   },
 })
 
-const SearchButton = Shade<{ service: CollectionService<any>; fieldName: string; onclick: () => void }>({
+const SearchButton = Shade<{
+  fieldName: string
+  onclick: () => void
+  findOptions: ObservableValue<FindOptions<any, any[]>>
+}>({
   shadowDomName: 'data-grid-search-button',
-  render: ({ props, useObservable, element }) => {
-    const [queryState] = useObservable('currentFilterState', props.service.querySettings, {
-      onChange: (currentQueryState) => {
-        const currentValue = (currentQueryState.filter?.[props.fieldName] as any)?.$regex || ''
-
-        const button = element.querySelector('button') as HTMLInputElement
-        button.innerHTML = currentValue ? '🔍' : '🔎'
-        button.style.textShadow = currentValue
-          ? '1px 1px 20px rgba(235,225,45,0.9), 1px 1px 12px rgba(235,225,45,0.9), 0px 0px 3px  rgba(255,200,145,0.6)'
-          : 'none'
+  render: ({ props, useObservable }) => {
+    const [findOptions] = useObservable('currentValue', props.findOptions, {
+      filter: (newValue) => {
+        return !!newValue.filter?.[props.fieldName]
       },
     })
 
-    const filterValue = (queryState.filter as any)?.[props.fieldName]?.$regex || ''
+    const filterValue =
+      (findOptions.filter?.[props.fieldName] as FilterType<{ [K in typeof props.fieldName]: string }>)?.$regex || ''
 
     return (
       <Button
@@ -95,20 +94,23 @@ const SearchButton = Shade<{ service: CollectionService<any>; fieldName: string;
 const SearchForm = Shade<{
   onSubmit: (newValue: string) => void
   onClear: () => void
-  service: CollectionService<any>
   fieldName: string
+  findOptions: ObservableValue<FindOptions<any, any[]>>
 }>({
   shadowDomName: 'data-grid-search-form',
-  render: ({ props, useObservable, element }) => {
+  render: ({ props, useObservable }) => {
     type SearchSubmitType = { searchValue: string }
 
-    const [queryState] = useObservable('currentFilterState', props.service.querySettings, {
-      onChange: (currentQueryState) => {
-        const currentValue = (currentQueryState.filter?.[props.fieldName] as any)?.$regex || ''
-        ;(element.querySelector('input') as HTMLInputElement).value = currentValue
+    const [findOptions] = useObservable('currentValue', props.findOptions, {
+      filter: (newValue, lastValue) => {
+        const newFilter = newValue.filter?.[props.fieldName] as FilterType<{ [K in typeof props.fieldName]: string }>
+        const lastFilter = lastValue.filter?.[props.fieldName] as FilterType<{ [K in typeof props.fieldName]: string }>
+        return newFilter?.$regex !== lastFilter?.$regex
       },
     })
 
+    const currentValue = (findOptions.filter?.[props.fieldName] as any)?.$regex || ''
+
     return (
       <Form<SearchSubmitType>
         className="search-form"
@@ -131,7 +133,7 @@ const SearchForm = Shade<{
           autofocus
           labelTitle={`${props.fieldName}`}
           name="searchValue"
-          value={(queryState.filter?.[props.fieldName] as any)?.$regex || ''}
+          value={currentValue}
           labelProps={{
             style: { padding: '0px 2em' },
           }}
@@ -140,7 +142,9 @@ const SearchForm = Shade<{
           <Button
             type="reset"
             style={{ padding: '4px', margin: '0' }}
-            onclick={() => {
+            onclick={(ev) => {
+              ev.preventDefault()
+              ev.stopPropagation()
               props.onClear()
             }}
           >
@@ -158,6 +162,7 @@ const SearchForm = Shade<{
 export const DataGridHeader: <T, K extends keyof T>(
   props: DataGridHeaderProps<T, K>,
   children: ChildrenList,
+  findOptions: ObservableValue<FindOptions<T, Array<keyof T>>>,
 ) => JSX.Element<any> = Shade<DataGridHeaderProps<any, any>>({
   shadowDomName: 'data-grid-header',
   render: ({ props, element, useObservable }) => {
@@ -170,25 +175,34 @@ export const DataGridHeader: <T, K extends keyof T>(
           expand(headerContent)
         } else {
           searchForm.style.display = 'flex'
-          expand(searchForm).then(() => searchForm.querySelector('input')?.focus())
+          expand(searchForm).then(async () => {
+            await sleepAsync(100)
+            searchForm.querySelector('input')?.focus()
+          })
           collapse(headerContent)
         }
       },
     })
+
+    const [findOptions, setFindOptions] = useObservable('findOptions', props.findOptions, {
+      filter: (newValue, oldValue) => {
+        return newValue.filter?.[props.field] !== oldValue.filter?.[props.field]
+      },
+    })
+
     const updateSearchValue = (value?: string) => {
-      const currentSettings = props.collectionService.querySettings.getValue()
       if (value) {
         const newSettings: FindOptions<unknown, any> = {
-          ...currentSettings,
+          ...findOptions,
           filter: {
-            ...currentSettings.filter,
+            ...findOptions.filter,
             [props.field]: { $regex: value },
           },
         }
-        props.collectionService.querySettings.setValue(newSettings)
+        setFindOptions(newSettings)
       } else {
-        const { [props.field]: _, ...newFilter } = currentSettings.filter || {}
-        props.collectionService.querySettings.setValue({ ...currentSettings, filter: newFilter })
+        const { [props.field]: _, ...newFilter } = findOptions.filter || {}
+        setFindOptions({ ...findOptions, filter: newFilter })
       }
 
       setIsSearchOpened(false)
@@ -199,8 +213,8 @@ export const DataGridHeader: <T, K extends keyof T>(
         <SearchForm
           onSubmit={updateSearchValue}
           onClear={updateSearchValue}
-          service={props.collectionService}
           fieldName={props.field}
+          findOptions={props.findOptions}
         />
         <div
           className="header-content"
@@ -223,11 +237,11 @@ export const DataGridHeader: <T, K extends keyof T>(
               onclick={() => {
                 setIsSearchOpened(true)
               }}
-              service={props.collectionService}
+              findOptions={props.findOptions}
               fieldName={props.field}
             />
 
-            <OrderButton collectionService={props.collectionService} field={props.field} />
+            <OrderButton field={props.field} findOptions={props.findOptions} />
           </div>
         </div>
       </>