@elastic/eui 113.1.0 → 113.2.0

package/es/components/accordion/accordion_trigger/accordion_arrow.js

@@ -33,7 +33,7 @@ export var EuiAccordionArrow = function EuiAccordionArrow(_ref) {
   }, arrowProps, rest, {
     className: classes,
     css: cssStyles,
-    iconType: "arrowRight"
+    iconType: "chevronSingleRight"
   }));
 };
 EuiAccordionArrow.propTypes = {

package/es/components/badge/badge.js

@@ -29,7 +29,7 @@ import { useEuiTheme, useEuiMemoizedStyles, getSecureRelForTarget } from '../../
 import { validateHref } from '../../services/security/href_validator';
 import { EuiInnerText } from '../inner_text';
 import { EuiIcon } from '../icon';
-import { getTextColor, getIsValidColor } from './color_utils';
+import { getTextColor, getIsValidColor, getCustomInteractiveColors } from './color_utils';
 import { warnIfContrastBelowMin, wcagContrastMin } from '../../services/color/contrast';
 import { euiBadgeStyles } from './badge.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -60,7 +60,7 @@ export var EuiBadge = function EuiBadge(_ref) {
   var isDisabled = _isDisabled || !isHrefValid;
   var isNamedColor = COLORS.includes(color);
   var isIconOnly = !children && !!iconType;
-  var euiTheme = useEuiTheme();
+  var euiThemeContext = useEuiTheme();
   var customColorStyles = useMemo(function () {
     // Disabled badges should not have custom colors
     if (isDisabled) return style;
@@ -70,22 +70,28 @@ export var EuiBadge = function EuiBadge(_ref) {
     // Do our best to ensure custom colors provide sufficient contrast
     try {
       // Set dark or light text color based upon best contrast
-      var textColor = getTextColor(euiTheme, color);
+      var textColor = getTextColor(euiThemeContext, color);
+      // These values are approximations as we don't know what custom color is passed
+      var customInteractiveColors = getCustomInteractiveColors(euiThemeContext, color);
 
       // Emit a warning if contrast is below WCAG threshold (centralized util)
       warnIfContrastBelowMin(textColor, color, wcagContrastMin);
       return _objectSpread({
         '--euiBadgeBackgroundColor': color,
-        '--euiBadgeTextColor': textColor
+        '--euiBadgeTextColor': textColor,
+        '--euiBadgeBackgroundHoverColor': customInteractiveColors.backgroundHover,
+        '--euiBadgeBackgroundActiveColor': customInteractiveColors.backgroundActive
       }, style);
     } catch (err) {
       if (!getIsValidColor(color)) {
         console.warn('EuiBadge expects a valid color. This can either be a three or six ' + "character hex value, rgb(a) value, hsv value, hollow, or one of the following: ".concat(COLORS, ". ") + "Instead got ".concat(color, "."));
       }
     }
-  }, [color, isNamedColor, isDisabled, style, euiTheme]);
+  }, [color, isNamedColor, isDisabled, style, euiThemeContext]);
   var styles = useEuiMemoizedStyles(euiBadgeStyles);
-  var cssStyles = [styles.euiBadge, isIconOnly && styles.iconOnly].concat(_toConsumableArray(isDisabled ? [styles.disabled] : [isNamedColor && fill && styles.colors.fill[color], isNamedColor && !fill && styles.colors.base[color], !iconOnClick && (onClick || href) && styles.clickable]));
+  var clickableCssStyles = styles.clickable[isNamedColor ? color === 'hollow' ? 'hollow' : !fill ? 'base' : 'fill' : 'custom'];
+  var iconOnClickCssStyles = isNamedColor ? styles.iconClickable[color === 'hollow' ? 'hollow' : !fill ? 'base' : 'fill'] : styles.iconClickable.custom;
+  var cssStyles = [styles.euiBadge, isIconOnly && styles.iconOnly].concat(_toConsumableArray(isDisabled ? [styles.disabled] : [isNamedColor && fill && styles.colors.fill[color], isNamedColor && !fill && styles.colors.base[color], !iconOnClick && (onClick || href) && clickableCssStyles, iconOnClick && !(onClick || href) && iconOnClickCssStyles]));
   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]];

package/es/components/badge/badge.styles.js

@@ -8,7 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { euiFontSize, euiFocusRing, euiTextTruncate, highContrastModeStyles, logicalCSS, logicalShorthandCSS, logicalTextAlignCSS, mathWithUnits } from '../../global_styling';
+import { euiFontSize, euiFocusRing, euiTextTruncate, highContrastModeStyles, logicalCSS, logicalShorthandCSS, logicalTextAlignCSS, mathWithUnits, euiButtonInteractionStyles } from '../../global_styling';
 import { euiBadgeColors } from './color_utils';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "1jbvl30-euiBadge__iconButton",
@@ -30,9 +30,31 @@ export var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var badgeColors = euiBadgeColors(euiThemeContext);
   var defaultBadgeColors = badgeColors.fill.default;
+  var focusOutlineOffset = mathWithUnits([euiTheme.focus.width, euiTheme.border.width.thin], function (x, y) {
+    return x + y;
+  });
   var setBadgeColorVars = function setBadgeColorVars(colors) {
-    return "\n    --euiBadgeTextColor: ".concat(colors.color, ";\n    --euiBadgeBackgroundColor: ").concat(colors.backgroundColor, ";\n    ").concat(colors.border ? "--euiBadgeBorder: ".concat(colors.border, ";") : '', "\n  ");
+    return "\n    --euiBadgeTextColor: ".concat(colors.color, ";\n    --euiBadgeBackgroundColor: ").concat(colors.backgroundColor, ";\n    --euiBadgeBackgroundHoverColor: ").concat(colors.backgroundHover, ";\n    --euiBadgeBackgroundActiveColor: ").concat(colors.backgroundActive, ";\n    ").concat(colors.borderColor ? "--euiBadgeBorder: ".concat(euiTheme.border.width.thin, " solid ").concat(colors.borderColor, ";") : '', "\n  ");
+  };
+  var getButtonInteractionStyles = function getButtonInteractionStyles(euiThemeContext) {
+    var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'fill';
+    return "\n      ".concat(euiButtonInteractionStyles(euiThemeContext, {
+      color: 'var(--euiBadgeTextColor)',
+      background: 'var(--euiBadgeBackgroundColor)',
+      borderColor: 'var(--euiBadgeBorder)',
+      backgroundHover: 'var(--euiBadgeBackgroundHoverColor)',
+      backgroundActive: 'var(--euiBadgeBackgroundActiveColor)'
+    }, type), "\n    ");
+  };
+  var highContrastStyles = highContrastModeStyles(euiThemeContext, {
+    preferred: "\n      text-decoration: underline;\n    ",
+    forced: "\n      &::after { display: none; }\n    "
+  });
+  var focusStyles = "\n    &:focus {\n      ".concat(euiFocusRing(euiThemeContext, 'outset'), "\n      /* uses custom offset as the default \"outset\" is not enough */\n      outline-offset: ").concat(focusOutlineOffset, ";\n    }\n  ");
+  var getClickableStyles = function getClickableStyles(interactionStyles) {
+    return "\n    &:not(:disabled) {\n      ".concat(interactionStyles, "\n\n      &:hover,\n      &:focus {\n        ").concat(highContrastStyles, "\n      }\n\n      ").concat(focusStyles, "\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  ");
   };
+  var customInteractiveStyles = "\n    &:hover {\n      background-color: var(--euiBadgeBackgroundHoverColor);\n    }\n\n    &:active {\n      background-color: var(--euiBadgeBackgroundActiveColor);\n    }\n\n    ".concat(focusStyles, "\n  ");
   var inlinePadding = mathWithUnits(
   // Account for the (usually transparent) border so that the visual
   // padding is of size s
@@ -52,7 +74,36 @@ export var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
     [euiTheme.size.xs, euiTheme.border.width.thin], function (size, borderWidth) {
       return size - borderWidth;
     }), ";;label:iconOnly;"),
-    clickable: /*#__PURE__*/css("&:not(:disabled){&:hover,&:focus{text-decoration:underline;}}&:focus{", euiFocusRing(euiThemeContext), ";}&:disabled{cursor:not-allowed;};label:clickable;"),
+    get clickable() {
+      // ensures border colors are aligned with the background colors
+      var borderHoverStyles = "\n        &:hover { \n          border-color: var(--euiBadgeBackgroundHoverColor);\n        }\n        &:active {\n          border-color: var(--euiBadgeBackgroundActiveColor);\n        }\n      ";
+      return {
+        fill: /*#__PURE__*/css(getClickableStyles(getButtonInteractionStyles(euiThemeContext, 'fill')), " ", borderHoverStyles, ";;label:fill;"),
+        base: /*#__PURE__*/css(getClickableStyles(getButtonInteractionStyles(euiThemeContext, 'overlay')), " ", highContrastModeStyles(euiThemeContext, {
+          none: borderHoverStyles
+        }), ";;label:base;"),
+        // hollow has a visible border that must not be overwritten on hover
+        hollow: /*#__PURE__*/css(getClickableStyles(getButtonInteractionStyles(euiThemeContext, 'overlay')), " &:hover,&:focus{", highContrastStyles, ";};label:hollow;"),
+        custom: /*#__PURE__*/css("&:not(:disabled){", customInteractiveStyles, ";&:hover,&:focus{", highContrastStyles, ";}};label:custom;")
+      };
+    },
+    // on icon button hover, we apply hover styles on the entire badge
+    get iconClickable() {
+      var iconButtonSelector = function iconButtonSelector() {
+        var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ':hover';
+        return "&:not(:disabled):where(:has(.euiBadge__iconButton".concat(state, "))");
+      };
+      var borderHoverStyles = "\n        border-color: var(--euiBadgeBackgroundHoverColor);\n      ";
+      return {
+        fill: /*#__PURE__*/css(iconButtonSelector(), "{", getButtonInteractionStyles(euiThemeContext, 'fill'), " ", borderHoverStyles, ";}", iconButtonSelector(':is(:hover, :focus)'), "{", highContrastStyles, ";};label:fill;"),
+        base: /*#__PURE__*/css(iconButtonSelector(), "{", getButtonInteractionStyles(euiThemeContext, 'overlay'), " ", highContrastModeStyles(euiThemeContext, {
+          none: borderHoverStyles
+        }), ";}", iconButtonSelector(':is(:hover, :focus)'), "{", highContrastStyles, ";};label:base;"),
+        // hollow has a visible border that must not be overwritten on hover
+        hollow: /*#__PURE__*/css(iconButtonSelector(), "{", getButtonInteractionStyles(euiThemeContext, 'overlay'), ";}", iconButtonSelector(':is(:hover, :focus)'), "{", highContrastStyles, ";};label:hollow;"),
+        custom: /*#__PURE__*/css(iconButtonSelector(':is(:hover, :focus)'), "{", highContrastStyles, " ", customInteractiveStyles, ";};label:custom;")
+      };
+    },
     colors: {
       fill: {
         default: /*#__PURE__*/css(setBadgeColorVars(badgeColors.fill.default), " border-color:", badgeColors.fill.default.borderColor, ";;label:default;"),
@@ -77,7 +128,7 @@ export var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
         danger: /*#__PURE__*/css(setBadgeColorVars(badgeColors.base.danger), ";label:danger;")
       }
     },
-    disabled: /*#__PURE__*/css(setBadgeColorVars(badgeColors.disabled), " border-color:", badgeColors.disabled.borderColor, ";*::selection{color:", euiTheme.colors.emptyShade, ";};label:disabled;"),
+    disabled: /*#__PURE__*/css(setBadgeColorVars(badgeColors.disabled), " border-color:", badgeColors.disabled.borderColor, ";*::selection{color:", euiTheme.colors.backgroundBasePlain, ";};label:disabled;"),
     // Content wrapper
     euiBadge__content: /*#__PURE__*/css(logicalCSS(
     // Ensure proper height in case of just displaying an icon

package/es/components/badge/color_utils.js

@@ -20,7 +20,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 import chroma from 'chroma-js';
 import { isColorDark } from '../../services';
-import { euiButtonColor, euiButtonFillColor } from '../../global_styling/mixins/_button';
+import { getEuiButtonColorValues, getEuiFilledButtonColorValues } from '../../global_styling/mixins/_button';
 import { chromaValid, parseColor } from '../color_picker/utils';
 export var euiBadgeColors = function euiBadgeColors(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
@@ -28,38 +28,44 @@ export var euiBadgeColors = function euiBadgeColors(euiThemeContext) {
   var badgeColorsAccentText = getBadgeColors(euiThemeContext, euiTheme.colors.textAccent);
   var fill = {
     // Colors shared between buttons and badges
-    primary: euiButtonFillColor(euiThemeContext, 'primary'),
-    neutral: euiButtonFillColor(euiThemeContext, 'neutral'),
-    success: euiButtonFillColor(euiThemeContext, 'success'),
-    warning: euiButtonFillColor(euiThemeContext, 'warning'),
-    risk: euiButtonFillColor(euiThemeContext, 'risk'),
-    danger: euiButtonFillColor(euiThemeContext, 'danger'),
-    accent: euiButtonFillColor(euiThemeContext, 'accent'),
+    primary: getEuiFilledButtonColorValues(euiThemeContext, 'primary'),
+    neutral: getEuiFilledButtonColorValues(euiThemeContext, 'neutral'),
+    success: getEuiFilledButtonColorValues(euiThemeContext, 'success'),
+    warning: getEuiFilledButtonColorValues(euiThemeContext, 'warning'),
+    risk: getEuiFilledButtonColorValues(euiThemeContext, 'risk'),
+    danger: getEuiFilledButtonColorValues(euiThemeContext, 'danger'),
+    accent: getEuiFilledButtonColorValues(euiThemeContext, 'accent'),
     // Colors unique to badges
     default: _objectSpread(_objectSpread({}, getBadgeColors(euiThemeContext, euiTheme.components.badgeBackground)), {}, {
-      borderColor: highContrastMode ? euiTheme.border.color : ''
+      backgroundHover: euiTheme.components.buttons.backgroundFilledTextHover,
+      backgroundActive: euiTheme.components.buttons.backgroundFilledTextActive,
+      borderColor: 'transparent'
     })
   };
   var base = {
-    primary: euiButtonColor(euiThemeContext, 'primary'),
-    neutral: euiButtonColor(euiThemeContext, 'neutral'),
-    success: euiButtonColor(euiThemeContext, 'success'),
-    warning: euiButtonColor(euiThemeContext, 'warning'),
-    risk: euiButtonColor(euiThemeContext, 'risk'),
-    danger: euiButtonColor(euiThemeContext, 'danger'),
-    accent: euiButtonColor(euiThemeContext, 'accent'),
+    primary: getEuiButtonColorValues(euiThemeContext, 'primary'),
+    neutral: getEuiButtonColorValues(euiThemeContext, 'neutral'),
+    success: getEuiButtonColorValues(euiThemeContext, 'success'),
+    warning: getEuiButtonColorValues(euiThemeContext, 'warning'),
+    risk: getEuiButtonColorValues(euiThemeContext, 'risk'),
+    danger: getEuiButtonColorValues(euiThemeContext, 'danger'),
+    accent: getEuiButtonColorValues(euiThemeContext, 'accent'),
     default: _objectSpread(_objectSpread({}, getBadgeColors(euiThemeContext, euiTheme.colors.backgroundLightText)), {}, {
+      backgroundHover: euiTheme.components.buttons.backgroundTextHover,
+      backgroundActive: euiTheme.components.buttons.backgroundTextActive,
       borderColor: highContrastMode ? euiTheme.border.color : ''
     })
   };
   return {
     fill: fill,
     base: base,
-    disabled: _objectSpread(_objectSpread({}, euiButtonColor(euiThemeContext, 'disabled')), {}, {
+    disabled: _objectSpread(_objectSpread({}, getEuiButtonColorValues(euiThemeContext, 'disabled')), {}, {
       borderColor: highContrastMode ? euiTheme.colors.textDisabled : ''
     }),
     // Hollow has a border and is used for autocompleters and beta badges
     hollow: _objectSpread(_objectSpread({}, getBadgeColors(euiThemeContext, euiTheme.colors.emptyShade)), {}, {
+      backgroundHover: euiTheme.components.buttons.backgroundTextHover,
+      backgroundActive: euiTheme.components.buttons.backgroundTextActive,
       borderColor: highContrastMode ? euiTheme.border.color : euiTheme.components.badgeBorderColorHollow
     }),
     // Colors used by beta and notification badges
@@ -83,6 +89,22 @@ export var getTextColor = function getTextColor(_ref, bgColor) {
   var textColor = isColorDark.apply(void 0, _toConsumableArray(chroma(bgColor).rgb())) ? euiTheme.colors.textGhost : euiTheme.colors.textInk;
   return textColor;
 };
+
+/**
+ * Generates the background hover and active colors for custom interactive badges by mixing
+ * the background color with black or white depending on the background color luminance.
+ * @returns { backgroundHover: string, backgroundActive: string }
+ */
+export var getCustomInteractiveColors = function getCustomInteractiveColors(_ref2, bgColor) {
+  var euiTheme = _ref2.euiTheme;
+  var isDarkColor = isColorDark.apply(void 0, _toConsumableArray(chroma(bgColor).rgb()));
+  var backgroundHover = isDarkColor ? "color-mix(in oklab, ".concat(bgColor, ", ").concat(euiTheme.colors.textGhost, " 10%)") : "color-mix(in oklab, ".concat(bgColor, ", ").concat(euiTheme.colors.textInk, " 10%)");
+  var backgroundActive = isDarkColor ? "color-mix(in oklab, ".concat(bgColor, ", ").concat(euiTheme.colors.textGhost, " 15%)") : "color-mix(in oklab, ".concat(bgColor, ", ").concat(euiTheme.colors.textInk, " 15%)");
+  return {
+    backgroundHover: backgroundHover,
+    backgroundActive: backgroundActive
+  };
+};
 export var getIsValidColor = function getIsValidColor(color) {
   return chromaValid(parseColor(color || '') || '');
 };

package/es/components/basic_table/basic_table.a11y.js

@@ -165,7 +165,7 @@ describe('EuiTable', function () {
               return toggleDetails(user);
             },
             "aria-label": itemIdToExpandedRowMapValues[user.id] ? 'Collapse' : 'Expand',
-            iconType: itemIdToExpandedRowMapValues[user.id] ? 'arrowDown' : 'arrowRight'
+            iconType: itemIdToExpandedRowMapValues[user.id] ? 'chevronSingleDown' : 'chevronSingleRight'
           });
         }
       }]);

package/es/components/basic_table/basic_table.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "loading", "items", "itemId", "columns", "pagination", "sorting", "selection", "onChange", "error", "noItemsMessage", "compressed", "itemIdToExpandedRowMap", "responsiveBreakpoint", "rowProps", "cellProps", "tableCaption", "rowHeader", "tableLayout", "hasBackground"],
+var _excluded = ["className", "loading", "items", "itemId", "columns", "pagination", "sorting", "selection", "onChange", "error", "noItemsMessage", "compressed", "itemIdToExpandedRowMap", "responsiveBreakpoint", "rowProps", "cellProps", "tableCaption", "rowHeader", "tableLayout", "hasBackground", "scrollableInline"],
   _excluded2 = ["align", "render", "dataType", "isExpander", "textOnly", "name", "field", "description", "sortable", "footer", "mobileOptions", "nameTooltip"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
@@ -369,6 +369,7 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         rowHeader = _this$props2.rowHeader,
         tableLayout = _this$props2.tableLayout,
         hasBackground = _this$props2.hasBackground,
+        scrollableInline = _this$props2.scrollableInline,
         rest = _objectWithoutProperties(_this$props2, _excluded);
       var classes = classNames('euiBasicTable', {
         'euiBasicTable-loading': loading
@@ -387,7 +388,8 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         responsiveBreakpoint = _this$props3.responsiveBreakpoint,
         tableLayout = _this$props3.tableLayout,
         hasBackground = _this$props3.hasBackground,
-        loading = _this$props3.loading;
+        loading = _this$props3.loading,
+        scrollableInline = _this$props3.scrollableInline;
       return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiTableHeaderMobile, {
         responsiveBreakpoint: responsiveBreakpoint
       }, this.renderSelectAll(true), this.renderTableMobileSort()), ___EmotionJSX(OverrideCopiedTabularContent, null, ___EmotionJSX(EuiTable, {
@@ -396,6 +398,7 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         responsiveBreakpoint: responsiveBreakpoint,
         compressed: compressed,
         hasBackground: hasBackground,
+        scrollableInline: scrollableInline,
         css: loading && safariLoadingWorkaround
       }, this.renderTableCaption(), this.renderTableHead(), this.renderTableBody(), this.renderTableFooter())));
     }
@@ -498,6 +501,8 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         var _ref8 = column,
           field = _ref8.field,
           width = _ref8.width,
+          minWidth = _ref8.minWidth,
+          maxWidth = _ref8.maxWidth,
           name = _ref8.name,
           nameTooltip = _ref8.nameTooltip,
           align = _ref8.align,
@@ -509,6 +514,8 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         var columnAlign = align || _this3.getAlignForDataType(dataType);
         var sharedProps = {
           width: width,
+          minWidth: minWidth,
+          maxWidth: maxWidth,
           tooltipProps: nameTooltip,
           description: description,
           mobileOptions: mobileOptions,
@@ -518,9 +525,13 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
 
         // actions column
         if (column.actions) {
+          var sticky = _this3.props.scrollableInline && column.sticky;
           headers.push(___EmotionJSX(EuiTableHeaderCell, _extends({}, sharedProps, {
             key: "_actions_h_".concat(index),
-            align: "right"
+            align: "right",
+            sticky: sticky ? {
+              side: 'end'
+            } : undefined
           }), name));
           return;
         }
@@ -575,7 +586,8 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         items = _this$props7.items,
         columns = _this$props7.columns,
         pagination = _this$props7.pagination,
-        selection = _this$props7.selection;
+        selection = _this$props7.selection,
+        scrollableInline = _this$props7.scrollableInline;
       var footers = [];
       var hasDefinedFooter = false;
       if (selection) {
@@ -596,18 +608,23 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         if (mobileOptions !== null && mobileOptions !== void 0 && mobileOptions.only) {
           return; // exclude columns that only exist for mobile headers
         }
+        var sticky = scrollableInline && column.actions && column.sticky === true;
+        var sharedProps = {
+          align: align,
+          sticky: sticky ? {
+            side: 'end'
+          } : undefined
+        };
         if (footer) {
-          footers.push(___EmotionJSX(EuiTableFooterCell, {
-            key: "footer_".concat(String(field), "_").concat(footers.length - 1),
-            align: align
-          }, footer));
+          footers.push(___EmotionJSX(EuiTableFooterCell, _extends({
+            key: "footer_".concat(String(field), "_").concat(footers.length - 1)
+          }, sharedProps), footer));
           hasDefinedFooter = true;
         } else {
           // Footer is undefined, so create an empty cell to preserve layout
-          footers.push(___EmotionJSX(EuiTableFooterCell, {
-            key: "footer_empty_".concat(footers.length - 1),
-            align: align
-          }, undefined));
+          footers.push(___EmotionJSX(EuiTableFooterCell, _extends({
+            key: "footer_empty_".concat(footers.length - 1)
+          }, sharedProps), undefined));
         }
       });
       return footers.length && hasDefinedFooter ? ___EmotionJSX(EuiTableFooter, null, footers) : null;
@@ -649,7 +666,7 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
           width: '100%'
         }
       }, ___EmotionJSX(EuiIcon, {
-        type: "minusInCircle",
+        type: "minusCircle",
         color: "danger"
       }), " ", error));
     }
@@ -834,13 +851,17 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
           }
         });
       }
+      var sticky = this.props.scrollableInline && column.sticky;
       var key = "record_actions_".concat(itemId, "_").concat(columnIndex);
       return ___EmotionJSX(EuiTableRowCell, {
         key: key,
         align: "right",
         textOnly: false,
         hasActions: hasCustomActions ? 'custom' : true,
-        append: this.renderCopyChar(columnIndex)
+        append: this.renderCopyChar(columnIndex),
+        sticky: sticky ? {
+          side: 'end'
+        } : undefined
       }, ___EmotionJSX(ExpandedItemActions, {
         actions: actualActions,
         actionsDisabled: allDisabled,
@@ -1140,9 +1161,35 @@ EuiBasicTable.propTypes = {
        */
     dataType: PropTypes.oneOf(["auto", "string", "number", "boolean", "date"]),
     /**
-       * A CSS width property. Hints for the required width of the column (e.g. "30%", "100px", etc..)
+       * Requested width of the column.
+       *
+       * Exact width settings are not guaranteed in certain table layouts
+       * or configurations, and may be adjusted by browser's algorithm.
+       * Consider this value a guidance.
+       *
+       * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/table-layout#values|table-layout algorithms on MDN}
        */
     width: PropTypes.string,
+    /**
+       * Requested minimum width of the column.
+       *
+       * Exact width settings are not guaranteed in certain table layouts
+       * or configurations, and may be adjusted by browser's algorithm.
+       * Consider this value a guidance.
+       *
+       * This property takes effect only when `tableLayout="auto"` is set on the table.
+       */
+    minWidth: PropTypes.string,
+    /**
+       * Requested maximum width of the column.
+       *
+       * Exact width settings are not guaranteed in certain table layouts
+       * or configurations, and may be adjusted by browser's algorithm.
+       * Consider this value a guidance.
+       *
+       * This property takes effect only when `tableLayout="auto"` is set on the table.
+       */
+    maxWidth: PropTypes.string,
     /**
        * Defines whether the user can sort on this column. If a function is provided, this function returns the value to sort against
        */
@@ -1388,7 +1435,26 @@ EuiBasicTable.propTypes = {
         delay: PropTypes.any,
         position: PropTypes.any
       })
-    })
+    }),
+    /**
+       * Whether the actions column should always stick to the right side
+       * of the table no matter the inline (horizontal) scroll position.
+       *
+       * This option should be used in tables with `scrollableInline={true}`
+       * and will be enabled by default in future versions of EUI.
+       *
+       * Currently, it can only be used when the actions column is the last column
+       * of the table.
+       *
+       * When set to `true` and `hasBackground: false` is set on the table,
+       * `--euiTableCellStickyBackgroundColor` CSS variable should be set to match
+       * the background color of the element containing the table.
+       * Otherwise, the sticky column will use the default `backgroundBasePlain`
+       * background color.
+       * @beta
+       * @default false
+       */
+    sticky: PropTypes.bool
   }).isRequired]).isRequired),
   /**
      * Error message to display

package/es/components/basic_table/collapsed_item_actions.js

@@ -95,7 +95,7 @@ export var CollapsedItemActions = function CollapsedItemActions(_ref) {
     className: className,
     "aria-label": actionsDisabled ? allActionsButtonDisabledAriaLabel : allActionsButtonAriaLabel,
     title: actionsDisabled ? allActionsButtonDisabledAriaLabel : undefined,
-    iconType: "boxesHorizontal",
+    iconType: "boxesVertical",
     color: "text",
     isDisabled: actionsDisabled,
     onClick: function onClick() {

package/es/components/basic_table/in_memory_table.js

@@ -688,9 +688,35 @@ EuiInMemoryTable.propTypes = {
        */
     dataType: PropTypes.oneOf(["auto", "string", "number", "boolean", "date"]),
     /**
-       * A CSS width property. Hints for the required width of the column (e.g. "30%", "100px", etc..)
+       * Requested width of the column.
+       *
+       * Exact width settings are not guaranteed in certain table layouts
+       * or configurations, and may be adjusted by browser's algorithm.
+       * Consider this value a guidance.
+       *
+       * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/table-layout#values|table-layout algorithms on MDN}
        */
     width: PropTypes.string,
+    /**
+       * Requested minimum width of the column.
+       *
+       * Exact width settings are not guaranteed in certain table layouts
+       * or configurations, and may be adjusted by browser's algorithm.
+       * Consider this value a guidance.
+       *
+       * This property takes effect only when `tableLayout="auto"` is set on the table.
+       */
+    minWidth: PropTypes.string,
+    /**
+       * Requested maximum width of the column.
+       *
+       * Exact width settings are not guaranteed in certain table layouts
+       * or configurations, and may be adjusted by browser's algorithm.
+       * Consider this value a guidance.
+       *
+       * This property takes effect only when `tableLayout="auto"` is set on the table.
+       */
+    maxWidth: PropTypes.string,
     /**
        * Defines whether the user can sort on this column. If a function is provided, this function returns the value to sort against
        */
@@ -936,7 +962,26 @@ EuiInMemoryTable.propTypes = {
         delay: PropTypes.any,
         position: PropTypes.any
       })
-    })
+    }),
+    /**
+       * Whether the actions column should always stick to the right side
+       * of the table no matter the inline (horizontal) scroll position.
+       *
+       * This option should be used in tables with `scrollableInline={true}`
+       * and will be enabled by default in future versions of EUI.
+       *
+       * Currently, it can only be used when the actions column is the last column
+       * of the table.
+       *
+       * When set to `true` and `hasBackground: false` is set on the table,
+       * `--euiTableCellStickyBackgroundColor` CSS variable should be set to match
+       * the background color of the element containing the table.
+       * Otherwise, the sticky column will use the default `backgroundBasePlain`
+       * background color.
+       * @beta
+       * @default false
+       */
+    sticky: PropTypes.bool
   }).isRequired]).isRequired),
   /**
      * Error message to display

package/es/components/breadcrumbs/_breadcrumb_content.js

@@ -346,7 +346,7 @@ var EuiBreadcrumbPopover = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     }, rest), ___EmotionJSX("span", {
       css: truncationStyles
     }, children), ___EmotionJSX(EuiIcon, {
-      type: "arrowDown",
+      type: "chevronSingleDown",
       size: "s",
       "aria-label": " - ".concat(popoverAriaLabel)
     }))

package/es/components/button/split_button/split_button.js

@@ -20,7 +20,7 @@ import classNames from 'classnames';
 import PropTypes from "prop-types";
 import React, { Children, Fragment, isValidElement, useMemo } from 'react';
 import { useEuiMemoizedStyles, useEuiTheme, useGeneratedHtmlId } from '../../../services';
-import { getEuiButtonColors, getEuiFilledButtonColors } from '../../../global_styling';
+import { getEuiButtonColorValues, getEuiFilledButtonColorValues } from '../../../global_styling';
 import { EuiSplitButtonContext } from './split_button_context';
 import { EuiSplitButtonActionPrimary, EuiSplitButtonActionSecondary } from './split_button_actions';
 import { euiSplitButtonDividerStyles, euiSplitButtonStyles } from './split_button.styles';
@@ -54,8 +54,8 @@ export var _EuiSplitButton = function _EuiSplitButton(_ref) {
     hasAriaDisabled: hasAriaDisabled,
     isLoading: isLoading
   };
-  var buttonFilledColors = getEuiFilledButtonColors(euiThemeContext, isDisabled ? 'disabled' : color);
-  var buttonColors = getEuiButtonColors(euiThemeContext, isDisabled ? 'disabled' : color);
+  var buttonFilledColors = getEuiFilledButtonColorValues(euiThemeContext, isDisabled ? 'disabled' : color);
+  var buttonColors = getEuiButtonColorValues(euiThemeContext, isDisabled ? 'disabled' : color);
   var classes = classNames('euiSplitButton', className);
   var styles = useEuiMemoizedStyles(euiSplitButtonStyles);
   var cssStyles = [styles.euiSplitButton, fill && styles.fill];

package/es/components/button/split_button/split_button_actions.js

@@ -87,8 +87,8 @@ export var EuiSplitButtonActionSecondary = function EuiSplitButtonActionSecondar
   var styles = euiSplitButtonActionStyles;
   var actionProps = _objectSpread(_objectSpread(_objectSpread({}, rest), sharedRest), {}, {
     display: display,
-    // enforce arrowDown icon when a popover is rendered
-    iconType: popoverProps != null ? 'arrowDown' : rest.iconType,
+    // enforce chevronSingleDown icon when a popover is rendered
+    iconType: popoverProps != null ? 'chevronSingleDown' : rest.iconType,
     isDisabled: _isDisabled,
     isLoading: _isLoading,
     css: [styles.euiSplitButtonActionSecondary],

package/es/components/code/code_block_copy.js

@@ -64,7 +64,7 @@ export var useCopy = function useCopy(_ref) {
     }, function (copy) {
       return ___EmotionJSX(EuiButtonIcon, {
         onClick: copy,
-        iconType: "copyClipboard",
+        iconType: "copy",
         color: "text",
         "aria-label": copyAriaLabel || copyDefaultAriaLabel,
         "data-test-subj": "euiCodeBlockCopy"

package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.js

@@ -77,7 +77,7 @@ export var EuiCollapsedNavPopover = function EuiCollapsedNavPopover(_ref) {
     repositionOnScroll: true,
     button: ___EmotionJSX(EuiCollapsedNavButton, {
       title: title,
-      icon: icon || 'boxesHorizontal',
+      icon: icon || 'boxesVertical',
       iconProps: iconProps,
       isSelected: isSelected,
       onClick: togglePopover,

package/es/components/combo_box/combo_box_input/combo_box_input.js

@@ -242,7 +242,7 @@ export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
           onClick: isListOpen && !isDisabled ? onCloseListClick : onOpenListClick,
           side: 'right',
           tabIndex: -1,
-          type: 'arrowDown'
+          type: 'chevronSingleDown'
         };
       }
       var wrapClasses = classNames('euiComboBox__inputWrap', {

package/es/components/combo_box/combo_box_options_list/combo_box_options_list.js

@@ -50,7 +50,7 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var hitEnterBadge = ___EmotionJSX(EuiBadge, {
   className: "euiComboBoxOption__enterBadge",
   color: "hollow",
-  iconType: "returnKey",
+  iconType: "return",
   "aria-hidden": "true"
 });
 export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {

package/es/components/context_menu/context_menu_item.js

@@ -61,7 +61,7 @@ export var EuiContextMenuItem = function EuiContextMenuItem(_ref) {
     css: styles.euiContextMenu__icon
   }));
   var arrow = hasPanel && ___EmotionJSX(EuiIcon, {
-    type: "arrowRight",
+    type: "chevronSingleRight",
     size: "m",
     className: "euiContextMenu__arrow",
     css: styles.euiContextMenuItem__arrow

package/es/components/context_menu/context_menu_panel.js

@@ -354,7 +354,7 @@ export var EuiContextMenuPanelClass = /*#__PURE__*/function (_Component) {
           if (onClose) _this3.backButton = node;
         },
         "data-test-subj": onClose ? 'contextMenuPanelTitleButton' : 'contextMenuPanelTitle',
-        icon: onClose && 'arrowLeft'
+        icon: onClose && 'chevronSingleLeft'
       }, title);
       var content = items && items.length ? items.map(function (MenuItem) {
         var cloneProps = {};