feat: support rtl direction

[aojunhao123]

Summary by CodeRabbit

• 新功能

  • 新增 direction 属性，支持 ltr（从左到右）和 rtl（从右到左）布局。
  • 虚拟列表和普通列表均支持 RTL 渲染。
  • 新增 RTL/LTR 切换及虚拟滚动开关示例。

• 文档

  • 更新 API 文档，补充 direction 属性说明及默认值。
  • 新增 RTL 使用示例页面。

• 测试

  • 增加方向配置透传及 RTL 列表渲染行为测试。

[vercel]

@aojunhao123 is attempting to deploy a commit to the React Component Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

新增 direction 配置以支持 RTL/LTR 布局，贯通公共 Props、虚拟列表和原始列表渲染，并补充 RTL 示例、文档及行为测试。

Changes

RTL 方向支持

Layer / File(s)	Summary
方向配置契约 src/List.tsx, README.md	为 ListyProps 与 ListComponentProps 增加 direction?: 'ltr' | 'rtl'，并更新 API 文档。
方向渲染透传 src/VirtualList/index.tsx, src/RawList/index.tsx	虚拟列表将 direction 传递给 RcVirtualList；原始列表设置 RTL 类名与 dir 属性。
示例与行为验证 docs/examples/rtl.tsx, docs/demos/rtl.md, tests/listy.behavior.test.tsx	新增 RTL/LTR 与 virtual 切换示例页面，并测试虚拟列表透传及原始列表 DOM 表现。

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Listy
  participant VirtualList
  participant RcVirtualList
  participant RawList
  Listy->>VirtualList: 传递 direction
  VirtualList->>RcVirtualList: 传递 direction
  Listy->>RawList: 传递 direction
  RawList->>RawList: 设置 rc-listy-rtl 与 dir="rtl"

Loading

Suggested reviewers: zombieJ

Poem

小兔挥爪切 RTL，
列表向右跑得急。
virtual 开关轻轻按，
LTR 也能排整齐。
方向明确，胡萝卜满地！

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	标题清晰概括了本次 PR 的核心变更：为组件新增 RTL direction 支持。

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[gemini-code-assist]

Code Review

This pull request introduces support for Right-to-Left (RTL) layout direction in the Listy component by adding a direction prop ('ltr' | 'rtl'). This prop is forwarded to both RawList (applying the dir attribute and -rtl class) and VirtualList. A demo, an example, and tests are added to verify this behavior. The reviewer suggested updating the documentation in README.md to show that the default value of direction is '-' (undefined/inherited) rather than 'ltr', to accurately reflect the implementation.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[coderabbitai]

🧹 Nitpick comments (1)

tests/listy.behavior.test.tsx (1)

504-517: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

补充默认方向的测试覆盖。

当前测试验证了 direction: 'rtl' 在两种渲染模式下的行为，但缺少 direction 未传入（默认）时的断言——即 raw list 不应有 rc-listy-rtl class 和 dir 属性。建议补充一个默认场景的测试以防止回归。

✅ 建议补充的测试

   it('applies dir and rtl class on the raw list', () => {
     const { container } = renderList({ virtual: false, direction: 'rtl' });

     const holder = container.querySelector('.rc-listy') as HTMLDivElement;

     expect(holder).toHaveClass('rc-listy-rtl');
     expect(holder).toHaveAttribute('dir', 'rtl');
   });
+
+  it('does not apply rtl class or dir attribute by default', () => {
+    const { container } = renderList({ virtual: false });
+
+    const holder = container.querySelector('.rc-listy') as HTMLDivElement;
+
+    expect(holder).not.toHaveClass('rc-listy-rtl');
+    expect(holder).not.toHaveAttribute('dir');
+  });

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@tests/listy.behavior.test.tsx` around lines 504 - 517, 补充默认方向的测试覆盖：在“applies
dir and rtl class on the raw list”附近新增未传入 direction 的场景，使用 raw list 渲染并断言容器不包含
rc-listy-rtl class 且不具有 dir 属性；保留现有 direction: 'rtl' 的断言不变。

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@tests/listy.behavior.test.tsx`:
- Around line 504-517: 补充默认方向的测试覆盖：在“applies dir and rtl class on the raw
list”附近新增未传入 direction 的场景，使用 raw list 渲染并断言容器不包含 rc-listy-rtl class 且不具有 dir
属性；保留现有 direction: 'rtl' 的断言不变。

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ec7192d9-0dbc-47c1-afc9-20d93bd4544c

📥 Commits

Reviewing files that changed from the base of the PR and between 13f952a and 771354c.

📒 Files selected for processing (7)

• README.md
• docs/demos/rtl.md
• docs/examples/rtl.tsx
• src/List.tsx
• src/RawList/index.tsx
• src/VirtualList/index.tsx
• tests/listy.behavior.test.tsx

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (13f952a) to head (eab2024).

Additional details and impacted files

@@            Coverage Diff            @@
##            master       #56   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            8         8           
  Lines          211       211           
  Branches        62        62           
=========================================
  Hits           211       211           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.