@docusaurus/theme-classic 2.0.0-beta.fbdeefcac → 2.0.0-rc.1

package/lib/theme/DocSidebar/index.js

@@ -1,309 +1,24 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _themeCommon = require("@docusaurus/theme-common");
-
-var _useLockBodyScroll = _interopRequireDefault(require("@theme/hooks/useLockBodyScroll"));
-
-var _useWindowSize = _interopRequireWildcard(require("@theme/hooks/useWindowSize"));
-
-var _useScrollPosition = _interopRequireDefault(require("@theme/hooks/useScrollPosition"));
-
-var _Link = _interopRequireDefault(require("@docusaurus/Link"));
-
-var _isInternalUrl = _interopRequireDefault(require("@docusaurus/isInternalUrl"));
-
-var _Logo = _interopRequireDefault(require("@theme/Logo"));
-
-var _IconArrow = _interopRequireDefault(require("@theme/IconArrow"));
-
-var _IconMenu = _interopRequireDefault(require("@theme/IconMenu"));
-
-var _IconExternalLink = _interopRequireDefault(require("@theme/IconExternalLink"));
-
-var _Translate = require("@docusaurus/Translate");
-
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-const MOBILE_TOGGLE_SIZE = 24;
-
-const isActiveSidebarItem = (item, activePath) => {
-  if (item.type === 'link') {
-    return (0, _themeCommon.isSamePath)(item.href, activePath);
-  }
-
-  if (item.type === 'category') {
-    return item.items.some(subItem => isActiveSidebarItem(subItem, activePath));
-  }
-
-  return false;
-}; // Optimize sidebar at each "level"
-// TODO this item should probably not receive the "activePath" props
-// TODO this triggers whole sidebar re-renders on navigation
-
-
-const DocSidebarItems = (0, _react.memo)(function DocSidebarItems({
-  items,
-  ...props
-}) {
-  return items.map((item, index) => <DocSidebarItem key={index} // sidebar is static, the index does not change
-  item={item} {...props} />);
-});
-
-function DocSidebarItem(props) {
-  switch (props.item.type) {
-    case 'category':
-      return <DocSidebarItemCategory {...props} />;
-
-    case 'link':
-    default:
-      return <DocSidebarItemLink {...props} />;
-  }
+import React from 'react';
+import {useWindowSize} from '@docusaurus/theme-common';
+import DocSidebarDesktop from '@theme/DocSidebar/Desktop';
+import DocSidebarMobile from '@theme/DocSidebar/Mobile';
+export default function DocSidebar(props) {
+  const windowSize = useWindowSize();
+  // Desktop sidebar visible on hydration: need SSR rendering
+  const shouldRenderSidebarDesktop =
+    windowSize === 'desktop' || windowSize === 'ssr';
+  // Mobile sidebar not visible on hydration: can avoid SSR rendering
+  const shouldRenderSidebarMobile = windowSize === 'mobile';
+  return (
+    <>
+      {shouldRenderSidebarDesktop && <DocSidebarDesktop {...props} />}
+      {shouldRenderSidebarMobile && <DocSidebarMobile {...props} />}
+    </>
+  );
 }
-
-function DocSidebarItemCategory({
-  item,
-  onItemClick,
-  collapsible,
-  activePath,
-  ...props
-}) {
-  const {
-    items,
-    label
-  } = item;
-  const isActive = isActiveSidebarItem(item, activePath);
-  const wasActive = (0, _themeCommon.usePrevious)(isActive); // active categories are always initialized as expanded
-  // the default (item.collapsed) is only used for non-active categories
-
-  const [collapsed, setCollapsed] = (0, _react.useState)(() => {
-    if (!collapsible) {
-      return false;
-    }
-
-    return isActive ? false : item.collapsed;
-  });
-  const menuListRef = (0, _react.useRef)(null);
-  const [menuListHeight, setMenuListHeight] = (0, _react.useState)(undefined);
-
-  const handleMenuListHeight = (calc = true) => {
-    var _menuListRef$current;
-
-    setMenuListHeight(calc ? `${(_menuListRef$current = menuListRef.current) === null || _menuListRef$current === void 0 ? void 0 : _menuListRef$current.scrollHeight}px` : undefined);
-  }; // If we navigate to a category, it should automatically expand itself
-
-
-  (0, _react.useEffect)(() => {
-    const justBecameActive = isActive && !wasActive;
-
-    if (justBecameActive && collapsed) {
-      setCollapsed(false);
-    }
-  }, [isActive, wasActive, collapsed]);
-  const handleItemClick = (0, _react.useCallback)(e => {
-    e.preventDefault();
-
-    if (!menuListHeight) {
-      handleMenuListHeight();
-    }
-
-    setTimeout(() => setCollapsed(state => !state), 100);
-  }, [menuListHeight]);
-
-  if (items.length === 0) {
-    return null;
-  }
-
-  return <li className={(0, _clsx.default)('menu__list-item', {
-    'menu__list-item--collapsed': collapsed
-  })}>
-      {
-      /* eslint-disable-next-line jsx-a11y/anchor-is-valid */
-    }
-      <a className={(0, _clsx.default)('menu__link', {
-      'menu__link--sublist': collapsible,
-      'menu__link--active': collapsible && isActive,
-      [_stylesModule.default.menuLinkText]: !collapsible
-    })} onClick={collapsible ? handleItemClick : undefined} href={collapsible ? '#' : undefined} {...props}>
-        {label}
-      </a>
-      <ul className="menu__list" ref={menuListRef} style={{
-      height: menuListHeight
-    }} onTransitionEnd={() => {
-      if (!collapsed) {
-        handleMenuListHeight(false);
-      }
-    }}>
-        <DocSidebarItems items={items} tabIndex={collapsed ? '-1' : '0'} onItemClick={onItemClick} collapsible={collapsible} activePath={activePath} />
-      </ul>
-    </li>;
-}
-
-function DocSidebarItemLink({
-  item,
-  onItemClick,
-  activePath,
-  collapsible: _collapsible,
-  ...props
-}) {
-  const {
-    href,
-    label
-  } = item;
-  const isActive = isActiveSidebarItem(item, activePath);
-  return <li className="menu__list-item" key={label}>
-      <_Link.default className={(0, _clsx.default)('menu__link', {
-      'menu__link--active': isActive
-    })} to={href} {...(0, _isInternalUrl.default)(href) && {
-      isNavLink: true,
-      exact: true,
-      onClick: onItemClick
-    }} {...props}>
-        {(0, _isInternalUrl.default)(href) ? label : <span>
-            {label}
-            <_IconExternalLink.default />
-          </span>}
-      </_Link.default>
-    </li>;
-}
-
-function useShowAnnouncementBar() {
-  const {
-    isClosed
-  } = (0, _themeCommon.useAnnouncementBar)();
-  const [showAnnouncementBar, setShowAnnouncementBar] = (0, _react.useState)(!isClosed);
-  (0, _useScrollPosition.default)(({
-    scrollY
-  }) => {
-    if (!isClosed) {
-      setShowAnnouncementBar(scrollY === 0);
-    }
-  });
-  return showAnnouncementBar;
-}
-
-function useResponsiveSidebar() {
-  const [showResponsiveSidebar, setShowResponsiveSidebar] = (0, _react.useState)(false);
-  (0, _useLockBodyScroll.default)(showResponsiveSidebar);
-  const windowSize = (0, _useWindowSize.default)();
-  (0, _react.useEffect)(() => {
-    if (windowSize === _useWindowSize.windowSizes.desktop) {
-      setShowResponsiveSidebar(false);
-    }
-  }, [windowSize]);
-  const closeResponsiveSidebar = (0, _react.useCallback)(e => {
-    e.target.blur();
-    setShowResponsiveSidebar(false);
-  }, [setShowResponsiveSidebar]);
-  const toggleResponsiveSidebar = (0, _react.useCallback)(() => {
-    setShowResponsiveSidebar(value => !value);
-  }, [setShowResponsiveSidebar]);
-  return {
-    showResponsiveSidebar,
-    closeResponsiveSidebar,
-    toggleResponsiveSidebar
-  };
-}
-
-function HideableSidebarButton({
-  onClick
-}) {
-  return <button type="button" title={(0, _Translate.translate)({
-    id: 'theme.docs.sidebar.collapseButtonTitle',
-    message: 'Collapse sidebar',
-    description: 'The title attribute for collapse button of doc sidebar'
-  })} aria-label={(0, _Translate.translate)({
-    id: 'theme.docs.sidebar.collapseButtonAriaLabel',
-    message: 'Collapse sidebar',
-    description: 'The title attribute for collapse button of doc sidebar'
-  })} className={(0, _clsx.default)('button button--secondary button--outline', _stylesModule.default.collapseSidebarButton)} onClick={onClick}>
-      <_IconArrow.default className={_stylesModule.default.collapseSidebarButtonIcon} />
-    </button>;
-}
-
-function ResponsiveSidebarButton({
-  responsiveSidebarOpened,
-  onClick
-}) {
-  return <button aria-label={responsiveSidebarOpened ? (0, _Translate.translate)({
-    id: 'theme.docs.sidebar.responsiveCloseButtonLabel',
-    message: 'Close menu',
-    description: 'The ARIA label for close button of mobile doc sidebar'
-  }) : (0, _Translate.translate)({
-    id: 'theme.docs.sidebar.responsiveOpenButtonLabel',
-    message: 'Open menu',
-    description: 'The ARIA label for open button of mobile doc sidebar'
-  })} aria-haspopup="true" className="button button--secondary button--sm menu__button" type="button" onClick={onClick}>
-      {responsiveSidebarOpened ? <span className={(0, _clsx.default)(_stylesModule.default.sidebarMenuIcon, _stylesModule.default.sidebarMenuCloseIcon)}>
-          &times;
-        </span> : <_IconMenu.default className={_stylesModule.default.sidebarMenuIcon} height={MOBILE_TOGGLE_SIZE} width={MOBILE_TOGGLE_SIZE} />}
-    </button>;
-}
-
-function DocSidebar({
-  path,
-  sidebar,
-  sidebarCollapsible = true,
-  onCollapse,
-  isHidden
-}) {
-  const showAnnouncementBar = useShowAnnouncementBar();
-  const {
-    navbar: {
-      hideOnScroll
-    },
-    hideableSidebar
-  } = (0, _themeCommon.useThemeConfig)();
-  const {
-    isClosed: isAnnouncementBarClosed
-  } = (0, _themeCommon.useAnnouncementBar)();
-  const {
-    showResponsiveSidebar,
-    closeResponsiveSidebar,
-    toggleResponsiveSidebar
-  } = useResponsiveSidebar();
-  return <div className={(0, _clsx.default)(_stylesModule.default.sidebar, {
-    [_stylesModule.default.sidebarWithHideableNavbar]: hideOnScroll,
-    [_stylesModule.default.sidebarHidden]: isHidden
-  })}>
-      {hideOnScroll && <_Logo.default tabIndex={-1} className={_stylesModule.default.sidebarLogo} />}
-      <nav className={(0, _clsx.default)('menu', 'menu--responsive', 'thin-scrollbar', _stylesModule.default.menu, {
-      'menu--show': showResponsiveSidebar,
-      [_stylesModule.default.menuWithAnnouncementBar]: !isAnnouncementBarClosed && showAnnouncementBar
-    })} aria-label={(0, _Translate.translate)({
-      id: 'theme.docs.sidebar.navAriaLabel',
-      message: 'Sidebar navigation',
-      description: 'The ARIA label for documentation menu'
-    })}>
-        <ResponsiveSidebarButton responsiveSidebarOpened={showResponsiveSidebar} onClick={toggleResponsiveSidebar} />
-
-        <ul className="menu__list">
-          <DocSidebarItems items={sidebar} onItemClick={closeResponsiveSidebar} collapsible={sidebarCollapsible} activePath={path} />
-        </ul>
-      </nav>
-      {hideableSidebar && <HideableSidebarButton onClick={onCollapse} />}
-    </div>;
-}
-
-var _default = DocSidebar;
-exports.default = _default;

package/lib/theme/DocSidebarItem/Category/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/DocSidebarItem/Category';
+export default function DocSidebarItemCategory({ item, onItemClick, activePath, level, index, ...props }: Props): JSX.Element;

package/lib/theme/DocSidebarItem/Category/index.js

@@ -0,0 +1,185 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, {useEffect, useMemo} from 'react';
+import clsx from 'clsx';
+import {
+  ThemeClassNames,
+  useThemeConfig,
+  usePrevious,
+  Collapsible,
+  useCollapsible,
+} from '@docusaurus/theme-common';
+import {
+  isActiveSidebarItem,
+  findFirstCategoryLink,
+  useDocSidebarItemsExpandedState,
+  isSamePath,
+} from '@docusaurus/theme-common/internal';
+import Link from '@docusaurus/Link';
+import {translate} from '@docusaurus/Translate';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import DocSidebarItems from '@theme/DocSidebarItems';
+// If we navigate to a category and it becomes active, it should automatically
+// expand itself
+function useAutoExpandActiveCategory({isActive, collapsed, updateCollapsed}) {
+  const wasActive = usePrevious(isActive);
+  useEffect(() => {
+    const justBecameActive = isActive && !wasActive;
+    if (justBecameActive && collapsed) {
+      updateCollapsed(false);
+    }
+  }, [isActive, wasActive, collapsed, updateCollapsed]);
+}
+/**
+ * When a collapsible category has no link, we still link it to its first child
+ * during SSR as a temporary fallback. This allows to be able to navigate inside
+ * the category even when JS fails to load, is delayed or simply disabled
+ * React hydration becomes an optional progressive enhancement
+ * see https://github.com/facebookincubator/infima/issues/36#issuecomment-772543188
+ * see https://github.com/facebook/docusaurus/issues/3030
+ */
+function useCategoryHrefWithSSRFallback(item) {
+  const isBrowser = useIsBrowser();
+  return useMemo(() => {
+    if (item.href) {
+      return item.href;
+    }
+    // In these cases, it's not necessary to render a fallback
+    // We skip the "findFirstCategoryLink" computation
+    if (isBrowser || !item.collapsible) {
+      return undefined;
+    }
+    return findFirstCategoryLink(item);
+  }, [item, isBrowser]);
+}
+function CollapseButton({categoryLabel, onClick}) {
+  return (
+    <button
+      aria-label={translate(
+        {
+          id: 'theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel',
+          message: "Toggle the collapsible sidebar category '{label}'",
+          description:
+            'The ARIA label to toggle the collapsible sidebar category',
+        },
+        {label: categoryLabel},
+      )}
+      type="button"
+      className="clean-btn menu__caret"
+      onClick={onClick}
+    />
+  );
+}
+export default function DocSidebarItemCategory({
+  item,
+  onItemClick,
+  activePath,
+  level,
+  index,
+  ...props
+}) {
+  const {items, label, collapsible, className, href} = item;
+  const {
+    docs: {
+      sidebar: {autoCollapseCategories},
+    },
+  } = useThemeConfig();
+  const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);
+  const isActive = isActiveSidebarItem(item, activePath);
+  const isCurrentPage = isSamePath(href, activePath);
+  const {collapsed, setCollapsed} = useCollapsible({
+    // Active categories are always initialized as expanded. The default
+    // (`item.collapsed`) is only used for non-active categories.
+    initialState: () => {
+      if (!collapsible) {
+        return false;
+      }
+      return isActive ? false : item.collapsed;
+    },
+  });
+  const {expandedItem, setExpandedItem} = useDocSidebarItemsExpandedState();
+  // Use this instead of `setCollapsed`, because it is also reactive
+  const updateCollapsed = (toCollapsed = !collapsed) => {
+    setExpandedItem(toCollapsed ? null : index);
+    setCollapsed(toCollapsed);
+  };
+  useAutoExpandActiveCategory({isActive, collapsed, updateCollapsed});
+  useEffect(() => {
+    if (
+      collapsible &&
+      expandedItem &&
+      expandedItem !== index &&
+      autoCollapseCategories
+    ) {
+      setCollapsed(true);
+    }
+  }, [collapsible, expandedItem, index, setCollapsed, autoCollapseCategories]);
+  return (
+    <li
+      className={clsx(
+        ThemeClassNames.docs.docSidebarItemCategory,
+        ThemeClassNames.docs.docSidebarItemCategoryLevel(level),
+        'menu__list-item',
+        {
+          'menu__list-item--collapsed': collapsed,
+        },
+        className,
+      )}>
+      <div
+        className={clsx('menu__list-item-collapsible', {
+          'menu__list-item-collapsible--active': isCurrentPage,
+        })}>
+        <Link
+          className={clsx('menu__link', {
+            'menu__link--sublist': collapsible,
+            'menu__link--sublist-caret': !href && collapsible,
+            'menu__link--active': isActive,
+          })}
+          onClick={
+            collapsible
+              ? (e) => {
+                  onItemClick?.(item);
+                  if (href) {
+                    updateCollapsed(false);
+                  } else {
+                    e.preventDefault();
+                    updateCollapsed();
+                  }
+                }
+              : () => {
+                  onItemClick?.(item);
+                }
+          }
+          aria-current={isCurrentPage ? 'page' : undefined}
+          aria-expanded={collapsible ? !collapsed : undefined}
+          href={collapsible ? hrefWithSSRFallback ?? '#' : hrefWithSSRFallback}
+          {...props}>
+          {label}
+        </Link>
+        {href && collapsible && (
+          <CollapseButton
+            categoryLabel={label}
+            onClick={(e) => {
+              e.preventDefault();
+              updateCollapsed();
+            }}
+          />
+        )}
+      </div>
+
+      <Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
+        <DocSidebarItems
+          items={items}
+          tabIndex={collapsed ? -1 : 0}
+          onItemClick={onItemClick}
+          activePath={activePath}
+          level={level + 1}
+        />
+      </Collapsible>
+    </li>
+  );
+}

package/lib/theme/DocSidebarItem/Html/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/DocSidebarItem/Html';
+export default function DocSidebarItemHtml({ item, level, index, }: Props): JSX.Element;

package/lib/theme/DocSidebarItem/Html/index.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import styles from './styles.module.css';
+export default function DocSidebarItemHtml({item, level, index}) {
+  const {value, defaultStyle, className} = item;
+  return (
+    <li
+      className={clsx(
+        ThemeClassNames.docs.docSidebarItemLink,
+        ThemeClassNames.docs.docSidebarItemLinkLevel(level),
+        defaultStyle && [styles.menuHtmlItem, 'menu__list-item'],
+        className,
+      )}
+      key={index}
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{__html: value}}
+    />
+  );
+}

package/lib/theme/DocSidebarItem/Html/styles.module.css

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@media (min-width: 997px) {
+  .menuHtmlItem {
+    padding: var(--ifm-menu-link-padding-vertical)
+      var(--ifm-menu-link-padding-horizontal);
+  }
+}

package/lib/theme/DocSidebarItem/Link/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/DocSidebarItem/Link';
+export default function DocSidebarItemLink({ item, onItemClick, activePath, level, index, ...props }: Props): JSX.Element;

package/lib/theme/DocSidebarItem/Link/index.js

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {isActiveSidebarItem} from '@docusaurus/theme-common/internal';
+import Link from '@docusaurus/Link';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import IconExternalLink from '@theme/Icon/ExternalLink';
+import styles from './styles.module.css';
+export default function DocSidebarItemLink({
+  item,
+  onItemClick,
+  activePath,
+  level,
+  index,
+  ...props
+}) {
+  const {href, label, className} = item;
+  const isActive = isActiveSidebarItem(item, activePath);
+  const isInternalLink = isInternalUrl(href);
+  return (
+    <li
+      className={clsx(
+        ThemeClassNames.docs.docSidebarItemLink,
+        ThemeClassNames.docs.docSidebarItemLinkLevel(level),
+        'menu__list-item',
+        className,
+      )}
+      key={label}>
+      <Link
+        className={clsx(
+          'menu__link',
+          !isInternalLink && styles.menuExternalLink,
+          {
+            'menu__link--active': isActive,
+          },
+        )}
+        aria-current={isActive ? 'page' : undefined}
+        to={href}
+        {...(isInternalLink && {
+          onClick: onItemClick ? () => onItemClick(item) : undefined,
+        })}
+        {...props}>
+        {label}
+        {!isInternalLink && <IconExternalLink />}
+      </Link>
+    </li>
+  );
+}

package/lib/theme/DocSidebarItem/Link/styles.module.css

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.menuExternalLink {
+  align-items: center;
+}

package/lib/theme/DocSidebarItem/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/DocSidebarItem';
+export default function DocSidebarItem({ item, ...props }: Props): JSX.Element | null;

package/lib/theme/DocSidebarItem/index.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import DocSidebarItemCategory from '@theme/DocSidebarItem/Category';
+import DocSidebarItemLink from '@theme/DocSidebarItem/Link';
+import DocSidebarItemHtml from '@theme/DocSidebarItem/Html';
+export default function DocSidebarItem({item, ...props}) {
+  switch (item.type) {
+    case 'category':
+      return <DocSidebarItemCategory item={item} {...props} />;
+    case 'html':
+      return <DocSidebarItemHtml item={item} {...props} />;
+    case 'link':
+    default:
+      return <DocSidebarItemLink item={item} {...props} />;
+  }
+}