@elastic/eui 101.3.0 → 101.4.0

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

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "listItems", "pinTitle", "unpinTitle", "onPinClick"],
@@ -14,11 +13,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
-import { EuiI18n } from '../../i18n';
+import { useEuiMemoizedStyles } from '../../../services';
+import { useEuiI18n } from '../../i18n';
 import { EuiListGroup } from '../list_group';
-import { useEuiTheme } from '../../../services';
 import { euiPinnableListGroupItemExtraActionStyles } from './pinnable_list_group.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiPinnableListGroup = function EuiPinnableListGroup(_ref) {
@@ -29,22 +28,12 @@ export var EuiPinnableListGroup = function EuiPinnableListGroup(_ref) {
     onPinClick = _ref.onPinClick,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiPinnableListGroup', className);
-  var euiTheme = useEuiTheme();
-  var itemExtraActionStyles = 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 = useEuiMemoizedStyles(euiPinnableListGroupItemExtraActionStyles);
+  var pinExtraActionLabel = useEuiI18n('euiPinnableListGroup.pinExtraActionLabel', 'Pin item');
+  var pinnedExtraActionLabel = useEuiI18n('euiPinnableListGroup.pinnedExtraActionLabel', 'Unpin item');
 
   // Alter listItems object with extra props
-  var getNewListItems = function getNewListItems(pinExtraActionLabel, pinnedExtraActionLabel) {
+  var pinnableListItems = useMemo(function () {
     return listItems.map(function (item) {
       var pinned = item.pinned,
         _item$pinnable = item.pinnable,
@@ -53,18 +42,26 @@ export var EuiPinnableListGroup = function EuiPinnableListGroup(_ref) {
       // Make some declarations of props for the nav implementation
       itemProps.className = classNames('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
@@ -74,18 +71,9 @@ export var EuiPinnableListGroup = function EuiPinnableListGroup(_ref) {
       }
       return itemProps;
     });
-  };
-  return ___EmotionJSX(EuiI18n, {
-    tokens: ['euiPinnableListGroup.pinExtraActionLabel', 'euiPinnableListGroup.pinnedExtraActionLabel'],
-    defaults: ['Pin item', 'Unpin item']
-  }, function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-      pinExtraActionLabel = _ref3[0],
-      pinnedExtraActionLabel = _ref3[1];
-    var newListItems = getNewListItems(pinExtraActionLabel, pinnedExtraActionLabel);
-    return ___EmotionJSX(EuiListGroup, _extends({
-      className: classes,
-      listItems: newListItems
-    }, rest));
-  });
+  }, [listItems, pinTitle, pinExtraActionLabel, unpinTitle, pinnedExtraActionLabel, onPinClick, styles]);
+  return ___EmotionJSX(EuiListGroup, _extends({
+    className: classes,
+    listItems: pinnableListItems
+  }, rest));
 };

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

@@ -52,7 +52,7 @@ var quoteCodeLinkButtons = [{
   id: 'mdCode',
   label: 'Code',
   name: 'inlineCode',
-  iconType: 'editorCodeBlock'
+  iconType: 'code'
 }, {
   id: 'mdLink',
   label: 'Link',
@@ -179,7 +179,7 @@ export var EuiMarkdownEditorToolbar = /*#__PURE__*/forwardRef(function (_ref2, r
     }));
   })) : null), isPreviewing ? ___EmotionJSX(EuiButtonEmpty, {
     "data-test-subj": "markdown_editor_edit_button",
-    iconType: "editorCodeBlock",
+    iconType: "code",
     color: "text",
     size: "s",
     onClick: onClickPreview,

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

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

package/optimize/es/components/pagination/pagination.js

@@ -1,9 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "pageCount", "activePage", "onPageClick", "compressed", "aria-controls", "responsive"];
-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; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -179,15 +176,10 @@ export var 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 = ___EmotionJSX("ul", _extends({
+      centerPageCount = ___EmotionJSX("ul", {
         className: "euiPagination__list",
         css: styles.euiPagination__list
-      }, accessibleName), firstPageButtons, selectablePages, lastPageButtons);
+      }, firstPageButtons, selectablePages, lastPageButtons);
     }
   }
 

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

@@ -37,7 +37,7 @@ export var EuiPaginationButton = function EuiPaginationButton(_ref) {
     '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/es/services/theme/provider.js

@@ -91,7 +91,7 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
     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 = getComputed(system, buildTheme(modificationsWithHighContrast, "_".concat(system.key)), colorMode);
+    var theme = getComputed(system, buildTheme(modificationsWithHighContrast, "_".concat(system.key)), colorMode, highContrastMode);
     setTimeout(function () {
       updateVisColorStore(theme);
     });
@@ -134,9 +134,9 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
   }, [highContrastMode]);
   useEffect(function () {
     if (!isParentTheme.current) {
-      setTheme(getComputed(system, buildTheme(modificationsWithHighContrast, "_".concat(system.key)), colorMode));
+      setTheme(getComputed(system, buildTheme(modificationsWithHighContrast, "_".concat(system.key)), colorMode, highContrastMode));
     }
-  }, [colorMode, system, modificationsWithHighContrast]);
+  }, [colorMode, highContrastMode, system, modificationsWithHighContrast]);
   var _useState9 = useState(),
     _useState10 = _slicedToArray(_useState9, 2),
     themeCSSVariables = _useState10[0],

package/optimize/lib/components/card/checkable_card/checkable_card.js

@@ -15,7 +15,7 @@ var _panel = require("../../panel");
 var _services = require("../../../services");
 var _checkable_card = require("./checkable_card.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "css", "checkableType", "label", "checked", "disabled", "hasShadow", "hasBorder"];
+var _excluded = ["children", "className", "css", "checkableType", "label", "labelProps", "checked", "disabled", "hasShadow", "hasBorder"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -34,6 +34,7 @@ var EuiCheckableCard = exports.EuiCheckableCard = function EuiCheckableCard(_ref
     _ref$checkableType = _ref.checkableType,
     checkableType = _ref$checkableType === void 0 ? 'radio' : _ref$checkableType,
     label = _ref.label,
+    labelProps = _ref.labelProps,
     checked = _ref.checked,
     disabled = _ref.disabled,
     hasShadow = _ref.hasShadow,
@@ -78,13 +79,13 @@ var EuiCheckableCard = exports.EuiCheckableCard = function EuiCheckableCard(_ref
     onClick: disabled ? undefined : onChangeAffordance,
     color: checked ? 'primary' : 'subdued',
     grow: false
-  }, checkableElement), (0, _react2.jsx)(_panel.EuiSplitPanel.Inner, null, (0, _react2.jsx)("label", {
+  }, checkableElement), (0, _react2.jsx)(_panel.EuiSplitPanel.Inner, null, (0, _react2.jsx)("label", (0, _extends2.default)({}, labelProps, {
     ref: labelEl,
     className: labelClasses,
     css: labelStyles,
     htmlFor: id,
     "aria-describedby": children ? "".concat(id, "-details") : undefined
-  }, label), children && (0, _react2.jsx)("div", {
+  }), label), children && (0, _react2.jsx)("div", {
     id: "".concat(id, "-details"),
     className: "euiCheckableCard__children",
     css: childStyles

package/optimize/lib/components/comment_list/comment_timeline.js

@@ -35,7 +35,7 @@ var EuiCommentTimeline = exports.EuiCommentTimeline = function EuiCommentTimelin
     iconRender = (0, _react2.jsx)(_avatar.EuiAvatar, {
       className: avatarClassName,
       name: timelineAvatarAriaLabel || '',
-      iconType: "userAvatar",
+      iconType: "user",
       color: "subdued"
     });
   }

package/optimize/lib/components/datagrid/controls/display_selector.js

@@ -365,7 +365,7 @@ var useDataGridDisplaySelector = exports.useDataGridDisplaySelector = function u
         delay: "long"
       }, (0, _react2.jsx)(_button.EuiButtonIcon, {
         size: "xs",
-        iconType: "controlsHorizontal",
+        iconType: "controls",
         color: "text",
         "data-test-subj": "dataGridDisplaySelectorButton",
         onClick: function onClick() {

package/optimize/lib/components/expression/expression.js

@@ -10,8 +10,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _icon = require("../icon");
 var _services = require("../../services");
+var _icon = require("../icon");
 var _expression = require("./expression.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "description", "descriptionProps", "value", "valueProps", "color", "uppercase", "isActive", "display", "descriptionWidth", "onClick", "isInvalid", "textWrap"];
@@ -48,26 +48,18 @@ var EuiExpression = exports.EuiExpression = function EuiExpression(_ref) {
     textWrap = _ref$textWrap === void 0 ? 'break-word' : _ref$textWrap,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var calculatedColor = isInvalid ? 'danger' : color;
-  var theme = (0, _services.useEuiTheme)();
-  var styles = (0, _expression.euiExpressionStyles)(theme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_expression.euiExpressionStyles);
   var cssStyles = [styles.euiExpression, onClick && styles.isClickable, styles[color], isActive && styles.isActive.base, isActive && styles.isActive[color], display === 'columns' && styles.columns, textWrap === 'truncate' && styles.truncate];
-  var descriptionStyles = (0, _expression.euiExpressionDescriptionStyles)(theme);
+  var descriptionStyles = (0, _services.useEuiMemoizedStyles)(_expression.euiExpressionDescriptionStyles);
   var cssDescriptionStyles = [descriptionStyles.euiExpression__description, isInvalid ? descriptionStyles.danger : descriptionStyles[color], uppercase && descriptionStyles.isUppercase, textWrap === 'truncate' && descriptionStyles.truncate, display === 'columns' && descriptionStyles.columns];
-  var valueStyles = (0, _expression.euiExpressionValueStyles)(theme);
-  var cssValueStyles = [valueStyles.euiExpression__value, textWrap === 'truncate' && valueStyles.truncate, display === 'columns' && valueStyles.columns];
-  var iconStyles = (0, _expression.euiExpressionIconStyles)(theme);
+  var cssValueStyles = [_expression.euiExpressionValueStyles.euiExpression__value, textWrap === 'truncate' && _expression.euiExpressionValueStyles.truncate, display === 'columns' && _expression.euiExpressionValueStyles.columns];
+  var iconStyles = (0, _services.useEuiMemoizedStyles)(_expression.euiExpressionIconStyles);
   var cssIconStyles = [iconStyles.euiExpression__icon, display === 'columns' && iconStyles.columns];
   var classes = (0, _classnames.default)('euiExpression', className);
   var Component = onClick ? 'button' : 'span';
   var customWidth = display === 'columns' && descriptionWidth ? {
     flexBasis: descriptionWidth
   } : undefined;
-  var invalidIcon = isInvalid ? (0, _react2.jsx)(_icon.EuiIcon, {
-    className: "euiExpression__icon",
-    type: "warning",
-    css: cssIconStyles,
-    color: calculatedColor
-  }) : undefined;
   return (0, _react2.jsx)(Component, (0, _extends2.default)({
     css: cssStyles,
     className: classes,
@@ -79,5 +71,10 @@ var EuiExpression = exports.EuiExpression = function EuiExpression(_ref) {
   }), description), ' ', value && (0, _react2.jsx)("span", (0, _extends2.default)({}, valueProps, {
     className: (0, _classnames.default)('euiExpression__value', valueProps === null || valueProps === void 0 ? void 0 : valueProps.className),
     css: [].concat(cssValueStyles, [valueProps === null || valueProps === void 0 ? void 0 : valueProps.css])
-  }), value), invalidIcon);
+  }), value), isInvalid && (0, _react2.jsx)(_icon.EuiIcon, {
+    className: "euiExpression__icon",
+    type: "warning",
+    css: cssIconStyles,
+    color: calculatedColor
+  }));
 };

package/optimize/lib/components/expression/expression.styles.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.euiExpressionValueStyles = exports.euiExpressionStyles = exports.euiExpressionIconStyles = exports.euiExpressionDescriptionStyles = void 0;
-var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
 var _high_contrast = require("../../global_styling/functions/high_contrast");
@@ -51,7 +49,7 @@ var euiExpressionStyles = exports.euiExpressionStyles = function euiExpressionSt
     accent: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.textAccent), ";label:accent;")
   };
 };
-var _ref2 = process.env.NODE_ENV === "production" ? {
+var _ref = process.env.NODE_ENV === "production" ? {
   name: "shrg0y-isUppercase",
   styles: "text-transform:uppercase;label:isUppercase;"
 } : {
@@ -59,8 +57,8 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "text-transform:uppercase;label:isUppercase;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiExpressionDescriptionStyles = exports.euiExpressionDescriptionStyles = function euiExpressionDescriptionStyles(_ref3) {
-  var euiTheme = _ref3.euiTheme;
+var euiExpressionDescriptionStyles = exports.euiExpressionDescriptionStyles = function euiExpressionDescriptionStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
   return {
     euiExpression__description: /*#__PURE__*/(0, _react.css)(";label:euiExpression__description;"),
     truncate: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), " display:inline-block;vertical-align:bottom;;label:truncate;"),
@@ -70,28 +68,24 @@ var euiExpressionDescriptionStyles = exports.euiExpressionDescriptionStyles = fu
     warning: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textWarning, ";;label:warning;"),
     danger: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textDanger, ";;label:danger;"),
     accent: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textAccent, ";;label:accent;"),
-    isUppercase: _ref2,
+    isUppercase: _ref,
     columns: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('right'), " ", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.s), " flex-shrink:0;;label:columns;")
   };
 };
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "29cdh2-columns",
-  styles: "flex-grow:1;label:columns;"
-} : {
-  name: "29cdh2-columns",
-  styles: "flex-grow:1;label:columns;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var euiExpressionValueStyles = exports.euiExpressionValueStyles = function euiExpressionValueStyles(_ref4) {
-  (0, _objectDestructuringEmpty2.default)(_ref4);
-  return {
-    euiExpression__value: /*#__PURE__*/(0, _react.css)(";label:euiExpression__value;"),
-    truncate: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), " display:inline-block;vertical-align:bottom;;label:truncate;"),
-    columns: _ref
-  };
+var euiExpressionValueStyles = exports.euiExpressionValueStyles = {
+  euiExpression__value: /*#__PURE__*/(0, _react.css)(";label:euiExpression__value;"),
+  truncate: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), " display:inline-block;vertical-align:bottom;;label:truncate;"),
+  columns: process.env.NODE_ENV === "production" ? {
+    name: "29cdh2-columns",
+    styles: "flex-grow:1;label:columns;"
+  } : {
+    name: "29cdh2-columns",
+    styles: "flex-grow:1;label:columns;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }
 };
-var euiExpressionIconStyles = exports.euiExpressionIconStyles = function euiExpressionIconStyles(_ref5) {
-  var euiTheme = _ref5.euiTheme;
+var euiExpressionIconStyles = exports.euiExpressionIconStyles = function euiExpressionIconStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
   return {
     euiExpression__icon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";;label:euiExpression__icon;"),
     columns: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-top', euiTheme.size.xs), ";;label:columns;")

package/optimize/lib/components/facet/facet_button.js

@@ -1,13 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiFacetButton = 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"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _badge = require("../badge");
 var _loading = require("../loading");
@@ -24,6 +26,10 @@ var _excluded = ["children", "className", "icon", "isDisabled", "isLoading", "is
  * 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 EuiFacetButton = exports.EuiFacetButton = function EuiFacetButton(_ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -44,42 +50,42 @@ var EuiFacetButton = exports.EuiFacetButton = function EuiFacetButton(_ref) {
   });
   var selection = isSelected ? 'isSelected' : 'unSelected';
   var classes = (0, _classnames.default)('euiFacetButton', className);
-  var theme = (0, _services.useEuiTheme)();
-  var styles = (0, _facet_button.euiFacetButtonStyles)(theme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_facet_button.euiFacetButtonStyles);
   var cssStyles = [styles.euiFacetButton];
-  var textStyles = (0, _facet_button.euiFacetButtonTextStyles)(theme);
+  var textStyles = (0, _services.useEuiMemoizedStyles)(_facet_button.euiFacetButtonTextStyles);
   var cssTextStyles = [textStyles.euiFacetButton__text, textStyles[selection]];
-  var quantityStyles = (0, _facet_button.euiFacetButtonQuantityStyles)();
-  var cssQuantityStyles = [quantityStyles.euiFacetButton__quantity, isDisabled && quantityStyles.isDisabled];
-  var iconStyles = (0, _facet_button.euiFacetButtonIconStyles)();
-  var cssIconStyles = [iconStyles.euiFacetButton__icon, isDisabled && quantityStyles.isDisabled];
-  var loadingSpinnerStyles = (0, _facet_button.euiFacetButtonLoadingSpinnerStyles)();
-  var cssLoadingSpinnerStyles = [loadingSpinnerStyles.euiFacetButton__loadingSpinner];
+
+  // Spreading an obj/conditionally passing the `css` prop makes it so
+  // an empty `css-0` className isn't rendered in the DOM
+  var disabledStyles = (0, _react.useMemo)(function () {
+    return isDisabled ? {
+      css: _facet_button.euiFacetButton__disabled
+    } : undefined;
+  }, [isDisabled]);
 
   // Add quantity number if provided or loading indicator
-  var buttonQuantity;
-  if (isLoading) {
-    buttonQuantity = (0, _react2.jsx)(_loading.EuiLoadingSpinner, {
-      css: cssLoadingSpinnerStyles,
-      size: "m"
-    });
-  } else if (typeof quantity === 'number') {
-    buttonQuantity = (0, _react2.jsx)(_badge.EuiNotificationBadge, {
-      css: cssQuantityStyles,
-      className: "euiFacetButton__quantity",
-      size: "m",
-      color: !isSelected || isDisabled ? 'subdued' : 'accent'
-    }, quantity);
-  }
+  var buttonQuantity = (0, _react.useMemo)(function () {
+    if (isLoading) {
+      return (0, _react2.jsx)(_loading.EuiLoadingSpinner, {
+        size: "m"
+      });
+    } else if (typeof quantity === 'number') {
+      return (0, _react2.jsx)(_badge.EuiNotificationBadge, (0, _extends2.default)({}, disabledStyles, {
+        className: "euiFacetButton__quantity",
+        size: "m",
+        color: !isSelected || isDisabled ? 'subdued' : 'accent'
+      }), quantity);
+    }
+  }, [quantity, isLoading, isDisabled, disabledStyles, isSelected]);
 
   // Add an icon to the button if one exists.
-  var buttonIcon;
-  if ( /*#__PURE__*/_react.default.isValidElement(icon)) {
-    buttonIcon = (0, _services.cloneElementWithCss)(icon, {
-      css: cssIconStyles,
-      className: 'euiFacetButton__icon'
-    });
-  }
+  var buttonIcon = (0, _react.useMemo)(function () {
+    if ( /*#__PURE__*/_react.default.isValidElement(icon)) {
+      return (0, _services.cloneElementWithCss)(icon, _objectSpread({
+        className: 'euiFacetButton__icon'
+      }, disabledStyles));
+    }
+  }, [icon, disabledStyles]);
   return (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (ref, innerText) {
     return (0, _react2.jsx)(_button_display.EuiButtonDisplay, (0, _extends2.default)({
       className: classes,

package/optimize/lib/components/facet/facet_button.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiFacetButtonTextStyles = exports.euiFacetButtonStyles = exports.euiFacetButtonQuantityStyles = exports.euiFacetButtonLoadingSpinnerStyles = exports.euiFacetButtonIconStyles = void 0;
+exports.euiFacetButton__disabled = exports.euiFacetButtonTextStyles = exports.euiFacetButtonStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
@@ -13,51 +13,28 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var euiFacetButtonStyles = exports.euiFacetButtonStyles = function euiFacetButtonStyles(_ref3) {
-  var euiTheme = _ref3.euiTheme;
+var euiFacetButtonStyles = exports.euiFacetButtonStyles = function euiFacetButtonStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
   return {
     // Base
     euiFacetButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), " &:not(:disabled){&:hover,&:focus{text-decoration:none;.euiFacetButton__text{text-decoration:underline;}}&:focus .euiFacetButton__text{text-decoration-thickness:", euiTheme.border.width.thick, ";}}&:disabled{color:", euiTheme.colors.disabledText, ";pointer-events:none;};label:euiFacetButton;")
   };
 };
-var euiFacetButtonTextStyles = exports.euiFacetButtonTextStyles = function euiFacetButtonTextStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+var euiFacetButtonTextStyles = exports.euiFacetButtonTextStyles = function euiFacetButtonTextStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
   return {
     euiFacetButton__text: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextShift)('bold', 'data-text', euiTheme), " ", (0, _global_styling.euiTextTruncate)(), " flex-grow:1;;label:euiFacetButton__text;"),
     isSelected: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.bold, ";;label:isSelected;"),
     unSelected: /*#__PURE__*/(0, _react.css)(";label:unSelected;")
   };
 };
-var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "mpq8zy-isDisabled",
-  styles: "opacity:0.5;label:isDisabled;"
-} : {
-  name: "mpq8zy-isDisabled",
-  styles: "opacity:0.5;label:isDisabled;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var euiFacetButtonIconStyles = exports.euiFacetButtonIconStyles = function euiFacetButtonIconStyles() {
-  return {
-    euiFacetButton__icon: /*#__PURE__*/(0, _react.css)(";label:euiFacetButton__icon;"),
-    isDisabled: _ref2
-  };
-};
-var euiFacetButtonLoadingSpinnerStyles = exports.euiFacetButtonLoadingSpinnerStyles = function euiFacetButtonLoadingSpinnerStyles() {
-  return {
-    euiFacetButton__loadingSpinner: /*#__PURE__*/(0, _react.css)(";label:euiFacetButton__loadingSpinner;")
-  };
-};
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "mpq8zy-isDisabled",
-  styles: "opacity:0.5;label:isDisabled;"
+
+// Used by both icon and quantity siblings
+var euiFacetButton__disabled = exports.euiFacetButton__disabled = process.env.NODE_ENV === "production" ? {
+  name: "1622f2l-euiFacetButton__disabled",
+  styles: "opacity:0.5;label:euiFacetButton__disabled;"
 } : {
-  name: "mpq8zy-isDisabled",
-  styles: "opacity:0.5;label:isDisabled;",
+  name: "1622f2l-euiFacetButton__disabled",
+  styles: "opacity:0.5;label:euiFacetButton__disabled;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var euiFacetButtonQuantityStyles = exports.euiFacetButtonQuantityStyles = function euiFacetButtonQuantityStyles() {
-  return {
-    euiFacetButton__quantity: /*#__PURE__*/(0, _react.css)(";label:euiFacetButton__quantity;"),
-    isDisabled: _ref
-  };
 };

package/optimize/lib/components/facet/facet_group.js

@@ -30,9 +30,8 @@ var EuiFacetGroup = exports.EuiFacetGroup = function EuiFacetGroup(_ref) {
     _ref$gutterSize = _ref.gutterSize,
     gutterSize = _ref$gutterSize === void 0 ? 'm' : _ref$gutterSize,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var theme = (0, _services.useEuiTheme)();
-  var styles = (0, _facet_group.euiFacetGroupStyles)(theme, layout);
-  var cssStyles = [styles.euiFacetGroup, styles[gutterSize], styles[layout]];
+  var styles = (0, _services.useEuiMemoizedStyles)(_facet_group.euiFacetGroupStyles);
+  var cssStyles = [styles.euiFacetGroup, styles.gutterSizes[layout][gutterSize], styles[layout]];
   var classes = (0, _classnames.default)('euiFacetGroup', className);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     className: classes,