|
1 | 1 | import { useEffect, useMemo, useRef, useState } from 'react'; |
2 | 2 | import { TextInput } from '../TextInput'; |
3 | 3 | import { Button } from '../Button'; |
4 | | -import { Select, SelectList, SelectOption, SelectProps } from '../Select'; |
| 4 | +import { Select, SelectList, SelectOption } from '../Select'; |
5 | 5 | import { MenuToggle, MenuToggleElement } from '../MenuToggle'; |
6 | 6 | import { InputGroup, InputGroupItem } from '../InputGroup'; |
7 | 7 | 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 |
81 | 81 | onSelectToggle?: (open: boolean) => void; |
82 | 82 | /** Functions that returns if a date is valid and selectable. */ |
83 | 83 | 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'; |
86 | 91 | } |
87 | 92 |
|
88 | 93 | const buildCalendar = (year: number, month: number, weekStart: number, validators: ((date: Date) => boolean)[]) => { |
@@ -145,7 +150,7 @@ export const CalendarMonth = ({ |
145 | 150 | cellAriaLabel, |
146 | 151 | isDateFocused = false, |
147 | 152 | inlineProps, |
148 | | - monthSelectProps, |
| 153 | + monthAppendTo = 'inline', |
149 | 154 | ...props |
150 | 155 | }: CalendarProps) => { |
151 | 156 | const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] |
@@ -330,8 +335,7 @@ export const CalendarMonth = ({ |
330 | 335 | onMonthChange(ev, newDate); |
331 | 336 | }} |
332 | 337 | selected={monthFormatted} |
333 | | - popperProps={{ appendTo: 'inline' }} |
334 | | - {...monthSelectProps} |
| 338 | + popperProps={{ appendTo: monthAppendTo }} |
335 | 339 | > |
336 | 340 | <SelectList> |
337 | 341 | {longMonths.map((longMonth, index) => ( |
|
0 commit comments