@astryxdesign/core 0.7.0-canary.fe57f54 → 0.7.0

package/src/DropdownMenu/__tests__/MenuHeaderFooter.a11y.chromium.spec.ts

@@ -0,0 +1,195 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file MenuHeaderFooter.a11y.chromium.spec.ts
+ * @input The `Core/DropdownMenu` HeaderAndFooter story in a built Storybook
+ *   and real keyboard and mouse input.
+ * @output Real-engine proof that a menu's header and footer sit beside the
+ *   menu rather than inside it, keep their own keys and presses, and join one
+ *   Tab sequence with the menu.
+ * @position Run with `pnpm test:a11y-contract`.
+ */
+
+import {expect, test, type Page} from '@playwright/test';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+let storybook: StaticServer;
+
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+const STORY = 'core-dropdownmenu--header-and-footer';
+// The trigger button only: the sub-menu row inside the menu also carries
+// aria-haspopup="menu".
+const TRIGGER = '#storybook-root button[aria-haspopup="menu"]';
+
+async function openMenu(page: Page) {
+  await page.goto(`${storybook.origin}/iframe.html?id=${STORY}&viewMode=story`);
+  await page.locator(TRIGGER).click();
+  const menu = page.getByRole('menu', {name: 'Labels', exact: true});
+  await expect(menu).toBeVisible();
+  // A pointer open focuses the menu itself; let that land first.
+  await expect(menu).toBeFocused();
+  return menu;
+}
+
+test('the menu holds only its rows; the field and button sit beside it', async ({
+  page,
+}) => {
+  const menu = await openMenu(page);
+  // The menu holds menu items, plus the sub-menu row's own nested menu.
+  const roles = await menu.evaluate(el =>
+    Array.from(el.querySelectorAll('[role]')).map(n => n.getAttribute('role')),
+  );
+  expect(roles.every(r => r === 'menuitem' || r === 'menu')).toBe(true);
+  expect(roles).toContain('menuitem');
+  await expect(menu.getByRole('textbox', {name: 'Filter labels'})).toHaveCount(
+    0,
+  );
+  await expect(menu.getByRole('button', {name: 'Create label'})).toHaveCount(0);
+  await expect(
+    page.getByRole('textbox', {name: 'Filter labels'}),
+  ).toBeVisible();
+  await expect(page.getByRole('button', {name: 'Create label'})).toBeVisible();
+});
+
+test('typing into the header field filters without moving to a row', async ({
+  page,
+}) => {
+  await openMenu(page);
+  const field = page.getByRole('textbox', {name: 'Filter labels'});
+  await field.click();
+  await page.keyboard.type('de');
+  await expect(field).toHaveValue('de');
+  await expect(field).toBeFocused();
+  await expect(page.getByRole('menuitem')).toHaveText(['Design', 'Move to']);
+});
+
+test('Tab walks header, menu, footer, then closes to the trigger', async ({
+  page,
+}) => {
+  const menu = await openMenu(page);
+  const field = page.getByRole('textbox', {name: 'Filter labels'});
+  const create = page.getByRole('button', {name: 'Create label'});
+
+  await page.keyboard.press('Shift+Tab');
+  await expect(field).toBeFocused();
+  await page.keyboard.press('Tab');
+  await expect(menu).toBeFocused();
+  await page.keyboard.press('ArrowDown');
+  await expect(page.getByRole('menuitem', {name: 'Bug'})).toBeFocused();
+  await page.keyboard.press('Tab');
+  await expect(create).toBeFocused();
+  await expect(menu).toBeVisible();
+
+  await page.keyboard.press('Enter');
+  await expect(page.getByTestId('created')).toHaveText('1');
+  await expect(menu).toBeVisible();
+
+  await page.keyboard.press('Tab');
+  await expect(menu).toBeHidden();
+  await expect(page.locator(TRIGGER)).toHaveAttribute('aria-expanded', 'false');
+});
+
+test('Shift+Tab from a row goes straight to the header', async ({page}) => {
+  const menu = await openMenu(page);
+  await page.keyboard.press('ArrowDown');
+  await expect(page.getByRole('menuitem', {name: 'Bug'})).toBeFocused();
+  await page.keyboard.press('Shift+Tab');
+  await expect(
+    page.getByRole('textbox', {name: 'Filter labels'}),
+  ).toBeFocused();
+  await expect(menu).toBeVisible();
+});
+
+test('a mouse open draws no keyboard focus ring on the menu', async ({
+  page,
+}) => {
+  const menu = await openMenu(page);
+  const outlineStyle = await menu.evaluate(
+    el => getComputedStyle(el).outlineStyle,
+  );
+  expect(outlineStyle).toBe('none');
+});
+
+test('keyboard focus on the menu between the regions is visible', async ({
+  page,
+}) => {
+  const menu = await openMenu(page);
+  await page.keyboard.press('Shift+Tab');
+  await page.keyboard.press('Tab');
+  await expect(menu).toBeFocused();
+  const outline = await menu.evaluate(el => {
+    const style = getComputedStyle(el);
+    return {style: style.outlineStyle, width: parseFloat(style.outlineWidth)};
+  });
+  expect(outline.style).not.toBe('none');
+  expect(outline.width).toBeGreaterThan(0);
+});
+
+test('Tab and Shift+Tab from an open sub-menu close it and reach a region', async ({
+  page,
+}) => {
+  const menu = await openMenu(page);
+  const subTrigger = page.getByRole('menuitem', {name: 'Move to'});
+  await page.keyboard.press('End');
+  await expect(subTrigger).toBeFocused();
+  await page.keyboard.press('ArrowRight');
+  await expect(page.getByRole('menuitem', {name: 'Archive'})).toBeFocused();
+  await page.keyboard.press('Tab');
+  await expect(page.getByRole('button', {name: 'Create label'})).toBeFocused();
+  await expect(subTrigger).toHaveAttribute('aria-expanded', 'false');
+  await expect(menu).toBeVisible();
+
+  await page.keyboard.press('Shift+Tab');
+  await expect(menu).toBeFocused();
+  await page.keyboard.press('End');
+  await page.keyboard.press('ArrowRight');
+  await expect(page.getByRole('menuitem', {name: 'Archive'})).toBeFocused();
+  await page.keyboard.press('Shift+Tab');
+  await expect(
+    page.getByRole('textbox', {name: 'Filter labels'}),
+  ).toBeFocused();
+  await expect(subTrigger).toHaveAttribute('aria-expanded', 'false');
+});
+
+test('Escape in the header closes the menu and returns focus to the trigger', async ({
+  page,
+}) => {
+  const menu = await openMenu(page);
+  await page.getByRole('textbox', {name: 'Filter labels'}).click();
+  await page.keyboard.press('Escape');
+  await expect(menu).toBeHidden();
+  await expect(page.locator(TRIGGER)).toBeFocused();
+});
+
+test('a finger tap on the footer button acts and the menu stays open', async ({
+  browser,
+}) => {
+  const context = await browser.newContext({hasTouch: true, isMobile: true});
+  const page = await context.newPage();
+  try {
+    await page.goto(
+      `${storybook.origin}/iframe.html?id=${STORY}&viewMode=story`,
+    );
+    await page.locator(TRIGGER).tap();
+    const menu = page.getByRole('menu', {name: 'Labels', exact: true});
+    await expect(menu).toBeVisible();
+    await page.getByRole('button', {name: 'Create label'}).tap();
+    await expect(page.getByTestId('created')).toHaveText('1');
+    await expect(menu).toBeVisible();
+  } finally {
+    await context.close();
+  }
+});

package/src/DropdownMenu/menuRegionsContext.ts

@@ -0,0 +1,17 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+'use client';
+/**
+ * @file menuRegionsContext.ts
+ * @input DropdownMenu's `header` and `footer` props
+ * @output `MenuRegionsContext`: whether the root menu has a header or footer
+ * @position Internal; not exported from the package. A sub-menu flyout reads it
+ *   to close itself on Tab, so the root menu can move focus to a region.
+ *
+ * A plain context rather than a layer-scoped one on purpose: each sub-menu
+ * flyout is its own layer, and it must still see the root's value. A nested
+ * DropdownMenu provides its own value, so it never inherits an outer one.
+ */
+import {createContext} from 'react';
+
+export const MenuRegionsContext = createContext(false);
+MenuRegionsContext.displayName = 'MenuRegionsContext';

package/src/Layout/container.stylex.ts

@@ -19,10 +19,8 @@
  *   --astryx-card-padding-block-end
  *
  * Read order per level: `var(--astryx-…, <next level>)`, terminating at
- * `--spacing-4`. Same pattern for section, dialog, and the Lab drawer.
- * Bottom-sheet keeps its released unpadded default: its edges terminate at 0px
- * and its Layout insets at no value, so an unthemed sheet changes nothing for
- * descendants.
+ * `--spacing-4`. Same pattern for section, dialog, bottom-sheet, and the Lab
+ * drawer.
  *
  * ```ts
  * components: {
@@ -141,19 +139,11 @@ const dialogInlineEnd = `var(--astryx-dialog-padding-inline-end, ${dialogInline}
 const dialogBlockStart = `var(--astryx-dialog-padding-block-start, ${dialogShorthand})`;
 const dialogBlockEnd = `var(--astryx-dialog-padding-block-end, ${dialogShorthand})`;
 
-// Bottom sheet padding chains: --astryx-* then the next specificity level.
-// Unlike card/section/dialog, the sheet's released default is no padding, so
-// the edge chains terminate at 0px. The Layout inset chains have NO terminal
-// value: with no theme padding they are invalid at computed-value time, which
-// leaves the overlay reset in force and lets a Layout inside the sheet fall
-// back to its own default, exactly as before the sheet was a container. Built
-// as chained const strings (no function calls) so StyleX can statically
-// analyze them; see naming.ts for the prefix policy.
-const bottomSheetThemeShorthand = 'var(--astryx-bottom-sheet-padding)';
-const bottomSheetThemeInline = `var(--astryx-bottom-sheet-padding-inline, ${bottomSheetThemeShorthand})`;
-const bottomSheetThemeInlineStart = `var(--astryx-bottom-sheet-padding-inline-start, ${bottomSheetThemeInline})`;
-const bottomSheetThemeBlockStart = `var(--astryx-bottom-sheet-padding-block-start, ${bottomSheetThemeShorthand})`;
-const bottomSheetShorthand = 'var(--astryx-bottom-sheet-padding, 0px)';
+// Bottom sheet padding chains: --astryx-* then the next specificity level,
+// terminating at --spacing-4 like Dialog. Built as chained const strings (no
+// function calls) so StyleX can statically analyze them; see naming.ts for the
+// prefix policy.
+const bottomSheetShorthand = `var(--astryx-bottom-sheet-padding, ${SP4})`;
 const bottomSheetInline = `var(--astryx-bottom-sheet-padding-inline, ${bottomSheetShorthand})`;
 const bottomSheetInlineStart = `var(--astryx-bottom-sheet-padding-inline-start, ${bottomSheetInline})`;
 const bottomSheetInlineEnd = `var(--astryx-bottom-sheet-padding-inline-end, ${bottomSheetInline})`;
@@ -266,16 +256,16 @@ const bottomSheetDefaultPaddingStyles = stylex.create({
     '--container-padding-block-end': bottomSheetBlockEnd,
   },
   layoutPaddingOuterX: {
-    '--layout-padding-outer-x': bottomSheetThemeInlineStart,
+    '--layout-padding-outer-x': bottomSheetInlineStart,
   },
   layoutPaddingOuterY: {
-    '--layout-padding-outer-y': bottomSheetThemeBlockStart,
+    '--layout-padding-outer-y': bottomSheetBlockStart,
   },
   layoutPaddingInnerX: {
-    '--layout-padding-inner-x': bottomSheetThemeInlineStart,
+    '--layout-padding-inner-x': bottomSheetInlineStart,
   },
   layoutPaddingInnerY: {
-    '--layout-padding-inner-y': bottomSheetThemeBlockStart,
+    '--layout-padding-inner-y': bottomSheetBlockStart,
   },
 });
 

package/src/Lightbox/Lightbox.test.tsx

@@ -2,6 +2,7 @@
 
 import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
+import {Profiler} from 'react';
 import {Lightbox} from './Lightbox';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
 import {InternationalizationProvider} from '../i18n';
@@ -676,3 +677,60 @@ describe('Lightbox', () => {
     });
   });
 });
+
+describe('Lightbox zoom reset timing', () => {
+  it('shows the next image unzoomed in the same commit that changes it', () => {
+    const media = [
+      {src: '/a.jpg', alt: 'Image A'},
+      {src: '/b.jpg', alt: 'Image B'},
+    ];
+    const frames: string[] = [];
+    const onRender = () =>
+      frames.push(
+        screen
+          .queryByRole('button', {name: 'Zoom'})
+          ?.getAttribute('aria-pressed') ?? '',
+      );
+    render(
+      <Profiler id="lightbox" onRender={onRender}>
+        <Lightbox isOpen={true} onOpenChange={() => {}} media={media} hasZoom />
+      </Profiler>,
+    );
+    fireEvent.keyDown(screen.getByRole('button', {name: 'Zoom'}), {
+      key: 'Enter',
+    });
+    expect(screen.getByRole('button', {name: 'Zoom'})).toHaveAttribute(
+      'aria-pressed',
+      'true',
+    );
+
+    frames.length = 0;
+    fireEvent.click(screen.getByRole('button', {name: /next/i}));
+
+    expect(frames.length).toBeGreaterThan(0);
+    expect(frames).not.toContain('true');
+    expect(screen.getByRole('button', {name: 'Zoom'})).toHaveAttribute(
+      'aria-pressed',
+      'false',
+    );
+  });
+});
+
+describe('Lightbox with an unusable controlled index', () => {
+  it('renders without looping when index is NaN', () => {
+    expect(() =>
+      render(
+        <Lightbox
+          isOpen={false}
+          onOpenChange={() => {}}
+          media={[
+            {src: '/a.jpg', alt: 'Image A'},
+            {src: '/b.jpg', alt: 'Image B'},
+          ]}
+          index={Number.NaN}
+          onIndexChange={() => {}}
+        />,
+      ),
+    ).not.toThrow();
+  });
+});

package/src/Lightbox/Lightbox.tsx

@@ -367,14 +367,20 @@ export function Lightbox({
   // Scroll lock
   useScrollLock(isOpen);
 
-  // Reset zoom on image change
-  useEffect(() => {
-    // Reset image view state when the active media item changes.
-    // eslint-disable-next-line @eslint-react/set-state-in-effect
+  // A new media item starts unzoomed. Adjusted during render, so the new item
+  // never paints at the previous item's zoom and pan.
+  const currentSrc = currentItem?.src;
+  const [viewedItem, setViewedItem] = useState({index, src: currentSrc});
+  // Object.is, matching the dependency comparison of the effect this replaces:
+  // a controlled index of NaN must not re-render forever.
+  if (
+    !Object.is(viewedItem.index, index) ||
+    !Object.is(viewedItem.src, currentSrc)
+  ) {
+    setViewedItem({index, src: currentSrc});
     setZoom(1);
-    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setPan({x: 0, y: 0});
-  }, [index, currentItem?.src]);
+  }
 
   // Announce gallery navigation to screen readers. Moving between images only
   // updates the visual counter, which is silent to assistive tech, so mirror

package/src/Markdown/plugins/protocol.ts

@@ -708,10 +708,46 @@ export function freezeMarkdownPluginData<T extends MarkdownPluginData>(
   return value;
 }
 
+/**
+ * The identity of a source-backed node's position: its offsets, or, for a
+ * block nested in a list item or quote, which carries lines and no offsets
+ * while source lines are on (`module:Markdown/sourceLines`), its lines.
+ */
 function positionKey(position: MarkdownAstPosition | undefined): string | null {
   const start = position?.start.offset;
   const end = position?.end.offset;
-  return start == null || end == null ? null : `${start}:${end}`;
+  if (start != null && end != null) {
+    return `${start}:${end}`;
+  }
+  const startLine = position?.start.line;
+  const endLine = position?.end.line;
+  return startLine == null || endLine == null
+    ? null
+    : `line ${startLine}:${endLine}`;
+}
+
+/** A position's two points measure the same thing and never run backwards. */
+function isValidPosition(position: MarkdownAstPosition): boolean {
+  const measures = [
+    [position.start?.offset, position.end?.offset, 0],
+    [position.start?.line, position.end?.line, 1],
+  ] as const;
+  let measured = false;
+  for (const [start, end, minimum] of measures) {
+    if (start === undefined && end === undefined) {
+      continue;
+    }
+    if (
+      !Number.isInteger(start) ||
+      !Number.isInteger(end) ||
+      (start as number) < minimum ||
+      (end as number) < (start as number)
+    ) {
+      return false;
+    }
+    measured = true;
+  }
+  return measured;
 }
 
 interface CodeInternalProperties {
@@ -825,6 +861,8 @@ function restoreCodeInternalProperties(
 
 interface SourceInvariant {
   readonly type: string;
+  readonly startLine?: number;
+  readonly endLine?: number;
   readonly depth?: unknown;
   readonly ordered?: unknown;
   readonly start?: unknown;
@@ -844,6 +882,8 @@ function collectSourceInvariants(
       const record = node as unknown as Record<string, unknown>;
       const invariant = {
         type: node.type,
+        startLine: node.position?.start.line,
+        endLine: node.position?.end.line,
         depth: record.depth,
         ordered: record.ordered,
         start: record.start,
@@ -1048,23 +1088,16 @@ function validateAst(
 
     const position = node.position as MarkdownAstPosition | undefined;
     const key = positionKey(position);
-    if (position != null) {
-      const start = position.start?.offset;
-      const end = position.end?.offset;
-      if (
-        !Number.isInteger(start) ||
-        !Number.isInteger(end) ||
-        (start as number) < 0 ||
-        (end as number) < (start as number)
-      ) {
-        return false;
-      }
+    if (position != null && !isValidPosition(position)) {
+      return false;
     }
     if (key != null) {
       const invariants = sourcePositions.get(key) ?? [];
       const invariantIndex = invariants.findIndex(
         invariant =>
           invariant.type === type &&
+          invariant.startLine === position?.start?.line &&
+          invariant.endLine === position?.end?.line &&
           invariant.depth === node.depth &&
           invariant.ordered === node.ordered &&
           invariant.start === node.start &&

package/src/Markdown/plugins/sourceLines.test.tsx

@@ -136,6 +136,16 @@ function hasAnyLine(value: unknown): boolean {
   return JSON.stringify(value).includes('"line"');
 }
 
+/** A parsed node, walked generically by the transforms below. */
+interface TreeNode {
+  readonly type?: string;
+  readonly position?: {
+    readonly start: {readonly line?: number};
+    readonly end: {readonly line?: number};
+  };
+  readonly children?: ReadonlyArray<TreeNode>;
+}
+
 describe('markdownSourceLinesPlugin', () => {
   beforeEach(() => {
     parseCalls.full = 0;
@@ -466,6 +476,117 @@ describe('markdownSourceLinesPlugin', () => {
     expect(hasAnyLine(parseMarkdownAst(NESTED, {plugins: []}))).toBe(false);
   });
 
+  it('composes with a transform that rebuilds nested blocks, which keep their lines', () => {
+    const rebuild = (nodes: ReadonlyArray<TreeNode>): TreeNode[] =>
+      nodes.map(node =>
+        node.children == null
+          ? {...node}
+          : {...node, children: rebuild(node.children)},
+      );
+    const copy = createMarkdownPlugin({
+      apiVersion: 1,
+      name: 'test-rebuild',
+      transform: document => ({
+        ...document,
+        children: rebuild(
+          document.children as unknown as ReadonlyArray<TreeNode>,
+        ) as unknown as typeof document.children,
+      }),
+    });
+    const warning = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const {container} = render(
+      <Markdown plugins={[copy, markdownSourceLinesPlugin]}>{NESTED}</Markdown>,
+    );
+    expect(warning).not.toHaveBeenCalled();
+    warning.mockRestore();
+    expect(stamps(container, '[data-source-line]')).toEqual(
+      stamps(renderDocument(NESTED, true), '[data-source-line]'),
+    );
+  });
+
+  it('refuses a transform that shifts a nested block to other lines', () => {
+    const shift = (nodes: ReadonlyArray<TreeNode>): TreeNode[] =>
+      nodes.map(node => {
+        if (node.type === 'paragraph' && node.position?.start.line === 12) {
+          return {...node, position: {start: {line: 13}, end: {line: 13}}};
+        }
+        return node.children == null
+          ? node
+          : {...node, children: shift(node.children)};
+      });
+    const forge = createMarkdownPlugin({
+      apiVersion: 1,
+      name: 'test-shift-lines',
+      transform: document => ({
+        ...document,
+        children: shift(
+          document.children as unknown as ReadonlyArray<TreeNode>,
+        ) as unknown as typeof document.children,
+      }),
+    });
+    const warning = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const {container} = render(
+      <Markdown plugins={[forge, markdownSourceLinesPlugin]}>
+        {NESTED}
+      </Markdown>,
+    );
+    expect(warning).toHaveBeenCalledWith(
+      expect.stringContaining('"test-shift-lines" failed in transform'),
+      expect.anything(),
+    );
+    warning.mockRestore();
+    expect(stamps(container, '[data-source-line]')).toEqual(
+      stamps(renderDocument(NESTED, true), '[data-source-line]'),
+    );
+  });
+
+  it('refuses a transform that moves a top-level block to other lines while keeping its offsets', () => {
+    const move = (nodes: ReadonlyArray<TreeNode>): TreeNode[] =>
+      nodes.map(node => {
+        const position = node.position;
+        if (
+          node.type !== 'paragraph' ||
+          position == null ||
+          position.start.line !== 20
+        ) {
+          return node;
+        }
+        return {
+          ...node,
+          position: {
+            start: {...position.start, line: 19},
+            end: {...position.end, line: 19},
+          },
+        };
+      });
+    const forge = createMarkdownPlugin({
+      apiVersion: 1,
+      name: 'test-move-lines-keep-offsets',
+      transform: document => ({
+        ...document,
+        children: move(
+          document.children as unknown as ReadonlyArray<TreeNode>,
+        ) as unknown as typeof document.children,
+      }),
+    });
+    const warning = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const {container} = render(
+      <Markdown plugins={[forge, markdownSourceLinesPlugin]}>
+        {NESTED}
+      </Markdown>,
+    );
+    expect(warning).toHaveBeenCalledWith(
+      expect.stringContaining(
+        '"test-move-lines-keep-offsets" failed in transform',
+      ),
+      expect.anything(),
+    );
+    warning.mockRestore();
+    expect(stamps(container, '[data-source-line]')).toEqual(
+      stamps(renderDocument(NESTED, true), '[data-source-line]'),
+    );
+  });
+
   it('keeps the released DOM and renderer props byte-identical without the plugin', () => {
     const plain = renderToStaticMarkup(<Markdown>{SOURCE}</Markdown>);
     expect(

package/src/PowerSearch/PowerSearch.tsx

@@ -755,6 +755,25 @@ export function PowerSearch({
         return;
       }
 
+      // An "empty" operator filter has no value for the built-in editor to
+      // edit: commit it as that editor's save would, the way adding one does,
+      // instead of opening it. A consumer's `empty` Editor override still opens.
+      const operator = config.getOperator(filter.field, filter.operator);
+      if (
+        operator?.value.type === 'empty' &&
+        componentOverrides?.empty?.Editor == null
+      ) {
+        const newFilters = [...filters];
+        newFilters[index] = {
+          field: filter.field,
+          operator: filter.operator,
+          value: {type: 'empty'},
+        };
+        onChange(newFilters, 'edit', index);
+        setPopoverState({type: 'idle'});
+        return;
+      }
+
       setPopoverState({
         type: 'editing',
         filterIndex: index,
@@ -765,7 +784,15 @@ export function PowerSearch({
         },
       });
     },
-    [filters, isReadOnly, isDisabled, setPopoverState],
+    [
+      filters,
+      isReadOnly,
+      isDisabled,
+      config,
+      componentOverrides,
+      onChange,
+      setPopoverState,
+    ],
   );
 
   // Handle popover save