@elastic/eui 89.0.0 → 90.0.0

package/lib/components/datagrid/body/data_grid_cell_actions.js

@@ -11,7 +11,9 @@ var _button_icon = require("../../button/button_icon");
 var _button_empty = require("../../button/button_empty");
 var _flex = require("../../flex");
 var _popover = require("../../popover");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _react2 = require("@emotion/react");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
@@ -35,7 +37,8 @@ var EuiDataGridCellActions = function EuiDataGridCellActions(_ref) {
   var onExpandClick = _ref.onExpandClick,
     column = _ref.column,
     rowIndex = _ref.rowIndex,
-    colIndex = _ref.colIndex;
+    colIndex = _ref.colIndex,
+    cellHeightType = _ref.cellHeightType;
   // Note: The cell expand button/expansion popover is *always* rendered if
   // column.cellActions is present (regardless of column.isExpandable).
   // This is because cell actions are not otherwise accessible to keyboard
@@ -82,8 +85,11 @@ var EuiDataGridCellActions = function EuiDataGridCellActions(_ref) {
       });
     });
   }, [column, colIndex, rowIndex]);
+  var classes = (0, _classnames.default)('euiDataGridRowCell__actions', {
+    'euiDataGridRowCell__actions--overlay': cellHeightType !== 'default'
+  });
   return (0, _react2.jsx)("div", {
-    className: "euiDataGridRowCell__expandActions"
+    className: classes
   }, [].concat(_toConsumableArray(additionalButtons), [expandButton]));
 };
 exports.EuiDataGridCellActions = EuiDataGridCellActions;

package/lib/components/datagrid/body/data_grid_row_manager.js

@@ -5,14 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useRowManager = void 0;
 var _react = require("react");
-/*
- * 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 _services = require("../../../services");
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } /*
+                                                                                                                                                                                     * 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 useRowManager = function useRowManager(_ref) {
   var innerGridRef = _ref.innerGridRef,
     rowClasses = _ref.rowClasses;
@@ -26,14 +31,12 @@ var useRowManager = function useRowManager(_ref) {
     if (rowElement == null) {
       rowElement = document.createElement('div');
       rowElement.setAttribute('role', 'row');
-      rowElement.dataset.gridRowIndex = String(rowIndex); // Row index from data, affected by sorting/pagination
-      rowElement.dataset.gridVisibleRowIndex = String(visibleRowIndex); // Affected by sorting/pagination
+      rowElement.dataset.gridRowIndex = String(rowIndex); // Row index from data, not affected by sorting/pagination
       rowElement.classList.add('euiDataGridRow');
       if (rowClasses !== null && rowClasses !== void 0 && rowClasses[rowIndex]) {
-        rowElement.classList.add(rowClasses[rowIndex]);
+        var _rowElement$classList;
+        (_rowElement$classList = rowElement.classList).add.apply(_rowElement$classList, _toConsumableArray(rowClasses[rowIndex].split(' ')));
       }
-      var isOddRow = visibleRowIndex % 2 !== 0;
-      if (isOddRow) rowElement.classList.add('euiDataGridRow--striped');
       rowElement.style.position = 'absolute';
       rowElement.style.left = '0';
       rowElement.style.right = '0';
@@ -62,6 +65,17 @@ var useRowManager = function useRowManager(_ref) {
       });
     }
 
+    // Ensure the row's visible row index & striping update correctly on sort & pagination
+    if (rowElement.dataset.gridVisibleRowIndex !== String(visibleRowIndex)) {
+      rowElement.dataset.gridVisibleRowIndex = String(visibleRowIndex);
+      var isOddRow = visibleRowIndex % 2 !== 0;
+      if (isOddRow) {
+        rowElement.classList.add('euiDataGridRow--striped');
+      } else {
+        rowElement.classList.remove('euiDataGridRow--striped');
+      }
+    }
+
     // Ensure that the row's dimensions are always correct by having each cell update position styles
     rowElement.style.top = top;
     rowElement.style.height = "".concat(height, "px");
@@ -69,13 +83,16 @@ var useRowManager = function useRowManager(_ref) {
   }, [rowClasses, innerGridRef]);
 
   // Update row classes dynamically whenever a new prop is passed in
-  (0, _react.useEffect)(function () {
+  (0, _services.useUpdateEffect)(function () {
     if (rowClasses) {
       rowIdToElements.current.forEach(function (rowElement, rowIndex) {
+        var euiClasses = Array.from(rowElement.classList).filter(function (className) {
+          return className.startsWith('euiDataGridRow');
+        }).join(' ');
         if (rowClasses[rowIndex]) {
-          rowElement.classList.value = "euiDataGridRow ".concat(rowClasses[rowIndex]);
+          rowElement.classList.value = "".concat(euiClasses, " ").concat(rowClasses[rowIndex]);
         } else {
-          rowElement.classList.value = 'euiDataGridRow'; // Clear any added classes
+          rowElement.classList.value = euiClasses; // Clear any added classes
         }
       });
     }