feat/filter panel as dialog

Author: revomanik

docs

@@ -78,6 +78,63 @@ test.describe('filtering', () => {
     await expect(filterPanel).not.toBeVisible();
   });
 
+  test('renders filter panel as a native dialog outside overflow clipping', async ({ page }) => {
+    const source: SampleRow[] = [
+      { id: 501, name: 'Alice', role: 'Admin', city: 'Lisbon' },
+      { id: 502, name: 'Ben', role: 'Engineer', city: 'Porto' },
+    ];
+
+    const columns = buildColumns([
+      { prop: 'id', name: 'ID' },
+      { prop: 'name', name: 'Name' },
+      { prop: 'role', name: 'Role', filter: true, ...withHeaderTestId('dialog-filter-role') },
+      { prop: 'city', name: 'City' },
+    ]);
+
+    await mountGrid(page, { columns, source, filter: true, height: 72 });
+    await page.locator('revo-grid').evaluate(grid => {
+      const wrapper = grid.parentElement;
+      if (!wrapper) {
+        throw new Error('Grid wrapper was not found');
+      }
+      wrapper.style.overflow = 'hidden';
+    });
+
+    await page
+      .getByTestId('dialog-filter-role')
+      .locator(SELECTORS.filterButton)
+      .click();
+
+    const filterPanel = page.locator(SELECTORS.filterPanel);
+    await expect(filterPanel).toBeVisible();
+    await expect(filterPanel).toHaveJSProperty('open', true);
+
+    const { buttonBottom, buttonLeft, panelBottom, panelLeft, panelTop, wrapperBottom } = await page.evaluate(() => {
+      const dialog = document.querySelector('revogr-filter-panel dialog');
+      const button = document
+        .querySelector('[data-testid="dialog-filter-role"]')
+        ?.querySelector('.rv-filter');
+      const wrapper = document.querySelector('revo-grid')?.parentElement;
+      if (!button || !dialog || !wrapper) {
+        throw new Error('Filter button, dialog, or grid wrapper was not found');
+      }
+      const buttonRect = button.getBoundingClientRect();
+      const panelRect = dialog.getBoundingClientRect();
+      return {
+        buttonBottom: buttonRect.bottom,
+        buttonLeft: buttonRect.left,
+        panelBottom: panelRect.bottom,
+        panelLeft: panelRect.left,
+        panelTop: panelRect.top,
+        wrapperBottom: wrapper.getBoundingClientRect().bottom,
+      };
+    });
+
+    expect(panelLeft).toBeCloseTo(buttonLeft, 0);
+    expect(panelTop).toBeCloseTo(buttonBottom, 0);
+    expect(panelBottom).toBeGreaterThan(wrapperBottom);
+  });
+
   test('reapplies active filters after source replacement', async ({ page }) => {
     const source: SampleRow[] = [
       { id: 501, name: 'Alice', role: 'Admin', city: 'Lisbon' },

e2e/filtering.spec.ts

@@ -10,8 +10,8 @@ export const SELECTORS = {
   pinnedTopRows: 'revogr-data[type="rowPinStart"] .rgRow',
   pinnedBottomRows: 'revogr-data[type="rowPinEnd"] .rgRow',
   filterButton: '.rv-filter',
-  filterPanel: 'revogr-filter-panel',
-  filterInput: 'revogr-filter-panel input[placeholder="Enter value..."]',
+  filterPanel: 'revogr-filter-panel dialog',
+  filterInput: 'revogr-filter-panel dialog input[placeholder="Enter value..."]',
   editInput: 'revo-grid revogr-edit input',
   focusedCell: 'revo-grid revogr-focus.focused-cell',
   selectedRange: '.selection-border-range',

e2e/helpers/selectors.ts

@@ -43,6 +43,7 @@ const FILTER_ID = 'add-filter';
   styleUrl: 'filter.style.scss',
 })
 export class FilterPanel {
+  private dialog?: HTMLDialogElement;
   private filterCaptionsInternal: FilterCaptions = {
     title: 'Filter by',
     ok: 'Close',
@@ -187,22 +188,67 @@ export class FilterPanel {
     );
   }
 
+  componentDidRender() {
+    this.syncDialog();
+  }
+
+  private syncDialog() {
+    if (!this.dialog) {
+      return;
+    }
+
+    if (!this.changes) {
+      if (this.dialog.open) {
+        this.dialog.close();
+      }
+      return;
+    }
+
+    if (!this.dialog.open) {
+      this.dialog.show();
+    }
+
+    if (this.changes.autoCorrect !== false) {
+      requestAnimationFrame(() => this.autoCorrect(this.dialog));
+    }
+  }
+
   private autoCorrect(el?: HTMLElement | null) {
     if (!el) {
       return;
     }
 
-    const revoGrid = el.closest('revo-grid');
-    if (!revoGrid) {
+    const pos = el.getBoundingClientRect();
+    const maxLeft = Math.max(0, window.innerWidth - pos.width);
+    const maxTop = Math.max(0, window.innerHeight - pos.height);
+
+    if (pos.left > maxLeft) {
+      el.style.left = `${maxLeft}px`;
+    }
+
+    if (pos.top > maxTop) {
+      el.style.top = `${maxTop}px`;
+    }
+  }
+
+  private onDialogMouseDown(e: MouseEvent) {
+    if (
+      !this.closeOnOutsideClick ||
+      e.target !== this.dialog ||
+      !this.dialog
+    ) {
       return;
     }
 
-    const pos = el.getBoundingClientRect();
-    const gridPos = revoGrid.getBoundingClientRect();
-    const maxLeft = gridPos.right - pos.width;
+    const rect = this.dialog.getBoundingClientRect();
+    const isInside =
+      e.clientX >= rect.left &&
+      e.clientX <= rect.right &&
+      e.clientY >= rect.top &&
+      e.clientY <= rect.bottom;
 
-    if (pos.left > maxLeft && el.offsetLeft) {
-      el.style.left = `${maxLeft - (el.parentElement?.getBoundingClientRect().left ?? 0)}px`;
+    if (!isInside) {
+      this.onCancel();
     }
   }
 
@@ -469,13 +515,9 @@ export class FilterPanel {
   }
 
   render() {
-    if (!this.changes) {
-      return <Host style={{ display: 'none' }}></Host>;
-    }
     const style = {
-      display: 'block',
-      left: `${this.changes.x}px`,
-      top: `${this.changes.y}px`,
+      left: `${this.changes?.x ?? 0}px`,
+      top: `${this.changes?.y ?? 0}px`,
     };
 
     const capts = Object.assign(
@@ -484,72 +526,78 @@ export class FilterPanel {
     );
 
     return (
-      <Host
-        style={style}
-        ref={el => {
-          this.changes?.autoCorrect !== false && this.autoCorrect(el);
-        }}
-      >
-        <slot slot="header" />
-        { this.changes.extraContent?.(this.changes) || '' }
-
-        { this.changes?.hideDefaultFilters !== true && (
-          [
-            <label>{capts.title}</label>,
-            <div class="filter-holder">{this.getFilterItemsList()}</div>,
-            <div class="add-filter">
-              <select
-                id={FILTER_ID}
-                class="select-css"
-                onChange={e => this.onAddNewFilter(e)}
-              >
-                {this.renderSelectOptions(this.currentFilterType)}
-              </select>
-            </div>
-          ]
-        )}
-
-        <slot />
-        <div class="filter-actions">
-          {this.disableDynamicFiltering && [
-            <button
-              id="revo-button-save"
-              aria-label="save"
-              class="revo-button green"
-              onClick={() => this.onSave()}
-            >
-              {capts.save}
-            </button>,
-            <button
-              id="revo-button-ok"
-              aria-label="ok"
-              class="revo-button green"
-              onClick={() => this.onCancel()}
-            >
-              {capts.cancel}
-            </button>,
-          ]}
-          {!this.disableDynamicFiltering && [
-            <button
-              id="revo-button-ok"
-              aria-label="ok"
-              class="revo-button green"
-              onClick={() => this.onCancel()}
-            >
-              {capts.ok}
-            </button>,
-
-            <button
-              id="revo-button-reset"
-              aria-label="reset"
-              class="revo-button outline"
-              onClick={() => this.onReset()}
-            >
-              {capts.reset}
-            </button>,
+      <Host>
+        <dialog
+          class="filter-panel-dialog"
+          style={style}
+          ref={el => (this.dialog = el)}
+          onCancel={e => {
+            e.preventDefault();
+            this.onCancel();
+          }}
+          onMouseDown={e => this.onDialogMouseDown(e)}
+        >
+          {this.changes && [
+            <slot slot="header" />,
+            this.changes.extraContent?.(this.changes) || '',
+
+            this.changes?.hideDefaultFilters !== true && [
+              <label>{capts.title}</label>,
+              <div class="filter-holder">{this.getFilterItemsList()}</div>,
+              <div class="add-filter">
+                <select
+                  id={FILTER_ID}
+                  class="select-css"
+                  onChange={e => this.onAddNewFilter(e)}
+                >
+                  {this.renderSelectOptions(this.currentFilterType)}
+                </select>
+              </div>,
+            ],
+
+            <slot />,
+            <div class="filter-actions">
+              {this.disableDynamicFiltering && [
+                <button
+                  id="revo-button-save"
+                  aria-label="save"
+                  class="revo-button green"
+                  onClick={() => this.onSave()}
+                >
+                  {capts.save}
+                </button>,
+                <button
+                  id="revo-button-ok"
+                  aria-label="ok"
+                  class="revo-button green"
+                  onClick={() => this.onCancel()}
+                >
+                  {capts.cancel}
+                </button>,
+              ]}
+              {!this.disableDynamicFiltering && [
+                <button
+                  id="revo-button-ok"
+                  aria-label="ok"
+                  class="revo-button green"
+                  onClick={() => this.onCancel()}
+                >
+                  {capts.ok}
+                </button>,
+
+                <button
+                  id="revo-button-reset"
+                  aria-label="reset"
+                  class="revo-button outline"
+                  onClick={() => this.onReset()}
+                >
+                  {capts.reset}
+                </button>,
+              ]}
+            </div>,
+            <slot slot="footer" />,
           ]}
-        </div>
-        <slot slot="footer" />
+        </dialog>
       </Host>
     );
   }

packages/react

@@ -243,7 +243,8 @@ export class FilterPlugin extends BasePlugin {
 
   async headerclick(e: CustomEvent<ColumnRegular>) {
     const el = e.detail.originalEvent?.target as HTMLElement;
-    if (!isFilterBtn(el)) {
+    const filterButton = isFilterBtn(el);
+    if (!filterButton) {
       return;
     }
     e.preventDefault();
@@ -259,14 +260,15 @@ export class FilterPlugin extends BasePlugin {
     }
 
     // filter button clicked, open filter dialog
-    const gridPos = this.revogrid.getBoundingClientRect();
-    const buttonPos = el.getBoundingClientRect();
+    const buttonPos = (
+      filterButton instanceof HTMLElement ? filterButton : el
+    ).getBoundingClientRect();
 
     const data: ShowData = {
       ...e.detail,
       ...this.filterCollection[prop],
-      x: buttonPos.x - gridPos.x,
-      y: buttonPos.y - gridPos.y + buttonPos.height,
+      x: buttonPos.x,
+      y: buttonPos.y + buttonPos.height,
       autoCorrect: true,
       filterTypes: this.getColumnFilter(e.detail.filter),
       filterItems: this.multiFilterItems,