@elastic/eui-docusaurus-theme 2.4.0 → 2.5.0-snapshot.1783939453438

package/lib/components/demo/actions_bar/actions_bar.js

@@ -30,5 +30,7 @@ const getDemoActionsBarStyles = (euiTheme) => {
 };
 export const DemoActionsBar = ({ isSourceOpen, setSourceOpen, activeSource, sources, extraFiles, previewWrapperSource, onClickReloadExample, onClickCopyToClipboard, }) => {
     const styles = useEuiMemoizedStyles(getDemoActionsBarStyles);
-    return (_jsxs(EuiFlexGroup, { alignItems: "center", css: styles.actionsBar, gutterSize: "s", children: [_jsx(EuiButton, { css: styles.button, onClick: () => setSourceOpen(!isSourceOpen), size: "s", color: "text", minWidth: false, children: isSourceOpen ? 'Hide source' : 'Show source' }), extraActions.map((ActionComponent) => (_jsx(ActionComponent, { sources: sources, extraFiles: extraFiles, previewWrapperSource: previewWrapperSource, activeSource: activeSource }, ActionComponent.displayName ?? ActionComponent.name))), _jsx(EuiToolTip, { content: "Copy to clipboard", children: _jsx(EuiButtonIcon, { size: "s", iconType: "copy", color: "text", onClick: onClickCopyToClipboard, "aria-label": "Copy code to clipboard" }) }), _jsx(EuiToolTip, { content: "Reload example", children: _jsx(EuiButtonIcon, { size: "s", iconType: "refresh", color: "text", onClick: onClickReloadExample, "aria-label": "Reload example" }) })] }));
+    const copyToClipboardLabel = 'Copy to clipboard';
+    const reloadExampleLabel = 'Reload example';
+    return (_jsxs(EuiFlexGroup, { alignItems: "center", css: styles.actionsBar, gutterSize: "s", children: [_jsx(EuiButton, { css: styles.button, onClick: () => setSourceOpen(!isSourceOpen), size: "s", color: "text", minWidth: false, children: isSourceOpen ? 'Hide source' : 'Show source' }), extraActions.map((ActionComponent) => (_jsx(ActionComponent, { sources: sources, extraFiles: extraFiles, previewWrapperSource: previewWrapperSource, activeSource: activeSource }, ActionComponent.displayName ?? ActionComponent.name))), _jsx(EuiToolTip, { content: copyToClipboardLabel, disableScreenReaderOutput: true, children: _jsx(EuiButtonIcon, { size: "s", iconType: "copy", color: "text", onClick: onClickCopyToClipboard, "aria-label": copyToClipboardLabel }) }), _jsx(EuiToolTip, { content: reloadExampleLabel, disableScreenReaderOutput: true, children: _jsx(EuiButtonIcon, { size: "s", iconType: "refresh", color: "text", onClick: onClickReloadExample, "aria-label": reloadExampleLabel }) })] }));
 };

package/lib/components/demo/codesandbox/get_parameters.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Encodes sandbox parameters for CodeSandbox's `define` API.
+ */
+export declare const getParameters: (parameters: unknown) => string;

package/lib/components/demo/codesandbox/get_parameters.js

@@ -0,0 +1,17 @@
+/*
+ * 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 { compressToBase64 } from 'lz-string';
+/**
+ * Encodes sandbox parameters for CodeSandbox's `define` API.
+ */
+export const getParameters = (parameters) => {
+    return compressToBase64(JSON.stringify(parameters))
+        .replace(/\+/g, '-')
+        .replace(/\//g, '_')
+        .replace(/=+$/, '');
+};

package/lib/components/demo/codesandbox/open_action.js

@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
  * Side Public License, v 1.
  */
 import { useMemo } from 'react';
-import { getParameters } from 'codesandbox/lib/api/define';
+import { getParameters } from './get_parameters';
 import dedent from 'dedent';
 import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 import { CodeSandboxIcon } from '../../codesandbox_icon';
@@ -115,5 +115,6 @@ export const createOpenInCodeSandboxAction = ({ files = {}, dependencies }) => (
             },
         });
     }, [activeSource, extraFiles, previewWrapperSource]);
-    return (_jsxs("form", { action: "https://codesandbox.io/api/v1/sandboxes/define", method: "POST", target: "_blank", children: [_jsx("input", { type: "hidden", name: "parameters", value: parameters }), _jsx("input", { type: "hidden", name: "query", value: `module=/demo.tsx&view=split` }), _jsx(EuiToolTip, { content: "Open in CodeSandbox", children: _jsx(EuiButtonIcon, { type: "submit", size: "s", iconType: CodeSandboxIcon, color: "text", "aria-label": "Open in CodeSandbox" }) })] }));
+    const openInCodeSandboxLabel = 'Open in CodeSandbox';
+    return (_jsxs("form", { action: "https://codesandbox.io/api/v1/sandboxes/define", method: "POST", target: "_blank", children: [_jsx("input", { type: "hidden", name: "parameters", value: parameters }), _jsx("input", { type: "hidden", name: "query", value: `module=/demo.tsx&view=split` }), _jsx(EuiToolTip, { content: openInCodeSandboxLabel, disableScreenReaderOutput: true, children: _jsx(EuiButtonIcon, { type: "submit", size: "s", iconType: CodeSandboxIcon, color: "text", "aria-label": openInCodeSandboxLabel }) })] }));
 };

package/lib/components/demo/demo.js

@@ -10,7 +10,7 @@ import { Children, useCallback, useMemo, useState, } from 'react';
 import { isElement } from 'react-is';
 import { LiveProvider } from 'react-live';
 import { themes as prismThemes } from 'prism-react-renderer';
-import { useEuiMemoizedStyles, copyToClipboard, } from '@elastic/eui';
+import { useEuiMemoizedStyles, copyToClipboard, useIsDarkMode, } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { demoDefaultScope } from '@theme/Demo/default_scope';
 import { DemoContext } from './context';
@@ -33,9 +33,11 @@ const getDemoStyles = (euiTheme) => ({
 });
 export const Demo = ({ children, scope, extraFiles, isSourceOpen: _isSourceOpen = false, previewPadding, previewWrapper, previewWrapperSource, }) => {
     const styles = useEuiMemoizedStyles(getDemoStyles);
+    const isDarkMode = useIsDarkMode();
     const [sources, setSources] = useState([]);
     const [isSourceOpen, setIsSourceOpen] = useState(_isSourceOpen);
     const activeSource = sources[0] || null;
+    const prismTheme = isDarkMode ? prismThemes.dracula : prismThemes.github;
     // liveProviderKey restarts the demo to its initial state
     const [liveProviderKey, setLiveProviderKey] = useState(0);
     const finalScope = useMemo(() => ({
@@ -52,7 +54,7 @@ export const Demo = ({ children, scope, extraFiles, isSourceOpen: _isSourceOpen
     const onClickReloadExample = useCallback(() => {
         setLiveProviderKey((liveProviderKey) => liveProviderKey + 1);
     }, []);
-    return (_jsx("div", { css: styles.demo, children: _jsxs(DemoContext.Provider, { value: { sources, addSource }, children: [_jsxs(LiveProvider, { code: activeSource?.code || '', transformCode: demoCodeTransformer, theme: prismThemes.dracula, scope: finalScope, children: [_jsx(DemoPreview, { padding: previewPadding, wrapperComponent: previewWrapper }), _jsx(DemoActionsBar, { isSourceOpen: isSourceOpen, setSourceOpen: setIsSourceOpen, activeSource: activeSource, extraFiles: extraFiles, sources: sources, previewWrapperSource: previewWrapperSource, onClickCopyToClipboard: onClickCopyToClipboard, onClickReloadExample: onClickReloadExample }), isSourceOpen && _jsx(DemoEditor, {})] }, liveProviderKey), Children.map(children, (child, index) => {
+    return (_jsx("div", { css: styles.demo, children: _jsxs(DemoContext.Provider, { value: { sources, addSource }, children: [_jsxs(LiveProvider, { code: activeSource?.code || '', transformCode: demoCodeTransformer, theme: prismTheme, scope: finalScope, children: [_jsx(DemoPreview, { padding: previewPadding, wrapperComponent: previewWrapper }), _jsx(DemoActionsBar, { isSourceOpen: isSourceOpen, setSourceOpen: setIsSourceOpen, activeSource: activeSource, extraFiles: extraFiles, sources: sources, previewWrapperSource: previewWrapperSource, onClickCopyToClipboard: onClickCopyToClipboard, onClickReloadExample: onClickReloadExample }), isSourceOpen && _jsx(DemoEditor, {})] }, liveProviderKey), Children.map(children, (child, index) => {
                     if (isElement(child) && child.type === DemoSource) {
                         return child;
                     }

package/lib/components/demo/preview/preview.js

@@ -12,7 +12,7 @@ import { Fragment, } from 'react';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import ErrorBoundary from '@docusaurus/ErrorBoundary';
 import { ErrorBoundaryErrorMessageFallback } from '@docusaurus/theme-common';
-import { useEuiTheme, euiPaddingSize, } from '@elastic/eui';
+import { useEuiTheme, EuiThemeProvider, euiPaddingSize, } from '@elastic/eui';
 const getPreviewStyles = (euiTheme) => ({
     previewWrapper: css `
     padding: var(--docs-demo-preview-padding);
@@ -32,5 +32,5 @@ export const DemoPreview = ({ padding = 'l', wrapperComponent: WrapperComponent
     const style = {
         '--docs-demo-preview-padding': paddingSize,
     };
-    return (_jsx(BrowserOnly, { fallback: _jsx(PreviewLoader, {}), children: () => (_jsx(_Fragment, { children: _jsx(ErrorBoundary, { fallback: (params) => (_jsx(ErrorBoundaryErrorMessageFallback, { ...params })), children: _jsx("div", { css: styles.previewWrapper, style: style, children: _jsx(WrapperComponent, { children: _jsx(LivePreview, {}) }) }) }) })) }));
+    return (_jsx(BrowserOnly, { fallback: _jsx(PreviewLoader, {}), children: () => (_jsx(_Fragment, { children: _jsx(ErrorBoundary, { fallback: (params) => (_jsx(ErrorBoundaryErrorMessageFallback, { ...params })), children: _jsx("div", { css: styles.previewWrapper, style: style, children: _jsx(EuiThemeProvider, { modify: { font: { lineHeightMultiplier: 1.5 } }, children: _jsx(WrapperComponent, { children: _jsx(LivePreview, {}) }) }) }) }) })) }));
 };

package/lib/components/navbar_item/index.d.ts

@@ -6,7 +6,7 @@ type SharedProps = {
     isSelected?: boolean;
 } & CommonProps;
 type Props = ExclusiveUnion<PropsForAnchor<SharedProps>, PropsForButton<SharedProps>>;
-export declare const getStyles: ({ euiTheme }: UseEuiTheme) => {
+export declare const getStyles: (euiThemeContext: UseEuiTheme) => {
     item: import("@emotion/react").SerializedStyles;
     navItem: import("@emotion/react").SerializedStyles;
     menuItem: import("@emotion/react").SerializedStyles;
@@ -14,6 +14,7 @@ export declare const getStyles: ({ euiTheme }: UseEuiTheme) => {
     disabled: import("@emotion/react").SerializedStyles;
     selected: import("@emotion/react").SerializedStyles;
     title: import("@emotion/react").SerializedStyles;
+    tooltipAnchor: import("@emotion/react").SerializedStyles;
 };
 export declare const NavbarItem: (props: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/navbar_item/index.js

@@ -9,58 +9,66 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/reac
 import { useContext } from 'react';
 import { css } from '@emotion/react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
-import { EuiIcon, useEuiMemoizedStyles, } from '@elastic/eui';
+import { EuiIcon, EuiToolTip, useEuiMemoizedStyles, } from '@elastic/eui';
 import { AppThemeContext } from '../theme_context';
+import { getNavbarBreakpoint } from '../../theme/Navbar/breakpoint';
 // converted from css modules to Emotion
-export const getStyles = ({ euiTheme }) => ({
-    item: css `
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
+export const getStyles = (euiThemeContext) => {
+    const { euiTheme } = euiThemeContext;
+    const { desktopMediaQuery } = getNavbarBreakpoint(euiThemeContext);
+    return {
+        item: css `
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
 
-    -webkit-tap-highlight-color: transparent;
-    transition: background var(--ifm-transition-fast);
+      -webkit-tap-highlight-color: transparent;
+      transition: background var(--ifm-transition-fast);
 
-    &:hover {
-      background-color: ${euiTheme.components.buttons.backgroundTextHover};
-      color: currentColor;
-    }
-  `,
-    navItem: css `
-    justify-content: center;
-    width: ${euiTheme.size.xl};
-    height: ${euiTheme.size.xl};
-    border-radius: 50%;
-  `,
-    menuItem: css `
-    justify-content: flex-start;
-    gap: ${euiTheme.size.s};
-
-    @media (min-width: 997px) {
+      &:hover {
+        background-color: ${euiTheme.components.buttons.backgroundTextHover};
+        color: currentColor;
+      }
+    `,
+        navItem: css `
       justify-content: center;
       width: ${euiTheme.size.xl};
       height: ${euiTheme.size.xl};
       border-radius: 50%;
-    }
-  `,
-    darkMode: css `
-    &:hover {
-      color: currentColor;
-    }
-  `,
-    disabled: css `
-    cursor: not-allowed;
-  `,
-    selected: css `
-    background-color: ${euiTheme.colors.backgroundFilledText};
-    color: ${euiTheme.colors.textInverse};
-  `,
-    title: css `
-    @media (min-width: 997px) {
-      display: none;
-    }
-  `,
-});
+    `,
+        menuItem: css `
+      justify-content: flex-start;
+      gap: ${euiTheme.size.s};
+
+      ${desktopMediaQuery} {
+        justify-content: center;
+        width: ${euiTheme.size.xl};
+        height: ${euiTheme.size.xl};
+        border-radius: 50%;
+      }
+    `,
+        darkMode: css `
+      &:hover {
+        color: currentColor;
+      }
+    `,
+        disabled: css `
+      cursor: not-allowed;
+    `,
+        selected: css `
+      background-color: ${euiTheme.colors.backgroundFilledText};
+      color: ${euiTheme.colors.textInverse};
+    `,
+        title: css `
+      ${desktopMediaQuery} {
+        display: none;
+      }
+    `,
+        tooltipAnchor: css `
+      display: inline-flex;
+    `,
+    };
+};
 // using a type guard to ensure proper typing from ExclusiveUnion
 const isAnchorClick = (onClick, href) => href != null;
 export const NavbarItem = (props) => {
@@ -75,10 +83,12 @@ export const NavbarItem = (props) => {
         !isBrowser && styles.disabled,
         isSelected && styles.selected,
         isDarkMode && styles.darkMode,
+        css,
     ];
     const content = showLabel ? (_jsxs(_Fragment, { children: [_jsx(EuiIcon, { type: icon }), _jsx("span", { css: styles.title, children: title })] })) : (_jsx(EuiIcon, { type: icon }));
-    if (isAnchorClick(onClick, href)) {
-        return (_jsx("a", { href: href, target: target ?? '_blank', title: title, className: className, css: cssStyles, onClick: onClick, "aria-label": title, "aria-live": "polite", children: content }));
+    const control = isAnchorClick(onClick, href) ? (_jsx("a", { href: href, target: target ?? '_blank', className: className, css: cssStyles, onClick: onClick, "aria-label": title, "aria-live": "polite", children: content })) : (_jsx("button", { type: "button", disabled: !isBrowser, className: className, css: cssStyles, onClick: onClick, "aria-label": title, "aria-live": "polite", "aria-pressed": isSelected != null ? isSelected : undefined, children: content }));
+    if (!title) {
+        return control;
     }
-    return (_jsx("button", { type: "button", disabled: !isBrowser, className: className, css: cssStyles, onClick: onClick, title: title, "aria-label": title, "aria-live": "polite", "aria-pressed": isSelected != null ? isSelected : undefined, children: content }));
+    return (_jsx(EuiToolTip, { content: title, disableScreenReaderOutput: true, repositionOnScroll: true, anchorProps: { css: styles.tooltipAnchor }, children: control }));
 };

package/lib/theme/Admonition/Types.js

@@ -9,7 +9,7 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { css } from '@emotion/react';
 import { EuiCallOut } from '@elastic/eui';
 const VARIANT_TO_PROPS_MAP = {
-    note: { iconType: 'paperClip', color: 'accent' },
+    note: { iconType: 'paperClip', color: 'primary' },
     tip: { iconType: 'faceHappy', color: 'success' },
     info: { iconType: 'info', color: 'primary' },
     accessibility: { iconType: 'accessibility', color: 'primary' },
@@ -31,7 +31,7 @@ const nestedParagraphStyleReset = css `
 `;
 const Callout = ({ title, type, children }) => {
     const variantProps = VARIANT_TO_PROPS_MAP[type];
-    return (_jsx(EuiCallOut, { title: title, iconType: "info", color: "primary", ...variantProps, css: css `
+    return (_jsx(EuiCallOut, { title: title, color: "primary", ...variantProps, css: css `
         margin-block: var(--eui-theme-content-vertical-spacing);
         ${nestedParagraphStyleReset}
       `, children: children }));

package/lib/theme/CodeBlock/index.js

@@ -8,8 +8,14 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
  */
 import React, { isValidElement } from 'react';
 import { css } from '@emotion/react';
-import { EuiCodeBlock } from '@elastic/eui';
+import { EuiCodeBlock, useEuiMemoizedStyles } from '@elastic/eui';
 import { Demo } from '../../components/demo';
+const getStyles = ({ euiTheme }) => ({
+    codeBlock: css `
+    margin-block: ${euiTheme.size.base};
+    word-break: break-word;
+  `,
+});
 /**
  * Best attempt to make the children a plain string so it is copyable. If there
  * are react elements, we will not be able to copy the content, and it will
@@ -26,10 +32,11 @@ function maybeStringifyChildren(children) {
 export default function CodeBlock({ children: rawChildren, metastring, className, ...props }) {
     const children = maybeStringifyChildren(rawChildren);
     const language = className?.replace('language-', '') || undefined;
+    const styles = useEuiMemoizedStyles(getStyles);
     if (metastring?.startsWith('interactive')) {
         return _jsx(Demo, { ...props, children: children });
     }
-    return (_jsx(EuiCodeBlock, { ...props, fontSize: "m", overflowHeight: 450, language: language, isCopyable: true, css: css `
-        word-break: break-word;
-      `, children: children }));
+    // Don't show the fullscreen button for one-liner snippets
+    const isOneLiner = typeof children === 'string' && !children.trim().includes('\n');
+    return (_jsx(EuiCodeBlock, { ...props, fontSize: "m", overflowHeight: isOneLiner ? undefined : 450, language: language, isCopyable: true, css: styles.codeBlock, children: children }));
 }

package/lib/theme/Heading/index.js

@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
  * Side Public License, v 1.
  */
 import useBrokenLinks from '@docusaurus/useBrokenLinks';
-import { EuiTitle, EuiButtonIcon, useEuiMemoizedStyles, } from '@elastic/eui';
+import { EuiTitle, EuiButtonIcon, EuiToolTip, useEuiMemoizedStyles, } from '@elastic/eui';
 import { css } from '@emotion/react';
 const TAG_TO_TITLE_SIZE_MAP = {
     h6: 'xxxs',
@@ -44,6 +44,6 @@ const Heading = ({ as: Component, children, id, ...restProps }) => {
     const anchorTitle = `Direct link to ${typeof children === 'string' ? children : id}`;
     // We don't want to show section links on document title headings
     const shouldShowSectionLink = Component !== 'h1';
-    return (_jsx(EuiTitle, { size: TAG_TO_TITLE_SIZE_MAP[Component], children: _jsxs(Component, { ...restProps, className: "heading anchor", css: styles.heading, id: id, children: [children, shouldShowSectionLink && (_jsx(EuiButtonIcon, { css: styles.anchor, href: `#${id}`, "aria-label": anchorTitle, title: anchorTitle, iconType: "link", color: "text", size: "xs" }))] }) }));
+    return (_jsx(EuiTitle, { size: TAG_TO_TITLE_SIZE_MAP[Component], children: _jsxs(Component, { ...restProps, className: "heading anchor", css: styles.heading, id: id, children: [children, shouldShowSectionLink && (_jsx(EuiToolTip, { content: anchorTitle, disableScreenReaderOutput: true, children: _jsx(EuiButtonIcon, { css: styles.anchor, href: `#${id}`, "aria-label": anchorTitle, iconType: "link", color: "text", size: "xs" }) }))] }) }));
 };
 export default Heading;

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

@@ -16,6 +16,7 @@ import { euiFormControlText, euiFormVariables,
  } from '@elastic/eui/lib/components/form/form.styles';
 import { VersionSwitcher, } from '../../../components/version_switcher';
 import { HighContrastModeToggle } from '../../../components/high_contrast_mode_toggle';
+import { getNavbarBreakpoint } from '../breakpoint';
 const DOCS_PATH = '/docs';
 const placeHolderStyles = (content) => `
   &::-webkit-input-placeholder { ${content} }
@@ -27,6 +28,7 @@ const getStyles = (euiThemeContext) => {
     const { euiTheme } = euiThemeContext;
     const form = euiFormVariables(euiThemeContext);
     const iconColor = encodeURIComponent(euiTheme.colors.text);
+    const { desktopMediaQuery, mobileMediaQuery } = getNavbarBreakpoint(euiThemeContext);
     return {
         navbarItems: css `
       --ifm-navbar-item-padding-horizontal: 0;
@@ -34,7 +36,7 @@ const getStyles = (euiThemeContext) => {
 
       .navbar__item,
       [class*='colorModeToggle'] {
-        @media (max-width: 996px) {
+        ${mobileMediaQuery} {
           display: none;
         }
       }
@@ -46,12 +48,16 @@ const getStyles = (euiThemeContext) => {
           background-color: var(--ifm-color-emphasis-200);
           color: currentColor;
         }
+
+        ${mobileMediaQuery} {
+          display: inherit;
+        }
       }
     `,
         navbarItemsLeft: css `
       gap: ${euiTheme.size.s};
 
-      @media (min-width: 997px) {
+      ${desktopMediaQuery} {
         gap: ${euiTheme.size.l};
       }
 
@@ -63,7 +69,7 @@ const getStyles = (euiThemeContext) => {
       gap: ${euiTheme.size.s};
     `,
         actions: css `
-      @media (max-width: 996px) {
+      ${mobileMediaQuery} {
         display: none;
       }
     `,
@@ -102,22 +108,18 @@ const getStyles = (euiThemeContext) => {
           max-inline-size: 25rem;
         }
 
-        @media (min-width: 997px) {
+        ${desktopMediaQuery} {
           min-inline-size: 15rem;
         }
-
-        @media (min-width: 1200px) {
-          min-inline-size: 25rem;
-        }
       }
     `,
         versionSwitcher: css `
-      @media (max-width: 996px) {
+      ${mobileMediaQuery} {
         display: none;
       }
     `,
         themeSwitcher: css `
-      @media (max-width: 996px) {
+      ${mobileMediaQuery} {
         display: none;
       }
     `,

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

@@ -1,13 +1,36 @@
 import { jsx as _jsx } 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 } from 'react';
+import { useWindowSize } from '@docusaurus/theme-common';
 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';
+import { useEuiTheme } from '@elastic/eui';
+import { getNavbarBreakpoint } from '../breakpoint';
 export default function NavbarMobileSidebar({ versionSwitcherOptions, }) {
     const mobileSidebar = useNavbarMobileSidebar();
-    useLockBodyScroll(mobileSidebar.shown);
-    if (!mobileSidebar.shouldRender) {
+    const { disabled, shouldRender: shouldRenderDefault, shown, toggle, } = mobileSidebar;
+    const euiThemeContext = useEuiTheme();
+    const { mobileBreakpoint } = getNavbarBreakpoint(euiThemeContext);
+    const windowSize = useWindowSize({
+        desktopBreakpoint: mobileBreakpoint,
+    });
+    const shouldRender = shouldRenderDefault || (!disabled && windowSize === 'mobile');
+    useLockBodyScroll(shouldRender && shown);
+    useEffect(() => {
+        if (windowSize === 'desktop' && shown) {
+            toggle();
+        }
+    }, [shown, toggle, windowSize]);
+    if (!shouldRender) {
         return null;
     }
     return (_jsx(NavbarMobileSidebarLayout, { header: _jsx(NavbarMobileSidebarHeader, { versionSwitcherOptions: versionSwitcherOptions }), primaryMenu: _jsx(NavbarMobileSidebarPrimaryMenu, {}), secondaryMenu: _jsx(NavbarMobileSidebarSecondaryMenu, {}) }));

package/lib/theme/Navbar/breakpoint.d.ts

@@ -0,0 +1,7 @@
+import type { UseEuiTheme } from '@elastic/eui';
+export declare const getNavbarBreakpoint: ({ euiTheme }: UseEuiTheme) => {
+    desktopBreakpoint: number;
+    desktopMediaQuery: string;
+    mobileBreakpoint: number;
+    mobileMediaQuery: string;
+};

package/lib/theme/Navbar/breakpoint.js

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+const NAVBAR_MOBILE_BREAKPOINT_KEY = 'xl';
+export const getNavbarBreakpoint = ({ euiTheme }) => {
+    const mobileBreakpoint = euiTheme.breakpoint[NAVBAR_MOBILE_BREAKPOINT_KEY];
+    const desktopBreakpoint = mobileBreakpoint + 1;
+    return {
+        desktopBreakpoint,
+        desktopMediaQuery: `@media (min-width: ${desktopBreakpoint}px)`,
+        mobileBreakpoint,
+        mobileMediaQuery: `@media (max-width: ${mobileBreakpoint}px)`,
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elastic/eui-docusaurus-theme",
-  "version": "2.4.0",
+  "version": "2.5.0-snapshot.1783939453438",
   "description": "EUI theme for Docusaurus",
   "license": "SEE LICENSE IN LICENSE.txt",
   "scripts": {
@@ -40,14 +40,14 @@
     "@docusaurus/theme-common": "^3.7.0",
     "@docusaurus/utils-validation": "^3.7.0",
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eui": "^116.0.0",
-    "@elastic/eui-theme-borealis": "^8.0.0",
+    "@elastic/eui": "^117.0.0-snapshot.1783939453438",
+    "@elastic/eui-theme-borealis": "^8.0.0-snapshot.1783939453438",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",
     "@types/react-window": "^1.8.8",
     "clsx": "^2.1.1",
-    "codesandbox": "^2.2.3",
     "dedent": "^1.5.3",
+    "lz-string": "^1.5.0",
     "moment": "^2.30.1",
     "prism-react-renderer": "^2.3.1",
     "react-is": "^18.3.1",
@@ -57,5 +57,6 @@
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
-  }
+  },
+  "stableVersion": "2.5.0"
 }

package/src/components/demo/actions_bar/actions_bar.tsx

@@ -61,6 +61,8 @@ export const DemoActionsBar = ({
   onClickCopyToClipboard,
 }: DemoActionsBarProps) => {
   const styles = useEuiMemoizedStyles(getDemoActionsBarStyles);
+  const copyToClipboardLabel = 'Copy to clipboard';
+  const reloadExampleLabel = 'Reload example';
 
   return (
     <EuiFlexGroup alignItems="center" css={styles.actionsBar} gutterSize="s">
@@ -82,22 +84,22 @@ export const DemoActionsBar = ({
           activeSource={activeSource}
         />
       ))}
-      <EuiToolTip content="Copy to clipboard">
+      <EuiToolTip content={copyToClipboardLabel} disableScreenReaderOutput>
         <EuiButtonIcon
           size="s"
           iconType="copy"
           color="text"
           onClick={onClickCopyToClipboard}
-          aria-label="Copy code to clipboard"
+          aria-label={copyToClipboardLabel}
         />
       </EuiToolTip>
-      <EuiToolTip content="Reload example">
+      <EuiToolTip content={reloadExampleLabel} disableScreenReaderOutput>
         <EuiButtonIcon
           size="s"
           iconType="refresh"
           color="text"
           onClick={onClickReloadExample}
-          aria-label="Reload example"
+          aria-label={reloadExampleLabel}
         />
       </EuiToolTip>
     </EuiFlexGroup>

package/src/components/demo/codesandbox/get_parameters.ts

@@ -0,0 +1,19 @@
+/*
+ * 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 { compressToBase64 } from 'lz-string';
+
+/**
+ * Encodes sandbox parameters for CodeSandbox's `define` API.
+ */
+export const getParameters = (parameters: unknown): string => {
+  return compressToBase64(JSON.stringify(parameters))
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=+$/, '');
+};

package/src/components/demo/codesandbox/open_action.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useMemo } from 'react';
-import { getParameters } from 'codesandbox/lib/api/define';
+import { getParameters } from './get_parameters';
 import dedent from 'dedent';
 import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 import type { ActionComponent } from '../../../theme/Demo/actions';
@@ -142,9 +142,11 @@ export const createOpenInCodeSandboxAction =
           },
           ...codeSandboxFiles,
         },
-      } as any);
+      });
     }, [activeSource, extraFiles, previewWrapperSource]);
 
+    const openInCodeSandboxLabel = 'Open in CodeSandbox';
+
     return (
       <form
         action="https://codesandbox.io/api/v1/sandboxes/define"
@@ -157,13 +159,13 @@ export const createOpenInCodeSandboxAction =
           name="query"
           value={`module=/demo.tsx&view=split`}
         />
-        <EuiToolTip content="Open in CodeSandbox">
+        <EuiToolTip content={openInCodeSandboxLabel} disableScreenReaderOutput>
           <EuiButtonIcon
             type="submit"
             size="s"
             iconType={CodeSandboxIcon}
             color="text"
-            aria-label="Open in CodeSandbox"
+            aria-label={openInCodeSandboxLabel}
           />
         </EuiToolTip>
       </form>

package/src/components/demo/demo.tsx

@@ -20,6 +20,7 @@ import {
   useEuiMemoizedStyles,
   copyToClipboard,
   UseEuiTheme,
+  useIsDarkMode,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { demoDefaultScope } from '@theme/Demo/default_scope';
@@ -104,9 +105,11 @@ export const Demo = ({
   previewWrapperSource,
 }: DemoProps) => {
   const styles = useEuiMemoizedStyles(getDemoStyles);
+  const isDarkMode = useIsDarkMode();
   const [sources, setSources] = useState<DemoSourceMeta[]>([]);
   const [isSourceOpen, setIsSourceOpen] = useState<boolean>(_isSourceOpen);
   const activeSource = sources[0] || null;
+  const prismTheme = isDarkMode ? prismThemes.dracula : prismThemes.github;
 
   // liveProviderKey restarts the demo to its initial state
   const [liveProviderKey, setLiveProviderKey] = useState<number>(0);
@@ -142,7 +145,7 @@ export const Demo = ({
           key={liveProviderKey}
           code={activeSource?.code || ''}
           transformCode={demoCodeTransformer}
-          theme={prismThemes.dracula}
+          theme={prismTheme}
           scope={finalScope}
         >
           <DemoPreview