Make @leafygreen-ui/leafygreen-provider changes minor (#2528)

* Make LG Provider changes minor * Remove unused imports
mongodb · Nov 4, 2024 · 7fa15ab · 7fa15ab
1 parent 22b35d3
commit 7fa15ab
Show file tree

Hide file tree

Showing 30 changed files with 596 additions and 615 deletions.
diff --git a/packages/code/src/CopyButton/CopyButton.tsx b/packages/code/src/CopyButton/CopyButton.tsx
@@ -9,7 +9,7 @@ import CopyIcon from '@leafygreen-ui/icon/dist/Copy';
 import IconButton from '@leafygreen-ui/icon-button';
 import {
   useDarkMode,
-  usePopoverContext,
+  usePopoverPortalContainer,
 } from '@leafygreen-ui/leafygreen-provider';
 import { keyMap } from '@leafygreen-ui/lib';
 import Tooltip, {
@@ -37,7 +37,7 @@ function CopyButton({ onCopy, contents }: CopyProps) {
   const buttonRef = useRef<HTMLButtonElement>(null);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
   const { theme } = useDarkMode();
-  const { portalContainer } = usePopoverContext();
+  const { portalContainer } = usePopoverPortalContainer();
 
   /**
    * toggles `tooltipOpen` state

diff --git a/packages/combobox/src/Combobox/Combobox.tsx b/packages/combobox/src/Combobox/Combobox.tsx
@@ -32,7 +32,7 @@ import {
 import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
 import LeafyGreenProvider, {
-  PopoverProvider,
+  PopoverPropsProvider,
   useDarkMode,
 } from '@leafygreen-ui/leafygreen-provider';
 import { consoleOnce, isComponentType, keyMap } from '@leafygreen-ui/lib';
@@ -1326,7 +1326,7 @@ export function Combobox<M extends boolean>({
           *  Menu  *
           / *******/}
 
-          <PopoverProvider {...popoverProps}>
+          <PopoverPropsProvider {...popoverProps}>
             <ComboboxMenu
               id={menuId}
               labelId={labelId}
@@ -1339,7 +1339,7 @@ export function Combobox<M extends boolean>({
             >
               {renderedOptionsJSX}
             </ComboboxMenu>
-          </PopoverProvider>
+          </PopoverPropsProvider>
         </div>
       </ComboboxContext.Provider>
     </LeafyGreenProvider>

diff --git a/packages/copyable/src/Copyable/Copyable.tsx b/packages/copyable/src/Copyable/Copyable.tsx
@@ -8,7 +8,7 @@ import { useIdAllocator } from '@leafygreen-ui/hooks';
 import CopyIcon from '@leafygreen-ui/icon/dist/Copy';
 import {
   useDarkMode,
-  usePopoverContext,
+  usePopoverPortalContainer,
 } from '@leafygreen-ui/leafygreen-provider';
 import { BaseFontSize } from '@leafygreen-ui/tokens';
 import Tooltip, {
@@ -59,7 +59,7 @@ export default function Copyable({
   const [buttonRef, setButtonRef] = useState<HTMLButtonElement>();
   const codeRef = useRef<HTMLElement>(null);
 
-  const { portalContainer } = usePopoverContext();
+  const { portalContainer } = usePopoverPortalContainer();
 
   const baseFontSize = useUpdatedBaseFontSize();
 

diff --git a/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx b/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 
 import { cx } from '@leafygreen-ui/emotion';
 import {
-  ModalPopoverProvider,
+  PopoverProvider,
   useDarkMode,
 } from '@leafygreen-ui/leafygreen-provider';
 import { HTMLElementProps } from '@leafygreen-ui/lib';
@@ -44,9 +44,9 @@ export const MenuWrapper = forwardRef<HTMLDivElement, MenuWrapperProps>(
       >
         {/*
          * Prevents the opening and closing state of a select dropdown from propagating up
-         * to other ModalPopoverProviders in parent components. E.g. Modal
+         * to other PopoverProviders in parent components. E.g. Modal
          */}
-        <ModalPopoverProvider>{children}</ModalPopoverProvider>
+        <PopoverProvider>{children}</PopoverProvider>
       </Popover>
     );
   },

diff --git a/packages/leafygreen-provider/src/LeafyGreenContext.spec.tsx b/packages/leafygreen-provider/src/LeafyGreenContext.spec.tsx
@@ -1,19 +1,19 @@
 import React from 'react';
 import { cleanup, render } from '@testing-library/react';
 
-import { LeafyGreenProviderProps } from './LeafyGreenContext';
+import { LeafyGreenProviderProps } from './LeafyGreenContext.types';
 import LeafyGreenProvider, {
   useBaseFontSize,
   useDarkMode,
-  usePopoverContext,
+  usePopoverPortalContainer,
 } from '.';
 
 afterAll(cleanup);
 
 const ContextChecker = () => {
   const { darkMode } = useDarkMode();
   const baseFontSize = useBaseFontSize();
-  const { portalContainer, scrollContainer } = usePopoverContext();
+  const { portalContainer, scrollContainer } = usePopoverPortalContainer();
 
   return (
     <>
@@ -53,6 +53,7 @@ describe('packages/leafygreen-provider/LeafyGreenProvider', () => {
       baseFontSize = 16,
       portalId = 'portal',
       scrollId = 'scroll',
+      forceUseTopLayer = false,
     ) => {
       const portalContainer = document.createElement('div');
       portalContainer.setAttribute('id', portalId);
@@ -66,6 +67,7 @@ describe('packages/leafygreen-provider/LeafyGreenProvider', () => {
           portalContainer,
           scrollContainer,
         },
+        forceUseTopLayer,
       } as Required<LeafyGreenProviderProps>;
     };
 

diff --git a/packages/leafygreen-provider/src/LeafyGreenContext.tsx b/packages/leafygreen-provider/src/LeafyGreenContext.tsx
@@ -1,40 +1,16 @@
 import React, { PropsWithChildren, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { DarkModeProps } from '@leafygreen-ui/lib';
-
-import { RenderMode } from './PopoverContext/PopoverContext.types';
 import DarkModeProvider, { useDarkModeContext } from './DarkModeContext';
+import { LeafyGreenProviderProps } from './LeafyGreenContext.types';
+import { MigrationProvider, useMigrationContext } from './MigrationContext';
 import {
-  MigrationContextType,
-  MigrationProvider,
-  useMigrationContext,
-} from './MigrationContext';
-import {
-  PopoverProvider,
-  PopoverProviderProps,
-  usePopoverContext,
-} from './PopoverContext';
-import TypographyProvider, {
-  TypographyProviderProps,
-  useBaseFontSize,
-} from './TypographyContext';
+  PortalContextProvider,
+  usePopoverPortalContainer,
+} from './PortalContext';
+import TypographyProvider, { useBaseFontSize } from './TypographyContext';
 import UsingKeyboardProvider from './UsingKeyboardContext';
 
-type PopoverPortalContainerType = Pick<
-  PopoverProviderProps,
-  'portalContainer' | 'scrollContainer'
->;
-
-export type LeafyGreenProviderProps = {
-  /**
-   * Define a container HTMLElement for components that utilize the `Portal` component
-   */
-  popoverPortalContainer?: PopoverPortalContainerType;
-} & TypographyProviderProps &
-  DarkModeProps &
-  MigrationContextType;
-
 function LeafyGreenProvider({
   children,
   baseFontSize: fontSizeProp,
@@ -60,46 +36,34 @@ function LeafyGreenProvider({
   const inheritedFontSize = useBaseFontSize();
   const baseFontSize = fontSizeProp ?? inheritedFontSize;
 
+  /**
+   * If `popoverPortalContainer` prop is provided, use that. Otherwise, use context value
+   */
+  const inheritedContainer = usePopoverPortalContainer();
+  const popoverPortalContainer =
+    popoverPortalContainerProp ?? inheritedContainer;
+
   /**
    * If `forceUseTopLayerProp` is true, it will globally apply to all children
    */
   const migrationContext = useMigrationContext();
   const forceUseTopLayer =
     forceUseTopLayerProp || migrationContext.forceUseTopLayer;
 
-  /**
-   * If `popoverPortalContainer` prop is provided, use that. Otherwise, use context value
-   */
-  const popoverContext = usePopoverContext();
-  const inheritedPopoverContextContainers: PopoverPortalContainerType =
-    Object.fromEntries(
-      Object.entries(popoverContext).filter(([key, _]) =>
-        ['portalContainer', 'scrollContainer'].includes(key),
-      ),
-    );
-  const { portalContainer, scrollContainer } =
-    popoverPortalContainerProp ?? inheritedPopoverContextContainers;
-  const popoverProviderProps =
-    portalContainer || scrollContainer
-      ? { renderMode: RenderMode.Portal, portalContainer, scrollContainer }
-      : ({
-          renderMode: RenderMode.TopLayer,
-        } as const);
-
   return (
     <UsingKeyboardProvider>
-      <TypographyProvider baseFontSize={baseFontSize}>
-        <DarkModeProvider
-          contextDarkMode={darkModeState}
-          setDarkMode={setDarkMode}
-        >
-          <MigrationProvider forceUseTopLayer={forceUseTopLayer}>
-            <PopoverProvider {...popoverProviderProps}>
+      <PortalContextProvider popover={popoverPortalContainer}>
+        <TypographyProvider baseFontSize={baseFontSize}>
+          <DarkModeProvider
+            contextDarkMode={darkModeState}
+            setDarkMode={setDarkMode}
+          >
+            <MigrationProvider forceUseTopLayer={forceUseTopLayer}>
               {children}
-            </PopoverProvider>
-          </MigrationProvider>
-        </DarkModeProvider>
-      </TypographyProvider>
+            </MigrationProvider>
+          </DarkModeProvider>
+        </TypographyProvider>
+      </PortalContextProvider>
     </UsingKeyboardProvider>
   );
 }

diff --git a/packages/leafygreen-provider/src/LeafyGreenContext.types.ts b/packages/leafygreen-provider/src/LeafyGreenContext.types.ts
@@ -0,0 +1,14 @@
+import { DarkModeProps } from '@leafygreen-ui/lib';
+
+import { MigrationContextType } from './MigrationContext';
+import { PortalContextValues } from './PortalContext';
+import { TypographyProviderProps } from './TypographyContext';
+
+export type LeafyGreenProviderProps = {
+  /**
+   * Define a container HTMLElement for components that utilize the `Portal` component
+   */
+  popoverPortalContainer?: PortalContextValues['popover'];
+} & TypographyProviderProps &
+  DarkModeProps &
+  MigrationContextType;
diff --git a/packages/leafygreen-provider/src/ModalPopoverContext/ModalPopoverContext.spec.tsx b/packages/leafygreen-provider/src/ModalPopoverContext/ModalPopoverContext.spec.tsx
diff --git a/packages/leafygreen-provider/src/ModalPopoverContext/ModalPopoverContext.tsx b/packages/leafygreen-provider/src/ModalPopoverContext/ModalPopoverContext.tsx