@elastic/eui 97.0.0-backport.0 → 97.1.0

package/i18ntokens.json

@@ -1067,14 +1067,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 187,
+        "line": 192,
         "column": 10,
-        "index": 6439
+        "index": 6786
       },
       "end": {
-        "line": 191,
+        "line": 196,
         "column": 12,
-        "index": 6610
+        "index": 6957
       }
     },
     "filepath": "src/components/datagrid/body/cell/focus_utils.tsx"
@@ -1085,104 +1085,122 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 194,
+        "line": 199,
         "column": 10,
-        "index": 6661
+        "index": 7008
       },
       "end": {
-        "line": 198,
+        "line": 203,
         "column": 12,
-        "index": 6871
+        "index": 7218
       }
     },
     "filepath": "src/components/datagrid/body/cell/focus_utils.tsx"
   },
   {
-    "token": "euiColumnActions.hideColumn",
-    "defString": "Hide column",
+    "token": "euiDataGridHeaderCell.actionsButtonAriaLabel",
+    "defString": "{title}. Click to view column header actions.",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 122,
-        "column": 6,
-        "index": 3246
+        "line": 120,
+        "column": 35,
+        "index": 3558
       },
       "end": {
-        "line": 122,
-        "column": 75,
-        "index": 3315
+        "line": 124,
+        "column": 5,
+        "index": 3700
       }
     },
     "filepath": "src/components/datagrid/body/header/column_actions.tsx"
   },
   {
-    "token": "euiColumnActions.moveLeft",
-    "defString": "Move left",
+    "token": "euiDataGridHeaderCell.actionsEnterKeyInstructions",
+    "defString": "Press the Enter key to view this column's actions",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 178,
-        "column": 13,
-        "index": 4719
+        "line": 125,
+        "column": 40,
+        "index": 3742
       },
       "end": {
-        "line": 178,
-        "column": 78,
-        "index": 4784
+        "line": 128,
+        "column": 5,
+        "index": 3876
       }
     },
     "filepath": "src/components/datagrid/body/header/column_actions.tsx"
   },
   {
-    "token": "euiColumnActions.moveRight",
-    "defString": "Move right",
+    "token": "euiDataGridHeaderCell.actionsPopoverScreenReaderText",
+    "defString": "To navigate through the list of column actions, press the Tab or Up and Down arrow keys.",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 199,
+        "line": 294,
+        "column": 6,
+        "index": 8661
+      },
+      "end": {
+        "line": 297,
         "column": 8,
-        "index": 5340
+        "index": 8854
+      }
+    },
+    "filepath": "src/components/datagrid/body/header/column_actions.tsx"
+  },
+  {
+    "token": "euiColumnActions.hideColumn",
+    "defString": "Hide column",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 405,
+        "column": 6,
+        "index": 11442
       },
       "end": {
-        "line": 199,
+        "line": 405,
         "column": 75,
-        "index": 5407
+        "index": 11511
       }
     },
     "filepath": "src/components/datagrid/body/header/column_actions.tsx"
   },
   {
-    "token": "euiColumnActions.unsort",
-    "defString": "Unsort {schemaLabel}",
+    "token": "euiColumnActions.moveLeft",
+    "defString": "Move left",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 283,
-        "column": 8,
-        "index": 7566
+        "line": 470,
+        "column": 13,
+        "index": 13216
       },
       "end": {
-        "line": 287,
-        "column": 10,
-        "index": 7710
+        "line": 470,
+        "column": 78,
+        "index": 13281
       }
     },
     "filepath": "src/components/datagrid/body/header/column_actions.tsx"
   },
   {
-    "token": "euiColumnActions.sort",
-    "defString": "Sort {schemaLabel}",
+    "token": "euiColumnActions.moveRight",
+    "defString": "Move right",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 289,
+        "line": 492,
         "column": 8,
-        "index": 7731
+        "index": 13869
       },
       "end": {
-        "line": 293,
-        "column": 10,
-        "index": 7871
+        "line": 492,
+        "column": 75,
+        "index": 13936
       }
     },
     "filepath": "src/components/datagrid/body/header/column_actions.tsx"
@@ -1193,14 +1211,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 319,
+        "line": 576,
         "column": 8,
-        "index": 8519
+        "index": 16095
       },
       "end": {
-        "line": 323,
+        "line": 580,
         "column": 10,
-        "index": 8663
+        "index": 16239
       }
     },
     "filepath": "src/components/datagrid/body/header/column_actions.tsx"
@@ -1211,53 +1229,53 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 325,
+        "line": 582,
         "column": 8,
-        "index": 8684
+        "index": 16260
       },
       "end": {
-        "line": 329,
+        "line": 586,
         "column": 10,
-        "index": 8824
+        "index": 16400
       }
     },
     "filepath": "src/components/datagrid/body/header/column_actions.tsx"
   },
   {
-    "token": "euiDataGridHeaderCell.actionsButtonAriaLabel",
-    "defString": "{title}. Click to view column header actions.",
+    "token": "euiColumnActions.unsort",
+    "defString": "Unsort {schemaLabel}",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 113,
-        "column": 37,
-        "index": 3516
+        "line": 612,
+        "column": 8,
+        "index": 17048
       },
       "end": {
-        "line": 117,
-        "column": 7,
-        "index": 3666
+        "line": 616,
+        "column": 10,
+        "index": 17192
       }
     },
-    "filepath": "src/components/datagrid/body/header/data_grid_header_cell.tsx"
+    "filepath": "src/components/datagrid/body/header/column_actions.tsx"
   },
   {
-    "token": "euiDataGridHeaderCell.actionsEnterKeyInstructions",
-    "defString": "Press the Enter key to view this column's actions",
+    "token": "euiColumnActions.sort",
+    "defString": "Sort {schemaLabel}",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 118,
-        "column": 42,
-        "index": 3710
+        "line": 618,
+        "column": 8,
+        "index": 17213
       },
       "end": {
-        "line": 121,
-        "column": 7,
-        "index": 3850
+        "line": 622,
+        "column": 10,
+        "index": 17353
       }
     },
-    "filepath": "src/components/datagrid/body/header/data_grid_header_cell.tsx"
+    "filepath": "src/components/datagrid/body/header/column_actions.tsx"
   },
   {
     "token": "euiDataGridHeaderCell.sortedByAscendingSingle",
@@ -1265,17 +1283,17 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 304,
+        "line": 82,
         "column": 16,
-        "index": 9963
+        "index": 2747
       },
       "end": {
-        "line": 308,
+        "line": 86,
         "column": 18,
-        "index": 10137
+        "index": 2921
       }
     },
-    "filepath": "src/components/datagrid/body/header/data_grid_header_cell.tsx"
+    "filepath": "src/components/datagrid/body/header/column_sorting.tsx"
   },
   {
     "token": "euiDataGridHeaderCell.sortedByDescendingSingle",
@@ -1283,17 +1301,17 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 312,
+        "line": 90,
         "column": 16,
-        "index": 10215
+        "index": 2999
       },
       "end": {
-        "line": 316,
+        "line": 94,
         "column": 18,
-        "index": 10391
+        "index": 3175
       }
     },
-    "filepath": "src/components/datagrid/body/header/data_grid_header_cell.tsx"
+    "filepath": "src/components/datagrid/body/header/column_sorting.tsx"
   },
   {
     "token": "euiDataGridHeaderCell.sortedByAscendingFirst",
@@ -1301,17 +1319,17 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 322,
+        "line": 100,
         "column": 16,
-        "index": 10537
+        "index": 3321
       },
       "end": {
-        "line": 327,
+        "line": 105,
         "column": 18,
-        "index": 10765
+        "index": 3549
       }
     },
-    "filepath": "src/components/datagrid/body/header/data_grid_header_cell.tsx"
+    "filepath": "src/components/datagrid/body/header/column_sorting.tsx"
   },
   {
     "token": "euiDataGridHeaderCell.sortedByDescendingFirst",
@@ -1319,17 +1337,17 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 331,
+        "line": 109,
         "column": 16,
-        "index": 10843
+        "index": 3627
       },
       "end": {
-        "line": 336,
+        "line": 114,
         "column": 18,
-        "index": 11073
+        "index": 3857
       }
     },
-    "filepath": "src/components/datagrid/body/header/data_grid_header_cell.tsx"
+    "filepath": "src/components/datagrid/body/header/column_sorting.tsx"
   },
   {
     "token": "euiDataGridHeaderCell.sortedByAscendingMultiple",
@@ -1337,17 +1355,17 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 342,
+        "line": 120,
         "column": 16,
-        "index": 11202
+        "index": 3986
       },
       "end": {
-        "line": 347,
+        "line": 125,
         "column": 18,
-        "index": 11440
+        "index": 4224
       }
     },
-    "filepath": "src/components/datagrid/body/header/data_grid_header_cell.tsx"
+    "filepath": "src/components/datagrid/body/header/column_sorting.tsx"
   },
   {
     "token": "euiDataGridHeaderCell.sortedByDescendingMultiple",
@@ -1355,35 +1373,17 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 351,
+        "line": 129,
         "column": 16,
-        "index": 11518
+        "index": 4302
       },
       "end": {
-        "line": 356,
+        "line": 134,
         "column": 18,
-        "index": 11758
+        "index": 4542
       }
     },
-    "filepath": "src/components/datagrid/body/header/data_grid_header_cell.tsx"
-  },
-  {
-    "token": "euiDataGridHeaderCell.actionsPopoverScreenReaderText",
-    "defString": "To navigate through the list of column actions, press the Tab or Up and Down arrow keys.",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 421,
-        "column": 6,
-        "index": 13604
-      },
-      "end": {
-        "line": 424,
-        "column": 8,
-        "index": 13797
-      }
-    },
-    "filepath": "src/components/datagrid/body/header/data_grid_header_cell.tsx"
+    "filepath": "src/components/datagrid/body/header/column_sorting.tsx"
   },
   {
     "token": "euiColumnSelector.dragHandleAriaLabel",
@@ -2471,14 +2471,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 549,
+        "line": 552,
         "column": 18,
-        "index": 17131
+        "index": 17264
       },
       "end": {
-        "line": 552,
+        "line": 555,
         "column": 20,
-        "index": 17284
+        "index": 17417
       }
     },
     "filepath": "src/components/datagrid/data_grid.tsx"

package/lib/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/lib/components/datagrid/body/cell/focus_utils.js

@@ -17,6 +17,8 @@ var _react2 = require("@emotion/react");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
+function _toArray(r) { return _arrayWithHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableRest(); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -110,16 +112,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 = _toArray(_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);
@@ -147,7 +157,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/lib/components/datagrid/body/data_grid_body.js

@@ -659,5 +659,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/lib/components/datagrid/body/data_grid_body_custom.js

@@ -56,6 +56,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,
@@ -109,12 +110,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
@@ -823,6 +825,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/lib/components/datagrid/body/data_grid_body_virtualized.js

@@ -116,7 +116,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
    */
@@ -167,7 +168,8 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
       sorting: sorting,
       schema: schema,
       schemaDetectors: schemaDetectors,
-      gridStyles: gridStyles
+      gridStyles: gridStyles,
+      canDragAndDropColumns: canDragAndDropColumns
     }),
     headerRow = _useDataGridHeader.headerRow,
     headerRowHeight = _useDataGridHeader.headerRowHeight;
@@ -199,7 +201,8 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
     headerRowHeight: headerRowHeight,
     footerRowHeight: footerRowHeight,
     visibleRowCount: visibleRowCount,
-    hasStickyFooter: !!(renderFooterCellValue && gridStyles.stickyFooter)
+    hasStickyFooter: !!(renderFooterCellValue && gridStyles.stickyFooter),
+    canDragAndDropColumns: canDragAndDropColumns
   });
 
   /**
@@ -947,6 +950,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';