feat: add semantic for popup container

[meet-student]

add semantic for popup container

添加popup语义化container

Summary by CodeRabbit

• 新功能

  • 选择器弹出框支持为容器添加自定义类名和样式（可通过 classNames.styles 等属性配置），便于定制面板外观。

• 改进

  • 弹出面板的样式透传更完整，样式覆盖更一致，视觉定制粒度提升。

• 测试

  • 增强了针对弹出容器类名和样式的自动化测试以验证渲染结果。

• 依赖更新

  • 更新了触发器相关依赖版本以支持上述改进。

[vercel]

@meet-student 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

在 Popup 组件中新增 classNames 与 styles 属性并将其应用于容器元素；SinglePicker 与 RangePicker 将合并样式传入 Popup；类型 PanelSemanticName 增加 'container'；示例与测试更新以验证容器类名/样式；更新依赖 @rc-component/trigger 版本。

Changes

内聚体 / 文件(s)	变更摘要
Popup 组件样式支持 src/PickerInput/Popup/index.tsx	增加 classNames?: SharedPickerProps['classNames'] 与 styles?: SharedPickerProps['styles'] props，向容器元素的 className 与内联 style 传入相应值
选择器面板传递 src/PickerInput/SinglePicker.tsx, src/PickerInput/RangePicker.tsx	在使用 Popup 的位置添加 classNames={mergedClassNames} 与 styles={mergedStyles} 以透传样式/类名
类型系统扩展 src/interface.tsx	将 PanelSemanticName 联合类型新增成员 'container'
示例调整 docs/examples/basic.tsx	在示例中为 Picker 的 popup 添加 classNames.popup.container、styles.popup.container，并设置 open 为 true
测试更新 tests/picker.spec.tsx	增加对 popup 容器（.rc-picker-panel-container）的类名与内联样式断言
依赖升级 package.json	将 @rc-component/trigger 版本从 ^3.0.0 升级到 ^3.6.15

Sequence Diagram(s)

sequenceDiagram autonumber participant App as 应用 / 示例 participant Picker as Picker (Single/Range) participant Popup as Popup 组件 participant DOM as 浏览器 DOM Note over App,Picker: 渲染流程（高层） App->>Picker: 渲染 Picker，传入 mergedClassNames/mergedStyles Picker->>Popup: 创建 Popup(classNames, styles, open) Popup->>DOM: 在容器元素上应用 classNames.popup.container 与 styles.popup.container DOM-->>Popup: 渲染完成 Popup-->>Picker: popup 已呈现 

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 分钟

理由：变更涉及类型、组件 props 增添与多处透传，测试与示例同步更新，模式一致但需确认样式合并/优先级与类型兼容性。

Possibly related PRs

• feat: semantic support content、body #922 — 同步将 classNames/styles 传播至 Popup/面板的相关改动（高度相关）。
• refactor: Semantic structure #927 — 针对 popup/classNames/styles 传播与面板语义修改的相关 PR。
• perf: uninstall classnames, install clsx #944 — 修改同一文件中类名处理工具（clsx 替换）的变更，可能影响 className 拼接细节。

Suggested reviewers

• zombieJ
• afc163

诗

🐰 容器披上新外衣，样式随风去万里，
class 与 style 轻轻来，Popup 展开笑开怀，
Picker 一路把它带，测试示例都在看！ ✨

Pre-merge checks and finishing touches

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	拉取请求标题"feat: add semantic for popup container"准确地总结了变更集的主要目标。这个变更涉及在src/interface.tsx中的PanelSemanticName类型中添加'container'作为新的语义化成员，同时在Popup组件中新增classNames和styles属性以支持容器定制，并在RangePicker和SinglePicker中应用这些样式传递。标题清晰、具体，直接反映了提交的核心目的，不含歧义或误导性信息。

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3938636 and 51937af.

📒 Files selected for processing (1)

• src/PickerInput/Popup/index.tsx (3 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/PickerInput/Popup/index.tsx (1)

src/interface.tsx (1)

• SharedPickerProps (327-465)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: test / react component workflow

🔇 Additional comments (4)

src/PickerInput/Popup/index.tsx (4)

49-50: 属性定义正确。

新增的 classNames 和 styles 属性类型定义正确，复用了 SharedPickerProps 的类型，并且作为可选属性是合理的。

---

85-86: 解构实现正确。

属性解构遵循了现有的模式，实现准确。

---

225-225: 类名应用正确。

使用了可选链操作符访问 classNames?.popup?.container，并且 clsx 能够安全处理 undefined 值，实现正确。

---

230-230: 样式应用正确，先前问题已解决。

现在使用了 styles?.popup?.container 完整的可选链，正确处理了 styles 可能为 undefined 的情况。展开 undefined 在 JavaScript 中是安全的（不会添加任何属性），此实现修复了之前评审中指出的潜在空引用问题。

---

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 and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.80%. Comparing base (14c2211) to head (51937af).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@ Coverage Diff @@ ## master #945 +/- ## ======================================= Coverage 98.80% 98.80% ======================================= Files 65 65 Lines 2680 2680 Branches 744 719 -25 ======================================= Hits 2648 2648 Misses 29 29 Partials 3 3 

☔ View full report in Codecov by Sentry.
📢 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.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	husky@​9.1.7
	rc-test@​7.1.2
	eslint-plugin-eslint-comments@​3.2.0
	mockdate@​3.0.5
	less@​4.1.3 ⏵ 4.4.2	+1		+1	-1
	glob@​10.4.5
	father@​4.6.7
	dumi@​2.4.21
	moment@​2.30.1
	react@​19.2.0
	luxon@​3.7.2
	moment-timezone@​0.5.48
	rc-overflow@​1.5.0
	eslint-plugin-unicorn@​47.0.0 ⏵ 55.0.0			+1
	prettier@​2.8.8 ⏵ 3.6.2
	typescript@​5.9.3
	eslint-plugin-jest@​27.2.3 ⏵ 28.14.0	+1		+1	+1
	react-dom@​18.3.1 ⏵ 19.2.0	+1		+1
	eslint-plugin-react-hooks@​4.6.0 ⏵ 4.6.2	+1
	eslint@​8.57.1
	lint-staged@​15.5.2

View full report

[socket-security]

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert  (click "▶" to expand/collapse)
Warn		safer-buffer@2.1.2 has Obfuscated code. Confidence: 0.94 Location: Package overview From: ? → npm/@rc-component/np@1.0.4 → npm/safer-buffer@2.1.2 ℹ Read more on: This package | This alert | What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/safer-buffer@2.1.2. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

docs/examples/basic.tsx (1)

62-73: 示例中强制打开弹出层可能不适合作为基础示例。

虽然设置 open={true} 和红色背景有助于演示容器样式功能，但这可能会让用户误以为这是正常的使用方式。建议考虑以下改进：

1. 将此示例移到专门的样式定制示例中
2. 或者添加注释说明这只是为了演示容器样式
3. 使用更柔和的样式（如 border 或 padding）而非红色背景

可以考虑添加注释说明：

 <Picker<Moment> {...sharedProps} locale={zhCN} suffixIcon="SUFFIX" rootClassName="bamboo" className="little" + // 容器样式演示示例 classNames={{ root: 'light', popup: { container: 'popup-c', }, }} + // 强制打开以展示样式效果 open styles={{ popup: { container: { + // 红色背景仅用于演示 backgroundColor: 'red', }, }, }} />

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 14c2211 and 3938636.

📒 Files selected for processing (7)

• docs/examples/basic.tsx (1 hunks)
• package.json (1 hunks)
• src/PickerInput/Popup/index.tsx (3 hunks)
• src/PickerInput/RangePicker.tsx (1 hunks)
• src/PickerInput/SinglePicker.tsx (1 hunks)
• src/interface.tsx (1 hunks)
• tests/picker.spec.tsx (3 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/PickerInput/Popup/index.tsx (1)

src/interface.tsx (1)

• SharedPickerProps (327-465)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Socket Security: Pull Request Alerts
• GitHub Check: test / react component workflow

🔇 Additional comments (6)

tests/picker.spec.tsx (1)

1353-1406: 测试覆盖完整且实现正确。

测试用例正确地验证了新的容器级样式功能：

• 通过 classNames.popup.container 应用自定义类名
• 通过 styles.popup.container 应用内联样式
• 使用适当的选择器 .rc-picker-panel-container 查询容器元素
• 断言验证了类名和样式都被正确应用

src/PickerInput/SinglePicker.tsx (1)

543-546: 正确传递样式属性到 Popup 组件。

将 mergedClassNames 和 mergedStyles 传递给 Popup 组件的实现是正确的，这使得外部可以通过 classNames.popup.container 和 styles.popup.container 自定义弹出层容器的样式。实现与 RangePicker 保持一致。

src/PickerInput/RangePicker.tsx (1)

629-632: 正确传递样式属性到 Popup 组件。

RangePicker 的实现与 SinglePicker 保持一致，正确地将 mergedClassNames 和 mergedStyles 传递给 Popup 组件，确保了两个选择器组件在样式定制方面的行为一致性。

src/interface.tsx (1)

318-325: 类型扩展正确且符合现有模式。

将 'container' 添加到 PanelSemanticName 联合类型中是一个恰当的扩展，它：

• 与现有的语义命名模式保持一致
• 启用了对容器级样式的类型安全访问
• 正确地集成到 SharedPickerProps 的 classNames 和 styles 定义中

src/PickerInput/Popup/index.tsx (1)

49-50: 新增的 props 定义正确。

将 classNames 和 styles 定义为可选的 SharedPickerProps 类型是正确的做法，这确保了类型安全并与父组件的属性定义保持一致。

package.json (1)

43-43: 依赖版本有效且无安全问题。

验证结果确认 @rc-component/trigger@3.6.15 存在于 npm 注册表中，且无已知安全漏洞。该版本是 3.6.x 系列的最新版本，更新符合语义化版本管理规范。