@elastic/eui 85.0.1 → 86.0.0-rc1.0

package/optimize/es/components/modal/confirm_modal.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "title", "titleProps", "onCancel", "onConfirm", "cancelButtonText", "confirmButtonText", "confirmButtonDisabled", "className", "buttonColor", "defaultFocusedButton", "isLoading"];
 /*
@@ -10,7 +9,7 @@ var _excluded = ["children", "title", "titleProps", "onCancel", "onConfirm", "ca
  * Side Public License, v 1.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import classnames from 'classnames';
 import { EuiModal } from './modal';
 import { EuiModalFooter } from './modal_footer';
@@ -39,33 +38,21 @@ export var EuiConfirmModal = function EuiConfirmModal(_ref) {
     defaultFocusedButton = _ref.defaultFocusedButton,
     isLoading = _ref.isLoading,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    cancelButton = _useState2[0],
-    setCancelButton = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    confirmButton = _useState4[0],
-    setConfirmButton = _useState4[1];
+  var cancelButtonRef = useRef(null);
+  var confirmButtonRef = useRef(null);
   useEffect(function () {
     // We have to do this instead of using `autoFocus` because React's polyfill for auto-focusing
     // elements conflicts with the focus-trap logic we have on EuiModal.
     // Wait a beat for the focus-trap to complete, and then set focus to the right button. Check that
     // the buttons exist first, because it's possible the modal has been closed already.
-    requestAnimationFrame(function () {
-      if (defaultFocusedButton === CANCEL_BUTTON && cancelButton) {
-        cancelButton.focus();
-      } else if (defaultFocusedButton === CONFIRM_BUTTON && confirmButton) {
-        confirmButton.focus();
+    setTimeout(function () {
+      if (defaultFocusedButton === CANCEL_BUTTON && cancelButtonRef.current) {
+        cancelButtonRef.current.focus();
+      } else if (defaultFocusedButton === CONFIRM_BUTTON && confirmButtonRef.current) {
+        confirmButtonRef.current.focus();
       }
     });
-  });
-  var confirmRef = function confirmRef(node) {
-    return setConfirmButton(node);
-  };
-  var cancelRef = function cancelRef(node) {
-    return setCancelButton(node);
-  };
+  }, [defaultFocusedButton, cancelButtonRef, confirmButtonRef]);
   var classes = classnames('euiModal--confirmation', className);
   var euiTheme = useEuiTheme();
   var styles = euiModalStyles(euiTheme);
@@ -91,13 +78,13 @@ export var EuiConfirmModal = function EuiConfirmModal(_ref) {
   }, message)), ___EmotionJSX(EuiModalFooter, null, ___EmotionJSX(EuiButtonEmpty, {
     "data-test-subj": "confirmModalCancelButton",
     onClick: onCancel,
-    buttonRef: cancelRef
+    buttonRef: cancelButtonRef
   }, cancelButtonText), ___EmotionJSX(EuiButton, {
     "data-test-subj": "confirmModalConfirmButton",
     onClick: onConfirm,
     isLoading: isLoading,
     fill: true,
-    buttonRef: confirmRef,
+    buttonRef: confirmButtonRef,
     color: buttonColor,
     isDisabled: confirmButtonDisabled
   }, confirmButtonText)));

package/optimize/es/components/outside_click_detector/outside_click_detector.js

@@ -22,17 +22,6 @@ import { htmlIdGenerator } from '../../services/accessibility';
 export var EuiOutsideClickDetector = /*#__PURE__*/function (_Component) {
   _inherits(EuiOutsideClickDetector, _Component);
   var _super = _createSuper(EuiOutsideClickDetector);
-  // We are working with the assumption that a click event is
-  // equivalent to a sequential, compound press and release of
-  // the pointing device (mouse, finger, stylus, etc.).
-  // A click event's target can be imprecise, as the value will be
-  // the closest common ancestor of the press (mousedown, touchstart)
-  // and release (mouseup, touchend) events (often <body />) if
-  // the the target of each event differs.
-  // We need the actual event targets to make the correct decisions
-  // about user intention. So, consider the down/start and up/end
-  // items below as the deconstruction of a click event.
-
   function EuiOutsideClickDetector(props) {
     var _this;
     _classCallCheck(this, EuiOutsideClickDetector);
@@ -54,6 +43,16 @@ export var EuiOutsideClickDetector = /*#__PURE__*/function (_Component) {
     // virtual DOM and executes EuiClickDetector's onClick handler,
     // stamping the id even though the event originates outside
     // this component's reified DOM tree.
+    // We are working with the assumption that a click event is
+    // equivalent to a sequential, compound press and release of
+    // the pointing device (mouse, finger, stylus, etc.).
+    // A click event's target can be imprecise, as the value will be
+    // the closest common ancestor of the press (mousedown, touchstart)
+    // and release (mouseup, touchend) events (often <body />) if
+    // the the target of each event differs.
+    // We need the actual event targets to make the correct decisions
+    // about user intention. So, consider the down/start and up/end
+    // items below as the deconstruction of a click event.
     _defineProperty(_assertThisInitialized(_this), "id", void 0);
     _defineProperty(_assertThisInitialized(_this), "capturedDownIds", void 0);
     _defineProperty(_assertThisInitialized(_this), "onClickOutside", function (e) {

package/optimize/es/components/popover/wrapping_popover.js

@@ -38,23 +38,15 @@ export var EuiWrappingPopover = /*#__PURE__*/function (_Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "portal", null);
-    _defineProperty(_assertThisInitialized(_this), "anchor", null);
     _defineProperty(_assertThisInitialized(_this), "setPortalRef", function (node) {
       _this.portal = node;
     });
     _defineProperty(_assertThisInitialized(_this), "setAnchorRef", function (node) {
-      _this.anchor = node;
+      node === null || node === void 0 ? void 0 : node.insertAdjacentElement('beforebegin', _this.props.button);
     });
     return _this;
   }
   _createClass(EuiWrappingPopover, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.anchor) {
-        this.anchor.insertAdjacentElement('beforebegin', this.props.button);
-      }
-    }
-  }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       if (this.props.button.parentNode) {

package/optimize/es/components/portal/portal.js

@@ -1,6 +1,5 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
@@ -36,35 +35,40 @@ export var EuiPortal = /*#__PURE__*/function (_Component) {
     var _this;
     _classCallCheck(this, EuiPortal);
     _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "portalNode", null);
-    if (typeof window === 'undefined') return _possibleConstructorReturn(_this); // Prevent SSR errors
-
-    var insert = _this.props.insert;
-    _this.portalNode = document.createElement('div');
-    _this.portalNode.dataset.euiportal = 'true';
-    if (insert == null) {
-      // no insertion defined, append to body
-      document.body.appendChild(_this.portalNode);
-    } else {
-      // inserting before or after an element
-      var sibling = insert.sibling,
-        position = insert.position;
-      sibling.insertAdjacentElement(insertPositions[position], _this.portalNode);
-    }
+    _this.state = {
+      portalNode: null
+    };
     return _this;
   }
   _createClass(EuiPortal, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.setThemeColor();
-      this.updatePortalRef(this.portalNode);
+      if (typeof window === 'undefined') return; // Prevent SSR errors
+
+      var insert = this.props.insert;
+      var portalNode = document.createElement('div');
+      portalNode.dataset.euiportal = 'true';
+      if (insert == null) {
+        // no insertion defined, append to body
+        document.body.appendChild(portalNode);
+      } else {
+        // inserting before or after an element
+        var sibling = insert.sibling,
+          position = insert.position;
+        sibling.insertAdjacentElement(insertPositions[position], portalNode);
+      }
+      this.setThemeColor(portalNode);
+      this.updatePortalRef(portalNode);
+      this.setState({
+        portalNode: portalNode
+      });
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$portalNode;
-      if ((_this$portalNode = this.portalNode) !== null && _this$portalNode !== void 0 && _this$portalNode.parentNode) {
-        this.portalNode.parentNode.removeChild(this.portalNode);
+      var portalNode = this.state.portalNode;
+      if (portalNode !== null && portalNode !== void 0 && portalNode.parentNode) {
+        portalNode.parentNode.removeChild(portalNode);
       }
       this.updatePortalRef(null);
     }
@@ -72,13 +76,13 @@ export var EuiPortal = /*#__PURE__*/function (_Component) {
     // Set the inherited color of the portal based on the wrapping EuiThemeProvider
   }, {
     key: "setThemeColor",
-    value: function setThemeColor() {
-      if (this.portalNode && this.context) {
+    value: function setThemeColor(portalNode) {
+      if (this.context) {
         var _this$context = this.context,
           hasDifferentColorFromGlobalTheme = _this$context.hasDifferentColorFromGlobalTheme,
           colorClassName = _this$context.colorClassName;
         if (hasDifferentColorFromGlobalTheme && this.props.insert == null) {
-          this.portalNode.classList.add(colorClassName);
+          portalNode.classList.add(colorClassName);
         }
       }
     }
@@ -92,7 +96,11 @@ export var EuiPortal = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      return this.portalNode ? /*#__PURE__*/createPortal(this.props.children, this.portalNode) : null;
+      var portalNode = this.state.portalNode;
+      if (!portalNode) {
+        return null;
+      }
+      return /*#__PURE__*/createPortal(this.props.children, portalNode);
     }
   }]);
   return EuiPortal;

package/optimize/es/components/timeline/timeline_item_icon.js

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { isValidElement } from 'react';
 import { EuiAvatar } from '../avatar';
 import { useEuiTheme } from '../../services';
 import { euiTimelineItemIconStyles } from './timeline_item_icon.styles';
@@ -21,11 +21,11 @@ export var EuiTimelineItemIcon = function EuiTimelineItemIcon(_ref) {
   var cssStyles = [styles.euiTimelineItemIcon, styles[verticalAlign]];
   var cssContentStyles = styles.euiTimelineItemIcon__content;
   var ariaLabel = iconAriaLabel ? iconAriaLabel : '';
-  var iconRender = typeof icon === 'string' ? ___EmotionJSX(EuiAvatar, {
+  var iconRender = /*#__PURE__*/isValidElement(icon) ? icon : ___EmotionJSX(EuiAvatar, {
     color: "subdued",
     name: ariaLabel,
     iconType: icon
-  }) : icon;
+  });
   return ___EmotionJSX("div", {
     css: cssStyles
   }, ___EmotionJSX("div", {

package/optimize/es/components/tour/tour_step.js

@@ -14,7 +14,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * Side Public License, v 1.
  */
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { EuiBeacon } from '../beacon';
 import { EuiButtonEmpty } from '../button';
@@ -58,12 +58,10 @@ export var EuiTourStep = function EuiTourStep(_ref) {
   if (step === 0) {
     console.warn('EuiTourStep `step` should 1-based indexing. Please update to eliminate 0 indexes.');
   }
-  var _useState = useState(false),
+  var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
-    hasValidAnchor = _useState2[0],
-    setHasValidAnchor = _useState2[1];
-  var animationFrameId = useRef();
-  var anchorNode = useRef(null);
+    anchorNode = _useState2[0],
+    setAnchorNode = _useState2[1];
   var _useState3 = useState(),
     _useState4 = _slicedToArray(_useState3, 2),
     popoverPosition = _useState4[0],
@@ -72,16 +70,16 @@ export var EuiTourStep = function EuiTourStep(_ref) {
     setPopoverPosition(position);
   };
   useEffect(function () {
+    var timeout;
     if (anchor) {
-      animationFrameId.current = window.requestAnimationFrame(function () {
-        anchorNode.current = findElementBySelectorOrRef(anchor);
-        setHasValidAnchor(anchorNode.current ? true : false);
+      timeout = window.setTimeout(function () {
+        setAnchorNode(findElementBySelectorOrRef(anchor));
       });
     }
     return function () {
-      animationFrameId.current && window.cancelAnimationFrame(animationFrameId.current);
+      timeout && window.clearTimeout(timeout);
     };
-  }, [anchor]);
+  }, [anchor, setAnchorNode]);
   var classes = classNames('euiTour', className);
   var euiTheme = useEuiTheme();
   var tourStyles = euiTourStyles(euiTheme);
@@ -191,7 +189,7 @@ export var EuiTourStep = function EuiTourStep(_ref) {
       button: children
     }, popoverProps), layout);
   }
-  return hasValidAnchor && anchorNode.current ? ___EmotionJSX(EuiWrappingPopover, _extends({
-    button: anchorNode.current
+  return anchorNode ? ___EmotionJSX(EuiWrappingPopover, _extends({
+    button: anchorNode
   }, popoverProps), layout) : null;
 };

package/optimize/es/services/color/eui_palettes.js

@@ -142,12 +142,18 @@ export var euiPaletteForTemperature = function euiPaletteForTemperature(steps) {
   }
   return euiPalette([].concat(_toConsumableArray(cools), _toConsumableArray(warms)), steps, true);
 };
-export var euiPaletteComplimentary = function euiPaletteComplimentary(steps) {
+export var euiPaletteComplementary = function euiPaletteComplementary(steps) {
   if (steps === 1) {
     return [euiPaletteColorBlind()[1]];
   }
   return euiPalette([euiPaletteColorBlind()[1], euiPaletteColorBlind()[7]], steps, true);
 };
+
+/**
+ * The old typo'd name for this palette remains exported until the end of its deprecation period
+ * @deprecated Use euiPaletteComplementary instead
+ */
+export var euiPaletteComplimentary = euiPaletteComplementary;
 export var euiPaletteNegative = function euiPaletteNegative(steps) {
   if (steps === 1) {
     return [lightNegativeColor];

package/optimize/es/services/color/index.js

@@ -17,7 +17,7 @@ export { rgbToHsv } from './rgb_to_hsv';
 export { calculateContrast, calculateLuminance } from './luminance_and_contrast';
 export { VISUALIZATION_COLORS, DEFAULT_VISUALIZATION_COLOR } from './visualization_colors';
 export { colorPalette } from './color_palette';
-export { euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplimentary, euiPaletteNegative, euiPalettePositive, euiPaletteCool, euiPaletteWarm, euiPaletteGray } from './eui_palettes';
+export { euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplimentary, euiPaletteComplementary, euiPaletteNegative, euiPalettePositive, euiPaletteCool, euiPaletteWarm, euiPaletteGray } from './eui_palettes';
 export { getSteppedGradient } from './stepped_gradient';
 export * from './manipulation';
 export * from './contrast';

package/optimize/es/services/index.js

@@ -11,7 +11,7 @@ import * as keys from './keys';
 export { accessibleClickKeys, cascadingMenuKeys, comboBoxKeys, htmlIdGenerator, useGeneratedHtmlId } from './accessibility';
 export { CENTER_ALIGNMENT, LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from './alignment';
 export { CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint, useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint } from './breakpoint';
-export { brighten, calculateContrast, calculateLuminance, colorPalette, darken, DEFAULT_VISUALIZATION_COLOR, desaturate, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteComplimentary, euiPaletteCool, euiPaletteForDarkBackground, euiPaletteForLightBackground, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, euiPaletteNegative, euiPalettePositive, euiPaletteWarm, getSteppedGradient, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isColorDark, isValidHex, lightness, makeDisabledContrastColor, makeHighContrastColor, rgbToHex, rgbToHsv, saturate, shade, shadeOrTint, tint, tintOrShade, transparentize, VISUALIZATION_COLORS, wcagContrastMin } from './color';
+export { brighten, calculateContrast, calculateLuminance, colorPalette, darken, DEFAULT_VISUALIZATION_COLOR, desaturate, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteComplimentary, euiPaletteComplementary, euiPaletteCool, euiPaletteForDarkBackground, euiPaletteForLightBackground, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, euiPaletteNegative, euiPalettePositive, euiPaletteWarm, getSteppedGradient, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isColorDark, isValidHex, lightness, makeDisabledContrastColor, makeHighContrastColor, rgbToHex, rgbToHsv, saturate, shade, shadeOrTint, tint, tintOrShade, transparentize, VISUALIZATION_COLORS, wcagContrastMin } from './color';
 export { useColorPickerState, useColorStopsState } from './color_picker';
 export * from './console';
 export { copyToClipboard } from './copy_to_clipboard';

package/optimize/es/services/theme/provider.js

@@ -21,6 +21,13 @@ import { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificati
 import { EuiEmotionThemeProvider } from './emotion';
 import { buildTheme, getColorMode, getComputed, mergeDeep } from './utils';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var providerWarning = undefined;
+export var setEuiDevProviderWarning = function setEuiDevProviderWarning(level) {
+  return providerWarning = level;
+};
+export var getEuiDevProviderWarning = function getEuiDevProviderWarning() {
+  return providerWarning;
+};
 export var EuiThemeProvider = function EuiThemeProvider(_ref) {
   var _system = _ref.theme,
     _colorMode = _ref.colorMode,

package/optimize/es/services/time/timer.js

@@ -9,13 +9,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * Side Public License, v 1.
  */
 
-export var Timer = /*#__PURE__*/_createClass(
-// In a browser this is a number, but in node it's a NodeJS.Time (a
-// class). We don't care about this difference.
-
-function Timer(callback, timeMs) {
+export var Timer = /*#__PURE__*/_createClass(function Timer(callback, timeMs) {
   var _this = this;
   _classCallCheck(this, Timer);
+  // In a browser this is a number, but in node it's a NodeJS.Time (a
+  // class). We don't care about this difference.
   _defineProperty(this, "id", void 0);
   _defineProperty(this, "callback", void 0);
   _defineProperty(this, "finishTime", void 0);

package/optimize/es/test/index.d.ts

@@ -41,6 +41,41 @@ declare module '@elastic/eui/optimize/es/test/sleep' {
 declare module '@elastic/eui/optimize/es/test/emotion-prefix' {
 	export const replaceEmotionPrefix: (selector: string) => string;
 
+}
+declare module '@elastic/eui/optimize/es/test/react_version' {
+	/// <reference types="jest" />
+	export type ReactVersion = '16' | '17' | '18';
+	export const SUPPORTED_REACT_VERSIONS: ReactVersion[];
+	/**
+	 * Get major version of React that's currently used.
+	 *
+	 */
+	export const getReactVersion: () => ReactVersion;
+	export const isReactVersion: (versionOrVersions: ReactVersion | ReactVersion[]) => boolean;
+	/**
+	 * Invoke passed function when running on specified version(s) of React
+	 */
+	export const invokeOnReactVersion: (versionOrVersions: ReactVersion | ReactVersion[], func: Function) => void;
+	/**
+	 * Jest describe wrapper calling describe() for every supported React version
+	 * and prefixing the name with version numbers. Only the currently running
+	 * version isn't skipped.
+	 *
+	 * It's primary use is to separate snapshots by React version in case there are
+	 * differences with, for example, unique ID generation.
+	 */
+	export const describeByReactVersion: (name: string, func: () => void) => void;
+	/**
+	 * Jest test wrapper calling test() for every supported React version
+	 * and prefixing the name with version numbers. Only the currently running
+	 * version isn't skipped.
+	 *
+	 * It's primary use is to separate snapshots by React version in case there
+	 * are differences with, for example, unique ID generation.
+	 */
+	export const testByReactVersion: (name: string, func: () => void) => void;
+	export const testOnReactVersion: (versionOrVersions: ReactVersion | ReactVersion[]) => typeof test;
+
 }
 declare module '@elastic/eui/optimize/es/test' {
 	export { requiredProps } from '@elastic/eui/optimize/es/test/required_props';
@@ -49,5 +84,6 @@ declare module '@elastic/eui/optimize/es/test' {
 	export { startThrowingReactWarnings, stopThrowingReactWarnings, } from '@elastic/eui/optimize/es/test/react_warnings';
 	export { sleep } from '@elastic/eui/optimize/es/test/sleep';
 	export * from '@elastic/eui/optimize/es/test/emotion-prefix';
+	export * from '@elastic/eui/optimize/es/test/react_version';
 
 }

package/optimize/es/test/index.js

@@ -11,4 +11,5 @@ export { takeMountedSnapshot } from './take_mounted_snapshot';
 export { findTestSubject } from './find_test_subject';
 export { startThrowingReactWarnings, stopThrowingReactWarnings } from './react_warnings';
 export { sleep } from './sleep';
-export * from './emotion-prefix';
+export * from './emotion-prefix';
+export * from './react_version';

package/optimize/es/test/react_version.js

@@ -0,0 +1,71 @@
+/*
+ * 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 var SUPPORTED_REACT_VERSIONS = ['16', '17', '18'];
+
+/**
+ * Get major version of React that's currently used.
+ *
+ */
+export var getReactVersion = function getReactVersion() {
+  var reactVersion = process.env.REACT_VERSION;
+  if (reactVersion !== undefined && SUPPORTED_REACT_VERSIONS.includes(reactVersion)) {
+    return reactVersion;
+  }
+  return '18';
+};
+export var isReactVersion = function isReactVersion(versionOrVersions) {
+  if (!Array.isArray(versionOrVersions)) {
+    versionOrVersions = [versionOrVersions];
+  }
+  return versionOrVersions.includes(getReactVersion());
+};
+
+/**
+ * Invoke passed function when running on specified version(s) of React
+ */
+export var invokeOnReactVersion = function invokeOnReactVersion(versionOrVersions, func) {
+  if (isReactVersion(versionOrVersions)) {
+    func();
+  }
+};
+
+/**
+ * Jest describe wrapper calling describe() for every supported React version
+ * and prefixing the name with version numbers. Only the currently running
+ * version isn't skipped.
+ *
+ * It's primary use is to separate snapshots by React version in case there are
+ * differences with, for example, unique ID generation.
+ */
+export var describeByReactVersion = function describeByReactVersion(name, func) {
+  var currentVersion = getReactVersion();
+  SUPPORTED_REACT_VERSIONS.forEach(function (version) {
+    var describeFunc = version === currentVersion ? describe : describe.skip;
+    describeFunc("[React ".concat(version, "] ").concat(name), func);
+  });
+};
+
+/**
+ * Jest test wrapper calling test() for every supported React version
+ * and prefixing the name with version numbers. Only the currently running
+ * version isn't skipped.
+ *
+ * It's primary use is to separate snapshots by React version in case there
+ * are differences with, for example, unique ID generation.
+ */
+export var testByReactVersion = function testByReactVersion(name, func) {
+  var currentVersion = getReactVersion();
+  SUPPORTED_REACT_VERSIONS.forEach(function (version) {
+    var testFunc = version === currentVersion ? test : test.skip;
+    testFunc("[React ".concat(version, "] ").concat(name), func);
+  });
+};
+export var testOnReactVersion = function testOnReactVersion(versionOrVersions) {
+  return isReactVersion(versionOrVersions) ? test : test.skip;
+};

package/optimize/es/test/rtl/component_helpers.js

@@ -74,7 +74,7 @@ export var waitForEuiToolTipVisible = /*#__PURE__*/function () {
             var tooltip = document.querySelector('.euiToolTipPopover');
             expect(tooltip).toBeVisible();
           }, {
-            timeout: 1500
+            timeout: 3000
           } // Account for long delay on tooltips
           );
         case 2:

package/optimize/es/test/rtl/index.js

@@ -8,4 +8,5 @@
 
 export * from './component_helpers';
 export { queryByTestSubject, queryAllByTestSubject, getByTestSubject, getAllByTestSubject, findAllByTestSubject, findByTestSubject } from './data_test_subj_queries';
-export { render, screen, within } from './custom_render';
+export { render, screen, within } from './custom_render';
+export * from './render_hook';

package/optimize/es/test/rtl/render_hook.js

@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+var renderHook;
+var renderHookAct;
+if (process.env.REACT_VERSION === '18') {
+  renderHook = require('@testing-library/react').renderHook;
+  renderHookAct = require('@testing-library/react').act;
+} else {
+  renderHook = require('@testing-library/react-hooks').renderHook;
+  renderHookAct = require('@testing-library/react-hooks').act;
+}
+
+/* eslint-enable @typescript-eslint/no-var-requires */
+
+export { renderHook, renderHookAct };

package/optimize/es/themes/amsterdam/global_styling/variables/_states.js

@@ -6,24 +6,21 @@
  * Side Public License, v 1.
  */
 
-/**
- * NOTE: These were quick conversions of their Sass counterparts.
- *       The commented out keys have not been established as necessary yet.
- */
-
 import { computed } from '../../../../services/theme/utils';
+import { transparentize } from '../../../../services/color/manipulation';
 import { sizeToPixel } from '../../../../global_styling/functions/size';
 export var focus = {
+  // Focus ring
   color: 'currentColor',
-  width: computed(sizeToPixel(0.125))
-
-  // transparency: { LIGHT: 0.9, DARK: 0.7 },
-  // backgroundColor: computed(({ colors, focus }) =>
-  //   transparentize(colors.primary, focus!.transparency)
-  // ),
-
-  // Outline
-  // outline: {
-  //   outline: computed(({ focus }) => `${focus!.width} solid ${focus!.color}`),
-  // },
+  width: computed(sizeToPixel(0.125)),
+  // Focus background
+  transparency: {
+    LIGHT: 0.1,
+    DARK: 0.2
+  },
+  backgroundColor: computed(function (_ref) {
+    var colors = _ref.colors,
+      focus = _ref.focus;
+    return transparentize(colors.primary, focus.transparency);
+  })
 };

package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_beta.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiCollapsibleNavBeta = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _services = require("../../services");
+var _collapsible_nav = require("../collapsible_nav/collapsible_nav");
+var _collapsible_nav_beta = require("./collapsible_nav_beta.styles");
+var _react2 = require("@emotion/react");
+/*
+ * 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.
+ */
+
+/**
+ * TODO: Actual component in a follow-up PR
+ */
+var EuiCollapsibleNavBeta = function EuiCollapsibleNavBeta(props) {
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _collapsible_nav_beta.euiCollapsibleNavBetaStyles)(euiTheme);
+  return (0, _react2.jsx)(_collapsible_nav.EuiCollapsibleNav, (0, _extends2.default)({
+    css: styles.euiCollapsibleNavBeta,
+    size: 248
+  }, props));
+};
+exports.EuiCollapsibleNavBeta = EuiCollapsibleNavBeta;