UI: fix TocPopover, Sidebar to work in react 18 (#1416)

Author: icepeng

packages/ui/src/components/layout/toc.tsx

@@ -149,6 +149,8 @@ const Context = createContext<{
   setOpen: (open: boolean) => void;
 } | null>(null);
 
+const TocProvider = Context.Provider || Context;
+
 export function TocPopover({
   open,
   onOpenChange,
@@ -157,7 +159,7 @@ export function TocPopover({
 }: MakeRequired<ComponentProps<typeof Collapsible>, 'open' | 'onOpenChange'>) {
   return (
     <Collapsible open={open} onOpenChange={onOpenChange} {...props}>
-      <Context
+      <TocProvider
         value={useMemo(
           () => ({
             open,
@@ -167,7 +169,7 @@ export function TocPopover({
         )}
       >
         {props.children}
-      </Context>
+      </TocProvider>
     </Collapsible>
   );
 }

packages/ui/src/layouts/docs/sidebar.tsx

@@ -359,7 +359,7 @@ export function SidebarFolderContent(props: CollapsibleContentProps) {
 
   return (
     <CollapsibleContent {...props} className={cn('relative', props.className)}>
-      <Context
+      <Context.Provider
         value={useMemo(
           () => ({
             ...ctx,
@@ -370,7 +370,7 @@ export function SidebarFolderContent(props: CollapsibleContentProps) {
       >
         <div className="absolute w-px inset-y-0 bg-fd-border start-3" />
         {props.children}
-      </Context>
+      </Context.Provider>
     </CollapsibleContent>
   );
 }