@docusaurus/theme-classic 2.0.0-beta.12faed89d → 2.0.0-beta.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (349) hide show
  1. package/README.md +1 -1
  2. package/lib/admonitions.css +35 -0
  3. package/lib/deps.d.ts +13 -0
  4. package/lib/index.js +16 -15
  5. package/lib/prism-include-languages.js +9 -5
  6. package/{lib-next/types.d.ts → lib/theme-classic.d.ts} +338 -156
  7. package/lib/translations.js +16 -7
  8. package/lib/types.d.ts +0 -629
  9. package/lib/validateThemeConfig.js +232 -248
  10. package/lib-next/theme/Admonition/index.js +101 -0
  11. package/lib-next/theme/AnnouncementBar/index.js +7 -12
  12. package/lib-next/theme/AnnouncementBar/styles.module.css +23 -32
  13. package/lib-next/theme/BackToTopButton/index.js +131 -0
  14. package/lib-next/theme/BackToTopButton/styles.module.css +42 -0
  15. package/lib-next/theme/BlogArchivePage/index.js +80 -0
  16. package/lib-next/theme/BlogLayout/index.js +40 -0
  17. package/lib-next/theme/BlogListPage/index.js +17 -25
  18. package/lib-next/theme/BlogPostAuthor/index.js +46 -0
  19. package/{lib/theme/MDXPage → lib-next/theme/BlogPostAuthor}/styles.module.css +4 -2
  20. package/lib-next/theme/BlogPostAuthors/index.js +34 -0
  21. package/{lib/theme/IconExternalLink → lib-next/theme/BlogPostAuthors}/styles.module.css +3 -4
  22. package/lib-next/theme/BlogPostItem/index.js +79 -86
  23. package/lib-next/theme/BlogPostPage/index.js +70 -35
  24. package/lib-next/theme/BlogSidebar/index.js +11 -13
  25. package/lib-next/theme/BlogSidebar/styles.module.css +2 -2
  26. package/lib-next/theme/BlogTagsListPage/index.js +14 -55
  27. package/lib-next/theme/BlogTagsPostsPage/index.js +29 -39
  28. package/lib-next/theme/CodeBlock/index.js +23 -149
  29. package/lib-next/theme/CodeBlock/styles.module.css +12 -9
  30. package/lib-next/theme/Details/index.js +20 -0
  31. package/lib-next/theme/Details/styles.module.css +13 -0
  32. package/lib-next/theme/DocCard/index.js +80 -0
  33. package/lib-next/theme/DocCard/styles.module.css +43 -0
  34. package/lib-next/theme/DocCardList/index.js +19 -0
  35. package/lib-next/theme/DocCategoryGeneratedIndexPage/index.js +49 -0
  36. package/lib-next/theme/DocCategoryGeneratedIndexPage/styles.module.css +18 -0
  37. package/lib-next/theme/DocItem/index.js +30 -59
  38. package/lib-next/theme/DocItem/styles.module.css +2 -11
  39. package/lib-next/theme/DocItemFooter/index.js +79 -0
  40. package/{lib/theme/DocSidebarItem → lib-next/theme/DocItemFooter}/styles.module.css +8 -5
  41. package/lib-next/theme/DocPage/index.js +46 -23
  42. package/lib-next/theme/DocPaginator/index.js +5 -33
  43. package/lib-next/theme/DocPaginatorNavLink/index.js +36 -0
  44. package/lib-next/theme/DocSidebar/index.js +37 -43
  45. package/lib-next/theme/DocSidebarItem/index.js +115 -65
  46. package/lib-next/theme/DocSidebarItem/styles.module.css +4 -0
  47. package/lib-next/theme/DocTagDocListPage/index.js +89 -0
  48. package/lib-next/theme/DocTagsListPage/index.js +38 -0
  49. package/lib-next/theme/DocVersionBadge/index.js +27 -0
  50. package/lib-next/theme/DocVersionBanner/index.js +28 -14
  51. package/lib-next/theme/EditThisPage/index.js +6 -1
  52. package/lib-next/theme/ErrorPageContent.js +35 -0
  53. package/lib-next/theme/Footer/index.js +90 -39
  54. package/lib-next/theme/Heading/index.js +24 -29
  55. package/lib-next/theme/Heading/styles.css +5 -6
  56. package/lib-next/theme/Heading/styles.module.css +9 -5
  57. package/lib-next/theme/IconArrow/index.js +2 -2
  58. package/lib-next/theme/IconClose/index.js +23 -0
  59. package/lib-next/theme/IconEdit/index.js +2 -2
  60. package/lib-next/theme/IconExternalLink/index.js +2 -2
  61. package/lib-next/theme/IconLanguage/index.js +2 -2
  62. package/lib-next/theme/IconMenu/index.js +2 -2
  63. package/lib-next/theme/LastUpdated/index.js +3 -2
  64. package/lib-next/theme/Layout/index.js +3 -1
  65. package/lib-next/theme/LayoutHead/index.js +18 -23
  66. package/lib-next/theme/LayoutProviders/index.js +8 -5
  67. package/lib-next/theme/Logo/index.js +25 -21
  68. package/lib-next/theme/MDXComponents/index.js +34 -7
  69. package/{lib/theme/hooks → lib-next/theme/MDXComponents}/styles.css +3 -2
  70. package/lib-next/theme/MDXPage/index.js +10 -2
  71. package/lib-next/theme/Navbar/index.js +62 -34
  72. package/lib-next/theme/Navbar/styles.module.css +3 -39
  73. package/lib-next/theme/NavbarItem/DefaultNavbarItem.js +45 -143
  74. package/lib-next/theme/NavbarItem/DocNavbarItem.js +7 -7
  75. package/lib-next/theme/NavbarItem/DocsVersionDropdownNavbarItem.js +31 -19
  76. package/lib-next/theme/NavbarItem/DropdownNavbarItem.js +158 -0
  77. package/lib-next/theme/NavbarItem/{LocaleDropdownNavbarItem.js → LocaleDropdownNavbarItem/index.js} +4 -12
  78. package/lib-next/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css +11 -0
  79. package/lib-next/theme/NavbarItem/index.js +25 -12
  80. package/lib-next/theme/{SearchMetadatas → SearchMetadata}/index.js +1 -1
  81. package/lib-next/theme/Seo/index.js +11 -7
  82. package/lib-next/theme/TOC/index.js +12 -36
  83. package/lib-next/theme/TOC/styles.module.css +1 -1
  84. package/lib-next/theme/TOCCollapsible/index.js +13 -4
  85. package/lib-next/theme/TOCCollapsible/styles.module.css +1 -0
  86. package/lib-next/theme/TOCInline/index.js +10 -28
  87. package/lib-next/theme/TOCItems/index.js +85 -0
  88. package/lib-next/theme/Tabs/__tests__/index.test.js +142 -0
  89. package/lib-next/theme/Tabs/index.js +103 -48
  90. package/lib-next/theme/Tabs/styles.module.css +0 -13
  91. package/lib-next/theme/Tag/index.js +27 -0
  92. package/lib-next/theme/Tag/styles.module.css +70 -0
  93. package/lib-next/theme/TagsListByLetter/index.js +42 -0
  94. package/lib-next/theme/TagsListByLetter/styles.module.css +11 -0
  95. package/lib-next/theme/TagsListInline/index.js +31 -0
  96. package/lib-next/theme/TagsListInline/styles.module.css +15 -0
  97. package/lib-next/theme/ThemeProvider/index.js +10 -7
  98. package/lib-next/theme/ThemedImage/index.js +5 -5
  99. package/lib-next/theme/Toggle/index.js +34 -37
  100. package/lib-next/theme/Toggle/styles.module.css +91 -3
  101. package/lib-next/theme/UserPreferencesProvider/index.js +9 -6
  102. package/lib-next/theme/hooks/useHideableNavbar.js +31 -44
  103. package/lib-next/theme/hooks/useTheme.js +4 -5
  104. package/lib-next/theme/hooks/useWindowSize.js +2 -6
  105. package/lib-next/theme/prism-include-languages.js +2 -1
  106. package/package.json +26 -24
  107. package/src/admonitions.css +35 -0
  108. package/src/deps.d.ts +13 -0
  109. package/src/index.ts +23 -20
  110. package/{lib-next/prism-include-languages.js → src/prism-include-languages.ts} +0 -0
  111. package/src/theme/Admonition/index.tsx +106 -0
  112. package/src/theme/AnnouncementBar/index.tsx +8 -12
  113. package/src/theme/AnnouncementBar/styles.module.css +23 -32
  114. package/src/theme/BackToTopButton/index.tsx +142 -0
  115. package/src/theme/BackToTopButton/styles.module.css +42 -0
  116. package/src/theme/BlogArchivePage/index.tsx +91 -0
  117. package/src/theme/BlogLayout/index.tsx +44 -0
  118. package/src/theme/BlogListPage/index.tsx +18 -25
  119. package/src/theme/BlogPostAuthor/index.tsx +49 -0
  120. package/{lib/theme/IconEdit → src/theme/BlogPostAuthor}/styles.module.css +4 -3
  121. package/src/theme/BlogPostAuthors/index.tsx +39 -0
  122. package/src/theme/BlogPostAuthors/styles.module.css +11 -0
  123. package/src/theme/BlogPostItem/index.tsx +70 -80
  124. package/src/theme/BlogPostPage/index.tsx +72 -35
  125. package/src/theme/BlogSidebar/index.tsx +11 -13
  126. package/src/theme/BlogSidebar/styles.module.css +2 -2
  127. package/src/theme/BlogTagsListPage/index.tsx +14 -57
  128. package/src/theme/BlogTagsPostsPage/index.tsx +29 -39
  129. package/src/theme/CodeBlock/index.tsx +27 -151
  130. package/src/theme/CodeBlock/styles.module.css +12 -9
  131. package/src/theme/Details/index.tsx +24 -0
  132. package/src/theme/Details/styles.module.css +13 -0
  133. package/src/theme/DocCard/index.tsx +100 -0
  134. package/src/theme/DocCard/styles.module.css +43 -0
  135. package/src/theme/DocCardList/index.tsx +27 -0
  136. package/src/theme/DocCategoryGeneratedIndexPage/index.tsx +53 -0
  137. package/src/theme/DocCategoryGeneratedIndexPage/styles.module.css +18 -0
  138. package/src/theme/DocItem/index.tsx +30 -60
  139. package/src/theme/DocItem/styles.module.css +2 -11
  140. package/src/theme/DocItemFooter/index.tsx +91 -0
  141. package/{lib/theme/BlogPostItem → src/theme/DocItemFooter}/styles.module.css +8 -8
  142. package/src/theme/DocPage/index.tsx +44 -22
  143. package/src/theme/DocPaginator/index.tsx +5 -33
  144. package/src/theme/DocPaginatorNavLink/index.tsx +38 -0
  145. package/src/theme/DocSidebar/index.tsx +38 -39
  146. package/src/theme/DocSidebarItem/index.tsx +108 -49
  147. package/src/theme/DocSidebarItem/styles.module.css +4 -0
  148. package/src/theme/DocTagDocListPage/index.tsx +89 -0
  149. package/src/theme/DocTagsListPage/index.tsx +41 -0
  150. package/src/theme/DocVersionBadge/index.tsx +30 -0
  151. package/src/theme/DocVersionBanner/index.tsx +48 -21
  152. package/src/theme/EditThisPage/index.tsx +6 -1
  153. package/src/theme/ErrorPageContent.tsx +41 -0
  154. package/src/theme/Footer/index.tsx +103 -42
  155. package/src/theme/Heading/index.tsx +24 -31
  156. package/src/theme/Heading/styles.css +5 -6
  157. package/src/theme/Heading/styles.module.css +9 -5
  158. package/src/theme/IconArrow/index.tsx +2 -2
  159. package/src/theme/IconClose/index.tsx +26 -0
  160. package/src/theme/IconEdit/index.tsx +2 -2
  161. package/src/theme/IconExternalLink/index.tsx +2 -5
  162. package/src/theme/IconLanguage/index.tsx +2 -6
  163. package/src/theme/IconMenu/index.tsx +3 -3
  164. package/src/theme/LastUpdated/index.tsx +3 -2
  165. package/src/theme/Layout/index.tsx +3 -1
  166. package/src/theme/LayoutHead/index.tsx +18 -17
  167. package/src/theme/LayoutProviders/index.tsx +8 -5
  168. package/src/theme/Logo/index.tsx +21 -17
  169. package/src/theme/MDXComponents/index.tsx +39 -5
  170. package/src/theme/MDXComponents/styles.css +11 -0
  171. package/src/theme/MDXPage/index.tsx +10 -2
  172. package/src/theme/Navbar/index.tsx +62 -35
  173. package/src/theme/Navbar/styles.module.css +3 -39
  174. package/src/theme/NavbarItem/DefaultNavbarItem.tsx +42 -149
  175. package/src/theme/NavbarItem/DocNavbarItem.tsx +12 -16
  176. package/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx +33 -21
  177. package/src/theme/NavbarItem/DocsVersionNavbarItem.tsx +7 -3
  178. package/src/theme/NavbarItem/DropdownNavbarItem.tsx +180 -0
  179. package/src/theme/NavbarItem/{LocaleDropdownNavbarItem.tsx → LocaleDropdownNavbarItem/index.tsx} +8 -9
  180. package/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css +11 -0
  181. package/src/theme/NavbarItem/index.tsx +41 -16
  182. package/src/theme/{SearchMetadatas → SearchMetadata}/index.tsx +2 -2
  183. package/src/theme/Seo/index.tsx +7 -4
  184. package/src/theme/TOC/index.tsx +13 -35
  185. package/src/theme/TOC/styles.module.css +1 -1
  186. package/src/theme/TOCCollapsible/index.tsx +13 -4
  187. package/src/theme/TOCCollapsible/styles.module.css +1 -0
  188. package/src/theme/TOCInline/index.tsx +13 -32
  189. package/src/theme/TOCItems/index.tsx +96 -0
  190. package/src/theme/Tabs/index.tsx +110 -54
  191. package/src/theme/Tabs/styles.module.css +0 -13
  192. package/src/theme/Tag/index.tsx +31 -0
  193. package/src/theme/Tag/styles.module.css +70 -0
  194. package/src/theme/TagsListByLetter/index.tsx +45 -0
  195. package/src/theme/TagsListByLetter/styles.module.css +11 -0
  196. package/src/theme/TagsListInline/index.tsx +35 -0
  197. package/src/theme/TagsListInline/styles.module.css +15 -0
  198. package/src/theme/ThemeProvider/index.tsx +6 -2
  199. package/src/theme/ThemedImage/index.tsx +5 -5
  200. package/src/theme/Toggle/index.tsx +36 -43
  201. package/src/theme/Toggle/styles.module.css +91 -3
  202. package/src/theme/UserPreferencesProvider/index.tsx +9 -6
  203. package/src/theme/hooks/useHideableNavbar.ts +32 -45
  204. package/src/theme/hooks/useTabGroupChoice.ts +2 -2
  205. package/src/theme/hooks/useTheme.ts +4 -5
  206. package/src/theme/hooks/useWindowSize.ts +2 -7
  207. package/src/theme/prism-include-languages.ts +3 -2
  208. package/src/theme-classic.d.ts +822 -0
  209. package/src/translations.ts +41 -23
  210. package/src/types.d.ts +0 -629
  211. package/src/{validateThemeConfig.js → validateThemeConfig.ts} +160 -100
  212. package/babel.config.js +0 -35
  213. package/codeTranslations/README.md +0 -20
  214. package/codeTranslations/ar.json +0 -56
  215. package/codeTranslations/base.json +0 -110
  216. package/codeTranslations/bn.json +0 -56
  217. package/codeTranslations/da.json +0 -56
  218. package/codeTranslations/de.json +0 -56
  219. package/codeTranslations/es.json +0 -56
  220. package/codeTranslations/fa.json +0 -56
  221. package/codeTranslations/fil.json +0 -56
  222. package/codeTranslations/fr.json +0 -56
  223. package/codeTranslations/he.json +0 -56
  224. package/codeTranslations/hi.json +0 -56
  225. package/codeTranslations/ja.json +0 -56
  226. package/codeTranslations/ko.json +0 -56
  227. package/codeTranslations/pl.json +0 -56
  228. package/codeTranslations/pt-BR.json +0 -56
  229. package/codeTranslations/pt-PT.json +0 -56
  230. package/codeTranslations/ru.json +0 -56
  231. package/codeTranslations/tr.json +0 -56
  232. package/codeTranslations/vi.json +0 -56
  233. package/codeTranslations/zh-Hans.json +0 -56
  234. package/codeTranslations/zh-Hant.json +0 -56
  235. package/lib/__tests__/__snapshots__/translations.test.ts.snap +0 -116
  236. package/lib/__tests__/translations.test.js +0 -112
  237. package/lib/__tests__/validateThemeConfig.test.js +0 -333
  238. package/lib/theme/AnnouncementBar/index.js +0 -72
  239. package/lib/theme/AnnouncementBar/styles.module.css +0 -72
  240. package/lib/theme/BlogListPage/index.js +0 -71
  241. package/lib/theme/BlogListPaginator/index.js +0 -63
  242. package/lib/theme/BlogPostItem/index.js +0 -161
  243. package/lib/theme/BlogPostPage/index.js +0 -69
  244. package/lib/theme/BlogPostPaginator/index.js +0 -64
  245. package/lib/theme/BlogSidebar/index.js +0 -51
  246. package/lib/theme/BlogSidebar/styles.module.css +0 -44
  247. package/lib/theme/BlogTagsListPage/index.js +0 -76
  248. package/lib/theme/BlogTagsPostsPage/index.js +0 -100
  249. package/lib/theme/CodeBlock/index.js +0 -253
  250. package/lib/theme/CodeBlock/styles.module.css +0 -68
  251. package/lib/theme/DocItem/index.js +0 -138
  252. package/lib/theme/DocItem/styles.module.css +0 -31
  253. package/lib/theme/DocPage/index.js +0 -139
  254. package/lib/theme/DocPage/styles.module.css +0 -85
  255. package/lib/theme/DocPaginator/index.js +0 -63
  256. package/lib/theme/DocSidebar/index.js +0 -133
  257. package/lib/theme/DocSidebar/styles.module.css +0 -106
  258. package/lib/theme/DocSidebarItem/index.js +0 -175
  259. package/lib/theme/DocVersionBanner/index.js +0 -128
  260. package/lib/theme/EditThisPage/index.js +0 -31
  261. package/lib/theme/Footer/index.js +0 -115
  262. package/lib/theme/Footer/styles.module.css +0 -15
  263. package/lib/theme/Heading/index.js +0 -76
  264. package/lib/theme/Heading/styles.css +0 -23
  265. package/lib/theme/Heading/styles.module.css +0 -15
  266. package/lib/theme/IconArrow/index.js +0 -28
  267. package/lib/theme/IconEdit/index.js +0 -34
  268. package/lib/theme/IconExternalLink/index.js +0 -30
  269. package/lib/theme/IconLanguage/index.js +0 -29
  270. package/lib/theme/IconMenu/index.js +0 -30
  271. package/lib/theme/LastUpdated/index.js +0 -61
  272. package/lib/theme/Layout/index.js +0 -64
  273. package/lib/theme/Layout/styles.css +0 -27
  274. package/lib/theme/LayoutHead/index.js +0 -144
  275. package/lib/theme/LayoutProviders/index.js +0 -38
  276. package/lib/theme/Logo/index.js +0 -60
  277. package/lib/theme/MDXComponents/index.js +0 -65
  278. package/lib/theme/MDXPage/index.js +0 -66
  279. package/lib/theme/Navbar/index.js +0 -248
  280. package/lib/theme/Navbar/styles.module.css +0 -63
  281. package/lib/theme/NavbarItem/DefaultNavbarItem.js +0 -210
  282. package/lib/theme/NavbarItem/DocNavbarItem.js +0 -63
  283. package/lib/theme/NavbarItem/DocsVersionDropdownNavbarItem.js +0 -76
  284. package/lib/theme/NavbarItem/DocsVersionNavbarItem.js +0 -43
  285. package/lib/theme/NavbarItem/LocaleDropdownNavbarItem.js +0 -72
  286. package/lib/theme/NavbarItem/SearchNavbarItem.js +0 -28
  287. package/lib/theme/NavbarItem/index.js +0 -54
  288. package/lib/theme/NotFound.js +0 -57
  289. package/lib/theme/SearchBar.js +0 -15
  290. package/lib/theme/SearchMetadatas/index.js +0 -33
  291. package/lib/theme/Seo/index.js +0 -49
  292. package/lib/theme/SkipToContent/index.js +0 -71
  293. package/lib/theme/SkipToContent/styles.module.css +0 -14
  294. package/lib/theme/TOC/index.js +0 -60
  295. package/lib/theme/TOC/styles.module.css +0 -23
  296. package/lib/theme/TOCCollapsible/index.js +0 -51
  297. package/lib/theme/TOCCollapsible/styles.module.css +0 -49
  298. package/lib/theme/TOCInline/index.js +0 -53
  299. package/lib/theme/TOCInline/styles.module.css +0 -12
  300. package/lib/theme/TabItem/index.js +0 -32
  301. package/lib/theme/Tabs/index.js +0 -150
  302. package/lib/theme/Tabs/styles.module.css +0 -23
  303. package/lib/theme/ThemeContext.js +0 -21
  304. package/lib/theme/ThemeProvider/index.js +0 -38
  305. package/lib/theme/ThemedImage/index.js +0 -49
  306. package/lib/theme/ThemedImage/styles.module.css +0 -18
  307. package/lib/theme/Toggle/index.js +0 -94
  308. package/lib/theme/Toggle/styles.css +0 -103
  309. package/lib/theme/Toggle/styles.module.css +0 -17
  310. package/lib/theme/UserPreferencesContext.js +0 -18
  311. package/lib/theme/UserPreferencesProvider/index.js +0 -36
  312. package/lib/theme/hooks/useContextualSearchFilters.js +0 -47
  313. package/lib/theme/hooks/useDocs.js +0 -18
  314. package/lib/theme/hooks/useHideableNavbar.js +0 -92
  315. package/lib/theme/hooks/useKeyboardNavigation.js +0 -45
  316. package/lib/theme/hooks/useLocationHash.js +0 -28
  317. package/lib/theme/hooks/useLockBodyScroll.js +0 -26
  318. package/lib/theme/hooks/usePrismTheme.js +0 -36
  319. package/lib/theme/hooks/useScrollPosition.js +0 -49
  320. package/lib/theme/hooks/useTOCHighlight.js +0 -87
  321. package/lib/theme/hooks/useTabGroupChoice.js +0 -51
  322. package/lib/theme/hooks/useTheme.js +0 -99
  323. package/lib/theme/hooks/useThemeContext.js +0 -31
  324. package/lib/theme/hooks/useUserPreferencesContext.js +0 -31
  325. package/lib/theme/hooks/useWindowSize.js +0 -73
  326. package/lib/theme/prism-include-languages.js +0 -39
  327. package/lib-next/__tests__/__snapshots__/translations.test.ts.snap +0 -116
  328. package/lib-next/__tests__/translations.test.js +0 -128
  329. package/lib-next/__tests__/validateThemeConfig.test.js +0 -333
  330. package/lib-next/index.js +0 -221
  331. package/lib-next/theme/Toggle/styles.css +0 -103
  332. package/lib-next/theme/hooks/useContextualSearchFilters.js +0 -41
  333. package/lib-next/theme/hooks/useLocationHash.js +0 -20
  334. package/lib-next/theme/hooks/useScrollPosition.js +0 -38
  335. package/lib-next/theme/hooks/useTOCHighlight.js +0 -84
  336. package/lib-next/translations.js +0 -145
  337. package/lib-next/validateThemeConfig.js +0 -319
  338. package/src/__tests__/__snapshots__/translations.test.ts.snap +0 -116
  339. package/src/__tests__/translations.test.ts +0 -116
  340. package/src/__tests__/validateThemeConfig.test.js +0 -333
  341. package/src/prism-include-languages.js +0 -11
  342. package/src/theme/Toggle/styles.css +0 -103
  343. package/src/theme/hooks/useContextualSearchFilters.ts +0 -52
  344. package/src/theme/hooks/useLocationHash.ts +0 -25
  345. package/src/theme/hooks/useScrollPosition.ts +0 -45
  346. package/src/theme/hooks/useTOCHighlight.ts +0 -98
  347. package/tsconfig.json +0 -12
  348. package/update-code-translations.js +0 -242
  349. package/update-code-translations.test.js +0 -33
package/src/theme/MDXComponents/index.tsx CHANGED
@@ -5,13 +5,33 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- import React, {isValidElement} from 'react';
8
+ import React, {ComponentProps, isValidElement, ReactElement} from 'react';
9
+ import Head from '@docusaurus/Head';
9
10
  import Link from '@docusaurus/Link';
10
11
  import CodeBlock, {Props} from '@theme/CodeBlock';
11
12
  import Heading from '@theme/Heading';
13
+ import Details from '@theme/Details';
12
14
  import type {MDXComponentsObject} from '@theme/MDXComponents';
13
15
 
16
+ import './styles.css';
17
+
18
+ // MDX elements are wrapped through the MDX pragma
19
+ // In some cases (notably usage with Head/Helmet) we need to unwrap those elements.
20
+ function unwrapMDXElement(element: ReactElement) {
21
+ if (element?.props?.mdxType && element?.props?.originalType) {
22
+ const {mdxType, originalType, ...newProps} = element.props;
23
+ return React.createElement(element.props.originalType, newProps);
24
+ }
25
+ return element;
26
+ }
27
+
14
28
  const MDXComponents: MDXComponentsObject = {
29
+ head: (props) => {
30
+ const unwrappedChildren = React.Children.map(props.children, (child) =>
31
+ unwrapMDXElement(child as ReactElement),
32
+ );
33
+ return <Head {...props}>{unwrappedChildren}</Head>;
34
+ },
15
35
  code: (props) => {
16
36
  const {children} = props;
17
37
 
@@ -29,21 +49,35 @@ const MDXComponents: MDXComponentsObject = {
29
49
  },
30
50
  a: (props) => <Link {...props} />,
31
51
  pre: (props) => {
32
- const {children} = props as {children: any};
52
+ const {children} = props;
33
53
 
34
54
  // See comment for `code` above
35
- if (isValidElement(children?.props?.children)) {
36
- return children?.props.children;
55
+ if (isValidElement(children) && isValidElement(children?.props?.children)) {
56
+ return children.props.children;
37
57
  }
38
58
 
39
59
  return (
40
60
  <CodeBlock
41
61
  {...((isValidElement(children)
42
62
  ? children?.props
43
- : {children}) as Props)}
63
+ : {...props}) as Props)}
44
64
  />
45
65
  );
46
66
  },
67
+ details: (props): JSX.Element => {
68
+ const items = React.Children.toArray(props.children) as ReactElement[];
69
+ // Split summary item from the rest to pass it as a separate prop to the Detais theme component
70
+ const summary: ReactElement<ComponentProps<'summary'>> = items.find(
71
+ (item) => item?.props?.mdxType === 'summary',
72
+ )!;
73
+ const children = <>{items.filter((item) => item !== summary)}</>;
74
+
75
+ return (
76
+ <Details {...props} summary={summary}>
77
+ {children}
78
+ </Details>
79
+ );
80
+ },
47
81
  h1: Heading('h1'),
48
82
  h2: Heading('h2'),
49
83
  h3: Heading('h3'),
package/src/theme/MDXComponents/styles.css ADDED
@@ -0,0 +1,11 @@
1
+ /**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+
8
+ ul.contains-task-list {
9
+ padding-left: 0;
10
+ list-style: none;
11
+ }
package/src/theme/MDXPage/index.tsx CHANGED
@@ -18,7 +18,11 @@ import styles from './styles.module.css';
18
18
 
19
19
  function MDXPage(props: Props): JSX.Element {
20
20
  const {content: MDXPageContent} = props;
21
- const {frontMatter, metadata} = MDXPageContent;
21
+ const {
22
+ // TODO this frontmatter is not validated/normalized, it's the raw user-provided one. We should expose normalized one too!
23
+ frontMatter,
24
+ metadata,
25
+ } = MDXPageContent;
22
26
 
23
27
  const {
24
28
  title,
@@ -44,7 +48,11 @@ function MDXPage(props: Props): JSX.Element {
44
48
  </div>
45
49
  {!hideTableOfContents && MDXPageContent.toc && (
46
50
  <div className="col col--2">
47
- <TOC toc={MDXPageContent.toc} />
51
+ <TOC
52
+ toc={MDXPageContent.toc}
53
+ minHeadingLevel={frontMatter.toc_min_heading_level}
54
+ maxHeadingLevel={frontMatter.toc_max_heading_level}
55
+ />
48
56
  </div>
49
57
  )}
50
58
  </div>
package/src/theme/Navbar/index.tsx CHANGED
@@ -15,22 +15,30 @@ import {
15
15
  useThemeConfig,
16
16
  useMobileSecondaryMenuRenderer,
17
17
  usePrevious,
18
+ useHistoryPopHandler,
18
19
  } from '@docusaurus/theme-common';
19
20
  import useHideableNavbar from '@theme/hooks/useHideableNavbar';
20
21
  import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
21
22
  import useWindowSize from '@theme/hooks/useWindowSize';
22
- import NavbarItem from '@theme/NavbarItem';
23
+ import {useActivePlugin} from '@theme/hooks/useDocs';
24
+ import NavbarItem, {Props as NavbarItemConfig} from '@theme/NavbarItem';
23
25
  import Logo from '@theme/Logo';
24
26
  import IconMenu from '@theme/IconMenu';
27
+ import IconClose from '@theme/IconClose';
25
28
 
26
29
  import styles from './styles.module.css';
27
30
 
28
31
  // retrocompatible with v1
29
32
  const DefaultNavItemPosition = 'right';
30
33
 
34
+ function useNavbarItems() {
35
+ // TODO temporary casting until ThemeConfig type is improved
36
+ return useThemeConfig().navbar.items as NavbarItemConfig[];
37
+ }
38
+
31
39
  // If split links by left/right
32
40
  // if position is unspecified, fallback to right (as v1)
33
- function splitNavItemsByPosition(items) {
41
+ function splitNavItemsByPosition(items: NavbarItemConfig[]) {
34
42
  const leftItems = items.filter(
35
43
  (item) => (item.position ?? DefaultNavItemPosition) === 'left',
36
44
  );
@@ -51,6 +59,18 @@ function useMobileSidebar() {
51
59
 
52
60
  const [shown, setShown] = useState(false);
53
61
 
62
+ // Close mobile sidebar on navigation pop
63
+ // Most likely firing when using the Android back button (but not only)
64
+ useHistoryPopHandler(() => {
65
+ if (shown) {
66
+ setShown(false);
67
+ // Should we prevent the navigation here?
68
+ // See https://github.com/facebook/docusaurus/pull/5462#issuecomment-911699846
69
+ return false; // prevent pop navigation
70
+ }
71
+ return undefined;
72
+ });
73
+
54
74
  const toggle = useCallback(() => {
55
75
  setShown((s) => !s);
56
76
  }, []);
@@ -85,12 +105,13 @@ function useSecondaryMenu({
85
105
  });
86
106
  const previousContent = usePrevious(content);
87
107
 
88
- const [shown, setShown] = useState<boolean>(() => {
89
- // /!\ content is set with useEffect,
90
- // so it's not available on mount anyway
91
- // "return !!content" => always returns false
92
- return false;
93
- });
108
+ const [shown, setShown] = useState<boolean>(
109
+ () =>
110
+ // /!\ content is set with useEffect,
111
+ // so it's not available on mount anyway
112
+ // "return !!content" => always returns false
113
+ false,
114
+ );
94
115
 
95
116
  // When content is become available for the first time (set in useEffect)
96
117
  // we set this content to be shown!
@@ -132,9 +153,7 @@ function NavbarMobileSidebar({
132
153
  toggleSidebar,
133
154
  }: NavbarMobileSidebarProps) {
134
155
  useLockBodyScroll(sidebarShown);
135
- const {
136
- navbar: {items},
137
- } = useThemeConfig();
156
+ const items = useNavbarItems();
138
157
 
139
158
  const colorModeToggle = useColorModeToggle();
140
159
 
@@ -151,42 +170,49 @@ function NavbarMobileSidebar({
151
170
  imageClassName="navbar__logo"
152
171
  titleClassName="navbar__title"
153
172
  />
154
- {!colorModeToggle.disabled && sidebarShown && (
173
+ {!colorModeToggle.disabled && (
155
174
  <Toggle
175
+ className={styles.navbarSidebarToggle}
156
176
  checked={colorModeToggle.isDarkTheme}
157
177
  onChange={colorModeToggle.toggle}
158
178
  />
159
179
  )}
180
+ <button
181
+ type="button"
182
+ className="clean-btn navbar-sidebar__close"
183
+ onClick={toggleSidebar}>
184
+ <IconClose
185
+ color="var(--ifm-color-emphasis-600)"
186
+ className={styles.navbarSidebarCloseSvg}
187
+ />
188
+ </button>
160
189
  </div>
161
190
 
162
191
  <div
163
- className={clsx('navbar-sidebar__items', styles.menuWrapper, {
164
- [styles.menuWrapperSecondaryMenuShown]: secondaryMenu.shown,
192
+ className={clsx('navbar-sidebar__items', {
193
+ 'navbar-sidebar__items--show-secondary': secondaryMenu.shown,
165
194
  })}>
166
- <div className="menu">
195
+ <div className="navbar-sidebar__item menu">
167
196
  <ul className="menu__list">
168
197
  {items.map((item, i) => (
169
- <NavbarItem
170
- mobile
171
- {...(item as any)} // TODO fix typing
172
- onClick={toggleSidebar}
173
- key={i}
174
- />
198
+ <NavbarItem mobile {...item} onClick={toggleSidebar} key={i} />
175
199
  ))}
176
200
  </ul>
177
201
  </div>
178
202
 
179
- <div className={styles.secondaryMenu}>
180
- <button
181
- type="button"
182
- className={clsx('clean-btn', styles.backButton)}
183
- onClick={secondaryMenu.hide}>
184
- <Translate
185
- id="theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel"
186
- description="The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)">
187
- ← Back to main menu
188
- </Translate>
189
- </button>
203
+ <div className="navbar-sidebar__item menu">
204
+ {items.length > 0 && (
205
+ <button
206
+ type="button"
207
+ className="clean-btn navbar-sidebar__back"
208
+ onClick={secondaryMenu.hide}>
209
+ <Translate
210
+ id="theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel"
211
+ description="The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)">
212
+ ← Back to main menu
213
+ </Translate>
214
+ </button>
215
+ )}
190
216
  {secondaryMenu.content}
191
217
  </div>
192
218
  </div>
@@ -196,14 +222,15 @@ function NavbarMobileSidebar({
196
222
 
197
223
  function Navbar(): JSX.Element {
198
224
  const {
199
- navbar: {items, hideOnScroll, style},
225
+ navbar: {hideOnScroll, style},
200
226
  } = useThemeConfig();
201
227
 
202
228
  const mobileSidebar = useMobileSidebar();
203
229
  const colorModeToggle = useColorModeToggle();
204
-
230
+ const activeDocPlugin = useActivePlugin();
205
231
  const {navbarRef, isNavbarVisible} = useHideableNavbar(hideOnScroll);
206
232
 
233
+ const items = useNavbarItems();
207
234
  const hasSearchNavbarItem = items.some((item) => item.type === 'search');
208
235
  const {leftItems, rightItems} = splitNavItemsByPosition(items);
209
236
 
@@ -219,7 +246,7 @@ function Navbar(): JSX.Element {
219
246
  })}>
220
247
  <div className="navbar__inner">
221
248
  <div className="navbar__items">
222
- {items?.length > 0 && (
249
+ {(items?.length > 0 || activeDocPlugin) && (
223
250
  <button
224
251
  aria-label="Navigation bar toggle"
225
252
  className="navbar__toggle clean-btn"
package/src/theme/Navbar/styles.module.css CHANGED
@@ -8,7 +8,7 @@
8
8
  /*
9
9
  Hide toggle in small viewports
10
10
  */
11
- @media screen and (max-width: 997px) {
11
+ @media (max-width: 996px) {
12
12
  .toggle {
13
13
  display: none;
14
14
  }
@@ -22,42 +22,6 @@ Hide toggle in small viewports
22
22
  transform: translate3d(0, calc(-100% - 2px), 0);
23
23
  }
24
24
 
25
- :global(.navbar-sidebar__items) {
26
- padding: 0;
27
- }
28
-
29
- :global(.navbar-sidebar) {
30
- overflow-x: hidden;
31
- }
32
-
33
- .menuWrapper {
34
- display: flex;
35
- width: calc(var(--ifm-navbar-sidebar-width));
36
- transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
37
- transform: translateZ(0);
38
- }
39
-
40
- .menuWrapperSecondaryMenuShown {
41
- transform: translate3d(calc((var(--ifm-navbar-sidebar-width)) * -1), 0, 0);
42
- }
43
-
44
- .menuWrapper > div {
45
- flex-shrink: 0;
46
- width: calc(var(--ifm-navbar-sidebar-width));
47
- font-weight: var(--ifm-font-weight-semibold);
48
- padding: 0.5rem;
49
- }
50
-
51
- .backButton {
52
- width: calc(100% + 1rem);
53
- margin: 0 0 0.7rem -0.5rem;
54
- text-align: left;
55
- font-size: 15px;
56
- padding: 0.6rem 1.5rem;
57
- background: var(--ifm-menu-color-background-active);
58
- font-weight: var(--ifm-button-font-weight);
59
- }
60
-
61
- .secondaryMenu {
62
- padding-top: 0 !important;
25
+ .navbarSidebarToggle {
26
+ margin-right: 1rem;
63
27
  }
package/src/theme/NavbarItem/DefaultNavbarItem.tsx CHANGED
@@ -5,16 +5,10 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- import React, {useState, useRef, useEffect} from 'react';
8
+ import React from 'react';
9
9
  import clsx from 'clsx';
10
10
  import Link from '@docusaurus/Link';
11
11
  import useBaseUrl from '@docusaurus/useBaseUrl';
12
- import {useLocation} from '@docusaurus/router';
13
- import {
14
- isSamePath,
15
- useCollapsible,
16
- Collapsible,
17
- } from '@docusaurus/theme-common';
18
12
  import type {
19
13
  NavLinkProps,
20
14
  DesktopOrMobileNavBarItemProps,
@@ -22,19 +16,21 @@ import type {
22
16
  } from '@theme/NavbarItem/DefaultNavbarItem';
23
17
  import IconExternalLink from '@theme/IconExternalLink';
24
18
  import isInternalUrl from '@docusaurus/isInternalUrl';
19
+ import {isRegexpStringMatch} from '@docusaurus/theme-common';
20
+ import {getInfimaActiveClassName} from './index';
25
21
 
26
22
  const dropdownLinkActiveClass = 'dropdown__link--active';
27
23
 
28
- function NavLink({
24
+ export function NavLink({
29
25
  activeBasePath,
30
26
  activeBaseRegex,
31
27
  to,
32
28
  href,
33
29
  label,
34
- activeClassName = 'navbar__link--active',
30
+ activeClassName = '',
35
31
  prependBaseUrlToHref,
36
32
  ...props
37
- }: NavLinkProps) {
33
+ }: NavLinkProps): JSX.Element {
38
34
  // TODO all this seems hacky
39
35
  // {to: 'version'} should probably be forbidden, in favor of {to: '/version'}
40
36
  const toUrl = useBaseUrl(to);
@@ -51,13 +47,15 @@ function NavLink({
51
47
  }
52
48
  : {
53
49
  isNavLink: true,
54
- activeClassName,
50
+ activeClassName: !props.className?.includes(activeClassName)
51
+ ? activeClassName
52
+ : '',
55
53
  to: toUrl,
56
54
  ...(activeBasePath || activeBaseRegex
57
55
  ? {
58
56
  isActive: (_match, location) =>
59
57
  activeBaseRegex
60
- ? new RegExp(activeBaseRegex).test(location.pathname)
58
+ ? isRegexpStringMatch(activeBaseRegex, location.pathname)
61
59
  : location.pathname.startsWith(activeBaseUrl),
62
60
  }
63
61
  : null),
@@ -75,159 +73,54 @@ function NavLink({
75
73
  );
76
74
  }
77
75
 
78
- function NavItemDesktop({
79
- items,
80
- position,
76
+ function DefaultNavbarItemDesktop({
81
77
  className,
78
+ isDropdownItem = false,
82
79
  ...props
83
80
  }: DesktopOrMobileNavBarItemProps) {
84
- const dropdownRef = useRef<HTMLDivElement>(null);
85
- const dropdownMenuRef = useRef<HTMLUListElement>(null);
86
- const [showDropdown, setShowDropdown] = useState(false);
87
-
88
- useEffect(() => {
89
- const handleClickOutside = (event) => {
90
- if (!dropdownRef.current || dropdownRef.current.contains(event.target)) {
91
- return;
92
- }
93
-
94
- setShowDropdown(false);
95
- };
96
-
97
- document.addEventListener('mousedown', handleClickOutside);
98
- document.addEventListener('touchstart', handleClickOutside);
99
-
100
- return () => {
101
- document.removeEventListener('mousedown', handleClickOutside);
102
- document.removeEventListener('touchstart', handleClickOutside);
103
- };
104
- }, [dropdownRef]);
105
-
106
- const navLinkClassNames = (extraClassName?: string, isDropdownItem = false) =>
107
- clsx(
108
- {
109
- 'navbar__item navbar__link': !isDropdownItem,
110
- dropdown__link: isDropdownItem,
111
- },
112
- extraClassName,
113
- );
81
+ const element = (
82
+ <NavLink
83
+ className={clsx(
84
+ isDropdownItem ? 'dropdown__link' : 'navbar__item navbar__link',
85
+ className,
86
+ )}
87
+ {...props}
88
+ />
89
+ );
114
90
 
115
- if (!items) {
116
- return <NavLink className={navLinkClassNames(className)} {...props} />;
91
+ if (isDropdownItem) {
92
+ return <li>{element}</li>;
117
93
  }
118
94
 
119
- return (
120
- <div
121
- ref={dropdownRef}
122
- className={clsx('navbar__item', 'dropdown', 'dropdown--hoverable', {
123
- 'dropdown--left': position === 'left',
124
- 'dropdown--right': position === 'right',
125
- 'dropdown--show': showDropdown,
126
- })}>
127
- <NavLink
128
- className={navLinkClassNames(className)}
129
- {...props}
130
- onClick={props.to ? undefined : (e) => e.preventDefault()}
131
- onKeyDown={(e) => {
132
- if (e.key === 'Enter') {
133
- e.preventDefault();
134
- setShowDropdown(!showDropdown);
135
- }
136
- }}>
137
- {props.children ?? props.label}
138
- </NavLink>
139
- <ul ref={dropdownMenuRef} className="dropdown__menu">
140
- {items.map(({className: childItemClassName, ...childItemProps}, i) => (
141
- <li key={i}>
142
- <NavLink
143
- onKeyDown={(e) => {
144
- if (i === items.length - 1 && e.key === 'Tab') {
145
- e.preventDefault();
146
-
147
- setShowDropdown(false);
148
-
149
- const nextNavbarItem = (dropdownRef.current as HTMLElement)
150
- .nextElementSibling;
151
-
152
- if (nextNavbarItem) {
153
- (nextNavbarItem as HTMLElement).focus();
154
- }
155
- }
156
- }}
157
- activeClassName={dropdownLinkActiveClass}
158
- className={navLinkClassNames(childItemClassName, true)}
159
- {...childItemProps}
160
- />
161
- </li>
162
- ))}
163
- </ul>
164
- </div>
165
- );
95
+ return element;
166
96
  }
167
97
 
168
- function NavItemMobile({
169
- items,
98
+ function DefaultNavbarItemMobile({
170
99
  className,
171
- position: _position, // Need to destructure position from props so that it doesn't get passed on.
100
+ isDropdownItem: _isDropdownItem,
172
101
  ...props
173
102
  }: DesktopOrMobileNavBarItemProps) {
174
- const {pathname} = useLocation();
175
- const {collapsed, toggleCollapsed} = useCollapsible({
176
- initialState: () =>
177
- !items?.some((item) => isSamePath(item.to, pathname)) ?? true,
178
- });
179
-
180
- const navLinkClassNames = (extraClassName?: string, isSubList = false) =>
181
- clsx(
182
- 'menu__link',
183
- {
184
- 'menu__link--sublist': isSubList,
185
- },
186
- extraClassName,
187
- );
188
-
189
- if (!items) {
190
- return (
191
- <li className="menu__list-item">
192
- <NavLink className={navLinkClassNames(className)} {...props} />
193
- </li>
194
- );
195
- }
196
-
197
103
  return (
198
- <li
199
- className={clsx('menu__list-item', {
200
- 'menu__list-item--collapsed': collapsed,
201
- })}>
202
- <NavLink
203
- role="button"
204
- className={navLinkClassNames(className, true)}
205
- {...props}
206
- onClick={(e) => {
207
- e.preventDefault();
208
- toggleCollapsed();
209
- }}>
210
- {props.children ?? props.label}
211
- </NavLink>
212
- <Collapsible as="ul" className="menu__list" collapsed={collapsed}>
213
- {items.map(({className: childItemClassName, ...childItemProps}, i) => (
214
- <li className="menu__list-item" key={i}>
215
- <NavLink
216
- activeClassName="menu__link--active"
217
- className={navLinkClassNames(childItemClassName)}
218
- {...childItemProps}
219
- onClick={props.onClick}
220
- />
221
- </li>
222
- ))}
223
- </Collapsible>
104
+ <li className="menu__list-item">
105
+ <NavLink className={clsx('menu__link', className)} {...props} />
224
106
  </li>
225
107
  );
226
108
  }
227
109
 
228
- function DefaultNavbarItem({mobile = false, ...props}: Props): JSX.Element {
229
- const Comp = mobile ? NavItemMobile : NavItemDesktop;
230
- return <Comp {...props} />;
110
+ function DefaultNavbarItem({
111
+ mobile = false,
112
+ position: _position, // Need to destructure position from props so that it doesn't get passed on.
113
+ ...props
114
+ }: Props): JSX.Element {
115
+ const Comp = mobile ? DefaultNavbarItemMobile : DefaultNavbarItemDesktop;
116
+ return (
117
+ <Comp
118
+ {...props}
119
+ activeClassName={
120
+ props.activeClassName ?? getInfimaActiveClassName(mobile)
121
+ }
122
+ />
123
+ );
231
124
  }
232
125
 
233
126
  export default DefaultNavbarItem;
package/src/theme/NavbarItem/DocNavbarItem.tsx CHANGED
@@ -9,20 +9,13 @@ import React from 'react';
9
9
  import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
10
10
  import {useLatestVersion, useActiveDocContext} from '@theme/hooks/useDocs';
11
11
  import clsx from 'clsx';
12
+ import {getInfimaActiveClassName} from './index';
12
13
  import type {Props} from '@theme/NavbarItem/DocNavbarItem';
13
- import {useDocsPreferredVersion} from '@docusaurus/theme-common';
14
- import {uniq} from '@docusaurus/utils-common';
15
- import type {
16
- GlobalDataVersion,
17
- GlobalDataDoc,
18
- } from '@docusaurus/plugin-content-docs-types';
14
+ import {useDocsPreferredVersion, uniq} from '@docusaurus/theme-common';
15
+ import type {GlobalDataVersion} from '@docusaurus/plugin-content-docs';
19
16
 
20
17
  function getDocInVersions(versions: GlobalDataVersion[], docId: string) {
21
- // vanilla-js flatten, TODO replace soon by ES flat() / flatMap()
22
- const allDocs: GlobalDataDoc[] = [].concat(
23
- ...versions.map((version) => version.docs),
24
- );
25
-
18
+ const allDocs = versions.flatMap((version) => version.docs);
26
19
  const doc = allDocs.find((versionDoc) => versionDoc.id === docId);
27
20
  if (!doc) {
28
21
  const docIds = allDocs.map((versionDoc) => versionDoc.id).join('\n- ');
@@ -38,7 +31,6 @@ Available doc ids are:\n- ${docIds}`,
38
31
 
39
32
  export default function DocNavbarItem({
40
33
  docId,
41
- activeSidebarClassName,
42
34
  label: staticLabel,
43
35
  docsPluginId,
44
36
  ...props
@@ -48,19 +40,23 @@ export default function DocNavbarItem({
48
40
  const latestVersion = useLatestVersion(docsPluginId);
49
41
 
50
42
  // Versions used to look for the doc to link to, ordered + no duplicate
51
- const versions: GlobalDataVersion[] = uniq(
52
- [activeVersion, preferredVersion, latestVersion].filter(Boolean),
43
+ const versions = uniq(
44
+ [activeVersion, preferredVersion, latestVersion].filter(
45
+ Boolean,
46
+ ) as GlobalDataVersion[],
53
47
  );
54
48
  const doc = getDocInVersions(versions, docId);
49
+ const activeDocInfimaClassName = getInfimaActiveClassName(props.mobile);
55
50
 
56
51
  return (
57
52
  <DefaultNavbarItem
58
53
  exact
59
54
  {...props}
60
55
  className={clsx(props.className, {
61
- [activeSidebarClassName]:
62
- activeDoc && activeDoc.sidebar === doc.sidebar,
56
+ [activeDocInfimaClassName]:
57
+ activeDoc?.sidebar && activeDoc.sidebar === doc.sidebar,
63
58
  })}
59
+ activeClassName={activeDocInfimaClassName}
64
60
  label={staticLabel ?? doc.id}
65
61
  to={doc.path}
66
62
  />