diff --git a/next.config.js b/next.config.js
index f8ea6e0c..8c3fa614 100644
--- a/next.config.js
+++ b/next.config.js
@@ -7,7 +7,7 @@ const iniparser = require('iniparser');
const withBundleAnalyzer = require('@next/bundle-analyzer');
const CopyWebpackPlugin = require('copy-webpack-plugin');
-const { IgnorePlugin, NormalModuleReplacementPlugin } = require('webpack');
+const { IgnorePlugin } = require('webpack');
/**
* If you are deploying your site under a directory other than `/` e.g.
@@ -66,10 +66,7 @@ const nextConfig = {
}
return (context, callback) => {
- if (
- context.request.indexOf('@elastic/eui') > -1 ||
- context.request.indexOf('react-ace') > -1
- ) {
+ if (context.request.indexOf('@elastic/eui') > -1) {
return callback();
}
@@ -77,13 +74,6 @@ const nextConfig = {
};
});
- // Replace `react-ace` with an empty module on the server.
- // https://webpack.js.org/loaders/null-loader/
- config.module.rules.push({
- test: /react-ace/,
- use: 'null-loader',
- });
-
// Mock HTMLElement on the server-side
const definePluginId = config.plugins.findIndex(
p => p.constructor.name === 'DefinePlugin'
@@ -99,18 +89,6 @@ const nextConfig = {
config.plugins.push(
new CopyWebpackPlugin({ patterns: themeConfig.copyConfig }),
- // We don't want to load all highlight.js language - provide a mechanism to register just some.
- // If you need to highlight more than just JSON, edit the file below.
- new NormalModuleReplacementPlugin(
- /^highlight\.js$/,
- path.join(__dirname, `src/lib/highlight.ts`)
- ),
-
- new NormalModuleReplacementPlugin(
- /^lowlight$/,
- path.join(__dirname, `src/lib/lowlight.ts`)
- ),
-
// Moment ships with a large number of locales. Exclude them, leaving
// just the default English locale. If you need other locales, see:
// https://create-react-app.dev/docs/troubleshooting/#momentjs-locales-are-missing
diff --git a/package.json b/package.json
index 0ad7af98..03013f0f 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,9 @@
"dependencies": {},
"devDependencies": {
"@elastic/datemath": "^5.0.3",
- "@elastic/eui": "^41.3.0",
+ "@elastic/eui": "^43.1.1",
+ "@emotion/cache": "^11.7.1",
+ "@emotion/react": "^11.7.1",
"@next/bundle-analyzer": "^12.0.4",
"@types/node": "^16.11.10",
"@typescript-eslint/eslint-plugin": "^5.5.0",
diff --git a/src/components/chrome/index.tsx b/src/components/chrome/index.tsx
index 451ea99b..0c127260 100644
--- a/src/components/chrome/index.tsx
+++ b/src/components/chrome/index.tsx
@@ -1,5 +1,6 @@
import React, { FunctionComponent, useState } from 'react';
import { useRouter } from 'next/router';
+import createCache from '@emotion/cache';
import {
EuiSideNav,
@@ -10,8 +11,11 @@ import {
EuiErrorBoundary,
EuiFlexGroup,
EuiFlexItem,
+ EuiProvider,
} from '@elastic/eui';
+import { useProvider } from '../provider';
+
import { buildTopLinks } from '../navigation_links/top_links';
import { buildSolutionLinks } from '../navigation_links/solution_links';
import { buildExploreLinks } from '../navigation_links/explore_links';
@@ -60,6 +64,22 @@ const AppLogo: FunctionComponent<{ onClick: () => void }> = ({ onClick }) => (
*/
const Chrome: FunctionComponent = ({ children }) => {
const router = useRouter();
+ const { colorMode } = useProvider();
+
+ /**
+ * This `@emotion/cache` instance is used to insert the global styles
+ * into the correct location in `
`. Otherwise they would be
+ * inserted after the static CSS files, resulting in style clashes.
+ * Only necessary until EUI has converted all components to CSS-in-JS:
+ * https://github.com/elastic/eui/issues/3912
+ */
+ const emotionCache = createCache({
+ key: 'eui-styles',
+ container:
+ typeof document !== 'undefined'
+ ? document.querySelector('meta[name="eui-styles-global"]')
+ : null,
+ });
const [isSideNavOpenOnMobile, setIsSideNavOpenOnMobile] = useState(false);
@@ -84,29 +104,31 @@ const Chrome: FunctionComponent = ({ children }) => {
];
return (
-
-
-
- {
- setIsSideNavOpenOnMobile(false);
- router.push('/');
- }}
- />
-
-
+
+
+
+ {
+ setIsSideNavOpenOnMobile(false);
+ router.push('/');
+ }}
/>
-
-
+
+
+
+
- {children}
-
-
+ {children}
+
+
+
);
};
diff --git a/src/components/chrome/theme_switcher.tsx b/src/components/chrome/theme_switcher.tsx
index 82fd59a5..5abb9e2d 100644
--- a/src/components/chrome/theme_switcher.tsx
+++ b/src/components/chrome/theme_switcher.tsx
@@ -7,28 +7,28 @@ import {
EuiPopoverTitle,
} from '@elastic/eui';
-import { setInitialTheme, setTheme, themeConfig } from '../../lib/theme';
+import { useProvider } from '../provider';
-const initialTheme = setInitialTheme();
+import { setTheme, themeConfig } from '../../lib/theme';
/**
* Renders a dropdown menu for selecting the current theme. The selection
* is set in localStorage, so that it persists between visits.
*/
const ThemeSwitcher: FunctionComponent = () => {
+ const { colorMode, setColorMode } = useProvider();
const [isPopoverOpen, setPopoverOpen] = useState(false);
- const [theme, setThemeInState] = useState(initialTheme);
const handleChangeTheme = (newTheme: string) => {
setPopoverOpen(false);
+ setColorMode(newTheme);
setTheme(newTheme);
- setThemeInState(newTheme);
};
const items = themeConfig.availableThemes.map(each => (
handleChangeTheme(each.id)}>
{each.name}
diff --git a/src/components/provider.tsx b/src/components/provider.tsx
new file mode 100644
index 00000000..c3ff217f
--- /dev/null
+++ b/src/components/provider.tsx
@@ -0,0 +1,32 @@
+import React, {
+ FunctionComponent,
+ createContext,
+ useContext,
+ useState,
+} from 'react';
+
+import { setInitialTheme } from '../lib/theme';
+
+/**
+ * React context for storing theme-related data and callbacks.
+ * `colorMode` is `light` or `dark` and will be consumed by
+ * various downstream components, including `EuiProvider`.
+ */
+export const GlobalProvider = createContext<{
+ colorMode?: string;
+ setColorMode?: (colorMode: string) => void;
+}>({});
+
+export const Provider: FunctionComponent = ({ children }) => {
+ const initialTheme = setInitialTheme();
+ const [colorMode, setColorMode] = useState(initialTheme);
+ return (
+
+ {children}
+
+ );
+};
+
+export const useProvider = () => {
+ return useContext(GlobalProvider);
+};
diff --git a/src/lib/highlight.ts b/src/lib/highlight.ts
deleted file mode 100644
index dd23e13c..00000000
--- a/src/lib/highlight.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-
-/**
- * This is referenced from webpack, and is loaded instead of the normal Highlight.js
- * index. This allows us to register only some languages, which cuts down on the
- * number of languages that we send to the client.
- */
-
-// @ts-ignore
-const hljs = require('highlight.js/lib/highlight');
-
-// Add whatever languages you need here. See also `./lowlight.ts`
-hljs.registerLanguage('json', require('highlight.js/lib/languages/json'));
-
-module.exports = hljs;
diff --git a/src/lib/lowlight.ts b/src/lib/lowlight.ts
deleted file mode 100644
index 371e1468..00000000
--- a/src/lib/lowlight.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-
-/**
- * This is referenced from webpack, and is loaded instead of the normal lowlight
- * index. This allows us to register only some languages, which cuts down on the
- * number of languages that we send to the client.
- */
-
-// @ts-ignore
-const low = require('lowlight/lib/core');
-
-// Add whatever languages you need here. See also `./highlight.ts`
-low.registerLanguage('json', require('highlight.js/lib/languages/json'));
-
-module.exports = low;
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
index 26c966db..9816164b 100644
--- a/src/lib/theme.ts
+++ b/src/lib/theme.ts
@@ -19,6 +19,7 @@ export function setTheme(newThemeName: string): void {
for (const themeLink of getAllThemes()) {
// Disable all theme links, except for the desired theme, which we enable
themeLink.disabled = themeLink.dataset.theme !== newThemeName;
+ themeLink['aria-disabled'] = themeLink.dataset.theme !== newThemeName;
}
// Add a class to the `body` element that indicates which theme we're using.
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 0897874d..08bcdd3c 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -6,6 +6,7 @@ import { EuiErrorBoundary } from '@elastic/eui';
import './app.scss';
import Chrome from '../components/chrome';
+import { Provider } from '../components/provider';
/**
* Next.js uses the App component to initialize pages. You can override it
@@ -20,11 +21,13 @@ const EuiApp: FunctionComponent = ({ Component, pageProps }) => (
{/* You can override this in other pages - see page-2.tsx for an example */}
Next.js EUI Starter
-
-
-
-
-
+
+
+
+
+
+
+
>
);
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index dea304c3..c341a239 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -42,7 +42,10 @@ export default class MyDocument extends Document {
render(): ReactElement {
return (
- {themeConfig.availableThemes.map(each => themeLink(each))}
+
+
+ {themeConfig.availableThemes.map(each => themeLink(each))}
+
diff --git a/yarn.lock b/yarn.lock
index 0aa6c49b..96903bda 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -50,7 +50,7 @@
dependencies:
regenerator-runtime "^0.13.4"
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.9.2":
version "7.16.3"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5"
integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==
@@ -72,10 +72,10 @@
dependencies:
tslib "^1.9.3"
-"@elastic/eui@^41.3.0":
- version "41.3.0"
- resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-41.3.0.tgz#6016229b4112d0f3f0f53a94573020dea42a6cc9"
- integrity sha512-8BE/4ZG0V+V+f3czC9wcCPTIHjovDkCuw9QiEUWrnXuA3uCXCKAx9AzuA5s+OtxfaHf+ELItNqCoGuKKa59jvg==
+"@elastic/eui@^43.1.1":
+ version "43.1.1"
+ resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-43.1.1.tgz#5a4526c0a3fad45dcbe470dc33d1d9b701904494"
+ integrity sha512-ilVAfhM2QtrA8RiG5vgVBOW5xqyjpDeMTH2c/Nf8vEYVgebmTnDAJuaDj5lHpk01oqt2jEEelZkD40XKY2376w==
dependencies:
"@types/chroma-js" "^2.0.0"
"@types/lodash" "^4.14.160"
@@ -116,6 +116,71 @@
uuid "^8.3.0"
vfile "^4.2.0"
+"@emotion/cache@^11.7.1":
+ version "11.7.1"
+ resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.7.1.tgz#08d080e396a42e0037848214e8aa7bf879065539"
+ integrity sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==
+ dependencies:
+ "@emotion/memoize" "^0.7.4"
+ "@emotion/sheet" "^1.1.0"
+ "@emotion/utils" "^1.0.0"
+ "@emotion/weak-memoize" "^0.2.5"
+ stylis "4.0.13"
+
+"@emotion/hash@^0.8.0":
+ version "0.8.0"
+ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+ integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
+"@emotion/memoize@^0.7.4":
+ version "0.7.5"
+ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
+ integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
+
+"@emotion/react@^11.7.1":
+ version "11.7.1"
+ resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.7.1.tgz#3f800ce9b20317c13e77b8489ac4a0b922b2fe07"
+ integrity sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw==
+ dependencies:
+ "@babel/runtime" "^7.13.10"
+ "@emotion/cache" "^11.7.1"
+ "@emotion/serialize" "^1.0.2"
+ "@emotion/sheet" "^1.1.0"
+ "@emotion/utils" "^1.0.0"
+ "@emotion/weak-memoize" "^0.2.5"
+ hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.0.2":
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"
+ integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==
+ dependencies:
+ "@emotion/hash" "^0.8.0"
+ "@emotion/memoize" "^0.7.4"
+ "@emotion/unitless" "^0.7.5"
+ "@emotion/utils" "^1.0.0"
+ csstype "^3.0.2"
+
+"@emotion/sheet@^1.1.0":
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.0.tgz#56d99c41f0a1cda2726a05aa6a20afd4c63e58d2"
+ integrity sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==
+
+"@emotion/unitless@^0.7.5":
+ version "0.7.5"
+ resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+ integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
+"@emotion/utils@^1.0.0":
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
+ integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
+
+"@emotion/weak-memoize@^0.2.5":
+ version "0.2.5"
+ resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
+ integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
+
"@eslint/eslintrc@^0.4.3":
version "0.4.3"
resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@@ -2336,7 +2401,7 @@ hmac-drbg@^1.0.1:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1"
-hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -4494,6 +4559,11 @@ stylis@3.5.4:
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
+stylis@4.0.13:
+ version "4.0.13"
+ resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
+ integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
+
stylus@^0.54.8:
version "0.54.8"
resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.54.8.tgz#3da3e65966bc567a7b044bfe0eece653e099d147"