Skip to content

feat(mosaic): follow DirectionProvider for arrow-key navigation - #10420

Draft
alexcarpenter wants to merge 1 commit into
mainfrom
carp/mosaic-direction-provider
Draft

alexcarpenter wants to merge 1 commit into
mainfrom
carp/mosaic-direction-provider

Conversation

@alexcarpenter

Copy link
Copy Markdown
Member

Description

Mosaic primitives now take the reading direction for keyboard navigation from React context, as Base UI does, instead of reading the nearest [dir] attribute.

  • New headless DirectionProvider and useDirection() in primitives/direction-provider. direction is 'ltr' | 'rtl' and defaults to 'ltr'. useDirection() returns 'ltr' when no provider is mounted.
  • MosaicProvider gets a direction prop and renders DirectionProvider from it. The prop is explicit rather than derived from localization.locale. Layout follows the page's dir, so keyboard direction should follow the value the host sets there, not the locale.
  • Tabs, segmented control, OTP and tag input now use useDirection(). Tabs and segmented control used to read dir only on focus, so they now pick up a direction change while focused. readingDirectionKeys(direction) moves from tag input into the provider module so OTP can use it too.
  • Nested menus now pass rtl to useListNavigation, so in RTL ArrowLeft opens a submenu and ArrowRight closes it. Before this, they always used LTR keys.
  • primitives/utils/dom.ts still reads computed direction for wheel/scroll delta math, which isn't keyboard direction (Base UI also keeps computed style for scrollbar hit testing).
  • Swingset's StoryMosaicProvider passes the RTL toggle's value to MosaicProvider. This is typechecked but hasn't been exercised in the browser.

This replaces #10419. The Table primitive (#10414) will switch to useDirection() once both land.

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@vercel

vercel Bot commented Oct 25, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
clerk-js-sandbox Ready Ready Preview Oct 25, 2026 11:49pm UTC
swingset Ready Ready Preview Oct 25, 2026 11:49pm UTC

Request Review

@changeset-bot

changeset-bot Bot commented Oct 25, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: f5f5dde

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@clerk/mosaic Patch
@clerk/swingset Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai

coderabbitai Bot commented Oct 25, 2026

Copy link
Copy Markdown
Contributor

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

  • Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Comment @coderabbitai help to get the list of available commands.

@pkg-pr-new

pkg-pr-new Bot commented Oct 25, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@10420

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@10420

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@10420

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@10420

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@10420

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@10420

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@10420

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@10420

@clerk/expo-biometrics

npm i https://pkg.pr.new/@clerk/expo-biometrics@10420

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@10420

@clerk/expo-native-components

npm i https://pkg.pr.new/@clerk/expo-native-components@10420

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@10420

@clerk/express

npm i https://pkg.pr.new/@clerk/express@10420

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@10420

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@10420

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@10420

@clerk/mosaic

npm i https://pkg.pr.new/@clerk/mosaic@10420

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@10420

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@10420

@clerk/react

npm i https://pkg.pr.new/@clerk/react@10420

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@10420

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@10420

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@10420

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@10420

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@10420

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@10420

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@10420

commit: f5f5dde

This branch was successfully deployed

2 active deployments
Preview – swingset — f5f5ddeb Deployed Oct 25, 2026 by vercel[bot]
Preview – clerk-js-sandbox — f5f5ddeb Deployed Oct 25, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant