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