@elastic/eui 123.2.0 → 123.3.0

package/lib/services/theme/provider.js

@@ -26,23 +26,39 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /*
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*
  * 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.
+ */ /**
+ * Caches `value` during render, only swapping in a new one once `isSame`
+ * reports that it actually differs from the cached one.
+ *
+ * This keeps derived objects referentially stable (so that the - comparatively
+ * expensive - theme computation isn't rerun on every render) without deferring
+ * them to a `useEffect`/`setState` pair. Effect-synchronised state costs an
+ * extra commit, in which consumers would see e.g. an updated `colorMode`
+ * alongside a theme that is still computed from the previous one.
  */
+var useStableValue = function useStableValue(value, isSame) {
+  var ref = (0, _react2.useRef)(value);
+  if (ref.current !== value && !isSame(ref.current, value)) {
+    ref.current = value;
+  }
+  return ref.current;
+};
 var EuiThemeProvider = exports.EuiThemeProvider = function EuiThemeProvider(_ref) {
   var _system = _ref.theme,
     _colorMode = _ref.colorMode,
@@ -71,118 +87,85 @@ var EuiThemeProvider = exports.EuiThemeProvider = function EuiThemeProvider(_ref
   var EuiConditionalBreakpointProvider = (0, _react2.useMemo)(function () {
     return isGlobalTheme || _modifications !== null && _modifications !== void 0 && _modifications.breakpoint ? _current_breakpoint.CurrentEuiBreakpointProvider : _react2.Fragment;
   }, [isGlobalTheme, _modifications]);
-  var _useState = (0, _react2.useState)(_system || parentSystem),
-    _useState2 = _slicedToArray(_useState, 2),
-    system = _useState2[0],
-    setSystem = _useState2[1];
-  var prevSystemKey = (0, _react2.useRef)(system.key);
-  var _useState3 = (0, _react2.useState)((0, _utils.mergeDeep)(parentModifications, _modifications)),
-    _useState4 = _slicedToArray(_useState3, 2),
-    modifications = _useState4[0],
-    setModifications = _useState4[1];
-  var prevModifications = (0, _react2.useRef)(modifications);
-  var _useState5 = (0, _react2.useState)((0, _utils.getColorMode)(_colorMode, parentColorMode, isForced)),
-    _useState6 = _slicedToArray(_useState5, 2),
-    colorMode = _useState6[0],
-    setColorMode = _useState6[1];
-  var prevColorMode = (0, _react2.useRef)(colorMode);
+
+  // Every value below is derived from props/parent context during render, so
+  // that all context values this provider exposes - most notably `colorMode`
+  // and the computed `theme` - always change within the same commit
+  var system = useStableValue(_system || parentSystem, function (previous, next) {
+    return previous.key === next.key;
+  });
+  var mergedModifications = (0, _react2.useMemo)(function () {
+    return (0, _utils.mergeDeep)(parentModifications, _modifications);
+  }, [parentModifications, _modifications]);
+  var modifications = useStableValue(mergedModifications, _isEqual.default);
+  var colorMode = (0, _react2.useMemo)(function () {
+    return (0, _utils.getColorMode)(_colorMode, parentColorMode, isForced);
+  }, [_colorMode, parentColorMode, isForced]);
   var highContrastMode = (0, _react2.useMemo)(function () {
     if (isForced) return 'forced'; // System forced high contrast mode will always supercede application settings
     if (_highContrastMode === true) return 'preferred'; // Convert the boolean prop to our internal enum
     if (_highContrastMode === false) return false; // Allow `false` prop to override user/system preference
     return parentHighContrastMode; // Fall back to the parent/system setting
   }, [_highContrastMode, parentHighContrastMode, isForced]);
-  var prevHighContrastMode = (0, _react2.useRef)(highContrastMode);
   var modificationsWithHighContrast = (0, _high_contrast_overrides.useHighContrastModifications)({
     highContrastMode: highContrastMode,
     colorMode: colorMode,
     system: system,
     modifications: modifications
   });
-  var isParentTheme = (0, _react2.useRef)(isGlobalTheme ? prevSystemKey.current === _context.DEFAULTS.system.key && colorMode === _context.DEFAULTS.colorMode && highContrastMode === _context.DEFAULTS.highContrastMode && !_modifications : prevSystemKey.current === parentSystem.key && colorMode === parentColorMode && highContrastMode === parentHighContrastMode && (0, _isEqual.default)(parentModifications, modifications));
-  var updateVisColorStore = (0, _react2.useCallback)(function (theme, isGlobalTheme) {
-    if (isGlobalTheme) {
-      _color.EUI_VIS_COLOR_STORE.setVisColors(theme.colors.vis);
+
+  // If this provider resolves to the exact same theme as its parent, the
+  // already computed parent theme can be reused instead of recomputing it
+  var isParentTheme = (0, _react2.useMemo)(function () {
+    return isGlobalTheme ? system.key === _context.DEFAULTS.system.key && colorMode === _context.DEFAULTS.colorMode && highContrastMode === _context.DEFAULTS.highContrastMode && !_modifications : system.key === parentSystem.key && colorMode === parentColorMode && highContrastMode === parentHighContrastMode && (0, _isEqual.default)(parentModifications, modifications);
+  }, [isGlobalTheme, system, colorMode, highContrastMode, _modifications, parentSystem, parentColorMode, parentHighContrastMode, parentModifications, modifications]);
+
+  // Depending on `parentTheme` itself would recompute this provider's theme every
+  // time the parent's did, even where the parent's theme is not an input to it -
+  // `parentModifications` already reaches `getComputed` through `modifications`
+  var reusableParentTheme = isParentTheme && Object.keys(parentTheme).length ? parentTheme : null;
+  var theme = (0, _react2.useMemo)(function () {
+    if (reusableParentTheme) {
+      return _objectSpread({}, reusableParentTheme); // Intentionally create a new object to break referential equality
     }
-  }, []);
-  var getInitialTheme = function getInitialTheme() {
-    var theme = (0, _utils.getComputed)(system, (0, _utils.buildTheme)(modificationsWithHighContrast, "_".concat(system.key)), colorMode, highContrastMode);
-    setTimeout(function () {
-      updateVisColorStore(theme, isGlobalTheme);
+
+    /* Enables recomputation of component colors when flags are overridden on the provider
+    by adding the respective key to modifications to trigger a recomputation. */
+    // NOTE: Keeping this as placeholder for potential future usage during Borealis changes
+    // TODO: remove once visual refresh is completed and flags are obsolete
+    var flagsToRecompute = [];
+    var keys = {};
+    var forceRecomputeComponents = flagsToRecompute.some(function (item) {
+      var _modifications$flags, _modifications$compon;
+      if (!item) return false;
+      if (Object.keys((_modifications$flags = modifications.flags) !== null && _modifications$flags !== void 0 ? _modifications$flags : {}).includes(item.flag) && !Object.keys((_modifications$compon = modifications.components) !== null && _modifications$compon !== void 0 ? _modifications$compon : {}).includes(item.componentKey)) {
+        keys[item.componentKey] = {
+          LIGHT: {},
+          DARK: {}
+        };
+        return true;
+      }
+      return false;
     });
-    return theme;
-  };
-  var _useState7 = (0, _react2.useState)(isParentTheme.current && Object.keys(parentTheme).length ? _objectSpread({}, parentTheme) // Intentionally create a new object to break referential equality
-    : getInitialTheme()),
-    _useState8 = _slicedToArray(_useState7, 2),
-    theme = _useState8[0],
-    setTheme = _useState8[1];
-  (0, _react2.useEffect)(function () {
-    var newSystem = _system || parentSystem;
-    if (prevSystemKey.current !== newSystem.key) {
-      setSystem(newSystem);
-      prevSystemKey.current = newSystem.key;
-      isParentTheme.current = false;
-    }
-  }, [_system, parentSystem, theme, updateVisColorStore]);
-  (0, _react2.useEffect)(function () {
-    updateVisColorStore(theme, isGlobalTheme);
-  }, [theme, colorMode, isGlobalTheme, updateVisColorStore]);
-  (0, _react2.useEffect)(function () {
-    var newModifications = (0, _utils.mergeDeep)(parentModifications, _modifications);
-    if (!(0, _isEqual.default)(prevModifications.current, newModifications)) {
-      setModifications(newModifications);
-      prevModifications.current = newModifications;
-      isParentTheme.current = false;
-    }
-  }, [_modifications, parentModifications]);
-  (0, _react2.useEffect)(function () {
-    var newColorMode = (0, _utils.getColorMode)(_colorMode, parentColorMode, isForced);
-    if (!(0, _isEqual.default)(newColorMode, prevColorMode.current)) {
-      setColorMode(newColorMode);
-      prevColorMode.current = newColorMode;
-      isParentTheme.current = false;
-    }
-  }, [_colorMode, parentColorMode, isForced]);
-  (0, _react2.useEffect)(function () {
-    if (prevHighContrastMode.current !== highContrastMode) {
-      isParentTheme.current = false;
-    }
-  }, [highContrastMode]);
-  (0, _react2.useEffect)(function () {
-    if (!isParentTheme.current) {
-      /* Enables recomputation of component colors when flags are overridden on the provider
-      by adding the respective key to modifications to trigger a recomputation. */
-      // NOTE: Keeping this as placeholder for potential future usage during Borealis changes
-      // TODO: remove once visual refresh is completed and flags are obsolete
-      var flagsToRecompute = [];
-      var keys = {};
-      var forceRecomputeComponents = flagsToRecompute.some(function (item) {
-        var _modifications$flags, _modifications$compon;
-        if (!item) return false;
-        if (Object.keys((_modifications$flags = modifications.flags) !== null && _modifications$flags !== void 0 ? _modifications$flags : {}).includes(item.flag) && !Object.keys((_modifications$compon = modifications.components) !== null && _modifications$compon !== void 0 ? _modifications$compon : {}).includes(item.componentKey)) {
-          keys[item.componentKey] = {
-            LIGHT: {},
-            DARK: {}
-          };
-          return true;
-        }
-        return false;
-      });
-      var componentModifications = forceRecomputeComponents ? {
-        components: keys
-      } : {};
+    var componentModifications = forceRecomputeComponents ? {
+      components: keys
+    } : {};
+
+    // force recomputing of color & component tokens based on flag changes
+    var enhancedModifications = _objectSpread(_objectSpread({}, modificationsWithHighContrast), componentModifications);
+    return (0, _utils.getComputed)(system, (0, _utils.buildTheme)(enhancedModifications, "_".concat(system.key)), colorMode, highContrastMode);
+  }, [reusableParentTheme, system, colorMode, highContrastMode, modifications, modificationsWithHighContrast]);
 
-      // force recomputing of color & component tokens based on flag changes
-      var enhancedModifications = _objectSpread(_objectSpread({}, modificationsWithHighContrast), componentModifications);
-      var rebuiltTheme = (0, _utils.getComputed)(system, (0, _utils.buildTheme)(enhancedModifications, "_".concat(system.key)), colorMode, highContrastMode);
-      setTheme(rebuiltTheme);
+  // Genuine side effect - the vis color store is consumed outside of React
+  (0, _react2.useEffect)(function () {
+    if (isGlobalTheme) {
+      _color.EUI_VIS_COLOR_STORE.setVisColors(theme.colors.vis);
     }
-  }, [colorMode, highContrastMode, system, modificationsWithHighContrast, modifications]);
-  var _useState9 = (0, _react2.useState)(),
-    _useState10 = _slicedToArray(_useState9, 2),
-    themeCSSVariables = _useState10[0],
-    _setThemeCSSVariables = _useState10[1];
+  }, [theme, isGlobalTheme]);
+  var _useState = (0, _react2.useState)(),
+    _useState2 = _slicedToArray(_useState, 2),
+    themeCSSVariables = _useState2[0],
+    _setThemeCSSVariables = _useState2[1];
   var setThemeCSSVariables = (0, _react2.useCallback)(function (variables) {
     return _setThemeCSSVariables(function (previous) {
       var merged = _objectSpread(_objectSpread({}, previous), variables);

package/optimize/es/components/banner/banner.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["title", "headingElement", "text", "size", "color", "actionProps", "media", "onDismiss", "dismissButtonProps", "children", "className", "announceOnMount", "data-test-subj"];
 /*
@@ -9,7 +10,7 @@ var _excluded = ["title", "headingElement", "text", "size", "color", "actionProp
  * Side Public License, v 1.
  */
 
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useEuiMemoizedStyles } from '../../services';
 import { useEuiBackgroundColorCSS } from '../../global_styling';
@@ -52,6 +53,29 @@ export var EuiBanner = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var primaryActionProps = actionProps === null || actionProps === void 0 ? void 0 : actionProps.primary;
   var secondaryActionProps = actionProps === null || actionProps === void 0 ? void 0 : actionProps.secondary;
   var hasActions = Boolean(primaryActionProps) || Boolean(secondaryActionProps);
+  var titleRef = useRef(null);
+  var contentRef = useRef(null);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    announcement = _useState2[0],
+    setAnnouncement = _useState2[1];
+  useEffect(function () {
+    var content = contentRef.current;
+    if (!announceOnMount || !content) {
+      setAnnouncement('');
+      return;
+    }
+
+    // `EuiText` does not forward refs. The text slot is the first direct
+    // `.euiText` child, since `children` render after it.
+    var textNode = text ? Array.from(content.children).find(function (node) {
+      return node.classList.contains('euiText');
+    }) : undefined;
+    var childrenText = Array.from(content.childNodes).filter(function (node) {
+      return node !== titleRef.current && node !== textNode;
+    }).map(readText).filter(Boolean).join(' ');
+    setAnnouncement([readText(titleRef.current), readText(textNode), childrenText].filter(Boolean).join(",\xA0"));
+  }, [announceOnMount, title, text, children]);
   var componentClass = 'euiBanner';
   var classes = classNames(componentClass, className);
   var backgroundColorStyles = useEuiBackgroundColorCSS()[color];
@@ -75,11 +99,13 @@ export var EuiBanner = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: "".concat(componentClass, "__body"),
     css: styles.body
   }, ___EmotionJSX("div", {
+    ref: contentRef,
     className: "".concat(componentClass, "__content"),
     css: styles.content
   }, ___EmotionJSX(EuiTitle, {
     size: headingSize
   }, ___EmotionJSX(Heading, {
+    ref: titleRef,
     css: styles.title,
     "data-test-subj": "".concat(dataTestSubj, "-title")
   }, title)), onDismiss ? ___EmotionJSX(EuiButtonIcon, _extends({
@@ -109,6 +135,12 @@ export var EuiBanner = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, secondaryActionProps, {
     color: "primary",
     size: "s"
-  })) : null) : null)), announceOnMount && ___EmotionJSX(EuiLiveAnnouncer, null, title && title, title && text && ",\xA0", text && text, (title || text) && children && ",\xA0", children && children));
+  })) : null) : null)), announcement ? ___EmotionJSX(EuiLiveAnnouncer, null, announcement) : null);
 });
-EuiBanner.displayName = 'EuiBanner';
+EuiBanner.displayName = 'EuiBanner';
+
+// jsdom has no `innerText`, so tests read `textContent`
+var readText = function readText(node) {
+  var _ref2, _innerText;
+  return (_ref2 = (_innerText = node === null || node === void 0 ? void 0 : node.innerText) !== null && _innerText !== void 0 ? _innerText : node === null || node === void 0 ? void 0 : node.textContent) === null || _ref2 === void 0 ? void 0 : _ref2.trim();
+};

package/optimize/es/components/call_out/call_out.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
@@ -12,7 +13,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Side Public License, v 1.
  */
 
-import React, { forwardRef, useMemo } from 'react';
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { getTokenName } from '@elastic/eui-theme-common';
 import { useCombinedRefs, useEuiMemoizedStyles, useEuiTheme } from '../../services';
@@ -165,9 +166,35 @@ export var EuiCallOut = /*#__PURE__*/forwardRef(function (_ref, ref) {
       "data-test-subj": dataTestSubj && "".concat(dataTestSubj, "__actions")
     }, actionPrimary, actionSecondary);
   }, [actionProps, color, styles, dataTestSubj]);
-  var announcement = useMemo(function () {
-    if (!announceOnMount || !(title || text || children)) return null;
-    return ___EmotionJSX(EuiLiveAnnouncer, null, title, title && text && ",\xA0", text, (title || text) && children && ",\xA0", children);
+  var contentRef = useRef(null);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    announcement = _useState2[0],
+    setAnnouncement = _useState2[1];
+  useEffect(function () {
+    var content = contentRef.current;
+    if (!announceOnMount || !content) {
+      setAnnouncement('');
+      return;
+    }
+
+    // Read the nodes already on screen. The live region gets that text,
+    // not a second copy of the React tree. Only direct slots are read, so a
+    // callout nested in `children` is not picked up as this one's slots.
+    // Not `:scope >`: jsdom resolves `:scope` by tag and class, which the
+    // nested callout's content shares.
+    var parts = Array.from(content.children).filter(function (_ref2) {
+      var classList = _ref2.classList;
+      return ['euiCallOutHeader__title', 'euiCallOut__text', 'euiCallOut__additionalContent'].some(function (className) {
+        return classList.contains(className);
+      });
+    })
+    // jsdom has no `innerText`, so tests read `textContent`
+    .map(function (node) {
+      var _ref3, _node$innerText;
+      return (_ref3 = (_node$innerText = node.innerText) !== null && _node$innerText !== void 0 ? _node$innerText : node.textContent) === null || _ref3 === void 0 ? void 0 : _ref3.trim();
+    }).filter(Boolean);
+    setAnnouncement(parts.join(",\xA0"));
   }, [announceOnMount, title, text, children]);
   return ___EmotionJSX(EuiPanel, _extends({
     borderRadius: "none",
@@ -187,11 +214,12 @@ export var EuiCallOut = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, ___EmotionJSX("div", {
     css: styles.body
   }, icon, ___EmotionJSX("div", {
+    ref: contentRef,
     css: styles.content
   },
   // Note: the DOM position of the dismiss button matters to screen reader users.
   // We generally want them to have some context of _what_ they're dismissing,
   // instead of navigating to the dismiss button first before the callout content
-  header && optionalChildren ? ___EmotionJSX(React.Fragment, null, header, dismissButton, optionalChildren) : ___EmotionJSX(React.Fragment, null, header || optionalChildren, dismissButton))), actionControls, announcement));
+  header && optionalChildren ? ___EmotionJSX(React.Fragment, null, header, dismissButton, optionalChildren) : ___EmotionJSX(React.Fragment, null, header || optionalChildren, dismissButton))), actionControls, announcement ? ___EmotionJSX(EuiLiveAnnouncer, null, announcement) : null));
 });
 EuiCallOut.displayName = 'EuiCallOut';

package/optimize/es/components/icon/assets/add_to_chat.js

@@ -26,17 +26,9 @@ var EuiIconAddToChat = function EuiIconAddToChat(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    fillRule: "evenodd",
-    d: "M8 0a1.5 1.5 0 0 1 .5 2.912V4H11a3 3 0 0 1 3 3h1l.102.005A1 1 0 0 1 16 8v1h-1V8h-1v1h-1V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v7h6v1H3a1 1 0 0 1-1-1v-2H1a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1a3 3 0 0 1 3-3h2.5V2.912A1.498 1.498 0 0 1 8 0ZM1 11h1V8H1v3ZM8 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
-    clipRule: "evenodd"
+    d: "M14 13h2v1h-2v2h-1v-2h-2v-1h2v-2h1z"
   }), ___EmotionJSX("path", {
-    d: "M10.447 11.523C9.826 12.767 8.59 13 8 13c-.59 0-1.826-.233-2.447-1.477l.894-.447C6.826 11.833 7.59 12 8 12c.41 0 1.174-.167 1.553-.924l.894.447Z"
-  }), ___EmotionJSX("path", {
-    fillRule: "evenodd",
-    d: "M5.5 7a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm5-1a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
-    clipRule: "evenodd"
-  }), ___EmotionJSX("path", {
-    d: "M14 13h2v1h-2v2h-1v-2h-2v-1h2v-2h1v2Z"
+    d: "M9.389 1c.4 0 .783.116 1.078.328.294.212.533.55.533.972V3h1a3 3 0 0 1 3 3v1h1v2h-2V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h5v1H4a3 3 0 0 1-3-3v-2H0V7h1V6a3 3 0 0 1 3-3h1v-.7c0-.423.239-.76.533-.972A1.85 1.85 0 0 1 6.611 1zM6 10H5V7h1zm5 0h-1V7h1zM6 3h4V2H6z"
   }));
 };
 export var icon = EuiIconAddToChat;

package/optimize/es/components/icon/assets/product_alert_zero.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+/*
+ * 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.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EuiIconProductAlertZero = function EuiIconProductAlertZero(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    d: "M11.283 14.24A7 7 0 0 1 8 15.053l-.362-.01a7 7 0 0 1-2.976-.833l.642-.793A6 6 0 0 0 8 14.053c.989 0 1.921-.24 2.745-.661zM8 .016a1.486 1.486 0 0 1 .365 2.925v2.084A2.997 2.997 0 0 1 10.995 8l-.003.153a3 3 0 0 1-.231 1.002l1.826 1.055a1.485 1.485 0 1 1-.382.648l-1.82-1.05a2.99 2.99 0 0 1-2.386 1.19l-.154-.005a3 3 0 0 1-2.22-1.166L3.8 10.88a1.485 1.485 0 0 1-2.722 1.125 1.487 1.487 0 0 1 2.35-1.78l1.815-1.048a3 3 0 0 1-.238-1.025L5 8a3 3 0 0 1 2.612-2.974v-2.09A1.485 1.485 0 0 1 8 .016M2.787 11.019a.487.487 0 1 0-.844.487.487.487 0 0 0 .844-.487m11.09-.18a.487.487 0 1 0-.484.844.487.487 0 0 0 .485-.843M8 6.002a1.998 1.998 0 1 0 0 3.997A1.998 1.998 0 0 0 8 6m0-4.985a.487.487 0 1 0 0 .974.487.487 0 0 0 0-.973M4.802 2.878A6.04 6.04 0 0 0 1.955 7.99l-1 .023v-.005A7.04 7.04 0 0 1 4.28 2.023zm6.993-.806a7.04 7.04 0 0 1 3.249 5.925l-1 .006a6.04 6.04 0 0 0-2.835-5.117z"
+  }));
+};
+export var icon = EuiIconProductAlertZero;

package/optimize/es/components/icon/icon_map.js

@@ -1907,6 +1907,11 @@ export var typeToPathMap = {
   }, {
     synonyms: ['agent', 'product', 'elastic agent', 'fleet', 'monitoring']
   }),
+  productAlertZero: withMetadata(function () {
+    return import('./assets/product_alert_zero');
+  }, {
+    synonyms: ['alertzero', 'alert', 'zero', 'attack', 'security']
+  }),
   productCanvas: withMetadata(function () {
     return import('./assets/product_canvas');
   }, {

package/optimize/es/components/icon/svgs/add_to_chat.svg

@@ -1,6 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M8 0a1.5 1.5 0 0 1 .5 2.912V4H11a3 3 0 0 1 3 3h1l.102.005A1 1 0 0 1 16 8v1h-1V8h-1v1h-1V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v7h6v1H3a1 1 0 0 1-1-1v-2H1a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1a3 3 0 0 1 3-3h2.5V2.912A1.498 1.498 0 0 1 8 0ZM1 11h1V8H1v3ZM8 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z" clip-rule="evenodd"/>
-  <path d="M10.447 11.523C9.826 12.767 8.59 13 8 13c-.59 0-1.826-.233-2.447-1.477l.894-.447C6.826 11.833 7.59 12 8 12c.41 0 1.174-.167 1.553-.924l.894.447Z"/>
-  <path fill-rule="evenodd" d="M5.5 7a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm5-1a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z" clip-rule="evenodd"/>
-  <path d="M14 13h2v1h-2v2h-1v-2h-2v-1h2v-2h1v2Z"/>
-</svg>
+  <path d="M14 13h2v1h-2v2h-1v-2h-2v-1h2v-2h1z"/>
+  <path d="M9.389 1c.4 0 .783.116 1.078.328.294.212.533.55.533.972V3h1a3 3 0 0 1 3 3v1h1v2h-2V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h5v1H4a3 3 0 0 1-3-3v-2H0V7h1V6a3 3 0 0 1 3-3h1v-.7c0-.423.239-.76.533-.972A1.85 1.85 0 0 1 6.611 1zM6 10H5V7h1zm5 0h-1V7h1zM6 3h4V2H6z"/>
+</svg>

package/optimize/es/components/icon/svgs/product_alert_zero.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M11.283 14.24A7 7 0 0 1 8 15.053l-.362-.01a7 7 0 0 1-2.976-.833l.642-.793A6 6 0 0 0 8 14.053c.989 0 1.921-.24 2.745-.661z"/>
+  <path d="M8 .016a1.486 1.486 0 0 1 .365 2.925v2.084A2.997 2.997 0 0 1 10.995 8l-.003.153a3 3 0 0 1-.231 1.002l1.826 1.055a1.485 1.485 0 1 1-.382.648l-1.82-1.05a2.99 2.99 0 0 1-2.386 1.19l-.154-.005a3 3 0 0 1-2.22-1.166L3.8 10.88a1.485 1.485 0 0 1-2.722 1.125 1.487 1.487 0 0 1 2.35-1.78l1.815-1.048a3 3 0 0 1-.238-1.025L5 8a3 3 0 0 1 2.612-2.974v-2.09A1.485 1.485 0 0 1 8 .016M2.787 11.019a.487.487 0 1 0-.844.487.487.487 0 0 0 .844-.487m11.09-.18a.487.487 0 1 0-.484.844.487.487 0 0 0 .485-.843M8 6.002a1.998 1.998 0 1 0 0 3.997A1.998 1.998 0 0 0 8 6m0-4.985a.487.487 0 1 0 0 .974.487.487 0 0 0 0-.973"/>
+  <path d="M4.802 2.878A6.04 6.04 0 0 0 1.955 7.99l-1 .023v-.005A7.04 7.04 0 0 1 4.28 2.023zm6.993-.806a7.04 7.04 0 0 1 3.249 5.925l-1 .006a6.04 6.04 0 0 0-2.835-5.117z"/>
+</svg>

package/optimize/es/components/selectable/selectable_templates/selectable_template_sitewide.styles.js

@@ -20,7 +20,11 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 export var euiSelectableTemplateSitewideStyles = function euiSelectableTemplateSitewideStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var visColors = euiPaletteColorBlind();
+
+  // Pass the theme's vis colors explicitly - see the note in token.styles.ts
+  var visColors = euiPaletteColorBlind({
+    colors: euiTheme.colors.vis
+  });
   return {
     euiSelectableTemplateSitewide: _ref,
     euiSelectableTemplateSitewide__optionMetasList: /*#__PURE__*/css("display:block;", euiFontSize(euiThemeContext, 'xs'), " color:", euiTheme.colors.textSubdued, ";;label:euiSelectableTemplateSitewide__optionMetasList;"),

package/optimize/es/components/token/token.styles.js

@@ -18,10 +18,16 @@ var getTokenColor = function getTokenColor(euiThemeContext, fill, color) {
   var euiTheme = euiThemeContext.euiTheme,
     colorMode = euiThemeContext.colorMode,
     highContrastMode = euiThemeContext.highContrastMode;
-  // use inside function as they are not returning constants,
-  // but internally depend on EUI_VIS_COLOR_STORE to update per theme
-  var visColors = euiPaletteColorBlind();
-  var visColorsBehindText = euiPaletteColorBlindBehindText();
+  // Pass the theme's vis colors explicitly rather than letting these fall back to
+  // EUI_VIS_COLOR_STORE - the store is only updated in an effect, so on the first
+  // render it can still hold the previous theme's palette. Memoized styles are not
+  // regenerated for a store update, so those colors would stay stale.
+  var visColors = euiPaletteColorBlind({
+    colors: euiTheme.colors.vis
+  });
+  var visColorsBehindText = euiPaletteColorBlindBehindText({
+    colors: euiTheme.colors.vis
+  });
   var isVizColor = typeof color === 'number';
   var iconColor = isVizColor ? visColors[color] : euiTheme.colors.darkShade;
   var isDarkMode = colorMode === 'DARK';