@astryxdesign/core 0.1.8 → 0.1.9-canary.02ef052

package/src/hooks/useListFocus.ts

@@ -4,16 +4,20 @@
 
 /**
  * @file useListFocus.ts
- * @input Uses React useCallback, useRef, useIsomorphicLayoutEffect
+ * @input Uses React useCallback, useRef, useIsomorphicLayoutEffect,
+ *   isRtlElement
  * @output Exports useListFocus hook for linear list keyboard navigation
  * @position Core hook; used by TabMenu for dropdown menu navigation, Toolbar
  *   for roving tabindex, ButtonGroup, ContextMenu, NavHeadingMenu, and more.
+ *   Auto-detects RTL from the container's computed direction so horizontal
+ *   arrow keys follow visual direction (WCAG 1.3.2).
  *
  * SYNC: When modified, update:
  * - /packages/core/src/hooks/index.ts
  */
 
 import {useCallback, useRef} from 'react';
+import {isRtlElement} from './isRtlElement';
 import {useIsomorphicLayoutEffect} from './useIsomorphicLayoutEffect';
 
 /**
@@ -34,6 +38,25 @@ export interface UseListFocusOptions {
    */
   itemSelector?: string;
 
+  /**
+   * Selector identifying a list boundary — used to scope a list that contains
+   * *nested* lists of the same kind (e.g. a menu with submenu flyouts).
+   *
+   * Overlays like submenu flyouts render inline (native popover, not a
+   * portal), so a nested list's items are DOM descendants of the parent list.
+   * Without scoping, the parent's `querySelectorAll` sweeps the nested items
+   * into its roving order (leaving hidden items `.focus()` can't land on), and
+   * key events from the nested list bubble into the parent's handler (moving
+   * focus twice). When set, `useListFocus`:
+   *   - counts an item as its own only when the item's nearest
+   *     `boundarySelector` ancestor is this list's container, and
+   *   - ignores key events whose nearest `boundarySelector` ancestor is not
+   *     this list's container (i.e. they originated in a nested list).
+   *
+   * Typically `'[role="menu"]'` for menus. Omit for flat lists.
+   */
+  boundarySelector?: string;
+
   /**
    * Whether arrow navigation wraps around at the ends.
    * @default true
@@ -62,7 +85,12 @@ export interface UseListFocusOptions {
    * Whether the list is in a right-to-left context. When true, ArrowLeft and
    * ArrowRight are swapped so horizontal navigation follows visual direction.
    * Only affects horizontal (`'horizontal'`/`'both'`) navigation.
-   * @default false
+   *
+   * When omitted, the direction is auto-detected from the container's computed
+   * `direction` (read lazily on keydown, only for horizontal arrow keys), so
+   * lists inside `dir="rtl"` subtrees flip automatically. Pass an explicit
+   * boolean to override detection.
+   * @default undefined (auto-detect from the container)
    */
   isRtl?: boolean;
 
@@ -128,6 +156,23 @@ export interface UseListFocusReturn<T extends HTMLElement = HTMLElement> {
    * Focus the last enabled item. Returns true when an item was focused.
    */
   focusLast: () => boolean;
+
+  /**
+   * Whether a key event belongs to this list level (vs. a nested list that
+   * shares the same `boundarySelector`). Useful when a consumer wraps
+   * `handleKeyDown` with extra behavior (Enter/Space activation, typeahead)
+   * and must apply it only to events this level owns. Always true when no
+   * `boundarySelector` is configured.
+   */
+  ownsEvent: (e: React.KeyboardEvent) => boolean;
+
+  /**
+   * The current, in-DOM-order list of this level's focusable items (already
+   * scoped by `boundarySelector`). Exposed so consumers can build typeahead
+   * targets from the same source of truth as roving focus, rather than
+   * re-querying and re-filtering.
+   */
+  getItems: () => HTMLElement[];
 }
 
 // Text-editing inputs whose caret must not be hijacked by arrow navigation.
@@ -271,11 +316,12 @@ export function useListFocus<T extends HTMLElement = HTMLElement>(
 ): UseListFocusReturn<T> {
   const {
     itemSelector = '[role="menuitem"]',
+    boundarySelector,
     wrap = true,
     onEscape,
     orientation = 'vertical',
     hasHomeEnd = true,
-    isRtl = false,
+    isRtl,
     hasRovingTabIndex = false,
     hasCaretGuard = false,
   } = options;
@@ -299,13 +345,43 @@ export function useListFocus<T extends HTMLElement = HTMLElement>(
    * Get all focusable items in the list.
    */
   const getItems = useCallback((): HTMLElement[] => {
-    if (!listRef.current) {
+    const listEl = listRef.current;
+    if (!listEl) {
       return [];
     }
-    return Array.from(
-      listRef.current.querySelectorAll<HTMLElement>(itemSelector),
+    const matched = Array.from(
+      listEl.querySelectorAll<HTMLElement>(itemSelector),
     );
-  }, [itemSelector]);
+    // When a boundary is set, keep only items that belong to THIS list level —
+    // i.e. whose nearest boundary ancestor is our own container. This excludes
+    // items inside nested lists (e.g. inline submenu flyouts) that would
+    // otherwise be swept in by querySelectorAll.
+    if (!boundarySelector) {
+      return matched;
+    }
+    return matched.filter(el => el.closest(boundarySelector) === listEl);
+  }, [itemSelector, boundarySelector]);
+
+  /**
+   * Whether a key event belongs to this list level rather than a nested list.
+   * With a boundary set, an event that originated inside a nested boundary
+   * (e.g. a submenu flyout) has bubbled up to us and must be ignored so we
+   * don't double-handle navigation. Without a boundary, every event is ours.
+   */
+  const ownsEvent = useCallback(
+    (e: React.KeyboardEvent): boolean => {
+      const listEl = listRef.current;
+      if (!listEl || !boundarySelector) {
+        return true;
+      }
+      const target = e.target as HTMLElement | null;
+      if (!target) {
+        return true;
+      }
+      return target.closest(boundarySelector) === listEl;
+    },
+    [boundarySelector],
+  );
 
   /**
    * Find the next enabled item index from `start`, moving by `step`, optionally
@@ -473,6 +549,13 @@ export function useListFocus<T extends HTMLElement = HTMLElement>(
         return;
       }
 
+      // Ignore events that bubbled up from a nested list (e.g. a submenu
+      // flyout, which renders inline inside this container). That level owns
+      // and already handled them; re-handling here would move focus twice.
+      if (!ownsEvent(e)) {
+        return;
+      }
+
       // Escape is handled regardless of orientation. Preserve the historical
       // behavior of always consuming Escape here (preventDefault) so consumers
       // that relied on it are unaffected.
@@ -486,11 +569,18 @@ export function useListFocus<T extends HTMLElement = HTMLElement>(
       const vertical = orientation === 'vertical' || orientation === 'both';
 
       // Resolve which keys advance vs retreat, honoring RTL for horizontal.
+      // Direction is resolved lazily — getComputedStyle runs only when a
+      // horizontal arrow key is actually pressed (SSR-safe, no layout thrash
+      // on unrelated keys) — and an explicit `isRtl` always wins.
       const nextKeys: string[] = [];
       const prevKeys: string[] = [];
       if (horizontal) {
-        nextKeys.push(isRtl ? 'ArrowLeft' : 'ArrowRight');
-        prevKeys.push(isRtl ? 'ArrowRight' : 'ArrowLeft');
+        const rtl =
+          e.key === 'ArrowLeft' || e.key === 'ArrowRight'
+            ? (isRtl ?? isRtlElement(listRef.current))
+            : false;
+        nextKeys.push(rtl ? 'ArrowLeft' : 'ArrowRight');
+        prevKeys.push(rtl ? 'ArrowRight' : 'ArrowLeft');
       }
       if (vertical) {
         nextKeys.push('ArrowDown');
@@ -553,6 +643,7 @@ export function useListFocus<T extends HTMLElement = HTMLElement>(
       focusFirst,
       focusLast,
       onEscape,
+      ownsEvent,
     ],
   );
 
@@ -563,5 +654,7 @@ export function useListFocus<T extends HTMLElement = HTMLElement>(
     focusItem,
     focusFirst,
     focusLast,
+    ownsEvent,
+    getItems,
   };
 }

package/src/hooks/useOverflow.test.ts

@@ -14,12 +14,15 @@ function mockContainer(width: number): HTMLElement {
 function mockMeasure(
   itemWidths: number[],
   indicatorWidth?: number,
+  itemHeight = 0,
 ): HTMLElement {
-  const children: {offsetWidth: number}[] = itemWidths.map(w => ({
-    offsetWidth: w,
-  }));
+  const children: {offsetWidth: number; offsetHeight: number}[] =
+    itemWidths.map(w => ({
+      offsetWidth: w,
+      offsetHeight: itemHeight,
+    }));
   if (indicatorWidth != null) {
-    children.push({offsetWidth: indicatorWidth});
+    children.push({offsetWidth: indicatorWidth, offsetHeight: itemHeight});
   }
   return {children} as unknown as HTMLElement;
 }
@@ -332,6 +335,95 @@ describe('useOverflow', () => {
   });
 });
 
+describe('useOverflow with maxVisibleItems (cap)', () => {
+  it('caps visible items even when they all fit', () => {
+    const {result} = renderHook(() =>
+      useOverflow(5, {gap: 10, maxVisibleItems: 3}),
+    );
+
+    act(() => {
+      result.current.measureRef(mockMeasure([50, 50, 50, 50, 50], 30));
+      result.current.containerRef(mockContainer(10000));
+    });
+
+    expect(result.current.visibleCount).toBe(3);
+    expect(result.current.hasOverflow).toBe(true);
+  });
+
+  it('cap does not raise a fit-limited count', () => {
+    const {result} = renderHook(() =>
+      useOverflow(4, {gap: 10, maxVisibleItems: 4}),
+    );
+
+    act(() => {
+      result.current.measureRef(mockMeasure([50, 50, 50, 50], 30));
+      result.current.containerRef(mockContainer(150));
+    });
+
+    expect(result.current.visibleCount).toBe(2);
+  });
+
+  it('min wins when maxVisibleItems < minVisibleItems and warns in dev', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const {result} = renderHook(() =>
+      useOverflow(5, {gap: 10, minVisibleItems: 3, maxVisibleItems: 1}),
+    );
+
+    act(() => {
+      result.current.measureRef(mockMeasure([50, 50, 50, 50, 50], 30));
+      result.current.containerRef(mockContainer(10000));
+    });
+
+    expect(result.current.visibleCount).toBe(3);
+    expect(warn).toHaveBeenCalled();
+    warn.mockRestore();
+  });
+});
+
+describe('useOverflow with maxRows (multi-row)', () => {
+  it('exposes rows and rowHeight', () => {
+    const {result} = renderHook(() => useOverflow(6, {gap: 10, maxRows: 2}));
+
+    act(() => {
+      result.current.measureRef(mockMeasure([50, 50, 50, 50, 50, 50], 40, 24));
+      result.current.containerRef(mockContainer(170));
+    });
+
+    // 3 items per row (170), 2 rows → all 6 fit
+    expect(result.current.visibleCount).toBe(6);
+    expect(result.current.rows).toBe(2);
+    expect(result.current.rowHeight).toBe(24);
+    expect(result.current.hasOverflow).toBe(false);
+  });
+
+  it('collapses items beyond maxRows into the indicator', () => {
+    const {result} = renderHook(() => useOverflow(8, {gap: 10, maxRows: 2}));
+
+    act(() => {
+      result.current.measureRef(
+        mockMeasure([50, 50, 50, 50, 50, 50, 50, 50], 40, 24),
+      );
+      result.current.containerRef(mockContainer(170));
+    });
+
+    expect(result.current.visibleCount).toBe(5);
+    expect(result.current.rows).toBe(2);
+    expect(result.current.hasOverflow).toBe(true);
+  });
+
+  it('maxRows=1 matches single-line behavior', () => {
+    const {result} = renderHook(() => useOverflow(4, {gap: 10, maxRows: 1}));
+
+    act(() => {
+      result.current.measureRef(mockMeasure([50, 50, 50, 50], 30, 24));
+      result.current.containerRef(mockContainer(150));
+    });
+
+    expect(result.current.visibleCount).toBe(2);
+    expect(result.current.rows).toBe(1);
+  });
+});
+
 describe('useOverflow with behavior=observeParent', () => {
   function mockContainerWithParent(
     parentWidth: number,

package/src/hooks/useOverflow.ts

@@ -10,15 +10,20 @@
  *
  * Measures children rendered in a hidden container to determine how many fit
  * in the available width, without flickering. Uses ResizeObserver to react
- * to container size changes.
+ * to container size changes. Supports an optional item cap (`maxVisibleItems`)
+ * and bounded multi-row wrapping (`maxRows`); the fit/clamp/row-packing math
+ * lives in the pure `computeOverflow` helper.
  *
  * SYNC: When modified, update:
  * - /packages/core/src/hooks/index.ts
+ * - /packages/core/src/hooks/computeOverflow.ts (the pure computation)
  */
 
 import {useState, useCallback, useRef} from 'react';
 import {useIsomorphicLayoutEffect} from './useIsomorphicLayoutEffect';
 import {observeResize, unobserveResize} from '../utils/sharedResizeObserver';
+import {computeOverflow} from './computeOverflow';
+import {useDevWarning} from './useDevWarning';
 
 export interface UseOverflowOptions {
   /**
@@ -33,6 +38,23 @@ export interface UseOverflowOptions {
    */
   minVisibleItems?: number;
 
+  /**
+   * Maximum number of items to ever show, even if they all fit. The ceiling
+   * partner to `minVisibleItems`. `undefined` means no cap. When it is less
+   * than `minVisibleItems`, the floor wins and a dev-only warning is emitted.
+   * @default undefined
+   */
+  maxVisibleItems?: number;
+
+  /**
+   * Wrap items across up to this many rows before collapsing the rest into the
+   * overflow indicator. `undefined` (or `1`) keeps the single-line behavior.
+   * A number, not a boolean: unbounded wrapping is a plain flex-wrap layout,
+   * not overflow collapse. Assumes uniform row height.
+   * @default undefined
+   */
+  maxRows?: number;
+
   /**
    * Which end to collapse items from.
    * @default 'end'
@@ -61,6 +83,10 @@ export interface UseOverflowReturn {
   visibleCount: number;
   /** Whether any items are overflowing */
   hasOverflow: boolean;
+  /** Number of rows the visible items occupy (1 for the single-line path) */
+  rows: number;
+  /** Measured max item height in pixels; used to size the multi-row container */
+  rowHeight: number;
 }
 
 /**
@@ -88,13 +114,25 @@ export function useOverflow(
   const {
     gap = 0,
     minVisibleItems = 0,
+    maxVisibleItems,
+    maxRows,
     collapseFrom = 'end',
     behavior = 'observeSelf',
   } = options;
 
+  useDevWarning(
+    'useOverflow',
+    `maxVisibleItems (${maxVisibleItems}) is less than ` +
+      `minVisibleItems (${minVisibleItems}); the floor wins and ` +
+      `minVisibleItems items will be shown.`,
+    maxVisibleItems != null && maxVisibleItems < minVisibleItems,
+  );
+
   const observeParent = behavior === 'observeParent';
 
   const [visibleCount, setVisibleCount] = useState(itemCount);
+  const [rows, setRows] = useState(1);
+  const [rowHeight, setRowHeight] = useState(0);
   const containerElRef = useRef<HTMLElement | null>(null);
   const measureElRef = useRef<HTMLElement | null>(null);
   const observedElRef = useRef<HTMLElement | null>(null);
@@ -134,44 +172,45 @@ export function useOverflow(
     if (children.length === 0) {
       // eslint-disable-next-line @eslint-react/set-state-in-effect -- overflow count is derived from measured DOM widths
       setVisibleCount(0);
+      // eslint-disable-next-line @eslint-react/set-state-in-effect -- derived from measured DOM
+      setRows(0);
       return;
     }
 
-    // Collect widths of all children
     const widths = children.map(child => child.offsetWidth);
-
-    // Determine how many items fit
-    let totalWidth = 0;
-    let count = 0;
-
-    const orderedWidths =
-      collapseFrom === 'end' ? widths : [...widths].reverse();
-
-    for (let i = 0; i < orderedWidths.length; i++) {
-      const itemWidth = orderedWidths[i];
-      const gapWidth = i > 0 ? gap : 0;
-      const candidateWidth = totalWidth + itemWidth + gapWidth;
-
-      // If this isn't the last item, we need to reserve space for the indicator
-      const isLastItem = i === orderedWidths.length - 1;
-      const reservedWidth = isLastItem
-        ? 0
-        : indicatorWidth + (count > 0 || indicatorWidth > 0 ? gap : 0);
-
-      if (
-        candidateWidth + reservedWidth > availableWidth &&
-        count >= minVisibleItems
-      ) {
-        break;
-      }
-
-      totalWidth = candidateWidth;
-      count++;
-    }
+    const measuredRowHeight = children.reduce(
+      (max, child) => Math.max(max, child.offsetHeight || 0),
+      0,
+    );
+
+    const {visibleCount: nextVisible, rows: nextRows} = computeOverflow({
+      widths,
+      gap,
+      availableWidth,
+      indicatorWidth,
+      minVisibleItems,
+      maxVisibleItems,
+      maxRows,
+      collapseFrom,
+    });
 
     // eslint-disable-next-line @eslint-react/set-state-in-effect -- overflow count is derived from measured DOM widths
-    setVisibleCount(Math.max(Math.min(count, itemCount), minVisibleItems));
-  }, [itemCount, gap, minVisibleItems, collapseFrom, observeParent]);
+    setVisibleCount(nextVisible);
+    // eslint-disable-next-line @eslint-react/set-state-in-effect -- derived from measured DOM
+    setRows(prev => (prev === nextRows ? prev : nextRows));
+    // eslint-disable-next-line @eslint-react/set-state-in-effect -- derived from measured DOM
+    setRowHeight(prev =>
+      prev === measuredRowHeight ? prev : measuredRowHeight,
+    );
+  }, [
+    itemCount,
+    gap,
+    minVisibleItems,
+    maxVisibleItems,
+    maxRows,
+    collapseFrom,
+    observeParent,
+  ]);
 
   const containerRef = useCallback(
     (el: HTMLElement | null) => {
@@ -217,5 +256,7 @@ export function useOverflow(
     measureRef,
     visibleCount,
     hasOverflow,
+    rows,
+    rowHeight,
   };
 }

package/src/i18n/InternationalizationContext.ts

@@ -15,6 +15,8 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/i18n/InternationalizationProvider.tsx
  * - /packages/core/src/i18n/t.client.ts
+ * - /packages/core/src/i18n/useDirection.ts
+ * - /packages/core/src/i18n/getLocaleDirection.ts
  * - /packages/core/src/i18n/index.ts
  */
 
@@ -23,6 +25,7 @@ import type {Locale, MessagesByLocale, Overrides} from './types';
 
 export interface InternationalizationContextValue {
   locale: Locale;
+  direction: 'ltr' | 'rtl';
   messages: MessagesByLocale;
   overrides?: Overrides;
 }
@@ -34,6 +37,7 @@ export interface InternationalizationContextValue {
 export const InternationalizationContext =
   createContext<InternationalizationContextValue>({
     locale: 'en',
+    direction: 'ltr',
     messages: {},
   });
 InternationalizationContext.displayName = 'InternationalizationContext';

package/src/i18n/InternationalizationProvider.doc.mjs

@@ -20,7 +20,29 @@ export const docs = {
   ],
   usage: {
     description:
-      "Wraps your app to set the active locale and (optionally) merge additional translation catalogs + per-locale overrides. Astryx components inside the subtree resolve their strings against this context. If no provider is present, components fall back to the shipped English defaults.",
+      'Wraps your app to set the active locale and (optionally) merge additional translation catalogs + per-locale overrides. Astryx components inside the subtree resolve their strings against this context. If no provider is present, components fall back to the shipped English defaults.',
+    bestPractices: [
+      {
+        guidance: true,
+        description:
+          'Use shipped Astryx locale catalogs from `@astryxdesign/core/locales/*` when one exists for your target locale.',
+      },
+      {
+        guidance: true,
+        description:
+          'Use a same-shape local catalog only when Astryx has not shipped that locale yet or you are testing in-progress translations.',
+      },
+      {
+        guidance: true,
+        description:
+          'Use real BCP 47 tags such as `fr`, `pt-BR`, or `ar`; regional locales fall back to their base language before English.',
+      },
+      {
+        guidance: false,
+        description:
+          'Cast custom catalog maps to `any`; the i18n package exports `MessagesByLocale` and `Catalog` for local catalog typing.',
+      },
+    ],
   },
   props: [
     {
@@ -35,7 +57,7 @@ export const docs = {
       type: 'MessagesByLocale',
       required: false,
       description:
-        'Optional map of BCP 47 tag to translation catalog. The shipped "en" catalog is always available and does not need to be listed here.',
+        'Optional map of BCP 47 tag to translation catalog. Import shipped catalogs from `@astryxdesign/core/locales/*`; the shipped "en" catalog is always available and does not need to be listed here.',
     },
     {
       name: 'overrides',
@@ -51,6 +73,59 @@ export const docs = {
       description: 'Content to render with the internationalization provider.',
     },
   ],
+  examples: [
+    {
+      label: 'Load a shipped Astryx locale catalog',
+      code: `import type {ReactNode} from 'react';
+import {InternationalizationProvider} from '@astryxdesign/core/i18n';
+import frFR from '@astryxdesign/core/locales/fr-FR.json';
+
+export function AppI18n({children}: {children: ReactNode}) {
+  return (
+    <InternationalizationProvider locale="fr-FR" messages={{'fr-FR': frFR}}>
+      {children}
+    </InternationalizationProvider>
+  );
+}`,
+    },
+    {
+      label: 'Override one Astryx string',
+      code: `import type {ReactNode} from 'react';
+import {InternationalizationProvider} from '@astryxdesign/core/i18n';
+
+export function AppI18n({children}: {children: ReactNode}) {
+  return (
+    <InternationalizationProvider
+      locale="en"
+      overrides={{
+        en: {'@astryx.selector.placeholder': 'Choose...'},
+      }}
+    >
+      {children}
+    </InternationalizationProvider>
+  );
+}`,
+    },
+    {
+      label: 'Provide a local fallback catalog',
+      code: `import type {ReactNode} from 'react';
+import {
+  InternationalizationProvider,
+  type MessagesByLocale,
+} from '@astryxdesign/core/i18n';
+import ptBR from './locales/pt-BR.json';
+
+const messages: MessagesByLocale = {'pt-BR': ptBR};
+
+export function AppI18n({children}: {children: ReactNode}) {
+  return (
+    <InternationalizationProvider locale="pt-BR" messages={messages}>
+      {children}
+    </InternationalizationProvider>
+  );
+}`,
+    },
+  ],
 };
 
 /** @type {import('../docs-types').TranslationDoc} */
@@ -60,6 +135,28 @@ export const docsDense = {
   usage: {
     description:
       'Wraps app to set active locale and (optionally) merge translation catalogs + per-locale overrides. Astryx components resolve strings against this context; missing keys fall back to shipped English.',
+    bestPractices: [
+      {
+        guidance: true,
+        description:
+          'Use shipped Astryx locale catalogs from `@astryxdesign/core/locales/*` when one exists for the target locale.',
+      },
+      {
+        guidance: true,
+        description:
+          'Use a same-shape local catalog only when Astryx has not shipped that locale yet or when testing in-progress translations.',
+      },
+      {
+        guidance: true,
+        description:
+          'Use real BCP 47 tags like `fr`, `pt-BR`, or `ar`; regional locales fall back to base language before English.',
+      },
+      {
+        guidance: false,
+        description:
+          'Cast custom catalog maps to `any`; the i18n package exports `MessagesByLocale` and `Catalog` for local catalog typing.',
+      },
+    ],
   },
   propDescriptions: {
     locale:

package/src/i18n/InternationalizationProvider.tsx

@@ -21,6 +21,7 @@
 
 import {useMemo, type ReactNode} from 'react';
 import {InternationalizationContext} from './InternationalizationContext';
+import {getLocaleDirection} from './getLocaleDirection';
 import type {Locale, MessagesByLocale, Overrides} from './types';
 
 export interface InternationalizationProviderProps {
@@ -55,6 +56,13 @@ export interface InternationalizationProviderProps {
    * ```
    */
   overrides?: Overrides;
+  /**
+   * Optional explicit text direction override. When omitted, direction is derived
+   * from `locale` via `Intl.Locale.getTextInfo()`. Provide this to force a
+   * direction (e.g. RTL layout testing under an English catalog) or to skip the
+   * derivation when you already know the direction.
+   */
+  dir?: 'ltr' | 'rtl';
   children: ReactNode;
 }
 
@@ -66,11 +74,13 @@ export function InternationalizationProvider({
   locale,
   messages,
   overrides,
+  dir,
   children,
 }: InternationalizationProviderProps) {
+  const direction = dir ?? getLocaleDirection(locale);
   const value = useMemo(
-    () => ({locale, messages: messages ?? {}, overrides}),
-    [locale, messages, overrides],
+    () => ({locale, direction, messages: messages ?? {}, overrides}),
+    [locale, direction, messages, overrides],
   );
   return (
     <InternationalizationContext value={value}>