elastic · cee-chen · Jan 5, 2024 · Dec 18, 2023 · Dec 5, 2023 · Dec 19, 2023
diff --git a/package.json b/package.json
@@ -102,7 +102,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1",
     "@elastic/ems-client": "8.5.1",
-    "@elastic/eui": "91.0.0-backport.0",
+    "@elastic/eui": "91.3.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

@@ -167,6 +167,13 @@ export const getEuiContextMapping = (): EuiTokensObject => {
           'ARIA label and tooltip content describing a button that expands an actions menu',
       }
     ),
+    'euiCollapsedItemActions.allActionsDisabled': i18n.translate(
+      'core.euiCollapsedItemActions.allActionsDisabled',
+      {
+        defaultMessage: 'Individual item actions are disabled when rows are being selected.',
+        description: 'Title content when the actions popover toggle is disabled',
+      }
+    ),
     'euiCollapsibleNavBeta.ariaLabel': i18n.translate('core.euiCollapsibleNavBeta.ariaLabel', {
       defaultMessage: 'Site menu',
     }),
@@ -252,16 +259,6 @@ export const getEuiContextMapping = (): EuiTokensObject => {
     'euiColumnSelector.searchcolumns': i18n.translate('core.euiColumnSelector.searchcolumns', {
       defaultMessage: 'Search columns',
     }),
-    'euiColumnSelector.buttonActiveSingular': ({ numberOfHiddenFields }: EuiValues) =>
-      i18n.translate('core.euiColumnSelector.buttonActiveSingular', {
-        defaultMessage: '{numberOfHiddenFields} column hidden',
-        values: { numberOfHiddenFields },
-      }),
-    'euiColumnSelector.buttonActivePlural': ({ numberOfHiddenFields }: EuiValues) =>
-      i18n.translate('core.euiColumnSelector.buttonActivePlural', {
-        defaultMessage: '{numberOfHiddenFields} columns hidden',
-        values: { numberOfHiddenFields },
-      }),
     'euiColumnSorting.clearAll': i18n.translate('core.euiColumnSorting.clearAll', {
       defaultMessage: 'Clear sorting',
     }),
@@ -280,11 +277,6 @@ export const getEuiContextMapping = (): EuiTokensObject => {
     'euiColumnSorting.button': i18n.translate('core.euiColumnSorting.button', {
       defaultMessage: 'Sort fields',
     }),
-    'euiColumnSorting.buttonActive': ({ numberOfSortedFields }: EuiValues) =>
-      i18n.translate('core.euiColumnSorting.buttonActive', {
-        defaultMessage: '{numberOfSortedFields, plural, one {# field} other {# fields}} sorted',
-        values: { numberOfSortedFields },
-      }),
     'euiColumnSortingDraggable.activeSortLabel': ({ display }: EuiValues) =>
       i18n.translate('core.euiColumnSortingDraggable.activeSortLabel', {
         defaultMessage: '{display} is sorting this data grid',
@@ -673,6 +665,11 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         description: 'Descending size label',
       }
     ),
+    'euiDataGridToolbarControl.badgeAriaLabel': ({ count }: EuiValues) =>
+      i18n.translate('core.euiDataGridToolbarControl.badgeAriaLabel', {
+        defaultMessage: 'Active: {count}',
+        values: { count },
+      }),
     'euiDatePopoverButton.invalidTitle': ({ title }: EuiValues) =>
       i18n.translate('core.euiDatePopoverButton.invalidTitle', {
         defaultMessage: 'Invalid date: {title}',
@@ -830,11 +827,11 @@ export const getEuiContextMapping = (): EuiTokensObject => {
       'core.euiInlineEditForm.saveButtonAriaLabel',
       { defaultMessage: 'Save edit' }
     ),
-    'euiLink.external.ariaLabel': i18n.translate('core.euiLink.external.ariaLabel', {
+    'euiExternalLinkIcon.ariaLabel': i18n.translate('core.euiExternalLinkIcon.ariaLabel', {
       defaultMessage: 'External link',
     }),
-    'euiLink.newTarget.screenReaderOnlyText': i18n.translate(
-      'core.euiLink.newTarget.screenReaderOnlyText',
+    'euiExternalLinkIcon.newTarget.screenReaderOnlyText': i18n.translate(
+      'core.euiExternalLinkIcon.newTarget.screenReaderOnlyText',
       {
         defaultMessage: '(opens in a new tab or window)',
       }

@@ -40,23 +40,29 @@
     border-bottom: $euiBorderThin;
   }
 
+  .euiDataGridRowCell--controlColumn:hover::after,
+  .euiDataGridRowCell--controlColumn:focus::after,
+  .euiDataGridRowCell--controlColumn.euiDataGridRowCell--open::after {
+    border-color: transparent;
+  }
+
+  .euiDataGridRowCell--controlColumn .euiDataGridRowCell__content,
   .euiDataGridRowCell.euiDataGridRowCell--controlColumn[data-gridcell-column-id='openDetails'],
   .euiDataGridRowCell.euiDataGridRowCell--controlColumn[data-gridcell-column-id='select'] {
     padding-left: 0;
     padding-right: 0;
   }
 
-  .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover,
-  .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover .euiDataGridRowCell__actions--overlay {
+  .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover {
     background-color: tintOrShade($euiColorLightShade, 50%, 0);
   }
 
   .euiDataGrid__scrollOverlay .euiDataGrid__scrollBarOverlayRight {
     background-color: transparent; // otherwise the grid scrollbar border visually conflicts with the grid toolbar controls
   }
 
-  .euiDataGridRowCell__autoHeight,
-  .euiDataGridRowCell__lineCountHeight {
+  .euiDataGridRowCell__content--autoHeight,
+  .euiDataGridRowCell__content--lineCountHeight {
     white-space: pre-wrap;
   }
 }
@@ -114,15 +120,15 @@
 
 .unifiedDataTable__rowControl {
   // fine-tuning the vertical alignment with the text for any row height setting
-  margin-top: -3px;
-  .euiDataGridRowCell__defaultHeight & { // "Single line" row height setting
+  margin-top: -$euiSizeXS;
+  .euiDataGridRowCell__content--defaultHeight & { // "Single line" row height setting
     margin-top: 0;
   }
 }
 
 .unifiedDataTable__descriptionList {
   // force the content truncation when "Single line" row height setting is active
-  .euiDataGridRowCell__defaultHeight & {
+  .euiDataGridRowCell__content--defaultHeight & {
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;

@@ -15,6 +15,7 @@ import {
   EuiScreenReaderOnly,
   EuiToolTip,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { ToastsStart, IUiSettingsClient } from '@kbn/core/public';
 import { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
@@ -189,7 +190,12 @@ function buildEuiGridColumn({
     });
 
     column.display = (
-      <div aria-label={primaryTimeAriaLabel}>
+      <div
+        aria-label={primaryTimeAriaLabel}
+        css={css`
+          text-align: left;
+        `}
+      >
         <EuiToolTip content={primaryTimeTooltip}>
           <>
             {timeFieldName} <EuiIcon type="clock" />

@@ -6,15 +6,13 @@
  * Side Public License, v 1.
  */
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import classNames from 'classnames';
 import {
-  EuiButtonEmpty,
   EuiCheckbox,
   EuiContextMenuItem,
   EuiContextMenuPanel,
   EuiCopy,
   EuiDataGridCellValueElementProps,
-  EuiNotificationBadge,
+  EuiDataGridToolbarControl,
   EuiPopover,
   EuiFlexGroup,
   EuiFlexItem,
@@ -183,33 +181,20 @@ export function DataTableDocumentToolbarBtn({
       isOpen={isSelectionPopoverOpen}
       panelPaddingSize="none"
       button={
-        <EuiButtonEmpty
-          size="xs"
-          color="text"
+        <EuiDataGridToolbarControl
           iconType="documents"
           onClick={toggleSelectionToolbar}
           data-selected-documents={selectedDocs.length}
           data-test-subj="dscGridSelectionBtn"
           isSelected={isFilterActive}
-          className={classNames({
-            // eslint-disable-next-line @typescript-eslint/naming-convention
-            euiDataGrid__controlBtn: true,
-            'euiDataGrid__controlBtn--active': isFilterActive,
-          })}
+          badgeContent={selectedDocs.length}
         >
-          <EuiFlexGroup responsive={false} direction="row" alignItems="center" gutterSize="s">
-            <EuiFlexItem grow={false}>
-              <FormattedMessage
-                id="unifiedDataTable.selectedRowsButtonLabel"
-                defaultMessage="Selected"
-                description="Selected documents"
-              />
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiNotificationBadge color="subdued">{selectedDocs.length}</EuiNotificationBadge>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiButtonEmpty>
+          <FormattedMessage
+            id="unifiedDataTable.selectedRowsButtonLabel"
+            defaultMessage="Selected"
+            description="Selected documents"
+          />
+        </EuiDataGridToolbarControl>
       }
     >
       {isSelectionPopoverOpen && <EuiContextMenuPanel items={getMenuItems()} />}

@@ -85,7 +85,7 @@ export const LICENSE_OVERRIDES = {
   'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/ems-client@8.5.1': ['Elastic License 2.0'],
-  '@elastic/eui@91.0.0-backport.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@91.3.1': ['SSPL-1.0 OR Elastic License 2.0'],
   'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
   '@bufbuild/protobuf@1.2.1': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)

@@ -141,7 +141,7 @@ class DataDownloadOptions extends Component<DataDownloadOptionsProps, DataDownlo
             defaultMessage="Download the data in table format"
           />
         }
-        toolTipPosition="left"
+        toolTipProps={{ position: 'left' }}
       >
         <FormattedMessage
           id="data.inspector.table.formattedCSVButtonLabel"
@@ -157,7 +157,7 @@ class DataDownloadOptions extends Component<DataDownloadOptionsProps, DataDownlo
             defaultMessage="Download the data as provided, for example, dates as timestamps"
           />
         }
-        toolTipPosition="left"
+        toolTipProps={{ position: 'left' }}
       >
         <FormattedMessage id="data.inspector.table.rawCSVButtonLabel" defaultMessage="Raw CSV" />
       </EuiContextMenuItem>,

@@ -2,7 +2,7 @@
   padding: $euiSizeS $euiSizeS $euiSizeXS;
 }
 
-.dscGridToolbarControlButton .euiDataGrid__controlBtn {
+.dscGridToolbarControlButton .euiDataGridToolbarControl {
   block-size: $euiSizeXL;
   border: $euiBorderThin;
   border-radius: $euiBorderRadiusSmall;
@@ -13,10 +13,7 @@
     block-size: $euiSize;
   }
 
-  // cancel default background and font changes
-  &.euiDataGrid__controlBtn--active {
-    font-weight: $euiFontWeightMedium;
-  }
+  // cancel default background changes
   &:active, &:focus {
     background: transparent;
   }