diff --git a/packages/core-components/src/layout/Sidebar/SidebarOpenStateContext.test.tsx b/packages/core-components/src/layout/Sidebar/SidebarOpenStateContext.test.tsx index 4953e1341b..f1900f025c 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarOpenStateContext.test.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarOpenStateContext.test.tsx @@ -56,6 +56,26 @@ describe('SidebarOpenStateContext', () => { }); describe('useSidebarOpenState', () => { + it('can be invoked within legacy context', () => { + const wrapper = ({ children }: { children: ReactNode }) => ( + {}, + }} + > + {children} + + ); + + const { result } = renderHook(() => useSidebarOpenState(), { + wrapper, + }); + + expect(result.current.isOpen).toBe(true); + expect(typeof result.current.setOpen).toBe('function'); + }); + it('does not need to be invoked within provider', () => { const { result } = renderHook(() => useSidebarOpenState()); expect(result.current.isOpen).toBe(false); diff --git a/packages/core-components/src/layout/Sidebar/SidebarOpenStateContext.tsx b/packages/core-components/src/layout/Sidebar/SidebarOpenStateContext.tsx index be15785f29..635306959a 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarOpenStateContext.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarOpenStateContext.tsx @@ -50,7 +50,7 @@ export type SidebarOpenState = { setOpen: (open: boolean) => void; }; -const defaultSidebarContext = { +const defaultSidebarOpenStateContext = { isOpen: false, setOpen: () => {}, }; @@ -62,7 +62,7 @@ const defaultSidebarContext = { * Use `` + `useSidebar()` instead. */ export const LegacySidebarContext = createContext( - defaultSidebarContext, + defaultSidebarOpenStateContext, ); const VersionedSidebarContext = createVersionedContext<{ @@ -97,17 +97,19 @@ export const SidebarOpenStateProvider = ({ * @public */ export const useSidebarOpenState = (): SidebarOpenState => { - const versionedSidebarContext = useContext(VersionedSidebarContext); + const versionedOpenStateContext = useContext(VersionedSidebarContext); + const legacyOpenStateContext = useContext(LegacySidebarContext); - // Invoked from outside a SidebarOpenStateProvider, return a default value. - if (versionedSidebarContext === undefined) { - return defaultSidebarContext; + // Invoked from outside a SidebarOpenStateProvider: check for the legacy + // context's value, but otherwise return the default. + if (versionedOpenStateContext === undefined) { + return legacyOpenStateContext || defaultSidebarOpenStateContext; } - const sidebarContext = versionedSidebarContext.atVersion(1); - if (sidebarContext === undefined) { + const openStateContext = versionedOpenStateContext.atVersion(1); + if (openStateContext === undefined) { throw new Error('No context found for version 1.'); } - return sidebarContext; + return openStateContext; }; diff --git a/packages/core-components/src/layout/Sidebar/SidebarPinStateContext.test.tsx b/packages/core-components/src/layout/Sidebar/SidebarPinStateContext.test.tsx index 1a86ec612e..8bd1597725 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarPinStateContext.test.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarPinStateContext.test.tsx @@ -63,6 +63,28 @@ describe('SidebarPinStateContext', () => { }); describe('useSidebarPinState', () => { + it('can be invoked within legacy context', () => { + const wrapper = ({ children }: { children: ReactNode }) => ( + {}, + }} + > + {children} + + ); + + const { result } = renderHook(() => useSidebarPinState(), { + wrapper, + }); + + expect(result.current.isPinned).toBe(true); + expect(result.current.isMobile).toBe(true); + expect(typeof result.current.toggleSidebarPinState).toBe('function'); + }); + it('does not need to be invoked within provider', () => { const { result } = renderHook(() => useSidebarPinState()); expect(result.current.isPinned).toBe(true); diff --git a/packages/core-components/src/layout/Sidebar/SidebarPinStateContext.tsx b/packages/core-components/src/layout/Sidebar/SidebarPinStateContext.tsx index a85929ab70..e00ed259e9 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarPinStateContext.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarPinStateContext.tsx @@ -103,17 +103,19 @@ export const SidebarPinStateProvider = ({ * @public */ export const useSidebarPinState = (): SidebarPinState => { - const versionedSidebarContext = useContext(VersionedSidebarPinStateContext); + const versionedPinStateContext = useContext(VersionedSidebarPinStateContext); + const legacyPinStateContext = useContext(LegacySidebarPinStateContext); - // Invoked from outside a SidebarPinStateProvider: default value. - if (versionedSidebarContext === undefined) { - return defaultSidebarPinStateContext; + // Invoked from outside a SidebarPinStateProvider: check for the legacy + // context's value, but otherwise return the default. + if (versionedPinStateContext === undefined) { + return legacyPinStateContext || defaultSidebarPinStateContext; } - const sidebarContext = versionedSidebarContext.atVersion(1); - if (sidebarContext === undefined) { + const pinStateContext = versionedPinStateContext.atVersion(1); + if (pinStateContext === undefined) { throw new Error('No context found for version 1.'); } - return sidebarContext; + return pinStateContext; };