Merge branch 'main' into high-contrast-mode

.buildkite/scripts/lifecycle/pre_command.sh

@@ -7,14 +7,14 @@ echo '[SOURCE]: Buildkite dependencies'
 source .buildkite/scripts/common/utils.sh
 
 echo '[INSTALL]: Non-exported variables'
-GITHUB_ACCOUNT=secret/ci/elastic-eui/kibanamachine
+GITHUB_ACCOUNT=secret/ci/elastic-eui/github_machine_user
 VAULT_ACCOUNT=secret/ci/elastic-eui/bekitzur-kibana-service-account
 
 echo '[INSTALL]: Exported variables'
 GCE_ACCOUNT=$(retry 5 vault read -field=value $VAULT_ACCOUNT)
 export GCE_ACCOUNT
 
-GITHUB_TOKEN=$(retry 5 vault read -field=github_token $GITHUB_ACCOUNT)
+GITHUB_TOKEN=$(retry 5 vault read -field=kibanamachine_token $GITHUB_ACCOUNT)
 export GITHUB_TOKEN
 
 DOCKER_BASE_IMAGE=docker.elastic.co/eui/ci:6.6

.github/workflows/stale_issues.yml

@@ -10,6 +10,7 @@ jobs:
   stale-prs: # close stale PRs after ~3 months
     permissions:
       pull-requests: write
+      issues: none # this will generate GH actions permissions errors. This is fine; we'd rather the action error than try to parse issues it doesn't need to
     runs-on: ubuntu-latest
     steps:
       - uses: actions/stale@v8
@@ -27,6 +28,7 @@ jobs:
   stale-issues: # close stale issues after ~1 year
     permissions:
       issues: write
+      pull-requests: none # this will generate GH actions permissions errors. This is fine; we'd rather the action error than try to parse PRs it doesn't need to
     runs-on: ubuntu-latest
     steps:
       - uses: actions/stale@v8
@@ -46,6 +48,7 @@ jobs:
   answered-issues: # close answered issues after 3 days if no response
     permissions:
       issues: write
+      pull-requests: none  # this will generate GH actions permissions errors. This is fine; we'd rather the action error than try to parse PRs it doesn't need to
     runs-on: ubuntu-latest
     steps:
       - uses: actions/stale@v8

.yarn/patches/infima-npm-0.2.0-alpha.44-145834fad0.patch

@@ -0,0 +1,59 @@
+diff --git a/dist/css/default/default.css b/dist/css/default/default.css
+index 66dd808169d8697ca5de07ba260c9ee01338d855..df63274cf24a6176a66c05557aa14314b776178a 100644
+--- a/dist/css/default/default.css
++++ b/dist/css/default/default.css
+@@ -1165,54 +1165,6 @@ ol ol ol {
+   list-style-type: lower-alpha;
+ }
+
+-/**
+- * Copyright (c) Facebook, Inc. and its affiliates.
+- *
+- * This source code is licensed under the MIT license found in the
+- * LICENSE file in the root directory of this source tree.
+- */
+-
+-table {
+-  border-collapse: collapse;
+-  display: block;
+-  margin-bottom: var(--ifm-spacing-vertical);
+-  overflow: auto;
+-}
+-
+-table thead tr {
+-    border-bottom: 2px solid var(--ifm-table-border-color);
+-  }
+-
+-table thead {
+-    background-color: var(--ifm-table-stripe-background);
+-  }
+-
+-table tr {
+-    background-color: var(--ifm-table-background);
+-    border-top: var(--ifm-table-border-width) solid
+-      var(--ifm-table-border-color);
+-  }
+-
+-table tr:nth-child(2n) {
+-    background-color: var(--ifm-table-stripe-background);
+-  }
+-
+-table th,
+-  table td {
+-    border: var(--ifm-table-border-width) solid var(--ifm-table-border-color);
+-    padding: var(--ifm-table-cell-padding);
+-  }
+-
+-table th {
+-    background-color: var(--ifm-table-head-background);
+-    color: var(--ifm-table-head-color);
+-    font-weight: var(--ifm-table-head-font-weight);
+-  }
+-
+-table td {
+-    color: var(--ifm-table-cell-color);
+-  }
+-
+ /**
+  * Copyright (c) Facebook, Inc. and its affiliates.
+  *

catalog-info.yaml

@@ -29,7 +29,6 @@ metadata:
 spec:
   type: library
   owner: group:eui-team
-  system: ci-systems
   lifecycle: production
 
 ---

package.json

@@ -32,7 +32,8 @@
     "@babel/core": "^7.21.8",
     "jsdom": "24.1.0",
     "@types/jsdom@npm:^20.0.0": "patch:@types/jsdom@npm%3A20.0.1#~/.yarn/patches/@types-jsdom-npm-20.0.1-5bb899e006.patch",
-    "infima@npm:0.2.0-alpha.43": "patch:infima@npm%3A0.2.0-alpha.43#~/.yarn/patches/infima-npm-0.2.0-alpha.43-8d3b77b44d.patch"
+    "infima@npm:0.2.0-alpha.43": "patch:infima@npm%3A0.2.0-alpha.43#~/.yarn/patches/infima-npm-0.2.0-alpha.43-8d3b77b44d.patch",
+    "infima@npm:0.2.0-alpha.44": "patch:infima@npm%3A0.2.0-alpha.44#~/.yarn/patches/infima-npm-0.2.0-alpha.44-145834fad0.patch"
   },
   "packageManager": "[email protected]"
 }

packages/docusaurus-theme/package.json

@@ -34,7 +34,7 @@
     "@docusaurus/theme-common": "^3.5.2",
     "@docusaurus/utils-validation": "^3.5.2",
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eui": "94.5.0",
+    "@elastic/eui": "97.2.0",
     "@elastic/eui-docgen": "workspace:^",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",

packages/docusaurus-theme/src/components/call_out/index.tsx

@@ -43,6 +43,8 @@ const getStyles = (theme: UseEuiTheme, variant: VARIANTS) => {
 
   return {
     note: css`
+      margin-block-start: var(--eui-theme-content-vertical-spacing);
+
       &:not(:last-child) {
         margin-block-end: ${euiTheme.size.xl};
       }

packages/docusaurus-theme/src/components/demo/actions_bar/actions_bar.tsx

@@ -1,3 +1,11 @@
+/*
+ * 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 {
   EuiButton,
   EuiButtonIcon,

packages/docusaurus-theme/src/components/demo/actions_bar/index.ts

@@ -1 +1,9 @@
+/*
+ * 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.
+ */
+
 export { DemoActionsBar, type DemoActionsBarProps } from './actions_bar';

packages/docusaurus-theme/src/components/demo/code_transformer.ts

@@ -1,3 +1,11 @@
+/*
+ * 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 IMPORT_REGEX = /^import [^'"]* from ['"]([^.'"\n ][^'"\n ]*)['"];?/gm;
 const DEFAULT_EXPORT_REGEX = /export default /;
 const COMPONENT_ONLY_REGEX = /^\(?</;

packages/docusaurus-theme/src/components/demo/context.ts

@@ -1,3 +1,11 @@
+/*
+ * 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 { createContext, useContext } from 'react';
 import { DemoSourceMeta } from './demo';
 

packages/docusaurus-theme/src/components/demo/create_demo.tsx

@@ -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 { Demo, DemoProps } from './demo';
+
+/**
+ * Creates a custom <Demo /> component with predefined props.
+ */
+export const createDemo =
+  (defaultProps: Partial<DemoProps>): typeof Demo =>
+  (props: DemoProps) =>
+    <Demo {...defaultProps} {...props} />;

packages/docusaurus-theme/src/components/demo/demo.tsx

@@ -1,3 +1,11 @@
+/*
+ * 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 {
   Children,
   PropsWithChildren,
@@ -14,11 +22,12 @@ import {
   UseEuiTheme,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
+import { demoDefaultScope } from '@theme/Demo/default_scope';
 import { DemoContext, DemoContextObject } from './context';
 import { DemoEditor } from './editor';
 import { DemoPreview } from './preview';
 import { DemoSource } from './source';
-import { demoDefaultScope } from './scope';
+import { originalScope } from './scope';
 import { DemoActionsBar } from './actions_bar';
 import { demoCodeTransformer } from './code_transformer';
 import { DemoPreviewProps } from './preview/preview';
@@ -42,6 +51,7 @@ export interface DemoProps extends PropsWithChildren {
    */
   scope?: Record<string, unknown>;
   previewPadding?: DemoPreviewProps['padding'];
+  previewWrapper?: DemoPreviewProps['wrapperComponent'];
 }
 
 const getDemoStyles = (euiTheme: UseEuiTheme) => ({
@@ -60,6 +70,7 @@ export const Demo = ({
   scope,
   isSourceOpen: _isSourceOpen = false,
   previewPadding,
+  previewWrapper,
 }: DemoProps) => {
   const styles = useEuiMemoizedStyles(getDemoStyles);
   const [sources, setSources] = useState<DemoSourceMeta[]>([]);
@@ -69,16 +80,20 @@ export const Demo = ({
   // liveProviderKey restarts the demo to its initial state
   const [liveProviderKey, setLiveProviderKey] = useState<number>(0);
 
-  const finalScope = useMemo(() => ({
-    ...demoDefaultScope,
-    ...scope,
-  }), [scope]);
+  const finalScope = useMemo(
+    () => ({
+      ...originalScope,
+      ...demoDefaultScope,
+      ...scope,
+    }),
+    [scope]
+  );
 
   const addSource = useCallback<DemoContextObject['addSource']>(
     (source: DemoSourceMeta) => {
-      setSources((sources) => ([...sources, source]));
+      setSources((sources) => [...sources, source]);
     },
-    [],
+    []
   );
 
   const onClickCopyToClipboard = useCallback(() => {
@@ -104,7 +119,10 @@ export const Demo = ({
           theme={prismThemes.dracula}
           scope={finalScope}
         >
-          <DemoPreview padding={previewPadding} />
+          <DemoPreview
+            padding={previewPadding}
+            wrapperComponent={previewWrapper}
+          />
           <DemoActionsBar
             isSourceOpen={isSourceOpen}
             setSourceOpen={setIsSourceOpen}

packages/docusaurus-theme/src/components/demo/editor/index.ts

@@ -1 +1,9 @@
+/*
+ * 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.
+ */
+
 export { DemoEditor } from './editor';

packages/docusaurus-theme/src/components/demo/index.ts

@@ -1,2 +1,11 @@
+/*
+ * 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.
+ */
+
 export { Demo, type DemoProps } from './demo';
 export { DemoSource } from './source';
+export { createDemo } from './create_demo';

packages/docusaurus-theme/src/components/demo/preview/index.ts

@@ -1 +1,9 @@
+/*
+ * 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.
+ */
+
 export { DemoPreview } from './preview';

packages/docusaurus-theme/src/components/demo/preview/preview.tsx

@@ -1,13 +1,32 @@
+/*
+ * 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 { css } from '@emotion/react';
 import { LivePreview } from 'react-live';
+import {
+  ComponentType,
+  CSSProperties,
+  Fragment,
+  PropsWithChildren,
+} from 'react';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import ErrorBoundary from '@docusaurus/ErrorBoundary';
 import { ErrorBoundaryErrorMessageFallback } from '@docusaurus/theme-common';
-import { UseEuiTheme, useEuiTheme, EuiPaddingSize, euiPaddingSize } from '@elastic/eui';
-import { CSSProperties } from 'react';
+import {
+  UseEuiTheme,
+  useEuiTheme,
+  EuiPaddingSize,
+  euiPaddingSize,
+} from '@elastic/eui';
 
 export interface DemoPreviewProps {
   padding?: EuiPaddingSize;
+  wrapperComponent?: ComponentType<PropsWithChildren>;
 }
 
 const getPreviewStyles = (euiTheme: UseEuiTheme) => ({
@@ -22,11 +41,12 @@ const getPreviewStyles = (euiTheme: UseEuiTheme) => ({
  * of the live component preview component.
  * Due to the limitations of react-live the demo is only rendered client-side.
  */
-const PreviewLoader = () => (
-  <div>Loading...</div>
-);
+const PreviewLoader = () => <div>Loading...</div>;
 
-export const DemoPreview = ({ padding = 'l' }: DemoPreviewProps) => {
+export const DemoPreview = ({
+  padding = 'l',
+  wrapperComponent: WrapperComponent = Fragment,
+}: DemoPreviewProps) => {
   const euiTheme = useEuiTheme();
   const styles = getPreviewStyles(euiTheme);
   const paddingSize = euiPaddingSize(euiTheme, padding);
@@ -39,9 +59,15 @@ export const DemoPreview = ({ padding = 'l' }: DemoPreviewProps) => {
     <BrowserOnly fallback={<PreviewLoader />}>
       {() => (
         <>
-          <ErrorBoundary fallback={(params: any) => <ErrorBoundaryErrorMessageFallback {...params} />}>
+          <ErrorBoundary
+            fallback={(params: any) => (
+              <ErrorBoundaryErrorMessageFallback {...params} />
+            )}
+          >
             <div css={styles.previewWrapper} style={style}>
-              <LivePreview />
+              <WrapperComponent>
+                <LivePreview />
+              </WrapperComponent>
             </div>
           </ErrorBoundary>
         </>