diff --git a/.changeset/popular-steaks-grab.md b/.changeset/popular-steaks-grab.md new file mode 100644 index 0000000000..06b3fe5ece --- /dev/null +++ b/.changeset/popular-steaks-grab.md @@ -0,0 +1,10 @@ +--- +'@leafygreen-ui/code': patch +'@leafygreen-ui/copyable': patch +'@leafygreen-ui/modal': patch +'@leafygreen-ui/popover': patch +--- + +[LG-4446](https://jira.mongodb.org/browse/LG-4446): In order to consolidate popover-related contexts, the `PortalContext` values for `portalContainer` and `scrollContainer` are consolidated in the `PopoverContext`. + +`usePopoverPortalContainer` is replaced by `usePopoverContext` and `PortalContextProvider` is replaced by `PopoverProvider`. There are no functional changes. diff --git a/.changeset/smooth-experts-admire.md b/.changeset/smooth-experts-admire.md new file mode 100644 index 0000000000..5874537516 --- /dev/null +++ b/.changeset/smooth-experts-admire.md @@ -0,0 +1,29 @@ +--- +'@leafygreen-ui/leafygreen-provider': major +--- + +[LG-4446](https://jira.mongodb.org/browse/LG-4446): In order to consolidate popover-related contexts, the `PortalContext` values for `portalContainer` and `scrollContainer` are consolidated in the `PopoverContext`. + +`usePopoverPortalContainer` is replaced by `usePopoverContext` and `PortalContextProvider` is replaced by `PopoverProvider`. + +`usePopoverPortalContainer` (used internally) and `PortalContextProvider` are no longer exported. See below migration guidance. + +#### Migration guide + +##### Old +```js + +``` + +##### New +```js + +``` diff --git a/packages/code/src/CopyButton/CopyButton.tsx b/packages/code/src/CopyButton/CopyButton.tsx index 02a4362d73..01a73ea23a 100644 --- 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, - usePopoverPortalContainer, + usePopoverContext, } from '@leafygreen-ui/leafygreen-provider'; import { keyMap } from '@leafygreen-ui/lib'; import Tooltip, { Align, Justify } from '@leafygreen-ui/tooltip'; @@ -27,7 +27,7 @@ function CopyButton({ onCopy, contents }: CopyProps) { const [open, setOpen] = useState(false); const buttonRef = useRef(null); const { theme } = useDarkMode(); - const { portalContainer } = usePopoverPortalContainer(); + const { portalContainer } = usePopoverContext(); /** * toggles `open` state of tooltip diff --git a/packages/copyable/src/Copyable/Copyable.tsx b/packages/copyable/src/Copyable/Copyable.tsx index ee5ff23422..51e7bc3b62 100644 --- 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, - usePopoverPortalContainer, + usePopoverContext, } from '@leafygreen-ui/leafygreen-provider'; import { BaseFontSize } from '@leafygreen-ui/tokens'; import Tooltip, { Align, Justify, TriggerEvent } from '@leafygreen-ui/tooltip'; @@ -54,7 +54,7 @@ export default function Copyable({ const [buttonRef, setButtonRef] = useState(); const codeRef = useRef(null); - const { portalContainer } = usePopoverPortalContainer(); + const { portalContainer } = usePopoverContext(); 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 index e7859e4cee..445e80fc79 100644 --- a/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx +++ b/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx @@ -25,7 +25,12 @@ export const MenuWrapper = forwardRef( className={cx(menuStyles[theme], className)} {...props} > - {/* Prevents the opening and closing state of a select dropdown from propagating up to other PopoverProviders in parent components. E.g. Modal */} + {/* + * Prevents the opening and closing state of a select dropdown from propagating up + * to other PopoverProviders in parent components. E.g. Modal + * + * TODO: https://jira.mongodb.org/browse/LG-4474 + */} {children} ); diff --git a/packages/leafygreen-provider/package.json b/packages/leafygreen-provider/package.json index 1f0f444fd2..b773826a4d 100644 --- a/packages/leafygreen-provider/package.json +++ b/packages/leafygreen-provider/package.json @@ -22,8 +22,9 @@ "access": "public" }, "dependencies": { + "@leafygreen-ui/hooks": "^8.1.3", "@leafygreen-ui/lib": "^13.3.0", - "@leafygreen-ui/hooks": "^8.1.3" + "react-transition-group": "^4.4.5" }, "gitHead": "dd71a2d404218ccec2e657df9c0263dc1c15b9e0", "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/leafygreen-provider", diff --git a/packages/leafygreen-provider/src/LeafyGreenContext.spec.tsx b/packages/leafygreen-provider/src/LeafyGreenContext.spec.tsx index d9550b0fc5..6996b5bf34 100644 --- a/packages/leafygreen-provider/src/LeafyGreenContext.spec.tsx +++ b/packages/leafygreen-provider/src/LeafyGreenContext.spec.tsx @@ -5,7 +5,7 @@ import { LeafyGreenProviderProps } from './LeafyGreenContext'; import LeafyGreenProvider, { useBaseFontSize, useDarkMode, - usePopoverPortalContainer, + usePopoverContext, } from '.'; afterAll(cleanup); @@ -13,7 +13,7 @@ afterAll(cleanup); const ContextChecker = () => { const { darkMode } = useDarkMode(); const baseFontSize = useBaseFontSize(); - const { portalContainer, scrollContainer } = usePopoverPortalContainer(); + const { portalContainer, scrollContainer } = usePopoverContext(); return ( <> diff --git a/packages/leafygreen-provider/src/LeafyGreenContext.tsx b/packages/leafygreen-provider/src/LeafyGreenContext.tsx index 404ba0a1d1..cf27769360 100644 --- a/packages/leafygreen-provider/src/LeafyGreenContext.tsx +++ b/packages/leafygreen-provider/src/LeafyGreenContext.tsx @@ -5,21 +5,27 @@ import { DarkModeProps } from '@leafygreen-ui/lib'; import DarkModeProvider, { useDarkModeContext } from './DarkModeContext'; import { OverlayProvider } from './OverlayContext'; -import PortalContextProvider, { - PortalContextValues, - usePopoverPortalContainer, -} from './PortalContext'; +import { + PopoverContextType, + PopoverProvider, + usePopoverContext, +} from './PopoverContext'; import TypographyProvider, { TypographyProviderProps, useBaseFontSize, } from './TypographyContext'; import UsingKeyboardProvider from './UsingKeyboardContext'; +type PopoverPortalContainerType = Pick< + PopoverContextType, + 'portalContainer' | 'scrollContainer' +>; + export type LeafyGreenProviderProps = { /** * Define a container HTMLElement for components that utilize the `Portal` component */ - popoverPortalContainer?: PortalContextValues['popover']; + popoverPortalContainer?: PopoverPortalContainerType; } & TypographyProviderProps & DarkModeProps; @@ -29,8 +35,9 @@ function LeafyGreenProvider({ popoverPortalContainer: popoverPortalContainerProp, darkMode: darkModeProp, }: PropsWithChildren) { - // if the prop is set, we use that - // if the prop is not set, we use outer context + /** + * If `darkMode` prop is provided, use that. Otherwise, use context value + */ const { contextDarkMode: inheritedDarkMode } = useDarkModeContext(); const [darkModeState, setDarkMode] = useState( darkModeProp ?? inheritedDarkMode, @@ -40,26 +47,39 @@ function LeafyGreenProvider({ setDarkMode(darkModeProp ?? inheritedDarkMode); }, [darkModeProp, inheritedDarkMode]); - // Similarly with base font size + /** + * If `baseFontSize` prop is provided, use that. Otherwise, use context value + */ const inheritedFontSize = useBaseFontSize(); const baseFontSize = fontSizeProp ?? inheritedFontSize; - // and popover portal container - const inheritedContainer = usePopoverPortalContainer(); - const popoverPortalContainer = - popoverPortalContainerProp ?? inheritedContainer; + + /** + * 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 popoverContextContainerValues = + popoverPortalContainerProp ?? inheritedPopoverContextContainers; return ( - - - - {children} - - - + + + + + {children} + + + + ); } diff --git a/packages/leafygreen-provider/src/PopoverContext/PopoverContext.spec.tsx b/packages/leafygreen-provider/src/PopoverContext/PopoverContext.spec.tsx index 00b3d8dd18..4a7071c780 100644 --- a/packages/leafygreen-provider/src/PopoverContext/PopoverContext.spec.tsx +++ b/packages/leafygreen-provider/src/PopoverContext/PopoverContext.spec.tsx @@ -1,9 +1,11 @@ -import React, { PropsWithChildren } from 'react'; -import { act, fireEvent, render, waitFor } from '@testing-library/react'; +import React from 'react'; +import { act, render, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { renderHook } from '@leafygreen-ui/testing-lib'; -import { PopoverProvider, type PopoverState, usePopoverContext } from '.'; +import { PopoverProvider, usePopoverContext } from './PopoverContext'; +import { type PopoverProviderProps } from './PopoverContext.types'; const childTestID = 'popover-provider'; const buttonTestId = 'test-button'; @@ -24,9 +26,9 @@ function TestContextComponent() { ); } -function renderProvider() { +function renderProvider(props?: PopoverProviderProps) { const utils = render( - + , ); @@ -40,32 +42,29 @@ describe('packages/leafygreen-provider/PopoverContext', () => { expect(container.firstChild).toBe(testChild); }); - test('isPopoverOpen is initialized as false', () => { + test('`isPopoverOpen` is initialized as false', () => { const { testChild } = renderProvider(); expect(testChild.textContent).toBe('false'); }); - test('when passed true, setIsPopoverOpen sets isPopoverOpen to true', () => { + test('when passed true, `setIsPopoverOpen` sets `isPopoverOpen` to true', () => { const { testChild, getByTestId } = renderProvider(); // The button's click handler fires setIsPopoverOpen(true) - fireEvent.click(getByTestId(buttonTestId)); + userEvent.click(getByTestId(buttonTestId)); expect(testChild.textContent).toBe('true'); }); }); describe('usePopoverContext', () => { - test('is `false` by default', () => { + test('`isPopoverOpen` is `false` by default', () => { const { result } = renderHook(usePopoverContext); expect(result.current.isPopoverOpen).toBeFalsy(); }); - test('setter updates the value', async () => { - const { result, rerender } = renderHook< - PropsWithChildren<{}>, - PopoverState - >(usePopoverContext, { + test('`setIsPopoverOpen` updates the value of `isPopoverOpen`', async () => { + const { result, rerender } = renderHook(usePopoverContext, { wrapper: ({ children }) => {children}, }); @@ -76,6 +75,24 @@ describe('usePopoverContext', () => { }); }); + test('passes provider props correctly', () => { + const mockOnEnter = jest.fn(); + const customProps = { + onEnter: mockOnEnter, + popoverZIndex: 2, + usePortal: true, + }; + const { result } = renderHook(usePopoverContext, { + wrapper: ({ children }) => ( + {children} + ), + }); + + expect(result.current).toHaveProperty('onEnter', mockOnEnter); + expect(result.current).toHaveProperty('popoverZIndex', 2); + expect(result.current).toHaveProperty('usePortal', true); + }); + describe('with test component', () => { function renderTestComponent() { const utils = render(); @@ -92,7 +109,7 @@ describe('usePopoverContext', () => { const { testChild, getByTestId } = renderTestComponent(); // The button's click handler fires setIsPopoverOpen(true) - fireEvent.click(getByTestId(buttonTestId)); + userEvent.click(getByTestId(buttonTestId)); expect(testChild.textContent).toBe('false'); }); diff --git a/packages/leafygreen-provider/src/PopoverContext/PopoverContext.tsx b/packages/leafygreen-provider/src/PopoverContext/PopoverContext.tsx index 125cab98fb..d1f13d4497 100644 --- a/packages/leafygreen-provider/src/PopoverContext/PopoverContext.tsx +++ b/packages/leafygreen-provider/src/PopoverContext/PopoverContext.tsx @@ -1,48 +1,46 @@ -import React, { createContext, useContext, useMemo, useState } from 'react'; +import React, { + createContext, + PropsWithChildren, + useContext, + useMemo, + useState, +} from 'react'; import PropTypes from 'prop-types'; -export interface PopoverState { - /** - * Whether the most immediate popover ancestor is open - */ - isPopoverOpen: boolean; - /** - * Sets the internal state - * @internal - */ - setIsPopoverOpen: React.Dispatch>; -} - -export const PopoverContext = createContext({ +import { + PopoverContextType, + PopoverProviderProps, +} from './PopoverContext.types'; + +export const PopoverContext = createContext({ isPopoverOpen: false, setIsPopoverOpen: () => {}, }); /** - * Access the popover state - * @returns `isPopoverOpen: boolean` + * Access the popover context */ -export function usePopoverContext(): PopoverState { +export const usePopoverContext = (): PopoverContextType => { return useContext(PopoverContext); -} - -interface PopoverProviderProps { - children?: React.ReactNode; -} +}; /** * Creates a Popover context. * Call `usePopoverContext` to access the popover state */ -export function PopoverProvider({ children }: PopoverProviderProps) { +export const PopoverProvider = ({ + children, + ...props +}: PropsWithChildren) => { const [isPopoverOpen, setIsPopoverOpen] = useState(false); const providerValue = useMemo( () => ({ isPopoverOpen, setIsPopoverOpen, + ...props, }), - [isPopoverOpen], + [isPopoverOpen, props], ); return ( @@ -50,7 +48,7 @@ export function PopoverProvider({ children }: PopoverProviderProps) { {children} ); -} +}; PopoverProvider.displayName = 'PopoverProvider'; diff --git a/packages/leafygreen-provider/src/PopoverContext/PopoverContext.types.ts b/packages/leafygreen-provider/src/PopoverContext/PopoverContext.types.ts new file mode 100644 index 0000000000..394d5d3f4a --- /dev/null +++ b/packages/leafygreen-provider/src/PopoverContext/PopoverContext.types.ts @@ -0,0 +1,111 @@ +import { Transition } from 'react-transition-group'; + +import { OverlayContext } from '@leafygreen-ui/leafygreen-provider'; + +/** + * These types are duplicated in `@leafygreen-ui/popover`: https://github.com/mongodb/leafygreen-ui/blob/02e1d77e5ed7d55f9b8402299eae0c6d540c53f8/packages/popover/src/Popover.types.ts + * + * We cannot import `PopoverProps` into `@leafygreen-ui/leafygreen-provider` without introducing a circular dependency. + */ + +type TransitionProps = React.ComponentProps>; + +type TransitionLifecycleCallbacks = Pick< + TransitionProps, + 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited' +>; + +type PortalControlProps = + | { + /** + * Specifies that the popover content should be rendered at the end of the DOM, + * rather than in the DOM tree. + * + * default: `true` + */ + usePortal?: true; + + /** + * When usePortal is `true`, specifies a class name to apply to the root element of the portal. + */ + portalClassName?: string; + + /** + * When usePortal is `true`, specifies an element to portal within. The default behavior is to generate a div at the end of the document to render within. + */ + portalContainer?: HTMLElement | null; + + /** + * A ref for the portal element + */ + portalRef?: React.MutableRefObject; + + /** + * When usePortal is `true`, specifies the scrollable element to position relative to. + */ + scrollContainer?: HTMLElement | null; + } + | { + /** + * Specifies that the popover content should be rendered at the end of the DOM, + * rather than in the DOM tree. + * + * default: `true` + */ + usePortal: false; + + /** + * When usePortal is `true`, specifies a class name to apply to the root element of the portal. + */ + portalClassName?: undefined; + + /** + * When usePortal is `true`, specifies an element to portal within. The default behavior is to generate a div at the end of the document to render within. + */ + portalContainer?: null; + + /** + * A ref for the portal element + */ + portalRef?: undefined; + + /** + * When usePortal is `true`, specifies the scrollable element to position relative to. + */ + scrollContainer?: null; + }; + +export type PopoverProviderProps = TransitionLifecycleCallbacks & + PortalControlProps & { + /** + * Specifies the amount of spacing (in pixels) between the trigger element and the Popover content. + * + * default: `10` + */ + spacing?: number; + + /** + * Number that controls the z-index of the popover element directly. + */ + popoverZIndex?: number; + }; + +/** TODO: https://jira.mongodb.org/browse/LG-4475 */ +interface DeprecatedPopoverState { + /** + * Whether the most immediate popover ancestor is open + * + * @deprecated Use {@link OverlayContext} instead + */ + isPopoverOpen: boolean; + + /** + * Sets the internal state + * @internal + * + * @deprecated Use {@link OverlayContext} instead + */ + setIsPopoverOpen: React.Dispatch>; +} + +export type PopoverContextType = PopoverProviderProps & DeprecatedPopoverState; diff --git a/packages/leafygreen-provider/src/PopoverContext/index.ts b/packages/leafygreen-provider/src/PopoverContext/index.ts index d31edeb0aa..69acd09128 100644 --- a/packages/leafygreen-provider/src/PopoverContext/index.ts +++ b/packages/leafygreen-provider/src/PopoverContext/index.ts @@ -1,6 +1,9 @@ export { PopoverContext, PopoverProvider, - type PopoverState, usePopoverContext, } from './PopoverContext'; +export { + type PopoverContextType, + type PopoverProviderProps, +} from './PopoverContext.types'; diff --git a/packages/leafygreen-provider/src/PortalContext.tsx b/packages/leafygreen-provider/src/PortalContext.tsx deleted file mode 100644 index a1794b3a4b..0000000000 --- a/packages/leafygreen-provider/src/PortalContext.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React, { createContext, useContext } from 'react'; - -export interface PortalContextValues { - popover: { - portalContainer?: HTMLElement | null; - scrollContainer?: HTMLElement | null; - }; -} - -const defaultPortalContextValues: PortalContextValues = { - popover: { - portalContainer: undefined, - scrollContainer: undefined, - }, -}; - -const PortalContext = createContext( - defaultPortalContextValues, -); - -export function usePopoverPortalContainer() { - const { popover } = useContext(PortalContext); - - return popover; -} - -interface PortalContext { - popover?: PortalContextValues['popover']; - children: React.ReactNode; -} - -export default function PortalContextProvider({ - popover = defaultPortalContextValues.popover, - children, -}: PortalContext) { - return ( - - {children} - - ); -} diff --git a/packages/leafygreen-provider/src/index.ts b/packages/leafygreen-provider/src/index.ts index 4d4e8ee60b..25ba508d85 100644 --- a/packages/leafygreen-provider/src/index.ts +++ b/packages/leafygreen-provider/src/index.ts @@ -9,12 +9,10 @@ export { } from './OverlayContext'; export { PopoverContext, + type PopoverContextType, PopoverProvider, + type PopoverProviderProps, usePopoverContext, } from './PopoverContext'; -export { - default as PortalContextProvider, - usePopoverPortalContainer, -} from './PortalContext'; export { useBaseFontSize } from './TypographyContext'; export { useUsingKeyboardContext } from './UsingKeyboardContext'; diff --git a/packages/modal/README.md b/packages/modal/README.md index 0cb3549e39..223cb8f73b 100644 --- a/packages/modal/README.md +++ b/packages/modal/README.md @@ -97,10 +97,10 @@ It is HIGHLY encouraged that any children inside of `Modal` should refrain from ## Using `Clipboard.js` inside `Modal` -To directly use the `Clipboard.js` library inside of `Modal`, rather than using the `Copyable` component, the reference value of the `Modal` should be used as the `container` when `Clipboard.js` is instantiated. You can get the reference value by consuming the `usePopoverPortalContainer` hook: +To directly use the `Clipboard.js` library inside of `Modal`, rather than using the `Copyable` component, the reference value of the `Modal` should be used as the `container` when `Clipboard.js` is instantiated. You can get the reference value by consuming the `usePopoverContext` hook: ``` - const { portalContainer } = usePopoverPortalContainer(); + const { portalContainer } = usePopoverContext(); const clipboard = new ClipboardJS(buttonRef, { container: portalContainer, diff --git a/packages/modal/package.json b/packages/modal/package.json index 1f43566d3e..5b750505e9 100644 --- a/packages/modal/package.json +++ b/packages/modal/package.json @@ -38,11 +38,11 @@ }, "devDependencies": { "@faker-js/faker": "8.0.2", + "@leafygreen-ui/button": "^21.2.0", + "@leafygreen-ui/code": "^14.3.3", + "@leafygreen-ui/copyable": "^8.0.25", "@leafygreen-ui/select": "^12.1.0", "@leafygreen-ui/typography": "^19.1.0", - "@leafygreen-ui/copyable": "^8.0.25", - "@leafygreen-ui/code": "^14.3.3", - "@leafygreen-ui/button": "^21.2.0", "@lg-tools/storybook-utils": "^0.1.1" }, "peerDependencies": { diff --git a/packages/modal/src/Modal/Modal.tsx b/packages/modal/src/Modal/Modal.tsx index e08d1d6e9a..7847716d17 100644 --- a/packages/modal/src/Modal/Modal.tsx +++ b/packages/modal/src/Modal/Modal.tsx @@ -27,6 +27,7 @@ import ModalView from './ModalView'; */ const Modal = React.forwardRef((props: ModalProps, ref: ForwardedRef) => { return ( + /** TODO: https://jira.mongodb.org/browse/LG-4474 */ diff --git a/packages/modal/src/Modal/ModalView.tsx b/packages/modal/src/Modal/ModalView.tsx index 2429fd1fb6..35853caed7 100644 --- a/packages/modal/src/Modal/ModalView.tsx +++ b/packages/modal/src/Modal/ModalView.tsx @@ -8,7 +8,7 @@ import { useEscapeKey, useIdAllocator } from '@leafygreen-ui/hooks'; import XIcon from '@leafygreen-ui/icon/dist/X'; import IconButton from '@leafygreen-ui/icon-button'; import LeafyGreenProvider, { - PortalContextProvider, + PopoverProvider, useDarkMode, usePopoverContext, } from '@leafygreen-ui/leafygreen-provider'; @@ -65,6 +65,7 @@ const ModalView = React.forwardRef( const [scrollContainerRef, setScrollContainerRef] = useState(null); + /** TODO: https://jira.mongodb.org/browse/LG-4474 */ const { isPopoverOpen } = usePopoverContext(); const handleClose = useCallback(() => { @@ -137,11 +138,9 @@ const ModalView = React.forwardRef( contentClassName, )} > - {children} - + diff --git a/packages/popover/src/Popover/Popover.tsx b/packages/popover/src/Popover/Popover.tsx index 9d71966454..99cb9302ea 100644 --- a/packages/popover/src/Popover/Popover.tsx +++ b/packages/popover/src/Popover/Popover.tsx @@ -10,10 +10,7 @@ import { usePrevious, useViewportSize, } from '@leafygreen-ui/hooks'; -import { - usePopoverContext, - usePopoverPortalContainer, -} from '@leafygreen-ui/leafygreen-provider'; +import { usePopoverContext } from '@leafygreen-ui/leafygreen-provider'; import { consoleOnce, createUniqueClassName } from '@leafygreen-ui/lib'; import Portal from '@leafygreen-ui/portal'; import { transitionDuration } from '@leafygreen-ui/tokens'; @@ -107,12 +104,14 @@ export const Popover = forwardRef( const [contentNode, setContentNode] = useState(null); const [forceUpdateCounter, setForceUpdateCounter] = useState(0); - const { setIsPopoverOpen } = usePopoverContext(); - - let { portalContainer, scrollContainer } = usePopoverPortalContainer(); + const { + portalContainer: portalContainerCtxVal, + scrollContainer: scrollContainerCtxVal, + setIsPopoverOpen, + } = usePopoverContext(); - portalContainer = portalContainerProp || portalContainer; - scrollContainer = scrollContainerProp || scrollContainer; + const portalContainer = portalContainerProp || portalContainerCtxVal; + const scrollContainer = scrollContainerProp || scrollContainerCtxVal; // When usePortal is true and a scrollContainer is passed in // show a warning if the portalContainer is not inside of the scrollContainer. diff --git a/packages/select/src/Select/Select.spec.tsx b/packages/select/src/Select/Select.spec.tsx index 93c8441295..6be7d7f5c5 100644 --- a/packages/select/src/Select/Select.spec.tsx +++ b/packages/select/src/Select/Select.spec.tsx @@ -1,4 +1,4 @@ -import React, { createRef, PropsWithChildren, useState } from 'react'; +import React, { createRef, useState } from 'react'; import { act, fireEvent, @@ -11,7 +11,9 @@ import { import userEvent from '@testing-library/user-event'; import BeakerIcon from '@leafygreen-ui/icon/dist/Beaker'; -import { PopoverContext } from '@leafygreen-ui/leafygreen-provider'; +// TODO: https://jira.mongodb.org/browse/LG-4474 +import * as LeafyGreenProviderModule from '@leafygreen-ui/leafygreen-provider'; +import { PopoverProvider } from '@leafygreen-ui/leafygreen-provider'; import { keyMap } from '@leafygreen-ui/lib'; import { Context, jest as Jest } from '@leafygreen-ui/testing-lib'; @@ -1117,28 +1119,21 @@ describe('packages/select', () => { describe('with PopoverContext', () => { const mockSetIsPopoverOpen = jest.fn(); - const MockPopoverProvider = ({ children }: PropsWithChildren<{}>) => { - return ( - - {children} - - ); - }; - - beforeEach(() => { - mockSetIsPopoverOpen.mockClear(); + afterEach(() => { + mockSetIsPopoverOpen.mockReset(); }); test('calls `setIsPopoverOpen`', async () => { + jest + .spyOn(LeafyGreenProviderModule, 'usePopoverContext') + .mockImplementation(() => ({ + isPopoverOpen: false, + setIsPopoverOpen: mockSetIsPopoverOpen, + })); render( - + - , + +