diff --git a/chat/input-bar/src/InputBar/InputBar.types.ts b/chat/input-bar/src/InputBar/InputBar.types.ts index 9cd8ad3874..aaaa097d42 100644 --- a/chat/input-bar/src/InputBar/InputBar.types.ts +++ b/chat/input-bar/src/InputBar/InputBar.types.ts @@ -2,7 +2,7 @@ import { FormEvent, ReactElement } from 'react'; import { TextareaAutosizeProps } from 'react-textarea-autosize'; import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib'; -import { PortalControlProps } from '@leafygreen-ui/popover'; +import { PopoverRenderModeProps } from '@leafygreen-ui/popover'; export type InputBarProps = HTMLElementProps<'form'> & DarkModeProps & { @@ -48,7 +48,7 @@ export type InputBarProps = HTMLElementProps<'form'> & /** * Props passed to the Popover that renders the suggested promps. */ - dropdownProps?: PortalControlProps; + dropdownProps?: Omit; }; export type { TextareaAutosizeProps }; diff --git a/packages/combobox/src/Combobox/Combobox.types.ts b/packages/combobox/src/Combobox/Combobox.types.ts index 25b24f1370..af5b29bbc4 100644 --- a/packages/combobox/src/Combobox/Combobox.types.ts +++ b/packages/combobox/src/Combobox/Combobox.types.ts @@ -2,7 +2,7 @@ import React, { ReactNode } from 'react'; import { type ChipProps } from '@leafygreen-ui/chip'; import { Either, HTMLElementProps } from '@leafygreen-ui/lib'; -import { PortalControlProps } from '@leafygreen-ui/popover'; +import { PopoverRenderModeProps } from '@leafygreen-ui/popover'; import { ComboboxSize, @@ -60,7 +60,7 @@ type PartialChipProps = Pick< >; export type BaseComboboxProps = Omit, 'onChange'> & - PortalControlProps & + PopoverRenderModeProps & PartialChipProps & { /** * Defines the Combobox Options by passing children. Must be `ComboboxOption` or `ComboboxGroup` diff --git a/packages/combobox/src/ComboboxMenu/ComboboxMenu.tsx b/packages/combobox/src/ComboboxMenu/ComboboxMenu.tsx index 90c2791865..b5c25f8783 100644 --- a/packages/combobox/src/ComboboxMenu/ComboboxMenu.tsx +++ b/packages/combobox/src/ComboboxMenu/ComboboxMenu.tsx @@ -6,7 +6,7 @@ import { useAvailableSpace, useForwardedRef } from '@leafygreen-ui/hooks'; import Icon from '@leafygreen-ui/icon'; import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; import { palette } from '@leafygreen-ui/palette'; -import Popover, { PortalControlProps } from '@leafygreen-ui/popover'; +import Popover, { PopoverRenderModeProps } from '@leafygreen-ui/popover'; import { Error } from '@leafygreen-ui/typography'; import { ComboboxProps } from '../Combobox'; @@ -30,7 +30,7 @@ type ComboboxMenuProps = { id: string; labelId: string; menuWidth: number; -} & PortalControlProps & +} & PopoverRenderModeProps & Pick< ComboboxProps, | 'searchLoadingMessage' diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts index 1a21370038..29b4c8f80e 100644 --- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts +++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts @@ -1,7 +1,8 @@ import { HTMLElementProps } from '@leafygreen-ui/lib'; import { PopoverProps } from '@leafygreen-ui/popover'; -import { PortalControlProps } from '@leafygreen-ui/popover'; -export type DatePickerMenuProps = PortalControlProps & - Omit & +export type DatePickerMenuProps = Omit< + PopoverProps, + 'children' | 'renderMode' | 'usePortal' +> & HTMLElementProps<'div'>; diff --git a/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx b/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx index 445e80fc79..1bf7e26a6b 100644 --- a/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx +++ b/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx @@ -10,7 +10,11 @@ import Popover, { PopoverProps } from '@leafygreen-ui/popover'; import { menuStyles } from './MenuWrapper.styles'; -export type MenuWrapperProps = PopoverProps & HTMLElementProps<'div'>; +export type MenuWrapperProps = Omit< + PopoverProps, + 'dismissMode' | 'onToggle' | 'renderMode' +> & + HTMLElementProps<'div'>; /** * A simple styled popover component @@ -24,6 +28,7 @@ export const MenuWrapper = forwardRef( ref={fwdRef} className={cx(menuStyles[theme], className)} {...props} + usePortal > {/* * Prevents the opening and closing state of a select dropdown from propagating up diff --git a/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts b/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts index adf2a821fb..bef824b244 100644 --- a/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts +++ b/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts @@ -8,7 +8,13 @@ import { AutoComplete, DatePickerState } from './types'; export type ModifiedPopoverProps = Omit< PopoverProps, - 'usePortal' | 'refEl' | 'children' | 'className' | 'active' | 'onClick' + | 'usePortal' + | 'refEl' + | 'children' + | 'className' + | 'active' + | 'onClick' + | 'renderMode' >; export type BaseDatePickerProps = { diff --git a/packages/guide-cue/src/GuideCue.tsx b/packages/guide-cue/src/GuideCue.tsx index e564db4e46..978f2ffada 100644 --- a/packages/guide-cue/src/GuideCue.tsx +++ b/packages/guide-cue/src/GuideCue.tsx @@ -160,6 +160,7 @@ function GuideCue({ adjustOnMutation={true} popoverZIndex={popoverZIndex} {...sharedProps} + usePortal={true} > {/* The beacon is using the popover component to position itself */}
; interface StandaloneProps { diff --git a/packages/number-input/src/UnitSelect/UnitSelect.types.ts b/packages/number-input/src/UnitSelect/UnitSelect.types.ts index 439bf3362a..0fd84f12ca 100644 --- a/packages/number-input/src/UnitSelect/UnitSelect.types.ts +++ b/packages/number-input/src/UnitSelect/UnitSelect.types.ts @@ -1,11 +1,11 @@ import { PopoverProps as ImportedPopoverProps, - PortalControlProps, + PopoverRenderModeProps, } from '@leafygreen-ui/popover'; import { Size, UnitOption } from '../NumberInput/NumberInput.types'; -export type PopoverProps = PortalControlProps & +export type PopoverProps = PopoverRenderModeProps & Pick; export type UnitSelectProps = { diff --git a/packages/search-input/src/SearchResultsMenu/SearchResultsMenu.tsx b/packages/search-input/src/SearchResultsMenu/SearchResultsMenu.tsx index 257cc7e160..e684b4d257 100644 --- a/packages/search-input/src/SearchResultsMenu/SearchResultsMenu.tsx +++ b/packages/search-input/src/SearchResultsMenu/SearchResultsMenu.tsx @@ -32,7 +32,7 @@ export const SearchResultsMenu = React.forwardRef< children, open = false, refEl, - usePortal, + usePortal = true, portalClassName, portalContainer, portalRef, diff --git a/packages/search-input/src/SearchResultsMenu/SearchResultsMenu.types.ts b/packages/search-input/src/SearchResultsMenu/SearchResultsMenu.types.ts index ec935c8d91..fae8fe953f 100644 --- a/packages/search-input/src/SearchResultsMenu/SearchResultsMenu.types.ts +++ b/packages/search-input/src/SearchResultsMenu/SearchResultsMenu.types.ts @@ -1,10 +1,10 @@ import React, { ReactElement } from 'react'; import { HTMLElementProps } from '@leafygreen-ui/lib'; -import { PortalControlProps } from '@leafygreen-ui/popover'; +import { PopoverRenderModeProps } from '@leafygreen-ui/popover'; export type SearchResultsMenuProps = HTMLElementProps<'ul', HTMLUListElement> & - PortalControlProps & { + Omit & { refEl: React.RefObject; open?: boolean; footerSlot?: ReactElement;