@elastic/eui 72.2.0 → 74.0.0

package/optimize/es/components/portal/portal.a11y.js

@@ -0,0 +1,60 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/*
+ * 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.
+ */
+/// <reference types="../../../cypress/support"/>
+import React, { useState } from 'react';
+import { EuiButton } from '../button';
+import { EuiPortal } from './portal';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var Portal = function Portal() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isPortalVisible = _useState2[0],
+      setIsPortalVisible = _useState2[1];
+
+  var togglePortal = function togglePortal() {
+    setIsPortalVisible(!isPortalVisible);
+  };
+
+  var closePortal = function closePortal() {
+    setIsPortalVisible(false);
+  };
+
+  var customPortal;
+
+  if (isPortalVisible) {
+    customPortal = ___EmotionJSX(EuiPortal, null, ___EmotionJSX("div", null, "This is the portal. Click anywhere to close."), ___EmotionJSX(EuiButton, {
+      onClick: closePortal
+    }, "Close portal"));
+  }
+
+  return ___EmotionJSX("div", null, ___EmotionJSX(EuiButton, {
+    onClick: togglePortal
+  }, "View guide"), customPortal);
+};
+
+describe('EuiPortal', function () {
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount(___EmotionJSX(Portal, null));
+    cy.get('div[data-relative-to-header="above"]').should('not.exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations after the portal is activated', function () {
+      cy.get('button[type="button"]').contains('View guide').realClick();
+      cy.get('div[data-euiportal="true"]').should('exist');
+      cy.checkAxe();
+    });
+  });
+});

package/optimize/es/components/tool_tip/tool_tip.js

@@ -23,13 +23,14 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import { keysOf } from '../common';
+import { findPopoverPosition, htmlIdGenerator } from '../../services';
+import { enqueueStateChange } from '../../services/react';
+import { EuiResizeObserver } from '../observer/resize_observer';
 import { EuiPortal } from '../portal';
+import { EuiToolTipPopover } from './tool_tip_popover';
 import { EuiToolTipAnchor } from './tool_tip_anchor';
 import { EuiToolTipArrow } from './tool_tip_arrow';
-import { EuiToolTipPopover } from './tool_tip_popover';
-import { enqueueStateChange } from '../../services/react';
-import { findPopoverPosition, htmlIdGenerator } from '../../services';
-import { EuiResizeObserver } from '../observer/resize_observer';
+import { toolTipManager } from './tool_tip_manager';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var positionsToClassNameMap = {
   top: 'euiToolTip--top',
@@ -124,9 +125,11 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
       if (!_this.timeoutId) {
         _this.timeoutId = setTimeout(function () {
           enqueueStateChange(function () {
-            return _this.setState({
+            _this.setState({
               visible: true
             });
+
+            toolTipManager.registerTooltip(_this.hideToolTip);
           });
         }, delayToMsMap[_this.props.delay]);
       }
@@ -187,6 +190,8 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
             toolTipStyles: DEFAULT_TOOLTIP_STYLES,
             arrowStyles: undefined
           });
+
+          toolTipManager.deregisterToolTip(_this.hideToolTip);
         }
       });
     });

package/optimize/es/components/tool_tip/tool_tip_manager.js

@@ -0,0 +1,41 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/*
+ * 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.
+ */
+
+/**
+ * Manager utility that ensures only one tooltip is visible at a time
+ *
+ * UX rationale (primarily for mouse-only users):
+ * @see https://github.com/elastic/kibana/issues/144482
+ * @see https://github.com/elastic/eui/issues/5883
+ */
+var ToolTipManager = function ToolTipManager() {
+  var _this = this;
+
+  _classCallCheck(this, ToolTipManager);
+
+  _defineProperty(this, "toolTipsToHide", new Set());
+
+  _defineProperty(this, "registerTooltip", function (hideCallback) {
+    _this.toolTipsToHide.forEach(function (hide) {
+      return hide();
+    });
+
+    _this.toolTipsToHide.clear();
+
+    _this.toolTipsToHide.add(hideCallback);
+  });
+
+  _defineProperty(this, "deregisterToolTip", function (hideCallback) {
+    _this.toolTipsToHide.delete(hideCallback);
+  });
+};
+
+export var toolTipManager = new ToolTipManager();

package/optimize/es/services/security/get_secure_rel_for_target.js

@@ -10,20 +10,14 @@
  * Secures outbound links. For more info:
  * https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/
  */
-import { isDomainSecure } from '../url';
 export var getSecureRelForTarget = function getSecureRelForTarget(_ref) {
-  var href = _ref.href,
-      _ref$target = _ref.target,
+  var _ref$target = _ref.target,
       target = _ref$target === void 0 ? '' : _ref$target,
       rel = _ref.rel;
-  var isElasticHref = !!href && isDomainSecure(href);
   var relParts = !!rel ? rel.split(' ').filter(function (part) {
     return !!part.length && part !== 'noreferrer';
   }) : [];
-
-  if (!isElasticHref) {
-    relParts.push('noreferrer');
-  }
+  relParts.push('noreferrer');
 
   if (target.includes('_blank') && relParts.indexOf('noopener') === -1) {
     relParts.push('noopener');

package/optimize/es/services/theme/hooks.js

@@ -12,6 +12,10 @@ import { EuiThemeContext, EuiModificationsContext, EuiColorModeContext, defaultC
 import { getEuiDevProviderWarning } from './provider';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var providerMessage = "`EuiProvider` is missing which can result in negative effects.\nWrap your component in `EuiProvider`: https://ela.st/euiprovider.";
+/**
+ * Hook for function components
+ */
+
 export var useEuiTheme = function useEuiTheme() {
   var theme = useContext(EuiThemeContext);
   var colorMode = useContext(EuiColorModeContext);
@@ -46,6 +50,10 @@ export var useEuiTheme = function useEuiTheme() {
   }, [theme, colorMode, modifications]);
   return assembledTheme;
 };
+/**
+ * HOC for class components
+ */
+
 // Provide the component props interface as the generic to allow the docs props table to populate.
 // e.g., `const EuiComponent = withEuiTheme<EuiComponentProps>(_EuiComponent)`
 export var withEuiTheme = function withEuiTheme(Component) {
@@ -62,4 +70,14 @@ export var withEuiTheme = function withEuiTheme(Component) {
   var WithEuiTheme = /*#__PURE__*/forwardRef(Render);
   WithEuiTheme.displayName = componentName;
   return WithEuiTheme;
+};
+/**
+ * Render prop alternative for complex class components
+ * Most useful for scenarios where a HOC may interfere with typing
+ */
+
+export var RenderWithEuiTheme = function RenderWithEuiTheme(_ref) {
+  var children = _ref.children;
+  var theme = useEuiTheme();
+  return children(theme);
 };

package/optimize/es/services/theme/index.js

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 export { EuiSystemContext, EuiThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
-export { useEuiTheme, withEuiTheme } from './hooks';
+export { useEuiTheme, withEuiTheme, RenderWithEuiTheme } from './hooks';
 export { EuiThemeProvider, getEuiDevProviderWarning, setEuiDevProviderWarning } from './provider';
 export { buildTheme, computed, isInverseColorMode, getColorMode, getComputed, getOn, mergeDeep, setOn, Computed } from './utils';
 export { COLOR_MODES_STANDARD } from './types';

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

@@ -62,6 +62,8 @@ var _delay_render = require("../delay_render");
 
 var _accessibility2 = require("../../services/accessibility");
 
+var _basic_table = require("./basic_table.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "loading", "items", "itemId", "columns", "pagination", "sorting", "selection", "onChange", "error", "noItemsMessage", "compressed", "itemIdToExpandedRowMap", "responsive", "isSelectable", "isExpandable", "hasActions", "rowProps", "cellProps", "tableCaption", "rowHeader", "tableLayout"],
@@ -182,40 +184,6 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
 
     (0, _classCallCheck2.default)(this, EuiBasicTable);
     _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "cleanups", []);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "tbody", null);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setTbody", function (tbody) {
-      // remove listeners from an existing element
-      _this.removeLoadingListeners(); // update the ref
-
-
-      _this.tbody = tbody; // if loading, add listeners
-
-      if (_this.props.loading === true && tbody) {
-        _this.addLoadingListeners(tbody);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "addLoadingListeners", function (tbody) {
-      var listener = function listener(event) {
-        event.stopPropagation();
-        event.preventDefault();
-      };
-
-      ['mousedown', 'mouseup', 'mouseover', 'mouseout', 'mouseenter', 'mouseleave', 'click', 'dblclick', 'keydown', 'keyup', 'keypress'].forEach(function (event) {
-        tbody.addEventListener(event, listener, true);
-
-        _this.cleanups.push(function () {
-          tbody.removeEventListener(event, listener, true);
-        });
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "removeLoadingListeners", function () {
-      _this.cleanups.forEach(function (cleanup) {
-        return cleanup();
-      });
-
-      _this.cleanups.length = 0;
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "tableId", (0, _accessibility2.htmlIdGenerator)('__table')());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectAllIdGenerator", (0, _accessibility2.htmlIdGenerator)('_selection_column-checkbox'));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSelectAll", function (isMobile) {
@@ -302,27 +270,13 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
   (0, _createClass2.default)(EuiBasicTable, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      if (this.props.loading && this.tbody) this.addLoadingListeners(this.tbody);
       this.getInitialSelection();
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (prevProps.loading !== this.props.loading) {
-        if (this.props.loading && this.tbody) {
-          this.addLoadingListeners(this.tbody);
-        } else {
-          this.removeLoadingListeners();
-        }
-      }
-
+    value: function componentDidUpdate() {
       this.getInitialSelection();
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.removeLoadingListeners();
-    }
   }, {
     key: "getInitialSelection",
     value: function getInitialSelection() {
@@ -482,7 +436,8 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
       var _this$props3 = this.props,
           compressed = _this$props3.compressed,
           responsive = _this$props3.responsive,
-          tableLayout = _this$props3.tableLayout;
+          tableLayout = _this$props3.tableLayout,
+          loading = _this$props3.loading;
       var mobileHeader = responsive ? (0, _react2.jsx)(_table.EuiTableHeaderMobile, null, (0, _react2.jsx)(_flex.EuiFlexGroup, {
         responsive: false,
         justifyContent: "spaceBetween",
@@ -500,7 +455,8 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
         id: this.tableId,
         tableLayout: tableLayout,
         responsive: responsive,
-        compressed: compressed
+        compressed: compressed,
+        css: loading && _basic_table.safariLoadingWorkaround
       }, caption, head, body, footer));
     }
   }, {
@@ -763,30 +719,35 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
     value: function renderTableBody() {
       var _this4 = this;
 
-      if (this.props.error) {
-        return this.renderErrorBody(this.props.error);
-      }
-
-      var items = this.props.items;
-
-      if (items.length === 0) {
-        return this.renderEmptyBody();
+      var _this$props8 = this.props,
+          error = _this$props8.error,
+          loading = _this$props8.loading,
+          items = _this$props8.items;
+      var content;
+
+      if (error) {
+        content = this.renderErrorMessage(error);
+      } else if (items.length === 0) {
+        content = this.renderEmptyMessage();
+      } else {
+        content = items.map(function (item, index) {
+          // if there's pagination the item's index must be adjusted to the where it is in the whole dataset
+          var tableItemIndex = hasPagination(_this4.props) && _this4.props.pagination.pageSize > 0 ? _this4.props.pagination.pageIndex * _this4.props.pagination.pageSize + index : index;
+          return _this4.renderItemRow(item, tableItemIndex);
+        });
       }
 
-      var rows = items.map(function (item, index) {
-        // if there's pagination the item's index must be adjusted to the where it is in the whole dataset
-        var tableItemIndex = hasPagination(_this4.props) && _this4.props.pagination.pageSize > 0 ? _this4.props.pagination.pageIndex * _this4.props.pagination.pageSize + index : index;
-        return _this4.renderItemRow(item, tableItemIndex);
+      return (0, _react2.jsx)(_services.RenderWithEuiTheme, null, function (theme) {
+        return (0, _react2.jsx)(_table.EuiTableBody, {
+          css: loading && (0, _basic_table.euiBasicTableBodyLoading)(theme)
+        }, content);
       });
-      return (0, _react2.jsx)(_table.EuiTableBody, {
-        bodyRef: this.setTbody
-      }, rows);
     }
   }, {
-    key: "renderErrorBody",
-    value: function renderErrorBody(error) {
+    key: "renderErrorMessage",
+    value: function renderErrorMessage(error) {
       var colSpan = this.props.columns.length + (this.props.selection ? 1 : 0);
-      return (0, _react2.jsx)(_table.EuiTableBody, null, (0, _react2.jsx)(_table.EuiTableRow, null, (0, _react2.jsx)(_table.EuiTableRowCell, {
+      return (0, _react2.jsx)(_table.EuiTableRow, null, (0, _react2.jsx)(_table.EuiTableRowCell, {
         align: "center",
         colSpan: colSpan,
         mobileOptions: {
@@ -795,38 +756,38 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
       }, (0, _react2.jsx)(_icon.EuiIcon, {
         type: "minusInCircle",
         color: "danger"
-      }), " ", error)));
+      }), " ", error));
     }
   }, {
-    key: "renderEmptyBody",
-    value: function renderEmptyBody() {
-      var _this$props8 = this.props,
-          columns = _this$props8.columns,
-          selection = _this$props8.selection,
-          noItemsMessage = _this$props8.noItemsMessage;
+    key: "renderEmptyMessage",
+    value: function renderEmptyMessage() {
+      var _this$props9 = this.props,
+          columns = _this$props9.columns,
+          selection = _this$props9.selection,
+          noItemsMessage = _this$props9.noItemsMessage;
       var colSpan = columns.length + (selection ? 1 : 0);
-      return (0, _react2.jsx)(_table.EuiTableBody, null, (0, _react2.jsx)(_table.EuiTableRow, null, (0, _react2.jsx)(_table.EuiTableRowCell, {
+      return (0, _react2.jsx)(_table.EuiTableRow, null, (0, _react2.jsx)(_table.EuiTableRowCell, {
         align: "center",
         colSpan: colSpan,
         mobileOptions: {
           width: '100%'
         }
-      }, noItemsMessage)));
+      }, noItemsMessage));
     }
   }, {
     key: "renderItemRow",
     value: function renderItemRow(item, rowIndex) {
       var _this5 = this;
 
-      var _this$props9 = this.props,
-          columns = _this$props9.columns,
-          selection = _this$props9.selection,
-          isSelectable = _this$props9.isSelectable,
-          hasActions = _this$props9.hasActions,
-          rowHeader = _this$props9.rowHeader,
-          _this$props9$itemIdTo = _this$props9.itemIdToExpandedRowMap,
-          itemIdToExpandedRowMap = _this$props9$itemIdTo === void 0 ? {} : _this$props9$itemIdTo,
-          isExpandable = _this$props9.isExpandable;
+      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;
       var cells = [];
       var itemIdCallback = this.props.itemId;
       var itemId = getItemId(item, itemIdCallback) != null ? getItemId(item, itemIdCallback) : rowIndex;
@@ -978,7 +939,8 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
         key: key,
         align: "right",
         textOnly: false,
-        hasActions: true
+        hasActions: true,
+        css: _basic_table.euiBasicTableActionsWrapper
       }, tools);
     }
   }, {
@@ -1062,11 +1024,11 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
     value: function renderPaginationBar() {
       var _this8 = this;
 
-      var _this$props10 = this.props,
-          error = _this$props10.error,
-          pagination = _this$props10.pagination,
-          tableCaption = _this$props10.tableCaption,
-          onChange = _this$props10.onChange;
+      var _this$props11 = this.props,
+          error = _this$props11.error,
+          pagination = _this$props11.pagination,
+          tableCaption = _this$props11.tableCaption,
+          onChange = _this$props11.onChange;
 
       if (!error && pagination && pagination.totalItemCount > 0) {
         if (!onChange) {
@@ -1118,8 +1080,7 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
       }
 
       return null;
-    } // used for moving in & out of `loading` state
-
+    }
   }]);
   return EuiBasicTable;
 }(_react.Component);

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

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.safariLoadingWorkaround = exports.euiBasicTableBodyLoading = exports.euiBasicTableActionsWrapper = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+var _templateObject;
+
+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)."; }
+
+var tableLoadingLine = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    ", "\n    ", "\n  }\n\n  20% {\n    ", "\n    ", "\n  }\n\n  80% {\n    ", "\n    ", "\n  }\n\n  100% {\n    ", "\n    ", "\n  }\n"])), (0, _global_styling.logicalCSS)('left', 0), (0, _global_styling.logicalCSS)('width', 0), (0, _global_styling.logicalCSS)('left', 0), (0, _global_styling.logicalCSS)('width', '40%'), (0, _global_styling.logicalCSS)('left', '60%'), (0, _global_styling.logicalCSS)('width', '40%'), (0, _global_styling.logicalCSS)('left', '100%'), (0, _global_styling.logicalCSS)('width', 0));
+
+var euiBasicTableBodyLoading = function euiBasicTableBodyLoading(_ref2) {
+  var euiTheme = _ref2.euiTheme;
+  return /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;&::before{position:absolute;content:'';", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('height', euiTheme.border.width.thick), " background-color:", euiTheme.colors.primary, ";animation:", tableLoadingLine, " 1s linear infinite;", _global_styling.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`
+
+
+exports.euiBasicTableBodyLoading = euiBasicTableBodyLoading;
+
+var _ref = 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__
+};
+
+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
+
+
+exports.safariLoadingWorkaround = safariLoadingWorkaround;
+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__
+};
+exports.euiBasicTableActionsWrapper = euiBasicTableActionsWrapper;

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

@@ -11,6 +11,8 @@ exports.useDataGridColumnSelector = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -107,6 +109,7 @@ var useDataGridColumnSelector = function useDataGridColumnSelector(availableColu
   }, [sortedColumns, columnSearchText, displayValues]);
   var isDragEnabled = allowColumnReorder && columnSearchText.length === 0; // only allow drag-and-drop when not filtering columns
 
+  var dragHandleAriaLabel = (0, _i18n.useEuiI18n)('euiColumnSelector.dragHandleAriaLabel', 'Drag handle');
   var buttonText = (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiColumnSelector.button",
     default: "Columns"
@@ -179,18 +182,23 @@ var useDataGridColumnSelector = function useDataGridColumnSelector(availableColu
       key: id,
       draggableId: id,
       index: index,
-      isDragDisabled: !isDragEnabled
+      isDragDisabled: !isDragEnabled,
+      hasInteractiveChildren: true,
+      customDragHandle: true
     }, function (provided, state) {
       return (0, _react2.jsx)("div", {
         className: "euiDataGridColumnSelector__item ".concat(state.isDragging && 'euiDataGridColumnSelector__item-isDragging'),
         "data-test-subj": "dataGridColumnSelectorColumnItem-".concat(id)
       }, (0, _react2.jsx)(_flex.EuiFlexGroup, {
         responsive: false,
-        gutterSize: "m",
+        gutterSize: "s",
         alignItems: "center"
-      }, (0, _react2.jsx)(_flex.EuiFlexItem, null, allowColumnHiding ? (0, _react2.jsx)(_form.EuiSwitch, {
+      }, allowColumnHiding && (0, _react2.jsx)(_flex.EuiFlexItem, {
+        grow: false
+      }, (0, _react2.jsx)(_form.EuiSwitch, {
         name: id,
         label: displayValues[id] || id,
+        showLabel: false,
         checked: visibleColumnIds.has(id),
         compressed: true,
         className: "euiSwitch--mini",
@@ -202,11 +210,18 @@ var useDataGridColumnSelector = function useDataGridColumnSelector(availableColu
           setVisibleColumns(nextVisibleColumns);
         },
         "data-test-subj": "dataGridColumnSelectorToggleColumnVisibility-".concat(id)
-      }) : (0, _react2.jsx)("span", {
+      })), (0, _react2.jsx)(_flex.EuiFlexItem // This extra column name flex item affords the column more grabbable real estate
+      // for mouse users, while hiding repetition for keyboard/screen reader users
+      , (0, _extends2.default)({}, provided.dragHandleProps, {
+        "aria-hidden": true,
+        tabIndex: -1
+      }), (0, _react2.jsx)("span", {
         className: "euiDataGridColumnSelector__itemLabel"
-      }, id)), isDragEnabled && (0, _react2.jsx)(_flex.EuiFlexItem, {
+      }, displayValues[id] || id)), isDragEnabled && (0, _react2.jsx)(_flex.EuiFlexItem, (0, _extends2.default)({
         grow: false
-      }, (0, _react2.jsx)(_icon.EuiIcon, {
+      }, provided.dragHandleProps, {
+        "aria-label": dragHandleAriaLabel
+      }), (0, _react2.jsx)(_icon.EuiIcon, {
         type: "grab",
         color: "subdued"
       }))));

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

@@ -73,7 +73,9 @@ var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSortingDraggab
   var dragHandleAriaLabel = (0, _i18n.useEuiI18n)('euiColumnSortingDraggable.dragHandleAriaLabel', 'Drag handle');
   return (0, _react2.jsx)(_drag_and_drop.EuiDraggable, (0, _extends2.default)({
     draggableId: id,
-    index: index
+    index: index,
+    hasInteractiveChildren: true,
+    customDragHandle: true
   }, rest), function (provided, state) {
     return (0, _react2.jsx)("div", {
       className: "euiDataGridColumnSorting__item ".concat(state.isDragging && 'euiDataGridColumnSorting__item-isDragging')
@@ -114,18 +116,25 @@ var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSortingDraggab
           sorting.onSort(nextColumns);
         }
       });
-    })), (0, _react2.jsx)(_flex.EuiFlexItem, {
+    })), (0, _react2.jsx)(_flex.EuiFlexItem, (0, _extends2.default)({
+      className: "euiDataGridColumnSorting__name" // This extra column name flex item affords the column more grabbable real estate
+      // for mouse users, while hiding repetition for keyboard/screen reader users
+
+    }, provided.dragHandleProps, {
+      tabIndex: -1,
+      "aria-hidden": true
+    }), (0, _react2.jsx)(_flex.EuiFlexGroup, {
+      gutterSize: "xs",
+      alignItems: "center",
+      responsive: false
+    }, (0, _react2.jsx)(_flex.EuiFlexItem, {
       grow: false
     }, (0, _react2.jsx)(_token.EuiToken, {
       color: schemaDetails != null ? schemaDetails.color : undefined,
       iconType: schemaDetails != null ? schemaDetails.icon : 'tokenString'
-    })), (0, _react2.jsx)(_flex.EuiFlexItem, {
-      "aria-hidden": true
-    }, (0, _react2.jsx)(_text.EuiText, {
+    })), (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_text.EuiText, {
       size: "xs"
-    }, (0, _react2.jsx)("p", null, display))), (0, _react2.jsx)(_flex.EuiFlexItem, {
-      className: "euiDataGridColumnSorting__orderButtons"
-    }, (0, _react2.jsx)(_i18n.EuiI18n, {
+    }, (0, _react2.jsx)("p", null, display))))), (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_i18n.EuiI18n, {
       token: "euiColumnSortingDraggable.toggleLegend",
       default: "Select sorting method for {display}",
       values: {

package/optimize/lib/components/datagrid/data_grid.a11y.js

@@ -181,7 +181,7 @@ describe('EuiDataGrid', function () {
     it('has zero violations on first render', function () {
       cy.checkAxe();
     });
-    it('has zero violations when the columns reorder menu is open', function () {
+    it('has zero violations when the columns visibility menu is open', function () {
       cy.get('button[data-test-subj="dataGridColumnSelectorButton"]').realClick();
       cy.checkAxe();
     });
@@ -234,9 +234,10 @@ describe('EuiDataGrid', function () {
       cy.get('div[data-gridcell-visible-row-index="0"][data-gridcell-column-index="1"]').find('button.euiButtonIcon').last().realClick();
       cy.checkAxe();
     });
-    it('has zero violations when the Favorite Distro column has been sorted', function () {
+    it('has zero violations on sort and when the columns sorting menu is open', function () {
       cy.get('button.euiDataGridHeaderCell__button').last().realClick();
       cy.get('button.euiListGroupItem__button').contains('Sort Alma to Debian').should('exist').realClick();
+      cy.get('button[data-test-subj="dataGridColumnSortingPopover"]').realClick();
       cy.checkAxe();
     });
     it('has zero violations when fullscreen is open', function () {