@astryxdesign/core 0.7.5 → 0.7.6-canary.0d71e8d

package/src/Popover/__tests__/PopoverSecondDocument.a11y.chromium.spec.ts

@@ -8,12 +8,13 @@
  * @output Real-browser evidence that a Popover rendered into a second document
  *   (a same-origin iframe, a Document Picture-in-Picture window) focuses its
  *   first control on open, keeps Tab inside, closes on Escape through the layer
- *   stack with and without light dismiss, and hands focus back to its trigger
- *   after an outside click, exactly as the same Popover does in the page.
+ *   stack with and without light dismiss, hands focus back to its trigger after
+ *   an outside click, and scrolls once its own window is too short for it or
+ *   its content grows past it, exactly as the same Popover does in the page.
  * @position The half of the second-document rule jsdom cannot honestly reach:
- *   real key delivery to another window, native light dismiss, and the
- *   browser's own close watcher. The Vitest cases in `Popover/Popover.test.tsx`
- *   model the same rule with an iframe.
+ *   real key delivery to another window, native light dismiss, the browser's
+ *   own close watcher, and layout in another window. The Vitest cases in
+ *   `Popover/Popover.test.tsx` model the same rule with an iframe.
  *
  * SYNC: Fixture lives in
  *   /apps/storybook/stories/PopoverSecondDocumentA11y.stories.tsx.
@@ -54,6 +55,8 @@ type Where = 'page' | 'iframe' | 'Picture-in-Picture window';
 interface Surface {
   frame: Frame;
   keyboard: Keyboard;
+  /** Give the document's own window this height, in CSS pixels. */
+  resize: (height: number) => Promise<void>;
 }
 
 /** Load the story and return the document the test drives. */
@@ -67,20 +70,39 @@ async function mountStory(page: Page, where: Where): Promise<Surface> {
   await popOut.waitFor();
 
   if (where === 'page') {
-    return {frame: page.mainFrame(), keyboard: page.keyboard};
+    const viewport = page.viewportSize();
+    if (viewport == null) {
+      throw new Error('the page has no viewport size');
+    }
+    return {
+      frame: page.mainFrame(),
+      keyboard: page.keyboard,
+      resize: async height => {
+        await page.setViewportSize({width: viewport.width, height});
+      },
+    };
   }
   if (where === 'iframe') {
     const element = await page
       .locator('iframe[title="Second document"]')
       .elementHandle();
     const frame = await element?.contentFrame();
-    if (frame == null) {
+    if (element == null || frame == null) {
       throw new Error('the story renders no iframe');
     }
     await frame.getByRole('button', {name: 'Settings', exact: true}).waitFor();
     // Key presses go to whichever frame holds focus; the clicks below put it
     // in this one.
-    return {frame, keyboard: page.keyboard};
+    return {
+      frame,
+      keyboard: page.keyboard,
+      // The frame's window is as tall as the iframe element.
+      resize: async height => {
+        await element.evaluate((iframe, to) => {
+          (iframe as HTMLElement).style.height = `${to}px`;
+        }, height);
+      },
+    };
   }
   // Opening the window needs a user gesture; the click is one.
   const [pictureInPicture] = await Promise.all([
@@ -90,9 +112,19 @@ async function mountStory(page: Page, where: Where): Promise<Surface> {
   await pictureInPicture
     .getByRole('button', {name: 'Settings', exact: true})
     .waitFor();
+  const pictureInPictureViewport = pictureInPicture.viewportSize();
+  if (pictureInPictureViewport == null) {
+    throw new Error('the Picture-in-Picture window has no viewport size');
+  }
   return {
     frame: pictureInPicture.mainFrame(),
     keyboard: pictureInPicture.keyboard,
+    resize: async height => {
+      await pictureInPicture.setViewportSize({
+        width: pictureInPictureViewport.width,
+        height,
+      });
+    },
   };
 }
 
@@ -181,6 +213,36 @@ for (const where of [
       await expect(trigger).toBeFocused();
     });
 
+    test('scrolls once its own window is too short for it, and stops once it fits', async ({
+      page,
+    }) => {
+      const {frame, resize} = await mountStory(page, where);
+      await resize(700);
+      await open(frame, 'Long list');
+      const surface = frame.getByRole('dialog', {name: 'Long list'});
+      await expect(surface).toHaveCSS('overflow-y', 'visible');
+
+      await resize(240);
+      await expect(surface).toHaveCSS('overflow-y', 'auto');
+      await resize(700);
+      await expect(surface).toHaveCSS('overflow-y', 'visible');
+    });
+
+    test('scrolls once its content grows past its window', async ({page}) => {
+      const {frame, resize} = await mountStory(page, where);
+      await resize(700);
+      await open(frame, 'Long list');
+      const surface = frame.getByRole('dialog', {name: 'Long list'});
+      await expect(surface).toHaveCSS('overflow-y', 'visible');
+
+      // An inline style is an attribute change the popover's mutation
+      // observer ignores, so only its ResizeObserver can see the growth.
+      await surface.evaluate(element => {
+        (element.firstElementChild as HTMLElement).style.minHeight = '2000px';
+      });
+      await expect(surface).toHaveCSS('overflow-y', 'auto');
+    });
+
     if (where !== 'page') {
       test('an Escape press affects only the document it was made in', async ({
         page,

package/src/Popover/usePopover.tsx

@@ -459,13 +459,20 @@ function usePopoverImplementation(
     }
   }, [layer.isOpen, hasAutoFocus, focusInitialTarget]);
 
-  // Combined ref for trigger element (layer anchor + our ref)
+  // Combined ref for trigger element (layer anchor + our ref). It is keyed on
+  // the layer's own ref, not the whole layer: the layer object changes with
+  // every new onShow or onHide, and a trigger ref that changed with it made
+  // React detach and reattach the trigger on every render. It reads nothing
+  // else from the layer, and layer.ref (useLayer's contextRef) reads only refs
+  // and its anchor name and anchor-clearance option, so nothing in it goes
+  // stale.
+  const layerRef = layer.ref;
   const triggerRef = useCallback(
     (el: HTMLElement | null) => {
       triggerElementRef.current = el;
-      layer.ref(el);
+      layerRef(el);
     },
-    [layer],
+    [layerRef],
   );
 
   // Show function with optional focus preservation

package/src/PowerSearch/PowerSearch.test.tsx

@@ -476,6 +476,30 @@ describe('PowerSearch', () => {
       });
     });
 
+    it('announces Clear all in its own words, "All filters removed" (component:PowerSearch; Tokenizer AR7)', async () => {
+      const onChange = vi.fn();
+      render(
+        <PowerSearch
+          config={config}
+          filters={[
+            {
+              field: 'status',
+              operator: 'is',
+              value: {type: 'enum', value: 'open'},
+            },
+          ]}
+          onChange={onChange}
+        />,
+      );
+      fireEvent.click(screen.getByRole('button', {name: 'Clear all'}));
+      expect(onChange).toHaveBeenCalledWith([], 'remove', 0);
+      await waitFor(() => {
+        expect(politeRegion()).toHaveTextContent('All filters removed');
+      });
+      // Not the Tokenizer's own words.
+      expect(politeRegion()).not.toHaveTextContent('All items removed');
+    });
+
     it('does not announce the result count present on mount under StrictMode, only a later change', async () => {
       // StrictMode replays the mount effects: a mounted-flag guard is reset by
       // the replay and speaks the initial count unprompted; comparing against

package/src/PowerSearch/PowerSearch.tsx

@@ -30,6 +30,7 @@ import {
   type TokenizerHandle,
   type TokenizerOverflowBehavior,
 } from '../Tokenizer';
+import {TokenizerClearAllMessageContext} from '../Tokenizer/TokenizerClearAllMessageContext';
 import {TypeaheadItem} from '../Typeahead/TypeaheadItem';
 import {Token} from '../Token';
 import {Avatar} from '../Avatar';
@@ -1062,6 +1063,12 @@ export function PowerSearch({
   // replay (which resets a flag and would speak the count present on mount
   // unprompted) announces nothing until the count changes.
   const announce = useAnnounce();
+  // PowerSearch words its Clear all as its record does; the field announces
+  // these words instead of Tokenizer's (component:Tokenizer AR7).
+  const clearAllMessage = useMemo(
+    () => t('@astryx.powersearch.allFiltersRemoved'),
+    [t],
+  );
   const announcedResultCountRef = useRef(resultCountText);
   useEffect(() => {
     if (resultCountText === announcedResultCountRef.current) {
@@ -1099,37 +1106,41 @@ export function PowerSearch({
           popover.triggerRef as React.Ref<HTMLDivElement>,
         )}
         {...themeProps('power-search')}>
-        <Tokenizer
-          handleRef={tokenizerRef}
-          label={label}
-          isLabelHidden={isLabelHidden}
-          searchSource={searchSource}
-          value={tokenizerValue}
-          onChange={handleTokenizerChange}
-          renderToken={renderToken}
-          renderItem={renderItem}
-          maxMenuItems={MAX_BROWSE_MENU_ITEMS}
-          menuWidth={menuWidth}
-          placeholder={filters.length === 0 ? placeholder : ''}
-          hasAutoFocus={hasAutoFocus}
-          hasClear={hasClear && !isReadOnly}
-          startIcon={startIcon}
-          endContent={combinedEndContent}
-          isDisabled={isDisabled}
-          disabledMessage={disabledMessage}
-          size={size}
-          tokenOverflowBehavior={tokenOverflowBehavior}
-          hasEntriesOnFocus
-          debounceMs={0}
-          status={status}
-          statusVariant={statusVariant}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          containerXstyle={xstyle}
-          containerClassName={className}
-          containerStyle={style}
-          data-testid={testId}
-        />
+        {/* The field's Clear all announces PowerSearch's own words
+            (component:PowerSearch; component:Tokenizer AR7). */}
+        <TokenizerClearAllMessageContext value={clearAllMessage}>
+          <Tokenizer
+            handleRef={tokenizerRef}
+            label={label}
+            isLabelHidden={isLabelHidden}
+            searchSource={searchSource}
+            value={tokenizerValue}
+            onChange={handleTokenizerChange}
+            renderToken={renderToken}
+            renderItem={renderItem}
+            maxMenuItems={MAX_BROWSE_MENU_ITEMS}
+            menuWidth={menuWidth}
+            placeholder={filters.length === 0 ? placeholder : ''}
+            hasAutoFocus={hasAutoFocus}
+            hasClear={hasClear && !isReadOnly}
+            startIcon={startIcon}
+            endContent={combinedEndContent}
+            isDisabled={isDisabled}
+            disabledMessage={disabledMessage}
+            size={size}
+            tokenOverflowBehavior={tokenOverflowBehavior}
+            hasEntriesOnFocus
+            debounceMs={0}
+            status={status}
+            statusVariant={statusVariant}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            containerXstyle={xstyle}
+            containerClassName={className}
+            containerStyle={style}
+            data-testid={testId}
+          />
+        </TokenizerClearAllMessageContext>
       </div>
       {popover.render(popoverContent, {
         placement: 'below',