@elastic/eui 91.0.0 → 91.1.0

package/optimize/lib/components/datagrid/body/header/data_grid_header_cell.js

@@ -27,14 +27,21 @@ var _data_grid_header_cell_wrapper = require("./data_grid_header_cell_wrapper");
 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
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
+                                                                                                                                                                                                                                                                                           * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+                                                                                                                                                                                                                                                                                           * or more contributor license agreements. Licensed under the Elastic License
+                                                                                                                                                                                                                                                                                           * 2.0 and the Server Side Public License, v 1; you may not use this file except
+                                                                                                                                                                                                                                                                                           * in compliance with, at your election, the Elastic License 2.0 or the Server
+                                                                                                                                                                                                                                                                                           * Side Public License, v 1.
+                                                                                                                                                                                                                                                                                           */
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "mc0thx-EuiDataGridHeaderCell",
+  styles: "margin-inline-start:auto;label:EuiDataGridHeaderCell;"
+} : {
+  name: "mc0thx-EuiDataGridHeaderCell",
+  styles: "margin-inline-start:auto;label:EuiDataGridHeaderCell;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
   var column = _ref.column,
     index = _ref.index,
@@ -77,6 +84,7 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     setFocusedCell: setFocusedCell
   });
   var showColumnActions = columnActions && columnActions.length > 0;
+  var actionsButtonRef = (0, _react.useRef)(null);
   var _useSortingUtils = useSortingUtils({
       sorting: sorting,
       id: id,
@@ -93,6 +101,10 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     prefix: 'euiDataGridCellHeader',
     suffix: 'actions'
   });
+  var cellContent = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {
+    title: displayAsText || id,
+    className: "euiDataGridHeaderCell__content"
+  }, display || displayAsText || id), sortingArrow);
   return (0, _react2.jsx)(_data_grid_header_cell_wrapper.EuiDataGridHeaderCellWrapper, (0, _extends2.default)({}, displayHeaderCellProps, {
     className: classes,
     id: id,
@@ -104,29 +116,36 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     columnId: id,
     columnWidth: width,
     setColumnWidth: setColumnWidth
-  }) : null, !showColumnActions ? (0, _react2.jsx)(_react.default.Fragment, null, sortingArrow, (0, _react2.jsx)("div", {
-    className: "euiDataGridHeaderCell__content",
-    title: displayAsText || id
-  }, display || displayAsText || id), sortingScreenReaderText && (0, _react2.jsx)(_accessibility2.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", null, sortingScreenReaderText))) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
-    className: "eui-fullWidth",
+  }) : null, !showColumnActions ? (0, _react2.jsx)(_react.default.Fragment, null, cellContent, sortingScreenReaderText && (0, _react2.jsx)(_accessibility2.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", null, sortingScreenReaderText))) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("button", {
+    className: "euiDataGridHeaderCell__button",
+    onClick: function onClick() {
+      setFocusedCell([index, -1]);
+      setIsPopoverOpen(function (isPopoverOpen) {
+        return !isPopoverOpen;
+      });
+    },
+    "aria-describedby": "".concat(sortingAriaId, " ").concat(actionsAriaId),
+    ref: actionsButtonRef
+  }, cellContent, (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
     display: "block",
     panelPaddingSize: "none",
     offset: 7,
-    button: (0, _react2.jsx)("button", {
-      className: "euiDataGridHeaderCell__button",
-      onClick: function onClick() {
-        setFocusedCell([index, -1]);
-        setIsPopoverOpen(function (isPopoverOpen) {
-          return !isPopoverOpen;
-        });
-      },
-      "aria-describedby": "".concat(sortingAriaId, " ").concat(actionsAriaId)
-    }, sortingArrow, (0, _react2.jsx)("div", {
-      className: "euiDataGridHeaderCell__content",
-      title: displayAsText || id
-    }, display || displayAsText || id), (0, _react2.jsx)(_icon.EuiIcon, {
-      className: "euiDataGridHeaderCell__icon",
-      type: "arrowDown",
+    anchorPosition: "downRight",
+    css: _ref2 // Align to right
+    ,
+    focusTrapProps: {
+      // We need to override the default EuiPopover `onClickOutside` since the anchor is separate from the actual button
+      onClickOutside: function onClickOutside(event) {
+        var _actionsButtonRef$cur;
+        if (((_actionsButtonRef$cur = actionsButtonRef.current) === null || _actionsButtonRef$cur === void 0 ? void 0 : _actionsButtonRef$cur.contains(event.target)) === false) {
+          setIsPopoverOpen(false);
+        }
+      }
+    },
+    button: (0, _react2.jsx)("div", {
+      className: "euiDataGridHeaderCell__icon"
+    }, (0, _react2.jsx)(_icon.EuiIcon, {
+      type: "boxesVertical",
       size: "s",
       color: "text",
       "data-test-subj": "dataGridHeaderCellActionButton-".concat(id)
@@ -139,7 +158,7 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     listItems: columnActions,
     gutterSize: "none",
     "data-test-subj": "dataGridHeaderCellActionGroup-".concat(id)
-  })), (0, _react2.jsx)("p", {
+  }))), (0, _react2.jsx)("p", {
     id: sortingAriaId,
     hidden: true
   }, sortingScreenReaderText), (0, _react2.jsx)("p", {
@@ -155,11 +174,11 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
  * Column sorting utility helpers
  */
 exports.EuiDataGridHeaderCell = EuiDataGridHeaderCell;
-var useSortingUtils = function useSortingUtils(_ref2) {
+var useSortingUtils = function useSortingUtils(_ref3) {
   var _sorting$columns;
-  var sorting = _ref2.sorting,
-    id = _ref2.id,
-    showColumnActions = _ref2.showColumnActions;
+  var sorting = _ref3.sorting,
+    id = _ref3.id,
+    showColumnActions = _ref3.showColumnActions;
   var sortedColumn = (0, _react.useMemo)(function () {
     return sorting === null || sorting === void 0 ? void 0 : sorting.columns.find(function (col) {
       return col.id === id;
@@ -193,9 +212,9 @@ var useSortingUtils = function useSortingUtils(_ref2) {
     var _sorting$columns2;
     if (!isColumnSorted) return null;
     if (!showColumnActions && hasOnlyOneSort) return null; // in this scenario, the `aria-sort` attribute will be used by screen readers
-    return (0, _react2.jsx)(_react.default.Fragment, null, sorting === null || sorting === void 0 ? void 0 : (_sorting$columns2 = sorting.columns) === null || _sorting$columns2 === void 0 ? void 0 : _sorting$columns2.map(function (_ref3, index) {
-      var columnId = _ref3.id,
-        direction = _ref3.direction;
+    return (0, _react2.jsx)(_react.default.Fragment, null, sorting === null || sorting === void 0 ? void 0 : (_sorting$columns2 = sorting.columns) === null || _sorting$columns2 === void 0 ? void 0 : _sorting$columns2.map(function (_ref4, index) {
+      var columnId = _ref4.id,
+        direction = _ref4.direction;
       if (hasOnlyOneSort) {
         if (direction === 'asc') {
           return (0, _react2.jsx)(_i18n.EuiI18n, {

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

@@ -20,6 +20,7 @@ var _drag_and_drop = require("../../drag_and_drop");
 var _icon = require("../../icon");
 var _services = require("../../../services");
 var _data_grid_toolbar = require("./data_grid_toolbar");
+var _data_grid_toolbar_control = require("./data_grid_toolbar_control");
 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; }
@@ -73,9 +74,6 @@ var useDataGridColumnSelector = function useDataGridColumnSelector(availableColu
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     columnSearchText = _useState4[0],
     setColumnSearchText = _useState4[1];
-  var controlBtnClasses = (0, _classnames.default)('euiDataGrid__controlBtn', {
-    'euiDataGrid__controlBtn--active': numberOfHiddenFields > 0
-  });
   var filteredColumns = (0, _react.useMemo)(function () {
     return sortedColumns.filter(function (id) {
       return (displayValues[id] || id).toLowerCase().indexOf(columnSearchText.toLowerCase()) !== -1;
@@ -87,23 +85,17 @@ var useDataGridColumnSelector = function useDataGridColumnSelector(availableColu
     token: "euiColumnSelector.button",
     default: "Columns"
   });
-  if (numberOfHiddenFields === 1) {
-    buttonText = (0, _react2.jsx)(_i18n.EuiI18n, {
-      token: "euiColumnSelector.buttonActiveSingular",
-      default: "{numberOfHiddenFields} column hidden",
-      values: {
-        numberOfHiddenFields: numberOfHiddenFields
-      }
-    });
-  } else if (numberOfHiddenFields > 1) {
-    buttonText = (0, _react2.jsx)(_i18n.EuiI18n, {
-      token: "euiColumnSelector.buttonActivePlural",
-      default: "{numberOfHiddenFields} columns hidden",
-      values: {
-        numberOfHiddenFields: numberOfHiddenFields
-      }
+  var orderedVisibleColumns = (0, _react.useMemo)(function () {
+    return visibleColumns.map(function (columnId) {
+      return availableColumns.find(function (_ref3) {
+        var id = _ref3.id;
+        return id === columnId;
+      });
+    } // cast to avoid `undefined`, it filters those out next
+    ).filter(function (column) {
+      return column != null;
     });
-  }
+  }, [availableColumns, visibleColumns]);
   var columnSelector = allowColumnHiding || allowColumnReorder ? (0, _react2.jsx)(_popover.EuiPopover, {
     "data-test-subj": "dataGridColumnSelectorPopover",
     isOpen: isOpen,
@@ -113,11 +105,9 @@ var useDataGridColumnSelector = function useDataGridColumnSelector(availableColu
     anchorPosition: "downLeft",
     panelPaddingSize: "s",
     hasDragDrop: true,
-    button: (0, _react2.jsx)(_button.EuiButtonEmpty, {
-      size: "xs",
-      iconType: allowColumnHiding ? 'listAdd' : 'list',
-      color: "text",
-      className: controlBtnClasses,
+    button: (0, _react2.jsx)(_data_grid_toolbar_control.EuiDataGridToolbarControl, {
+      badgeContent: numberOfHiddenFields > 0 ? "".concat(orderedVisibleColumns.length, "/").concat(availableColumns.length) : availableColumns.length,
+      iconType: "tableDensityNormal",
       "data-test-subj": "dataGridColumnSelectorButton",
       onClick: function onClick() {
         return setIsOpen(!isOpen);
@@ -126,10 +116,10 @@ var useDataGridColumnSelector = function useDataGridColumnSelector(availableColu
   }, allowColumnHiding && (0, _react2.jsx)(_popover.EuiPopoverTitle, null, (0, _react2.jsx)(_i18n.EuiI18n, {
     tokens: ['euiColumnSelector.search', 'euiColumnSelector.searchcolumns'],
     defaults: ['Search', 'Search columns']
-  }, function (_ref3) {
-    var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
-      search = _ref4[0],
-      searchcolumns = _ref4[1];
+  }, function (_ref4) {
+    var _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
+      search = _ref5[0],
+      searchcolumns = _ref5[1];
     return (0, _react2.jsx)(_form.EuiFieldText, {
       compressed: true,
       placeholder: search,
@@ -227,17 +217,7 @@ var useDataGridColumnSelector = function useDataGridColumnSelector(availableColu
     token: "euiColumnSelector.hideAll",
     default: "Hide all"
   })))))) : null;
-  var orderedVisibleColumns = (0, _react.useMemo)(function () {
-    return visibleColumns.map(function (columnId) {
-      return availableColumns.find(function (_ref5) {
-        var id = _ref5.id;
-        return id === columnId;
-      });
-    } // cast to avoid `undefined`, it filters those out next
-    ).filter(function (column) {
-      return column != null;
-    });
-  }, [availableColumns, visibleColumns]);
+
   /**
    * Used for moving columns left/right, available in the headers actions menu
    */

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDataGridColumnSorting = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _button = require("../../button");
 var _drag_and_drop = require("../../drag_and_drop");
@@ -17,6 +16,7 @@ var _i18n = require("../../i18n");
 var _popover = require("../../popover");
 var _text = require("../../text");
 var _token = require("../../token");
+var _data_grid_toolbar_control = require("./data_grid_toolbar_control");
 var _column_sorting_draggable = require("./column_sorting_draggable");
 var _data_grid_schema = require("../utils/data_grid_schema");
 var _react2 = require("@emotion/react");
@@ -61,15 +61,9 @@ var useDataGridColumnSorting = function useDataGridColumnSorting(columns, sortin
     }
   }, [columns, sorting]);
   var sortingButtonText = (0, _i18n.useEuiI18n)('euiColumnSorting.button', 'Sort fields');
-  var sortingButtonTextActive = (0, _i18n.useEuiI18n)('euiColumnSorting.buttonActive', function (_ref2) {
-    var numberOfSortedFields = _ref2.numberOfSortedFields;
-    return "".concat(numberOfSortedFields, " field").concat(numberOfSortedFields === 1 ? '' : 's', " sorted");
-  }, {
-    numberOfSortedFields: sorting != null ? sorting.columns.length : 0
-  });
   if (sorting == null) return null;
-  var activeColumnIds = new Set(sorting.columns.map(function (_ref3) {
-    var id = _ref3.id;
+  var activeColumnIds = new Set(sorting.columns.map(function (_ref2) {
+    var id = _ref2.id;
     return id;
   }));
   var _columns$reduce = columns.reduce(function (acc, column) {
@@ -84,24 +78,21 @@ var useDataGridColumnSorting = function useDataGridColumnSorting(columns, sortin
       inactiveColumns: []
     }),
     inactiveColumns = _columns$reduce.inactiveColumns;
-  var onDragEnd = function onDragEnd(_ref4) {
-    var sourceIndex = _ref4.source.index,
-      destination = _ref4.destination;
+  var onDragEnd = function onDragEnd(_ref3) {
+    var sourceIndex = _ref3.source.index,
+      destination = _ref3.destination;
     if (destination) {
       var destinationIndex = destination.index;
       var nextColumns = (0, _drag_and_drop.euiDragDropReorder)(sorting.columns, sourceIndex, destinationIndex);
       sorting.onSort(nextColumns);
     }
   };
-  var controlBtnClasses = (0, _classnames.default)('euiDataGrid__controlBtn', {
-    'euiDataGrid__controlBtn--active': sorting.columns.length > 0
-  });
   var schemaDetails = function schemaDetails(id) {
     return schema.hasOwnProperty(id) && schema[id].columnType != null ? (0, _data_grid_schema.getDetailsForSchema)(schemaDetectors, schema[id].columnType) : null;
   };
-  var inactiveSortableColumns = inactiveColumns.filter(function (_ref5) {
-    var id = _ref5.id,
-      isSortable = _ref5.isSortable;
+  var inactiveSortableColumns = inactiveColumns.filter(function (_ref4) {
+    var id = _ref4.id,
+      isSortable = _ref4.isSortable;
     var schemaDetail = schemaDetails(id);
     var sortable = true;
     if (isSortable != null) {
@@ -120,24 +111,22 @@ var useDataGridColumnSorting = function useDataGridColumnSorting(columns, sortin
     anchorPosition: "downLeft",
     panelPaddingSize: "s",
     hasDragDrop: true,
-    button: (0, _react2.jsx)(_button.EuiButtonEmpty, {
-      size: "xs",
+    button: (0, _react2.jsx)(_data_grid_toolbar_control.EuiDataGridToolbarControl, {
+      badgeContent: sorting.columns.length,
       iconType: "sortable",
-      color: "text",
-      className: controlBtnClasses,
       "data-test-subj": "dataGridColumnSortingButton",
       onClick: function onClick() {
         return setIsOpen(!isOpen);
       }
-    }, sorting.columns.length > 0 ? sortingButtonTextActive : sortingButtonText)
+    }, sortingButtonText)
   }, sorting.columns.length > 0 ? (0, _react2.jsx)(_drag_and_drop.EuiDragDropContext, {
     onDragEnd: onDragEnd
   }, (0, _react2.jsx)(_drag_and_drop.EuiDroppable, {
     droppableId: "columnSorting",
     className: "euiDataGrid__controlScroll"
-  }, (0, _react2.jsx)(_react.default.Fragment, null, sorting.columns.map(function (_ref6, index) {
-    var id = _ref6.id,
-      direction = _ref6.direction;
+  }, (0, _react2.jsx)(_react.default.Fragment, null, sorting.columns.map(function (_ref5, index) {
+    var id = _ref5.id,
+      direction = _ref5.direction;
     return (0, _react2.jsx)(_column_sorting_draggable.EuiDataGridColumnSortingDraggable, {
       key: id,
       id: id,
@@ -190,9 +179,9 @@ var useDataGridColumnSorting = function useDataGridColumnSorting(columns, sortin
     return (0, _react2.jsx)("div", {
       className: "euiDataGridColumnSorting__fieldList",
       role: "listbox"
-    }, inactiveSortableColumns.map(function (_ref7) {
-      var id = _ref7.id,
-        defaultSortDirection = _ref7.defaultSortDirection;
+    }, inactiveSortableColumns.map(function (_ref6) {
+      var id = _ref6.id,
+        defaultSortDirection = _ref6.defaultSortDirection;
       return (0, _react2.jsx)("button", {
         key: id,
         className: "euiDataGridColumnSorting__field",

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

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiDataGridToolbarControl = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react2 = require("@emotion/react");
+var _button = require("../../button");
+var _badge = require("../../badge");
+var _i18n = require("../../i18n");
+var _excluded = ["children", "className", "badgeContent", "textProps"];
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
+                                                                                                                                                                                                                                                                                           * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+                                                                                                                                                                                                                                                                                           * or more contributor license agreements. Licensed under the Elastic License
+                                                                                                                                                                                                                                                                                           * 2.0 and the Server Side Public License, v 1; you may not use this file except
+                                                                                                                                                                                                                                                                                           * in compliance with, at your election, the Elastic License 2.0 or the Server
+                                                                                                                                                                                                                                                                                           * Side Public License, v 1.
+                                                                                                                                                                                                                                                                                           */
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1vci2nd-EuiDataGridToolbarControl",
+  styles: "cursor:inherit;label:EuiDataGridToolbarControl;"
+} : {
+  name: "1vci2nd-EuiDataGridToolbarControl",
+  styles: "cursor:inherit;label:EuiDataGridToolbarControl;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "8fsqop-EuiDataGridToolbarControl",
+  styles: "&:focus,&:hover:not(:disabled){text-decoration:none;.euiDataGridToolbarControl__text{text-decoration:underline;}};label:EuiDataGridToolbarControl;"
+} : {
+  name: "8fsqop-EuiDataGridToolbarControl",
+  styles: "&:focus,&:hover:not(:disabled){text-decoration:none;.euiDataGridToolbarControl__text{text-decoration:underline;}};label:EuiDataGridToolbarControl;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var EuiDataGridToolbarControl = function EuiDataGridToolbarControl(_ref3) {
+  var children = _ref3.children,
+    className = _ref3.className,
+    badgeContent = _ref3.badgeContent,
+    textProps = _ref3.textProps,
+    rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+  var classes = (0, _classnames.default)('euiDataGridToolbarControl', className);
+  var badgeAriaLabel = (0, _i18n.useEuiI18n)('euiDataGridToolbarControl.badgeAriaLabel', 'Active: {count}', {
+    count: typeof badgeContent === 'string' ? betterScreenReaderSlashes(badgeContent) : badgeContent
+  });
+  return (0, _react2.jsx)(_button.EuiButtonEmpty, (0, _extends2.default)({
+    className: classes,
+    size: "xs",
+    color: "text",
+    textProps: false
+    // Underline actual text, but not the badge
+    ,
+    css: _ref2
+  }, rest), (0, _react2.jsx)("span", (0, _extends2.default)({}, textProps, {
+    className: (0, _classnames.default)('euiDataGridToolbarControl__text', 'eui-textTruncate', textProps && textProps.className)
+  }), children), Boolean(badgeContent) && (0, _react2.jsx)(_badge.EuiNotificationBadge, {
+    className: "euiDataGridToolbarControl__badge",
+    css: _ref,
+    color: "subdued",
+    "aria-label": "- ".concat(badgeAriaLabel) // Punctuation helps add pauses for screen readers
+    ,
+    role: "marquee" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role
+  }, badgeContent));
+};
+
+// The columns control specifically passes (e.g.) `5/10` when some columns
+// are being hidden. We can make this a bit more legible to SRs with this quick util
+exports.EuiDataGridToolbarControl = EuiDataGridToolbarControl;
+var betterScreenReaderSlashes = function betterScreenReaderSlashes(badgeContent) {
+  return badgeContent.replaceAll('/', ' out of ');
+};

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

@@ -219,7 +219,6 @@ var useDataGridDisplaySelector = function useDataGridDisplaySelector(showDisplay
     }, (0, _react2.jsx)(_button.EuiButtonIcon, {
       size: "xs",
       iconType: "controlsHorizontal",
-      className: "euiDataGrid__controlBtn",
       color: "text",
       "data-test-subj": "dataGridDisplaySelectorButton",
       onClick: function onClick() {

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDataGridFullScreenSelector = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../services");
 var _tool_tip = require("../../tool_tip");
 var _button = require("../../button");
@@ -34,9 +33,6 @@ var useDataGridFullScreenSelector = function useDataGridFullScreenSelector() {
     _useEuiI18n2 = (0, _slicedToArray2.default)(_useEuiI18n, 2),
     fullScreenButton = _useEuiI18n2[0],
     fullScreenButtonActive = _useEuiI18n2[1];
-  var controlBtnClasses = (0, _classnames.default)('euiDataGrid__controlBtn', {
-    'euiDataGrid__controlBtn--active': isFullScreen
-  });
   var fullScreenSelector = (0, _react.useMemo)(function () {
     return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
       content: isFullScreen ? (0, _react2.jsx)(_react.default.Fragment, null, fullScreenButtonActive, " (", (0, _react2.jsx)("kbd", null, "esc"), ")") : fullScreenButton,
@@ -45,14 +41,14 @@ var useDataGridFullScreenSelector = function useDataGridFullScreenSelector() {
       size: "xs",
       iconType: isFullScreen ? 'fullScreenExit' : 'fullScreen',
       color: "text",
-      className: controlBtnClasses,
+      "aria-pressed": isFullScreen,
       "data-test-subj": "dataGridFullScreenButton",
       onClick: function onClick() {
         return setIsFullScreen(!isFullScreen);
       },
       "aria-label": isFullScreen ? fullScreenButtonActive : fullScreenButton
     }));
-  }, [isFullScreen, controlBtnClasses, fullScreenButton, fullScreenButtonActive]);
+  }, [isFullScreen, fullScreenButton, fullScreenButtonActive]);
   var handleGridKeyDown = (0, _react.useCallback)(function (event) {
     switch (event.key) {
       case _services.keys.ESCAPE:

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

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "EuiDataGridToolbar", {
     return _data_grid_toolbar.EuiDataGridToolbar;
   }
 });
+Object.defineProperty(exports, "EuiDataGridToolbarControl", {
+  enumerable: true,
+  get: function get() {
+    return _data_grid_toolbar_control.EuiDataGridToolbarControl;
+  }
+});
 Object.defineProperty(exports, "checkOrDefaultToolBarDisplayOptions", {
   enumerable: true,
   get: function get() {
@@ -56,4 +62,5 @@ var _column_sorting = require("./column_sorting");
 var _display_selector = require("./display_selector");
 var _keyboard_shortcuts = require("./keyboard_shortcuts");
 var _fullscreen_selector = require("./fullscreen_selector");
-var _data_grid_toolbar = require("./data_grid_toolbar");
+var _data_grid_toolbar = require("./data_grid_toolbar");
+var _data_grid_toolbar_control = require("./data_grid_toolbar_control");

package/optimize/lib/components/datagrid/index.js

@@ -7,7 +7,8 @@ var _exportNames = {
   EuiDataGrid: true,
   useDataGridColumnSelector: true,
   useDataGridColumnSorting: true,
-  useDataGridDisplaySelector: true
+  useDataGridDisplaySelector: true,
+  EuiDataGridToolbarControl: true
 };
 Object.defineProperty(exports, "EuiDataGrid", {
   enumerable: true,
@@ -15,6 +16,12 @@ Object.defineProperty(exports, "EuiDataGrid", {
     return _data_grid.EuiDataGrid;
   }
 });
+Object.defineProperty(exports, "EuiDataGridToolbarControl", {
+  enumerable: true,
+  get: function get() {
+    return _controls.EuiDataGridToolbarControl;
+  }
+});
 Object.defineProperty(exports, "useDataGridColumnSelector", {
   enumerable: true,
   get: function get() {

package/optimize/lib/components/datagrid/utils/row_heights.js

@@ -157,7 +157,7 @@ var RowHeightUtils = /*#__PURE__*/function () {
       var height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_ROW_HEIGHT;
       var _visibleRowIndex = arguments.length > 3 ? arguments[3] : undefined;
       var rowHeights = this.heightsCache.get(rowIndex) || new Map();
-      var adaptedHeight = Math.ceil(height + this.styles.paddingTop + this.styles.paddingBottom);
+      var adaptedHeight = Math.ceil(height);
       if (rowHeights.get(colId) === adaptedHeight) {
         return false;
       } else {

package/optimize/lib/components/date_picker/super_date_picker/super_update_button.js

@@ -149,7 +149,7 @@ var EuiSuperUpdateButton = /*#__PURE__*/function (_Component) {
       }, sharedButtonProps, {
         fill: fill,
         textProps: _objectSpread(_objectSpread({}, restTextProps), {}, {
-          className: (0, _classnames.default)('euiScreenReaderOnly', restTextProps === null || restTextProps === void 0 ? void 0 : restTextProps.className)
+          className: (0, _classnames.default)('euiScreenReaderOnly', restTextProps && restTextProps.className)
         })
       }, rest), buttonText)), (0, _react2.jsx)(_responsive2.EuiHideFor, {
         sizes: responsive || 'none'

package/optimize/lib/components/error_boundary/error_boundary.a11y.js

@@ -44,7 +44,7 @@ describe('EuiErrorBoundary', function () {
       cy.checkAxe();
     });
     it('has zero violations and accepts focus when the button is pressed', function () {
-      cy.realPress('Tab');
+      cy.get('button').first().focus();
       cy.realPress('Enter');
       cy.get('pre.euiCodeBlock__pre').should('have.focus');
       cy.checkAxe();

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

@@ -204,8 +204,7 @@ describe('EuiExpression', function () {
       cy.checkAxe();
     });
     it('has zero violations when first popover is interacted with by keyboard', function () {
-      cy.realPress('Tab');
-      cy.get('button').contains(/When count\(\)/i).should('have.focus');
+      cy.get('button').contains(/When count\(\)/i).focus();
       cy.realPress('Enter');
       cy.get('div[data-test-subj="cy-expression-popover-1"]').should('exist');
       cy.realPress('Tab');
@@ -215,8 +214,7 @@ describe('EuiExpression', function () {
       cy.checkAxe();
     });
     it('has zero violations when second popover is interacted with by keyboard', function () {
-      cy.repeatRealPress('Tab');
-      cy.get('button').contains(/Is above 100/i).should('have.focus');
+      cy.get('button').contains(/Is above 100/i).focus();
       cy.realPress('Enter');
       cy.get('div[data-test-subj="cy-expression-popover-2"]').should('exist');
       cy.realPress('Tab');

package/optimize/lib/components/filter_group/filter_button.js

@@ -75,7 +75,7 @@ var EuiFilterButton = function EuiFilterButton(_ref) {
   });
   var buttonTextClassNames = (0, _classnames.default)('euiFilterButton__text', {
     'euiFilterButton__text-hasNotification': showBadge
-  }, textProps === null || textProps === void 0 ? void 0 : textProps.className);
+  }, textProps && textProps.className);
   var badgeContent = showBadge && (0, _react2.jsx)(_badge.EuiNotificationBadge, {
     className: "euiFilterButton__notification",
     css: [notificationStyles.euiFilterButton__notification, isDisabled && notificationStyles.disabled, ";label:badgeContent;"],
@@ -105,7 +105,7 @@ var EuiFilterButton = function EuiFilterButton(_ref) {
     type: type,
     textProps: _objectSpread(_objectSpread({}, textProps), {}, {
       className: buttonTextClassNames,
-      css: [textStyles.euiFilterButton__text, showBadge && textStyles.hasNotification, textProps === null || textProps === void 0 ? void 0 : textProps.css]
+      css: [textStyles.euiFilterButton__text, showBadge && textStyles.hasNotification, textProps && textProps.css]
     }),
     contentProps: _objectSpread(_objectSpread({}, contentProps), {}, {
       css: [contentStyles.euiFilterButton__content, iconType && contentStyles.hasIcon, contentProps === null || contentProps === void 0 ? void 0 : contentProps.css]

package/optimize/lib/components/focus_trap/focus_trap.a11y.js

@@ -106,12 +106,12 @@ describe('EuiFocusTrap', function () {
   });
   describe('Accessibility checks for keyboard navigation', function () {
     it('allows the button outside the FocusTrap to receive focus', function () {
-      cy.repeatRealPress('Tab', 5);
-      cy.get('button[data-test-subj="cy-external-button"]').should('have.focus');
+      cy.get('button[data-test-subj="cy-external-button"]').focus();
       cy.checkAxe();
     });
     it('prevents the button outside the FocusTrap from receiving focus', function () {
-      cy.repeatRealPress('Tab', 4);
+      cy.get('input[data-test-subj="cy-input-one"]').focus();
+      cy.repeatRealPress('Tab', 3);
       cy.realPress('Enter');
       cy.realPress('Tab');
       cy.get('input[data-test-subj="cy-input-one"]').should('have.focus');