@elastic/eui-docusaurus-theme 2.2.0 → 2.3.0

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

@@ -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

@@ -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,18 +33,46 @@ 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 latestVersion = allVersions[0];
     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];
+    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) }));
             } }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elastic/eui-docusaurus-theme",
-  "version": "2.2.0",
+  "version": "2.3.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": "^113.0.0",
+    "@elastic/eui-theme-borealis": "^6.0.0",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",
     "@types/react-window": "^1.8.8",

package/src/components/version_switcher/index.tsx

@@ -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,11 +83,41 @@ 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
@@ -109,19 +146,19 @@ 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
-            ? '/'
+          const url = version === latestVersion
+            ? `${previousVersionUrl}/`
             : `${previousVersionUrl}/v${version}/`;
 
           return (