Skip to content

Commit 9e3578f

Browse files
committed
update to monthAppendTo
1 parent 34390d4 commit 9e3578f

1 file changed

Lines changed: 10 additions & 6 deletions

File tree

packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEffect, useMemo, useRef, useState } from 'react';
22
import { TextInput } from '../TextInput';
33
import { Button } from '../Button';
4-
import { Select, SelectList, SelectOption, SelectProps } from '../Select';
4+
import { Select, SelectList, SelectOption } from '../Select';
55
import { MenuToggle, MenuToggleElement } from '../MenuToggle';
66
import { InputGroup, InputGroupItem } from '../InputGroup';
77
import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
@@ -81,8 +81,13 @@ export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTML
8181
onSelectToggle?: (open: boolean) => void;
8282
/** Functions that returns if a date is valid and selectable. */
8383
validators?: ((date: Date) => boolean)[];
84-
/** Additional props passed to the month select component. */
85-
monthSelectProps?: SelectProps;
84+
/** The container to append the month select menu to. Defaults to 'inline'.
85+
* If your menu is being cut off you can append it to an element higher up the DOM tree.
86+
* Some examples:
87+
* menuAppendTo={() => document.body};
88+
* menuAppendTo={document.getElementById('target')}
89+
*/
90+
monthAppendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline';
8691
}
8792

8893
const buildCalendar = (year: number, month: number, weekStart: number, validators: ((date: Date) => boolean)[]) => {
@@ -145,7 +150,7 @@ export const CalendarMonth = ({
145150
cellAriaLabel,
146151
isDateFocused = false,
147152
inlineProps,
148-
monthSelectProps,
153+
monthAppendTo = 'inline',
149154
...props
150155
}: CalendarProps) => {
151156
const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
@@ -330,8 +335,7 @@ export const CalendarMonth = ({
330335
onMonthChange(ev, newDate);
331336
}}
332337
selected={monthFormatted}
333-
popperProps={{ appendTo: 'inline' }}
334-
{...monthSelectProps}
338+
popperProps={{ appendTo: monthAppendTo }}
335339
>
336340
<SelectList>
337341
{longMonths.map((longMonth, index) => (

0 commit comments

Comments
 (0)