@elastic/eui 101.3.0 → 101.4.0

package/optimize/lib/components/image/image_fullscreen_wrapper.js

@@ -9,15 +9,15 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../services");
+var _inner_text = require("../inner_text");
 var _focus_trap = require("../focus_trap");
 var _overlay_mask = require("../overlay_mask");
 var _icon = require("../icon");
-var _services = require("../../services");
-var _inner_text = require("../inner_text");
-var _image_fullscreen_wrapper = require("./image_fullscreen_wrapper.styles");
 var _image_button = require("./image_button");
 var _image_button2 = require("./image_button.styles");
 var _image_caption = require("./image_caption");
+var _image_fullscreen_wrapper = require("./image_fullscreen_wrapper.styles");
 var _react2 = require("@emotion/react");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -37,17 +37,11 @@ var EuiImageFullScreenWrapper = exports.EuiImageFullScreenWrapper = function Eui
     isFullWidth = _ref.isFullWidth,
     fullScreenIconColor = _ref.fullScreenIconColor,
     onFullScreen = _ref.onFullScreen;
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _image_fullscreen_wrapper.euiImageFullscreenWrapperStyles)(euiTheme);
-  var cssStyles = [styles.euiImageFullscreenWrapper, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.css];
   var classes = (0, _classnames.default)('euiImageFullScreenWrapper', wrapperProps && wrapperProps.className);
-  var onKeyDown = function onKeyDown(event) {
-    if (event.key === _services.keys.ESCAPE) {
-      event.preventDefault();
-      event.stopPropagation();
-      closeFullScreen();
-    }
-  };
+  var styles = (0, _services.useEuiMemoizedStyles)(_image_fullscreen_wrapper.euiImageFullscreenWrapperStyles);
+  var cssStyles = [styles.euiImageFullscreenWrapper, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.css];
+  var iconStyles = (0, _services.useEuiMemoizedStyles)(_image_button2.euiImageButtonIconStyles);
+  var cssIconStyles = [iconStyles.euiImageButton__icon, iconStyles.closeFullScreen];
   var closeFullScreen = function closeFullScreen() {
     setIsFullScreen(false);
     onFullScreen === null || onFullScreen === void 0 || onFullScreen(false);
@@ -56,15 +50,13 @@ var EuiImageFullScreenWrapper = exports.EuiImageFullScreenWrapper = function Eui
     _useInnerText2 = (0, _slicedToArray2.default)(_useInnerText, 2),
     optionalCaptionRef = _useInnerText2[0],
     optionalCaptionText = _useInnerText2[1];
-  var iconStyles = (0, _image_button2.euiImageButtonIconStyles)(euiTheme);
-  var cssIconStyles = [iconStyles.euiImageButton__icon, iconStyles.closeFullScreen];
   return (0, _react2.jsx)(_overlay_mask.EuiOverlayMask, {
     "data-test-subj": "fullScreenOverlayMask"
   }, (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
     scrollLock: true,
     preventScrollOnFocus: true,
     onClickOutside: closeFullScreen
-  }, (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("figure", (0, _extends2.default)({
+  }, (0, _react2.jsx)("figure", (0, _extends2.default)({
     "aria-label": optionalCaptionText
   }, wrapperProps, {
     className: classes,
@@ -73,7 +65,13 @@ var EuiImageFullScreenWrapper = exports.EuiImageFullScreenWrapper = function Eui
     hasAlt: !!alt,
     hasShadow: hasShadow,
     onClick: closeFullScreen,
-    onKeyDown: onKeyDown,
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === _services.keys.ESCAPE) {
+        event.preventDefault();
+        event.stopPropagation();
+        closeFullScreen();
+      }
+    },
     "data-test-subj": "deactivateFullScreenButton",
     isFullScreen: true,
     isFullWidth: isFullWidth,
@@ -86,5 +84,5 @@ var EuiImageFullScreenWrapper = exports.EuiImageFullScreenWrapper = function Eui
     type: "fullScreenExit",
     color: "ghost",
     css: cssIconStyles
-  }))));
+  })));
 };

package/optimize/lib/components/image/image_wrapper.js

@@ -36,13 +36,8 @@ var EuiImageWrapper = exports.EuiImageWrapper = function EuiImageWrapper(_ref) {
     fullScreenIconColor = _ref.fullScreenIconColor,
     isFullWidth = _ref.isFullWidth,
     onFullScreen = _ref.onFullScreen;
-  var openFullScreen = function openFullScreen() {
-    setIsFullScreen(true);
-    onFullScreen === null || onFullScreen === void 0 || onFullScreen(true);
-  };
   var classes = (0, _classnames.default)('euiImageWrapper', wrapperProps && wrapperProps.className);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _image_wrapper.euiImageWrapperStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_image_wrapper.euiImageWrapperStyles);
   var cssFigureStyles = [styles.euiImageWrapper, float && styles[float], margin && styles[margin], allowFullScreen && styles.allowFullScreen, isFullWidth && styles.fullWidth, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.css];
   var _useInnerText = (0, _inner_text.useInnerText)(),
     _useInnerText2 = (0, _slicedToArray2.default)(_useInnerText, 2),
@@ -53,14 +48,17 @@ var EuiImageWrapper = exports.EuiImageWrapper = function EuiImageWrapper(_ref) {
   }, wrapperProps, {
     className: classes,
     css: cssFigureStyles
-  }), allowFullScreen ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_image_button.EuiImageButton, {
+  }), allowFullScreen ? (0, _react2.jsx)(_image_button.EuiImageButton, {
     hasAlt: !!alt,
     hasShadow: hasShadow,
-    onClick: openFullScreen,
+    onClick: function onClick() {
+      setIsFullScreen(true);
+      onFullScreen === null || onFullScreen === void 0 || onFullScreen(true);
+    },
     "data-test-subj": "activateFullScreenButton",
     isFullWidth: isFullWidth,
     fullScreenIconColor: fullScreenIconColor
-  }, children)) : children, (0, _react2.jsx)(_image_caption.EuiImageCaption, {
+  }, children) : children, (0, _react2.jsx)(_image_caption.EuiImageCaption, {
     ref: optionalCaptionRef,
     caption: caption
   }));

package/optimize/lib/components/list_group/list_group.js

@@ -1,18 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GUTTER_SIZES = exports.EuiListGroup = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _list_group_item = require("./list_group_item");
 var _services = require("../../services");
 var _global_styling = require("../../global_styling");
+var _list_group_item = require("./list_group_item");
 var _list_group = require("./list_group.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "listItems", "style", "flush", "bordered", "gutterSize", "wrapText", "maxWidth", "showToolTips", "color", "size", "ariaLabelledby"];
@@ -23,6 +24,8 @@ var _excluded = ["children", "className", "listItems", "style", "flush", "border
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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) { (0, _defineProperty2.default)(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; }
 var GUTTER_SIZES = exports.GUTTER_SIZES = ['none', 's', 'm'];
@@ -47,47 +50,48 @@ var EuiListGroup = exports.EuiListGroup = function EuiListGroup(_ref) {
     size = _ref.size,
     ariaLabelledby = _ref.ariaLabelledby,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var newStyle = style;
-  if (maxWidth && maxWidth !== true) {
-    newStyle = _objectSpread(_objectSpread({}, newStyle), (0, _global_styling.logicalStyle)('max-width', maxWidth));
-  }
   var classes = (0, _classnames.default)('euiListGroup', className);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _list_group.euiListGroupStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_list_group.euiListGroupStyles);
   var cssStyles = [styles.euiListGroup, styles[gutterSize], flush && styles.flush, bordered && styles.bordered, maxWidth === true && styles.maxWidthDefault];
-  var childrenOrListItems = null;
-  if (listItems) {
-    childrenOrListItems = listItems.map(function (item, index) {
-      return [(0, _react2.jsx)(_list_group_item.EuiListGroupItem, (0, _extends2.default)({
-        key: "title-".concat(index),
-        showToolTip: showToolTips,
-        wrapText: wrapText
-        // we're passing the parent `color` and `size` down to the children
-        // so that they can inherit it if they don't have one
-        ,
-        color: color,
-        size: size
-      }, item))];
-    });
-  } else {
-    var showToolTipObj = showToolTips && {
-      showToolTip: true
-    };
-    childrenOrListItems = _react.default.Children.map(children, function (child) {
-      if ( /*#__PURE__*/_react.default.isValidElement(child)) {
-        return (0, _services.cloneElementWithCss)(child, _objectSpread(_objectSpread({
+  var maxWidthStyle = (0, _react.useMemo)(function () {
+    if (maxWidth && maxWidth !== true) {
+      return (0, _global_styling.logicalStyle)('max-width', maxWidth);
+    }
+  }, [maxWidth]);
+  var renderedListItems = (0, _react.useMemo)(function () {
+    if (listItems && listItems.length) {
+      return listItems.map(function (item, index) {
+        return (0, _react2.jsx)(_list_group_item.EuiListGroupItem, (0, _extends2.default)({
+          key: "title-".concat(index),
+          showToolTip: showToolTips,
+          wrapText: wrapText
           // we're passing the parent `color` and `size` down to the children
           // so that they can inherit it if they don't have one
+          ,
           color: color,
           size: size
-        }, showToolTipObj), child.props));
-      }
-    });
-  }
+        }, item));
+      });
+    }
+  }, [listItems, color, size, wrapText, showToolTips]);
+  var listItemsOrChildren = renderedListItems ||
+  // Note that there's no point in memoizing `children`, as JSX changes every rerender
+  _react.default.Children.map(children, function (child) {
+    if ( /*#__PURE__*/_react.default.isValidElement(child)) {
+      return (0, _services.cloneElementWithCss)(child, _objectSpread(_objectSpread({
+        // we're passing the parent `color` and `size` down to the children
+        // so that they can inherit it if they don't have one
+        color: color,
+        size: size
+      }, showToolTips && {
+        showToolTip: true
+      }), child.props));
+    }
+  });
   return (0, _react2.jsx)("ul", (0, _extends2.default)({
     className: classes,
     css: cssStyles,
-    style: newStyle,
+    style: _objectSpread(_objectSpread({}, style), maxWidthStyle),
     "aria-labelledby": ariaLabelledby
-  }, rest), childrenOrListItems);
+  }, rest), listItemsOrChildren);
 };

package/optimize/lib/components/list_group/list_group_item.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,15 +9,15 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _icon = require("../icon");
-var _tool_tip = require("../tool_tip");
-var _inner_text = require("../inner_text");
-var _list_group_item_extra_action = require("./list_group_item_extra_action");
 var _services = require("../../services");
 var _href_validator = require("../../services/security/href_validator");
+var _inner_text = require("../inner_text");
+var _icon = require("../icon");
+var _tool_tip = require("../tool_tip");
 var _external_link_icon = require("../link/external_link_icon");
+var _list_group_item_extra_action = require("./list_group_item_extra_action");
 var _list_group_item = require("./list_group_item.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["label", "isActive", "isDisabled", "href", "rel", "target", "external", "className", "css", "style", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef", "toolTipText", "toolTipProps"],
@@ -30,8 +29,6 @@ var _excluded = ["label", "isActive", "isDisabled", "href", "rel", "target", "ex
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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) { (0, _defineProperty2.default)(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; }
 var SIZES = exports.SIZES = ['xs', 's', 'm', 'l'];
@@ -68,8 +65,7 @@ var EuiListGroupItem = exports.EuiListGroupItem = function EuiListGroupItem(_ref
   var isClickable = !!(href || onClick);
   var isHrefValid = !href || (0, _href_validator.validateHref)(href);
   var isDisabled = _isDisabled || !isHrefValid;
-  var euiTheme = (0, _services.useEuiTheme)();
-  var iconStyles = (0, _list_group_item.euiListGroupItemIconStyles)(euiTheme);
+  var iconStyles = (0, _services.useEuiMemoizedStyles)(_list_group_item.euiListGroupItemIconStyles);
   var cssIconStyles = [iconStyles.euiListGroupItem__icon, iconProps === null || iconProps === void 0 ? void 0 : iconProps.css];
   var iconNode;
   if (iconType) {
@@ -109,7 +105,7 @@ var EuiListGroupItem = exports.EuiListGroupItem = function EuiListGroupItem(_ref
       parentIsDisabled: isDisabled
     }));
   }
-  var labelStyles = (0, _list_group_item.euiListGroupItemLabelStyles)();
+  var labelStyles = _list_group_item.euiListGroupItemLabelStyles;
   var cssLabelStyles = [labelStyles.euiListGroupItem__label, wrapText ? labelStyles.wrapText : labelStyles.truncate];
 
   // Only add the label as the title attribute if it's possibly truncated
@@ -131,7 +127,7 @@ var EuiListGroupItem = exports.EuiListGroupItem = function EuiListGroupItem(_ref
 
   // Handle the variety of interaction behavior
   var itemContent;
-  var innerStyles = (0, _list_group_item.euiListGroupItemInnerStyles)(euiTheme);
+  var innerStyles = (0, _services.useEuiMemoizedStyles)(_list_group_item.euiListGroupItemInnerStyles);
   var cssInnerStyles = [innerStyles.euiListGroupItem__inner, innerStyles[size], !isDisabled && innerStyles[color], isActive && innerStyles.isActive, isDisabled && innerStyles.isDisabled, isClickable && !isDisabled && innerStyles.isClickable];
   if (href && !isDisabled) {
     itemContent = (0, _react2.jsx)("a", (0, _extends2.default)({
@@ -164,12 +160,12 @@ var EuiListGroupItem = exports.EuiListGroupItem = function EuiListGroupItem(_ref
       css: cssInnerStyles
     }, rest), iconNode, labelContent);
   }
-  var styles = (0, _list_group_item.euiListGroupItemStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_list_group_item.euiListGroupItemStyles);
   var cssStyles = [styles.euiListGroupItem, !isDisabled && isActive && styles.colors.isActive[color], !isDisabled && isClickable && styles.colors.isClickable[color], styles[size], customCss];
   var classes = (0, _classnames.default)('euiListGroupItem', className);
   if (showToolTip) {
     var _toolTipProps$anchorP;
-    var tooltipStyles = (0, _list_group_item.euiListGroupItemTooltipStyles)();
+    var tooltipStyles = _list_group_item.euiListGroupItemTooltipStyles;
     var cssTooltipStyles = [tooltipStyles.euiListGroupItem__tooltip, toolTipProps === null || toolTipProps === void 0 || (_toolTipProps$anchorP = toolTipProps.anchorProps) === null || _toolTipProps$anchorP === void 0 ? void 0 : _toolTipProps$anchorP.css];
     var anchorClasses = (0, _classnames.default)('euiListGroupItem__tooltip', toolTipProps === null || toolTipProps === void 0 ? void 0 : toolTipProps.anchorClassName);
     var anchorPropsAndCss = _objectSpread(_objectSpread({}, toolTipProps === null || toolTipProps === void 0 ? void 0 : toolTipProps.anchorProps), {}, {
@@ -194,5 +190,5 @@ var EuiListGroupItem = exports.EuiListGroupItem = function EuiListGroupItem(_ref
       style: style
     }, itemContent, extraActionNode);
   }
-  return (0, _react2.jsx)(_react.Fragment, null, itemContent);
+  return (0, _react2.jsx)(_react.default.Fragment, null, itemContent);
 };

package/optimize/lib/components/list_group/list_group_item.styles.js

@@ -73,13 +73,11 @@ var euiListGroupItemInnerStyles = exports.euiListGroupItemInnerStyles = function
     externalIcon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";;label:externalIcon;")
   };
 };
-var euiListGroupItemLabelStyles = exports.euiListGroupItemLabelStyles = function euiListGroupItemLabelStyles() {
-  return {
-    // Base
-    euiListGroupItem__label: /*#__PURE__*/(0, _react.css)(";label:euiListGroupItem__label;"),
-    truncate: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), ";;label:truncate;"),
-    wrapText: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextBreakWord)(), ";;label:wrapText;")
-  };
+var euiListGroupItemLabelStyles = exports.euiListGroupItemLabelStyles = {
+  // Base
+  euiListGroupItem__label: /*#__PURE__*/(0, _react.css)(";label:euiListGroupItem__label;"),
+  truncate: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), ";;label:truncate;"),
+  wrapText: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextBreakWord)(), ";;label:wrapText;")
 };
 var euiListGroupItemIconStyles = exports.euiListGroupItemIconStyles = function euiListGroupItemIconStyles(_ref2) {
   var euiTheme = _ref2.euiTheme;
@@ -88,9 +86,7 @@ var euiListGroupItemIconStyles = exports.euiListGroupItemIconStyles = function e
     euiListGroupItem__icon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-right', euiTheme.size.m), " flex-grow:0;flex-shrink:0;;label:euiListGroupItem__icon;")
   };
 };
-var euiListGroupItemTooltipStyles = exports.euiListGroupItemTooltipStyles = function euiListGroupItemTooltipStyles() {
-  return {
-    // Base
-    euiListGroupItem__tooltip: /*#__PURE__*/(0, _react.css)("display:inline-flex;", (0, _global_styling.logicalCSS)('width', '100%'), ";;label:euiListGroupItem__tooltip;")
-  };
+var euiListGroupItemTooltipStyles = exports.euiListGroupItemTooltipStyles = {
+  // Base
+  euiListGroupItem__tooltip: /*#__PURE__*/(0, _react.css)("display:inline-flex;", (0, _global_styling.logicalCSS)('width', '100%'), ";;label:euiListGroupItem__tooltip;")
 };

package/optimize/lib/components/list_group/list_group_item_extra_action.js

@@ -9,8 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _button = require("../button");
 var _services = require("../../services");
+var _button = require("../button");
 var _list_group_item_extra_action = require("./list_group_item_extra_action.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["iconType", "alwaysShow", "className", "isDisabled", "parentIsDisabled", "color"];
@@ -30,8 +30,7 @@ var EuiListGroupItemExtraAction = exports.EuiListGroupItemExtraAction = function
     color = _ref.color,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var extraActionClasses = (0, _classnames.default)('euiListGroupItemExtraAction', className);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var extraActionStyles = (0, _list_group_item_extra_action.euiListGroupItemExtraActionStyles)(euiTheme);
+  var extraActionStyles = (0, _services.useEuiMemoizedStyles)(_list_group_item_extra_action.euiListGroupItemExtraActionStyles);
   var cssExtraActionStyles = [extraActionStyles.euiListGroupItemExtraAction, alwaysShow && extraActionStyles.alwaysShow, !alwaysShow && !parentIsDisabled && extraActionStyles.hoverStyles];
   return (0, _react2.jsx)(_button.EuiButtonIcon, (0, _extends2.default)({
     color: color,

package/optimize/lib/components/list_group/pinnable_list_group/pinnable_list_group.js

@@ -1,19 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiPinnableListGroup = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
 var _i18n = require("../../i18n");
 var _list_group = require("../list_group");
-var _services = require("../../../services");
 var _pinnable_list_group = require("./pinnable_list_group.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "listItems", "pinTitle", "unpinTitle", "onPinClick"],
@@ -25,6 +25,8 @@ var _excluded = ["className", "listItems", "pinTitle", "unpinTitle", "onPinClick
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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) { (0, _defineProperty2.default)(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; }
 var EuiPinnableListGroup = exports.EuiPinnableListGroup = function EuiPinnableListGroup(_ref) {
@@ -35,22 +37,12 @@ var EuiPinnableListGroup = exports.EuiPinnableListGroup = function EuiPinnableLi
     onPinClick = _ref.onPinClick,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiPinnableListGroup', className);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var itemExtraActionStyles = (0, _pinnable_list_group.euiPinnableListGroupItemExtraActionStyles)(euiTheme);
-  var pinExtraAction = {
-    iconType: 'pinFilled',
-    iconSize: 's',
-    css: itemExtraActionStyles.euiPinnableListGroup__itemExtraAction
-  };
-  var pinnedExtraAction = {
-    iconType: 'pinFilled',
-    iconSize: 's',
-    css: [itemExtraActionStyles.euiPinnableListGroup__itemExtraAction, itemExtraActionStyles.pinned],
-    alwaysShow: true
-  };
+  var styles = (0, _services.useEuiMemoizedStyles)(_pinnable_list_group.euiPinnableListGroupItemExtraActionStyles);
+  var pinExtraActionLabel = (0, _i18n.useEuiI18n)('euiPinnableListGroup.pinExtraActionLabel', 'Pin item');
+  var pinnedExtraActionLabel = (0, _i18n.useEuiI18n)('euiPinnableListGroup.pinnedExtraActionLabel', 'Unpin item');
 
   // Alter listItems object with extra props
-  var getNewListItems = function getNewListItems(pinExtraActionLabel, pinnedExtraActionLabel) {
+  var pinnableListItems = (0, _react.useMemo)(function () {
     return listItems.map(function (item) {
       var pinned = item.pinned,
         _item$pinnable = item.pinnable,
@@ -59,18 +51,26 @@ var EuiPinnableListGroup = exports.EuiPinnableListGroup = function EuiPinnableLi
       // Make some declarations of props for the nav implementation
       itemProps.className = (0, _classnames.default)('euiPinnableListGroup__item', item.className);
 
-      // Add the pinning action unless the item has it's own extra action
+      // Add the pinning action unless the item has its own extra action
       if (pinnable && !itemProps.extraAction) {
         // Different displays for pinned vs unpinned
+        var sharedProps = {
+          iconType: 'pinFilled',
+          iconSize: 's',
+          css: [styles.euiPinnableListGroup__itemExtraAction, pinned && styles.pinned]
+        };
         if (pinned) {
-          itemProps.extraAction = _objectSpread(_objectSpread({}, pinnedExtraAction), {}, {
-            title: unpinTitle ? unpinTitle(item) : pinnedExtraActionLabel,
-            'aria-label': unpinTitle ? unpinTitle(item) : pinnedExtraActionLabel
+          var title = unpinTitle ? unpinTitle(item) : pinnedExtraActionLabel;
+          itemProps.extraAction = _objectSpread(_objectSpread({}, sharedProps), {}, {
+            alwaysShow: true,
+            'aria-label': title,
+            title: title
           });
         } else {
-          itemProps.extraAction = _objectSpread(_objectSpread({}, pinExtraAction), {}, {
-            title: pinTitle ? pinTitle(item) : pinExtraActionLabel,
-            'aria-label': pinTitle ? pinTitle(item) : pinExtraActionLabel
+          var _title = pinTitle ? pinTitle(item) : pinExtraActionLabel;
+          itemProps.extraAction = _objectSpread(_objectSpread({}, sharedProps), {}, {
+            'aria-label': _title,
+            title: _title
           });
         }
         // Return the item on click
@@ -80,18 +80,9 @@ var EuiPinnableListGroup = exports.EuiPinnableListGroup = function EuiPinnableLi
       }
       return itemProps;
     });
-  };
-  return (0, _react2.jsx)(_i18n.EuiI18n, {
-    tokens: ['euiPinnableListGroup.pinExtraActionLabel', 'euiPinnableListGroup.pinnedExtraActionLabel'],
-    defaults: ['Pin item', 'Unpin item']
-  }, function (_ref2) {
-    var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-      pinExtraActionLabel = _ref3[0],
-      pinnedExtraActionLabel = _ref3[1];
-    var newListItems = getNewListItems(pinExtraActionLabel, pinnedExtraActionLabel);
-    return (0, _react2.jsx)(_list_group.EuiListGroup, (0, _extends2.default)({
-      className: classes,
-      listItems: newListItems
-    }, rest));
-  });
+  }, [listItems, pinTitle, pinExtraActionLabel, unpinTitle, pinnedExtraActionLabel, onPinClick, styles]);
+  return (0, _react2.jsx)(_list_group.EuiListGroup, (0, _extends2.default)({
+    className: classes,
+    listItems: pinnableListItems
+  }, rest));
 };

package/optimize/lib/components/markdown_editor/markdown_editor_toolbar.js

@@ -62,7 +62,7 @@ var quoteCodeLinkButtons = [{
   id: 'mdCode',
   label: 'Code',
   name: 'inlineCode',
-  iconType: 'editorCodeBlock'
+  iconType: 'code'
 }, {
   id: 'mdLink',
   label: 'Link',
@@ -189,7 +189,7 @@ var EuiMarkdownEditorToolbar = exports.EuiMarkdownEditorToolbar = /*#__PURE__*/(
     }));
   })) : null), isPreviewing ? (0, _react2.jsx)(_button.EuiButtonEmpty, {
     "data-test-subj": "markdown_editor_edit_button",
-    iconType: "editorCodeBlock",
+    iconType: "code",
     color: "text",
     size: "s",
     onClick: onClickPreview,

package/optimize/lib/components/markdown_editor/plugins/markdown_tooltip/plugin.js

@@ -20,7 +20,7 @@ var tooltipPlugin = exports.tooltipPlugin = {
   name: 'tooltipPlugin',
   button: {
     label: 'Tooltip',
-    iconType: 'editorComment'
+    iconType: 'comment'
   },
   formatting: {
     prefix: '!{tooltip[',

package/optimize/lib/components/pagination/pagination.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiPagination = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
@@ -26,8 +25,6 @@ var _excluded = ["className", "pageCount", "activePage", "onPageClick", "compres
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-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) { (0, _defineProperty2.default)(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; }
 var MAX_VISIBLE_PAGES = 5;
 var NUMBER_SURROUNDING_PAGES = Math.floor(MAX_VISIBLE_PAGES * 0.5);
 var EuiPagination = exports.EuiPagination = function EuiPagination(_ref) {
@@ -185,15 +182,10 @@ var EuiPagination = exports.EuiPagination = function EuiPagination(_ref) {
         }, sharedButtonProps)));
       }
       var selectablePages = pages;
-      var accessibleName = _objectSpread(_objectSpread({}, rest['aria-label'] && {
-        'aria-label': rest['aria-label']
-      }), rest['aria-labelledby'] && {
-        'aria-labelledby': rest['aria-labelledby']
-      });
-      centerPageCount = (0, _react2.jsx)("ul", (0, _extends2.default)({
+      centerPageCount = (0, _react2.jsx)("ul", {
         className: "euiPagination__list",
         css: styles.euiPagination__list
-      }, accessibleName), firstPageButtons, selectablePages, lastPageButtons);
+      }, firstPageButtons, selectablePages, lastPageButtons);
     }
   }
 

package/optimize/lib/components/pagination/pagination_button.js

@@ -43,7 +43,7 @@ var EuiPaginationButton = exports.EuiPaginationButton = function EuiPaginationBu
     'data-test-subj': "pagination-button-".concat(pageIndex),
     isDisabled: isActive
   }, isActive && {
-    'aria-current': true
+    'aria-current': 'page'
   }), rest['aria-controls'] && {
     href: "#".concat(rest['aria-controls'])
   }), rest);

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

@@ -97,7 +97,7 @@ var EuiThemeProvider = exports.EuiThemeProvider = function EuiThemeProvider(_ref
     _color.EUI_VIS_COLOR_STORE.setVisColors(theme.colors.vis, (_theme$flags$hasVisCo = (_theme$flags = theme.flags) === null || _theme$flags === void 0 ? void 0 : _theme$flags.hasVisColorAdjustment) !== null && _theme$flags$hasVisCo !== void 0 ? _theme$flags$hasVisCo : true);
   }, []);
   var getInitialTheme = function getInitialTheme() {
-    var theme = (0, _utils.getComputed)(system, (0, _utils.buildTheme)(modificationsWithHighContrast, "_".concat(system.key)), colorMode);
+    var theme = (0, _utils.getComputed)(system, (0, _utils.buildTheme)(modificationsWithHighContrast, "_".concat(system.key)), colorMode, highContrastMode);
     setTimeout(function () {
       updateVisColorStore(theme);
     });
@@ -140,9 +140,9 @@ var EuiThemeProvider = exports.EuiThemeProvider = function EuiThemeProvider(_ref
   }, [highContrastMode]);
   (0, _react2.useEffect)(function () {
     if (!isParentTheme.current) {
-      setTheme((0, _utils.getComputed)(system, (0, _utils.buildTheme)(modificationsWithHighContrast, "_".concat(system.key)), colorMode));
+      setTheme((0, _utils.getComputed)(system, (0, _utils.buildTheme)(modificationsWithHighContrast, "_".concat(system.key)), colorMode, highContrastMode));
     }
-  }, [colorMode, system, modificationsWithHighContrast]);
+  }, [colorMode, highContrastMode, system, modificationsWithHighContrast]);
   var _useState9 = (0, _react2.useState)(),
     _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
     themeCSSVariables = _useState10[0],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "101.3.0",
+  "version": "101.4.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -52,8 +52,8 @@
     "url": "https://github.com/elastic/eui.git"
   },
   "dependencies": {
-    "@elastic/eui-theme-common": "0.1.0",
-    "@elastic/prismjs-esql": "^1.0.0",
+    "@elastic/eui-theme-common": "0.2.0",
+    "@elastic/prismjs-esql": "^1.1.0",
     "@hello-pangea/dnd": "^16.6.0",
     "@types/lodash": "^4.14.202",
     "@types/numeral": "^2.0.5",
@@ -106,7 +106,7 @@
     "@cypress/webpack-dev-server": "^1.7.0",
     "@elastic/charts": "^64.1.0",
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eui-theme-borealis": "0.1.0",
+    "@elastic/eui-theme-borealis": "0.2.0",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/css": "^11.11.0",
@@ -259,7 +259,7 @@
   },
   "peerDependencies": {
     "@elastic/datemath": "^5.0.2",
-    "@elastic/eui-theme-borealis": "0.1.0",
+    "@elastic/eui-theme-borealis": "0.2.0",
     "@emotion/css": "11.x",
     "@emotion/react": "11.x",
     "@types/react": "^16.9 || ^17.0 || ^18.0",