@elastic/eui 67.0.0 → 67.1.0

package/optimize/es/components/search_bar/query/query.js

@@ -40,6 +40,11 @@ export var Query = /*#__PURE__*/function () {
   }
 
   _createClass(Query, [{
+    key: "hasClauses",
+    value: function hasClauses() {
+      return this.ast.clauses.length > 0;
+    }
+  }, {
     key: "hasSimpleFieldClause",
     value: function hasSimpleFieldClause(field, value) {
       return this.ast.hasSimpleFieldClause(field, value);
@@ -99,6 +104,12 @@ export var Query = /*#__PURE__*/function () {
       var ast = this.ast.removeOrFieldClauses(field);
       return new Query(ast, this.syntax);
     }
+  }, {
+    key: "removeAllClauses",
+    value: function removeAllClauses() {
+      var ast = this.ast.removeAllClauses();
+      return new Query(ast, this.syntax);
+    }
   }, {
     key: "hasIsClause",
     value: function hasIsClause(flag) {
@@ -127,6 +138,12 @@ export var Query = /*#__PURE__*/function () {
       var ast = this.ast.removeIsClause(flag);
       return new Query(ast, this.syntax);
     }
+  }, {
+    key: "removeIsClauses",
+    value: function removeIsClauses() {
+      var ast = this.ast.removeIsClauses();
+      return new Query(ast, this.syntax);
+    }
     /**
      * Executes this query over the given iterable item and returns
      * an new array of all items that matched this query. Options:

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

@@ -10,6 +10,8 @@ import _typeof from "@babel/runtime/helpers/typeof";
 import chroma from 'chroma-js';
 import { shade, tint, lightness as getLightness } from './manipulation';
 import { getOn } from '../theme/utils';
+export var wcagContrastMin = 4.5; // WCAG AA minimum contrast ratio for normal (non-large) text
+
 /**
  * Creates a new color that meets or exceeds WCAG level AA
  * @param foreground - Color to manipulate

package/optimize/es/services/index.js

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

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

@@ -11,4 +11,5 @@ import { DEFAULT_COLOR_MODE, getComputed } from './utils';
 export var EuiSystemContext = /*#__PURE__*/createContext(EuiThemeAmsterdam);
 export var EuiModificationsContext = /*#__PURE__*/createContext({});
 export var EuiColorModeContext = /*#__PURE__*/createContext(DEFAULT_COLOR_MODE);
-export var EuiThemeContext = /*#__PURE__*/createContext(getComputed(EuiThemeAmsterdam, {}, DEFAULT_COLOR_MODE));
+export var defaultComputedTheme = getComputed(EuiThemeAmsterdam, {}, DEFAULT_COLOR_MODE);
+export var EuiThemeContext = /*#__PURE__*/createContext(defaultComputedTheme);

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

@@ -8,12 +8,38 @@ import _extends from "@babel/runtime/helpers/extends";
  * Side Public License, v 1.
  */
 import React, { forwardRef, useContext, useMemo } from 'react';
-import { EuiThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
+import { EuiThemeContext, EuiModificationsContext, EuiColorModeContext, defaultComputedTheme } from './context';
+import { getEuiDevProviderWarning } from './provider';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var providerMessage = "`EuiProvider` is missing which can result in negative effects.\nWrap your component in `EuiProvider`: https://ela.st/euiprovider.";
 export var useEuiTheme = function useEuiTheme() {
   var theme = useContext(EuiThemeContext);
   var colorMode = useContext(EuiColorModeContext);
   var modifications = useContext(EuiModificationsContext);
+
+  if (process.env.NODE_ENV !== 'production') {
+    var isFallback = theme === defaultComputedTheme;
+    var warningLevel = getEuiDevProviderWarning();
+
+    if (isFallback && typeof warningLevel !== 'undefined') {
+      switch (warningLevel) {
+        case 'log':
+          console.log(providerMessage);
+          break;
+
+        case 'warn':
+          console.warn(providerMessage);
+          break;
+
+        case 'error':
+          throw new Error(providerMessage);
+
+        default:
+          break;
+      }
+    }
+  }
+
   var assembledTheme = useMemo(function () {
     return {
       euiTheme: theme,

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

@@ -7,6 +7,6 @@
  */
 export { EuiSystemContext, EuiThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
 export { useEuiTheme, withEuiTheme } from './hooks';
-export { EuiThemeProvider } from './provider';
+export { EuiThemeProvider, getEuiDevProviderWarning, setEuiDevProviderWarning } from './provider';
 export { buildTheme, computed, isInverseColorMode, getColorMode, getComputed, getOn, mergeDeep, setOn, Computed } from './utils';
 export { COLOR_MODES_STANDARD } from './types';

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

@@ -1,5 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -12,6 +17,13 @@ import isEqual from 'lodash/isEqual';
 import { EuiSystemContext, EuiThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
 import { buildTheme, getColorMode, getComputed, mergeDeep } from './utils';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var providerWarning = undefined;
+export var setEuiDevProviderWarning = function setEuiDevProviderWarning(level) {
+  return providerWarning = level;
+};
+export var getEuiDevProviderWarning = function getEuiDevProviderWarning() {
+  return providerWarning;
+};
 export var EuiThemeProvider = function EuiThemeProvider(_ref) {
   var _system = _ref.theme,
       _colorMode = _ref.colorMode,
@@ -44,7 +56,8 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
   var prevColorMode = useRef(colorMode);
   var isParentTheme = useRef(prevSystemKey.current === parentSystem.key && colorMode === parentColorMode && isEqual(parentModifications, modifications));
 
-  var _useState7 = useState(isParentTheme.current && Object.keys(parentTheme).length ? parentTheme : getComputed(system, buildTheme(modifications, "_".concat(system.key)), colorMode)),
+  var _useState7 = useState(isParentTheme.current && Object.keys(parentTheme).length ? _objectSpread({}, parentTheme) // Intentionally create a new object to break referential equality
+  : getComputed(system, buildTheme(modifications, "_".concat(system.key)), colorMode)),
       _useState8 = _slicedToArray(_useState7, 2),
       theme = _useState8[0],
       setTheme = _useState8[1];

package/optimize/lib/components/badge/badge.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,14 +17,12 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 
-var _common = require("../common");
-
 var _services = require("../../services");
 
 var _inner_text = require("../inner_text");
@@ -33,38 +33,28 @@ var _utils = require("../color_picker/utils");
 
 var _href_validator = require("../../services/security/href_validator");
 
+var _badge = require("./badge.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "color", "iconType", "iconSide", "className", "isDisabled", "onClick", "iconOnClick", "onClickAriaLabel", "iconOnClickAriaLabel", "closeButtonProps", "href", "rel", "target", "style"];
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-// TODO - replace with variables once https://github.com/elastic/eui/issues/2731 is closed
-var colorInk = '#000';
-var colorGhost = '#fff'; // The color blind palette has some stricter accessibility needs with regards to
+var ICON_SIDES = ['left', 'right'];
+exports.ICON_SIDES = ICON_SIDES;
+var COLORS = ['default', 'hollow', 'primary', 'success', 'accent', 'warning', 'danger'];
+exports.COLORS = COLORS;
+// The color blind palette has some stricter accessibility needs with regards to
 // charts and contrast. We use the euiPaletteColorBlindBehindText variant here since our
 // accessibility concerns pertain to foreground (text) and background contrast
-
 var visColors = (0, _services.euiPaletteColorBlindBehindText)();
-var colorToHexMap = {
-  // TODO - replace with variable once https://github.com/elastic/eui/issues/2731 is closed
-  default: '#d3dae6',
-  primary: visColors[1],
-  success: visColors[0],
-  accent: visColors[2],
-  warning: visColors[5],
-  danger: visColors[9]
-};
-var COLORS = (0, _common.keysOf)(colorToHexMap);
-exports.COLORS = COLORS;
-var iconSideToClassNameMap = {
-  left: 'euiBadge--iconLeft',
-  right: 'euiBadge--iconRight'
-};
-var ICON_SIDES = (0, _common.keysOf)(iconSideToClassNameMap);
-exports.ICON_SIDES = ICON_SIDES;
 
 var EuiBadge = function EuiBadge(_ref) {
   var children = _ref.children,
@@ -85,53 +75,63 @@ var EuiBadge = function EuiBadge(_ref) {
       target = _ref.target,
       style = _ref.style,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var euiTheme = (0, _services.useEuiTheme)();
   var isHrefValid = !href || (0, _href_validator.validateHref)(href);
   var isDisabled = _isDisabled || !isHrefValid;
-  var optionalCustomStyles = style;
-  var textColor = null; // TODO - replace with variable once https://github.com/elastic/eui/issues/2731 is closed
-
-  var wcagContrastBase = 4.5; // WCAG AA contrast level
-
-  var wcagContrast = null;
-  var colorHex = null; // Check if a valid color name was provided
-
-  try {
-    if (COLORS.indexOf(color) > -1) {
-      // Get the hex equivalent for the provided color name
-      colorHex = colorToHexMap[color]; // Set dark or light text color based upon best contrast
-
-      textColor = setTextColor(colorHex);
-      optionalCustomStyles = _objectSpread({
-        backgroundColor: colorHex,
-        color: textColor
-      }, optionalCustomStyles);
-    } else if (color !== 'hollow') {
-      // This is a custom color that is neither from the base palette nor hollow
-      // Let's do our best to ensure that it provides sufficient contrast
-      // Set dark or light text color based upon best contrast
-      textColor = setTextColor(color); // Check the contrast
-
-      wcagContrast = getColorContrast(textColor, color);
-
-      if (wcagContrast < wcagContrastBase) {
-        // It's low contrast, so lets show a warning in the console
-        console.warn('Warning: ', color, ' badge has low contrast of ', wcagContrast.toFixed(2), '. Should be above ', wcagContrastBase, '.');
+  var optionalCustomStyles = (0, _react.useMemo)(function () {
+    var colorToHexMap = {
+      default: euiTheme.euiTheme.colors.lightShade,
+      hollow: '',
+      primary: visColors[1],
+      success: visColors[0],
+      accent: visColors[2],
+      warning: visColors[5],
+      danger: visColors[9]
+    };
+    var textColor = null;
+    var contrastRatio = null;
+    var colorHex = null;
+
+    try {
+      // Check if a valid color name was provided
+      if (COLORS.includes(color)) {
+        if (color === 'hollow') return style; // hollow uses its own CSS class
+        // Get the hex equivalent for the provided color name
+
+        colorHex = colorToHexMap[color]; // Set dark or light text color based upon best contrast
+
+        textColor = setTextColor(euiTheme, colorHex);
+        return _objectSpread({
+          backgroundColor: colorHex,
+          color: textColor
+        }, style);
+      } else {
+        // This is a custom color- let's do our best to ensure that it provides sufficient contrast
+        // Set dark or light text color based upon best contrast
+        textColor = setTextColor(euiTheme, color); // Check the contrast
+
+        contrastRatio = getColorContrast(textColor, color);
+
+        if (contrastRatio < _services.wcagContrastMin) {
+          // It's low contrast, so lets show a warning in the console
+          console.warn('Warning: ', color, ' badge has low contrast of ', contrastRatio.toFixed(2), '. Should be above ', _services.wcagContrastMin, '.');
+        }
+
+        return _objectSpread({
+          backgroundColor: color,
+          color: textColor
+        }, style);
       }
-
-      optionalCustomStyles = _objectSpread({
-        backgroundColor: color,
-        color: textColor
-      }, optionalCustomStyles);
+    } catch (err) {
+      handleInvalidColor(color);
     }
-  } catch (err) {
-    handleInvalidColor(color);
-  }
-
-  var classes = (0, _classnames.default)('euiBadge', {
-    'euiBadge-isClickable': (onClick || href) && !iconOnClick,
-    'euiBadge-isDisabled': isDisabled,
-    'euiBadge--hollow': color === 'hollow'
-  }, iconSideToClassNameMap[iconSide], className);
+  }, [color, style, euiTheme]);
+  var styles = (0, _badge.euiBadgeStyles)(euiTheme);
+  var cssStyles = [styles.euiBadge, (onClick || href) && !iconOnClick && styles.clickable, isDisabled && styles.disabled, color === 'hollow' && styles.hollow];
+  var textCssStyles = [styles.text.euiBadge__text, (onClick || href) && !isDisabled && styles.text.clickable];
+  var iconCssStyles = [styles.icon.euiBadge__icon, styles.icon[iconSide]];
+  var iconButtonCssStyles = [styles.iconButton.euiBadge__iconButton, styles.iconButton[iconSide]];
+  var classes = (0, _classnames.default)('euiBadge', className);
   var closeClassNames = (0, _classnames.default)('euiBadge__icon', closeButtonProps && closeButtonProps.className);
   var Element = href && !isDisabled ? 'a' : 'button';
   var relObj = {};
@@ -161,6 +161,7 @@ var EuiBadge = function EuiBadge(_ref) {
       optionalIcon = (0, _react2.jsx)("button", {
         type: "button",
         className: "euiBadge__iconButton",
+        css: iconButtonCssStyles,
         "aria-label": iconOnClickAriaLabel,
         disabled: isDisabled,
         title: iconOnClickAriaLabel,
@@ -169,7 +170,8 @@ var EuiBadge = function EuiBadge(_ref) {
         type: iconType,
         size: "s",
         color: "inherit" // forces the icon to inherit its parent color
-
+        ,
+        css: iconCssStyles
       }, closeButtonProps, {
         className: closeClassNames
       })));
@@ -178,6 +180,7 @@ var EuiBadge = function EuiBadge(_ref) {
         type: iconType,
         size: children ? 's' : 'm',
         className: "euiBadge__icon",
+        css: iconCssStyles,
         color: "inherit" // forces the icon to inherit its parent color
 
       });
@@ -189,28 +192,34 @@ var EuiBadge = function EuiBadge(_ref) {
   }
 
   var content = (0, _react2.jsx)("span", {
-    className: "euiBadge__content"
-  }, children && (0, _react2.jsx)("span", {
-    className: "euiBadge__text"
-  }, children), optionalIcon);
+    className: "euiBadge__content",
+    css: styles.euiBadge__content
+  }, iconSide === 'left' && optionalIcon, children && (0, _react2.jsx)("span", {
+    className: "euiBadge__text",
+    css: textCssStyles
+  }, children), iconSide === 'right' && optionalIcon);
 
   if (iconOnClick) {
     return onClick || href ? (0, _react2.jsx)("span", {
       className: classes,
+      css: cssStyles,
       style: optionalCustomStyles
     }, (0, _react2.jsx)("span", {
-      className: "euiBadge__content"
-    }, (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (ref, innerText) {
+      className: "euiBadge__content",
+      css: styles.euiBadge__content
+    }, iconSide === 'left' && optionalIcon, (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (ref, innerText) {
       return (0, _react2.jsx)(Element, (0, _extends2.default)({
         className: "euiBadge__childButton",
+        css: styles.euiBadge__childButton,
         disabled: isDisabled,
         "aria-label": onClickAriaLabel,
         ref: ref,
         title: innerText
       }, relObj, rest), children);
-    }), optionalIcon)) : (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (ref, innerText) {
+    }), iconSide === 'right' && optionalIcon)) : (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (ref, innerText) {
       return (0, _react2.jsx)("span", (0, _extends2.default)({
         className: classes,
+        css: cssStyles,
         style: optionalCustomStyles,
         ref: ref,
         title: innerText
@@ -222,6 +231,7 @@ var EuiBadge = function EuiBadge(_ref) {
         disabled: isDisabled,
         "aria-label": onClickAriaLabel,
         className: classes,
+        css: cssStyles,
         style: optionalCustomStyles,
         ref: ref,
         title: innerText
@@ -231,6 +241,7 @@ var EuiBadge = function EuiBadge(_ref) {
     return (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (ref, innerText) {
       return (0, _react2.jsx)("span", (0, _extends2.default)({
         className: classes,
+        css: cssStyles,
         style: optionalCustomStyles,
         ref: ref,
         title: innerText
@@ -247,13 +258,14 @@ function getColorContrast(textColor, color) {
   return contrastValue;
 }
 
-function setTextColor(bgColor) {
-  var textColor = _services.isColorDark.apply(void 0, (0, _toConsumableArray2.default)((0, _chromaJs.default)(bgColor).rgb())) ? colorGhost : colorInk;
+function setTextColor(_ref2, bgColor) {
+  var euiTheme = _ref2.euiTheme;
+  var textColor = _services.isColorDark.apply(void 0, (0, _toConsumableArray2.default)((0, _chromaJs.default)(bgColor).rgb())) ? euiTheme.colors.ghost : euiTheme.colors.ink;
   return textColor;
 }
 
 function handleInvalidColor(color) {
-  var isNamedColor = color && COLORS.includes(color) || color === 'hollow';
+  var isNamedColor = COLORS.includes(color);
   var isValidColorString = color && (0, _utils.chromaValid)((0, _utils.parseColor)(color) || '');
 
   if (!isNamedColor && !isValidColorString) {

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

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiBadgeStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+var _mixins = require("../../themes/amsterdam/global_styling/mixins");
+
+var _services = require("../../services");
+
+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)."; }
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1hw5vc4-clickable",
+  styles: "cursor:pointer;label:clickable;"
+} : {
+  name: "1hw5vc4-clickable",
+  styles: "cursor:pointer;label:clickable;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+      colorMode = euiThemeContext.colorMode;
+  return {
+    euiBadge: /*#__PURE__*/(0, _react.css)("display:inline-block;vertical-align:middle;padding:0 ", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('max-width', '100%'), " font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs').fontSize, ";line-height:", euiTheme.base + 2, "px;font-weight:", euiTheme.font.weight.medium, ";white-space:nowrap;text-decoration:none;cursor:default;background-color:transparent;border:", euiTheme.border.width.thin, " solid transparent;border-radius:", parseFloat(String(euiTheme.border.radius.medium)) / 2, "px;", (0, _global_styling.logicalTextAlignCSS)('left'), " &:focus-within{", (0, _global_styling.euiFocusRing)(euiThemeContext), ";}&+.euiBadge{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";};label:euiBadge;"),
+    clickable: /*#__PURE__*/(0, _react.css)("&:not(:disabled){&:hover,&:focus{text-decoration:underline;}}&:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext), ";}&:disabled{cursor:not-allowed;};label:clickable;"),
+    disabled: /*#__PURE__*/(0, _react.css)("color:", (0, _mixins.euiButtonColor)(euiThemeContext, 'disabled').color, "!important;background-color:", (0, _mixins.euiButtonColor)(euiThemeContext, 'disabled').backgroundColor, "!important;;label:disabled;"),
+    // Hollow has a border and is mostly used for autocompleters.
+    hollow: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";border-color:", colorMode === 'DARK' ? (0, _services.tint)(euiTheme.border.color, 0.15) : euiTheme.border.color, ";color:", euiTheme.colors.text, ";;label:hollow;"),
+    // Content wrapper
+    euiBadge__content: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)( // Ensure proper height in case of just displaying an icon
+    'min-height', "".concat(euiTheme.base + parseFloat(String(euiTheme.border.width.thin)) * 2, "px")), " display:flex;align-items:center;overflow:hidden;;label:euiBadge__content;"),
+    // Text
+    text: {
+      euiBadge__text: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), " cursor:inherit;;label:euiBadge__text;"),
+      clickable: _ref
+    },
+    // Icon
+    icon: {
+      euiBadge__icon: /*#__PURE__*/(0, _react.css)(";label:euiBadge__icon;"),
+      right: /*#__PURE__*/(0, _react.css)("&:not(:only-child){", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";};label:right;"),
+      left: /*#__PURE__*/(0, _react.css)("&:not(:only-child){", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xs), ";};label:left;")
+    },
+    // Clickable icons (iconOnClick)
+    iconButton: {
+      euiBadge__iconButton: /*#__PURE__*/(0, _react.css)("font-size:0;&:focus{background-color:", (0, _services.transparentize)(euiTheme.colors.ghost, 0.8), ";color:", euiTheme.colors.ink, ";border-radius:", parseFloat(String(euiTheme.border.radius.small)) / 2, "px;}&:disabled{cursor:not-allowed;}.euiBadge__icon{margin:0!important;};label:euiBadge__iconButton;"),
+      right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";;label:right;"),
+      left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xs), ";;label:left;")
+    },
+    // Used in badges with both onClick & iconOnClick
+    euiBadge__childButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), " text-align:inherit;font-weight:inherit;line-height:inherit;color:inherit;&:disabled{cursor:not-allowed;}&:not(:disabled){&:hover,&:focus{text-decoration:underline;}};label:euiBadge__childButton;")
+  };
+};
+
+exports.euiBadgeStyles = euiBadgeStyles;

package/optimize/lib/components/basic_table/in_memory_table.js

@@ -540,6 +540,10 @@ var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
 
       if (sortName !== prevState.prevProps.sortName || sortDirection !== prevState.prevProps.sortDirection) {
         updatedPrevState = _objectSpread(_objectSpread({}, updatedPrevState), {}, {
+          prevProps: _objectSpread(_objectSpread({}, updatedPrevState.prevProps), {}, {
+            sortName: sortName,
+            sortDirection: sortDirection
+          }),
           sortName: sortName,
           sortDirection: sortDirection
         });

package/optimize/lib/components/button/button.js

@@ -91,7 +91,6 @@ exports.EuiButton = EuiButton;
 EuiButton.displayName = 'EuiButton'; // Use defaultProps for simple pass-through props
 
 EuiButton.defaultProps = {
-  minWidth: 112,
   size: 'm',
   color: 'primary'
 };

package/optimize/lib/components/button/button_display/_button_display.js

@@ -30,7 +30,7 @@ var _href_validator = require("../../../services/security/href_validator");
 
 var _mixins = require("../../../themes/amsterdam/global_styling/mixins");
 
-var _excluded = ["children", "iconType", "iconSide", "size", "isDisabled", "disabled", "isLoading", "isSelected", "fullWidth", "minWidth", "contentProps", "textProps", "href", "target", "rel", "type"];
+var _excluded = ["children", "iconType", "iconSide", "iconSize", "size", "isDisabled", "disabled", "isLoading", "isSelected", "fullWidth", "minWidth", "contentProps", "textProps", "href", "target", "rel", "type", "style"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -59,6 +59,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
   var children = _ref2.children,
       iconType = _ref2.iconType,
       iconSide = _ref2.iconSide,
+      iconSize = _ref2.iconSize,
       _ref2$size = _ref2.size,
       size = _ref2$size === void 0 ? 'm' : _ref2$size,
       isDisabled = _ref2.isDisabled,
@@ -74,15 +75,15 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
       rel = _ref2.rel,
       _ref2$type = _ref2.type,
       type = _ref2$type === void 0 ? 'button' : _ref2$type,
+      style = _ref2.style,
       rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   var buttonIsDisabled = isButtonDisabled({
     href: href,
     isDisabled: isDisabled || disabled,
     isLoading: isLoading
   });
-  var minWidthPx = typeof minWidth === 'number' ? "".concat(minWidth, "px") : minWidth;
   var theme = (0, _services.useEuiTheme)();
-  var styles = (0, _button_display.euiButtonDisplayStyles)(theme, minWidthPx);
+  var styles = (0, _button_display.euiButtonDisplayStyles)(theme);
   var buttonRadiusStyle = (0, _mixins.useEuiButtonRadiusCSS)()[size];
   var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
   var innerNode = (0, _react2.jsx)(_button_display_content.EuiButtonDisplayContent, (0, _extends2.default)({
@@ -90,6 +91,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
     isDisabled: buttonIsDisabled,
     iconType: iconType,
     iconSide: iconSide,
+    iconSize: iconSize,
     textProps: _objectSpread({}, textProps)
   }, contentProps), children);
   var element = href && !buttonIsDisabled ? 'a' : 'button';
@@ -118,6 +120,9 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
 
   return (0, _react2.createElement)(element, _objectSpread(_objectSpread(_objectSpread({
     css: cssStyles,
+    style: minWidth ? _objectSpread(_objectSpread({}, style), {}, {
+      minWidth: minWidth
+    }) : style,
     ref: ref
   }, elementProps), relObj), rest), innerNode);
 });

package/optimize/lib/components/button/button_display/_button_display.styles.js

@@ -32,11 +32,11 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeContext, minWidth) {
+var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiButtonDisplay: /*#__PURE__*/(0, _react.css)(euiButtonBaseCSS(), ";", minWidth && (0, _global_styling.logicalCSS)('min-width', minWidth), ";font-weight:", euiTheme.font.weight.medium, ";padding:0 ", euiTheme.size.m, ";&:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
+    euiButtonDisplay: /*#__PURE__*/(0, _react.css)(euiButtonBaseCSS(), ";", (0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), " font-weight:", euiTheme.font.weight.medium, ";padding:0 ", euiTheme.size.m, ";&:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
     // States
     isDisabled: _ref,
     fullWidth: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), ";;label:fullWidth;"),

package/optimize/lib/components/button/button_display/_button_display_content.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiButtonDisplayContent = void 0;
+exports.ICON_SIZES = exports.ICON_SIDES = exports.EuiButtonDisplayContent = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -26,6 +26,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "textProps", "isLoading", "isDisabled", "iconType", "iconSize", "iconSide"];
+var ICON_SIZES = ['s', 'm'];
+exports.ICON_SIZES = ICON_SIZES;
+var ICON_SIDES = ['left', 'right'];
+exports.ICON_SIDES = ICON_SIDES;
 
 var EuiButtonDisplayContent = function EuiButtonDisplayContent(_ref) {
   var children = _ref.children,
@@ -43,7 +47,7 @@ var EuiButtonDisplayContent = function EuiButtonDisplayContent(_ref) {
   var styles = (0, _button_display_content.euiButtonDisplayContentStyles)(theme);
   var cssStyles = [styles.euiButtonDisplayContent, iconSide && styles[iconSide]];
   var cssSpinnerStyles = [styles.euiButtonDisplayContent__spinner];
-  var cssIconStyles = [styles.euiButtonDisplayContent__icon]; // Add an icon to the button if one exists.
+  var cssIconStyles = [styles.euiButtonDisplayContent__icon, iconSize && styles[iconSize]]; // Add an icon to the button if one exists.
 
   var icon; // When the button is disabled the text gets gray
   // and in some buttons the background gets a light gray

package/optimize/lib/components/button/button_display/_button_display_content.styles.js

@@ -47,7 +47,10 @@ var euiButtonDisplayContentStyles = function euiButtonDisplayContentStyles(_ref4
     left: /*#__PURE__*/(0, _react.css)(";label:left;"),
     right: _ref3,
     euiButtonDisplayContent__spinner: _ref2,
-    euiButtonDisplayContent__icon: _ref
+    euiButtonDisplayContent__icon: _ref,
+    // Icon size
+    s: /*#__PURE__*/(0, _react.css)(";label:s;"),
+    m: /*#__PURE__*/(0, _react.css)(";label:m;")
   };
 };