npm - @elastic/eui-docusaurus-theme - Versions diffs - 2.2.0 → 2.4.0 - Mend

@elastic/eui-docusaurus-theme 2.2.0 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/lib/.tsbuildinfo-client +1 -1
package/lib/components/demo/actions_bar/actions_bar.d.ts +2 -1
package/lib/components/demo/actions_bar/actions_bar.js +2 -2
package/lib/components/demo/codesandbox/open_action.js +29 -4
package/lib/components/demo/demo.d.ts +2 -1
package/lib/components/demo/demo.js +2 -2
package/lib/components/version_switcher/index.d.ts +8 -1
package/lib/components/version_switcher/index.js +37 -9
package/lib/theme/Admonition/Types.js +1 -1
package/lib/theme/Demo/actions.d.ts +1 -0
package/lib/theme/DocBreadcrumbs/Items/Home/index.js +1 -1
package/lib/theme/DocBreadcrumbs/index.js +1 -1
package/lib/theme/DocCard/index.js +2 -2
package/lib/theme/DocSidebarItem/Category/index.js +1 -1
package/lib/theme/NavbarItem/NavbarNavLink.js +1 -1
package/lib/theme/PaginatorNavLink/index.js +1 -1
package/lib/theme/TOCCollapsible/CollapseButton/index.js +1 -1
package/package.json +3 -3
package/src/components/demo/actions_bar/actions_bar.tsx +5 -1
package/src/components/demo/codesandbox/open_action.tsx +40 -4
package/src/components/demo/demo.tsx +3 -0
package/src/components/version_switcher/index.tsx +46 -9
package/src/theme/Admonition/Types.tsx +1 -1
package/src/theme/Demo/actions.tsx +1 -0
package/src/theme/DocBreadcrumbs/Items/Home/index.tsx +1 -1
package/src/theme/DocBreadcrumbs/index.tsx +1 -1
package/src/theme/DocCard/index.tsx +2 -2
package/src/theme/DocSidebarItem/Category/index.tsx +1 -1
package/src/theme/NavbarItem/NavbarNavLink.tsx +1 -1
package/src/theme/PaginatorNavLink/index.tsx +2 -2
package/src/theme/TOCCollapsible/CollapseButton/index.tsx +1 -1
package/src/theme/theme.d.ts +1 -0

package/lib/components/demo/actions_bar/actions_bar.d.ts CHANGED Viewed

@@ -3,9 +3,10 @@ export interface DemoActionsBarProps {
     activeSource: DemoSourceMeta | null;
     sources: DemoSourceMeta[];
     extraFiles?: ExtraFiles;
+    previewWrapperSource?: string;
     isSourceOpen: boolean;
     setSourceOpen(isOpen: boolean): void;
     onClickReloadExample(): void;
     onClickCopyToClipboard(): void;
 }
-export declare const DemoActionsBar: ({ isSourceOpen, setSourceOpen, activeSource, sources, extraFiles, onClickReloadExample, onClickCopyToClipboard, }: DemoActionsBarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DemoActionsBar: ({ isSourceOpen, setSourceOpen, activeSource, sources, extraFiles, previewWrapperSource, onClickReloadExample, onClickCopyToClipboard, }: DemoActionsBarProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -28,7 +28,7 @@ const getDemoActionsBarStyles = (euiTheme) => {
     `,
     };
 };
-export const DemoActionsBar = ({ isSourceOpen, setSourceOpen, activeSource, sources, extraFiles, onClickReloadExample, onClickCopyToClipboard, }) => {
+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, activeSource: activeSource }))), _jsx(EuiToolTip, { content: "Copy to clipboard", children: _jsx(EuiButtonIcon, { size: "s", iconType: "copyClipboard", 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" }) })] }));
+    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" }) })] }));
 };

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

@@ -32,7 +32,8 @@ const indexTsxSource = dedent `
     <EuiProvider cache={cache}>
       <Demo />
     </EuiProvider>
-  );`;
+  );
+`;
 const publicIndexHtmlSource = dedent `
   <head>
     <title>@elastic/eui component demo</title>
@@ -59,9 +60,21 @@ export const defaultCodeSandboxParameters = {
 const processTsxSource = (source) => {
     // jsxImportSource pragma is needed in CodeSandbox as it doesn't seem
     // to support that setting via tsconfig.json
-    return `/** @jsxImportSource @emotion/react */\n${source}`;
+    let processed = `/** @jsxImportSource @emotion/react */\n${source}`;
+    // Inject `@elastic/charts` CSS for demos that use the charts library,
+    // since CodeSandbox doesn't load it globally unlike the docs site
+    if (source.includes('@elastic/charts')) {
+        // Match the closing line of the @elastic/charts import (handles both
+        // single-line and multi-line imports, and both quote styles)
+        processed = processed.replace(/^(.*from ['"]@elastic\/charts['"];)$/m, [
+            '$1',
+            "import '@elastic/charts/dist/theme_only_light.css';",
+            "import '@elastic/charts/dist/theme_only_dark.css';",
+        ].join('\n'));
+    }
+    return processed;
 };
-export const createOpenInCodeSandboxAction = ({ files = {}, dependencies }) => ({ extraFiles, activeSource }) => {
+export const createOpenInCodeSandboxAction = ({ files = {}, dependencies }) => ({ extraFiles, activeSource, previewWrapperSource }) => {
     const parameters = useMemo(() => {
         const source = activeSource?.code || '';
         // Compute list of extra files that may be passed
@@ -75,6 +88,18 @@ export const createOpenInCodeSandboxAction = ({ files = {}, dependencies }) => (
         return getParameters({
             files: {
                 ...defaultCodeSandboxParameters.files,
+                ...(previewWrapperSource
+                    ? {
+                        'index.tsx': {
+                            content: indexTsxSource
+                                .replace("import Demo from './demo';", "import Demo from './demo';\nimport PreviewWrapper from './preview_wrapper';")
+                                .replace('<Demo />', '<PreviewWrapper>\n      <Demo />\n    </PreviewWrapper>'),
+                        },
+                        'preview_wrapper.tsx': {
+                            content: processTsxSource(previewWrapperSource),
+                        },
+                    }
+                    : {}),
                 'demo.tsx': {
                     content: processTsxSource(source),
                 },
@@ -89,6 +114,6 @@ export const createOpenInCodeSandboxAction = ({ files = {}, dependencies }) => (
                 ...codeSandboxFiles,
             },
         });
-    }, [activeSource, extraFiles]);
+    }, [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" }) })] }));
 };

package/lib/components/demo/demo.d.ts CHANGED Viewed

@@ -45,5 +45,6 @@ export interface DemoProps extends PropsWithChildren {
     extraFiles?: ExtraFiles;
     previewPadding?: DemoPreviewProps['padding'];
     previewWrapper?: DemoPreviewProps['wrapperComponent'];
+    previewWrapperSource?: string;
 }
-export declare const Demo: ({ children, scope, extraFiles, isSourceOpen: _isSourceOpen, previewPadding, previewWrapper, }: DemoProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Demo: ({ children, scope, extraFiles, isSourceOpen: _isSourceOpen, previewPadding, previewWrapper, previewWrapperSource, }: DemoProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/components/demo/demo.js CHANGED Viewed

@@ -31,7 +31,7 @@ const getDemoStyles = (euiTheme) => ({
     word-break: break-word;
   `,
 });
-export const Demo = ({ children, scope, extraFiles, isSourceOpen: _isSourceOpen = false, previewPadding, previewWrapper, }) => {
+export const Demo = ({ children, scope, extraFiles, isSourceOpen: _isSourceOpen = false, previewPadding, previewWrapper, previewWrapperSource, }) => {
     const styles = useEuiMemoizedStyles(getDemoStyles);
     const [sources, setSources] = useState([]);
     const [isSourceOpen, setIsSourceOpen] = useState(_isSourceOpen);
@@ -52,7 +52,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, 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: 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) => {
                     if (isElement(child) && child.type === DemoSource) {
                         return child;
                     }

package/lib/components/version_switcher/index.d.ts CHANGED Viewed

@@ -19,5 +19,12 @@ export type VersionSwitcherProps = {
      * List of available versions to switch to
      */
     versions: string[];
+    /**
+     * URL to fetch the latest list of versions from.
+     * When provided, versions are fetched client-side from this URL,
+     * falling back to the static `versions` prop if the fetch fails.
+     * This ensures all deployed versions are always visible in the switcher.
+     */
+    versionsUrl?: string;
 };
-export declare const VersionSwitcher: ({ ariaLabel, currentVersion, extraAction, previousVersionUrl, versions, }: VersionSwitcherProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare const VersionSwitcher: ({ ariaLabel, currentVersion, extraAction, previousVersionUrl, versions, versionsUrl, }: VersionSwitcherProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;

package/lib/components/version_switcher/index.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { css } from '@emotion/react';
 import { FixedSizeList } from 'react-window';
 import { EuiButtonEmpty, euiFocusRing, EuiListGroupItem, EuiPopover, useEuiMemoizedStyles, } from '@elastic/eui';
@@ -33,19 +33,47 @@ const getStyles = (euiThemeContext) => {
 const pronounceVersion = (version) => {
     return `version ${version.replaceAll('.', ' point ')}`;
 };
-export const VersionSwitcher = ({ ariaLabel, currentVersion, extraAction, previousVersionUrl, versions, }) => {
+export const VersionSwitcher = ({ ariaLabel, currentVersion, extraAction, previousVersionUrl, versions, versionsUrl, }) => {
     const [isPopoverOpen, setPopoverOpen] = useState(false);
+    const [allVersions, setAllVersions] = useState(versions);
     const styles = useEuiMemoizedStyles(getStyles);
-    if (!versions)
+    // Fetch the latest versions list from the main deployment
+    // to ensure the switcher always shows all available versions,
+    // even on older documentation deployments
+    useEffect(() => {
+        if (!versionsUrl)
+            return;
+        fetch(versionsUrl)
+            .then((response) => {
+            if (!response.ok)
+                throw new Error('Failed to fetch versions');
+            return response.json();
+        })
+            .then((data) => {
+            if (data?.euiVersions?.length) {
+                // Ensure the current version is always included
+                const fetchedVersions = data.euiVersions;
+                if (!fetchedVersions.includes(currentVersion)) {
+                    fetchedVersions.push(currentVersion);
+                }
+                setAllVersions(fetchedVersions);
+            }
+        })
+            .catch(() => {
+            // Silently fall back to statically bundled versions
+        });
+    }, [versionsUrl, currentVersion]);
+    if (!allVersions?.length)
         return null;
-    const button = (_jsxs(EuiButtonEmpty, { size: "s", color: "text", iconType: "arrowDown", iconSide: "right", css: styles.button, onClick: () => setPopoverOpen((isOpen) => !isOpen), "aria-label": `${pronounceVersion(currentVersion)}. Click to switch versions`, children: ["v", currentVersion] }));
-    return (_jsx(EuiPopover, { isOpen: isPopoverOpen, closePopover: () => setPopoverOpen(false), button: button, repositionOnScroll: true, panelPaddingSize: "xs", "aria-label": ariaLabel, children: _jsx(FixedSizeList, { className: "eui-yScroll", itemCount: versions.length, itemSize: 24, height: 200, width: 120, innerElementType: "ul", children: ({ index, style }) => {
-                const version = versions[index];
+    const latestVersion = allVersions[0];
+    const button = (_jsxs(EuiButtonEmpty, { size: "s", color: "text", iconType: "chevronSingleDown", iconSide: "right", css: styles.button, onClick: () => setPopoverOpen((isOpen) => !isOpen), "aria-label": `${pronounceVersion(currentVersion)}. Click to switch versions`, children: ["v", currentVersion] }));
+    return (_jsx(EuiPopover, { isOpen: isPopoverOpen, closePopover: () => setPopoverOpen(false), button: button, repositionOnScroll: true, panelPaddingSize: "xs", "aria-label": ariaLabel, children: _jsx(FixedSizeList, { className: "eui-yScroll", itemCount: allVersions.length, itemSize: 24, height: 200, width: 120, innerElementType: "ul", children: ({ index, style }) => {
+                const version = allVersions[index];
                 const isCurrentVersion = version === currentVersion;
                 const screenReaderVersion = pronounceVersion(version);
-                const url = isCurrentVersion
-                    ? '/'
+                const url = version === latestVersion
+                    ? `${previousVersionUrl}/`
                     : `${previousVersionUrl}/v${version}/`;
-                return (_jsx(EuiListGroupItem, { css: styles.listItem, style: style, size: "xs", label: `v${version}`, "aria-label": screenReaderVersion, href: url, isActive: isCurrentVersion, color: isCurrentVersion ? 'primary' : 'text', extraAction: extraAction?.(version) }));
+                return (_jsx(EuiListGroupItem, { css: styles.listItem, style: style, label: `v${version}`, "aria-label": screenReaderVersion, href: url, isActive: isCurrentVersion, color: isCurrentVersion ? 'primary' : 'text', extraAction: extraAction?.(version) }));
             } }) }));
 };

package/lib/theme/Admonition/Types.js CHANGED Viewed

@@ -13,7 +13,7 @@ const VARIANT_TO_PROPS_MAP = {
     tip: { iconType: 'faceHappy', color: 'success' },
     info: { iconType: 'info', color: 'primary' },
     accessibility: { iconType: 'accessibility', color: 'primary' },
-    warning: { iconType: 'alert', color: 'warning' },
+    warning: { iconType: 'warning', color: 'warning' },
     danger: { iconType: 'error', color: 'danger' },
     // Undocumented legacy admonition type aliases
     secondary: {},

package/lib/theme/Demo/actions.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ export type ActionComponentProps = {
     activeSource: DemoSourceMeta | null;
     sources: DemoSourceMeta[];
     extraFiles?: ExtraFiles;
+    previewWrapperSource?: string;
 };
 export type ActionComponent = ComponentType<ActionComponentProps>;
 export declare const extraActions: ActionComponent[];

package/lib/theme/DocBreadcrumbs/Items/Home/index.js CHANGED Viewed

@@ -14,5 +14,5 @@ export default function HomeBreadcrumbItem() {
                     id: 'theme.docs.breadcrumbs.home',
                     message: 'Home page',
                     description: 'The ARIA label for the home page in the breadcrumbs',
-                }), className: "breadcrumbs__link", href: homeHref, children: title }), _jsx(EuiIcon, { type: "arrowRight", size: "s", css: styles.icon })] }));
+                }), className: "breadcrumbs__link", href: homeHref, children: title }), _jsx(EuiIcon, { type: "chevronSingleRight", size: "s", css: styles.icon })] }));
 }

package/lib/theme/DocBreadcrumbs/index.js CHANGED Viewed

@@ -40,7 +40,7 @@ function BreadcrumbsItem({ children, active, index, addMicrodata, }) {
             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 })] }));
+        }), css: styles.item, children: [children, _jsx("meta", { itemProp: "position", content: String(index + 1) }), !active && _jsx(EuiIcon, { type: "chevronSingleRight", css: styles.icon })] }));
 }
 export default function DocBreadcrumbs() {
     const breadcrumbs = useSidebarBreadcrumbs();

package/lib/theme/DocCard/index.js CHANGED Viewed

@@ -27,8 +27,8 @@ function CardCategory({ item }) {
         icon: "folderOpen", title: item.label, description: item.description ?? categoryItemsPlural(item.items.length) }));
 }
 function CardLink({ item }) {
-    // We update Docusaurus `link` icon to EUI `popout` icon
-    const icon = isInternalUrl(item.href) ? 'document' : 'popout';
+    // We update Docusaurus `link` icon to EUI `external` icon
+    const icon = isInternalUrl(item.href) ? 'document' : 'external';
     const doc = useDocById(item.docId ?? undefined);
     return (_jsx(CardLayout, { href: item.href, icon: icon, title: item.label, description: item.description ?? doc?.description }));
 }

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

@@ -85,7 +85,7 @@ function CollapseButton({ collapsed, categoryLabel, onClick, ...rest }) {
                 id: 'theme.DocSidebarItem.collapseCategoryAriaLabel',
                 message: "Collapse sidebar category '{label}'",
                 description: 'The ARIA label to collapse the sidebar category',
-            }, { label: categoryLabel }), "aria-expanded": !collapsed, type: "button", className: "clean-btn", onClick: onClick, ...rest, children: _jsx(EuiIcon, { size: "s", type: collapsed ? 'arrowRight' : 'arrowDown' }) }));
+            }, { label: categoryLabel }), "aria-expanded": !collapsed, type: "button", className: "clean-btn", onClick: onClick, ...rest, children: _jsx(EuiIcon, { size: "s", type: collapsed ? 'chevronSingleRight' : 'chevronSingleDown' }) }));
 }
 export default function DocSidebarItemCategory({ item, onItemClick, activePath, level, index, ...props }) {
     const { items, label, collapsible, className, href } = item;

package/lib/theme/NavbarItem/NavbarNavLink.js CHANGED Viewed

@@ -12,7 +12,7 @@ const CUSTOM_LINK_COMPONENT_MAP = {
     },
     changelog: {
         component: NavbarItem,
-        icon: 'cheer',
+        icon: 'popper',
     },
     figma: {
         component: NavbarItem,

package/lib/theme/PaginatorNavLink/index.js CHANGED Viewed

@@ -39,5 +39,5 @@ export default function PaginatorNavLink(props) {
     const { permalink, title, subLabel, isNext } = props;
     const isPrev = !isNext;
     const styles = useEuiMemoizedStyles(getStyles);
-    return (_jsxs(Link, { className: clsx('pagination-nav__link', isNext ? 'pagination-nav__link--next' : 'pagination-nav__link--prev'), css: styles.link, to: permalink, children: [subLabel && _jsx("div", { className: "pagination-nav__sublabel", children: subLabel }), _jsxs("div", { className: "pagination-nav__label", children: [isPrev && _jsx(EuiIcon, { type: "arrowLeft" }), title, isNext && _jsx(EuiIcon, { type: "arrowRight" })] })] }));
+    return (_jsxs(Link, { className: clsx('pagination-nav__link', isNext ? 'pagination-nav__link--next' : 'pagination-nav__link--prev'), css: styles.link, to: permalink, children: [subLabel && _jsx("div", { className: "pagination-nav__sublabel", children: subLabel }), _jsxs("div", { className: "pagination-nav__label", children: [isPrev && _jsx(EuiIcon, { type: "chevronSingleLeft" }), title, isNext && _jsx(EuiIcon, { type: "chevronSingleRight" })] })] }));
 }

package/lib/theme/TOCCollapsible/CollapseButton/index.js CHANGED Viewed

@@ -19,5 +19,5 @@ const getStyles = ({ euiTheme }) => {
 };
 export default function TOCCollapsibleCollapseButton({ collapsed, ...props }) {
     const styles = useEuiMemoizedStyles(getStyles);
-    return (_jsxs("button", { type: "button", ...props, className: clsx('clean-btn', props.className), css: styles.tocCollapsibleButton, children: [_jsx(Translate, { id: "theme.TOCCollapsible.toggleButtonLabel", description: "The label used by the button on the collapsible TOC component", children: "On this page" }), _jsx(EuiIcon, { type: collapsed ? 'arrowDown' : 'arrowUp' })] }));
+    return (_jsxs("button", { type: "button", ...props, className: clsx('clean-btn', props.className), css: styles.tocCollapsibleButton, children: [_jsx(Translate, { id: "theme.TOCCollapsible.toggleButtonLabel", description: "The label used by the button on the collapsible TOC component", children: "On this page" }), _jsx(EuiIcon, { type: collapsed ? 'chevronSingleDown' : 'chevronSingleUp' })] }));
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@elastic/eui-docusaurus-theme",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "EUI theme for Docusaurus",
   "license": "SEE LICENSE IN LICENSE.txt",
   "scripts": {
@@ -40,8 +40,8 @@
     "@docusaurus/theme-common": "^3.7.0",
     "@docusaurus/utils-validation": "^3.7.0",
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eui": "^112.1.0",
-    "@elastic/eui-theme-borealis": "^5.4.0",
+    "@elastic/eui": "^116.0.0",
+    "@elastic/eui-theme-borealis": "^8.0.0",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",
     "@types/react-window": "^1.8.8",

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

@@ -23,6 +23,7 @@ export interface DemoActionsBarProps {
   activeSource: DemoSourceMeta | null;
   sources: DemoSourceMeta[];
   extraFiles?: ExtraFiles;
+  previewWrapperSource?: string;
   isSourceOpen: boolean;
   setSourceOpen(isOpen: boolean): void;
   onClickReloadExample(): void;
@@ -55,6 +56,7 @@ export const DemoActionsBar = ({
   activeSource,
   sources,
   extraFiles,
+  previewWrapperSource,
   onClickReloadExample,
   onClickCopyToClipboard,
 }: DemoActionsBarProps) => {
@@ -73,15 +75,17 @@ export const DemoActionsBar = ({
       </EuiButton>
       {extraActions.map((ActionComponent) => (
         <ActionComponent
+          key={ActionComponent.displayName ?? ActionComponent.name}
           sources={sources}
           extraFiles={extraFiles}
+          previewWrapperSource={previewWrapperSource}
           activeSource={activeSource}
         />
       ))}
       <EuiToolTip content="Copy to clipboard">
         <EuiButtonIcon
           size="s"
-          iconType="copyClipboard"
+          iconType="copy"
           color="text"
           onClick={onClickCopyToClipboard}
           aria-label="Copy code to clipboard"

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

@@ -34,7 +34,8 @@ const indexTsxSource = dedent`
     <EuiProvider cache={cache}>
       <Demo />
     </EuiProvider>
-  );`;
+  );
+`;
 const publicIndexHtmlSource = dedent`
   <head>
@@ -69,12 +70,29 @@ export type Options = {
 const processTsxSource = (source: string) => {
   // jsxImportSource pragma is needed in CodeSandbox as it doesn't seem
   // to support that setting via tsconfig.json
-  return `/** @jsxImportSource @emotion/react */\n${source}`;
+  let processed = `/** @jsxImportSource @emotion/react */\n${source}`;
+  // Inject `@elastic/charts` CSS for demos that use the charts library,
+  // since CodeSandbox doesn't load it globally unlike the docs site
+  if (source.includes('@elastic/charts')) {
+    // Match the closing line of the @elastic/charts import (handles both
+    // single-line and multi-line imports, and both quote styles)
+    processed = processed.replace(
+      /^(.*from ['"]@elastic\/charts['"];)$/m,
+      [
+        '$1',
+        "import '@elastic/charts/dist/theme_only_light.css';",
+        "import '@elastic/charts/dist/theme_only_dark.css';",
+      ].join('\n')
+    );
+  }
+  return processed;
 };
 export const createOpenInCodeSandboxAction =
   ({ files = {}, dependencies }: Options): ActionComponent =>
-  ({ extraFiles, activeSource }) => {
+  ({ extraFiles, activeSource, previewWrapperSource }) => {
     const parameters: string = useMemo(() => {
       const source = activeSource?.code || '';
@@ -93,6 +111,24 @@ export const createOpenInCodeSandboxAction =
       return getParameters({
         files: {
           ...defaultCodeSandboxParameters.files,
+          ...(previewWrapperSource
+            ? {
+                'index.tsx': {
+                  content: indexTsxSource
+                    .replace(
+                      "import Demo from './demo';",
+                      "import Demo from './demo';\nimport PreviewWrapper from './preview_wrapper';"
+                    )
+                    .replace(
+                      '<Demo />',
+                      '<PreviewWrapper>\n      <Demo />\n    </PreviewWrapper>'
+                    ),
+                },
+                'preview_wrapper.tsx': {
+                  content: processTsxSource(previewWrapperSource),
+                },
+              }
+            : {}),
           'demo.tsx': {
             content: processTsxSource(source),
           },
@@ -107,7 +143,7 @@ export const createOpenInCodeSandboxAction =
           ...codeSandboxFiles,
         },
       } as any);
-    }, [activeSource, extraFiles]);
+    }, [activeSource, extraFiles, previewWrapperSource]);
     return (
       <form

package/src/components/demo/demo.tsx CHANGED Viewed

@@ -79,6 +79,7 @@ export interface DemoProps extends PropsWithChildren {
   extraFiles?: ExtraFiles;
   previewPadding?: DemoPreviewProps['padding'];
   previewWrapper?: DemoPreviewProps['wrapperComponent'];
+  previewWrapperSource?: string;
 }
 const getDemoStyles = (euiTheme: UseEuiTheme) => ({
@@ -100,6 +101,7 @@ export const Demo = ({
   isSourceOpen: _isSourceOpen = false,
   previewPadding,
   previewWrapper,
+  previewWrapperSource,
 }: DemoProps) => {
   const styles = useEuiMemoizedStyles(getDemoStyles);
   const [sources, setSources] = useState<DemoSourceMeta[]>([]);
@@ -153,6 +155,7 @@ export const Demo = ({
             activeSource={activeSource}
             extraFiles={extraFiles}
             sources={sources}
+            previewWrapperSource={previewWrapperSource}
             onClickCopyToClipboard={onClickCopyToClipboard}
             onClickReloadExample={onClickReloadExample}
           />

package/src/components/version_switcher/index.tsx CHANGED Viewed

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
-import { ComponentProps, useState } from 'react';
+import { ComponentProps, useEffect, useState } from 'react';
 import { css } from '@emotion/react';
 import { FixedSizeList } from 'react-window';
 import {
@@ -68,6 +68,13 @@ export type VersionSwitcherProps = {
    * List of available versions to switch to
    */
   versions: string[];
+  /**
+   * URL to fetch the latest list of versions from.
+   * When provided, versions are fetched client-side from this URL,
+   * falling back to the static `versions` prop if the fetch fails.
+   * This ensures all deployed versions are always visible in the switcher.
+   */
+  versionsUrl?: string;
 };
 export const VersionSwitcher = ({
@@ -76,17 +83,47 @@ export const VersionSwitcher = ({
   extraAction,
   previousVersionUrl,
   versions,
+  versionsUrl,
 }: VersionSwitcherProps) => {
   const [isPopoverOpen, setPopoverOpen] = useState(false);
+  const [allVersions, setAllVersions] = useState(versions);
   const styles = useEuiMemoizedStyles(getStyles);
-  if (!versions) return null;
+  // Fetch the latest versions list from the main deployment
+  // to ensure the switcher always shows all available versions,
+  // even on older documentation deployments
+  useEffect(() => {
+    if (!versionsUrl) return;
+    fetch(versionsUrl)
+      .then((response) => {
+        if (!response.ok) throw new Error('Failed to fetch versions');
+        return response.json();
+      })
+      .then((data) => {
+        if (data?.euiVersions?.length) {
+          // Ensure the current version is always included
+          const fetchedVersions: string[] = data.euiVersions;
+          if (!fetchedVersions.includes(currentVersion)) {
+            fetchedVersions.push(currentVersion);
+          }
+          setAllVersions(fetchedVersions);
+        }
+      })
+      .catch(() => {
+        // Silently fall back to statically bundled versions
+      });
+  }, [versionsUrl, currentVersion]);
+  if (!allVersions?.length) return null;
+  const latestVersion = allVersions[0];
   const button = (
     <EuiButtonEmpty
       size="s"
       color="text"
-      iconType="arrowDown"
+      iconType="chevronSingleDown"
       iconSide="right"
       css={styles.button}
       onClick={() => setPopoverOpen((isOpen) => !isOpen)}
@@ -109,26 +146,26 @@ export const VersionSwitcher = ({
     >
       <FixedSizeList
         className="eui-yScroll"
-        itemCount={versions.length}
+        itemCount={allVersions.length}
         itemSize={24}
         height={200}
         width={120}
         innerElementType="ul"
       >
         {({ index, style }) => {
-          const version = versions[index];
+          const version = allVersions[index];
           const isCurrentVersion = version === currentVersion;
           const screenReaderVersion = pronounceVersion(version!);
-          const url = isCurrentVersion
-            ? '/'
-            : `${previousVersionUrl}/v${version}/`;
+          const url =
+            version === latestVersion
+              ? `${previousVersionUrl}/`
+              : `${previousVersionUrl}/v${version}/`;
           return (
             <EuiListGroupItem
               css={styles.listItem}
               style={style}
-              size="xs"
               label={`v${version}`}
               aria-label={screenReaderVersion}
               href={url}

package/src/theme/Admonition/Types.tsx CHANGED Viewed

@@ -32,7 +32,7 @@ const VARIANT_TO_PROPS_MAP: Record<
   tip: { iconType: 'faceHappy', color: 'success' },
   info: { iconType: 'info', color: 'primary' },
   accessibility: { iconType: 'accessibility', color: 'primary' },
-  warning: { iconType: 'alert', color: 'warning' },
+  warning: { iconType: 'warning', color: 'warning' },
   danger: { iconType: 'error', color: 'danger' },
   // Undocumented legacy admonition type aliases
   secondary: {},

package/src/theme/Demo/actions.tsx CHANGED Viewed

@@ -14,6 +14,7 @@ export type ActionComponentProps = {
   activeSource: DemoSourceMeta | null;
   sources: DemoSourceMeta[];
   extraFiles?: ExtraFiles;
+  previewWrapperSource?: string;
 };
 export type ActionComponent = ComponentType<ActionComponentProps>;

package/src/theme/DocBreadcrumbs/Items/Home/index.tsx CHANGED Viewed

@@ -35,7 +35,7 @@ export default function HomeBreadcrumbItem(): JSX.Element {
       >
         {title}
       </Link>
-      <EuiIcon type="arrowRight" size="s" css={styles.icon} />
+      <EuiIcon type="chevronSingleRight" size="s" css={styles.icon} />
     </li>
   );
 }

package/src/theme/DocBreadcrumbs/index.tsx CHANGED Viewed

@@ -88,7 +88,7 @@ function BreadcrumbsItem({
     >
       {children}
       <meta itemProp="position" content={String(index + 1)} />
-      {!active && <EuiIcon type="arrowRight" css={styles.icon} />}
+      {!active && <EuiIcon type="chevronSingleRight" css={styles.icon} />}
     </li>
   );
 }

package/src/theme/DocCard/index.tsx CHANGED Viewed

@@ -75,8 +75,8 @@ function CardCategory({ item }: { item: PropSidebarItemCategory }): ReactNode {
 }
 function CardLink({ item }: { item: PropSidebarItemLink }): ReactNode {
-  // We update Docusaurus `link` icon to EUI `popout` icon
-  const icon = isInternalUrl(item.href) ? 'document' : 'popout';
+  // We update Docusaurus `link` icon to EUI `external` icon
+  const icon = isInternalUrl(item.href) ? 'document' : 'external';
   const doc = useDocById(item.docId ?? undefined);
   return (
     <CardLayout

package/src/theme/DocSidebarItem/Category/index.tsx CHANGED Viewed

@@ -138,7 +138,7 @@ function CollapseButton({
       onClick={onClick}
       {...rest}
     >
-      <EuiIcon size="s" type={collapsed ? 'arrowRight' : 'arrowDown'} />
+      <EuiIcon size="s" type={collapsed ? 'chevronSingleRight' : 'chevronSingleDown'} />
     </button>
   );
 }

package/src/theme/NavbarItem/NavbarNavLink.tsx CHANGED Viewed

@@ -40,7 +40,7 @@ const CUSTOM_LINK_COMPONENT_MAP: Record<
   },
   changelog: {
     component: NavbarItem,
-    icon: 'cheer',
+    icon: 'popper',
   },
   figma: {
     component: NavbarItem,

package/src/theme/PaginatorNavLink/index.tsx CHANGED Viewed

@@ -63,9 +63,9 @@ export default function PaginatorNavLink(props: Props): JSX.Element {
       {subLabel && <div className="pagination-nav__sublabel">{subLabel}</div>}
       <div className="pagination-nav__label">
-        {isPrev && <EuiIcon type="arrowLeft" />}
+        {isPrev && <EuiIcon type="chevronSingleLeft" />}
         {title}
-        {isNext && <EuiIcon type="arrowRight" />}
+        {isNext && <EuiIcon type="chevronSingleRight" />}
       </div>
     </Link>
   );