@elastic/eui-docusaurus-theme 2.0.0

package/lib/theme/MDXComponents/TableHeader.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { EuiTableHeader } from '@elastic/eui';
+export const TableHeader = ({ children, }) => (_jsx(EuiTableHeader, { wrapWithTableRow: false, children: children }));

package/lib/theme/MDXComponents/TableHeaderCell.d.ts

@@ -0,0 +1,2 @@
+import { JSX, ThHTMLAttributes } from 'react';
+export declare const TableHeaderCell: ({ children, }: ThHTMLAttributes<HTMLTableCellElement>) => JSX.Element;

package/lib/theme/MDXComponents/TableHeaderCell.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { EuiTableHeaderCell, EuiText } from '@elastic/eui';
+export const TableHeaderCell = ({ children, }) => (_jsx(EuiTableHeaderCell, { children: _jsx(EuiText, { size: "m", component: "span", children: children }) }));

package/lib/theme/MDXComponents/TableRow.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes, JSX } from 'react';
+export declare const TableRow: ({ children, }: HTMLAttributes<HTMLTableRowElement>) => JSX.Element;

package/lib/theme/MDXComponents/TableRow.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { EuiTableRow } from '@elastic/eui';
+export const TableRow = ({ children, }) => (_jsx(EuiTableRow, { children: children }));

package/lib/theme/MDXComponents/UnorderedList.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export declare const UnorderedList: ({ children, ...restProps }: HTMLAttributes<HTMLUListElement>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/theme/MDXComponents/UnorderedList.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useEuiMemoizedStyles } from '@elastic/eui';
+import { css } from '@emotion/react';
+const getUnorderedListStyles = ({ euiTheme }) => css `
+  margin-inline-start: ${euiTheme.size.l};
+  list-style: disc;
+`;
+export const UnorderedList = ({ children, ...restProps }) => {
+    const styles = useEuiMemoizedStyles(getUnorderedListStyles);
+    return (_jsx("ul", { ...restProps, css: styles, children: children }));
+};

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

@@ -0,0 +1,2 @@
+declare const MDXComponents: any;
+export default MDXComponents;

package/lib/theme/MDXComponents/index.js

@@ -0,0 +1,46 @@
+/*
+ * 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 OriginalMDXComponents from '@theme-init/MDXComponents';
+import { Badge, Demo, DemoSource, FigmaEmbed, Guideline, GuidelineText, Icon, PropTable, } from '../../components';
+import { ListItem } from './ListItem';
+import { Blockquote } from './Blockquote';
+import { Paragraph } from './Paragraph';
+import { UnorderedList } from './UnorderedList';
+import { OrderedList } from './OrderedList';
+import { Table } from './Table';
+import { TableBody } from './TableBody';
+import { TableHeader } from './TableHeader';
+import { TableHeaderCell } from './TableHeaderCell';
+import { TableRow } from './TableRow';
+import { TableDataCell } from './TableDataCell';
+const MDXComponents = {
+    ...OriginalMDXComponents,
+    // Base content components
+    p: Paragraph,
+    li: ListItem,
+    ul: UnorderedList,
+    ol: OrderedList,
+    blockquote: Blockquote,
+    // Tables
+    table: Table,
+    tbody: TableBody,
+    thead: TableHeader,
+    tr: TableRow,
+    th: TableHeaderCell,
+    td: TableDataCell,
+    // Custom components
+    Badge,
+    Demo,
+    DemoSource,
+    FigmaEmbed,
+    Guideline,
+    GuidelineText,
+    Icon,
+    PropTable,
+};
+export default MDXComponents;

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

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import type MDXContentType from '@theme-init/MDXContent';
+import type { WrapperProps } from '@docusaurus/types';
+type Props = WrapperProps<typeof MDXContentType>;
+declare const MDXContent: (props: Props) => JSX.Element;
+export default MDXContent;

package/lib/theme/MDXContent/index.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import OriginalMDXContent from '@theme-init/MDXContent';
+const MDXContent = (props) => (_jsx("div", { "data-search-children": true, children: _jsx(OriginalMDXContent, { ...props }) }));
+export default MDXContent;

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

@@ -0,0 +1,7 @@
+import { JSX } from 'react';
+import { VersionSwitcherProps } from '../../../components/version_switcher';
+type Props = {
+    versionSwitcherOptions?: VersionSwitcherProps;
+};
+export default function NavbarContent({ versionSwitcherOptions, }: Props): JSX.Element;
+export {};

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

@@ -0,0 +1,149 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { css, Global } from '@emotion/react';
+import { useThemeConfig, ErrorCauseBoundary } from '@docusaurus/theme-common';
+import { splitNavbarItems, useNavbarMobileSidebar, } from '@docusaurus/theme-common/internal';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import { useLocation } from '@docusaurus/router';
+import NavbarItem from '@theme-original/NavbarItem';
+import NavbarColorModeToggle from '@theme-original/Navbar/ColorModeToggle';
+import SearchBar from '@theme-original/SearchBar';
+import NavbarMobileSidebarToggle from '@theme-original/Navbar/MobileSidebar/Toggle';
+import NavbarLogo from '@theme-original/Navbar/Logo';
+import NavbarSearch from '@theme-original/Navbar/Search';
+import { euiFocusRing, euiTextTruncate, useEuiMemoizedStyles, } from '@elastic/eui';
+import { euiFormControlText, euiFormVariables,
+// @ts-ignore - reusing form styles as we don't have access to the plugin component yet
+ } from '@elastic/eui/lib/components/form/form.styles';
+import { VersionSwitcher, } from '../../../components/version_switcher';
+import { HighContrastModeToggle } from '../../../components/high_contrast_mode_toggle';
+const DOCS_PATH = '/docs';
+const placeHolderStyles = (content) => `
+  &::-webkit-input-placeholder { ${content} }
+  &::-moz-placeholder { ${content} }
+  &:-moz-placeholder { ${content} }
+  &::placeholder { ${content} }
+`;
+const getStyles = (euiThemeContext) => {
+    const { euiTheme } = euiThemeContext;
+    const form = euiFormVariables(euiThemeContext);
+    const iconColor = encodeURIComponent(euiTheme.colors.text);
+    return {
+        navbarItems: css `
+      --ifm-navbar-item-padding-horizontal: 0;
+      --ifm-navbar-item-padding-vertical: 0;
+
+      .navbar__item,
+      [class*='colorModeToggle'] {
+        @media (max-width: 996px) {
+          display: none;
+        }
+      }
+
+      .navbar__toggle {
+        border-radius: ${euiTheme.border.radius.small};
+
+        &:hover {
+          background-color: var(--ifm-color-emphasis-200);
+          color: currentColor;
+        }
+      }
+    `,
+        navbarItemsLeft: css `
+      gap: ${euiTheme.size.s};
+
+      @media (min-width: 997px) {
+        gap: ${euiTheme.size.l};
+      }
+
+      .navbar__link {
+        ${euiTextTruncate()}
+      }
+    `,
+        navbarItemsRight: css `
+      gap: ${euiTheme.size.s};
+    `,
+        actions: css `
+      @media (max-width: 996px) {
+        display: none;
+      }
+    `,
+        search: css `
+      .navbar__search-input {
+        // TODO: update search input styles or try to use EUI component
+        --ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path fill="${iconColor}" d="M11.2709852,11.9779932 L15.14275,15.85075 C15.24075,15.94775 15.36875,15.99675 15.49675,15.99675 C15.62475,15.99675 15.75275,15.94775 15.85075,15.85075 C16.04575,15.65475 16.04575,15.33875 15.85075,15.14275 L12.2861494,11.5790625 C14.6668581,8.83239759 14.5527289,4.65636993 11.9437617,2.04675 C9.21444459,-0.68225 4.77355568,-0.68225 2.04623804,2.04675 C-0.682079347,4.77575 -0.682079347,9.21775 2.04623804,11.94675 C3.36890712,13.26875 5.12646738,13.99675 6.99499989,13.99675 C7.27093085,13.99675 7.49487482,13.77275 7.49487482,13.49675 C7.49487482,13.22075 7.27093085,12.99675 6.99499989,12.99675 C5.39240085,12.99675 3.88677755,12.37275 2.7530612,11.23975 C0.414646258,8.89975 0.414646258,5.09375 2.7530612,2.75375 C5.09047639,0.41375 8.89552438,0.41475 11.2369386,2.75375 C13.5753535,5.09375 13.5753535,8.89975 11.2369386,11.23975 C11.0419873,11.43475 11.0419873,11.75175 11.2369386,11.94675 C11.2479153,11.9577858 11.2592787,11.9682002 11.2709852,11.9779932 Z" /></svg>');
+        --ifm-navbar-search-input-background-color: ${form.backgroundColor};
+        --ifm-navbar-search-input-color: ${euiTheme.colors.text};
+
+        ${euiFormControlText(euiThemeContext)};
+        block-size: ${form.controlCompressedHeight};
+        padding-block: ${form.controlCompressedPadding};
+
+        border: ${euiTheme.border.width.thin} solid ${form.borderColor};
+        border-radius: ${form.controlBorderRadius};
+
+        ${placeHolderStyles(`
+          color: ${form.controlPlaceholderText};
+          opacity: 1;
+        `)}
+
+        ${euiFocusRing(euiThemeContext, 'outset', { color: 'primary' })}
+
+        &:disabled {
+          border-color: ${form.borderDisabledColor};
+          background-color: ${form.backgroundDisabledColor};
+        }
+
+        &[readOnly] {
+          background-color: ${form.backgroundReadOnlyColor};
+        }
+
+        @media (min-width: 400px) {
+          inline-size: 100%;
+          max-inline-size: 25rem;
+        }
+
+        @media (min-width: 997px) {
+          min-inline-size: 15rem;
+        }
+
+        @media (min-width: 1200px) {
+          min-inline-size: 25rem;
+        }
+      }
+    `,
+        versionSwitcher: css `
+      @media (max-width: 996px) {
+        display: none;
+      }
+    `,
+        themeSwitcher: css `
+      @media (max-width: 996px) {
+        display: none;
+      }
+    `,
+    };
+};
+function useNavbarItems() {
+    // TODO temporary casting until ThemeConfig type is improved
+    return useThemeConfig().navbar.items;
+}
+function NavbarItems({ items }) {
+    return (_jsx(_Fragment, { children: items.map((item, i) => (_jsx(ErrorCauseBoundary, { onError: (error) => new Error(`A theme navbar item failed to render.
+Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:
+${JSON.stringify(item, null, 2)}`, { cause: error }), children: _jsx(NavbarItem, { ...item }) }, i))) }));
+}
+function NavbarContentLayout({ left, right, }) {
+    const styles = useEuiMemoizedStyles(getStyles);
+    return (_jsxs("div", { className: "navbar__inner", css: styles.navbarItems, children: [_jsx("div", { className: "navbar__items", css: styles.navbarItemsLeft, children: left }), _jsx("div", { className: "navbar__items navbar__items--right", css: styles.navbarItemsRight, children: right })] }));
+}
+export default function NavbarContent({ versionSwitcherOptions, }) {
+    const isBrowser = useIsBrowser();
+    const mobileSidebar = useNavbarMobileSidebar();
+    const location = useLocation();
+    const items = useNavbarItems();
+    const [leftItems, rightItems] = splitNavbarItems(items);
+    const styles = useEuiMemoizedStyles(getStyles);
+    const searchBarItem = items.find((item) => item.type === 'search');
+    const isRoot = !location?.pathname.includes(DOCS_PATH);
+    return (_jsxs(_Fragment, { children: [_jsx(Global, { styles: styles.search }), _jsx(NavbarContentLayout, { left: _jsxs(_Fragment, { children: [!mobileSidebar.disabled && _jsx(NavbarMobileSidebarToggle, {}), _jsx(NavbarLogo, {}), _jsx("div", { css: styles.versionSwitcher, children: isBrowser && versionSwitcherOptions && (_jsx(VersionSwitcher, { ...versionSwitcherOptions })) }), _jsx(NavbarItems, { items: leftItems })] }), right: _jsxs(_Fragment, { children: [!searchBarItem && !isRoot && (_jsx(NavbarSearch, { children: _jsx(SearchBar, {}) })), _jsx(NavbarColorModeToggle, { className: "colorModeToggle" }), isBrowser && (_jsx("div", { css: styles.themeSwitcher, children: _jsx(HighContrastModeToggle, {}) })), _jsx(NavbarItems, { items: rightItems })] }) })] }));
+}

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

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import type { Props } from '@theme-original/Navbar/Layout';
+import { VersionSwitcherProps } from '../../../components/version_switcher';
+export default function NavbarLayout({ children, versionSwitcherOptions, }: Props & {
+    versionSwitcherOptions?: VersionSwitcherProps;
+}): JSX.Element;

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

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import clsx from 'clsx';
+import { css } from '@emotion/react';
+import { useThemeConfig } from '@docusaurus/theme-common';
+import { useHideableNavbar, useNavbarMobileSidebar, } from '@docusaurus/theme-common/internal';
+import { translate } from '@docusaurus/Translate';
+import { useEuiMemoizedStyles } from '@elastic/eui';
+import NavbarMobileSidebar from '../MobileSidebar';
+const getStyles = ({ euiTheme }) => {
+    return {
+        navbar: css `
+      --ifm-navbar-padding-horizontal: ${euiTheme.size.m};
+      --ifm-navbar-padding-vertical: ${euiTheme.size.s};
+      --ifm-navbar-item-padding-horizontal: 0;
+      --ifm-navbar-item-padding-vertical: 0;
+
+      --ifm-navbar-background-color: ${euiTheme.colors.textInverse};
+
+      flex-grow: 0;
+      flex-shrink: 0;
+
+      &,
+      .navbar-sidebar__brand {
+        border-block-end: ${euiTheme.border.thin};
+        box-shadow: none;
+      }
+    `,
+        navbarHideable: css `
+      transition: transform var(--ifm-transition-fast) ease;
+    `,
+        navbarHidden: css `
+      transform: translate3d(0, calc(-100% - 2px), 0);
+    `,
+    };
+};
+function NavbarBackdrop(props) {
+    return (_jsx("div", { role: "presentation", ...props, className: clsx('navbar-sidebar__backdrop', props.className) }));
+}
+export default function NavbarLayout({ children, versionSwitcherOptions, }) {
+    const { navbar: { hideOnScroll, style }, } = useThemeConfig();
+    const mobileSidebar = useNavbarMobileSidebar();
+    const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll);
+    const styles = useEuiMemoizedStyles(getStyles);
+    return (_jsxs("nav", { ref: navbarRef, "aria-label": translate({
+            id: 'theme.NavBar.navAriaLabel',
+            message: 'Main',
+            description: 'The ARIA label for the main navigation',
+        }), className: clsx('navbar', 'navbar--fixed-top', {
+            'navbar--dark': style === 'dark',
+            'navbar--primary': style === 'primary',
+            'navbar-sidebar--show': mobileSidebar.shown,
+        }), css: [
+            styles.navbar,
+            hideOnScroll && [
+                styles.navbarHideable,
+                !isNavbarVisible && styles.navbarHidden,
+            ],
+        ], children: [children, _jsx(NavbarBackdrop, { onClick: mobileSidebar.toggle }), _jsx(NavbarMobileSidebar, { versionSwitcherOptions: versionSwitcherOptions })] }));
+}

package/lib/theme/Navbar/MobileSidebar/Header/index.d.ts

@@ -0,0 +1,7 @@
+import { JSX } from 'react';
+import { VersionSwitcherProps } from '../../../../components/version_switcher';
+type Props = {
+    versionSwitcherOptions?: VersionSwitcherProps;
+};
+export default function NavbarMobileSidebarHeader({ versionSwitcherOptions, }: Props): JSX.Element;
+export {};

package/lib/theme/Navbar/MobileSidebar/Header/index.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal';
+import { translate } from '@docusaurus/Translate';
+import NavbarColorModeToggle from '@theme-original/Navbar/ColorModeToggle';
+import NavbarLogo from '@theme-original/Navbar/Logo';
+import { EuiIcon, useEuiMemoizedStyles } from '@elastic/eui';
+import { css } from '@emotion/react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import { VersionSwitcher, } from '../../../../components/version_switcher';
+import { HighContrastModeToggle } from '../../../../components/high_contrast_mode_toggle';
+const getStyles = ({ euiTheme }) => ({
+    sidebar: css `
+    gap: ${euiTheme.size.s};
+
+    > :first-child {
+      border-right: ${euiTheme.border.thin};
+    }
+  `,
+    close: css `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: ${euiTheme.size.xl};
+    height: ${euiTheme.size.xl};
+    border-radius: ${euiTheme.border.radius.small};
+
+    &:hover {
+      background-color: var(--ifm-color-emphasis-200);
+      color: currentColor;
+    }
+  `,
+});
+function CloseButton() {
+    const mobileSidebar = useNavbarMobileSidebar();
+    const styles = useEuiMemoizedStyles(getStyles);
+    return (_jsx("button", { type: "button", "aria-label": translate({
+            id: 'theme.docs.sidebar.closeSidebarButtonAriaLabel',
+            message: 'Close navigation bar',
+            description: 'The ARIA label for close button of mobile sidebar',
+        }), className: "clean-btn navbar-sidebar__close", css: styles.close, onClick: () => mobileSidebar.toggle(), children: _jsx(EuiIcon, { type: "cross", size: "l" }) }));
+}
+export default function NavbarMobileSidebarHeader({ versionSwitcherOptions, }) {
+    const isBrowser = useIsBrowser();
+    const styles = useEuiMemoizedStyles(getStyles);
+    return (_jsxs("div", { className: "navbar-sidebar__brand", css: styles.sidebar, children: [_jsx(NavbarLogo, {}), isBrowser && versionSwitcherOptions && (_jsx(VersionSwitcher, { ...versionSwitcherOptions })), _jsx(NavbarColorModeToggle, {}), isBrowser && _jsx(HighContrastModeToggle, {}), _jsx(CloseButton, {})] }));
+}

package/lib/theme/Navbar/MobileSidebar/Layout/index.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import type LayoutType from '@theme-init/Navbar/MobileSidebar/Layout';
+import type { WrapperProps } from '@docusaurus/types';
+type Props = WrapperProps<typeof LayoutType>;
+export default function LayoutWrapper(props: Props): JSX.Element;
+export {};

package/lib/theme/Navbar/MobileSidebar/Layout/index.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import Layout from '@theme-init/Navbar/MobileSidebar/Layout';
+const styles = {
+    mobileSidebar: css `
+    --ifm-navbar-sidebar-width: 100vw;
+
+    @media (min-width: 400px) {
+      --ifm-navbar-sidebar-width: 75vw;
+    }
+
+    @media (min-width: 600px) {
+      --ifm-navbar-sidebar-width: 50vw;
+    }
+
+    .navbar-sidebar__back {
+      font-size: var(--eui-font-size-s);
+      line-height: var(--eui-fline-height-xs);
+      padding-block: var(--eui-size-m);
+      padding-inline: var(--eui-size-s);
+    }
+  `,
+};
+export default function LayoutWrapper(props) {
+    return (_jsx("div", { css: styles.mobileSidebar, children: _jsx(Layout, { ...props }) }));
+}

package/lib/theme/Navbar/MobileSidebar/index.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+import { VersionSwitcherProps } from '../../../components/version_switcher';
+type Props = {
+    versionSwitcherOptions?: VersionSwitcherProps;
+};
+export default function NavbarMobileSidebar({ versionSwitcherOptions, }: Props): ReactNode;
+export {};

package/lib/theme/Navbar/MobileSidebar/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useLockBodyScroll, useNavbarMobileSidebar, } from '@docusaurus/theme-common/internal';
+import NavbarMobileSidebarLayout from '@theme-original/Navbar/MobileSidebar/Layout';
+import NavbarMobileSidebarHeader from './Header';
+import NavbarMobileSidebarPrimaryMenu from '@theme-original/Navbar/MobileSidebar/PrimaryMenu';
+import NavbarMobileSidebarSecondaryMenu from '@theme-original/Navbar/MobileSidebar/SecondaryMenu';
+export default function NavbarMobileSidebar({ versionSwitcherOptions, }) {
+    const mobileSidebar = useNavbarMobileSidebar();
+    useLockBodyScroll(mobileSidebar.shown);
+    if (!mobileSidebar.shouldRender) {
+        return null;
+    }
+    return (_jsx(NavbarMobileSidebarLayout, { header: _jsx(NavbarMobileSidebarHeader, { versionSwitcherOptions: versionSwitcherOptions }), primaryMenu: _jsx(NavbarMobileSidebarPrimaryMenu, {}), secondaryMenu: _jsx(NavbarMobileSidebarSecondaryMenu, {}) }));
+}

package/lib/theme/NavbarItem/DropdownNavbarItem/index.d.ts

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

package/lib/theme/NavbarItem/DropdownNavbarItem/index.js

@@ -0,0 +1,94 @@
+import { createElement as _createElement } from "@emotion/react";
+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 { useState, useRef, useEffect } from 'react';
+import clsx from 'clsx';
+import { css } from '@emotion/react';
+import { isRegexpStringMatch, useCollapsible, Collapsible, } from '@docusaurus/theme-common';
+import { isSamePath, useLocalPathname, } from '@docusaurus/theme-common/internal';
+import NavbarNavLink from '@theme-original/NavbarItem/NavbarNavLink';
+import NavbarItem from '@theme-original/NavbarItem';
+const styles = {
+    dropdownNavbarItemMobile: css `
+    cursor: pointer;
+  `,
+};
+function isItemActive(item, localPathname) {
+    if (isSamePath(item.to, localPathname)) {
+        return true;
+    }
+    if (isRegexpStringMatch(item.activeBaseRegex, localPathname)) {
+        return true;
+    }
+    if (item.activeBasePath && localPathname.startsWith(item.activeBasePath)) {
+        return true;
+    }
+    return false;
+}
+function containsActiveItems(items, localPathname) {
+    return items.some((item) => isItemActive(item, localPathname));
+}
+function DropdownNavbarItemDesktop({ items, position, className, onClick, ...props }) {
+    const dropdownRef = useRef(null);
+    const [showDropdown, setShowDropdown] = useState(false);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (!dropdownRef.current ||
+                dropdownRef.current.contains(event.target)) {
+                return;
+            }
+            setShowDropdown(false);
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener('touchstart', handleClickOutside);
+        document.addEventListener('focusin', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('touchstart', handleClickOutside);
+            document.removeEventListener('focusin', handleClickOutside);
+        };
+    }, [dropdownRef]);
+    return (_jsxs("div", { ref: dropdownRef, className: clsx('navbar__item', 'dropdown', 'dropdown--hoverable', {
+            'dropdown--right': position === 'right',
+            'dropdown--show': showDropdown,
+        }), children: [_jsx(NavbarNavLink, { "aria-haspopup": "true", "aria-expanded": showDropdown, role: "button", 
+                // # hash permits to make the <a> tag focusable in case no link target
+                // See https://github.com/facebook/docusaurus/pull/6003
+                // There's probably a better solution though...
+                href: props.to ? undefined : '#', className: clsx('navbar__link', className), ...props, onClick: props.to ? undefined : (e) => e.preventDefault(), onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        setShowDropdown(!showDropdown);
+                    }
+                }, children: props.children ?? props.label }), _jsx("ul", { className: "dropdown__menu", children: items.map((childItemProps, i) => (_createElement(NavbarItem, { isDropdownItem: true, activeClassName: "dropdown__link--active", ...childItemProps, key: i }))) })] }));
+}
+function DropdownNavbarItemMobile({ items, className, position, // Need to destructure position from props so that it doesn't get passed on.
+onClick, ...props }) {
+    const localPathname = useLocalPathname();
+    const containsActive = containsActiveItems(items, localPathname);
+    const { collapsed, toggleCollapsed, setCollapsed } = useCollapsible({
+        initialState: () => !containsActive,
+    });
+    // Expand/collapse if any item active after a navigation
+    useEffect(() => {
+        if (containsActive) {
+            setCollapsed(!containsActive);
+        }
+    }, [localPathname, containsActive, setCollapsed]);
+    return (_jsxs("li", { className: clsx('menu__list-item', {
+            'menu__list-item--collapsed': collapsed,
+        }), children: [_jsx(NavbarNavLink, { role: "button", className: clsx(styles.dropdownNavbarItemMobile, 'menu__link menu__link--sublist', className), ...props, onClick: (e) => {
+                    e.preventDefault();
+                    toggleCollapsed();
+                }, children: props.children ?? props.label }), _jsx(Collapsible, { lazy: true, as: "ul", className: "menu__list", collapsed: collapsed, children: items.map((childItemProps, i) => (_createElement(NavbarItem, { mobile: true, isDropdownItem: true, onClick: onClick, activeClassName: "menu__link--active", ...childItemProps, key: i }))) })] }));
+}
+export default function DropdownNavbarItem({ mobile = false, ...props }) {
+    const Comp = mobile ? DropdownNavbarItemMobile : DropdownNavbarItemDesktop;
+    return _jsx(Comp, { ...props });
+}

package/lib/theme/NavbarItem/NavbarNavLink.d.ts

@@ -0,0 +1,7 @@
+import { JSX } from 'react';
+import type { Props as NavbarNavLinkProps } from '@theme-original/NavbarItem/NavbarNavLink';
+type Props = NavbarNavLinkProps & {
+    component: string;
+};
+export default function NavbarNavLink({ activeBasePath, activeBaseRegex, to, href, label, html, isDropdownLink, prependBaseUrlToHref, component, ...props }: Props): JSX.Element;
+export {};

package/lib/theme/NavbarItem/NavbarNavLink.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import { isRegexpStringMatch } from '@docusaurus/theme-common';
+import IconExternalLink from '@theme-original/Icon/ExternalLink';
+import { NavbarItem } from '../../components/navbar_item';
+const CUSTOM_LINK_COMPONENT_MAP = {
+    github: {
+        component: NavbarItem,
+        icon: () => (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fill: "currentColor", d: "M8 0C3.58203 0 0 3.67167 0 8.2002C0 11.8238 2.292 14.8969 5.47119 15.981C5.87109 16.0561 6.01709 15.8028 6.01709 15.5866C6.01709 15.3914 6.00977 14.7447 6.00586 14.0601C3.78125 14.5555 3.31103 13.0931 3.31103 13.0931C2.94678 12.1461 2.42284 11.8939 2.42284 11.8939C1.6958 11.3854 2.478 11.3954 2.478 11.3954C3.28122 11.4524 3.70409 12.2402 3.70409 12.2402C4.41797 13.4935 5.57714 13.1311 6.03222 12.9209C6.10494 12.3924 6.31197 12.03 6.54003 11.8258C4.76416 11.6186 2.896 10.9149 2.896 7.77276C2.896 6.87686 3.20802 6.14615 3.71875 5.57207C3.6372 5.36386 3.36181 4.52952 3.79784 3.4009C3.79784 3.4009 4.46875 3.18069 5.99803 4.24175C6.63572 4.05907 7.31981 3.96898 7.99998 3.96597C8.67967 3.96898 9.36423 4.06006 10.0029 4.24274C11.5293 3.18068 12.2012 3.4019 12.2012 3.4019C12.6387 4.53152 12.3633 5.36485 12.2812 5.57207C12.7939 6.14615 13.1035 6.87688 13.1035 7.77276C13.1035 10.9229 11.2324 11.6166 9.4502 11.8198C9.7383 12.0741 9.99317 12.5726 9.99317 13.3373C9.99317 14.4334 9.98242 15.3173 9.98242 15.5876C9.98242 15.8058 10.1279 16.0611 10.5332 15.981C13.71 14.8949 16 11.8218 16 8.2002C16 3.67167 12.418 0 8 0Z" }) })),
+    },
+    changelog: {
+        component: NavbarItem,
+        icon: 'cheer',
+    },
+    figma: {
+        component: NavbarItem,
+        icon: () => (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fill: "currentColor", d: "M12.5 6.5A2.5 2.5 0 0 0 11 2H6.5A2.5 2.5 0 0 0 5 6.5a2.5 2.5 0 0 0 .085 4.063A2.75 2.75 0 1 0 9.5 12.75V10.5a2.5 2.5 0 0 0 3-4Zm0-2A1.5 1.5 0 0 1 11 6H9.5V3H11a1.5 1.5 0 0 1 1.5 1.5ZM5 4.5A1.5 1.5 0 0 1 6.5 3h2v3h-2A1.5 1.5 0 0 1 5 4.5ZM6.5 10a1.5 1.5 0 0 1 0-3h2v3h-2Zm2 2.75A1.75 1.75 0 1 1 6.75 11H8.5v1.75ZM11 10a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z" }) })),
+    },
+};
+export default function NavbarNavLink({ activeBasePath, activeBaseRegex, to, href, label, html, isDropdownLink, prependBaseUrlToHref, component, ...props }) {
+    // TODO all this seems hacky
+    // {to: 'version'} should probably be forbidden, in favor of {to: '/version'}
+    const toUrl = useBaseUrl(to);
+    const activeBaseUrl = useBaseUrl(activeBasePath);
+    const normalizedHref = useBaseUrl(href, { forcePrependBaseUrl: true });
+    const isExternalLink = label && href && !isInternalUrl(href);
+    if (component != null && CUSTOM_LINK_COMPONENT_MAP[component] !== undefined) {
+        const componentData = CUSTOM_LINK_COMPONENT_MAP[component];
+        const Element = componentData.component;
+        return (_jsx(Element, { href: href, title: label, icon: componentData.icon, className: props.className, showLabel: true }));
+    }
+    // Link content is set through html XOR label
+    const linkContentProps = html
+        ? { dangerouslySetInnerHTML: { __html: html } }
+        : {
+            children: (_jsxs(_Fragment, { children: [label, isExternalLink && (_jsx(IconExternalLink, { ...(isDropdownLink && { width: 12, height: 12 }) }))] })),
+        };
+    if (href) {
+        return (_jsx(Link, { href: prependBaseUrlToHref ? normalizedHref : href, ...props, ...linkContentProps }));
+    }
+    return (_jsx(Link, { to: toUrl, isNavLink: true, ...((activeBasePath || activeBaseRegex) && {
+            isActive: (_match, location) => activeBaseRegex
+                ? isRegexpStringMatch(activeBaseRegex, location.pathname)
+                : location.pathname.startsWith(activeBaseUrl),
+        }), ...props, ...linkContentProps }));
+}

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

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