@elastic/eui 97.2.0 → 97.3.0

package/lib/components/datagrid/body/cell/data_grid_cell.js

@@ -21,7 +21,7 @@ var _data_grid_cell_popover = require("./data_grid_cell_popover");
 var _focus_utils = require("./focus_utils");
 var _data_grid_cell = require("./data_grid_cell.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["renderCellValue", "cellContext", "column", "setCellContentsRef", "rowIndex", "colIndex", "rowHeight", "rowHeightUtils", "isControlColumn"],
+var _excluded = ["renderCellValue", "cellContext", "column", "setCellContentsRef", "rowIndex", "colIndex", "rowHeightsOptions", "rowHeightUtils", "isControlColumn"],
   _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager", "pagination"],
   _excluded3 = ["isExpandable", "style", "className", "data-test-subj"],
   _excluded4 = ["columnId", "columnIndex", "rowIndex", "visibleRowIndex"];
@@ -66,15 +66,20 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     setCellContentsRef = _ref.setCellContentsRef,
     rowIndex = _ref.rowIndex,
     colIndex = _ref.colIndex,
-    rowHeight = _ref.rowHeight,
+    rowHeightsOptions = _ref.rowHeightsOptions,
     rowHeightUtils = _ref.rowHeightUtils,
     isControlColumn = _ref.isControlColumn,
     rest = _objectWithoutProperties(_ref, _excluded);
   // React is more permissive than the TS types indicate
   var CellElement = renderCellValue;
+
+  // Cell height type
+  var rowHeight = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions);
   var cellHeightType = (0, _react.useMemo)(function () {
-    return (rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getHeightType(rowHeight)) || 'default';
-  }, [rowHeightUtils, rowHeight]);
+    return rowHeightUtils !== null && rowHeightUtils !== void 0 && rowHeightUtils.isAutoBelowLineCount(rowHeightsOptions, rowHeight) ? 'autoBelowLineCount' : (rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getHeightType(rowHeight)) || 'default';
+  }, [rowHeightUtils, rowHeight, rowHeightsOptions]);
+
+  // Classes and styles
   var classes = (0, _react.useMemo)(function () {
     return (0, _classnames.default)('euiDataGridRowCell__content', "euiDataGridRowCell__content--".concat(cellHeightType, "Height"), !isControlColumn && {
       'eui-textBreakWord': cellHeightType !== 'default',
@@ -85,9 +90,9 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var cssStyles = [styles.content.euiDataGridRowCell__content].concat(_toConsumableArray(isControlColumn ? [styles.content.controlColumn, styles.content.autoHeight] : [
   // Regular data cells should always inherit height from the row wrapper,
   // except for auto height
-  cellHeightType === 'auto' ? styles.content.autoHeight : styles.content.defaultHeight]));
+  cellHeightType === 'auto' || cellHeightType === 'autoBelowLineCount' ? styles.content.autoHeight : styles.content.defaultHeight]));
   return (0, _react2.jsx)(RenderTruncatedCellContent, {
-    hasLineCountTruncation: cellHeightType === 'lineCount' && !isControlColumn,
+    hasLineCountTruncation: (cellHeightType === 'lineCount' || cellHeightType === 'autoBelowLineCount') && !isControlColumn,
     rowHeight: rowHeight
   }, (0, _react2.jsx)("div", {
     ref: setCellContentsRef,
@@ -520,6 +525,14 @@ EuiDataGridCellContent.propTypes = {
       lineCount: _propTypes.default.number,
       height: _propTypes.default.number
     }).isRequired]),
+    /**
+       * Feature flag for custom `lineCount` behavior, where `lineCount` acts like a
+       * *max* number of lines (instead of a set number of lines for all rows).
+       *
+       * This functionality is in beta and has performance implications;
+       * we do not yet fully recommend/support it for heavy production usage.
+       */
+    autoBelowLineCount: _propTypes.default.bool,
     /**
        * Defines the height for a specific row. It can be line count or just height.
        *
@@ -660,6 +673,9 @@ var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Componen
         rowHeightsOptions = _this$props3.rowHeightsOptions,
         rowIndex = _this$props3.rowIndex;
       var rowHeightOption = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions);
+      if (rowHeightUtils !== null && rowHeightUtils !== void 0 && rowHeightUtils.isAutoBelowLineCount(rowHeightsOptions, rowHeightOption)) {
+        return; // Using auto height instead
+      }
       var isSingleLine = rowHeightOption == null; // Undefined rowHeightsOptions default to a single line
       var lineCount = isSingleLine ? 1 : rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getLineCount(rowHeightOption);
       if (lineCount) {
@@ -964,7 +980,6 @@ var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Componen
         // column width, can be undefined
         lineHeight: (_rowHeightsOptions$li = rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.lineHeight) !== null && _rowHeightsOptions$li !== void 0 ? _rowHeightsOptions$li : undefined
       }, cellPropsStyle);
-      var rowHeight = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions);
       var row = rowManager && !_utils.IS_JEST_ENVIRONMENT ? rowManager.getRow({
         rowIndex: rowIndex,
         visibleRowIndex: visibleRowIndex,
@@ -996,7 +1011,7 @@ var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Componen
         isExpandable: isExpandable,
         isExpanded: popoverIsOpen,
         setCellContentsRef: this.setCellContentsRef,
-        rowHeight: rowHeight,
+        rowHeightsOptions: rowHeightsOptions,
         rowHeightUtils: rowHeightUtils,
         isControlColumn: isControlColumn,
         rowIndex: rowIndex,
@@ -1380,6 +1395,14 @@ EuiDataGridCell.propTypes = {
       lineCount: _propTypes.default.number,
       height: _propTypes.default.number
     }).isRequired]),
+    /**
+       * Feature flag for custom `lineCount` behavior, where `lineCount` acts like a
+       * *max* number of lines (instead of a set number of lines for all rows).
+       *
+       * This functionality is in beta and has performance implications;
+       * we do not yet fully recommend/support it for heavy production usage.
+       */
+    autoBelowLineCount: _propTypes.default.bool,
     /**
        * Defines the height for a specific row. It can be line count or just height.
        *

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

@@ -579,6 +579,14 @@ EuiDataGridBody.propTypes = {
       lineCount: _propTypes.default.number,
       height: _propTypes.default.number
     }).isRequired]),
+    /**
+       * Feature flag for custom `lineCount` behavior, where `lineCount` acts like a
+       * *max* number of lines (instead of a set number of lines for all rows).
+       *
+       * This functionality is in beta and has performance implications;
+       * we do not yet fully recommend/support it for heavy production usage.
+       */
+    autoBelowLineCount: _propTypes.default.bool,
     /**
        * Defines the height for a specific row. It can be line count or just height.
        *

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

@@ -90,7 +90,6 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = /*#__PUR
    */
   var rowHeightUtils = (0, _row_heights.useRowHeightUtils)({
     rowHeightsOptions: rowHeightsOptions,
-    gridStyles: gridStyles,
     columns: columns
   });
   var _useDefaultRowHeight = (0, _row_heights.useDefaultRowHeight)({
@@ -745,6 +744,14 @@ EuiDataGridBodyCustomRender.propTypes = {
       lineCount: _propTypes.default.number,
       height: _propTypes.default.number
     }).isRequired]),
+    /**
+       * Feature flag for custom `lineCount` behavior, where `lineCount` acts like a
+       * *max* number of lines (instead of a set number of lines for all rows).
+       *
+       * This functionality is in beta and has performance implications;
+       * we do not yet fully recommend/support it for heavy production usage.
+       */
+    autoBelowLineCount: _propTypes.default.bool,
     /**
        * Defines the height for a specific row. It can be line count or just height.
        *

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

@@ -223,7 +223,6 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
       gridItemsRenderedRef: gridItemsRendered
     },
     rowHeightsOptions: rowHeightsOptions,
-    gridStyles: gridStyles,
     columns: columns
   });
   var _useDefaultRowHeight = (0, _row_heights.useDefaultRowHeight)({
@@ -870,6 +869,14 @@ EuiDataGridBodyVirtualized.propTypes = {
       lineCount: _propTypes.default.number,
       height: _propTypes.default.number
     }).isRequired]),
+    /**
+       * Feature flag for custom `lineCount` behavior, where `lineCount` acts like a
+       * *max* number of lines (instead of a set number of lines for all rows).
+       *
+       * This functionality is in beta and has performance implications;
+       * we do not yet fully recommend/support it for heavy production usage.
+       */
+    autoBelowLineCount: _propTypes.default.bool,
     /**
        * Defines the height for a specific row. It can be line count or just height.
        *

package/lib/components/datagrid/controls/data_grid_toolbar.styles.js

@@ -18,7 +18,7 @@ var euiDataGridToolbarStyles = exports.euiDataGridToolbarStyles = function euiDa
   var euiTheme = _ref.euiTheme;
   return {
     euiDataGrid__controls: /*#__PURE__*/(0, _react.css)("z-index:2;position:relative;display:flex;justify-content:space-between;align-items:center;gap:", euiTheme.size.base, ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xs), " background-color:", euiTheme.colors.emptyShade, ";;label:euiDataGrid__controls;"),
-    euiDataGrid__rightControls: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:flex-end;flex-wrap:wrap;column-gap:", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.xs), "&:only-child{", (0, _global_styling.logicalCSS)('margin-left', 'auto'), ";};label:euiDataGrid__rightControls;"),
-    euiDataGrid__leftControls: /*#__PURE__*/(0, _react.css)("display:flex;flex-wrap:wrap;gap:", euiTheme.size.xxs, ";;label:euiDataGrid__leftControls;")
+    euiDataGrid__rightControls: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;column-gap:", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.xs), "&:only-child{", (0, _global_styling.logicalCSS)('margin-left', 'auto'), ";};label:euiDataGrid__rightControls;"),
+    euiDataGrid__leftControls: /*#__PURE__*/(0, _react.css)("display:flex;flex-wrap:wrap;align-items:center;gap:", euiTheme.size.xxs, ";;label:euiDataGrid__leftControls;")
   };
 };