Merge branch 'main' into search-bar-filters-accessibility

elastic · Nov 22, 2024 · 3da6540 · 3da6540
2 parents 0379f7b + df7a98f
commit 3da6540
Show file tree

Hide file tree

Showing 595 changed files with 64,688 additions and 7,433 deletions.
diff --git a/.yarn/patches/infima-npm-0.2.0-alpha.44-145834fad0.patch b/.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.
+  *
diff --git a/package.json b/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]"
 }
diff --git a/packages/docusaurus-theme/package.json b/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",

diff --git a/packages/docusaurus-theme/src/components/call_out/index.tsx b/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};
       }

diff --git a/packages/docusaurus-theme/src/components/codesandbox_icon/codesandbox_icon.tsx b/packages/docusaurus-theme/src/components/codesandbox_icon/codesandbox_icon.tsx
@@ -1,7 +1,16 @@
-export const CodeSandboxIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" preserveAspectRatio="xMidYMid"
-       viewBox="-20 0 296 296">
-    <path
-      d="M115.498 261.088v-106.61L23.814 101.73v60.773l41.996 24.347v45.7l49.688 28.54Zm23.814.627 50.605-29.151V185.78l42.269-24.495v-60.011l-92.874 53.621v106.82Zm80.66-180.887-48.817-28.289-42.863 24.872-43.188-24.897-49.252 28.667 91.914 52.882 92.206-53.235ZM0 222.212V74.495L127.987 0 256 74.182v147.797l-128.016 73.744L0 222.212Z" />
+import { HTMLAttributes } from 'react';
+
+type Props = HTMLAttributes<SVGElement>;
+
+export const CodeSandboxIcon = (props: Props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    preserveAspectRatio="xMidYMid"
+    viewBox="-20 0 296 296"
+    {...props}
+  >
+    <path d="M115.498 261.088v-106.61L23.814 101.73v60.773l41.996 24.347v45.7l49.688 28.54Zm23.814.627 50.605-29.151V185.78l42.269-24.495v-60.011l-92.874 53.621v106.82Zm80.66-180.887-48.817-28.289-42.863 24.872-43.188-24.897-49.252 28.667 91.914 52.882 92.206-53.235ZM0 222.212V74.495L127.987 0 256 74.182v147.797l-128.016 73.744L0 222.212Z" />
   </svg>
 );
diff --git a/packages/docusaurus-theme/src/components/demo/actions_bar/actions_bar.tsx b/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,

diff --git a/packages/docusaurus-theme/src/components/demo/actions_bar/index.ts b/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';
diff --git a/packages/docusaurus-theme/src/components/demo/code_transformer.ts b/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 = /^\(?</;

diff --git a/packages/docusaurus-theme/src/components/demo/context.ts b/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';
 

diff --git a/packages/docusaurus-theme/src/components/demo/create_demo.tsx b/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} />;
diff --git a/packages/docusaurus-theme/src/components/demo/demo.tsx b/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}

diff --git a/packages/docusaurus-theme/src/components/demo/editor/index.ts b/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';
diff --git a/packages/docusaurus-theme/src/components/demo/index.ts b/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';
diff --git a/packages/docusaurus-theme/src/components/demo/preview/index.ts b/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';
diff --git a/packages/docusaurus-theme/src/components/demo/preview/preview.tsx b/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>
         </>

diff --git a/packages/docusaurus-theme/src/components/demo/scope.ts b/packages/docusaurus-theme/src/components/demo/scope.ts
@@ -1,25 +1,14 @@
-import React from 'react';
-import * as EUI from '@elastic/eui';
-import * as EmotionReact from '@emotion/react';
-
-/**
- * A custom client-side require() alternative to inform users it's not available
- * in our demo environment
+/*
+ * 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 clientSideRequire = () => {
-  throw new Error('require() is not accessible in the interactive demo environment! All EUI and React exports are available in the global scope for you to use without the need to import them.');
-}
 
-export const demoDefaultScope: Record<string, unknown> = {
-  // React
+import React from 'react';
+
+export const originalScope: Record<string, unknown> = {
   React,
   ...React,
-
-  // EUI exports
-  ...EUI,
-
-  // Emotion
-  ...EmotionReact,
-
-  require: clientSideRequire,
 };