@elastic/eui 94.0.0 → 94.1.0

package/lib/components/table/table_header_cell.js

@@ -34,9 +34,9 @@ var CellContents = function CellContents(_ref) {
     align = _ref.align,
     description = _ref.description,
     children = _ref.children,
+    canSort = _ref.canSort,
     isSorted = _ref.isSorted,
-    isSortAscending = _ref.isSortAscending,
-    showSortMsg = _ref.showSortMsg;
+    isSortAscending = _ref.isSortAscending;
   return (0, _react2.jsx)(_table_cell_content.EuiTableCellContent, {
     className: className,
     align: align,
@@ -57,11 +57,16 @@ var CellContents = function CellContents(_ref) {
         className: "eui-textTruncate"
       }, children);
     });
-  }), description && (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, description)), showSortMsg && isSorted && (0, _react2.jsx)(_icon.EuiIcon, {
+  }), description && (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, description)), isSorted ? (0, _react2.jsx)(_icon.EuiIcon, {
     className: "euiTableSortIcon",
     type: isSortAscending ? 'sortUp' : 'sortDown',
     size: "m"
-  }));
+  }) : canSort ? (0, _react2.jsx)(_icon.EuiIcon, {
+    className: "euiTableSortIcon euiTableSortIcon--sortable",
+    type: "sortable",
+    size: "m",
+    color: "subdued" // Tinted a bit further via CSS
+  }) : null);
 };
 var EuiTableHeaderCell = function EuiTableHeaderCell(_ref2) {
   var children = _ref2.children,
@@ -88,45 +93,38 @@ var EuiTableHeaderCell = function EuiTableHeaderCell(_ref2) {
   var CellComponent = children ? 'th' : 'td';
   var cellScope = CellComponent === 'th' ? scope !== null && scope !== void 0 ? scope : 'col' : undefined; // `scope` is only valid on `th` elements
 
-  var cellContents = (0, _react2.jsx)(CellContents, {
+  var canSort = !!(onSort && !readOnly);
+  var ariaSortValue;
+  if (isSorted) {
+    ariaSortValue = isSortAscending ? 'ascending' : 'descending';
+  } else if (canSort) {
+    ariaSortValue = 'none';
+  }
+  var cellContentsProps = {
     css: styles.euiTableHeaderCell__content,
     align: align,
     description: description,
-    showSortMsg: true,
+    canSort: canSort,
     isSorted: isSorted,
-    isSortAscending: isSortAscending
-  }, children);
-  if (onSort || isSorted) {
-    var buttonClasses = (0, _classnames.default)('euiTableHeaderButton', {
-      'euiTableHeaderButton-isSorted': isSorted
-    });
-    var ariaSortValue = 'none';
-    if (isSorted) {
-      ariaSortValue = isSortAscending ? 'ascending' : 'descending';
-    }
-    return (0, _react2.jsx)(CellComponent, _extends({
-      css: styles.euiTableHeaderCell,
-      className: classes,
-      scope: cellScope,
-      role: "columnheader",
-      "aria-sort": ariaSortValue,
-      "aria-live": "polite",
-      style: inlineStyles
-    }, rest), onSort && !readOnly ? (0, _react2.jsx)("button", {
-      type: "button",
-      css: styles.euiTableHeaderCell__button,
-      className: buttonClasses,
-      onClick: onSort,
-      "data-test-subj": "tableHeaderSortButton"
-    }, cellContents) : cellContents);
-  }
+    isSortAscending: isSortAscending,
+    children: children
+  };
   return (0, _react2.jsx)(CellComponent, _extends({
     css: styles.euiTableHeaderCell,
     className: classes,
     scope: cellScope,
     role: "columnheader",
+    "aria-sort": ariaSortValue,
     style: inlineStyles
-  }, rest), cellContents);
+  }, rest), canSort ? (0, _react2.jsx)("button", {
+    type: "button",
+    css: styles.euiTableHeaderCell__button,
+    className: (0, _classnames.default)('euiTableHeaderButton', {
+      'euiTableHeaderButton-isSorted': isSorted
+    }),
+    onClick: onSort,
+    "data-test-subj": "tableHeaderSortButton"
+  }, (0, _react2.jsx)(CellContents, cellContentsProps)) : (0, _react2.jsx)(CellContents, cellContentsProps));
 };
 exports.EuiTableHeaderCell = EuiTableHeaderCell;
 EuiTableHeaderCell.propTypes = {

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

@@ -8,7 +8,6 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 
 import React, { useState, useCallback, useMemo } from 'react';
-import { isString } from '../../services/predicate';
 import { EuiContextMenuItem, EuiContextMenuPanel } from '../context_menu';
 import { EuiPopover } from '../popover';
 import { EuiButtonIcon } from '../button';
@@ -26,9 +25,8 @@ export var CollapsedItemActions = function CollapsedItemActions(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     popoverOpen = _useState2[0],
     setPopoverOpen = _useState2[1];
-  var onClickItem = useCallback(function (onClickAction) {
-    setPopoverOpen(false);
-    onClickAction === null || onClickAction === void 0 ? void 0 : onClickAction();
+  var closePopover = useCallback(function () {
+    return setPopoverOpen(false);
   }, []);
   var controls = useMemo(function () {
     return actions.reduce(function (controls, action, index) {
@@ -47,16 +45,10 @@ export var CollapsedItemActions = function CollapsedItemActions(_ref) {
           key: index,
           className: "euiBasicTable__collapsedCustomAction"
         }, ___EmotionJSX("span", {
-          onClick: function onClick() {
-            return onClickItem();
-          }
+          onClick: closePopover
         }, actionControl)));
       } else {
-        var buttonIcon = action.icon;
-        var icon;
-        if (buttonIcon) {
-          icon = isString(buttonIcon) ? buttonIcon : buttonIcon(item);
-        }
+        var icon = action.icon ? callWithItemIfFunction(item)(action.icon) : undefined;
         var buttonContent = callWithItemIfFunction(item)(action.name);
         var toolTipContent = callWithItemIfFunction(item)(action.description);
         var href = callWithItemIfFunction(item)(action.href);
@@ -71,10 +63,11 @@ export var CollapsedItemActions = function CollapsedItemActions(_ref) {
           target: target,
           icon: icon,
           "data-test-subj": dataTestSubj,
-          onClick: function onClick() {
-            return onClickItem(_onClick ? function () {
-              return _onClick(item);
-            } : undefined);
+          onClick: function onClick(event) {
+            event.persist();
+            _onClick === null || _onClick === void 0 ? void 0 : _onClick(item, event);
+            // Allow consumer events to prevent the popover from closing if necessary
+            if (!event.isPropagationStopped()) closePopover();
           },
           toolTipContent: toolTipContent,
           toolTipProps: {
@@ -84,7 +77,7 @@ export var CollapsedItemActions = function CollapsedItemActions(_ref) {
       }
       return controls;
     }, []);
-  }, [actions, actionsDisabled, item, onClickItem]);
+  }, [actions, actionsDisabled, item, closePopover]);
   var popoverButton = ___EmotionJSX(EuiI18n, {
     tokens: ['euiCollapsedItemActions.allActions', 'euiCollapsedItemActions.allActionsDisabled'],
     defaults: ['All actions', 'Individual item actions are disabled when rows are being selected.']
@@ -121,9 +114,7 @@ export var CollapsedItemActions = function CollapsedItemActions(_ref) {
     id: "".concat(itemId, "-actions"),
     isOpen: popoverOpen,
     button: withTooltip || popoverButton,
-    closePopover: function closePopover() {
-      return setPopoverOpen(false);
-    },
+    closePopover: closePopover,
     panelPaddingSize: "none",
     anchorPosition: "leftCenter"
   }, ___EmotionJSX(EuiContextMenuPanel, {

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

@@ -6,8 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
-import { isString } from '../../services/predicate';
+import React, { useCallback } from 'react';
 import { EuiButtonEmpty, EuiButtonIcon } from '../button';
 import { EuiToolTip } from '../tool_tip';
 import { useGeneratedHtmlId } from '../../services/accessibility';
@@ -22,26 +21,20 @@ export var DefaultItemAction = function DefaultItemAction(_ref) {
   if (!action.onClick && !action.href) {
     throw new Error("Cannot render item action [".concat(action.name, "]. Missing required 'onClick' callback\n      or 'href' string. If you want to provide a custom action control, make sure to define the 'render' callback"));
   }
-  var onClick = action.onClick ? function () {
-    return action.onClick(item);
-  } : undefined;
-  var buttonColor = action.color;
-  var color = 'primary';
-  if (buttonColor) {
-    color = isString(buttonColor) ? buttonColor : buttonColor(item);
-  }
-  var buttonIcon = action.icon;
-  var icon;
-  if (buttonIcon) {
-    icon = isString(buttonIcon) ? buttonIcon : buttonIcon(item);
-  }
-  var button;
+  var onClick = useCallback(function (event) {
+    if (!action.onClick) return;
+    event.persist(); // TODO: Remove once React 16 support is dropped
+    action.onClick(item, event);
+  }, [action.onClick, item]);
+  var color = action.color ? callWithItemIfFunction(item)(action.color) : 'primary';
+  var icon = action.icon ? callWithItemIfFunction(item)(action.icon) : undefined;
   var actionContent = callWithItemIfFunction(item)(action.name);
   var tooltipContent = callWithItemIfFunction(item)(action.description);
   var href = callWithItemIfFunction(item)(action.href);
   var dataTestSubj = callWithItemIfFunction(item)(action['data-test-subj']);
   var ariaLabelId = useGeneratedHtmlId();
   var ariaLabelledBy;
+  var button;
   if (action.type === 'icon') {
     if (!icon) {
       throw new Error("Cannot render item action [".concat(action.name, "]. It is configured to render as an icon but no\n      icon is provided. Make sure to set the 'icon' property of the action"));

package/optimize/es/components/table/table_cells_shared.styles.js

@@ -10,10 +10,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 
 import { css } from '@emotion/react';
+import { makeHighContrastColor, tintOrShade } from '../../services';
 import { euiFontSize, logicalCSS, logicalTextAlignCSS } from '../../global_styling';
 import { euiTableVariables } from './table.styles';
 export var euiTableHeaderFooterCellStyles = function euiTableHeaderFooterCellStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    colorMode = euiThemeContext.colorMode;
 
   // euiFontSize returns an object, so we keep object notation here to merge into css``
   var sharedStyles = _objectSpread(_objectSpread({}, euiFontSize(euiThemeContext, 'xs')), {}, {
@@ -24,7 +26,10 @@ export var euiTableHeaderFooterCellStyles = function euiTableHeaderFooterCellSty
   return {
     euiTableHeaderCell: /*#__PURE__*/css(sharedStyles, ";;label:euiTableHeaderCell;"),
     euiTableHeaderCell__content: /*#__PURE__*/css("gap:", euiTheme.size.xs, ";;label:euiTableHeaderCell__content;"),
-    euiTableHeaderCell__button: /*#__PURE__*/css(logicalCSS('width', '100%'), " font-weight:inherit;&:hover,&:focus{color:", euiTheme.colors.primaryText, ";text-decoration:underline;};label:euiTableHeaderCell__button;"),
+    euiTableHeaderCell__button: /*#__PURE__*/css(logicalCSS('width', '100%'), " font-weight:inherit;line-height:inherit;.euiTableSortIcon--sortable{color:", makeHighContrastColor(
+    // Tint it arbitrarily high, the contrast util will take care of lowering back down to WCAG
+    tintOrShade(euiTheme.colors.subduedText, 0.9, colorMode), 3 // 3:1 ratio from https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
+    )(euiTheme.colors.emptyShade), ";}&:hover,&:focus{color:", euiTheme.colors.primaryText, ";text-decoration:underline;.euiTableSortIcon--sortable{color:", euiTheme.colors.primaryText, ";}};label:euiTableHeaderCell__button;"),
     euiTableFooterCell: /*#__PURE__*/css(sharedStyles, " background-color:", euiTheme.colors.lightestShade, ";;label:euiTableFooterCell;")
   };
 };

package/optimize/es/components/table/table_header_cell.js

@@ -26,9 +26,9 @@ var CellContents = function CellContents(_ref) {
     align = _ref.align,
     description = _ref.description,
     children = _ref.children,
+    canSort = _ref.canSort,
     isSorted = _ref.isSorted,
-    isSortAscending = _ref.isSortAscending,
-    showSortMsg = _ref.showSortMsg;
+    isSortAscending = _ref.isSortAscending;
   return ___EmotionJSX(EuiTableCellContent, {
     className: className,
     align: align,
@@ -49,11 +49,16 @@ var CellContents = function CellContents(_ref) {
         className: "eui-textTruncate"
       }, children);
     });
-  }), description && ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, description)), showSortMsg && isSorted && ___EmotionJSX(EuiIcon, {
+  }), description && ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, description)), isSorted ? ___EmotionJSX(EuiIcon, {
     className: "euiTableSortIcon",
     type: isSortAscending ? 'sortUp' : 'sortDown',
     size: "m"
-  }));
+  }) : canSort ? ___EmotionJSX(EuiIcon, {
+    className: "euiTableSortIcon euiTableSortIcon--sortable",
+    type: "sortable",
+    size: "m",
+    color: "subdued" // Tinted a bit further via CSS
+  }) : null);
 };
 export var EuiTableHeaderCell = function EuiTableHeaderCell(_ref2) {
   var children = _ref2.children,
@@ -80,43 +85,36 @@ export var EuiTableHeaderCell = function EuiTableHeaderCell(_ref2) {
   var CellComponent = children ? 'th' : 'td';
   var cellScope = CellComponent === 'th' ? scope !== null && scope !== void 0 ? scope : 'col' : undefined; // `scope` is only valid on `th` elements
 
-  var cellContents = ___EmotionJSX(CellContents, {
+  var canSort = !!(onSort && !readOnly);
+  var ariaSortValue;
+  if (isSorted) {
+    ariaSortValue = isSortAscending ? 'ascending' : 'descending';
+  } else if (canSort) {
+    ariaSortValue = 'none';
+  }
+  var cellContentsProps = {
     css: styles.euiTableHeaderCell__content,
     align: align,
     description: description,
-    showSortMsg: true,
+    canSort: canSort,
     isSorted: isSorted,
-    isSortAscending: isSortAscending
-  }, children);
-  if (onSort || isSorted) {
-    var buttonClasses = classNames('euiTableHeaderButton', {
-      'euiTableHeaderButton-isSorted': isSorted
-    });
-    var ariaSortValue = 'none';
-    if (isSorted) {
-      ariaSortValue = isSortAscending ? 'ascending' : 'descending';
-    }
-    return ___EmotionJSX(CellComponent, _extends({
-      css: styles.euiTableHeaderCell,
-      className: classes,
-      scope: cellScope,
-      role: "columnheader",
-      "aria-sort": ariaSortValue,
-      "aria-live": "polite",
-      style: inlineStyles
-    }, rest), onSort && !readOnly ? ___EmotionJSX("button", {
-      type: "button",
-      css: styles.euiTableHeaderCell__button,
-      className: buttonClasses,
-      onClick: onSort,
-      "data-test-subj": "tableHeaderSortButton"
-    }, cellContents) : cellContents);
-  }
+    isSortAscending: isSortAscending,
+    children: children
+  };
   return ___EmotionJSX(CellComponent, _extends({
     css: styles.euiTableHeaderCell,
     className: classes,
     scope: cellScope,
     role: "columnheader",
+    "aria-sort": ariaSortValue,
     style: inlineStyles
-  }, rest), cellContents);
+  }, rest), canSort ? ___EmotionJSX("button", {
+    type: "button",
+    css: styles.euiTableHeaderCell__button,
+    className: classNames('euiTableHeaderButton', {
+      'euiTableHeaderButton-isSorted': isSorted
+    }),
+    onClick: onSort,
+    "data-test-subj": "tableHeaderSortButton"
+  }, ___EmotionJSX(CellContents, cellContentsProps)) : ___EmotionJSX(CellContents, cellContentsProps));
 };

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.CollapsedItemActions = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _predicate = require("../../services/predicate");
 var _context_menu = require("../context_menu");
 var _popover = require("../popover");
 var _button = require("../button");
@@ -36,9 +35,8 @@ var CollapsedItemActions = function CollapsedItemActions(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     popoverOpen = _useState2[0],
     setPopoverOpen = _useState2[1];
-  var onClickItem = (0, _react.useCallback)(function (onClickAction) {
-    setPopoverOpen(false);
-    onClickAction === null || onClickAction === void 0 ? void 0 : onClickAction();
+  var closePopover = (0, _react.useCallback)(function () {
+    return setPopoverOpen(false);
   }, []);
   var controls = (0, _react.useMemo)(function () {
     return actions.reduce(function (controls, action, index) {
@@ -57,16 +55,10 @@ var CollapsedItemActions = function CollapsedItemActions(_ref) {
           key: index,
           className: "euiBasicTable__collapsedCustomAction"
         }, (0, _react2.jsx)("span", {
-          onClick: function onClick() {
-            return onClickItem();
-          }
+          onClick: closePopover
         }, actionControl)));
       } else {
-        var buttonIcon = action.icon;
-        var icon;
-        if (buttonIcon) {
-          icon = (0, _predicate.isString)(buttonIcon) ? buttonIcon : buttonIcon(item);
-        }
+        var icon = action.icon ? (0, _action_types.callWithItemIfFunction)(item)(action.icon) : undefined;
         var buttonContent = (0, _action_types.callWithItemIfFunction)(item)(action.name);
         var toolTipContent = (0, _action_types.callWithItemIfFunction)(item)(action.description);
         var href = (0, _action_types.callWithItemIfFunction)(item)(action.href);
@@ -81,10 +73,11 @@ var CollapsedItemActions = function CollapsedItemActions(_ref) {
           target: target,
           icon: icon,
           "data-test-subj": dataTestSubj,
-          onClick: function onClick() {
-            return onClickItem(_onClick ? function () {
-              return _onClick(item);
-            } : undefined);
+          onClick: function onClick(event) {
+            event.persist();
+            _onClick === null || _onClick === void 0 ? void 0 : _onClick(item, event);
+            // Allow consumer events to prevent the popover from closing if necessary
+            if (!event.isPropagationStopped()) closePopover();
           },
           toolTipContent: toolTipContent,
           toolTipProps: {
@@ -94,7 +87,7 @@ var CollapsedItemActions = function CollapsedItemActions(_ref) {
       }
       return controls;
     }, []);
-  }, [actions, actionsDisabled, item, onClickItem]);
+  }, [actions, actionsDisabled, item, closePopover]);
   var popoverButton = (0, _react2.jsx)(_i18n.EuiI18n, {
     tokens: ['euiCollapsedItemActions.allActions', 'euiCollapsedItemActions.allActionsDisabled'],
     defaults: ['All actions', 'Individual item actions are disabled when rows are being selected.']
@@ -131,9 +124,7 @@ var CollapsedItemActions = function CollapsedItemActions(_ref) {
     id: "".concat(itemId, "-actions"),
     isOpen: popoverOpen,
     button: withTooltip || popoverButton,
-    closePopover: function closePopover() {
-      return setPopoverOpen(false);
-    },
+    closePopover: closePopover,
     panelPaddingSize: "none",
     anchorPosition: "leftCenter"
   }, (0, _react2.jsx)(_context_menu.EuiContextMenuPanel, {

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

@@ -1,18 +1,19 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DefaultItemAction = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _predicate = require("../../services/predicate");
+var _react = _interopRequireWildcard(require("react"));
 var _button = require("../button");
 var _tool_tip = require("../tool_tip");
 var _accessibility = require("../../services/accessibility");
 var _accessibility2 = require("../accessibility");
 var _action_types = require("./action_types");
 var _react2 = require("@emotion/react");
+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; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -29,26 +30,20 @@ var DefaultItemAction = function DefaultItemAction(_ref) {
   if (!action.onClick && !action.href) {
     throw new Error("Cannot render item action [".concat(action.name, "]. Missing required 'onClick' callback\n      or 'href' string. If you want to provide a custom action control, make sure to define the 'render' callback"));
   }
-  var onClick = action.onClick ? function () {
-    return action.onClick(item);
-  } : undefined;
-  var buttonColor = action.color;
-  var color = 'primary';
-  if (buttonColor) {
-    color = (0, _predicate.isString)(buttonColor) ? buttonColor : buttonColor(item);
-  }
-  var buttonIcon = action.icon;
-  var icon;
-  if (buttonIcon) {
-    icon = (0, _predicate.isString)(buttonIcon) ? buttonIcon : buttonIcon(item);
-  }
-  var button;
+  var onClick = (0, _react.useCallback)(function (event) {
+    if (!action.onClick) return;
+    event.persist(); // TODO: Remove once React 16 support is dropped
+    action.onClick(item, event);
+  }, [action.onClick, item]);
+  var color = action.color ? (0, _action_types.callWithItemIfFunction)(item)(action.color) : 'primary';
+  var icon = action.icon ? (0, _action_types.callWithItemIfFunction)(item)(action.icon) : undefined;
   var actionContent = (0, _action_types.callWithItemIfFunction)(item)(action.name);
   var tooltipContent = (0, _action_types.callWithItemIfFunction)(item)(action.description);
   var href = (0, _action_types.callWithItemIfFunction)(item)(action.href);
   var dataTestSubj = (0, _action_types.callWithItemIfFunction)(item)(action['data-test-subj']);
   var ariaLabelId = (0, _accessibility.useGeneratedHtmlId)();
   var ariaLabelledBy;
+  var button;
   if (action.type === 'icon') {
     if (!icon) {
       throw new Error("Cannot render item action [".concat(action.name, "]. It is configured to render as an icon but no\n      icon is provided. Make sure to set the 'icon' property of the action"));

package/optimize/lib/components/table/table_cells_shared.styles.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiTableHeaderFooterCellStyles = exports.euiTableCellCheckboxStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
+var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 var _table = require("./table.styles");
 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; }
@@ -18,7 +19,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           * Side Public License, v 1.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           */
 var euiTableHeaderFooterCellStyles = function euiTableHeaderFooterCellStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    colorMode = euiThemeContext.colorMode;
 
   // euiFontSize returns an object, so we keep object notation here to merge into css``
   var sharedStyles = _objectSpread(_objectSpread({}, (0, _global_styling.euiFontSize)(euiThemeContext, 'xs')), {}, {
@@ -29,7 +31,10 @@ var euiTableHeaderFooterCellStyles = function euiTableHeaderFooterCellStyles(eui
   return {
     euiTableHeaderCell: /*#__PURE__*/(0, _react.css)(sharedStyles, ";;label:euiTableHeaderCell;"),
     euiTableHeaderCell__content: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.xs, ";;label:euiTableHeaderCell__content;"),
-    euiTableHeaderCell__button: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " font-weight:inherit;&:hover,&:focus{color:", euiTheme.colors.primaryText, ";text-decoration:underline;};label:euiTableHeaderCell__button;"),
+    euiTableHeaderCell__button: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " font-weight:inherit;line-height:inherit;.euiTableSortIcon--sortable{color:", (0, _services.makeHighContrastColor)(
+    // Tint it arbitrarily high, the contrast util will take care of lowering back down to WCAG
+    (0, _services.tintOrShade)(euiTheme.colors.subduedText, 0.9, colorMode), 3 // 3:1 ratio from https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
+    )(euiTheme.colors.emptyShade), ";}&:hover,&:focus{color:", euiTheme.colors.primaryText, ";text-decoration:underline;.euiTableSortIcon--sortable{color:", euiTheme.colors.primaryText, ";}};label:euiTableHeaderCell__button;"),
     euiTableFooterCell: /*#__PURE__*/(0, _react.css)(sharedStyles, " background-color:", euiTheme.colors.lightestShade, ";;label:euiTableFooterCell;")
   };
 };

package/optimize/lib/components/table/table_header_cell.js

@@ -32,9 +32,9 @@ var CellContents = function CellContents(_ref) {
     align = _ref.align,
     description = _ref.description,
     children = _ref.children,
+    canSort = _ref.canSort,
     isSorted = _ref.isSorted,
-    isSortAscending = _ref.isSortAscending,
-    showSortMsg = _ref.showSortMsg;
+    isSortAscending = _ref.isSortAscending;
   return (0, _react2.jsx)(_table_cell_content.EuiTableCellContent, {
     className: className,
     align: align,
@@ -55,11 +55,16 @@ var CellContents = function CellContents(_ref) {
         className: "eui-textTruncate"
       }, children);
     });
-  }), description && (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, description)), showSortMsg && isSorted && (0, _react2.jsx)(_icon.EuiIcon, {
+  }), description && (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, description)), isSorted ? (0, _react2.jsx)(_icon.EuiIcon, {
     className: "euiTableSortIcon",
     type: isSortAscending ? 'sortUp' : 'sortDown',
     size: "m"
-  }));
+  }) : canSort ? (0, _react2.jsx)(_icon.EuiIcon, {
+    className: "euiTableSortIcon euiTableSortIcon--sortable",
+    type: "sortable",
+    size: "m",
+    color: "subdued" // Tinted a bit further via CSS
+  }) : null);
 };
 var EuiTableHeaderCell = function EuiTableHeaderCell(_ref2) {
   var children = _ref2.children,
@@ -86,44 +91,37 @@ var EuiTableHeaderCell = function EuiTableHeaderCell(_ref2) {
   var CellComponent = children ? 'th' : 'td';
   var cellScope = CellComponent === 'th' ? scope !== null && scope !== void 0 ? scope : 'col' : undefined; // `scope` is only valid on `th` elements
 
-  var cellContents = (0, _react2.jsx)(CellContents, {
+  var canSort = !!(onSort && !readOnly);
+  var ariaSortValue;
+  if (isSorted) {
+    ariaSortValue = isSortAscending ? 'ascending' : 'descending';
+  } else if (canSort) {
+    ariaSortValue = 'none';
+  }
+  var cellContentsProps = {
     css: styles.euiTableHeaderCell__content,
     align: align,
     description: description,
-    showSortMsg: true,
+    canSort: canSort,
     isSorted: isSorted,
-    isSortAscending: isSortAscending
-  }, children);
-  if (onSort || isSorted) {
-    var buttonClasses = (0, _classnames.default)('euiTableHeaderButton', {
-      'euiTableHeaderButton-isSorted': isSorted
-    });
-    var ariaSortValue = 'none';
-    if (isSorted) {
-      ariaSortValue = isSortAscending ? 'ascending' : 'descending';
-    }
-    return (0, _react2.jsx)(CellComponent, (0, _extends2.default)({
-      css: styles.euiTableHeaderCell,
-      className: classes,
-      scope: cellScope,
-      role: "columnheader",
-      "aria-sort": ariaSortValue,
-      "aria-live": "polite",
-      style: inlineStyles
-    }, rest), onSort && !readOnly ? (0, _react2.jsx)("button", {
-      type: "button",
-      css: styles.euiTableHeaderCell__button,
-      className: buttonClasses,
-      onClick: onSort,
-      "data-test-subj": "tableHeaderSortButton"
-    }, cellContents) : cellContents);
-  }
+    isSortAscending: isSortAscending,
+    children: children
+  };
   return (0, _react2.jsx)(CellComponent, (0, _extends2.default)({
     css: styles.euiTableHeaderCell,
     className: classes,
     scope: cellScope,
     role: "columnheader",
+    "aria-sort": ariaSortValue,
     style: inlineStyles
-  }, rest), cellContents);
+  }, rest), canSort ? (0, _react2.jsx)("button", {
+    type: "button",
+    css: styles.euiTableHeaderCell__button,
+    className: (0, _classnames.default)('euiTableHeaderButton', {
+      'euiTableHeaderButton-isSorted': isSorted
+    }),
+    onClick: onSort,
+    "data-test-subj": "tableHeaderSortButton"
+  }, (0, _react2.jsx)(CellContents, cellContentsProps)) : (0, _react2.jsx)(CellContents, cellContentsProps));
 };
 exports.EuiTableHeaderCell = EuiTableHeaderCell;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "94.0.0",
+  "version": "94.1.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
   "types": "eui.d.ts",
-  "docker_image": "20.11.1",
+  "docker_image": "20.12.1",
   "engines": {
     "node": "16.x || 18.x || >=20.x"
   },

package/test-env/components/basic_table/basic_table.js

@@ -1162,10 +1162,14 @@ EuiBasicTable.propTypes = {
          */
       description: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.func.isRequired]).isRequired,
       /**
-         * A handler function to execute the action
+         * A handler function to execute the action. Passes back the current row
+         * item as the first argument, and the originating React click event
+         * as a second argument.
          */
       /**
-         * A handler function to execute the action
+         * A handler function to execute the action. Passes back the current row
+         * item as the first argument, and the originating React click event
+         * as a second argument.
          */
       onClick: _propTypes.default.func,
       href: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.func.isRequired]),