@elastic/eui-docusaurus-theme 2.0.0

package/lib/theme/DocBreadcrumbs/index.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import clsx from 'clsx';
+import { css } from '@emotion/react';
+import { ThemeClassNames } from '@docusaurus/theme-common';
+import { useSidebarBreadcrumbs } from '@docusaurus/plugin-content-docs/client';
+import { useHomePageRoute } from '@docusaurus/theme-common/internal';
+import Link from '@docusaurus/Link';
+import { translate } from '@docusaurus/Translate';
+import { EuiIcon, useEuiMemoizedStyles } from '@elastic/eui';
+import HomeBreadcrumbItem from './Items/Home';
+import { getItemStyles } from './Items/item.styles';
+// converted from css modules to Emotion
+const getStyles = ({ euiTheme }) => ({
+    breadcrumbsContainer: css `
+    --ifm-breadcrumb-size-multiplier: 0.8;
+
+    // align breadcrumb items with content
+    margin-inline-start: -${euiTheme.size.m};
+  `,
+});
+// TODO move to design system folder
+function BreadcrumbsItemLink({ children, href, isLast, }) {
+    const className = 'breadcrumbs__link';
+    if (isLast) {
+        return (_jsx("span", { className: className, itemProp: "name", children: children }));
+    }
+    return href ? (_jsx(Link, { className: className, href: href, itemProp: "item", children: _jsx("span", { itemProp: "name", children: children }) })) : (
+    // TODO Google search console doesn't like breadcrumb items without href.
+    // The schema doesn't seem to require `id` for each `item`, although Google
+    // insist to infer one, even if it's invalid. Removing `itemProp="item
+    // name"` for now, since I don't know how to properly fix it.
+    // See https://github.com/facebook/docusaurus/issues/7241
+    _jsx("span", { className: className, children: children }));
+}
+function BreadcrumbsItem({ children, active, index, addMicrodata, }) {
+    const styles = useEuiMemoizedStyles(getItemStyles);
+    return (_jsxs("li", { ...(addMicrodata && {
+            itemScope: true,
+            itemProp: 'itemListElement',
+            itemType: 'https://schema.org/ListItem',
+        }), className: clsx('breadcrumbs__item', {
+            'breadcrumbs__item--active': active,
+        }), css: styles.item, children: [children, _jsx("meta", { itemProp: "position", content: String(index + 1) }), !active && _jsx(EuiIcon, { type: "arrowRight", css: styles.icon })] }));
+}
+export default function DocBreadcrumbs() {
+    const breadcrumbs = useSidebarBreadcrumbs();
+    const homePageRoute = useHomePageRoute();
+    const styles = useEuiMemoizedStyles(getStyles);
+    if (!breadcrumbs) {
+        return null;
+    }
+    return (_jsx("nav", { className: clsx(ThemeClassNames.docs.docBreadcrumbs), "aria-label": translate({
+            id: 'theme.docs.breadcrumbs.navAriaLabel',
+            message: 'Breadcrumbs',
+            description: 'The ARIA label for the breadcrumbs',
+        }), css: styles.breadcrumbsContainer, children: _jsxs("ul", { className: "breadcrumbs", itemScope: true, itemType: "https://schema.org/BreadcrumbList", children: [homePageRoute && _jsx(HomeBreadcrumbItem, {}), breadcrumbs.map((item, idx) => {
+                    const isLast = idx === breadcrumbs.length - 1;
+                    const href = item.type === 'category' && item.linkUnlisted
+                        ? undefined
+                        : item.href;
+                    return (_jsx(BreadcrumbsItem, { active: isLast, index: idx, addMicrodata: !!href, children: _jsx(BreadcrumbsItemLink, { href: href, isLast: isLast, children: item.label }) }, idx));
+                })] }) }));
+}

package/lib/theme/DocItem/Content/index.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import { Props } from '@theme-original/DocItem/Content';
+export default function DocItemContent({ children }: Props): JSX.Element;

package/lib/theme/DocItem/Content/index.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import clsx from 'clsx';
+import { css } from '@emotion/react';
+import { ThemeClassNames } from '@docusaurus/theme-common';
+import { useDoc } from '@docusaurus/plugin-content-docs/client';
+import MDXContent from '@theme-original/MDXContent';
+import { EuiHorizontalRule, useEuiMemoizedStyles, } from '@elastic/eui';
+import Heading from '../../MDXComponents/Heading';
+/**
+ Title can be declared inside md content or declared through
+ front matter and added manually. To make both cases consistent,
+ the added title is added under the same div.markdown block
+ See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
+
+ We render a "synthetic title" if:
+ - user doesn't ask to hide it with front matter
+ - the markdown content does not already contain a top-level h1 heading
+*/
+function useSyntheticTitle() {
+    const { metadata, frontMatter, contentTitle } = useDoc();
+    const shouldRender = !frontMatter.hide_title && typeof contentTitle === 'undefined';
+    if (!shouldRender) {
+        return null;
+    }
+    return metadata.title;
+}
+const getContentStyles = ({ euiTheme }) => {
+    return {
+        header: css `
+      // required specificity to override docusaurus styles
+      & > h1.euiTitle {
+        --ifm-h1-font-size: var(--eui-font-size-xxl);
+        --ifm-h1-vertical-rhythm-bottom: 1.2;
+
+        line-height: 2.8rem;
+      }
+    `,
+    };
+};
+export default function DocItemContent({ children }) {
+    const syntheticTitle = useSyntheticTitle();
+    const styles = useEuiMemoizedStyles(getContentStyles);
+    return (_jsxs("div", { className: clsx(ThemeClassNames.docs.docMarkdown, 'markdown'), children: [syntheticTitle && (_jsxs(_Fragment, { children: [_jsx("header", { css: styles.header, children: _jsx(Heading, { as: "h1", children: syntheticTitle }) }), _jsx(EuiHorizontalRule, {})] })), _jsx(MDXContent, { children: children })] }));
+}

package/lib/theme/DocItem/Footer/index.d.ts

@@ -0,0 +1,2 @@
+import { JSX } from 'react';
+export default function DocItemFooter(): JSX.Element | null;

package/lib/theme/DocItem/Footer/index.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import clsx from 'clsx';
+import { ThemeClassNames } from '@docusaurus/theme-common';
+import { useDoc } from '@docusaurus/plugin-content-docs/client';
+import TagsListInline from '@theme-original/TagsListInline';
+import EditMetaRow from '@theme-original/EditMetaRow';
+export default function DocItemFooter() {
+    const { metadata } = useDoc();
+    const { editUrl, lastUpdatedAt, lastUpdatedBy, tags } = metadata;
+    const canDisplayTagsRow = tags.length > 0;
+    const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
+    const canDisplayFooter = canDisplayTagsRow || canDisplayEditMetaRow;
+    if (!canDisplayFooter) {
+        return null;
+    }
+    return (_jsxs("footer", { className: clsx(ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg'), children: [canDisplayTagsRow && (_jsx("div", { className: clsx('row margin-top--sm', ThemeClassNames.docs.docFooterTagsRow), children: _jsx("div", { className: "col", children: _jsx(TagsListInline, { tags: tags }) }) })), canDisplayEditMetaRow && (_jsx(EditMetaRow, { className: clsx('margin-top--sm', ThemeClassNames.docs.docFooterEditMetaRow), editUrl: editUrl, lastUpdatedAt: lastUpdatedAt, lastUpdatedBy: lastUpdatedBy }))] }));
+}

package/lib/theme/DocItem/Layout/index.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import * as Props from '@theme-original/DocItem/Layout';
+export default function DocItemLayout({ children }: typeof Props): JSX.Element;

package/lib/theme/DocItem/Layout/index.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { EuiHorizontalRule } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { useWindowSize } from '@docusaurus/theme-common';
+import { useDoc } from '@docusaurus/plugin-content-docs/client';
+import DocItemPaginator from '@theme-original/DocItem/Paginator';
+import ContentVisibility from '@theme-original/ContentVisibility';
+import DocVersionBanner from '@theme-original/DocVersionBanner';
+import DocVersionBadge from '@theme-original/DocVersionBadge';
+import DocBreadcrumbs from '../../DocBreadcrumbs';
+import DocItemTOCMobile from '../TOC/Mobile';
+import DocItemTOCDesktop from '../TOC/Desktop';
+import DocItemContent from '../Content';
+import DocItemFooter from '../Footer';
+// At 1280px there's enough space to show the TOC,
+// until then we show the mobile/collapsible TOC
+const BREAKPOINT_TOC = 1280;
+// converted from css modules to emotion
+const styles = {
+    docItemContainer: css `
+    & header + *,
+    & article > *:first-child {
+      margin-top: 0;
+    }
+  `,
+    docItemRow: css `
+    justify-content: center;
+  `,
+    docItemCol: css `
+    @media (min-width: 997px) {
+      font-size: 100%;
+      max-width: 94ch;
+      /* Ensure TOC won't wrap */
+      overflow-x: auto;
+    }
+  `,
+    docItemTOCDesktopContainter: css `
+    display: none;
+
+    @media (min-width: ${BREAKPOINT_TOC}px) {
+      display: block;
+    }
+  `,
+    docItemTOCMobileContainter: css `
+    @media (min-width: ${BREAKPOINT_TOC}px) {
+      display: none;
+    }
+  `,
+};
+/**
+ * Decide if the toc should be rendered, on mobile or desktop viewports
+ */
+function useDocTOC() {
+    const { frontMatter, toc } = useDoc();
+    const windowSize = useWindowSize();
+    const hidden = frontMatter.hide_table_of_contents ?? false;
+    const canRender = !hidden && toc.length > 0;
+    // Hide/show for TOC elements is handled by media queries
+    const mobile = canRender ? _jsx(DocItemTOCMobile, {}) : undefined;
+    const desktop = canRender ? _jsx(DocItemTOCDesktop, {}) : undefined;
+    return {
+        hidden,
+        mobile,
+        desktop,
+    };
+}
+export default function DocItemLayout({ children }) {
+    const docTOC = useDocTOC();
+    const { metadata } = useDoc();
+    return (_jsxs("div", { className: "row", css: styles.docItemRow, children: [_jsxs("div", { className: "col", css: styles.docItemCol, children: [_jsx(ContentVisibility, { metadata: metadata }), _jsx(DocVersionBanner, {}), _jsxs("div", { css: styles.docItemContainer, children: [_jsxs("article", { children: [_jsx(DocBreadcrumbs, {}), _jsx(DocVersionBadge, {}), _jsx("div", { css: styles.docItemTOCMobileContainter, children: docTOC.mobile }), _jsx(DocItemContent, { children: children }), _jsx(DocItemFooter, {})] }), _jsx(EuiHorizontalRule, { margin: "xl" }), _jsx(DocItemPaginator, {})] })] }), docTOC.desktop && (_jsx("div", { className: "col col--3", css: styles.docItemTOCDesktopContainter, children: docTOC.desktop }))] }));
+}

package/lib/theme/DocItem/Metadata/index.d.ts

@@ -0,0 +1,2 @@
+import { JSX } from 'react';
+export default function DocItemMetadata(): JSX.Element;

package/lib/theme/DocItem/Metadata/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { PageMetadata } from '@docusaurus/theme-common';
+import { useDoc } from '@docusaurus/plugin-content-docs/client';
+export default function DocItemMetadata() {
+    const { metadata, frontMatter, assets } = useDoc();
+    return (_jsx(PageMetadata, { title: metadata.title, description: metadata.description, keywords: frontMatter.keywords, image: assets.image ?? frontMatter.image }));
+}

package/lib/theme/DocItem/Paginator/index.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+/**
+ * This extra component is needed, because <DocPaginator> should remain generic.
+ * DocPaginator is used in non-docs contexts too: generated-index pages...
+ */
+export default function DocItemPaginator(): JSX.Element;

package/lib/theme/DocItem/Paginator/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useDoc } from '@docusaurus/plugin-content-docs/client';
+import DocPaginator from '@theme-original/DocPaginator';
+/**
+ * This extra component is needed, because <DocPaginator> should remain generic.
+ * DocPaginator is used in non-docs contexts too: generated-index pages...
+ */
+export default function DocItemPaginator() {
+    const { metadata } = useDoc();
+    return _jsx(DocPaginator, { previous: metadata.previous, next: metadata.next });
+}

package/lib/theme/DocItem/TOC/Desktop/index.d.ts

@@ -0,0 +1,2 @@
+import { JSX } from 'react';
+export default function DocItemTOCDesktop(): JSX.Element;

package/lib/theme/DocItem/TOC/Desktop/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { ThemeClassNames } from '@docusaurus/theme-common';
+import { useDoc } from '@docusaurus/plugin-content-docs/client';
+import TOC from '@theme-original/TOC';
+export default function DocItemTOCDesktop() {
+    const { toc, frontMatter } = useDoc();
+    return (_jsx(TOC, { toc: toc, minHeadingLevel: frontMatter.toc_min_heading_level, maxHeadingLevel: frontMatter.toc_max_heading_level, className: ThemeClassNames.docs.docTocDesktop }));
+}

package/lib/theme/DocItem/TOC/Mobile/index.d.ts

@@ -0,0 +1,2 @@
+import { JSX } from 'react';
+export default function DocItemTOCMobile(): JSX.Element;

package/lib/theme/DocItem/TOC/Mobile/index.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import { ThemeClassNames } from '@docusaurus/theme-common';
+import { useDoc } from '@docusaurus/plugin-content-docs/client';
+import TOCCollapsible from '@theme-original/TOCCollapsible';
+// converted from css modules to emotion
+const tocStyles = {
+    tocMobile: css `
+    @media print {
+      display: none;
+    }
+  `,
+};
+export default function DocItemTOCMobile() {
+    const { toc, frontMatter } = useDoc();
+    return (_jsx(TOCCollapsible, { toc: toc, minHeadingLevel: frontMatter.toc_min_heading_level, maxHeadingLevel: frontMatter.toc_max_heading_level, className: ThemeClassNames.docs.docTocMobile, css: tocStyles.tocMobile }));
+}

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

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import type { Props } from '@theme/DocItem';
+export default function DocItem(props: Props): JSX.Element;

package/lib/theme/DocItem/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { HtmlClassNameProvider } from '@docusaurus/theme-common';
+import { DocProvider } from '@docusaurus/plugin-content-docs/client';
+import DocItemMetadata from './Metadata';
+import DocItemLayout from './Layout';
+export default function DocItem(props) {
+    const docHtmlClassName = `docs-doc-id-${props.content.metadata.id}`;
+    const MDXComponent = props.content;
+    return (_jsx(DocProvider, { content: props.content, children: _jsxs(HtmlClassNameProvider, { className: docHtmlClassName, children: [_jsx(DocItemMetadata, {}), _jsx(DocItemLayout, { children: _jsx(MDXComponent, {}) })] }) }));
+}

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

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import type { Props } from '@theme-original/DocPaginator';
+export default function DocPaginator(props: Props): JSX.Element;

package/lib/theme/DocPaginator/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import Translate, { translate } from '@docusaurus/Translate';
+import PaginatorNavLink from '@theme-original/PaginatorNavLink';
+const styles = {
+    pagination: css `
+    // docusaurus reset, we add spacing via the
+    // horizontal rule in Layout instead
+    margin-top: 0;
+  `,
+};
+export default function DocPaginator(props) {
+    const { previous, next } = props;
+    return (_jsxs("nav", { className: "pagination-nav docusaurus-mt-lg", css: styles.pagination, "aria-label": translate({
+            id: 'theme.docs.paginator.navAriaLabel',
+            message: 'Docs pages',
+            description: 'The ARIA label for the docs pagination',
+        }), children: [previous && (_jsx(PaginatorNavLink, { ...previous, subLabel: _jsx(Translate, { id: "theme.docs.paginator.previous", description: "The label used to navigate to the previous doc", children: "Previous" }) })), next && (_jsx(PaginatorNavLink, { ...next, subLabel: _jsx(Translate, { id: "theme.docs.paginator.next", description: "The label used to navigate to the next doc", children: "Next" }), isNext: true }))] }));
+}

package/lib/theme/DocRoot/Layout/Main/index.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import type { Props } from '@theme-original/DocRoot/Layout/Main';
+export default function DocRootLayoutMain({ hiddenSidebarContainer, children, }: Props): JSX.Element;

package/lib/theme/DocRoot/Layout/Main/index.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import clsx from 'clsx';
+import { css } from '@emotion/react';
+import { useDocsSidebar } from '@docusaurus/plugin-content-docs/client';
+// converted from css modules to Emotion
+const styles = {
+    docMainContainer: css `
+    display: flex;
+    width: 100%;
+
+    @media (min-width: 997px) {
+      flex-grow: 1;
+      max-width: calc(100% - var(--doc-sidebar-width));
+    }
+  `,
+    docMainContainerEnhanced: css `
+    @media (min-width: 997px) {
+      max-width: calc(100% - var(--doc-sidebar-hidden-width));
+    }
+  `,
+    docItemWrapperEnhanced: css `
+    @media (min-width: 997px) {
+      max-width: calc(
+        var(--ifm-container-width) + var(--doc-sidebar-width)
+      ) !important;
+    }
+  `,
+};
+export default function DocRootLayoutMain({ hiddenSidebarContainer, children, }) {
+    const sidebar = useDocsSidebar();
+    return (_jsx("main", { className: clsx(styles.docMainContainer), css: [
+            styles.docMainContainer,
+            (hiddenSidebarContainer || !sidebar) && styles.docMainContainerEnhanced,
+        ], children: _jsx("div", { className: "container padding-top--md padding-bottom--lg", css: [hiddenSidebarContainer && styles.docItemWrapperEnhanced], children: children }) }));
+}

package/lib/theme/DocRoot/Layout/Sidebar/index.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import type { Props } from '@theme-original/DocRoot/Layout/Sidebar';
+export default function DocRootLayoutSidebar({ sidebar, hiddenSidebarContainer, setHiddenSidebarContainer, }: Props): JSX.Element;

package/lib/theme/DocRoot/Layout/Sidebar/index.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import React, { useState, useCallback } from 'react';
+import clsx from 'clsx';
+import { css } from '@emotion/react';
+import { prefersReducedMotion, ThemeClassNames, } from '@docusaurus/theme-common';
+import { useDocsSidebar } from '@docusaurus/plugin-content-docs/client';
+import { useLocation } from '@docusaurus/router';
+import DocSidebar from '@theme-original/DocSidebar';
+import ExpandButton from '@theme-original/DocRoot/Layout/Sidebar/ExpandButton';
+// converted from css modules to Emotion
+const styles = {
+    docSidebarContainer: css `
+    display: none;
+
+    @media (min-width: 997px) {
+      // ensure scrolling still works
+      display: flex;
+      width: var(--doc-sidebar-width);
+      margin-top: calc(-1 * var(--ifm-navbar-height));
+      border-right: 1px solid var(--ifm-toc-border-color);
+      will-change: width;
+      transition: width var(--ifm-transition-fast) ease;
+      clip-path: inset(0);
+    }
+
+    .theme-doc-sidebar-menu.menu__list {
+      padding-inline-end: var(--eui-size-s);
+    }
+  `,
+    docSidebarContainerHidden: css `
+    width: var(--doc-sidebar-hidden-width);
+    cursor: pointer;
+  `,
+    sidebarViewport: css `
+    top: 0;
+    position: sticky;
+    height: 100%;
+    max-height: 100vh;
+  `,
+};
+// Reset sidebar state when sidebar changes
+// Use React key to unmount/remount the children
+// See https://github.com/facebook/docusaurus/issues/3414
+function ResetOnSidebarChange({ children }) {
+    const sidebar = useDocsSidebar();
+    return (_jsx(React.Fragment, { children: children }, sidebar?.name ?? 'noSidebar'));
+}
+export default function DocRootLayoutSidebar({ sidebar, hiddenSidebarContainer, setHiddenSidebarContainer, }) {
+    const { pathname } = useLocation();
+    const [hiddenSidebar, setHiddenSidebar] = useState(false);
+    const toggleSidebar = useCallback(() => {
+        if (hiddenSidebar) {
+            setHiddenSidebar(false);
+        }
+        // onTransitionEnd won't fire when sidebar animation is disabled
+        // fixes https://github.com/facebook/docusaurus/issues/8918
+        if (!hiddenSidebar && prefersReducedMotion()) {
+            setHiddenSidebar(true);
+        }
+        setHiddenSidebarContainer((value) => !value);
+    }, [setHiddenSidebarContainer, hiddenSidebar]);
+    return (_jsx("aside", { className: clsx(ThemeClassNames.docs.docSidebarContainer, styles.docSidebarContainer.name // adding the name here to preserve the functionality of the class check further down
+        ), css: [
+            styles.docSidebarContainer,
+            hiddenSidebarContainer && styles.docSidebarContainerHidden,
+        ], onTransitionEnd: (e) => {
+            if (!e.currentTarget.classList.contains(styles.docSidebarContainer.name)) {
+                return;
+            }
+            if (hiddenSidebarContainer) {
+                setHiddenSidebar(true);
+            }
+        }, children: _jsx(ResetOnSidebarChange, { children: _jsxs("div", { className: clsx(hiddenSidebar && 'sidebarViewportHidden'), css: styles.sidebarViewport, children: [_jsx(DocSidebar, { sidebar: sidebar, path: pathname, onCollapse: toggleSidebar, isHidden: hiddenSidebar }), hiddenSidebar && _jsx(ExpandButton, { toggleSidebar: toggleSidebar })] }) }) }));
+}

package/lib/theme/DocRoot/Layout/index.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import type { Props } from '@theme-original/DocRoot/Layout';
+export default function DocRootLayout({ children }: Props): JSX.Element;

package/lib/theme/DocRoot/Layout/index.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { useEffect, useState } from 'react';
+import { css } from '@emotion/react';
+import { useDocsSidebar } from '@docusaurus/plugin-content-docs/client';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import BackToTopButton from '@theme-original/BackToTopButton';
+import DocRootLayoutSidebar from '@theme-original/DocRoot/Layout/Sidebar';
+import DocRootLayoutMain from './Main';
+// converted from css modules to Emotion
+const styles = {
+    docRoot: css `
+    display: flex;
+    width: 100%;
+  `,
+    docsWrapper: css `
+    display: flex;
+    flex: 1 0 auto;
+  `,
+};
+export default function DocRootLayout({ children }) {
+    const isBrowser = useIsBrowser();
+    const sidebar = useDocsSidebar();
+    const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
+    // Replicate browser hash scroll behavior to trigger it after the MDX content
+    // is rendered. Timeout = 0 should do the job here just fine as the effect
+    // will get executed at next render cycle when all elements are (hopefully)
+    // already in the DOM.
+    useEffect(() => {
+        if (!isBrowser) {
+            return;
+        }
+        if (window.location.hash) {
+            setTimeout(() => {
+                const element = document.getElementById(window.location.hash.substring(1));
+                element?.scrollIntoView(true);
+            }, 100);
+        }
+    }, [isBrowser]);
+    return (_jsxs("div", { css: styles.docsWrapper, children: [_jsx(BackToTopButton, {}), _jsxs("div", { css: styles.docRoot, children: [sidebar && (_jsx(DocRootLayoutSidebar, { sidebar: sidebar.items, hiddenSidebarContainer: hiddenSidebarContainer, setHiddenSidebarContainer: setHiddenSidebarContainer })), _jsx(DocRootLayoutMain, { hiddenSidebarContainer: hiddenSidebarContainer, children: children })] })] }));
+}

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

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import type { Props } from '@theme-original/DocSidebarItem/Category';
+export default function DocSidebarItemCategory({ item, onItemClick, activePath, level, index, ...props }: Props): JSX.Element;