@furystack/shades-common-components 10.0.35 → 12.0.0

package/esm/components/data-grid/footer.js

@@ -1,10 +1,25 @@
 import { Shade, createComponent } from '@furystack/shades';
-import { ThemeProviderService } from '../../services/theme-provider-service.js';
+import { cssVariableTheme } from '../../services/css-variable-theme.js';
 export const dataGridItemsPerPage = [10, 20, 25, 50, 100, Infinity];
 export const DataGridFooter = Shade({
     shadowDomName: 'shade-data-grid-footer',
-    render: ({ props, injector, useObservable }) => {
-        const { theme } = injector.getInstance(ThemeProviderService);
+    css: {
+        display: 'block',
+        '& .pager': {
+            backdropFilter: 'blur(10px)',
+            color: cssVariableTheme.text.secondary,
+            position: 'sticky',
+            bottom: '0',
+            display: 'flex',
+            justifyContent: 'flex-end',
+            padding: '1em',
+            alignItems: 'center',
+        },
+        '& select': {
+            margin: '0 1em',
+        },
+    },
+    render: ({ props, useObservable }) => {
         const { service, findOptions } = props;
         const [currentData] = useObservable('dataUpdater', service.data);
         const [currentOptions, setCurrentOptions] = useObservable('optionsUpdater', findOptions, {
@@ -19,25 +34,16 @@ export const DataGridFooter = Shade({
         const pages = new Array(Math.ceil(currentData.count / (currentOptions.top || Infinity)))
             .fill(0)
             .map((_, index) => index);
-        return (createComponent("div", { className: "pager", style: {
-                backdropFilter: 'blur(10px)',
-                color: theme.text.secondary,
-                position: 'sticky',
-                bottom: '0',
-                display: 'flex',
-                justifyContent: 'flex-end',
-                padding: '1em',
-                alignItems: 'center',
-            } },
+        return (createComponent("div", { className: "pager" },
             currentEntriesPerPage !== Infinity && (createComponent("div", null,
                 "Goto page",
-                createComponent("select", { style: { margin: '0 1em' }, onchange: (ev) => {
+                createComponent("select", { onchange: (ev) => {
                         const value = parseInt(ev.target.value, 10);
                         setCurrentOptions({ ...currentOptions, skip: (currentOptions.top || 0) * value });
                     } }, pages.map((index) => (createComponent("option", { value: index.toString(), selected: currentPage === index }, (index + 1).toString())))))),
             createComponent("div", null,
                 "Show",
-                createComponent("select", { style: { margin: '0 1em' }, onchange: (ev) => {
+                createComponent("select", { onchange: (ev) => {
                         const value = parseInt(ev.currentTarget.value, 10);
                         setCurrentOptions({
                             ...currentOptions,

package/esm/components/data-grid/footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"footer.js","sourceRoot":"","sources":["../../../src/components/data-grid/footer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAG1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAA;AAE/E,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAA;AAEnE,MAAM,CAAC,MAAM,cAAc,GAGP,KAAK,CAAC;IACxB,aAAa,EAAE,wBAAwB;IACvC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,EAAE;QAC7C,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,WAAW,CAAC,oBAAoB,CAAC,CAAA;QAE5D,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,KAAK,CAAA;QACtC,MAAM,CAAC,WAAW,CAAC,GAAG,aAAa,CAAC,aAAa,EAAE,OAAO,CAAC,IAAI,CAAC,CAAA;QAChE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,aAAa,CAAC,gBAAgB,EAAE,WAAW,EAAE;YACvF,MAAM,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,EAAE;gBAC7B,OAAO,QAAQ,CAAC,GAAG,KAAK,QAAQ,CAAC,GAAG,IAAI,QAAQ,CAAC,IAAI,KAAK,QAAQ,CAAC,IAAI,CAAA;YACzE,CAAC;SACF,CAAC,CAAA;QAEF,MAAM,GAAG,GAAG,cAAc,CAAC,GAAG,IAAI,QAAQ,CAAA;QAC1C,MAAM,IAAI,GAAG,cAAc,CAAC,IAAI,IAAI,CAAC,CAAA;QACrC,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC,CAAA;QAChD,MAAM,qBAAqB,GAAG,GAAG,CAAA;QAEjC,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,cAAc,CAAC,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC;aACrF,IAAI,CAAC,CAAC,CAAC;aACP,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAA;QAE3B,OAAO,CACL,yBACE,SAAS,EAAC,OAAO,EACjB,KAAK,EAAE;gBACL,cAAc,EAAE,YAAY;gBAC5B,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS;gBAC3B,QAAQ,EAAE,QAAQ;gBAClB,MAAM,EAAE,GAAG;gBACX,OAAO,EAAE,MAAM;gBACf,cAAc,EAAE,UAAU;gBAC1B,OAAO,EAAE,KAAK;gBACd,UAAU,EAAE,QAAQ;aACrB;YAEA,qBAAqB,KAAK,QAAQ,IAAI,CACrC;;gBAEE,4BACE,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAC1B,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE;wBACf,MAAM,KAAK,GAAG,QAAQ,CAAE,EAAE,CAAC,MAA2B,CAAC,KAAK,EAAE,EAAE,CAAC,CAAA;wBACjE,iBAAiB,CAAC,EAAE,GAAG,cAAc,EAAE,IAAI,EAAE,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,CAAA;oBACnF,CAAC,IAEA,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACpB,4BAAQ,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,WAAW,KAAK,KAAK,IAC7D,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAChB,CACV,CAAC,CACK,CACL,CACP;YACD;;gBAEE,4BACE,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAC1B,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE;wBACf,MAAM,KAAK,GAAG,QAAQ,CAAE,EAAE,CAAC,aAAkC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAA;wBACxE,iBAAiB,CAAC;4BAChB,GAAG,cAAc;4BACjB,GAAG,EAAE,KAAK;4BACV,IAAI,EAAE,WAAW,GAAG,KAAK;yBAC1B,CAAC,CAAA;oBACJ,CAAC,IAEA,oBAAoB,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAChC,4BAAQ,KAAK,EAAE,EAAE,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,qBAAqB,IACjE,EAAE,CAAC,QAAQ,EAAE,CACP,CACV,CAAC,CACK;iCAEL,CACF,CACP,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}
+{"version":3,"file":"footer.js","sourceRoot":"","sources":["../../../src/components/data-grid/footer.tsx"],"names":[],"mappings":"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"}

package/esm/components/data-grid/footer.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=footer.spec.d.ts.map

package/esm/components/data-grid/footer.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.spec.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/footer.spec.tsx"],"names":[],"mappings":""}

package/esm/components/data-grid/footer.spec.js

@@ -0,0 +1,276 @@
+import { Injector } from '@furystack/inject';
+import { createComponent, initializeShadeRoot } from '@furystack/shades';
+import { ObservableValue, sleepAsync, usingAsync } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { CollectionService } from '../../services/collection-service.js';
+import { DataGridFooter, dataGridItemsPerPage } from './footer.js';
+describe('DataGridFooter', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    const createService = (entries = [], count) => {
+        const service = new CollectionService();
+        service.data.setValue({ entries, count: count ?? entries.length });
+        return service;
+    };
+    const createFindOptions = (top = 10, skip = 0) => {
+        return new ObservableValue({ top, skip });
+    };
+    it('should render with custom element', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const service = createService();
+            const findOptions = createFindOptions();
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(DataGridFooter, { service: service, findOptions: findOptions }),
+            });
+            await sleepAsync(50);
+            const footer = document.querySelector('shade-data-grid-footer');
+            expect(footer).not.toBeNull();
+        });
+    });
+    it('should render items per page select', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const service = createService();
+            const findOptions = createFindOptions();
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(DataGridFooter, { service: service, findOptions: findOptions }),
+            });
+            await sleepAsync(50);
+            const footer = document.querySelector('shade-data-grid-footer');
+            const selects = footer?.querySelectorAll('select');
+            expect(selects?.length).toBeGreaterThan(0);
+        });
+    });
+    it('should render all items per page options', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const service = createService();
+            const findOptions = createFindOptions();
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(DataGridFooter, { service: service, findOptions: findOptions }),
+            });
+            await sleepAsync(50);
+            const footer = document.querySelector('shade-data-grid-footer');
+            const selects = Array.from(footer?.querySelectorAll('select') ?? []);
+            const itemsPerPageSelect = selects.find((s) => {
+                const parent = s.parentElement;
+                return parent?.textContent?.includes('items per page');
+            });
+            expect(itemsPerPageSelect).toBeDefined();
+            const options = itemsPerPageSelect?.querySelectorAll('option');
+            expect(options?.length).toBe(dataGridItemsPerPage.length);
+        });
+    });
+    it('should show page selector when pagination is enabled', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const service = createService([], 100);
+            const findOptions = createFindOptions(10, 0);
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(DataGridFooter, { service: service, findOptions: findOptions }),
+            });
+            await sleepAsync(50);
+            const footer = document.querySelector('shade-data-grid-footer');
+            const pager = footer?.querySelector('.pager');
+            expect(pager?.textContent).toContain('Goto page');
+        });
+    });
+    it('should hide page selector when showing all items (Infinity)', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const service = createService([], 50);
+            const findOptions = createFindOptions(Infinity, 0);
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(DataGridFooter, { service: service, findOptions: findOptions }),
+            });
+            await sleepAsync(50);
+            const footer = document.querySelector('shade-data-grid-footer');
+            const pager = footer?.querySelector('.pager');
+            expect(pager?.textContent).not.toContain('Goto page');
+        });
+    });
+    it('should render correct number of page options based on data count and items per page', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const service = createService([], 100);
+            const findOptions = createFindOptions(25, 0);
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(DataGridFooter, { service: service, findOptions: findOptions }),
+            });
+            await sleepAsync(50);
+            const footer = document.querySelector('shade-data-grid-footer');
+            const selects = Array.from(footer?.querySelectorAll('select') ?? []);
+            const pageSelect = selects.find((s) => {
+                const parent = s.parentElement;
+                return parent?.textContent?.includes('Goto page');
+            });
+            expect(pageSelect).toBeDefined();
+            const options = pageSelect?.querySelectorAll('option');
+            expect(options?.length).toBe(4);
+        });
+    });
+    it('should update findOptions when page is changed', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const service = createService([], 100);
+            const findOptions = createFindOptions(10, 0);
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(DataGridFooter, { service: service, findOptions: findOptions }),
+            });
+            await sleepAsync(50);
+            const footer = document.querySelector('shade-data-grid-footer');
+            const selects = Array.from(footer?.querySelectorAll('select') ?? []);
+            const pageSelect = selects.find((s) => {
+                const parent = s.parentElement;
+                return parent?.textContent?.includes('Goto page');
+            });
+            expect(pageSelect).toBeDefined();
+            pageSelect.value = '2';
+            pageSelect.dispatchEvent(new Event('change', { bubbles: true }));
+            await sleepAsync(50);
+            const updatedOptions = findOptions.getValue();
+            expect(updatedOptions.skip).toBe(20);
+        });
+    });
+    it('should update findOptions when items per page is changed', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const service = createService([], 100);
+            const findOptions = createFindOptions(10, 0);
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(DataGridFooter, { service: service, findOptions: findOptions }),
+            });
+            await sleepAsync(50);
+            const footer = document.querySelector('shade-data-grid-footer');
+            const selects = Array.from(footer?.querySelectorAll('select') ?? []);
+            const itemsPerPageSelect = selects.find((s) => {
+                const parent = s.parentElement;
+                return parent?.textContent?.includes('items per page');
+            });
+            expect(itemsPerPageSelect).toBeDefined();
+            itemsPerPageSelect.value = '25';
+            itemsPerPageSelect.dispatchEvent(new Event('change', { bubbles: true }));
+            await sleepAsync(50);
+            const updatedOptions = findOptions.getValue();
+            expect(updatedOptions.top).toBe(25);
+        });
+    });
+    it('should preserve current page position when changing items per page', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const service = createService([], 100);
+            const findOptions = createFindOptions(10, 20);
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(DataGridFooter, { service: service, findOptions: findOptions }),
+            });
+            await sleepAsync(50);
+            const footer = document.querySelector('shade-data-grid-footer');
+            const selects = Array.from(footer?.querySelectorAll('select') ?? []);
+            const itemsPerPageSelect = selects.find((s) => {
+                const parent = s.parentElement;
+                return parent?.textContent?.includes('items per page');
+            });
+            expect(itemsPerPageSelect).toBeDefined();
+            itemsPerPageSelect.value = '25';
+            itemsPerPageSelect.dispatchEvent(new Event('change', { bubbles: true }));
+            await sleepAsync(50);
+            const updatedOptions = findOptions.getValue();
+            expect(updatedOptions.top).toBe(25);
+            expect(updatedOptions.skip).toBe(50);
+        });
+    });
+    it('should select the correct current page in the page selector', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const service = createService([], 100);
+            const findOptions = createFindOptions(10, 30);
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(DataGridFooter, { service: service, findOptions: findOptions }),
+            });
+            await sleepAsync(50);
+            const footer = document.querySelector('shade-data-grid-footer');
+            const selects = Array.from(footer?.querySelectorAll('select') ?? []);
+            const pageSelect = selects.find((s) => {
+                const parent = s.parentElement;
+                return parent?.textContent?.includes('Goto page');
+            });
+            expect(pageSelect).toBeDefined();
+            expect(pageSelect?.value).toBe('3');
+        });
+    });
+    it('should select the correct items per page option', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const service = createService([], 100);
+            const findOptions = createFindOptions(25, 0);
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(DataGridFooter, { service: service, findOptions: findOptions }),
+            });
+            await sleepAsync(50);
+            const footer = document.querySelector('shade-data-grid-footer');
+            const selects = Array.from(footer?.querySelectorAll('select') ?? []);
+            const itemsPerPageSelect = selects.find((s) => {
+                const parent = s.parentElement;
+                return parent?.textContent?.includes('items per page');
+            });
+            expect(itemsPerPageSelect).toBeDefined();
+            expect(itemsPerPageSelect?.value).toBe('25');
+        });
+    });
+    it('should react to data count changes', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            const service = createService([], 50);
+            const findOptions = createFindOptions(10, 0);
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(DataGridFooter, { service: service, findOptions: findOptions }),
+            });
+            await sleepAsync(50);
+            let footer = document.querySelector('shade-data-grid-footer');
+            let selects = Array.from(footer?.querySelectorAll('select') ?? []);
+            let pageSelect = selects.find((s) => s.parentElement?.textContent?.includes('Goto page'));
+            let pageOptions = pageSelect?.querySelectorAll('option');
+            expect(pageOptions?.length).toBe(5);
+            service.data.setValue({ entries: [], count: 100 });
+            await sleepAsync(50);
+            footer = document.querySelector('shade-data-grid-footer');
+            selects = Array.from(footer?.querySelectorAll('select') ?? []);
+            pageSelect = selects.find((s) => s.parentElement?.textContent?.includes('Goto page'));
+            pageOptions = pageSelect?.querySelectorAll('option');
+            expect(pageOptions?.length).toBe(10);
+        });
+    });
+    it('should export dataGridItemsPerPage constant', () => {
+        expect(dataGridItemsPerPage).toEqual([10, 20, 25, 50, 100, Infinity]);
+    });
+});
+//# sourceMappingURL=footer.spec.js.map

package/esm/components/data-grid/footer.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.spec.js","sourceRoot":"","sources":["../../../src/components/data-grid/footer.spec.tsx"],"names":[],"mappings":"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"}

package/esm/components/data-grid/header.d.ts

@@ -1,6 +1,6 @@
 import type { FindOptions } from '@furystack/core';
 import type { ChildrenList } from '@furystack/shades';
-import { ObservableValue } from '@furystack/utils';
+import type { ObservableValue } from '@furystack/utils';
 export interface DataGridHeaderProps<T, Column extends string> {
     field: Column;
     findOptions: ObservableValue<FindOptions<T, Array<keyof T>>>;
@@ -15,6 +15,8 @@ export declare const OrderButton: (props: {
     findOptions: ObservableValue<FindOptions<any, any[]>>;
 } & Omit<Partial<HTMLElement>, "style"> & {
     style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
 }, children?: ChildrenList) => JSX.Element;
 export declare const DataGridHeader: <T, Column extends string>(props: DataGridHeaderProps<T, Column>, children: ChildrenList, findOptions: ObservableValue<FindOptions<T, Array<keyof T>>>) => JSX.Element<any>;
 //# sourceMappingURL=header.d.ts.map

package/esm/components/data-grid/header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,EAAE,eAAe,EAAc,MAAM,kBAAkB,CAAA;AAM9D,MAAM,WAAW,mBAAmB,CAAC,CAAC,EAAE,MAAM,SAAS,MAAM;IAC3D,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;CAC7D;AAED,MAAM,WAAW,mBAAmB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC;IACvD,WAAW,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;IAChC,cAAc,EAAE,OAAO,CAAA;IACvB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAC3C;AAED,eAAO,MAAM,WAAW;WACf,MAAM;iBACA,eAAe,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;;;0CAoCrD,CAAA;AAyGF,eAAO,MAAM,cAAc,EAAE,CAAC,CAAC,EAAE,MAAM,SAAS,MAAM,EACpD,KAAK,EAAE,mBAAmB,CAAC,CAAC,EAAE,MAAM,CAAC,EACrC,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KACzD,GAAG,CAAC,OAAO,CAAC,GAAG,CAgFlB,CAAA"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AASvD,MAAM,WAAW,mBAAmB,CAAC,CAAC,EAAE,MAAM,SAAS,MAAM;IAC3D,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;CAC7D;AAED,MAAM,WAAW,mBAAmB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC;IACvD,WAAW,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;IAChC,cAAc,EAAE,OAAO,CAAA;IACvB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAC3C;AAED,eAAO,MAAM,WAAW;WACf,MAAM;iBACA,eAAe,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;;;;;0CAwCrD,CAAA;AAkHF,eAAO,MAAM,cAAc,EAAE,CAAC,CAAC,EAAE,MAAM,SAAS,MAAM,EACpD,KAAK,EAAE,mBAAmB,CAAC,CAAC,EAAE,MAAM,CAAC,EACrC,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KACzD,GAAG,CAAC,OAAO,CAAC,GAAG,CA4FlB,CAAA"}

package/esm/components/data-grid/header.js

@@ -1,20 +1,21 @@
 import { Shade, createComponent } from '@furystack/shades';
-import { ObservableValue, sleepAsync } from '@furystack/utils';
+import { sleepAsync } from '@furystack/utils';
 import { collapse, expand } from '../animations.js';
 import { Button } from '../button.js';
 import { Form } from '../form.js';
+import { Icon } from '../icons/icon.js';
+import { arrowDown, arrowUp, arrowUpDown, close as closeIcon, search as searchIcon } from '../icons/icon-definitions.js';
 import { Input } from '../inputs/input.js';
 export const OrderButton = Shade({
     shadowDomName: 'data-grid-order-button',
+    css: {
+        display: 'inline-block',
+    },
     render: ({ props, useObservable }) => {
         const [findOptions, onFindOptionsChange] = useObservable('findOptions', props.findOptions, {});
         const currentOrder = Object.keys(findOptions.order || {})[0];
         const currentOrderDirection = Object.values(findOptions.order || {})[0];
-        return (createComponent(Button, { title: "Change order", style: {
-                padding: '4px',
-                margin: '0',
-                cursor: 'pointer',
-            }, color: currentOrder === props.field ? 'info' : undefined, onclick: (ev) => {
+        return (createComponent(Button, { title: "Change order", variant: "outlined", color: currentOrder === props.field ? 'info' : undefined, onclick: (ev) => {
                 ev.stopPropagation();
                 let newDirection = 'ASC';
                 const newOrder = {};
@@ -26,11 +27,15 @@ export const OrderButton = Shade({
                     ...findOptions,
                     order: newOrder,
                 });
-            } }, (currentOrder === props.field && (currentOrderDirection === 'ASC' ? '⬇' : '⬆')) || '↕'));
+            } }, (currentOrder === props.field &&
+            (currentOrderDirection === 'ASC' ? (createComponent(Icon, { icon: arrowDown, size: 16 })) : (createComponent(Icon, { icon: arrowUp, size: 16 })))) || createComponent(Icon, { icon: arrowUpDown, size: 16 })));
     },
 });
 const SearchButton = Shade({
     shadowDomName: 'data-grid-search-button',
+    css: {
+        display: 'inline-block',
+    },
     render: ({ props, useObservable }) => {
         const [findOptions] = useObservable('currentValue', props.findOptions, {
             filter: (newValue) => {
@@ -38,15 +43,30 @@ const SearchButton = Shade({
             },
         });
         const filterValue = findOptions.filter?.[props.fieldName]?.$regex || '';
-        return (createComponent(Button, { type: "button", title: "Filter", style: {
-                padding: '4px',
-                margin: '0',
-                cursor: 'pointer',
-            }, onclick: props.onclick }, filterValue ? '🔍' : '🔎'));
+        return (createComponent(Button, { type: "button", title: "Filter", variant: "outlined", color: filterValue ? 'info' : undefined, onclick: props.onclick },
+            createComponent(Icon, { icon: searchIcon, size: 16 })));
     },
 });
 const SearchForm = Shade({
     shadowDomName: 'data-grid-search-form',
+    css: {
+        display: 'block',
+        '& .search-form': {
+            display: 'flex',
+            width: '100%',
+            overflow: 'hidden',
+            height: '0px',
+            justifyContent: 'space-around',
+            opacity: '0',
+        },
+        '& .search-form-actions': {
+            display: 'flex',
+            width: '64px',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '8px',
+        },
+    },
     render: ({ props, useObservable }) => {
         const [findOptions] = useObservable('currentValue', props.findOptions, {
             filter: (newValue, lastValue) => {
@@ -56,49 +76,72 @@ const SearchForm = Shade({
             },
         });
         const currentValue = findOptions.filter?.[props.fieldName]?.$regex || '';
-        return (createComponent(Form, { className: "search-form", style: {
-                display: 'flex',
-                width: '100%',
-                overflow: 'hide',
-                height: '0px',
-                justifyContent: 'space-around',
-                opacity: '0',
-            }, validate: (data) => typeof data.searchValue?.length === 'number', onSubmit: ({ searchValue }) => {
+        return (createComponent(Form, { className: "search-form", validate: (data) => typeof data.searchValue?.length === 'number', onSubmit: ({ searchValue }) => {
                 props.onSubmit(searchValue);
             } },
-            createComponent(Input, { style: { padding: '0px', paddingBottom: '0', margin: '0' }, placeholder: props.fieldName, autofocus: true, labelTitle: `${props.fieldName}`, name: "searchValue", value: typeof currentValue === 'string' ? currentValue : '', labelProps: {
+            createComponent(Input, { placeholder: props.fieldName, autofocus: true, labelTitle: `${props.fieldName}`, name: "searchValue", value: typeof currentValue === 'string' ? currentValue : '', labelProps: {
                     style: { padding: '0px 2em' },
                 } }),
-            createComponent("div", { style: { display: 'flex', width: '64px', alignItems: 'center', justifyContent: 'center', gap: '8px' } },
-                createComponent(Button, { type: "reset", style: { padding: '4px', margin: '0' }, onclick: (ev) => {
+            createComponent("div", { className: "search-form-actions" },
+                createComponent(Button, { type: "reset", variant: "outlined", onclick: (ev) => {
                         ev.preventDefault();
                         ev.stopPropagation();
                         props.onClear();
-                    } }, "\u274C"),
-                createComponent(Button, { style: { padding: '4px', margin: '0' }, type: "submit" }, "\uD83D\uDD0E"))));
+                    } },
+                    createComponent(Icon, { icon: closeIcon, size: 16 })),
+                createComponent(Button, { variant: "outlined", type: "submit" },
+                    createComponent(Icon, { icon: searchIcon, size: 16 })))));
     },
 });
 export const DataGridHeader = Shade({
     shadowDomName: 'data-grid-header',
-    render: ({ props, element, useObservable }) => {
-        const [, setIsSearchOpened] = useObservable('isSearchOpened', new ObservableValue(false), {
-            onChange: (newValue) => {
-                const searchForm = element.querySelector('.search-form');
-                const headerContent = element.querySelector('.header-content');
-                if (!newValue) {
-                    void collapse(searchForm);
-                    void expand(headerContent);
-                }
-                else {
-                    searchForm.style.display = 'flex';
-                    void expand(searchForm).then(async () => {
-                        await sleepAsync(100);
-                        searchForm.querySelector('input')?.focus();
-                    });
-                    void collapse(headerContent);
-                }
-            },
-        });
+    css: {
+        display: 'block',
+        '& .header-content': {
+            display: 'flex',
+            width: '100%',
+            height: '48px',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            gap: '12px',
+            overflow: 'hidden',
+        },
+        '& .header-field-name': {
+            fontWeight: '600',
+        },
+        '& .header-controls': {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: '4px',
+        },
+    },
+    render: ({ props, useObservable, useState, useRef }) => {
+        const searchFormRef = useRef('searchForm');
+        const headerContentRef = useRef('headerContent');
+        const [, setIsSearchOpened] = useState('isSearchOpened', false);
+        const openSearch = () => {
+            setIsSearchOpened(true);
+            const searchForm = searchFormRef.current?.querySelector('.search-form');
+            const headerContent = headerContentRef.current;
+            if (!searchForm || !headerContent)
+                return;
+            searchForm.style.display = 'flex';
+            void expand(searchForm).then(async () => {
+                await sleepAsync(100);
+                searchForm.querySelector('input')?.focus();
+            });
+            void collapse(headerContent);
+        };
+        const closeSearch = () => {
+            setIsSearchOpened(false);
+            const searchForm = searchFormRef.current?.querySelector('.search-form');
+            const headerContent = headerContentRef.current;
+            if (!searchForm || !headerContent)
+                return;
+            void collapse(searchForm);
+            void expand(headerContent);
+        };
         const [findOptions, setFindOptions] = useObservable('findOptions', props.findOptions);
         const updateSearchValue = (value) => {
             if (value) {
@@ -115,24 +158,15 @@ export const DataGridHeader = Shade({
                 const { [props.field]: _, ...newFilter } = findOptions.filter || {};
                 setFindOptions({ ...findOptions, filter: newFilter });
             }
-            setIsSearchOpened(false);
+            closeSearch();
         };
         return (createComponent(createComponent, null,
-            createComponent(SearchForm, { onSubmit: updateSearchValue, onClear: updateSearchValue, fieldName: props.field, findOptions: props.findOptions }),
-            createComponent("div", { className: "header-content", style: {
-                    display: 'flex',
-                    width: '100%',
-                    height: '48px',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    gap: '12px',
-                    overflow: 'hide',
-                } },
-                createComponent("div", { style: { paddingLeft: '0', fontWeight: '600' } }, props.field),
-                createComponent("div", { className: "header-controls", style: { display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: '0', gap: '4px' } },
-                    createComponent(SearchButton, { onclick: () => {
-                            setIsSearchOpened(true);
-                        }, findOptions: props.findOptions, fieldName: props.field }),
+            createComponent("div", { ref: searchFormRef, style: { display: 'contents' } },
+                createComponent(SearchForm, { onSubmit: updateSearchValue, onClear: updateSearchValue, fieldName: props.field, findOptions: props.findOptions })),
+            createComponent("div", { ref: headerContentRef, className: "header-content" },
+                createComponent("div", { className: "header-field-name" }, props.field),
+                createComponent("div", { className: "header-controls" },
+                    createComponent(SearchButton, { onclick: openSearch, findOptions: props.findOptions, fieldName: props.field }),
                     createComponent(OrderButton, { field: props.field, findOptions: props.findOptions })))));
     },
 });