Consume legacy context in hook too, just in case.

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>

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 }) => (
+        <SidebarOpenStateProvider
+          value={{
+            isOpen: true,
+            setOpen: () => {},
+          }}
+        >
+          {children}
+        </SidebarOpenStateProvider>
+      );
+
+      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);

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 `<SidebarContextProvider>` + `useSidebar()` instead.
  */
 export const LegacySidebarContext = createContext<SidebarContextType>(
-  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;
 };

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 }) => (
+        <LegacySidebarPinStateContext.Provider
+          value={{
+            isPinned: true,
+            isMobile: true,
+            toggleSidebarPinState: () => {},
+          }}
+        >
+          {children}
+        </LegacySidebarPinStateContext.Provider>
+      );
+
+      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);

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;
 };