Refactor types in Popover-consuming packages

mongodb · Sep 18, 2024 · 17d4fbc · 17d4fbc
1 parent 95a4e18
commit 17d4fbc
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 15 deletions.
diff --git 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?: PopoverRenderModeProps;
   };
 
 export type { TextareaAutosizeProps };
diff --git 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<HTMLElementProps<'div'>, '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
@@ -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<any>,
     | 'searchLoadingMessage'

diff --git 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<PopoverProps, 'children'> &
+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
@@ -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<HTMLDivElement, MenuWrapperProps>(
         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
@@ -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
@@ -160,6 +160,7 @@ function GuideCue({
           adjustOnMutation={true}
           popoverZIndex={popoverZIndex}
           {...sharedProps}
+          usePortal={true}
         >
           {/* The beacon is using the popover component to position itself */}
           <div

diff --git a/packages/guide-cue/src/types.ts b/packages/guide-cue/src/types.ts
@@ -38,6 +38,7 @@ type ModifiedTooltipProps = Omit<
   | 'refEl'
   | 'darkMode'
   | 'initialOpen'
+  | 'renderMode'
 >;
 
 interface StandaloneProps {

diff --git 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<ImportedPopoverProps, 'popoverZIndex'>;
 
 export type UnitSelectProps = {

diff --git 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 & {
+  PopoverRenderModeProps & {
     refEl: React.RefObject<HTMLElement>;
     open?: boolean;
     footerSlot?: ReactElement;