@astryxdesign/core 0.4.2 → 0.4.3-canary.00bed29

package/src/MobileNav/MobileNavCloseVisibility.test.tsx

@@ -0,0 +1,172 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file MobileNavCloseVisibility.test.tsx
+ * @input Uses vitest, @testing-library/react, MobileNav
+ * @output Regression tests keeping the drawer rendered until the dialog closes
+ * @position Testing; guards the close path of MobileNav.tsx
+ *
+ * Repro for #4290 (page unresponsive after closing the drawer in Safari 26.1).
+ *
+ * A `<dialog>` opened with `showModal()` blocks the rest of the document for as
+ * long as it stays in the top layer — whether or not it is rendered. The drawer
+ * hid itself the moment `isOpen` flipped, while the native `close()` only ran
+ * afterwards from an effect, so `close()` was always called on a dialog that was
+ * already `display: none`. A browser that fails to un-block the document when
+ * such a dialog closes leaves the page inert with no JavaScript error.
+ *
+ * The fix keeps `display` in the transition with `allow-discrete`, so the drawer
+ * stays rendered until the slide-out finishes, and moves the unmount close into
+ * its own effect so the deferred close is no longer cut off by its own cleanup.
+ *
+ * Note on scope: jsdom has no top layer and no CSS transitions, so the inertness
+ * itself is not observable here. These tests pin the two mechanisms that prevent
+ * it — the declared transition, and the close actually being deferred.
+ */
+
+import {describe, it, expect, vi, beforeAll} from 'vitest';
+import {render, screen, act} from '@testing-library/react';
+import {MobileNav} from './MobileNav';
+import {stubMatchMedia} from '../__tests__/stubMatchMedia';
+
+// jsdom doesn't implement showModal/close on <dialog>, so we mock them
+beforeAll(() => {
+  HTMLDialogElement.prototype.showModal =
+    HTMLDialogElement.prototype.showModal ||
+    function (this: HTMLDialogElement) {
+      this.setAttribute('open', '');
+    };
+  HTMLDialogElement.prototype.close =
+    HTMLDialogElement.prototype.close ||
+    function (this: HTMLDialogElement) {
+      this.removeAttribute('open');
+    };
+});
+
+function Drawer({isOpen}: {isOpen: boolean}) {
+  return (
+    <MobileNav isOpen={isOpen} onOpenChange={() => {}} data-testid="mobile-nav">
+      <span>Nav content</span>
+    </MobileNav>
+  );
+}
+
+describe('MobileNav stays rendered while it closes', () => {
+  it('transitions display with allow-discrete so it hides only once closed', () => {
+    render(<Drawer isOpen />);
+    const style = getComputedStyle(screen.getByTestId('mobile-nav'));
+
+    // Without these two the drawer blanks out the instant `isOpen` flips,
+    // leaving an open modal dialog that nothing renders — and nothing can
+    // click past. See the file header.
+    expect(style.transitionProperty).toContain('display');
+    expect(style.transitionBehavior).toBe('allow-discrete');
+    // A zero hold is the bug wearing the fix's clothes: the drawer stops being
+    // rendered on the next style recalc, before any effect can close it.
+    expect(style.transitionDuration.trim()).not.toBe('');
+    // The hold must stay tied to the motion token rather than a literal: the
+    // close delay is derived by reading this value back, so a hardcoded hold
+    // and a themed slide-out would drift apart again. jsdom leaves var()
+    // unresolved, which is exactly why this reads as a declaration.
+    expect(style.transitionDuration).toContain('var(');
+  });
+
+  it('keeps the native dialog open until the slide-out has run', () => {
+    vi.useFakeTimers();
+    try {
+      const {rerender} = render(<Drawer isOpen />);
+      const dialog = screen.getByTestId('mobile-nav');
+      expect(dialog).toHaveAttribute('open');
+
+      act(() => {
+        rerender(<Drawer isOpen={false} />);
+      });
+
+      // The drawer is on its way out but the dialog is still open, so it is
+      // still rendered and still the thing holding the top layer.
+      expect(dialog).toHaveAttribute('open');
+
+      act(() => {
+        vi.advanceTimersByTime(300);
+      });
+      expect(dialog).not.toHaveAttribute('open');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('still closes the dialog when unmounted mid-slide-out', () => {
+    vi.useFakeTimers();
+    try {
+      const {rerender, unmount} = render(<Drawer isOpen />);
+      const dialog = screen.getByTestId('mobile-nav');
+
+      act(() => {
+        rerender(<Drawer isOpen={false} />);
+      });
+      expect(dialog).toHaveAttribute('open');
+
+      // Teardown before the timer fires — the unmount-only effect has to close
+      // the dialog, or the next showModal() is skipped and the drawer can never
+      // be re-opened (#3091).
+      unmount();
+      expect(dialog).not.toHaveAttribute('open');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('still defers the close under prefers-reduced-motion', () => {
+    // Query-aware on purpose. A blanket `matches: true` is the stub shape that
+    // once left 9 of 11 tests in the sibling edge-case file silently running
+    // against a 0ms close delay — see the header of stubMatchMedia.ts. It is
+    // inert for this file today (MobileNav renders standalone here, so
+    // prefers-reduced-motion is the only query in play), but the shape is the
+    // hazard, not the blast radius.
+    stubMatchMedia({reduceMotion: true});
+    vi.useFakeTimers();
+    try {
+      const {rerender} = render(<Drawer isOpen />);
+      const dialog = screen.getByTestId('mobile-nav');
+
+      act(() => {
+        rerender(<Drawer isOpen={false} />);
+      });
+      // Reduced motion caps the delay at 0 — but 0 is still a macrotask. What
+      // must not happen is the close landing synchronously in the commit, while
+      // the dialog is mid-flip. This pins deferral, not duration.
+      expect(dialog).toHaveAttribute('open');
+
+      act(() => {
+        vi.advanceTimersByTime(20);
+      });
+      expect(dialog).not.toHaveAttribute('open');
+    } finally {
+      vi.useRealTimers();
+      vi.unstubAllGlobals();
+    }
+  });
+
+  it('re-opening mid-slide-out cancels the pending close', () => {
+    vi.useFakeTimers();
+    try {
+      const {rerender} = render(<Drawer isOpen />);
+      const dialog = screen.getByTestId('mobile-nav');
+
+      act(() => {
+        rerender(<Drawer isOpen={false} />);
+      });
+      act(() => {
+        rerender(<Drawer isOpen />);
+      });
+      act(() => {
+        vi.advanceTimersByTime(300);
+      });
+
+      // The queued close must not fire after the drawer has been re-opened.
+      expect(dialog).toHaveAttribute('open');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});

package/src/MultiSelector/MultiSelector.test.tsx

@@ -20,6 +20,7 @@ import {
 import userEvent from '@testing-library/user-event';
 import {MultiSelector} from './MultiSelector';
 import {Icon} from '../Icon';
+import {InternationalizationProvider} from '../i18n';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
 import {defineTheme} from '../theme/defineTheme';
 import {generateThemeCSS} from '../theme/generateThemeRules';
@@ -415,6 +416,37 @@ describe('MultiSelector', () => {
     expect(onChange).toHaveBeenCalledWith(['Apple']);
   });
 
+  it('does not toggle the highlighted option on a composing Enter (IME)', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(
+      <MultiSelector
+        label="Fruit"
+        options={defaultOptions}
+        value={[]}
+        onChange={onChange}
+        hasSearch
+      />,
+    );
+    await user.click(screen.getByRole('button', {name: 'Fruit'}));
+    const search = screen.getByRole('combobox', h);
+    // Filter to Banana and highlight it so an unguarded Enter would toggle it.
+    await user.type(search, 'ban');
+    await user.keyboard('{ArrowDown}');
+    expect(search).toHaveAttribute('aria-activedescendant');
+
+    // The composing keydown (isComposing / legacy keyCode 229) that commits an
+    // IME candidate must not be read as "toggle the highlighted option".
+    fireEvent.keyDown(search, {key: 'Enter', isComposing: true});
+    expect(onChange).not.toHaveBeenCalled();
+    fireEvent.keyDown(search, {key: 'Enter', keyCode: 229});
+    expect(onChange).not.toHaveBeenCalled();
+
+    // A real, non-composing Enter still toggles the highlighted option.
+    fireEvent.keyDown(search, {key: 'Enter'});
+    expect(onChange).toHaveBeenCalledWith(['Banana']);
+  });
+
   it('toggles the correct item when selected items are sorted to top', async () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
@@ -798,56 +830,112 @@ describe('MultiSelector', () => {
     it('announces the match count politely while searching', async () => {
       const user = userEvent.setup();
       render(
-        <MultiSelector
-          label="Fruit"
-          options={defaultOptions}
-          value={EMPTY_VALUE}
-          onChange={() => {}}
-          hasSearch
-        />,
+        <InternationalizationProvider
+          locale="fr"
+          overrides={{
+            fr: {
+              '@astryx.multiSelector.resultCount':
+                '{count, number} {count, plural, one {résultat} other {résultats}}',
+            },
+          }}>
+          <MultiSelector
+            label="Fruit"
+            options={defaultOptions}
+            value={EMPTY_VALUE}
+            onChange={() => {}}
+            hasSearch
+          />
+        </InternationalizationProvider>,
       );
       await user.click(screen.getByRole('button', {name: 'Fruit'}));
       // "an" matches Banana and Orange.
       await user.type(screen.getByRole('combobox', h), 'an');
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('2 results');
+        // The plural branch of a message no catalog supplies.
+        expect(politeRegion()?.textContent).toBe('2 résultats');
       });
     });
 
     it('announces the singular form when one option matches', async () => {
       const user = userEvent.setup();
       render(
-        <MultiSelector
-          label="Fruit"
-          options={defaultOptions}
-          value={EMPTY_VALUE}
-          onChange={() => {}}
-          hasSearch
-        />,
+        <InternationalizationProvider
+          locale="fr"
+          overrides={{
+            fr: {
+              '@astryx.multiSelector.resultCount':
+                '{count, number} {count, plural, one {résultat} other {résultats}}',
+            },
+          }}>
+          <MultiSelector
+            label="Fruit"
+            options={defaultOptions}
+            value={EMPTY_VALUE}
+            onChange={() => {}}
+            hasSearch
+          />
+        </InternationalizationProvider>,
       );
       await user.click(screen.getByRole('button', {name: 'Fruit'}));
-      // "app" matches only Apple. Anchored so it cannot pass on "1 results".
+      // "app" matches only Apple. Exact match, so "1 résultats" would fail.
       await user.type(screen.getByRole('combobox', h), 'app');
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent(/^1 result$/);
+        expect(politeRegion()?.textContent).toBe('1 résultat');
       });
     });
 
-    it('announces "No results found" when nothing matches', async () => {
+    it('announces the empty-results message when nothing matches', async () => {
       const user = userEvent.setup();
       render(
-        <MultiSelector
-          label="Fruit"
-          options={defaultOptions}
-          value={EMPTY_VALUE}
-          onChange={() => {}}
-          hasSearch
-        />,
+        <InternationalizationProvider
+          locale="fr"
+          overrides={{
+            fr: {'@astryx.multiSelector.emptySearchResults': 'Aucun résultat'},
+          }}>
+          <MultiSelector
+            label="Fruit"
+            options={defaultOptions}
+            value={EMPTY_VALUE}
+            onChange={() => {}}
+            hasSearch
+          />
+        </InternationalizationProvider>,
       );
       await user.click(screen.getByRole('button', {name: 'Fruit'}));
       await user.type(screen.getByRole('combobox', h), 'xyz');
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('No results found');
+        expect(politeRegion()?.textContent).toBe('Aucun résultat');
+      });
+    });
+
+    it('speaks the result count from a provider catalog (plural)', async () => {
+      const user = userEvent.setup();
+      render(
+        <InternationalizationProvider
+          locale="fr"
+          messages={{
+            fr: {
+              '@astryx.multiSelector.resultCount': {
+                defaultMessage:
+                  '{count, number} {count, plural, one {résultat} other {résultats}}',
+              },
+            },
+          }}>
+          <MultiSelector
+            label="Fruit"
+            options={defaultOptions}
+            value={EMPTY_VALUE}
+            onChange={() => {}}
+            hasSearch
+          />
+        </InternationalizationProvider>,
+      );
+      await user.click(screen.getByRole('button', {name: 'Fruit'}));
+      // "an" matches Banana and Orange.
+      await user.type(screen.getByRole('combobox', h), 'an');
+      await waitFor(() => {
+        // Same key through the catalog path rather than `overrides`.
+        expect(politeRegion()?.textContent).toBe('2 résultats');
       });
     });
 
@@ -1159,53 +1247,109 @@ describe('MultiSelector', () => {
     it('announces the selection count politely when toggling an option', async () => {
       const user = userEvent.setup();
       render(
-        <MultiSelector
-          label="Fruit"
-          options={[...ANNOUNCE_OPTIONS]}
-          value={EMPTY_VALUE}
-          onChange={() => {}}
-        />,
+        <InternationalizationProvider
+          locale="fr"
+          overrides={{
+            fr: {
+              '@astryx.multiSelector.selectionCount':
+                '{count, number} sur {total, number} sélectionnés',
+            },
+          }}>
+          <MultiSelector
+            label="Fruit"
+            options={[...ANNOUNCE_OPTIONS]}
+            value={EMPTY_VALUE}
+            onChange={() => {}}
+          />
+        </InternationalizationProvider>,
       );
       await user.click(screen.getByRole('combobox'));
       const options = screen.getAllByRole('option', {hidden: true});
       await user.click(options[0]);
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('1 of 3 selected');
+        // Both arguments land, in the order the message asks for them.
+        expect(politeRegion()?.textContent).toBe('1 sur 3 sélectionnés');
       });
     });
 
-    it('announces "All selected" when select-all selects everything', async () => {
+    it('announces the all-selected message when select-all selects everything', async () => {
       const user = userEvent.setup();
       render(
-        <MultiSelector
-          label="Fruit"
-          options={[...ANNOUNCE_OPTIONS]}
-          value={EMPTY_VALUE}
-          onChange={() => {}}
-          hasSelectAll
-        />,
+        <InternationalizationProvider
+          locale="fr"
+          overrides={{
+            fr: {'@astryx.multiSelector.allSelected': 'Tout est là'},
+          }}>
+          <MultiSelector
+            label="Fruit"
+            options={[...ANNOUNCE_OPTIONS]}
+            value={EMPTY_VALUE}
+            onChange={() => {}}
+            hasSelectAll
+          />
+        </InternationalizationProvider>,
       );
       await user.click(screen.getByRole('combobox'));
       await user.click(screen.getByText('Select all'));
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('All selected');
+        expect(politeRegion()?.textContent).toBe('Tout est là');
       });
     });
 
-    it('announces "Selection cleared" when clearing', async () => {
+    it('announces the selection-cleared message when clearing', async () => {
       const user = userEvent.setup();
       render(
-        <MultiSelector
-          label="Fruit"
-          options={[...ANNOUNCE_OPTIONS]}
-          value={['Apple', 'Banana']}
-          onChange={() => {}}
-          hasClear
-        />,
+        <InternationalizationProvider
+          locale="fr"
+          overrides={{
+            fr: {'@astryx.multiSelector.selectionCleared': 'Plus rien'},
+          }}>
+          <MultiSelector
+            label="Fruit"
+            options={[...ANNOUNCE_OPTIONS]}
+            value={['Apple', 'Banana']}
+            onChange={() => {}}
+            hasClear
+          />
+        </InternationalizationProvider>,
       );
       await user.click(screen.getByRole('button', {name: 'Clear all Fruit'}));
       await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Selection cleared');
+        expect(politeRegion()?.textContent).toBe('Plus rien');
+      });
+    });
+
+    it('prefers a provider override over the provider catalog', async () => {
+      const user = userEvent.setup();
+      render(
+        <InternationalizationProvider
+          locale="fr"
+          messages={{
+            fr: {
+              '@astryx.multiSelector.selectionCount': {
+                defaultMessage: '{count, number} du catalogue',
+              },
+            },
+          }}
+          overrides={{
+            fr: {
+              '@astryx.multiSelector.selectionCount':
+                '{count, number} remplacé',
+            },
+          }}>
+          <MultiSelector
+            label="Fruit"
+            options={[...ANNOUNCE_OPTIONS]}
+            value={EMPTY_VALUE}
+            onChange={() => {}}
+          />
+        </InternationalizationProvider>,
+      );
+      await user.click(screen.getByRole('combobox'));
+      const options = screen.getAllByRole('option', {hidden: true});
+      await user.click(options[0]);
+      await waitFor(() => {
+        expect(politeRegion()?.textContent).toBe('1 remplacé');
       });
     });
   });

package/src/MultiSelector/MultiSelector.tsx

@@ -71,7 +71,7 @@ import {
   getSelectableOptions,
 } from '../Selector/utils';
 import {useMultiCombobox} from './hooks';
-import {getInputARIA, mergeProps} from '../utils';
+import {getInputARIA, isImeKeyEvent, mergeProps} from '../utils';
 import {useAnnounce} from '../hooks/useAnnounce';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
@@ -792,14 +792,19 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
       const selectableSet = new Set(selectableItems.map(item => item.value));
       const selectedCount = nextValue.filter(v => selectableSet.has(v)).length;
       if (selectedCount === 0) {
-        announce('Selection cleared');
+        announce(t('@astryx.multiSelector.selectionCleared'));
       } else if (total > 0 && selectedCount === total) {
-        announce('All selected');
+        announce(t('@astryx.multiSelector.allSelected'));
       } else {
-        announce(`${selectedCount} of ${total} selected`);
+        announce(
+          t('@astryx.multiSelector.selectionCount', {
+            count: selectedCount,
+            total,
+          }),
+        );
       }
     },
-    [announce, selectableItems],
+    [announce, selectableItems, t],
   );
 
   // Filter items by search query
@@ -903,11 +908,11 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
       const count = filterOptionsByQuery(selectableItems, nextQuery).length;
       announce(
         count === 0
-          ? 'No results found'
-          : `${count} result${count === 1 ? '' : 's'}`,
+          ? t('@astryx.multiSelector.emptySearchResults')
+          : t('@astryx.multiSelector.resultCount', {count}),
       );
     },
-    [announce, selectableItems],
+    [announce, selectableItems, t],
   );
 
   // Handle toggle
@@ -1182,6 +1187,15 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
           }
         }}
         onKeyDown={e => {
+          // An in-progress IME composition uses these same keys (Enter to
+          // commit the candidate, Escape/Arrows to navigate the candidate
+          // window); the composing keydown fires before compositionend, so
+          // without this guard a Korean/Japanese/Chinese user committing a
+          // syllable with Enter would instead toggle the highlighted option.
+          // See utils/ime.ts.
+          if (isImeKeyEvent(e.nativeEvent)) {
+            return;
+          }
           // Arrow keys navigate options; Enter toggles; Escape closes.
           // Space and Home/End are left to the input (type a space / move
           // the caret) per the APG editable combobox; PageUp/PageDown are

package/src/NumberInput/NumberInput.test.tsx

@@ -1340,6 +1340,24 @@ describe('NumberInput stepping', () => {
     expect(onChange).toHaveBeenLastCalledWith(4);
   });
 
+  it('does not step or commit on a composing keydown (IME)', () => {
+    const onChange = vi.fn();
+    render(<NumberInput label="Amount" value={5} onChange={onChange} />);
+    const input = screen.getByRole('spinbutton');
+
+    // The field is type="text", so an IME composes into it. Enter commits the
+    // candidate and the arrows walk the candidate window; neither should reach
+    // the stepping or commit paths. Both signals a browser may report.
+    fireEvent.keyDown(input, {key: 'ArrowUp', isComposing: true});
+    fireEvent.keyDown(input, {key: 'ArrowDown', keyCode: 229});
+    fireEvent.keyDown(input, {key: 'Enter', isComposing: true});
+    expect(onChange).not.toHaveBeenCalled();
+
+    // A real, non-composing ArrowUp still steps.
+    fireEvent.keyDown(input, {key: 'ArrowUp'});
+    expect(onChange).toHaveBeenLastCalledWith(6);
+  });
+
   it('lets onKeyDown cancel keyboard stepping', () => {
     const onChange = vi.fn();
     const onKeyDown = vi.fn((event: React.KeyboardEvent<HTMLInputElement>) =>

package/src/NumberInput/NumberInput.tsx

@@ -169,7 +169,7 @@ export type {
   InputStatus as NumberInputStatus,
   InputStatusType as NumberInputStatusType,
 } from '../Field';
-import {mergeProps, mergeRefs} from '../utils';
+import {isImeKeyEvent, mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
@@ -746,6 +746,14 @@ export function NumberInput({
   // Handle keyboard events
   const handleKeyDown = useCallback(
     (e: KeyboardEvent<HTMLInputElement>) => {
+      // The field is type="text" for formatted display, so an IME can compose
+      // into it: Enter commits the candidate and the arrows walk the candidate
+      // window. The composing keydown fires before compositionend, so without
+      // this guard those keystrokes would commit or step the value instead.
+      // See utils/ime.ts.
+      if (isImeKeyEvent(e.nativeEvent)) {
+        return;
+      }
       const hasModifier = e.altKey || e.ctrlKey || e.metaKey || e.shiftKey;
       if (!hasModifier && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
         onKeyDown?.(e);

package/src/PowerSearch/PowerSearch.test.tsx

@@ -158,6 +158,41 @@ describe('PowerSearch', () => {
     expect(screen.getByRole('combobox')).toHaveFocus();
   });
 
+  describe('token value truncation (#4759)', () => {
+    it('truncates token values by characters, not code units', () => {
+      const truncConfig: PowerSearchConfig = {
+        name: 'trunc',
+        fields: [
+          {
+            key: 'status',
+            label: 'Status',
+            operators: [{key: 'is', label: 'is', value: {type: 'string'}}],
+          },
+        ],
+      };
+      // 14 emoji = 28 code units but 14 user-perceived characters.
+      // adjustedMaxLength = max(15 - 'Status'.length - 'is'.length, 10) = 10,
+      // so the value truncates only past 13 characters, cutting at 10.
+      render(
+        <PowerSearch
+          config={truncConfig}
+          filters={[
+            {
+              field: 'status',
+              operator: 'is',
+              value: {type: 'string', value: '\u{1F600}'.repeat(14)},
+            },
+          ]}
+          onChange={() => {}}
+          maxTokenLength={15}
+        />,
+      );
+      expect(
+        screen.getByText('\u{1F600}'.repeat(10) + '...'),
+      ).toBeInTheDocument();
+    });
+  });
+
   describe('startIcon', () => {
     it('does not render a start icon when omitted', () => {
       render(<PowerSearch config={config} filters={[]} onChange={() => {}} />);
@@ -425,11 +460,15 @@ describe('PowerSearch', () => {
   });
 });
 
-
 describe('PowerSearch statusVariant forwarding', () => {
   it('defaults to attached (status renders with data-variant="attached")', () => {
     const {container} = render(
-      <PowerSearch config={config} filters={[]} onChange={() => {}} status={{type: 'error', message: 'Required'}} />,
+      <PowerSearch
+        config={config}
+        filters={[]}
+        onChange={() => {}}
+        status={{type: 'error', message: 'Required'}}
+      />,
     );
     expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
       'data-variant',
@@ -439,7 +478,13 @@ describe('PowerSearch statusVariant forwarding', () => {
 
   it('forwards statusVariant="detached" to the underlying Field status', () => {
     const {container} = render(
-      <PowerSearch config={config} filters={[]} onChange={() => {}} status={{type: 'error', message: 'Required'}} statusVariant="detached" />,
+      <PowerSearch
+        config={config}
+        filters={[]}
+        onChange={() => {}}
+        status={{type: 'error', message: 'Required'}}
+        statusVariant="detached"
+      />,
     );
     expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
       'data-variant',