@elastic/eui-docusaurus-theme 2.7.0 → 2.8.0

package/lib/components/version_switcher/index.js

@@ -8,14 +8,16 @@ import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
  */
 import { useEffect, useState } from 'react';
 import { css } from '@emotion/react';
-import { FixedSizeList } from 'react-window';
-import { EuiButtonEmpty, euiFocusRing, EuiListGroupItem, EuiPopover, useEuiMemoizedStyles, } from '@elastic/eui';
+import { EuiButtonEmpty, euiFocusRing, EuiListGroup, EuiListGroupItem, EuiPopover, useEuiMemoizedStyles, useEuiYScroll, } from '@elastic/eui';
 const getStyles = (euiThemeContext) => {
     const { euiTheme } = euiThemeContext;
     return {
         button: css `
       font-weight: ${euiTheme.font.weight.bold};
       color: ${euiTheme.colors.primary};
+    `,
+        list: css `
+      max-block-size: 200px;
     `,
         listItem: css `
       .euiListGroupItem__button:focus-visible {
@@ -67,13 +69,12 @@ export const VersionSwitcher = ({ ariaLabel, currentVersion, extraAction, previo
         return null;
     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];
+    return (_jsx(EuiPopover, { isOpen: isPopoverOpen, closePopover: () => setPopoverOpen(false), button: button, repositionOnScroll: true, panelPaddingSize: "xs", "aria-label": ariaLabel, children: _jsx(EuiListGroup, { css: [styles.list, useEuiYScroll()], children: allVersions.map((version) => {
                 const isCurrentVersion = version === currentVersion;
                 const screenReaderVersion = pronounceVersion(version);
                 const url = version === latestVersion
                     ? `${previousVersionUrl}/`
                     : `${previousVersionUrl}/v${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) }));
-            } }) }));
+                return (_jsx(EuiListGroupItem, { css: styles.listItem, label: `v${version}`, "aria-label": screenReaderVersion, href: url, isActive: isCurrentVersion, color: isCurrentVersion ? 'primary' : 'text', extraAction: extraAction?.(version) }, version));
+            }) }) }));
 };

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

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

package/lib/theme/Logo/index.js

@@ -11,14 +11,16 @@ import { css } from '@emotion/react';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import { useThemeConfig, } from '@docusaurus/theme-common';
-import { EuiImage, euiTextTruncate, useEuiMemoizedStyles, } from '@elastic/eui';
+import { useThemeConfig } from '@docusaurus/theme-common';
+import { EuiImage, euiCanAnimate, euiTextTruncate, useEuiMemoizedStyles, } from '@elastic/eui';
 import { AppThemeContext } from '../../components/theme_context';
+const EUI_LOGO = 'eui_logo.svg';
+const LOGO_DISTANCE = '5px';
 const getStyles = ({ euiTheme }) => ({
     wrapper: css `
-    ${euiTextTruncate()}
     // create space to prevent focus outline from being cut off
     padding: ${euiTheme.size.xs};
+    min-inline-size: 0;
 
     @media (min-width: 997px) {
       border-right: ${euiTheme.border.thin};
@@ -27,7 +29,6 @@ const getStyles = ({ euiTheme }) => ({
     .navbar__brand {
       display: flex;
       align-items: center;
-
       margin-inline-end: ${euiTheme.size.m};
 
       @media (min-width: 997px) {
@@ -36,27 +37,80 @@ const getStyles = ({ euiTheme }) => ({
     }
 
     .navbar__logo {
-      height: 100%;
+      overflow: visible;
+      height: auto;
+    }
+
+    .navbar__title {
+      ${euiTextTruncate()}
     }
   `,
     imageWrapper: css `
+    overflow: visible;
     margin-inline-end: ${euiTheme.size.m};
   `,
     image: css `
     position: relative;
+    display: block;
+    block-size: ${euiTheme.size.l};
+    inline-size: ${euiTheme.size.l};
+    margin: 0;
+  `,
+    logo: css `
+    display: block;
+    overflow: visible;
     block-size: ${euiTheme.size.l};
     inline-size: ${euiTheme.size.l};
     margin: 0;
+    // Firefox clips transformed SVG descendants to the viewport even
+    // with overflow: visible. Expand the clip so pieces can travel 5px.
+    @supports (-moz-appearance: none) {
+      clip-path: inset(-8px);
+    }
+
+    .euiNavbarLogo__piece {
+      transform: translate(0, 0);
+
+      ${euiCanAnimate} {
+        transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
+      }
+    }
+
+    ${euiCanAnimate} {
+      &:hover {
+        .euiNavbarLogo__pink {
+          transform: translate(-${LOGO_DISTANCE}, -${LOGO_DISTANCE});
+        }
+
+        .euiNavbarLogo__yellow {
+          transform: translate(${LOGO_DISTANCE}, ${LOGO_DISTANCE});
+        }
+
+        .euiNavbarLogo__teal {
+          transform: translate(${LOGO_DISTANCE}, -${LOGO_DISTANCE});
+        }
+
+        .euiNavbarLogo__blue {
+          transform: translate(-${LOGO_DISTANCE}, ${LOGO_DISTANCE});
+        }
+      }
+    }
   `,
 });
+function EuiNavbarLogo({ alt, className, style, }) {
+    const styles = useEuiMemoizedStyles(getStyles);
+    const isDecorative = alt === '';
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", fill: "none", overflow: "visible", className: className, style: style, css: styles.logo, "aria-hidden": isDecorative ? true : undefined, role: isDecorative ? undefined : 'img', "aria-label": isDecorative ? undefined : alt, children: [_jsx("path", { fill: "#FF957D", d: "M18 25c-.5-5.5-5.5-10.5-11-11l7-7c.5 5.5 5.5 10.5 11 11l-7 7z" }), _jsx("circle", { className: "euiNavbarLogo__piece euiNavbarLogo__pink", cx: "7", cy: "7", r: "7", fill: "#F04E98" }), _jsx("circle", { className: "euiNavbarLogo__piece euiNavbarLogo__yellow", cx: "25", cy: "25", r: "7", fill: "#FEC514" }), _jsx("path", { className: "euiNavbarLogo__piece euiNavbarLogo__teal", fill: "#00BFB3", d: "M31 14c-7.18 0-13-5.82-13-13h13v13z" }), _jsx("path", { className: "euiNavbarLogo__piece euiNavbarLogo__blue", fill: "#1BA9F5", d: "M1 18c7.18 0 13 5.82 13 13H1V18z" })] }));
+}
 function LogoThemedImage({ logo, alt, imageClassName, }) {
     const { colorMode } = useContext(AppThemeContext);
     const isDarkMode = colorMode === 'dark';
     const styles = useEuiMemoizedStyles(getStyles);
+    const isEuiLogo = logo.src.includes(EUI_LOGO);
     const src = isDarkMode
         ? useBaseUrl(logo.srcDark || logo.src)
         : useBaseUrl(logo.src);
-    const themedImage = (_jsx(EuiImage, { src: src, size: "fullWidth", alt: alt, className: logo.className, wrapperProps: {
+    const themedImage = isEuiLogo ? (_jsx(EuiNavbarLogo, { alt: alt, className: logo.className, style: logo.style })) : (_jsx(EuiImage, { src: src, size: "fullWidth", alt: alt, className: logo.className, wrapperProps: {
             style: logo.style,
             css: styles.image,
         } }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elastic/eui-docusaurus-theme",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "EUI theme for Docusaurus",
   "license": "SEE LICENSE IN LICENSE.txt",
   "scripts": {
@@ -40,19 +40,17 @@
     "@docusaurus/theme-common": "^3.7.0",
     "@docusaurus/utils-validation": "^3.7.0",
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eui": "^118.0.0",
+    "@elastic/eui": "^119.1.0",
     "@elastic/eui-theme-borealis": "^8.0.0",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",
-    "@types/react-window": "^1.8.8",
     "clsx": "^2.1.1",
     "dedent": "^1.5.3",
     "lz-string": "^1.5.0",
     "moment": "^2.30.1",
     "prism-react-renderer": "^2.3.1",
     "react-is": "^18.3.1",
-    "react-live": "patch:react-live@npm%3A4.1.7#~/.yarn/patches/react-live-npm-4.1.7-7b41625faa.patch",
-    "react-window": "^1.8.10"
+    "react-live": "patch:react-live@npm%3A4.1.7#~/.yarn/patches/react-live-npm-4.1.7-7b41625faa.patch"
   },
   "peerDependencies": {
     "react": "^18.0.0",

package/src/components/version_switcher/index.tsx

@@ -8,13 +8,14 @@
 
 import { ComponentProps, useEffect, useState } from 'react';
 import { css } from '@emotion/react';
-import { FixedSizeList } from 'react-window';
 import {
   EuiButtonEmpty,
   euiFocusRing,
+  EuiListGroup,
   EuiListGroupItem,
   EuiPopover,
   useEuiMemoizedStyles,
+  useEuiYScroll,
   UseEuiTheme,
 } from '@elastic/eui';
 
@@ -26,6 +27,9 @@ const getStyles = (euiThemeContext: UseEuiTheme) => {
       font-weight: ${euiTheme.font.weight.bold};
       color: ${euiTheme.colors.primary};
     `,
+    list: css`
+      max-block-size: 200px;
+    `,
     listItem: css`
       .euiListGroupItem__button:focus-visible {
         // overriding the global "outset" style to ensure the focus style is not cut off
@@ -144,18 +148,10 @@ export const VersionSwitcher = ({
       panelPaddingSize="xs"
       aria-label={ariaLabel}
     >
-      <FixedSizeList
-        className="eui-yScroll"
-        itemCount={allVersions.length}
-        itemSize={24}
-        height={200}
-        width={120}
-        innerElementType="ul"
-      >
-        {({ index, style }) => {
-          const version = allVersions[index];
+      <EuiListGroup css={[styles.list, useEuiYScroll()]}>
+        {allVersions.map((version) => {
           const isCurrentVersion = version === currentVersion;
-          const screenReaderVersion = pronounceVersion(version!);
+          const screenReaderVersion = pronounceVersion(version);
 
           const url =
             version === latestVersion
@@ -164,8 +160,8 @@ export const VersionSwitcher = ({
 
           return (
             <EuiListGroupItem
+              key={version}
               css={styles.listItem}
-              style={style}
               label={`v${version}`}
               aria-label={screenReaderVersion}
               href={url}
@@ -174,8 +170,8 @@ export const VersionSwitcher = ({
               extraAction={extraAction?.(version)}
             />
           );
-        }}
-      </FixedSizeList>
+        })}
+      </EuiListGroup>
     </EuiPopover>
   );
 };

package/src/theme/Logo/index.tsx

@@ -6,19 +6,16 @@
  * Side Public License, v 1.
  */
 
-import { useContext, JSX } from 'react';
+import { useContext, type CSSProperties, type JSX } from 'react';
 import { css } from '@emotion/react';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import {
-  useColorMode,
-  useThemeConfig,
-  type NavbarLogo,
-} from '@docusaurus/theme-common';
+import { useThemeConfig, type NavbarLogo } from '@docusaurus/theme-common';
 import type { Props } from '@theme-original/Logo';
 import {
   EuiImage,
+  euiCanAnimate,
   euiTextTruncate,
   useEuiMemoizedStyles,
   UseEuiTheme,
@@ -26,11 +23,14 @@ import {
 
 import { AppThemeContext } from '../../components/theme_context';
 
+const EUI_LOGO = 'eui_logo.svg';
+const LOGO_DISTANCE = '5px';
+
 const getStyles = ({ euiTheme }: UseEuiTheme) => ({
   wrapper: css`
-    ${euiTextTruncate()}
     // create space to prevent focus outline from being cut off
     padding: ${euiTheme.size.xs};
+    min-inline-size: 0;
 
     @media (min-width: 997px) {
       border-right: ${euiTheme.border.thin};
@@ -39,7 +39,6 @@ const getStyles = ({ euiTheme }: UseEuiTheme) => ({
     .navbar__brand {
       display: flex;
       align-items: center;
-
       margin-inline-end: ${euiTheme.size.m};
 
       @media (min-width: 997px) {
@@ -48,20 +47,124 @@ const getStyles = ({ euiTheme }: UseEuiTheme) => ({
     }
 
     .navbar__logo {
-      height: 100%;
+      overflow: visible;
+      height: auto;
+    }
+
+    .navbar__title {
+      ${euiTextTruncate()}
     }
   `,
   imageWrapper: css`
+    overflow: visible;
     margin-inline-end: ${euiTheme.size.m};
   `,
   image: css`
     position: relative;
+    display: block;
     block-size: ${euiTheme.size.l};
     inline-size: ${euiTheme.size.l};
     margin: 0;
   `,
+  logo: css`
+    display: block;
+    overflow: visible;
+    block-size: ${euiTheme.size.l};
+    inline-size: ${euiTheme.size.l};
+    margin: 0;
+    // Firefox clips transformed SVG descendants to the viewport even
+    // with overflow: visible. Expand the clip so pieces can travel 5px.
+    @supports (-moz-appearance: none) {
+      clip-path: inset(-8px);
+    }
+
+    .euiNavbarLogo__piece {
+      transform: translate(0, 0);
+
+      ${euiCanAnimate} {
+        transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
+      }
+    }
+
+    ${euiCanAnimate} {
+      &:hover {
+        .euiNavbarLogo__pink {
+          transform: translate(-${LOGO_DISTANCE}, -${LOGO_DISTANCE});
+        }
+
+        .euiNavbarLogo__yellow {
+          transform: translate(${LOGO_DISTANCE}, ${LOGO_DISTANCE});
+        }
+
+        .euiNavbarLogo__teal {
+          transform: translate(${LOGO_DISTANCE}, -${LOGO_DISTANCE});
+        }
+
+        .euiNavbarLogo__blue {
+          transform: translate(-${LOGO_DISTANCE}, ${LOGO_DISTANCE});
+        }
+      }
+    }
+  `,
 });
 
+function EuiNavbarLogo({
+  alt,
+  className,
+  style,
+}: {
+  alt: string;
+  className?: string;
+  style?: CSSProperties;
+}) {
+  const styles = useEuiMemoizedStyles(getStyles);
+  const isDecorative = alt === '';
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 32 32"
+      fill="none"
+      overflow="visible"
+      className={className}
+      style={style}
+      css={styles.logo}
+      aria-hidden={isDecorative ? true : undefined}
+      role={isDecorative ? undefined : 'img'}
+      aria-label={isDecorative ? undefined : alt}
+    >
+      <path
+        fill="#FF957D"
+        d="M18 25c-.5-5.5-5.5-10.5-11-11l7-7c.5 5.5 5.5 10.5 11 11l-7 7z"
+      />
+      <circle
+        className="euiNavbarLogo__piece euiNavbarLogo__pink"
+        cx="7"
+        cy="7"
+        r="7"
+        fill="#F04E98"
+      />
+      <circle
+        className="euiNavbarLogo__piece euiNavbarLogo__yellow"
+        cx="25"
+        cy="25"
+        r="7"
+        fill="#FEC514"
+      />
+      <path
+        className="euiNavbarLogo__piece euiNavbarLogo__teal"
+        fill="#00BFB3"
+        d="M31 14c-7.18 0-13-5.82-13-13h13v13z"
+      />
+      <path
+        className="euiNavbarLogo__piece euiNavbarLogo__blue"
+        fill="#1BA9F5"
+        d="M1 18c7.18 0 13 5.82 13 13H1V18z"
+      />
+    </svg>
+  );
+}
+
 function LogoThemedImage({
   logo,
   alt,
@@ -75,12 +178,15 @@ function LogoThemedImage({
   const isDarkMode = colorMode === 'dark';
 
   const styles = useEuiMemoizedStyles(getStyles);
+  const isEuiLogo = logo.src.includes(EUI_LOGO);
 
   const src = isDarkMode
     ? useBaseUrl(logo.srcDark || logo.src)
     : useBaseUrl(logo.src);
 
-  const themedImage = (
+  const themedImage = isEuiLogo ? (
+    <EuiNavbarLogo alt={alt} className={logo.className} style={logo.style} />
+  ) : (
     <EuiImage
       src={src}
       size="fullWidth"