@elastic/eui 97.0.0 → 97.2.0

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

@@ -45,7 +45,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */ // eslint-disable-line import/named
-function isRangeInvalid(start, end) {
+function isRangeInvalid(start, end, minDate, maxDate) {
   if (start === 'now' && end === 'now') {
     return true;
   }
@@ -53,7 +53,7 @@ function isRangeInvalid(start, end) {
   var endMoment = _datemath.default.parse(end, {
     roundUp: true
   });
-  var isInvalid = !startMoment || !endMoment || !startMoment.isValid() || !endMoment.isValid() || !(0, _moment.default)(startMoment).isValid() || !(0, _moment.default)(endMoment).isValid() || startMoment.isAfter(endMoment);
+  var isInvalid = !startMoment || !endMoment || !startMoment.isValid() || !endMoment.isValid() || !(0, _moment.default)(startMoment).isValid() || !(0, _moment.default)(endMoment).isValid() || startMoment.isAfter(endMoment) || endMoment.isBefore(startMoment) || minDate != null && startMoment.isBefore(minDate) || maxDate != null && endMoment.isAfter(maxDate);
   return isInvalid;
 }
 var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
@@ -72,7 +72,7 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
       },
       start: _this.props.start,
       end: _this.props.end,
-      isInvalid: isRangeInvalid(_this.props.start, _this.props.end),
+      isInvalid: isRangeInvalid(_this.props.start, _this.props.end, _this.props.minDate, _this.props.maxDate),
       hasChanged: false,
       showPrettyDuration: (0, _pretty_duration.showPrettyDuration)(_this.props.start, _this.props.end, _this.props.commonlyUsedRanges),
       isStartDatePopoverOpen: false,
@@ -81,7 +81,7 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
     (0, _defineProperty2.default)(_this, "setTime", function (_ref) {
       var end = _ref.end,
         start = _ref.start;
-      var isInvalid = isRangeInvalid(start, end);
+      var isInvalid = isRangeInvalid(start, end, _this.props.minDate, _this.props.maxDate);
       _this.setState({
         start: start,
         end: end,
@@ -270,6 +270,8 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
         locale = _this$props3.locale,
         timeFormat = _this$props3.timeFormat,
         utcOffset = _this$props3.utcOffset,
+        minDate = _this$props3.minDate,
+        maxDate = _this$props3.maxDate,
         compressed = _this$props3.compressed,
         onFocus = _this$props3.onFocus,
         styles = _this$props3.memoizedStyles;
@@ -344,6 +346,8 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
             utcOffset: utcOffset,
             timeFormat: timeFormat,
             locale: locale || contextLocale,
+            minDate: minDate,
+            maxDate: maxDate,
             canRoundRelativeUnits: canRoundRelativeUnits,
             isOpen: _this.state.isStartDatePopoverOpen,
             onPopoverToggle: _this.onStartDatePopoverToggle,
@@ -366,6 +370,8 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
             utcOffset: utcOffset,
             timeFormat: timeFormat,
             locale: locale || contextLocale,
+            minDate: minDate,
+            maxDate: maxDate,
             canRoundRelativeUnits: canRoundRelativeUnits,
             roundUp: true,
             isOpen: _this.state.isEndDatePopoverOpen,
@@ -471,7 +477,7 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
           },
           start: nextProps.start,
           end: nextProps.end,
-          isInvalid: isRangeInvalid(nextProps.start, nextProps.end),
+          isInvalid: isRangeInvalid(nextProps.start, nextProps.end, nextProps.minDate, nextProps.maxDate),
           hasChanged: false,
           showPrettyDuration: (0, _pretty_duration.showPrettyDuration)(nextProps.start, nextProps.end, nextProps.commonlyUsedRanges)
         };

package/optimize/lib/components/drag_and_drop/draggable.js

@@ -54,6 +54,7 @@ var EuiDraggable = exports.EuiDraggable = function EuiDraggable(_ref) {
     cloneItems = _useContext.cloneItems;
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _draggable.euiDraggableStyles)(euiTheme);
+  var hasCustomDragHandle = customDragHandle !== false;
   return (0, _react2.jsx)(_dnd.Draggable, (0, _extends2.default)({
     draggableId: draggableId,
     index: index,
@@ -61,13 +62,14 @@ var EuiDraggable = exports.EuiDraggable = function EuiDraggable(_ref) {
   }, rest), function (provided, snapshot, rubric) {
     var _provided$dragHandleP, _provided$dragHandleP2;
     var isDragging = snapshot.isDragging;
+    var isFullyCustomDragHandle = customDragHandle === 'custom';
     var cssStyles = [styles.euiDraggable, cloneItems && !isDragging && styles.hasClone, isDragging && styles.isDragging, isRemovable && styles.isRemovable, styles.spacing[spacing]];
     var classes = (0, _classnames.default)('euiDraggable', className);
     var childClasses = (0, _classnames.default)('euiDraggable__item', {
       'euiDraggable__item-isDisabled': isDragDisabled
     });
     var DraggableElement = typeof children === 'function' ? children(provided, snapshot, rubric) : children;
-    var content = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", (0, _extends2.default)({}, provided.draggableProps, !customDragHandle ? provided.dragHandleProps : {}, {
+    var content = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", (0, _extends2.default)({}, provided.draggableProps, !hasCustomDragHandle ? provided.dragHandleProps : {}, {
       ref: provided.innerRef,
       "data-test-subj": dataTestSubj,
       className: classes,
@@ -77,11 +79,14 @@ var EuiDraggable = exports.EuiDraggable = function EuiDraggable(_ref) {
       // interactive element. Screen readers will cue users that this is a container
       // and has one or more elements inside that are part of a related group.
       ,
-      role: hasInteractiveChildren ? 'group' : (_provided$dragHandleP = provided.dragHandleProps) === null || _provided$dragHandleP === void 0 ? void 0 : _provided$dragHandleP.role
+      role: isFullyCustomDragHandle ? undefined // prevent wrapper role from removing semantics of the children
+      : hasInteractiveChildren ? 'group' : (_provided$dragHandleP = provided.dragHandleProps) === null || _provided$dragHandleP === void 0 ? void 0 : _provided$dragHandleP.role
       // If the container includes an interactive element, we remove the tabindex=0
       // because [role="group"] does not permit or warrant a tab stop
+      // additionally we remove the tabindex when the child is a fully custom handle
+      // that has its own tabindex and handle props
       ,
-      tabIndex: hasInteractiveChildren ? undefined : (_provided$dragHandleP2 = provided.dragHandleProps) === null || _provided$dragHandleP2 === void 0 ? void 0 : _provided$dragHandleP2.tabIndex
+      tabIndex: hasInteractiveChildren || isFullyCustomDragHandle ? undefined : (_provided$dragHandleP2 = provided.dragHandleProps) === null || _provided$dragHandleP2 === void 0 ? void 0 : _provided$dragHandleP2.tabIndex
     }), (0, _services.cloneElementWithCss)(DraggableElement, {
       className: (0, _classnames.default)(DraggableElement.props.className, childClasses),
       css: [_draggable.euiDraggableItemStyles.euiDraggable__item, isDragDisabled && _draggable.euiDraggableItemStyles.disabled]

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

@@ -26,23 +26,18 @@ var euiHeaderVariables = exports.euiHeaderVariables = function euiHeaderVariable
   };
 };
 var euiHeaderStyles = exports.euiHeaderStyles = function euiHeaderStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+  var euiTheme = euiThemeContext.euiTheme;
   var _euiHeaderVariables = euiHeaderVariables(euiThemeContext),
     height = _euiHeaderVariables.height,
     padding = _euiHeaderVariables.padding;
-
-  // Curated border color to fade into the shadow without looking too much like a border
-  // It adds separation between the header and flyout
-  var borderColor = colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.emptyShade, 0.35) : (0, _services.shade)(euiTheme.border.color, 0.03);
   return {
-    euiHeader: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:space-between;", (0, _global_styling.logicalCSS)('height', height), " ", (0, _global_styling.logicalCSS)('padding-horizontal', padding), " ", (0, _mixins.euiShadowSmall)(euiThemeContext), ";;label:euiHeader;"),
+    euiHeader: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:space-between;", (0, _global_styling.logicalCSS)('height', height), " ", (0, _global_styling.logicalCSS)('padding-horizontal', padding), " ", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), " ", (0, _mixins.euiShadowSmall)(euiThemeContext), ";;label:euiHeader;"),
     // Position
     static: /*#__PURE__*/(0, _react.css)("z-index:", Number(euiTheme.levels.header) - 1, ";position:relative;;label:static;"),
     fixed: /*#__PURE__*/(0, _react.css)("z-index:", euiTheme.levels.header, ";position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('horizontal', 0), ";;label:fixed;"),
     // Theme
-    default: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(borderColor)), ";;label:default;"),
-    dark: /*#__PURE__*/(0, _react.css)(euiHeaderDarkStyles(euiThemeContext, borderColor), ";label:dark;")
+    default: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";;label:default;"),
+    dark: /*#__PURE__*/(0, _react.css)(euiHeaderDarkStyles(euiThemeContext), ";label:dark;")
   };
 };
 
@@ -56,12 +51,11 @@ var euiHeaderStyles = exports.euiHeaderStyles = function euiHeaderStyles(euiThem
  * by Kibana in the near future, at which point we can remove this
  */
 
-var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext, defaultBorderColor) {
+var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     colorMode = euiThemeContext.colorMode;
   var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
     controlPlaceholderText = _euiFormVariables.controlPlaceholderText;
   var backgroundColor = colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.lightestShade, 0.5) : (0, _services.shade)(euiTheme.colors.darkestShade, 0.28);
-  var borderColor = colorMode === 'DARK' ? defaultBorderColor : backgroundColor;
-  return "\n    background-color: ".concat(backgroundColor, ";\n    ").concat((0, _global_styling.logicalCSS)('border-bottom-color', borderColor), "\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat((0, _services.makeHighContrastColor)(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat((0, _services.shade)(euiTheme.colors.primary, 0.5), ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      &--group {\n        border-color: ").concat((0, _services.transparentize)(euiTheme.colors.ghost, 0.3), ";\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(euiTheme.colors.ghost, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat((0, _services.makeHighContrastColor)(controlPlaceholderText, 8)(backgroundColor), ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append,\n        .euiFormControlLayout__prepend {\n          background-color: transparent;\n        }\n\n        .euiFormLabel {\n          color: inherit;\n        }\n      }\n    }\n  ");
+  return "\n    background-color: ".concat(backgroundColor, ";\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat((0, _services.makeHighContrastColor)(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat((0, _services.shade)(euiTheme.colors.primary, 0.5), ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      &--group {\n        border-color: ").concat((0, _services.transparentize)(euiTheme.colors.ghost, 0.3), ";\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(euiTheme.colors.ghost, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat((0, _services.makeHighContrastColor)(controlPlaceholderText, 8)(backgroundColor), ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append,\n        .euiFormControlLayout__prepend {\n          background-color: transparent;\n        }\n\n        .euiFormLabel {\n          color: inherit;\n        }\n      }\n    }\n  ");
 };

package/optimize/lib/components/header/header_links/header_links.js

@@ -30,7 +30,7 @@ var _excluded = ["children", "className", "gutterSize", "popoverBreakpoints", "p
  */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var GUTTER_SIZES = exports.GUTTER_SIZES = ['xs', 's', 'm', 'l'];
+var GUTTER_SIZES = exports.GUTTER_SIZES = ['xxs', 'xs', 's', 'm', 'l'];
 var EuiHeaderLinks = exports.EuiHeaderLinks = function EuiHeaderLinks(_ref) {
   var children = _ref.children,
     className = _ref.className,

package/optimize/lib/components/header/header_links/header_links.styles.js

@@ -35,6 +35,7 @@ var euiHeaderLinksStyles = exports.euiHeaderLinksStyles = function euiHeaderLink
     euiHeaderLinks: _ref2,
     euiHeaderLinks__list: _ref,
     gutterSizes: {
+      xxs: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.xs, ";;label:xxs;"),
       xs: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.s, ";;label:xs;"),
       s: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.m, ";;label:s;"),
       m: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.base, ";;label:m;"),

package/optimize/lib/components/page_template/inner/page_inner.styles.js

@@ -7,7 +7,6 @@ exports.euiPageInnerStyles = void 0;
 var _react = require("@emotion/react");
 var _mixins = require("../../../themes/amsterdam/global_styling/mixins");
 var _global_styling = require("../../../global_styling");
-var _services = require("../../../services");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -17,13 +16,13 @@ var _services = require("../../../services");
  */
 
 var euiPageInnerStyles = exports.euiPageInnerStyles = function euiPageInnerStyles(euiThemeContext) {
-  var borderColor = (0, _services.transparentize)(euiThemeContext.euiTheme.colors.lightShade, 0.7);
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     euiPageInner: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;align-items:stretch;flex:1 1 100%;", (0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.logicalCSS)('min-width', '0'), ";;label:euiPageInner;"),
     panelled: /*#__PURE__*/(0, _react.css)("background:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'plain'), ";", (0, _mixins.euiShadow)(euiThemeContext, 'm'), ";;label:panelled;"),
     border: {
-      top: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', "".concat(euiThemeContext.euiTheme.border.width.thin, " solid ").concat(borderColor)), ";;label:top;"),
-      left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-left', "".concat(euiThemeContext.euiTheme.border.width.thin, " solid ").concat(borderColor)), ";;label:left;")
+      top: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), ";;label:top;"),
+      left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-left', euiTheme.border.thin), ";;label:left;")
     }
   };
 };

package/optimize/lib/components/tabs/tab.js

@@ -74,7 +74,7 @@ var EuiTab = exports.EuiTab = function EuiTab(_ref) {
       target: target,
       rel: secureRel
     }, rest), prependNode, (0, _react2.jsx)("span", {
-      className: "euiTab__content",
+      className: "euiTab__content eui-textTruncate",
       css: cssTabContentStyles
     }, children), appendNode);
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "97.0.0",
+  "version": "97.2.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/test-env/components/datagrid/body/cell/data_grid_cell.styles.js

@@ -47,6 +47,7 @@ var euiDataGridCellOutlineSelectors = exports.euiDataGridCellOutlineSelectors =
 
   // Cell header specific selectors
   var headerActionsOpen = '.euiDataGridHeaderCell--isActionsPopoverOpen';
+  var isMoving = '[data-column-moving]'; // prevents the header column actions hover animation from replaying on column move
 
   // Utils
   var selectors = function selectors() {
@@ -80,10 +81,11 @@ var euiDataGridCellOutlineSelectors = exports.euiDataGridCellOutlineSelectors =
       hoverAnimation: hoverNot(selectors(focus, isOpen, isClosing))
     },
     header: {
-      focus: is(selectors(focus, focusWithin, headerActionsOpen)),
+      focus: is(selectors(focus, focusWithin, headerActionsOpen, isMoving)),
       // :focus-within here is primarily intended for when the column actions button has been clicked twice
       focusTrapped: _(isEntered),
-      hideActions: not(selectors(hover, focusWithin, headerActionsOpen))
+      showActions: is(selectors(hover, focusWithin, headerActionsOpen, isMoving)),
+      hideActions: not(selectors(hover, focusWithin, headerActionsOpen, isMoving))
     }
   };
 };

package/test-env/components/datagrid/body/cell/focus_utils.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.HandleInteractiveChildren = exports.FocusTrappedChildren = void 0;
+var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -108,16 +109,24 @@ var FocusTrappedChildren = exports.FocusTrappedChildren = function FocusTrappedC
 
   // direct DOM manipulation as workaround to attach required hints
   (0, _react.useEffect)(function () {
+    var _currentAriaDescribed;
     var currentAriaDescribedbyId = cellEl.getAttribute('aria-describedby');
-    cellEl.setAttribute('aria-describedby', (0, _classnames.default)(currentAriaDescribedbyId, ariaDescribedById));
+    // A11y: splitting ids to be able to append the first hint (sorting)
+    // while other hints should follow the keyboard navigation hints
+    var _ref3 = (_currentAriaDescribed = currentAriaDescribedbyId === null || currentAriaDescribedbyId === void 0 ? void 0 : currentAriaDescribedbyId.split(' ')) !== null && _currentAriaDescribed !== void 0 ? _currentAriaDescribed : [],
+      _ref4 = (0, _toArray2.default)(_ref3),
+      sortingId = _ref4[0],
+      rest = _ref4.slice(1);
+    var remainingIds = rest.join(' ');
+    cellEl.setAttribute('aria-describedby', (0, _classnames.default)(sortingId, ariaDescribedById, !isCellEntered && remainingIds));
     return function () {
       if (currentAriaDescribedbyId) {
-        cellEl.setAttribute('aria-descibedby', currentAriaDescribedbyId);
+        cellEl.setAttribute('aria-describedby', currentAriaDescribedbyId);
       } else {
         cellEl.removeAttribute('aria-describedby');
       }
     };
-  }, [cellEl, ariaDescribedById]);
+  }, [cellEl, ariaDescribedById, isCellEntered]);
   (0, _react.useEffect)(function () {
     if (isCellEntered) {
       enableAndFocusInteractives(cellEl);
@@ -145,7 +154,7 @@ var FocusTrappedChildren = exports.FocusTrappedChildren = function FocusTrappedC
             } else if (
             // when opened content is closed, we don't want Escape to return to the cell
             // immediately but instead return focus to a trigger as expected
-            isCellEntered === false && (0, _utils.isDOMNode)(event.target) && (0, _utils.isDOMNode)(event.currentTarget) && event.currentTarget.contains(event.target)) {
+            isCellEntered === false && (0, _utils.isDOMNode)(event.target) && (0, _utils.isDOMNode)(event.currentTarget) && event.currentTarget !== event.target && event.currentTarget.contains(event.target)) {
               return true;
             }
             return isCellEntered;

package/test-env/components/datagrid/body/data_grid_body.js

@@ -658,5 +658,6 @@ EuiDataGridBody.propTypes = {
   gridRef: _propTypes.default.any.isRequired,
   gridItemsRendered: _propTypes.default.any.isRequired,
   wrapperRef: _propTypes.default.any.isRequired,
-  className: _propTypes.default.string
+  className: _propTypes.default.string,
+  canDragAndDropColumns: _propTypes.default.bool
 };

package/test-env/components/datagrid/body/data_grid_body_custom.js

@@ -46,6 +46,7 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = /*#__PUR
     columns = _ref.columns,
     setVisibleColumns = _ref.setVisibleColumns,
     switchColumnPos = _ref.switchColumnPos,
+    canDragAndDropColumns = _ref.canDragAndDropColumns,
     onColumnResize = _ref.onColumnResize,
     schema = _ref.schema,
     schemaDetectors = _ref.schemaDetectors,
@@ -99,12 +100,13 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = /*#__PUR
       setVisibleColumns: setVisibleColumns,
       visibleColCount: visibleColCount,
       switchColumnPos: switchColumnPos,
+      canDragAndDropColumns: canDragAndDropColumns,
       sorting: sorting,
       schema: schema,
       schemaDetectors: schemaDetectors,
       gridStyles: gridStyles
     };
-  }, [leadingControlColumns, trailingControlColumns, columns, columnWidths, defaultColumnWidth, setColumnWidth, visibleColCount, setVisibleColumns, switchColumnPos, sorting, schema, schemaDetectors, gridStyles]);
+  }, [leadingControlColumns, trailingControlColumns, columns, columnWidths, defaultColumnWidth, setColumnWidth, visibleColCount, setVisibleColumns, switchColumnPos, canDragAndDropColumns, sorting, schema, schemaDetectors, gridStyles]);
 
   /**
    * Header & footer
@@ -813,6 +815,7 @@ EuiDataGridBodyCustomRender.propTypes = {
   gridRef: _propTypes.default.any.isRequired,
   gridItemsRendered: _propTypes.default.any.isRequired,
   wrapperRef: _propTypes.default.any.isRequired,
-  className: _propTypes.default.string
+  className: _propTypes.default.string,
+  canDragAndDropColumns: _propTypes.default.bool
 };
 EuiDataGridBodyCustomRender.displayName = 'EuiDataGridBodyCustomRender';

package/test-env/components/datagrid/body/data_grid_body_virtualized.js

@@ -113,7 +113,8 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
     gridRef = _ref3.gridRef,
     gridItemsRendered = _ref3.gridItemsRendered,
     wrapperRef = _ref3.wrapperRef,
-    className = _ref3.className;
+    className = _ref3.className,
+    canDragAndDropColumns = _ref3.canDragAndDropColumns;
   /**
    * Grid refs & observers
    */
@@ -164,7 +165,8 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
       sorting: sorting,
       schema: schema,
       schemaDetectors: schemaDetectors,
-      gridStyles: gridStyles
+      gridStyles: gridStyles,
+      canDragAndDropColumns: canDragAndDropColumns
     }),
     headerRow = _useDataGridHeader.headerRow,
     headerRowHeight = _useDataGridHeader.headerRowHeight;
@@ -196,7 +198,8 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
     headerRowHeight: headerRowHeight,
     footerRowHeight: footerRowHeight,
     visibleRowCount: visibleRowCount,
-    hasStickyFooter: !!(renderFooterCellValue && gridStyles.stickyFooter)
+    hasStickyFooter: !!(renderFooterCellValue && gridStyles.stickyFooter),
+    canDragAndDropColumns: canDragAndDropColumns
   });
 
   /**
@@ -944,6 +947,7 @@ EuiDataGridBodyVirtualized.propTypes = {
   gridRef: _propTypes.default.any.isRequired,
   gridItemsRendered: _propTypes.default.any.isRequired,
   wrapperRef: _propTypes.default.any.isRequired,
-  className: _propTypes.default.string
+  className: _propTypes.default.string,
+  canDragAndDropColumns: _propTypes.default.bool
 };
 EuiDataGridBodyVirtualized.displayName = 'EuiDataGridBodyVirtualized';