Skip to content

feat(CalendarMonth): add select appendTo passthrough#12391

Merged
thatblindgeye merged 3 commits intopatternfly:mainfrom
kmcfaul:calendarmonth-props
May 7, 2026
Merged

feat(CalendarMonth): add select appendTo passthrough#12391
thatblindgeye merged 3 commits intopatternfly:mainfrom
kmcfaul:calendarmonth-props

Conversation

@kmcfaul
Copy link
Copy Markdown
Contributor

@kmcfaul kmcfaul commented Apr 30, 2026

What: Closes #12414

Allows a user to override the select appendTo if their user case requires a different configuration.

Summary by CodeRabbit

  • New Features
    • The calendar month dropdown can now be configured to control where its menu is appended, enabling the dropdown to render into a custom container when needed.
    • Default behavior remains unchanged: the month menu continues to append inline unless a different target is specified.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 30, 2026

Review Change Stack

Walkthrough

Adds an optional monthAppendTo prop to CalendarProps (default 'inline') and passes it into the month <Select> as popperProps.appendTo so the select menu can be appended to a configurable container.

Changes

CalendarMonth Component

Layer / File(s) Summary
Data Shape
packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
Adds `monthAppendTo?: HTMLElement
Component Signature
packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
Sets monthAppendTo = 'inline' default on the CalendarMonth component parameter list.
Wiring / UI
packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
Passes popperProps={{ appendTo: monthAppendTo }} to the month <Select> instead of the previous hardcoded 'inline'.

Sequence Diagram(s)

sequenceDiagram
  participant CalendarMonth
  participant Select
  participant DOM
  CalendarMonth->>Select: provide popperProps.appendTo = monthAppendTo
  Select->>DOM: append popper menu to monthAppendTo container
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Linked Issues check ✅ Passed The implementation adds monthAppendTo prop to CalendarMonth, enabling users to override where the month select is appended, directly fulfilling issue #12414's requirement.
Out of Scope Changes check ✅ Passed All changes are strictly scoped to the monthAppendTo prop feature described in the linked issue, with no extraneous modifications.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: adding a monthAppendTo prop to CalendarMonth that allows consumers to override the select's appendTo behavior, which is the core objective of the PR.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ 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

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

@patternfly-build
Copy link
Copy Markdown
Collaborator

patternfly-build commented Apr 30, 2026

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx`:
- Around line 84-85: The prop type for monthSelectProps is too strict (it uses
SelectProps which requires toggle); change the declaration of monthSelectProps
to use Partial<SelectProps> so callers can pass only subsets like popperProps.
Update the type on the CalendarMonth component/interface (the monthSelectProps
property) and adjust any usage sites that assume required fields (e.g., avoid
directly calling monthSelectProps.toggle without existence checks) to handle
possibly-undefined members after making it Partial.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a5e62b52-f57d-4114-8cf4-5182be9d70f3

📥 Commits

Reviewing files that changed from the base of the PR and between e47cb62 and 2caf68f.

📒 Files selected for processing (1)
  • packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx

Comment on lines +84 to +85
/** Additional props passed to the month select component. */
monthSelectProps?: SelectProps;
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Verify SelectProps requires toggle
rg -n --type=ts 'export interface SelectProps|toggle:\s*SelectToggleProps' packages/react-core/src/components/Select/Select.tsx

# Verify CalendarMonth typing for monthSelectProps
rg -n --type=ts 'monthSelectProps\?:\s*SelectProps|monthSelectProps\?:\s*Partial<SelectProps>' packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx

Repository: patternfly/patternfly-react

Length of output: 260


monthSelectProps requires the full SelectProps interface, blocking partial passthrough use-cases

Line 85 types monthSelectProps as SelectProps, which has a required toggle property. This prevents callers from passing only specific options like popperProps, making the API ergonomically awkward for typical passthrough scenarios.

Change to Partial<SelectProps> to allow flexible prop passthrough:

Suggested fix
-  monthSelectProps?: SelectProps;
+  monthSelectProps?: Partial<SelectProps>;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
/** Additional props passed to the month select component. */
monthSelectProps?: SelectProps;
/** Additional props passed to the month select component. */
monthSelectProps?: Partial<SelectProps>;
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx` around
lines 84 - 85, The prop type for monthSelectProps is too strict (it uses
SelectProps which requires toggle); change the declaration of monthSelectProps
to use Partial<SelectProps> so callers can pass only subsets like popperProps.
Update the type on the CalendarMonth component/interface (the monthSelectProps
property) and adjust any usage sites that assume required fields (e.g., avoid
directly calling monthSelectProps.toggle without existence checks) to handle
possibly-undefined members after making it Partial.

@kmcfaul kmcfaul force-pushed the calendarmonth-props branch from 2caf68f to 9e3578f Compare May 7, 2026 14:49
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 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.

Inline comments:
In `@packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx`:
- Around line 84-89: The JSDoc examples incorrectly use menuAppendTo instead of
the actual prop monthAppendTo; update the doc block for the CalendarMonth
component (the JSDoc above the monthAppendTo prop) to use monthAppendTo in all
example lines (e.g. monthAppendTo={() => document.body} and
monthAppendTo={document.getElementById('target')}) so the examples match the
public API and avoid misleading consumers.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: eab2bad0-c8d7-4aad-897d-b02405b0716a

📥 Commits

Reviewing files that changed from the base of the PR and between 2caf68f and 9e3578f.

📒 Files selected for processing (1)
  • packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx

Comment thread packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 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.

Inline comments:
In `@packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx`:
- Around line 84-90: Add a new prop monthSelectProps to the CalendarProps
interface and use it in CalendarMonth to pass-through and allow overriding all
Select and popperProps options instead of only mapping monthAppendTo to
popperProps.appendTo; specifically, update the CalendarMonth component so it
merges monthSelectProps into the Select invocation (preserving existing
controlled props) and merges popperProps such that monthSelectProps.popperProps
takes precedence, falling back to monthAppendTo when no appendTo is provided,
and ensure other popperProps (placement, strategy, etc.) are forwarded
unchanged.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 31a24d0a-f28a-4529-bcf4-56399d4ecc01

📥 Commits

Reviewing files that changed from the base of the PR and between 9e3578f and 2403e35.

📒 Files selected for processing (1)
  • packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx

Comment thread packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
@kmcfaul kmcfaul changed the title feat(CalendarMonth): add select prop passthrough feat(CalendarMonth): add select appendTo passthrough May 7, 2026
@thatblindgeye thatblindgeye merged commit bdd5556 into patternfly:main May 7, 2026
14 checks passed
@patternfly-build
Copy link
Copy Markdown
Collaborator

Your changes have been released in:

  • @patternfly/react-charts@8.5.0-prerelease.25
  • @patternfly/react-code-editor@6.5.0-prerelease.73
  • @patternfly/react-core@6.5.0-prerelease.70
  • @patternfly/react-docs@7.5.0-prerelease.81
  • @patternfly/react-drag-drop@6.5.0-prerelease.71
  • @patternfly/react-icons@6.5.0-prerelease.31
  • demo-app-ts@6.5.0-prerelease.99
  • @patternfly/react-styles@6.5.0-prerelease.22
  • @patternfly/react-table@6.5.0-prerelease.73
  • @patternfly/react-templates@6.5.0-prerelease.70
  • @patternfly/react-tokens@6.5.0-prerelease.21

Thanks for your contribution! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

CalendarMonth - allow month select appendTo to be overridden

4 participants