@astryxdesign/core 0.1.4 → 0.1.5-canary.76e6697

package/src/Resizable/ResizeHandle.test.tsx

@@ -0,0 +1,218 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ResizeHandle.test.tsx
+ * @input Uses vitest, @testing-library/react, useResizable, ResizeHandle
+ * @output Unit tests for ResizeHandle keyboard operability and ARIA state
+ * @position Testing; validates ResizeHandle.tsx implementation
+ *
+ * SYNC: When ResizeHandle.tsx changes, update tests to match new behavior
+ *
+ * These tests guard the WAI-ARIA window-splitter keyboard contract: the
+ * keydown handler must live on the focusable `role="separator"` element.
+ * Keyboard resizing is pure state math in useResizable (no layout
+ * measurement), so the observable effect asserted here is aria-valuenow,
+ * which is bound to the region's `_size`.
+ */
+
+import {describe, it, expect, vi} from 'vitest';
+import {render, screen, fireEvent, act} from '@testing-library/react';
+import {ResizeHandle} from './ResizeHandle';
+import type {ResizeHandleProps} from './ResizeHandle';
+import {useResizable} from './useResizable';
+import type {ResizableProps, UseResizableSingleConfig} from './useResizable';
+
+const KEYBOARD_STEP = 10;
+const KEYBOARD_LARGE_STEP = 50;
+
+function Harness({
+  config,
+  handleProps,
+}: {
+  config?: UseResizableSingleConfig;
+  handleProps?: Partial<ResizeHandleProps>;
+}) {
+  const region = useResizable(
+    config ?? {defaultSize: 200, minSizePx: 100, maxSizePx: 400},
+  );
+  return (
+    <ResizeHandle resizable={region.props} label="Resize" {...handleProps} />
+  );
+}
+
+function getSeparator(): HTMLElement {
+  return screen.getByRole('separator');
+}
+
+describe('ResizeHandle', () => {
+  // --- ARIA wiring ---
+
+  it('exposes the region size and bounds via ARIA', () => {
+    render(<Harness />);
+    const separator = getSeparator();
+    expect(separator).toHaveAttribute('aria-valuenow', '200');
+    expect(separator).toHaveAttribute('aria-valuemin', '100');
+    expect(separator).toHaveAttribute('aria-valuemax', '400');
+    // Horizontal layout splits along the vertical axis.
+    expect(separator).toHaveAttribute('aria-orientation', 'vertical');
+    expect(separator).toHaveAttribute('aria-label', 'Resize');
+  });
+
+  it('makes the separator focusable', () => {
+    render(<Harness />);
+    const separator = getSeparator();
+    expect(separator).toHaveAttribute('tabindex', '0');
+    act(() => separator.focus());
+    expect(separator).toHaveFocus();
+  });
+
+  // --- Keyboard resizing (the fix: handler lives on the focused separator) ---
+
+  it('grows the panel by a step on ArrowRight', () => {
+    render(<Harness />);
+    const separator = getSeparator();
+    act(() => separator.focus());
+    fireEvent.keyDown(separator, {key: 'ArrowRight'});
+    expect(separator).toHaveAttribute(
+      'aria-valuenow',
+      String(200 + KEYBOARD_STEP),
+    );
+  });
+
+  it('shrinks the panel by a step on ArrowLeft', () => {
+    render(<Harness />);
+    const separator = getSeparator();
+    act(() => separator.focus());
+    fireEvent.keyDown(separator, {key: 'ArrowLeft'});
+    expect(separator).toHaveAttribute(
+      'aria-valuenow',
+      String(200 - KEYBOARD_STEP),
+    );
+  });
+
+  it('uses the large step when Shift is held', () => {
+    render(<Harness />);
+    const separator = getSeparator();
+    act(() => separator.focus());
+    fireEvent.keyDown(separator, {key: 'ArrowRight', shiftKey: true});
+    expect(separator).toHaveAttribute(
+      'aria-valuenow',
+      String(200 + KEYBOARD_LARGE_STEP),
+    );
+  });
+
+  it('jumps to the minimum on Home', () => {
+    render(<Harness />);
+    const separator = getSeparator();
+    act(() => separator.focus());
+    fireEvent.keyDown(separator, {key: 'Home'});
+    expect(separator).toHaveAttribute('aria-valuenow', '100');
+  });
+
+  it('jumps to the maximum on End', () => {
+    render(<Harness />);
+    const separator = getSeparator();
+    act(() => separator.focus());
+    fireEvent.keyDown(separator, {key: 'End'});
+    expect(separator).toHaveAttribute('aria-valuenow', '400');
+  });
+
+  it('resizes along the block axis for a vertical handle', () => {
+    render(
+      <Harness
+        config={{defaultSize: 200, minSizePx: 100, maxSizePx: 400}}
+        handleProps={{direction: 'vertical'}}
+      />,
+    );
+    const separator = getSeparator();
+    expect(separator).toHaveAttribute('aria-orientation', 'horizontal');
+    act(() => separator.focus());
+    fireEvent.keyDown(separator, {key: 'ArrowDown'});
+    expect(separator).toHaveAttribute(
+      'aria-valuenow',
+      String(200 + KEYBOARD_STEP),
+    );
+    fireEvent.keyDown(separator, {key: 'ArrowUp'});
+    expect(separator).toHaveAttribute('aria-valuenow', '200');
+  });
+
+  it('collapses on Enter when the region is collapsible', () => {
+    render(
+      <Harness
+        config={{
+          defaultSize: 200,
+          minSizePx: 100,
+          maxSizePx: 400,
+          collapsible: true,
+        }}
+      />,
+    );
+    const separator = getSeparator();
+    act(() => separator.focus());
+    fireEvent.keyDown(separator, {key: 'Enter'});
+    expect(separator).toHaveAttribute('aria-valuenow', '0');
+  });
+
+  // --- Disabled guard ---
+
+  it('ignores keyboard input when disabled', () => {
+    render(<Harness handleProps={{isDisabled: true}} />);
+    const separator = getSeparator();
+    expect(separator).toHaveAttribute('tabindex', '-1');
+    fireEvent.keyDown(separator, {key: 'ArrowRight'});
+    expect(separator).toHaveAttribute('aria-valuenow', '200');
+  });
+
+  // --- Drag listener lifecycle ---
+
+  it('stops driving the region and releases window listeners when unmounted mid-drag', () => {
+    const resizable: ResizableProps = {
+      _size: 200,
+      _isCollapsed: false,
+      _onResizeStart: vi.fn(),
+      _onResizeMove: vi.fn(),
+      _onResizeEnd: vi.fn(),
+      _minSizePx: 100,
+      _maxSizePx: 400,
+      _snaps: [],
+      _collapsedSize: 40,
+      _collapsible: false,
+      _isResizableProps: true,
+    };
+    const {unmount} = render(
+      <ResizeHandle resizable={resizable} label="Resize" />,
+    );
+    const separator = screen.getByRole('separator');
+    const hitArea = separator.firstElementChild as HTMLElement;
+
+    // Start a drag and confirm moves reach the region.
+    fireEvent.pointerDown(hitArea, {clientX: 0, clientY: 0});
+    expect(resizable._onResizeStart).toHaveBeenCalledTimes(1);
+    fireEvent.pointerMove(window, {clientX: 10, clientY: 0});
+    expect(resizable._onResizeMove).toHaveBeenCalledTimes(1);
+
+    // Unmount mid-drag: the window listeners must be torn down, so further
+    // pointer moves no longer resize the (still-mounted) region, and the
+    // body cursor/user-select overrides are released.
+    unmount();
+    fireEvent.pointerMove(window, {clientX: 50, clientY: 0});
+    expect(resizable._onResizeMove).toHaveBeenCalledTimes(1);
+    expect(document.body.style.cursor).toBe('');
+    expect(document.body.style.userSelect).toBe('');
+  });
+
+  // --- Prop composition (ordering choice: handler sits after {...props}) ---
+
+  it('runs a consumer onKeyDown alongside keyboard resizing', () => {
+    const onKeyDown = vi.fn();
+    render(<Harness handleProps={{onKeyDown}} />);
+    const separator = getSeparator();
+    act(() => separator.focus());
+    fireEvent.keyDown(separator, {key: 'ArrowRight'});
+    expect(onKeyDown).toHaveBeenCalledTimes(1);
+    expect(separator).toHaveAttribute(
+      'aria-valuenow',
+      String(200 + KEYBOARD_STEP),
+    );
+  });
+});

package/src/Resizable/ResizeHandle.tsx

@@ -316,6 +316,9 @@ export function ResizeHandle({
   ...props
 }: ResizeHandleProps) {
   const handleRef = useRef<HTMLDivElement>(null);
+  // Removes the in-flight drag's window listeners (and resets body styles).
+  // Held in a ref so unmount can tear down a drag that never got a pointerup.
+  const dragCleanupRef = useRef<(() => void) | null>(null);
   const [isDragging, setIsDragging] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
@@ -375,10 +378,12 @@ export function ResizeHandle({
         window.removeEventListener('pointermove', onMove);
         window.removeEventListener('pointerup', onUp);
         window.removeEventListener('pointercancel', onCancel);
+        dragCleanupRef.current = null;
       }
       window.addEventListener('pointermove', onMove);
       window.addEventListener('pointerup', onUp);
       window.addEventListener('pointercancel', onCancel);
+      dragCleanupRef.current = cleanup;
     },
     [isDisabled, resizable, isHorizontal, getRTLMultiplier, sign],
   );
@@ -454,14 +459,19 @@ export function ResizeHandle({
   }, [isDisabled, resizable]);
 
   // --- Cleanup on unmount ---
+  // A drag in flight when the handle unmounts never gets its pointerup, so
+  // tear down the window listeners here too — otherwise every pointermove
+  // keeps driving the (still-mounted) region's resize state after the handle
+  // is gone, and the body cursor/user-select overrides stick.
   useEffect(() => {
     return () => {
-      if (isDragging) {
+      if (dragCleanupRef.current) {
+        dragCleanupRef.current();
         document.body.style.cursor = '';
         document.body.style.userSelect = '';
       }
     };
-  }, [isDragging]);
+  }, []);
 
   // --- ARIA ---
   const ariaValueNow = resizable ? resizable._size : undefined;
@@ -510,7 +520,16 @@ export function ResizeHandle({
         ),
         className,
       )}
-      {...props}>
+      {...props}
+      // Keyboard resizing must fire from the focusable separator, not a child:
+      // keydown fires on the focused element and bubbles up, so a handler on a
+      // descendant never runs (per the WAI-ARIA window-splitter pattern).
+      // Placed after {...props} and composed with any consumer onKeyDown so
+      // this accessibility-critical handler can't be clobbered by a passed prop.
+      onKeyDown={e => {
+        props.onKeyDown?.(e);
+        handleKeyDown(e);
+      }}>
       {/* Wider invisible hit area for pointer interaction */}
       <div
         {...stylex.props(
@@ -528,7 +547,6 @@ export function ResizeHandle({
             setIsHovered(false);
           }
         }}
-        onKeyDown={handleKeyDown}
       />
       {/* Pill grip indicator — themed via .astryx-resize-handle-pill */}
       {children ?? (

package/src/SegmentedControl/SegmentedControl.doc.mjs

@@ -16,7 +16,7 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-segmented-control', visualProps: ['size']},
-      {className: 'astryx-segmented-control-item'},
+      {className: 'astryx-segmented-control-item', visualProps: ['size'], states: ['selected', 'disabled']},
     ],
     vars: [
       {name: '--_segmented-control-radius', description: 'Border radius of the segmented control', default: 'var(--radius-element)', private: true},

package/src/SegmentedControl/SegmentedControl.test.tsx

@@ -259,6 +259,56 @@ describe('SegmentedControl', () => {
 });
 
 describe('SegmentedControl keyboard navigation', () => {
+  describe('tab-through is a pure focus move (#3597)', () => {
+    it('does not fire onChange when tabbing in with an unmatched value', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      render(
+        <>
+          <button type="button">before</button>
+          <SegmentedControl label="View" value="archived" onChange={onChange}>
+            <SegmentedControlItem value="grid" label="Grid" />
+            <SegmentedControlItem value="list" label="List" />
+          </SegmentedControl>
+        </>,
+      );
+      screen.getByText('before').focus();
+      await user.tab();
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it('does not fire onChange when tabbing in while the selected item is disabled', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      render(
+        <>
+          <button type="button">before</button>
+          <SegmentedControl label="View" value="list" onChange={onChange}>
+            <SegmentedControlItem value="grid" label="Grid" />
+            <SegmentedControlItem value="list" label="List" isDisabled />
+          </SegmentedControl>
+        </>,
+      );
+      screen.getByText('before').focus();
+      await user.tab();
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it('still selects on arrow-key navigation within the group', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      render(
+        <SegmentedControl label="View" value="grid" onChange={onChange}>
+          <SegmentedControlItem value="grid" label="Grid" />
+          <SegmentedControlItem value="list" label="List" />
+        </SegmentedControl>,
+      );
+      screen.getByRole('radio', {name: 'Grid'}).focus();
+      await user.keyboard('{ArrowRight}');
+      expect(onChange).toHaveBeenCalledWith('list');
+    });
+  });
+
   it('navigates with ArrowRight and selects', async () => {
     const user = userEvent.setup();
     const handleChange = vi.fn();
@@ -588,3 +638,145 @@ describe('SegmentedControl disabled state', () => {
     });
   });
 });
+
+describe('SegmentedControl data-testid forwarding', () => {
+  it('forwards data-testid to the radiogroup', () => {
+    render(
+      <SegmentedControl
+        value="grid"
+        onChange={() => {}}
+        label="View mode"
+        data-testid="view-toggle">
+        <SegmentedControlItem value="grid" label="Grid" />
+        <SegmentedControlItem value="list" label="List" />
+      </SegmentedControl>,
+    );
+
+    expect(screen.getByTestId('view-toggle')).toBe(
+      screen.getByRole('radiogroup'),
+    );
+  });
+
+  it('forwards data-testid to an individual item button', () => {
+    render(
+      <SegmentedControl value="grid" onChange={() => {}} label="View mode">
+        <SegmentedControlItem
+          value="grid"
+          label="Grid"
+          data-testid="opt-grid"
+        />
+        <SegmentedControlItem
+          value="list"
+          label="List"
+          data-testid="opt-list"
+        />
+      </SegmentedControl>,
+    );
+
+    expect(screen.getByTestId('opt-grid')).toBe(
+      screen.getByRole('radio', {name: 'Grid'}),
+    );
+    expect(screen.getByTestId('opt-list')).toBe(
+      screen.getByRole('radio', {name: 'List'}),
+    );
+  });
+
+  it('does not let a forwarded prop override the computed role', () => {
+    render(
+      // A consumer-supplied role must not clobber the component's own
+      // radiogroup role (the computed role is applied after {...rest}).
+      <SegmentedControl
+        value="grid"
+        onChange={() => {}}
+        label="View mode"
+        role="tablist"
+        data-testid="view-toggle">
+        <SegmentedControlItem value="grid" label="Grid" />
+      </SegmentedControl>,
+    );
+
+    expect(screen.getByTestId('view-toggle')).toHaveAttribute(
+      'role',
+      'radiogroup',
+    );
+  });
+});
+
+describe('SegmentedControlItem onClick composition', () => {
+  it('calls a consumer onClick in addition to selecting the item', () => {
+    const onChange = vi.fn();
+    const onClick = vi.fn();
+    render(
+      <SegmentedControl value="grid" onChange={onChange} label="View mode">
+        <SegmentedControlItem value="list" label="List" onClick={onClick} />
+      </SegmentedControl>,
+    );
+
+    fireEvent.click(screen.getByRole('radio', {name: 'List'}));
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('list');
+  });
+
+  it('lets a consumer onClick opt out of selection via preventDefault', () => {
+    const onChange = vi.fn();
+    render(
+      <SegmentedControl value="grid" onChange={onChange} label="View mode">
+        <SegmentedControlItem
+          value="list"
+          label="List"
+          onClick={e => e.preventDefault()}
+        />
+      </SegmentedControl>,
+    );
+
+    fireEvent.click(screen.getByRole('radio', {name: 'List'}));
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
+
+describe('SegmentedControl container handler forwarding', () => {
+  it('forwards a consumer onKeyDown while keeping arrow-key navigation', async () => {
+    const user = userEvent.setup();
+    const onKeyDown = vi.fn();
+    const onChange = vi.fn();
+    render(
+      <SegmentedControl
+        value="grid"
+        onChange={onChange}
+        label="View mode"
+        onKeyDown={onKeyDown}>
+        <SegmentedControlItem value="grid" label="Grid" />
+        <SegmentedControlItem value="list" label="List" />
+      </SegmentedControl>,
+    );
+
+    screen.getByRole('radio', {name: 'Grid'}).focus();
+    await user.keyboard('{ArrowRight}');
+
+    expect(onKeyDown).toHaveBeenCalled();
+    // Built-in navigation still ran.
+    expect(onChange).toHaveBeenCalledWith('list');
+  });
+
+  it('lets a consumer onKeyDown opt out of built-in navigation via preventDefault', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(
+      <SegmentedControl
+        value="grid"
+        onChange={onChange}
+        label="View mode"
+        onKeyDown={e => e.preventDefault()}>
+        <SegmentedControlItem value="grid" label="Grid" />
+        <SegmentedControlItem value="list" label="List" />
+      </SegmentedControl>,
+    );
+
+    screen.getByRole('radio', {name: 'Grid'}).focus();
+    await user.keyboard('{ArrowRight}');
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

package/src/SegmentedControl/SegmentedControl.tsx

@@ -26,7 +26,7 @@ import type {
   SegmentedControlSize,
   SegmentedControlLayout,
 } from './SegmentedControlContext';
-import {mergeProps, mergeRefs} from '../utils';
+import {mergeProps, mergeRefs, composeEventHandlers} from '../utils';
 import {useSize} from '../SizeContext/SizeContext';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
@@ -152,6 +152,10 @@ export function SegmentedControl({
   xstyle,
   className,
   style,
+  onKeyDown: onKeyDownProp,
+  onFocus: onFocusProp,
+  onBlur: onBlurProp,
+  ...rest
 }: SegmentedControlProps) {
   const size = useSize(sizeProp, 'md');
 
@@ -188,10 +192,14 @@ export function SegmentedControl({
 
   const handleContainerKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLDivElement>) => {
+      onKeyDownProp?.(e);
+      if (e.defaultPrevented) {
+        return;
+      }
       hint.onKeyDown(e);
       handleKeyDown(e);
     },
-    [hint, handleKeyDown],
+    [onKeyDownProp, hint, handleKeyDown],
   );
 
   // Selection-follows-focus (APG radiogroup): useListFocus only *moves* focus,
@@ -202,12 +210,25 @@ export function SegmentedControl({
   // and the already-selected value is skipped so an initial Tab-in (or a click
   // on the current segment) is a no-op, matching click behavior.
   const handleContainerFocus = useCallback(
-    (e: React.FocusEvent) => {
+    (e: React.FocusEvent<HTMLDivElement>) => {
+      onFocusProp?.(e);
+      if (e.defaultPrevented) {
+        return;
+      }
       hint.onFocus(e);
       handleFocus(e);
       if (isDisabled) {
         return;
       }
+      // Only select when focus moved WITHIN the group (arrow/Home/End — APG
+      // selection-follows-focus). When focus is entering from outside, Tab
+      // must stay a pure focus move: with an unmatched or disabled-selected
+      // value the roving tab stop falls back to the first enabled radio, and
+      // selecting it here would rewrite the form value on mere traversal.
+      // Clicks are unaffected: the item's own handleClick selects.
+      if (!e.currentTarget.contains(e.relatedTarget)) {
+        return;
+      }
       const focused = (e.target as HTMLElement | null)?.closest<HTMLElement>(
         '[role="radio"][data-value]',
       );
@@ -219,7 +240,7 @@ export function SegmentedControl({
         onChange(nextValue);
       }
     },
-    [hint, handleFocus, isDisabled, onChange, value],
+    [onFocusProp, hint, handleFocus, isDisabled, onChange, value],
   );
 
   const contextValue = useMemo(
@@ -238,6 +259,7 @@ export function SegmentedControl({
     <SegmentedControlContext value={contextValue}>
       <div
         ref={mergeRefs(ref, listRef, disabledMessageTooltip.ref)}
+        {...rest}
         role="radiogroup"
         aria-label={label}
         aria-disabled={isDisabled || undefined}
@@ -246,7 +268,7 @@ export function SegmentedControl({
         }
         onKeyDown={handleContainerKeyDown}
         onFocus={handleContainerFocus}
-        onBlur={hint.onBlur}
+        onBlur={composeEventHandlers(onBlurProp, hint.onBlur)}
         {...mergeProps(
           themeProps('segmented-control', {size}),
           stylex.props(

package/src/SegmentedControl/SegmentedControlItem.tsx

@@ -15,7 +15,7 @@
  * - /packages/cli/templates/blocks/components/SegmentedControl/ (showcase blocks)
  */
 
-import React, {useCallback, type ReactNode} from 'react';
+import React, {type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {
   colorVars,
@@ -29,7 +29,7 @@ import {
 } from '../theme/tokens.stylex';
 import {useSegmentedControlContext} from './SegmentedControlContext';
 import type {SegmentedControlSize} from './SegmentedControlContext';
-import {mergeProps} from '../utils';
+import {mergeProps, composeEventHandlers} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 
@@ -168,6 +168,8 @@ export function SegmentedControlItem({
   isLabelHidden = false,
   icon,
   isDisabled = false,
+  onClick: onClickProp,
+  ...rest
 }: SegmentedControlItemProps) {
   const ctx = useSegmentedControlContext();
 
@@ -182,11 +184,13 @@ export function SegmentedControlItem({
   const size: SegmentedControlSize = ctx.size;
   const isFill = ctx.layout === 'fill';
 
-  const handleClick = useCallback(() => {
+  // Consumer-first: a consumer onClick can call preventDefault() to opt out of
+  // selection; otherwise selection proceeds when enabled and not selected.
+  const handleClick = composeEventHandlers(onClickProp, () => {
     if (!isItemDisabled && !isSelected) {
       ctx.onChange(value);
     }
-  }, [ctx, value, isItemDisabled, isSelected]);
+  });
 
   const iconElement = icon ? (
     <span {...stylex.props(styles.icon, iconSizeStyles[size])}>{icon}</span>
@@ -195,6 +199,7 @@ export function SegmentedControlItem({
   return (
     <button
       ref={ref}
+      {...rest}
       type="button"
       role="radio"
       aria-checked={isSelected}

package/src/SelectableCard/SelectableCard.doc.mjs

@@ -34,7 +34,7 @@ export const docs = {
   ],
   theming: {
     container: true,
-    targets: [{className: 'astryx-selectable-card', visualProps: ['selected']}],
+    targets: [{className: 'astryx-selectable-card', visualProps: ['selected', 'variant']}],
   },
   playground: {
     defaults: {

package/src/Selector/Selector.test.tsx

@@ -186,7 +186,33 @@ describe('Selector', () => {
       .getByRole('listbox', {hidden: true})
       .closest('[popover]');
     expect(popover?.getAttribute('style')).toContain(
-      'position-area: top span-right',
+      'position-area: self-block-start span-self-inline-end',
+    );
+  });
+
+  it('emits the direction-independent logical mapping under an RTL ancestor (#3389)', async () => {
+    // The self-* position-area keywords resolve against the popover's own
+    // inherited direction in the browser, so RTL emits the same string as
+    // LTR and the mirroring is pure CSS — jsdom can only assert the string.
+    const user = userEvent.setup();
+    render(
+      <div style={{direction: 'rtl'}}>
+        <Selector
+          label="Fruit"
+          options={OPTIONS}
+          value="Banana"
+          onChange={() => {}}
+        />
+      </div>,
+    );
+
+    await user.click(screen.getByRole('combobox'));
+
+    const popover = screen
+      .getByRole('listbox', {hidden: true})
+      .closest('[popover]');
+    expect(popover?.getAttribute('style')).toContain(
+      'position-area: self-block-end span-self-inline-end',
     );
   });