From 34390d4344979a2b80ba629d5874746644e31aa0 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Thu, 30 Apr 2026 10:01:12 -0400 Subject: [PATCH 1/3] feat(CalendarMonth): add select prop passthrough --- .../src/components/CalendarMonth/CalendarMonth.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx index 2cd53c36fb9..707d7adf00d 100644 --- a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx +++ b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx @@ -1,7 +1,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'; import { TextInput } from '../TextInput'; import { Button } from '../Button'; -import { Select, SelectList, SelectOption } from '../Select'; +import { Select, SelectList, SelectOption, SelectProps } from '../Select'; import { MenuToggle, MenuToggleElement } from '../MenuToggle'; import { InputGroup, InputGroupItem } from '../InputGroup'; import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon'; @@ -81,6 +81,8 @@ export interface CalendarProps extends CalendarFormat, Omit void; /** Functions that returns if a date is valid and selectable. */ validators?: ((date: Date) => boolean)[]; + /** Additional props passed to the month select component. */ + monthSelectProps?: SelectProps; } const buildCalendar = (year: number, month: number, weekStart: number, validators: ((date: Date) => boolean)[]) => { @@ -143,6 +145,7 @@ export const CalendarMonth = ({ cellAriaLabel, isDateFocused = false, inlineProps, + monthSelectProps, ...props }: CalendarProps) => { const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] @@ -328,6 +331,7 @@ export const CalendarMonth = ({ }} selected={monthFormatted} popperProps={{ appendTo: 'inline' }} + {...monthSelectProps} > {longMonths.map((longMonth, index) => ( From 9e3578ff612ccfbee62be52e9fe053c592e7a992 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Thu, 7 May 2026 10:46:33 -0400 Subject: [PATCH 2/3] update to monthAppendTo --- .../components/CalendarMonth/CalendarMonth.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx index 707d7adf00d..d0a1c0e0b73 100644 --- a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx +++ b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx @@ -1,7 +1,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'; import { TextInput } from '../TextInput'; import { Button } from '../Button'; -import { Select, SelectList, SelectOption, SelectProps } from '../Select'; +import { Select, SelectList, SelectOption } from '../Select'; import { MenuToggle, MenuToggleElement } from '../MenuToggle'; import { InputGroup, InputGroupItem } from '../InputGroup'; import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon'; @@ -81,8 +81,13 @@ export interface CalendarProps extends CalendarFormat, Omit void; /** Functions that returns if a date is valid and selectable. */ validators?: ((date: Date) => boolean)[]; - /** Additional props passed to the month select component. */ - monthSelectProps?: SelectProps; + /** The container to append the month select menu to. Defaults to 'inline'. + * If your menu is being cut off you can append it to an element higher up the DOM tree. + * Some examples: + * menuAppendTo={() => document.body}; + * menuAppendTo={document.getElementById('target')} + */ + monthAppendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline'; } const buildCalendar = (year: number, month: number, weekStart: number, validators: ((date: Date) => boolean)[]) => { @@ -145,7 +150,7 @@ export const CalendarMonth = ({ cellAriaLabel, isDateFocused = false, inlineProps, - monthSelectProps, + monthAppendTo = 'inline', ...props }: CalendarProps) => { const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] @@ -330,8 +335,7 @@ export const CalendarMonth = ({ onMonthChange(ev, newDate); }} selected={monthFormatted} - popperProps={{ appendTo: 'inline' }} - {...monthSelectProps} + popperProps={{ appendTo: monthAppendTo }} > {longMonths.map((longMonth, index) => ( From 2403e355a9bb0106349d3df45ae174b9584cec0f Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Thu, 7 May 2026 11:19:35 -0400 Subject: [PATCH 3/3] fix prop desc example --- .../react-core/src/components/CalendarMonth/CalendarMonth.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx index d0a1c0e0b73..c49e32bda61 100644 --- a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx +++ b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx @@ -84,8 +84,8 @@ export interface CalendarProps extends CalendarFormat, Omit document.body}; - * menuAppendTo={document.getElementById('target')} + * monthAppendTo={() => document.body}; + * monthAppendTo={document.getElementById('target')} */ monthAppendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline'; }