GrafanaDS: Add support for annotation time regions (#65462)

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>
Co-authored-by: Adela Almasan <adela.almasan@grafana.com>

packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx

@@ -27,6 +27,8 @@ export interface Props {
   includeInternal?: boolean | InternalTimeZones[];
   disabled?: boolean;
   inputId?: string;
+  menuShouldPortal?: boolean;
+  openMenuOnFocus?: boolean;
 }
 
 export const TimeZonePicker = (props: Props) => {
@@ -39,6 +41,8 @@ export const TimeZonePicker = (props: Props) => {
     includeInternal = false,
     disabled = false,
     inputId,
+    menuShouldPortal = false,
+    openMenuOnFocus = true,
   } = props;
   const groupedTimeZones = useTimeZones(includeInternal);
   const selected = useSelectedTimeZone(groupedTimeZones, value);
@@ -61,8 +65,8 @@ export const TimeZonePicker = (props: Props) => {
       value={selected}
       placeholder={t('time-picker.zone.select-search-input', 'Type to search (country, city, abbreviation)')}
       autoFocus={autoFocus}
-      menuShouldPortal={false}
-      openMenuOnFocus={true}
+      menuShouldPortal={menuShouldPortal}
+      openMenuOnFocus={openMenuOnFocus}
       width={width}
       filterOption={filterBySearchIndex}
       options={groupedTimeZones}