@docusaurus/theme-classic 0.0.0-4772 → 0.0.0-4775

package/lib-next/theme/CodeBlock/CopyButton/index.js

@@ -35,7 +35,7 @@ export default function CopyButton({code}) {
               message: 'Copy code to clipboard',
               description: 'The ARIA label for copy code blocks button',
             })
-      } // @todo: check it again later
+      }
       title={translate({
         id: 'theme.CodeBlock.copy',
         message: 'Copy',

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

@@ -99,9 +99,7 @@ export default function CodeBlock({
               {codeBlockTitle}
             </div>
           )}
-          <div
-            className={clsx(styles.codeBlockContent, language)}
-            style={style}>
+          <div className={styles.codeBlockContent} style={style}>
             <pre
               /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
               tabIndex={0}

package/lib-next/theme/CodeBlock/styles.module.css

@@ -7,7 +7,6 @@
 
 .codeBlockContainer {
   margin-bottom: var(--ifm-leading);
-  border-radius: var(--ifm-global-radius);
   box-shadow: var(--ifm-global-shadow-lw);
 }
 
@@ -15,6 +14,7 @@
   position: relative;
   /* rtl:ignore */
   direction: ltr;
+  border-radius: var(--ifm-global-radius);
 }
 
 .codeBlockTitle {
@@ -29,7 +29,6 @@
 .codeBlock {
   margin: 0;
   padding: 0;
-  border-radius: var(--ifm-global-radius);
   background-color: inherit;
 }
 
@@ -40,7 +39,6 @@
 
 .codeBlockStandalone {
   padding: 0;
-  border-radius: var(--ifm-global-radius);
 }
 
 .codeBlockLines {

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

@@ -13,17 +13,12 @@ import isInternalUrl from '@docusaurus/isInternalUrl';
 import {translate} from '@docusaurus/Translate';
 
 function CardContainer({href, children}) {
-  const className = clsx(
-    'card margin-bottom--lg padding--lg',
-    styles.cardContainer,
-    href && styles.cardContainerLink,
-  );
-  return href ? (
-    <Link href={href} className={className}>
+  return (
+    <Link
+      href={href}
+      className={clsx('card padding--lg', styles.cardContainer)}>
       {children}
     </Link>
-  ) : (
-    <div className={className}>{children}</div>
   );
 }
 
@@ -33,17 +28,24 @@ function CardLayout({href, icon, title, description}) {
       <h2 className={clsx('text--truncate', styles.cardTitle)} title={title}>
         {icon} {title}
       </h2>
-      <div
-        className={clsx('text--truncate', styles.cardDescription)}
-        title={description}>
-        {description}
-      </div>
+      {description && (
+        <p
+          className={clsx('text--truncate', styles.cardDescription)}
+          title={description}>
+          {description}
+        </p>
+      )}
     </CardContainer>
   );
 }
 
 function CardCategory({item}) {
-  const href = findFirstCategoryLink(item);
+  const href = findFirstCategoryLink(item); // Unexpected: categories that don't have a link have been filtered upfront
+
+  if (!href) {
+    return null;
+  }
+
   return (
     <CardLayout
       href={href}

package/lib-next/theme/DocCard/styles.module.css

@@ -6,38 +6,29 @@
  */
 
 .cardContainer {
-  height: 8rem;
-  color: var(--ifm-color-emphasis-800);
   --ifm-link-color: var(--ifm-color-emphasis-800);
-  --ifm-link-hover-color: var(--ifm-color-emphasis-800);
+  --ifm-link-hover-color: var(--ifm-color-emphasis-700);
   --ifm-link-hover-decoration: none;
 
-  /* box-shadow: var(--ifm-global-shadow-lw); */
   box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
   border: 1px solid var(--ifm-color-emphasis-200);
-  transition: box-shadow var(--ifm-transition-fast) ease,
-    background-color var(--ifm-transition-fast) ease;
+  transition: all var(--ifm-transition-fast) ease;
+  transition-property: border, box-shadow;
 }
 
-.cardContainer.cardContainerLink:hover {
-  /* box-shadow: var(--ifm-global-shadow-md); */
-  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
+.cardContainer:hover {
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
 }
 
-[data-theme='dark'] .cardContainer.cardContainerLink:hover {
-  --ifm-card-background-color: #2d2d2d; /* original, non-hovered color is #242526 */
-}
-
-.cardContainer:not(.cardContainerLink) {
-  cursor: not-allowed;
+.cardContainer *:last-child {
+  margin-bottom: 0;
 }
 
 .cardTitle {
   font-size: 1.2rem;
-  min-height: 1.2rem;
 }
 
 .cardDescription {
   font-size: 0.8rem;
-  min-height: 0.8rem;
 }

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

@@ -6,12 +6,24 @@
  */
 import React from 'react';
 import DocCard from '@theme/DocCard';
+import {findFirstCategoryLink} from '@docusaurus/theme-common'; // Filter categories that don't have a link.
+
+function filterItems(items) {
+  return items.filter((item) => {
+    if (item.type === 'category') {
+      return !!findFirstCategoryLink(item);
+    }
+
+    return true;
+  });
+}
+
 export default function DocCardList({items}) {
   return (
     <div className="row">
-      {items.map((item, index) => (
-        <article key={index} className="col col--6">
-          <DocCard item={item} />
+      {filterItems(items).map((item, index) => (
+        <article key={index} className="col col--6 margin-bottom--lg">
+          <DocCard key={index} item={item} />
         </article>
       ))}
     </div>

package/lib-next/theme/NavbarItem/DropdownNavbarItem.js

@@ -64,6 +64,9 @@ function DropdownNavbarItemDesktop({items, position, className, ...props}) {
         'dropdown--show': showDropdown,
       })}>
       <NavbarNavLink
+        aria-haspopup="true"
+        aria-expanded={showDropdown}
+        role="button"
         href={props.to ? undefined : '#'}
         className={clsx('navbar__link', className)}
         {...props}
@@ -87,7 +90,12 @@ function DropdownNavbarItemDesktop({items, position, className, ...props}) {
                 const nextNavbarItem = dropdownRef.current.nextElementSibling;
 
                 if (nextNavbarItem) {
-                  nextNavbarItem.focus();
+                  const targetItem =
+                    nextNavbarItem instanceof HTMLAnchorElement
+                      ? nextNavbarItem // Next item is another dropdown; focus on the inner
+                      : // anchor element instead so there's outline
+                        nextNavbarItem.querySelector('a');
+                  targetItem.focus();
                 }
               }
             }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4772",
+  "version": "0.0.0-4775",
   "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-4772",
-    "@docusaurus/plugin-content-blog": "0.0.0-4772",
-    "@docusaurus/plugin-content-docs": "0.0.0-4772",
-    "@docusaurus/plugin-content-pages": "0.0.0-4772",
-    "@docusaurus/theme-common": "0.0.0-4772",
-    "@docusaurus/theme-translations": "0.0.0-4772",
-    "@docusaurus/utils": "0.0.0-4772",
-    "@docusaurus/utils-common": "0.0.0-4772",
-    "@docusaurus/utils-validation": "0.0.0-4772",
+    "@docusaurus/core": "0.0.0-4775",
+    "@docusaurus/plugin-content-blog": "0.0.0-4775",
+    "@docusaurus/plugin-content-docs": "0.0.0-4775",
+    "@docusaurus/plugin-content-pages": "0.0.0-4775",
+    "@docusaurus/theme-common": "0.0.0-4775",
+    "@docusaurus/theme-translations": "0.0.0-4775",
+    "@docusaurus/utils": "0.0.0-4775",
+    "@docusaurus/utils-common": "0.0.0-4775",
+    "@docusaurus/utils-validation": "0.0.0-4775",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
@@ -42,8 +42,8 @@
     "rtlcss": "^3.5.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-4772",
-    "@docusaurus/types": "0.0.0-4772",
+    "@docusaurus/module-type-aliases": "0.0.0-4775",
+    "@docusaurus/types": "0.0.0-4775",
     "@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": "50ef1fb8e19a46e43c122d625c8bff2110546260"
+  "gitHead": "c5116b4d028c288e4adca7a00a781655dae43131"
 }

package/src/theme/CodeBlock/CopyButton/index.tsx

@@ -42,7 +42,6 @@ export default function CopyButton({code}: Props): JSX.Element {
               description: 'The ARIA label for copy code blocks button',
             })
       }
-      // @todo: check it again later
       title={translate({
         id: 'theme.CodeBlock.copy',
         message: 'Copy',

package/src/theme/CodeBlock/index.tsx

@@ -111,9 +111,7 @@ export default function CodeBlock({
               {codeBlockTitle}
             </div>
           )}
-          <div
-            className={clsx(styles.codeBlockContent, language)}
-            style={style}>
+          <div className={styles.codeBlockContent} style={style}>
             <pre
               /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
               tabIndex={0}

package/src/theme/CodeBlock/styles.module.css

@@ -7,7 +7,6 @@
 
 .codeBlockContainer {
   margin-bottom: var(--ifm-leading);
-  border-radius: var(--ifm-global-radius);
   box-shadow: var(--ifm-global-shadow-lw);
 }
 
@@ -15,6 +14,7 @@
   position: relative;
   /* rtl:ignore */
   direction: ltr;
+  border-radius: var(--ifm-global-radius);
 }
 
 .codeBlockTitle {
@@ -29,7 +29,6 @@
 .codeBlock {
   margin: 0;
   padding: 0;
-  border-radius: var(--ifm-global-radius);
   background-color: inherit;
 }
 
@@ -40,7 +39,6 @@
 
 .codeBlockStandalone {
   padding: 0;
-  border-radius: var(--ifm-global-radius);
 }
 
 .codeBlockLines {

package/src/theme/DocCard/index.tsx

@@ -22,20 +22,15 @@ function CardContainer({
   href,
   children,
 }: {
-  href?: string;
+  href: string;
   children: ReactNode;
 }): JSX.Element {
-  const className = clsx(
-    'card margin-bottom--lg padding--lg',
-    styles.cardContainer,
-    href && styles.cardContainerLink,
-  );
-  return href ? (
-    <Link href={href} className={className}>
+  return (
+    <Link
+      href={href}
+      className={clsx('card padding--lg', styles.cardContainer)}>
       {children}
     </Link>
-  ) : (
-    <div className={className}>{children}</div>
   );
 }
 
@@ -45,7 +40,7 @@ function CardLayout({
   title,
   description,
 }: {
-  href?: string;
+  href: string;
   icon: ReactNode;
   title: string;
   description?: string;
@@ -55,17 +50,29 @@ function CardLayout({
       <h2 className={clsx('text--truncate', styles.cardTitle)} title={title}>
         {icon} {title}
       </h2>
-      <div
-        className={clsx('text--truncate', styles.cardDescription)}
-        title={description}>
-        {description}
-      </div>
+      {description && (
+        <p
+          className={clsx('text--truncate', styles.cardDescription)}
+          title={description}>
+          {description}
+        </p>
+      )}
     </CardContainer>
   );
 }
 
-function CardCategory({item}: {item: PropSidebarItemCategory}): JSX.Element {
+function CardCategory({
+  item,
+}: {
+  item: PropSidebarItemCategory;
+}): JSX.Element | null {
   const href = findFirstCategoryLink(item);
+
+  // Unexpected: categories that don't have a link have been filtered upfront
+  if (!href) {
+    return null;
+  }
+
   return (
     <CardLayout
       href={href}

package/src/theme/DocCard/styles.module.css

@@ -6,38 +6,29 @@
  */
 
 .cardContainer {
-  height: 8rem;
-  color: var(--ifm-color-emphasis-800);
   --ifm-link-color: var(--ifm-color-emphasis-800);
-  --ifm-link-hover-color: var(--ifm-color-emphasis-800);
+  --ifm-link-hover-color: var(--ifm-color-emphasis-700);
   --ifm-link-hover-decoration: none;
 
-  /* box-shadow: var(--ifm-global-shadow-lw); */
   box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
   border: 1px solid var(--ifm-color-emphasis-200);
-  transition: box-shadow var(--ifm-transition-fast) ease,
-    background-color var(--ifm-transition-fast) ease;
+  transition: all var(--ifm-transition-fast) ease;
+  transition-property: border, box-shadow;
 }
 
-.cardContainer.cardContainerLink:hover {
-  /* box-shadow: var(--ifm-global-shadow-md); */
-  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
+.cardContainer:hover {
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
 }
 
-[data-theme='dark'] .cardContainer.cardContainerLink:hover {
-  --ifm-card-background-color: #2d2d2d; /* original, non-hovered color is #242526 */
-}
-
-.cardContainer:not(.cardContainerLink) {
-  cursor: not-allowed;
+.cardContainer *:last-child {
+  margin-bottom: 0;
 }
 
 .cardTitle {
   font-size: 1.2rem;
-  min-height: 1.2rem;
 }
 
 .cardDescription {
   font-size: 0.8rem;
-  min-height: 0.8rem;
 }

package/src/theme/DocCardList/index.tsx

@@ -9,6 +9,17 @@ import React from 'react';
 
 import DocCard from '@theme/DocCard';
 import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
+import {findFirstCategoryLink} from '@docusaurus/theme-common';
+
+// Filter categories that don't have a link.
+function filterItems(items: PropSidebarItem[]): PropSidebarItem[] {
+  return items.filter((item) => {
+    if (item.type === 'category') {
+      return !!findFirstCategoryLink(item);
+    }
+    return true;
+  });
+}
 
 export default function DocCardList({
   items,
@@ -17,9 +28,9 @@ export default function DocCardList({
 }): JSX.Element {
   return (
     <div className="row">
-      {items.map((item, index) => (
-        <article key={index} className="col col--6">
-          <DocCard item={item} />
+      {filterItems(items).map((item, index) => (
+        <article key={index} className="col col--6 margin-bottom--lg">
+          <DocCard key={index} item={item} />
         </article>
       ))}
     </div>

package/src/theme/NavbarItem/DropdownNavbarItem.tsx

@@ -85,6 +85,9 @@ function DropdownNavbarItemDesktop({
         'dropdown--show': showDropdown,
       })}>
       <NavbarNavLink
+        aria-haspopup="true"
+        aria-expanded={showDropdown}
+        role="button"
         href={props.to ? undefined : '#'}
         className={clsx('navbar__link', className)}
         {...props}
@@ -107,7 +110,13 @@ function DropdownNavbarItemDesktop({
                 setShowDropdown(false);
                 const nextNavbarItem = dropdownRef.current!.nextElementSibling;
                 if (nextNavbarItem) {
-                  (nextNavbarItem as HTMLElement).focus();
+                  const targetItem =
+                    nextNavbarItem instanceof HTMLAnchorElement
+                      ? nextNavbarItem
+                      : // Next item is another dropdown; focus on the inner
+                        // anchor element instead so there's outline
+                        nextNavbarItem.querySelector('a');
+                  (targetItem as HTMLElement).focus();
                 }
               }
             }}