From 7028a342fe7ab097d3264cc4d42e028b37b71ced Mon Sep 17 00:00:00 2001
From: Siriwat K <siriwatkunaporn@gmail.com>
Date: Wed, 11 May 2022 15:36:25 +0700
Subject: [PATCH] [docs] Fix warning mode pass to React.Fragment (#32729)

---
 docs/src/modules/components/Demo.js         |  5 +++--
 docs/src/modules/components/MarkdownDocs.js | 11 ++++++-----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index 129af55d13f379..417f2ced9fe107 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -248,6 +248,7 @@ export default function Demo(props) {
 
   const [showAd, setShowAd] = React.useState(false);
 
+  const isJoy = asPathWithoutLang.startsWith('/joy-ui');
   const DemoRoot = asPathWithoutLang.startsWith('/joy-ui') ? DemoRootJoy : DemoRootMaterial;
   const Wrapper = asPathWithoutLang.startsWith('/joy-ui') ? BrandingProvider : React.Fragment;
 
@@ -261,7 +262,7 @@ export default function Demo(props) {
         onMouseEnter={handleDemoHover}
         onMouseLeave={handleDemoHover}
       >
-        <Wrapper mode={mode}>
+        <Wrapper {...(isJoy && { mode })}>
           <InitialFocus
             aria-label={t('initialFocusLabel')}
             action={initialFocusRef}
@@ -279,7 +280,7 @@ export default function Demo(props) {
       </DemoRoot>
       <AnchorLink id={`${demoName}.js`} />
       <AnchorLink id={`${demoName}.tsx`} />
-      <Wrapper mode={mode}>
+      <Wrapper {...(isJoy && { mode })}>
         {demoOptions.hideToolbar ? null : (
           <NoSsr defer fallback={<DemoToolbarFallback />}>
             <React.Suspense fallback={<DemoToolbarFallback />}>
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
index 867b7d404b7fe3..6ef3d540e517a3 100644
--- a/docs/src/modules/components/MarkdownDocs.js
+++ b/docs/src/modules/components/MarkdownDocs.js
@@ -41,8 +41,9 @@ function MarkdownDocs(props) {
 
   const { description, location, rendered, title, toc, headers } = docs[userLanguage] || docs.en;
 
-  const Provider = asPathWithoutLang.startsWith('/joy-ui') ? CssVarsProvider : React.Fragment;
-  const Wrapper = asPathWithoutLang.startsWith('/joy-ui') ? BrandingProvider : React.Fragment;
+  const isJoy = asPathWithoutLang.startsWith('/joy-ui');
+  const Provider = isJoy ? CssVarsProvider : React.Fragment;
+  const Wrapper = isJoy ? BrandingProvider : React.Fragment;
 
   return (
     <AppLayoutDocs
@@ -54,11 +55,11 @@ function MarkdownDocs(props) {
       toc={toc}
     >
       <Provider>
-        {asPathWithoutLang.startsWith('/joy-ui') && <JoyModeObserver mode={theme.palette.mode} />}
+        {isJoy && <JoyModeObserver mode={theme.palette.mode} />}
         {rendered.map((renderedMarkdownOrDemo, index) => {
           if (typeof renderedMarkdownOrDemo === 'string') {
             return (
-              <Wrapper key={index} mode={theme.palette.mode}>
+              <Wrapper key={index} {...(isJoy && { mode: theme.palette.mode })}>
                 <MarkdownElement renderedMarkdown={renderedMarkdownOrDemo} />
               </Wrapper>
             );
@@ -67,7 +68,7 @@ function MarkdownDocs(props) {
           if (renderedMarkdownOrDemo.component) {
             const Component = markdownComponents[renderedMarkdownOrDemo.component];
             return (
-              <Wrapper key={index} mode={theme.palette.mode}>
+              <Wrapper key={index} {...(isJoy && { mode: theme.palette.mode })}>
                 <Component headers={headers} options={renderedMarkdownOrDemo} />
               </Wrapper>
             );