@docusaurus/theme-classic 0.0.0-4700 → 0.0.0-4705

package/lib-next/theme/BackToTopButton/index.js

@@ -120,9 +120,7 @@ export default function BackToTopButton() {
         'clean-btn',
         ThemeClassNames.common.backToTopButton,
         styles.backToTopButton,
-        {
-          [styles.backToTopButtonShow]: show,
-        },
+        show && styles.backToTopButtonShow,
       )}
       type="button"
       onClick={() => smoothScrollTop()}

package/lib-next/theme/BlogPostItem/index.js

@@ -112,9 +112,10 @@ export default function BlogPostItem(props) {
 
       {(tagsExists || truncated) && (
         <footer
-          className={clsx('row docusaurus-mt-lg', {
-            [styles.blogPostDetailsFull]: isBlogPostPage,
-          })}>
+          className={clsx(
+            'row docusaurus-mt-lg',
+            isBlogPostPage && styles.blogPostDetailsFull,
+          )}>
           {tagsExists && (
             <div
               className={clsx('col', {

package/lib-next/theme/ColorModeToggle/index.js

@@ -22,11 +22,13 @@ function ColorModeToggle({className, checked: defaultChecked, onChange}) {
   }, [defaultChecked]);
   return (
     <div
-      className={clsx(styles.toggle, className, {
-        [styles.toggleChecked]: checked,
-        [styles.toggleFocused]: focused,
-        [styles.toggleDisabled]: !isBrowser,
-      })}>
+      className={clsx(
+        styles.toggle,
+        className,
+        checked && styles.toggleChecked,
+        focused && styles.toggleFocused,
+        !isBrowser && styles.toggleDisabled,
+      )}>
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
       <div
         className={styles.toggleButton}

package/lib-next/theme/DocItem/index.js

@@ -52,10 +52,7 @@ export default function DocItem(props) {
       />
 
       <div className="row">
-        <div
-          className={clsx('col', {
-            [styles.docItemCol]: !hideTableOfContents,
-          })}>
+        <div className={clsx('col', !hideTableOfContents && styles.docItemCol)}>
           <DocVersionBanner />
           <div className={styles.docItemContainer}>
             <article>

package/lib-next/theme/DocPage/index.js

@@ -57,9 +57,7 @@ function DocPageContent({
             className={clsx(
               ThemeClassNames.docs.docSidebarContainer,
               styles.docSidebarContainer,
-              {
-                [styles.docSidebarContainerHidden]: hiddenSidebarContainer,
-              },
+              hiddenSidebarContainer && styles.docSidebarContainerHidden,
             )}
             onTransitionEnd={(e) => {
               if (
@@ -109,17 +107,16 @@ function DocPageContent({
           </aside>
         )}
         <main
-          className={clsx(styles.docMainContainer, {
-            [styles.docMainContainerEnhanced]:
-              hiddenSidebarContainer || !sidebar,
-          })}>
+          className={clsx(
+            styles.docMainContainer,
+            (hiddenSidebarContainer || !sidebar) &&
+              styles.docMainContainerEnhanced,
+          )}>
           <div
             className={clsx(
               'container padding-top--md padding-bottom--lg',
               styles.docItemWrapper,
-              {
-                [styles.docItemWrapperEnhanced]: hiddenSidebarContainer,
-              },
+              hiddenSidebarContainer && styles.docItemWrapperEnhanced,
             )}>
             {children}
           </div>

package/lib-next/theme/Heading/index.js

@@ -22,10 +22,12 @@ function AnchorHeading({as: As, id, ...props}) {
   return (
     <As
       {...props}
-      className={clsx('anchor', {
-        [styles.anchorWithHideOnScrollNavbar]: hideOnScroll,
-        [styles.anchorWithStickyNavbar]: !hideOnScroll,
-      })}
+      className={clsx(
+        'anchor',
+        hideOnScroll
+          ? styles.anchorWithHideOnScrollNavbar
+          : styles.anchorWithStickyNavbar,
+      )}
       id={id}>
       {props.children}
       <a

package/lib-next/theme/Navbar/index.js

@@ -220,13 +220,19 @@ export default function Navbar() {
   return (
     <nav
       ref={navbarRef}
-      className={clsx('navbar', 'navbar--fixed-top', {
-        'navbar--dark': style === 'dark',
-        'navbar--primary': style === 'primary',
-        'navbar-sidebar--show': mobileSidebar.shown,
-        [styles.navbarHideable]: hideOnScroll,
-        [styles.navbarHidden]: hideOnScroll && !isNavbarVisible,
-      })}>
+      className={clsx(
+        'navbar',
+        'navbar--fixed-top',
+        hideOnScroll && [
+          styles.navbarHideable,
+          !isNavbarVisible && styles.navbarHidden,
+        ],
+        {
+          'navbar--dark': style === 'dark',
+          'navbar--primary': style === 'primary',
+          'navbar-sidebar--show': mobileSidebar.shown,
+        },
+      )}>
       <div className="navbar__inner">
         <div className="navbar__items">
           {(items?.length > 0 || activeDocPlugin) && (

package/lib-next/theme/TOCCollapsible/index.js

@@ -23,9 +23,7 @@ export default function TOCCollapsible({
     <div
       className={clsx(
         styles.tocCollapsible,
-        {
-          [styles.tocCollapsibleExpanded]: !collapsed,
-        },
+        !collapsed && styles.tocCollapsibleExpanded,
         className,
       )}>
       <button

package/lib-next/theme/Tag/index.js

@@ -13,10 +13,10 @@ export default function Tag(props) {
   return (
     <Link
       href={permalink}
-      className={clsx(styles.tag, {
-        [styles.tagRegular]: !count,
-        [styles.tagWithCount]: count,
-      })}>
+      className={clsx(
+        styles.tag,
+        count ? styles.tagWithCount : styles.tagRegular,
+      )}>
       {name}
       {count && <span>{count}</span>}
     </Link>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4700",
+  "version": "0.0.0-4705",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -21,15 +21,15 @@
     "format:lib-next": "prettier --config ../../.prettierrc --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-4700",
-    "@docusaurus/plugin-content-blog": "0.0.0-4700",
-    "@docusaurus/plugin-content-docs": "0.0.0-4700",
-    "@docusaurus/plugin-content-pages": "0.0.0-4700",
-    "@docusaurus/theme-common": "0.0.0-4700",
-    "@docusaurus/theme-translations": "0.0.0-4700",
-    "@docusaurus/utils": "0.0.0-4700",
-    "@docusaurus/utils-common": "0.0.0-4700",
-    "@docusaurus/utils-validation": "0.0.0-4700",
+    "@docusaurus/core": "0.0.0-4705",
+    "@docusaurus/plugin-content-blog": "0.0.0-4705",
+    "@docusaurus/plugin-content-docs": "0.0.0-4705",
+    "@docusaurus/plugin-content-pages": "0.0.0-4705",
+    "@docusaurus/theme-common": "0.0.0-4705",
+    "@docusaurus/theme-translations": "0.0.0-4705",
+    "@docusaurus/utils": "0.0.0-4705",
+    "@docusaurus/utils-common": "0.0.0-4705",
+    "@docusaurus/utils-validation": "0.0.0-4705",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
@@ -42,8 +42,8 @@
     "rtlcss": "^3.3.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-4700",
-    "@docusaurus/types": "0.0.0-4700",
+    "@docusaurus/module-type-aliases": "0.0.0-4705",
+    "@docusaurus/types": "0.0.0-4705",
     "@types/mdx-js__react": "^1.5.5",
     "@types/prismjs": "^1.26.0",
     "@types/rtlcss": "^3.1.2",
@@ -59,5 +59,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "746ec30e7642345d8238c307a28c877cd9499c52"
+  "gitHead": "6bf7b983d9b8de15c1dce1f1bdaa27dc0158c156"
 }

package/src/theme/BackToTopButton/index.tsx

@@ -132,9 +132,7 @@ export default function BackToTopButton(): JSX.Element {
         'clean-btn',
         ThemeClassNames.common.backToTopButton,
         styles.backToTopButton,
-        {
-          [styles.backToTopButtonShow!]: show,
-        },
+        show && styles.backToTopButtonShow,
       )}
       type="button"
       onClick={() => smoothScrollTop()}

package/src/theme/BlogPostItem/index.tsx

@@ -112,9 +112,10 @@ export default function BlogPostItem(props: Props): JSX.Element {
 
       {(tagsExists || truncated) && (
         <footer
-          className={clsx('row docusaurus-mt-lg', {
-            [styles.blogPostDetailsFull!]: isBlogPostPage,
-          })}>
+          className={clsx(
+            'row docusaurus-mt-lg',
+            isBlogPostPage && styles.blogPostDetailsFull,
+          )}>
           {tagsExists && (
             <div className={clsx('col', {'col--9': truncatedPost})}>
               <TagsListInline tags={tags} />

package/src/theme/ColorModeToggle/index.tsx

@@ -31,11 +31,13 @@ function ColorModeToggle({
 
   return (
     <div
-      className={clsx(styles.toggle, className, {
-        [styles.toggleChecked!]: checked,
-        [styles.toggleFocused!]: focused,
-        [styles.toggleDisabled!]: !isBrowser,
-      })}>
+      className={clsx(
+        styles.toggle,
+        className,
+        checked && styles.toggleChecked,
+        focused && styles.toggleFocused,
+        !isBrowser && styles.toggleDisabled,
+      )}>
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
       <div
         className={styles.toggleButton}

package/src/theme/DocItem/index.tsx

@@ -53,10 +53,7 @@ export default function DocItem(props: Props): JSX.Element {
       <Seo {...{title, description, keywords, image}} />
 
       <div className="row">
-        <div
-          className={clsx('col', {
-            [styles.docItemCol!]: !hideTableOfContents,
-          })}>
+        <div className={clsx('col', !hideTableOfContents && styles.docItemCol)}>
           <DocVersionBanner />
           <div className={styles.docItemContainer}>
             <article>

package/src/theme/DocPage/index.tsx

@@ -70,9 +70,7 @@ function DocPageContent({
             className={clsx(
               ThemeClassNames.docs.docSidebarContainer,
               styles.docSidebarContainer,
-              {
-                [styles.docSidebarContainerHidden!]: hiddenSidebarContainer,
-              },
+              hiddenSidebarContainer && styles.docSidebarContainerHidden,
             )}
             onTransitionEnd={(e) => {
               if (
@@ -122,17 +120,16 @@ function DocPageContent({
           </aside>
         )}
         <main
-          className={clsx(styles.docMainContainer, {
-            [styles.docMainContainerEnhanced!]:
-              hiddenSidebarContainer || !sidebar,
-          })}>
+          className={clsx(
+            styles.docMainContainer,
+            (hiddenSidebarContainer || !sidebar) &&
+              styles.docMainContainerEnhanced,
+          )}>
           <div
             className={clsx(
               'container padding-top--md padding-bottom--lg',
               styles.docItemWrapper,
-              {
-                [styles.docItemWrapperEnhanced!]: hiddenSidebarContainer,
-              },
+              hiddenSidebarContainer && styles.docItemWrapperEnhanced,
             )}>
             {children}
           </div>

package/src/theme/Heading/index.tsx

@@ -25,10 +25,12 @@ function AnchorHeading({as: As, id, ...props}: Props) {
   return (
     <As
       {...props}
-      className={clsx('anchor', {
-        [styles.anchorWithHideOnScrollNavbar!]: hideOnScroll,
-        [styles.anchorWithStickyNavbar!]: !hideOnScroll,
-      })}
+      className={clsx(
+        'anchor',
+        hideOnScroll
+          ? styles.anchorWithHideOnScrollNavbar
+          : styles.anchorWithStickyNavbar,
+      )}
       id={id}>
       {props.children}
       <a

package/src/theme/Navbar/index.tsx

@@ -237,13 +237,19 @@ export default function Navbar(): JSX.Element {
   return (
     <nav
       ref={navbarRef}
-      className={clsx('navbar', 'navbar--fixed-top', {
-        'navbar--dark': style === 'dark',
-        'navbar--primary': style === 'primary',
-        'navbar-sidebar--show': mobileSidebar.shown,
-        [styles.navbarHideable!]: hideOnScroll,
-        [styles.navbarHidden!]: hideOnScroll && !isNavbarVisible,
-      })}>
+      className={clsx(
+        'navbar',
+        'navbar--fixed-top',
+        hideOnScroll && [
+          styles.navbarHideable,
+          !isNavbarVisible && styles.navbarHidden,
+        ],
+        {
+          'navbar--dark': style === 'dark',
+          'navbar--primary': style === 'primary',
+          'navbar-sidebar--show': mobileSidebar.shown,
+        },
+      )}>
       <div className="navbar__inner">
         <div className="navbar__items">
           {(items?.length > 0 || activeDocPlugin) && (

package/src/theme/TOCCollapsible/index.tsx

@@ -27,9 +27,7 @@ export default function TOCCollapsible({
     <div
       className={clsx(
         styles.tocCollapsible,
-        {
-          [styles.tocCollapsibleExpanded!]: !collapsed,
-        },
+        !collapsed && styles.tocCollapsibleExpanded,
         className,
       )}>
       <button

package/src/theme/Tag/index.tsx

@@ -18,10 +18,10 @@ export default function Tag(props: Props): JSX.Element {
   return (
     <Link
       href={permalink}
-      className={clsx(styles.tag, {
-        [styles.tagRegular!]: !count,
-        [styles.tagWithCount!]: count,
-      })}>
+      className={clsx(
+        styles.tag,
+        count ? styles.tagWithCount : styles.tagRegular,
+      )}>
       {name}
       {count && <span>{count}</span>}
     </Link>