Issue #75: added getPopupContainer (#76)

Author: silannisik

src/Cron.tsx

@@ -61,6 +61,7 @@ export default function Cron(props: CronProps) {
     ],
     allowClear,
     dropdownsConfig,
+    getPopupContainer,
   } = props
   const internalValueRef = useRef<string>(value)
   const defaultPeriodRef = useRef<PeriodType>(defaultPeriod)
@@ -292,6 +293,7 @@ export default function Cron(props: CronProps) {
           shortcuts={shortcuts}
           allowedPeriods={allowedPeriods}
           allowClear={dropdownsConfig?.period?.allowClear ?? allowClear}
+          getPopupContainer={getPopupContainer}
         />
       )}
 
@@ -319,6 +321,7 @@ export default function Cron(props: CronProps) {
                 mode={dropdownsConfig?.months?.mode ?? mode}
                 allowClear={dropdownsConfig?.months?.allowClear ?? allowClear}
                 filterOption={dropdownsConfig?.months?.filterOption}
+                getPopupContainer={getPopupContainer}
               />
             )}
 
@@ -345,6 +348,7 @@ export default function Cron(props: CronProps) {
                   dropdownsConfig?.['month-days']?.allowClear ?? allowClear
                 }
                 filterOption={dropdownsConfig?.['month-days']?.filterOption}
+                getPopupContainer={getPopupContainer}
               />
             )}
 
@@ -374,6 +378,7 @@ export default function Cron(props: CronProps) {
                   dropdownsConfig?.['week-days']?.allowClear ?? allowClear
                 }
                 filterOption={dropdownsConfig?.['week-days']?.filterOption}
+                getPopupContainer={getPopupContainer}
               />
             )}
 
@@ -400,6 +405,7 @@ export default function Cron(props: CronProps) {
                   mode={dropdownsConfig?.hours?.mode ?? mode}
                   allowClear={dropdownsConfig?.hours?.allowClear ?? allowClear}
                   filterOption={dropdownsConfig?.hours?.filterOption}
+                  getPopupContainer={getPopupContainer}
                 />
               )}
 
@@ -426,6 +432,7 @@ export default function Cron(props: CronProps) {
                     dropdownsConfig?.minutes?.allowClear ?? allowClear
                   }
                   filterOption={dropdownsConfig?.minutes?.filterOption}
+                  getPopupContainer={getPopupContainer}
                 />
               )}
 

src/components/CustomSelect.tsx

@@ -25,6 +25,7 @@ export default function CustomSelect(props: CustomSelectProps) {
     mode,
     allowClear,
     filterOption = () => true,
+    getPopupContainer,
     ...otherProps
   } = props
 
@@ -284,6 +285,7 @@ export default function CustomSelect(props: CustomSelectProps) {
           : undefined
       }
       data-testid={`custom-select-${unit.type}`}
+      getPopupContainer={getPopupContainer}
       {...otherProps}
     />
   )

src/fields/Hours.tsx

@@ -21,6 +21,7 @@ export default function Hours(props: HoursProps) {
     mode,
     allowClear,
     filterOption,
+    getPopupContainer,
   } = props
   const internalClassName = useMemo(
     () =>
@@ -55,6 +56,7 @@ export default function Hours(props: HoursProps) {
         mode={mode}
         allowClear={allowClear}
         filterOption={filterOption}
+        getPopupContainer={getPopupContainer}
       />
     </div>
   )

src/fields/Minutes.tsx

@@ -21,6 +21,7 @@ export default function Minutes(props: MinutesProps) {
     mode,
     allowClear,
     filterOption,
+    getPopupContainer,
   } = props
   const internalClassName = useMemo(
     () =>
@@ -69,6 +70,7 @@ export default function Minutes(props: MinutesProps) {
         mode={mode}
         allowClear={allowClear}
         filterOption={filterOption}
+        getPopupContainer={getPopupContainer}
       />
 
       {period === 'hour' && locale.suffixMinutesForHourPeriod !== '' && (

src/fields/MonthDays.tsx

@@ -21,6 +21,7 @@ export default function MonthDays(props: MonthDaysProps) {
     mode,
     allowClear,
     filterOption,
+    getPopupContainer,
   } = props
   const noWeekDays = !weekDays || weekDays.length === 0
 
@@ -77,6 +78,7 @@ export default function MonthDays(props: MonthDaysProps) {
         mode={mode}
         allowClear={allowClear}
         filterOption={filterOption}
+        getPopupContainer={getPopupContainer}
       />
     </div>
   ) : null

src/fields/Months.tsx

@@ -20,6 +20,7 @@ export default function Months(props: MonthsProps) {
     mode,
     allowClear,
     filterOption,
+    getPopupContainer,
   } = props
   const optionsList = locale.months || DEFAULT_LOCALE_EN.months
 
@@ -62,6 +63,7 @@ export default function Months(props: MonthsProps) {
         mode={mode}
         allowClear={allowClear}
         filterOption={filterOption}
+        getPopupContainer={getPopupContainer}
       />
     </div>
   )

src/fields/Period.tsx

@@ -17,6 +17,7 @@ export default function Period(props: PeriodProps) {
     shortcuts,
     allowedPeriods,
     allowClear,
+    getPopupContainer,
   } = props
   const options: BaseOptionType[] = []
 
@@ -133,6 +134,7 @@ export default function Period(props: PeriodProps) {
         open={readOnly ? false : undefined}
         data-testid='select-period'
         allowClear={allowClear}
+        getPopupContainer={getPopupContainer}
       />
     </div>
   )

src/fields/WeekDays.tsx

@@ -21,6 +21,7 @@ export default function WeekDays(props: WeekDaysProps) {
     mode,
     allowClear,
     filterOption,
+    getPopupContainer,
   } = props
   const optionsList = locale.weekDays || DEFAULT_LOCALE_EN.weekDays
   const noMonthDays = period === 'week' || !monthDays || monthDays.length === 0
@@ -101,6 +102,7 @@ export default function WeekDays(props: WeekDaysProps) {
         mode={mode}
         allowClear={allowClear}
         filterOption={filterOption}
+        getPopupContainer={getPopupContainer}
       />
     </div>
   ) : null

src/types.ts

@@ -224,6 +224,14 @@ export interface CronProps {
    * Default './src/locale.ts'
    */
   locale?: Locale
+
+  /*
+   * Define the container for the dropdowns.
+   * By default, the dropdowns will be rendered in the body.
+   * This is useful when you want to render the dropdowns in a specific
+   * container, for example, when using a modal or a specific layout.
+   */
+  getPopupContainer?: () => HTMLElement
 }
 export interface Locale {
   everyText?: string
@@ -343,6 +351,7 @@ export interface FieldProps {
   mode: Mode
   allowClear?: boolean
   filterOption?: FilterOption
+  getPopupContainer?: () => HTMLElement
 }
 export interface PeriodProps
   extends Omit<
@@ -358,6 +367,7 @@ export interface PeriodProps
   setValue: SetValuePeriod
   shortcuts: Shortcuts
   allowedPeriods: PeriodType[]
+  getPopupContainer?: () => HTMLElement
 }
 export interface MonthsProps extends FieldProps {
   humanizeLabels: boolean
@@ -412,6 +422,7 @@ export interface CustomSelectProps
   periodicityOnDoubleClick: boolean
   mode: Mode
   filterOption?: FilterOption
+  getPopupContainer?: () => HTMLElement
 }
 export type SetValueNumbersOrUndefined = Dispatch<
   SetStateAction<number[] | undefined>