@elastic/eui 93.5.2 → 94.0.0

package/optimize/es/components/basic_table/basic_table.js

@@ -1,4 +1,5 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
@@ -8,7 +9,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["className", "loading", "items", "itemId", "columns", "pagination", "sorting", "selection", "onChange", "error", "noItemsMessage", "compressed", "itemIdToExpandedRowMap", "responsive", "isSelectable", "isExpandable", "hasActions", "rowProps", "cellProps", "tableCaption", "rowHeader", "tableLayout"],
+var _excluded = ["className", "loading", "items", "itemId", "columns", "pagination", "sorting", "selection", "onChange", "error", "noItemsMessage", "compressed", "itemIdToExpandedRowMap", "responsiveBreakpoint", "rowProps", "cellProps", "tableCaption", "rowHeader", "tableLayout"],
   _excluded2 = ["align", "render", "dataType", "isExpander", "textOnly", "name", "field", "description", "sortable", "footer", "mobileOptions"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -27,11 +28,11 @@ import classNames from 'classnames';
 import { formatAuto, formatBoolean, formatDate, formatNumber, formatText, LEFT_ALIGNMENT, RIGHT_ALIGNMENT, SortDirection, RenderWithEuiTheme } from '../../services';
 import { isFunction } from '../../services/predicate';
 import { get } from '../../services/objects';
-import { EuiFlexGroup, EuiFlexItem } from '../flex';
 import { EuiCheckbox } from '../form';
 import { EuiComponentDefaultsContext } from '../provider/component_defaults';
 import { euiTablePaginationDefaults } from '../table/table_pagination';
 import { EuiTable, EuiTableBody, EuiTableFooter, EuiTableFooterCell, EuiTableHeader, EuiTableHeaderCell, EuiTableHeaderCellCheckbox, EuiTableHeaderMobile, EuiTableRow, EuiTableRowCell, EuiTableRowCellCheckbox, EuiTableSortMobile } from '../table';
+import { euiTableCaptionStyles } from '../table/table.styles';
 import { CollapsedItemActions } from './collapsed_item_actions';
 import { ExpandedItemActions } from './expanded_item_actions';
 import { PaginationBar } from './pagination_bar';
@@ -40,7 +41,7 @@ import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiI18n } from '../i18n';
 import { EuiDelayRender } from '../delay_render';
 import { htmlIdGenerator } from '../../services/accessibility';
-import { euiBasicTableBodyLoading, safariLoadingWorkaround, euiBasicTableActionsWrapper } from './basic_table.styles';
+import { euiBasicTableBodyLoading, safariLoadingWorkaround } from './basic_table.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var dataTypesProfiles = {
   auto: {
@@ -340,10 +341,7 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         noItemsMessage = _this$props2.noItemsMessage,
         compressed = _this$props2.compressed,
         itemIdToExpandedRowMap = _this$props2.itemIdToExpandedRowMap,
-        responsive = _this$props2.responsive,
-        isSelectable = _this$props2.isSelectable,
-        isExpandable = _this$props2.isExpandable,
-        hasActions = _this$props2.hasActions,
+        responsiveBreakpoint = _this$props2.responsiveBreakpoint,
         rowProps = _this$props2.rowProps,
         cellProps = _this$props2.cellProps,
         tableCaption = _this$props2.tableCaption,
@@ -364,29 +362,18 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
     value: function renderTable() {
       var _this$props3 = this.props,
         compressed = _this$props3.compressed,
-        responsive = _this$props3.responsive,
+        responsiveBreakpoint = _this$props3.responsiveBreakpoint,
         tableLayout = _this$props3.tableLayout,
         loading = _this$props3.loading;
-      var mobileHeader = responsive ? ___EmotionJSX(EuiTableHeaderMobile, null, ___EmotionJSX(EuiFlexGroup, {
-        responsive: false,
-        justifyContent: "spaceBetween",
-        alignItems: "baseline"
-      }, ___EmotionJSX(EuiFlexItem, {
-        grow: false
-      }, this.renderSelectAll(true)), ___EmotionJSX(EuiFlexItem, {
-        grow: false
-      }, this.renderTableMobileSort()))) : undefined;
-      var caption = this.renderTableCaption();
-      var head = this.renderTableHead();
-      var body = this.renderTableBody();
-      var footer = this.renderTableFooter();
-      return ___EmotionJSX("div", null, mobileHeader, ___EmotionJSX(EuiTable, {
+      return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiTableHeaderMobile, {
+        responsiveBreakpoint: responsiveBreakpoint
+      }, this.renderSelectAll(true), this.renderTableMobileSort()), ___EmotionJSX(EuiTable, {
         id: this.tableId,
         tableLayout: tableLayout,
-        responsive: responsive,
+        responsiveBreakpoint: responsiveBreakpoint,
         compressed: compressed,
         css: loading && safariLoadingWorkaround
-      }, caption, head, body, footer));
+      }, this.renderTableCaption(), this.renderTableHead(), this.renderTableBody(), this.renderTableFooter()));
     }
   }, {
     key: "renderTableMobileSort",
@@ -483,6 +470,7 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         }
       }
       return ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("caption", {
+        css: euiTableCaptionStyles,
         className: "euiTableCaption"
       }, ___EmotionJSX(EuiDelayRender, null, captionElement)));
     }
@@ -684,28 +672,34 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
       var _this$props10 = this.props,
         columns = _this$props10.columns,
         selection = _this$props10.selection,
-        isSelectable = _this$props10.isSelectable,
-        hasActions = _this$props10.hasActions,
         rowHeader = _this$props10.rowHeader,
-        _this$props10$itemIdT = _this$props10.itemIdToExpandedRowMap,
-        itemIdToExpandedRowMap = _this$props10$itemIdT === void 0 ? {} : _this$props10$itemIdT,
-        isExpandable = _this$props10.isExpandable;
+        itemIdToExpandedRowMap = _this$props10.itemIdToExpandedRowMap;
       var cells = [];
       var itemIdCallback = this.props.itemId;
       var itemId = getItemId(item, itemIdCallback) != null ? getItemId(item, itemIdCallback) : rowIndex;
       var selected = !selection ? false : this.state.selection && !!this.state.selection.find(function (selectedItem) {
         return getItemId(selectedItem, itemIdCallback) === itemId;
       });
-      var calculatedHasSelection;
+      var rowSelectionDisabled = false;
       if (selection) {
-        cells.push(this.renderItemSelectionCell(itemId, item, selected));
-        calculatedHasSelection = true;
+        var _this$renderItemSelec = this.renderItemSelectionCell(itemId, item, selected),
+          _this$renderItemSelec2 = _slicedToArray(_this$renderItemSelec, 2),
+          checkboxCell = _this$renderItemSelec2[0],
+          isDisabled = _this$renderItemSelec2[1];
+        cells.push(checkboxCell);
+        rowSelectionDisabled = !!isDisabled;
       }
-      var calculatedHasActions;
+      var hasActions = false;
       columns.forEach(function (column, columnIndex) {
-        if (column.actions) {
-          cells.push(_this5.renderItemActionsCell(itemId, item, column, columnIndex));
-          calculatedHasActions = true;
+        var columnActions = column.actions;
+        if (columnActions) {
+          var hasCustomActions = columnActions.some(function (action) {
+            return !!action.render;
+          });
+          cells.push(_this5.renderItemActionsCell(itemId, item, column, columnIndex, hasCustomActions));
+          // A table theoretically could have both custom and default action items
+          // If it has both, default action mobile row styles take precedence over custom
+          hasActions = !hasActions && hasCustomActions ? 'custom' : true;
         } else if (column.field) {
           var fieldDataColumn = column;
           cells.push(_this5.renderItemFieldDataCell(itemId, item, column, columnIndex, fieldDataColumn.field === rowHeader));
@@ -723,12 +717,12 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
       expandedRowColSpan = expandedRowColSpan - mobileOnlyCols;
 
       // We'll use the ID to associate the expanded row with the original.
-      var hasExpandedRow = itemIdToExpandedRowMap.hasOwnProperty(itemId);
+      var hasExpandedRow = itemIdToExpandedRowMap === null || itemIdToExpandedRowMap === void 0 ? void 0 : itemIdToExpandedRowMap.hasOwnProperty(itemId);
       var expandedRowId = hasExpandedRow ? "row_".concat(itemId, "_expansion") : undefined;
       var expandedRow = hasExpandedRow ? ___EmotionJSX(EuiTableRow, {
         id: expandedRowId,
         isExpandedRow: true,
-        isSelectable: isSelectable
+        hasSelection: !!selection
       }, ___EmotionJSX(EuiTableRowCell, {
         colSpan: expandedRowColSpan,
         textOnly: false
@@ -737,10 +731,11 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
       var rowProps = getRowProps(item, rowPropsCallback);
       var row = ___EmotionJSX(EuiTableRow, _extends({
         "aria-owns": expandedRowId,
-        isSelectable: isSelectable == null ? calculatedHasSelection : isSelectable,
+        hasSelection: !!selection,
+        isSelectable: !rowSelectionDisabled,
         isSelected: selected,
-        hasActions: hasActions == null ? calculatedHasActions : hasActions,
-        isExpandable: isExpandable
+        hasActions: hasActions,
+        isExpandable: hasExpandedRow
       }, rowProps), cells);
       return ___EmotionJSX(Fragment, {
         key: "row_".concat(itemId)
@@ -768,7 +763,7 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
           }, []));
         }
       };
-      return ___EmotionJSX(EuiTableRowCellCheckbox, {
+      return [___EmotionJSX(EuiTableRowCellCheckbox, {
         key: key
       }, ___EmotionJSX(EuiI18n, {
         token: "euiBasicTable.selectThisRow",
@@ -784,11 +779,11 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
           "aria-label": title || selectThisRow,
           "data-test-subj": "checkboxSelectRow-".concat(itemId)
         });
-      }));
+      })), disabled];
     }
   }, {
     key: "renderItemActionsCell",
-    value: function renderItemActionsCell(itemId, item, column, columnIndex) {
+    value: function renderItemActionsCell(itemId, item, column, columnIndex, hasCustomActions) {
       // Disable all actions if any row(s) are selected
       var allDisabled = this.state.selection.length > 0;
       var actualActions = column.actions.filter(function (action) {
@@ -799,11 +794,16 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
           // If all actions are disabled, do not show any actions but the popover toggle
           actualActions = [];
         } else {
-          // if any of the actions `isPrimary`, add them inline as well, but only the first 2
-          var primaryActions = actualActions.filter(function (o) {
-            return o.isPrimary;
+          // if any of the actions `isPrimary`, add them inline as well, but only the first 2,
+          // which we'll force to only show on hover for desktop views
+          var primaryActions = actualActions.filter(function (action) {
+            return action.isPrimary;
+          });
+          actualActions = primaryActions.slice(0, 2).map(function (action) {
+            return _objectSpread(_objectSpread({}, action), {}, {
+              showOnHover: true
+            });
           });
-          actualActions = primaryActions.slice(0, 2);
         }
 
         // if we have more than 1 action, we don't show them all in the cell, instead we
@@ -816,6 +816,7 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
           name: 'All actions',
           render: function render(item) {
             return ___EmotionJSX(CollapsedItemActions, {
+              className: "euiBasicTable__collapsedActions",
               actions: column.actions,
               actionsDisabled: allDisabled,
               itemId: itemId,
@@ -824,21 +825,18 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
           }
         });
       }
-      var tools = ___EmotionJSX(ExpandedItemActions, {
-        actions: actualActions,
-        actionsDisabled: allDisabled,
-        itemId: itemId,
-        item: item
-      });
       var key = "record_actions_".concat(itemId, "_").concat(columnIndex);
       return ___EmotionJSX(EuiTableRowCell, {
-        showOnHover: true,
         key: key,
         align: "right",
         textOnly: false,
-        hasActions: true,
-        css: euiBasicTableActionsWrapper
-      }, tools);
+        hasActions: hasCustomActions ? 'custom' : true
+      }, ___EmotionJSX(ExpandedItemActions, {
+        actions: actualActions,
+        actionsDisabled: allDisabled,
+        itemId: itemId,
+        item: item
+      }));
     }
   }, {
     key: "renderItemFieldDataCell",
@@ -986,7 +984,6 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
 }(Component);
 _defineProperty(EuiBasicTable, "contextType", EuiComponentDefaultsContext);
 _defineProperty(EuiBasicTable, "defaultProps", {
-  responsive: true,
   tableLayout: 'fixed',
   noItemsMessage: ___EmotionJSX(EuiI18n, {
     token: "euiBasicTable.noItemsMessage",

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

@@ -12,33 +12,19 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css, keyframes } from '@emotion/react';
 import { logicalCSS, euiCantAnimate } from '../../global_styling';
 var tableLoadingLine = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    ", "\n    ", "\n  }\n\n  20% {\n    ", "\n    ", "\n  }\n\n  80% {\n    ", "\n    ", "\n  }\n\n  100% {\n    ", "\n    ", "\n  }\n"])), logicalCSS('left', 0), logicalCSS('width', 0), logicalCSS('left', 0), logicalCSS('width', '40%'), logicalCSS('left', '60%'), logicalCSS('width', '40%'), logicalCSS('left', '100%'), logicalCSS('width', 0));
-export var euiBasicTableBodyLoading = function euiBasicTableBodyLoading(_ref2) {
-  var euiTheme = _ref2.euiTheme;
+export var euiBasicTableBodyLoading = function euiBasicTableBodyLoading(_ref) {
+  var euiTheme = _ref.euiTheme;
   return /*#__PURE__*/css("position:relative;overflow:hidden;&::before{position:absolute;content:'';", logicalCSS('width', '100%'), " ", logicalCSS('height', euiTheme.border.width.thick), " background-color:", euiTheme.colors.primary, ";animation:", tableLoadingLine, " 1s linear infinite;", euiCantAnimate, "{animation-duration:2s;}};label:euiBasicTableBodyLoading;");
 };
 
 // Fix to make the loading indicator position correctly in Safari
 // For whatever annoying reason, Safari doesn't respect `position: relative;`
 // on `tbody` without `position: relative` on the parent `table`
-var _ref = process.env.NODE_ENV === "production" ? {
+export var safariLoadingWorkaround = process.env.NODE_ENV === "production" ? {
   name: "6xbnw4-safariLoadingWorkaround",
   styles: "position:relative;label:safariLoadingWorkaround;"
 } : {
   name: "6xbnw4-safariLoadingWorkaround",
   styles: "position:relative;label:safariLoadingWorkaround;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-export var safariLoadingWorkaround = function safariLoadingWorkaround() {
-  return _ref;
-};
-
-// Unsets the extra height caused by tooltip/popover wrappers around table action buttons
-// Without this, the row height jumps whenever actions are disabled
-export var euiBasicTableActionsWrapper = process.env.NODE_ENV === "production" ? {
-  name: "1mshepa-euiBasicTableActionsWrapper",
-  styles: "line-height:1;label:euiBasicTableActionsWrapper;"
-} : {
-  name: "1mshepa-euiBasicTableActionsWrapper",
-  styles: "line-height:1;label:euiBasicTableActionsWrapper;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };

package/optimize/es/components/basic_table/expanded_item_actions.js

@@ -18,7 +18,6 @@ export var ExpandedItemActions = function ExpandedItemActions(_ref) {
     item = _ref.item,
     actionsDisabled = _ref.actionsDisabled,
     className = _ref.className;
-  var moreThanThree = actions.length > 2;
   return ___EmotionJSX(React.Fragment, null, actions.reduce(function (tools, action, index) {
     var available = action.available ? action.available(item) : true;
     if (!available) {
@@ -27,7 +26,7 @@ export var ExpandedItemActions = function ExpandedItemActions(_ref) {
     var enabled = action.enabled == null || action.enabled(item);
     var key = "item_action_".concat(itemId, "_").concat(index);
     var classes = classNames(className, {
-      expandedItemActions__completelyHide: moreThanThree && index < 2
+      'euiBasicTableAction-showOnHover': action.showOnHover
     });
     if (isCustomItemAction(action)) {
       // custom action has a render function

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

@@ -9,7 +9,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["schema"],
   _excluded2 = ["onChange"],
-  _excluded3 = ["columns", "loading", "message", "error", "selection", "isSelectable", "hasActions", "compressed", "pagination", "sorting", "itemIdToExpandedRowMap", "itemId", "rowProps", "cellProps", "tableLayout", "items", "search", "searchFormat", "onTableChange", "executeQueryOptions", "allowNeutralSort", "childrenBetween"];
+  _excluded3 = ["columns", "loading", "message", "error", "selection", "compressed", "pagination", "sorting", "itemIdToExpandedRowMap", "itemId", "rowProps", "cellProps", "tableLayout", "items", "search", "searchFormat", "onTableChange", "executeQueryOptions", "allowNeutralSort", "childrenBetween"];
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -371,8 +371,6 @@ export var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
         message = _this$props2.message,
         error = _this$props2.error,
         selection = _this$props2.selection,
-        isSelectable = _this$props2.isSelectable,
-        hasActions = _this$props2.hasActions,
         compressed = _this$props2.compressed,
         hasPagination = _this$props2.pagination,
         hasSorting = _this$props2.sorting,
@@ -429,8 +427,6 @@ export var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
         pagination: pagination,
         sorting: sorting,
         selection: selection,
-        isSelectable: isSelectable,
-        hasActions: hasActions,
         onChange: this.onTableChange,
         error: error,
         loading: loading,
@@ -509,7 +505,6 @@ export var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
 }(Component);
 _defineProperty(EuiInMemoryTable, "contextType", EuiComponentDefaultsContext);
 _defineProperty(EuiInMemoryTable, "defaultProps", {
-  responsive: true,
   tableLayout: 'fixed',
   searchFormat: 'eql'
 });

package/optimize/es/components/bottom_bar/bottom_bar.js

@@ -15,21 +15,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import classNames from 'classnames';
 import React, { forwardRef, useEffect, useState } from 'react';
-import { useCombinedRefs, useEuiTheme } from '../../services';
+import { useCombinedRefs, useEuiMemoizedStyles, EuiThemeProvider } from '../../services';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiI18n } from '../i18n';
 import { useResizeObserver } from '../observer/resize_observer';
 import { EuiPortal } from '../portal';
 import { euiBottomBarStyles } from './bottom_bar.styles';
-import { EuiThemeProvider } from '../../services/theme/provider';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-// Exported for testing
-export var paddingSizeToClassNameMap = {
-  none: null,
-  s: 'euiBottomBar--paddingSmall',
-  m: 'euiBottomBar--paddingMedium',
-  l: 'euiBottomBar--paddingLarge'
-};
+export var PADDING_SIZES = ['none', 's', 'm', 'l'];
 export var POSITIONS = ['static', 'fixed', 'sticky'];
 var _EuiBottomBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$position = _ref.position,
@@ -53,8 +46,7 @@ var _EuiBottomBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
     top = _ref.top,
     style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiBottomBarStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiBottomBarStyles);
 
   // Force some props if `fixed` position, but not if the user has supplied these
   affordForDisplacement = position !== 'fixed' ? false : affordForDisplacement;
@@ -82,10 +74,8 @@ var _EuiBottomBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
     };
   }, [affordForDisplacement, usePortal, dimensions, bodyClassName]);
-  var classes = classNames('euiBottomBar', "euiBottomBar--".concat(position), paddingSizeToClassNameMap[paddingSize], className);
-  var cssStyles = [styles.euiBottomBar, styles[position], styles[paddingSize], {
-    position: position
-  }];
+  var classes = classNames('euiBottomBar', "euiBottomBar--".concat(position), className);
+  var cssStyles = [styles.euiBottomBar, styles[position], styles[paddingSize]];
   var newStyle = _objectSpread({
     left: left,
     right: right,
@@ -125,7 +115,7 @@ var _EuiBottomBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
 export var EuiBottomBar = /*#__PURE__*/forwardRef(function (props, ref) {
   var BottomBar = _EuiBottomBar;
   return ___EmotionJSX(EuiThemeProvider, {
-    colorMode: 'dark',
+    colorMode: "dark",
     wrapperProps: {
       cloneElement: true
     }

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

@@ -20,8 +20,9 @@ export var euiBottomBarStyles = function euiBottomBarStyles(euiThemeContext) {
     // `color` is inherited from the wrapping `EuiThemeProvider colorMode="dark"`
     euiBottomBar: /*#__PURE__*/css(euiShadowFlat(euiThemeContext), " background:", shade(euiTheme.colors.lightestShade, 0.5), ";", euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
     static: /*#__PURE__*/css(";label:static;"),
-    fixed: /*#__PURE__*/css("z-index:", Number(euiTheme.levels.header) - 2, ";;label:fixed;"),
-    sticky: /*#__PURE__*/css("z-index:", Number(euiTheme.levels.header) - 2, ";;label:sticky;"),
+    // Default
+    fixed: /*#__PURE__*/css("position:fixed;z-index:", Number(euiTheme.levels.header) - 2, ";;label:fixed;"),
+    sticky: /*#__PURE__*/css("position:sticky;z-index:", Number(euiTheme.levels.header) - 2, ";;label:sticky;"),
     // Padding
     s: /*#__PURE__*/css("padding:", euiTheme.size.s, ";;label:s;"),
     m: /*#__PURE__*/css("padding:", euiTheme.size.base, ";;label:m;"),

package/optimize/es/components/breadcrumbs/_breadcrumb_content.js

@@ -17,7 +17,6 @@ import React, { useState, useCallback, forwardRef } from 'react';
 import classNames from 'classnames';
 import { useEuiMemoizedStyles } from '../../services';
 import { EuiInnerText } from '../inner_text';
-import { EuiTextColor } from '../text';
 import { EuiLink } from '../link';
 import { EuiPopover } from '../popover';
 import { EuiIcon } from '../icon';
@@ -41,10 +40,11 @@ export var EuiBreadcrumbContent = function EuiBreadcrumbContent(_ref) {
     highlightLastBreadcrumb = _ref.highlightLastBreadcrumb,
     truncateLastBreadcrumb = _ref.truncateLastBreadcrumb,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var isApplication = type === 'application';
   var classes = classNames('euiBreadcrumb__content', className);
   var styles = useEuiMemoizedStyles(euiBreadcrumbContentStyles);
   var cssStyles = [styles.euiBreadcrumb__content, styles[type]];
-  if (type === 'application') {
+  if (isApplication) {
     if (isOnlyBreadcrumb) {
       cssStyles.push(styles.applicationStyles.onlyChild);
     } else if (isFirstBreadcrumb) {
@@ -56,9 +56,9 @@ export var EuiBreadcrumbContent = function EuiBreadcrumbContent(_ref) {
   var truncationStyles = [truncate && !truncateLastBreadcrumb && styles.isTruncated, truncateLastBreadcrumb && styles.isTruncatedLast];
   var isBreadcrumbWithPopover = !!popoverContent;
   var isInteractiveBreadcrumb = href || onClick;
-  var linkColor = color || (highlightLastBreadcrumb ? 'text' : 'subdued');
-  var plainTextColor = highlightLastBreadcrumb ? 'default' : 'subdued'; // Does not inherit `color` prop
+  var linkColor = color || 'subdued';
   var ariaCurrent = highlightLastBreadcrumb ? 'page' : undefined;
+  var interactionStyles = (isInteractiveBreadcrumb || isBreadcrumbWithPopover) && !isApplication && styles.isInteractive;
   return ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
     var title = innerText === '' ? undefined : innerText;
     var baseProps = {
@@ -66,13 +66,13 @@ export var EuiBreadcrumbContent = function EuiBreadcrumbContent(_ref) {
       title: title,
       'aria-current': ariaCurrent,
       className: classes,
-      css: [].concat(cssStyles, truncationStyles)
+      css: [].concat(cssStyles, truncationStyles, [interactionStyles])
     };
     if (isBreadcrumbWithPopover) {
       var _ = baseProps.css,
         popoverButtonProps = _objectWithoutProperties(baseProps, _excluded2);
       return ___EmotionJSX(EuiBreadcrumbPopover, _extends({}, popoverButtonProps, {
-        breadcrumbCss: cssStyles,
+        breadcrumbCss: [].concat(cssStyles, [interactionStyles]),
         truncationCss: truncationStyles,
         isLastBreadcrumb: isLastBreadcrumb,
         type: type,
@@ -88,10 +88,7 @@ export var EuiBreadcrumbContent = function EuiBreadcrumbContent(_ref) {
         rel: rel
       }, rest), text);
     } else {
-      return ___EmotionJSX(EuiTextColor, {
-        color: plainTextColor,
-        cloneElement: true
-      }, ___EmotionJSX("span", _extends({}, baseProps, rest), text));
+      return ___EmotionJSX("span", _extends({}, baseProps, rest), text);
     }
   });
 };

package/optimize/es/components/breadcrumbs/_breadcrumb_content.styles.js

@@ -7,24 +7,37 @@
  */
 
 import { css } from '@emotion/react';
-import { transparentize } from '../../services/color';
+import { tintOrShade } from '../../services/color';
 import { euiFontSize, euiTextTruncate, euiFocusRing, logicalCSS, logicalBorderRadiusCSS, mathWithUnits } from '../../global_styling';
+import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins/button';
 
 /**
  * Styles cast to inner <a>, <button>, <span> elements
  */
 export var euiBreadcrumbContentStyles = function euiBreadcrumbContentStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    colorMode = euiThemeContext.colorMode;
+
+  // Reuse button colors for `type="application`" clickable breadcrumbs
+  var applicationButtonColors = euiButtonColor(euiThemeContext, 'primary');
+
+  // Create custom darker gray colors for non-clickable application breadcrumbs
+  // The numbers/ratios are fairly specific here to pass WCAG AA contrast minimums
+  var applicationTextColors = {
+    backgroundColor: tintOrShade(euiTheme.colors.darkestShade, colorMode === 'DARK' ? 0.7 : 0.85, colorMode),
+    color: tintOrShade(euiTheme.colors.darkestShade, 0.2, colorMode)
+  };
   return {
-    euiBreadcrumb__content: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.medium, ";text-align:center;vertical-align:baseline;;label:euiBreadcrumb__content;"),
+    euiBreadcrumb__content: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.regular, ";text-align:center;vertical-align:baseline;&:not(.euiLink){color:", euiTheme.colors.subduedText, ";};label:euiBreadcrumb__content;"),
     // Truncation styles
     isTruncated: /*#__PURE__*/css(euiTextTruncate(mathWithUnits(euiTheme.size.base, function (x) {
       return x * 10;
     })), ";;label:isTruncated;"),
     isTruncatedLast: /*#__PURE__*/css(euiTextTruncate('none'), ";;label:isTruncatedLast;"),
+    isInteractive: /*#__PURE__*/css("&:not(:disabled){text-decoration:underline;&[class*='euiLink-subdued']{&:hover,&:focus{color:", euiTheme.colors.text, ";}}};label:isInteractive;"),
     // Types
     page: /*#__PURE__*/css("&:is(a):focus{", euiFocusRing(euiThemeContext, 'inset'), ";}&:is(button):focus{", euiFocusRing(euiThemeContext, 'center'), ";};label:page;"),
-    application: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'xs'), " background-color:", transparentize(euiTheme.colors.darkestShade, 0.2), ";clip-path:polygon(\n        0 0,\n        calc(100% - ", euiTheme.size.s, ") 0,\n        100% 50%,\n        calc(100% - ", euiTheme.size.s, ") 100%,\n        0 100%,\n        ", euiTheme.size.s, " 50%\n      );color:", euiTheme.colors.darkestShade, ";line-height:", euiTheme.size.base, ";", logicalCSS('padding-vertical', euiTheme.size.xs), " ", logicalCSS('padding-horizontal', euiTheme.size.base), " &:is(a),&:is(button){background-color:", transparentize(euiTheme.colors.primary, 0.2), ";color:", euiTheme.colors.link, ";:focus{", euiFocusRing(euiThemeContext, 'inset'), " :focus-visible{border-radius:", euiTheme.border.radius.medium, ";clip-path:none;}}};label:application;"),
+    application: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'xs'), " font-weight:", euiTheme.font.weight.medium, ";background-color:", applicationTextColors.backgroundColor, ";clip-path:polygon(\n        0 0,\n        calc(100% - ", euiTheme.size.s, ") 0,\n        100% 50%,\n        calc(100% - ", euiTheme.size.s, ") 100%,\n        0 100%,\n        ", euiTheme.size.s, " 50%\n      );color:", applicationTextColors.color, ";line-height:", euiTheme.size.base, ";", logicalCSS('padding-vertical', euiTheme.size.xs), " ", logicalCSS('padding-horizontal', euiTheme.size.base), " &:is(a),&:is(button){background-color:", applicationButtonColors.backgroundColor, ";color:", applicationButtonColors.color, ";:focus{", euiFocusRing(euiThemeContext, 'inset'), " :focus-visible{border-radius:", euiTheme.border.radius.medium, ";clip-path:none;}}};label:application;"),
     applicationStyles: {
       onlyChild: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";clip-path:none;", logicalCSS('padding-horizontal', euiTheme.size.m), ";;label:onlyChild;"),
       firstChild: /*#__PURE__*/css(logicalBorderRadiusCSS("".concat(euiTheme.border.radius.medium, " 0 0 ").concat(euiTheme.border.radius.medium), true), " clip-path:polygon(\n          0 0,\n          calc(100% - ", euiTheme.size.s, ") 0,\n          100% 50%,\n          calc(100% - ", euiTheme.size.s, ") 100%,\n          0 100%\n        );", logicalCSS('padding-left', euiTheme.size.m), ";;label:firstChild;"),

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

@@ -9,12 +9,12 @@ var _excluded = ["children", "textProps", "isLoading", "isDisabled", "iconType",
  * Side Public License, v 1.
  */
 
-import React from 'react';
-import { useEuiTheme } from '../../../services';
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../../services';
 import { EuiLoadingSpinner } from '../../loading';
 import { EuiIcon } from '../../icon';
 import { euiButtonDisplayContentStyles } from './_button_display_content.styles';
-import classNames from 'classnames';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var ICON_SIZES = ['s', 'm'];
 export var ICON_SIDES = ['left', 'right'];
@@ -37,39 +37,37 @@ export var EuiButtonDisplayContent = function EuiButtonDisplayContent(_ref) {
     _ref$iconSide = _ref.iconSide,
     iconSide = _ref$iconSide === void 0 ? 'left' : _ref$iconSide,
     contentProps = _objectWithoutProperties(_ref, _excluded);
-  var theme = useEuiTheme();
-  var styles = euiButtonDisplayContentStyles(theme);
-  var cssStyles = [styles.euiButtonDisplayContent];
+  var styles = useEuiMemoizedStyles(euiButtonDisplayContentStyles);
 
   // 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
-  // for better contrast we want to change the border of the spinner
-  // to have the same color of the text. This way we ensure the borders
-  // are always visible. The default spinner color could be very light.
-  var loadingSpinnerColor = isDisabled ? {
-    border: 'currentcolor'
-  } : undefined;
-  if (isLoading) {
-    icon = ___EmotionJSX(EuiLoadingSpinner, {
-      size: iconSize,
-      color: loadingSpinnerColor
-    });
-  } else if (iconType) {
-    icon = ___EmotionJSX(EuiIcon, {
-      type: iconType,
-      size: iconSize,
-      color: "inherit" // forces the icon to inherit its parent color
-    });
-  }
-
+  var icon = useMemo(function () {
+    if (isLoading) {
+      // When the button is disabled the text gets gray
+      // and in some buttons the background gets a light gray
+      // for better contrast we want to change the border of the spinner
+      // to have the same color of the text. This way we ensure the borders
+      // are always visible. The default spinner color could be very light.
+      var loadingSpinnerColor = isDisabled ? {
+        border: 'currentcolor'
+      } : undefined;
+      return ___EmotionJSX(EuiLoadingSpinner, {
+        size: iconSize,
+        color: loadingSpinnerColor
+      });
+    }
+    if (iconType) {
+      return ___EmotionJSX(EuiIcon, {
+        type: iconType,
+        size: iconSize,
+        color: "inherit" // forces the icon to inherit its parent color
+      });
+    }
+  }, [iconType, iconSize, isLoading, isDisabled]);
   var isText = typeof children === 'string';
   var doNotRenderTextWrapper = textProps === false;
   var renderTextWrapper = (isText || textProps) && !doNotRenderTextWrapper;
   return ___EmotionJSX("span", _extends({
-    css: cssStyles
+    css: styles.euiButtonDisplayContent
   }, contentProps), iconSide === 'left' && icon, renderTextWrapper ? ___EmotionJSX("span", _extends({}, textProps, {
     className: classNames('eui-textTruncate', textProps === null || textProps === void 0 ? void 0 : textProps.className)
   }), children) : children, iconSide === 'right' && icon);