docs: Add latest components MDX content (#8095)

.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.
+  *

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": "yarn@4.2.2"
 }

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

@@ -22,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';
@@ -81,6 +82,7 @@ export const Demo = ({
 
   const finalScope = useMemo(
     () => ({
+      ...originalScope,
       ...demoDefaultScope,
       ...scope,
     }),

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

@@ -7,27 +7,8 @@
  */
 
 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
- */
-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
+export const originalScope: Record<string, unknown> = {
   React,
   ...React,
-
-  // EUI exports
-  ...EUI,
-
-  // Emotion
-  ...EmotionReact,
-
-  require: clientSideRequire,
 };

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

@@ -8,3 +8,4 @@
 
 export { createDemo } from './demo';
 export { Guideline, GuidelineText } from './guideline';
+export { AppThemeContext } from './theme_context';

packages/docusaurus-theme/src/theme/Demo/default_scope.ts

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+/**
+ * A custom client-side require() alternative to inform users it's not available
+ * in our demo environment
+ */
+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 = {
+  require: clientSideRequire,
+};

packages/docusaurus-theme/src/theme/MDXComponents/OrderedList.tsx

@@ -12,6 +12,7 @@ import { css } from '@emotion/react';
 
 const getOrderedListStyles = ({ euiTheme }: UseEuiTheme) => css`
   margin-inline-start: ${euiTheme.size.l};
+  list-style: decimal;
 `;
 
 export const OrderedList = ({ children, ...restProps }: HTMLAttributes<HTMLUListElement>) => {

packages/docusaurus-theme/src/theme/MDXComponents/UnorderedList.tsx

@@ -12,6 +12,7 @@ import { css } from '@emotion/react';
 
 const getUnorderedListStyles = ({ euiTheme }: UseEuiTheme) => css`
   margin-inline-start: ${euiTheme.size.l};
+  list-style: disc;
 `;
 
 export const UnorderedList = ({ children, ...restProps }: HTMLAttributes<HTMLUListElement>) => {

packages/docusaurus-theme/src/theme/reset.styles.ts

@@ -39,6 +39,10 @@ export const getResetStyles = (theme: UseEuiTheme) => {
       margin: 0;
     }
 
+    ul, ol {
+      list-style: none;
+    }
+
     * {
       ${euiFocusRing(theme, 'outset', { color: euiTheme.colors.primary })};
     }

packages/docusaurus-theme/src/theme/theme.d.ts

@@ -542,3 +542,9 @@ declare module '@theme/Heading' {
 
   export default function Heading(props: Props): JSX.Element;
 }
+
+declare module '@theme/Demo/default_scope' {
+  export type ScopeType = Record<string, unknown>;
+
+  export const demoDefaultScope: ScopeType;
+}