@elastic/eui 97.2.0 → 97.3.0

package/lib/components/datagrid/controls/display_selector.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDataGridDisplaySelector = exports.startingStyles = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _global_styling = require("../../../global_styling");
 var _services = require("../../../services");
 var _i18n = require("../../i18n");
@@ -18,6 +19,7 @@ var _data_grid_toolbar = require("./data_grid_toolbar");
 var _react2 = require("@emotion/react");
 var _excluded = ["onChange"],
   _excluded2 = ["onChange"];
+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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
@@ -27,13 +29,14 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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)."; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 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; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); } /*
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /*
  * 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
@@ -50,8 +53,12 @@ var startingStyles = exports.startingStyles = {
   footer: 'overline',
   stickyFooter: true
 };
+var emptyRowHeightsOptions = {};
+
+/**
+ * Cell density
+ */
 
-// These are the available options. They power the gridDensity hook and also the options in the render
 var densityOptions = ['compact', 'normal', 'expanded'];
 var densityStyles = {
   expanded: {
@@ -73,143 +80,274 @@ var convertGridStylesToSelection = function convertGridStylesToSelection(gridSty
   if (gridStyles.fontSize === 'l' && gridStyles.cellPadding === 'l') return 'expanded';
   return '';
 };
+var DensityControl = function DensityControl(_ref) {
+  var gridStyles = _ref.gridStyles,
+    onChange = _ref.onChange;
+  var getDensity = (0, _react.useMemo)(function () {
+    return convertGridStylesToSelection(gridStyles);
+  }, [gridStyles]);
+  var setDensity = (0, _react.useCallback)(function (density) {
+    onChange(densityStyles[density]);
+  }, [onChange]);
+  return (0, _react2.jsx)(_i18n.EuiI18n, {
+    tokens: ['euiDisplaySelector.densityLabel', 'euiDisplaySelector.labelCompact', 'euiDisplaySelector.labelNormal', 'euiDisplaySelector.labelExpanded'],
+    defaults: ['Density', 'Compact', 'Normal', 'Expanded']
+  }, function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 4),
+      densityLabel = _ref3[0],
+      labelCompact = _ref3[1],
+      labelNormal = _ref3[2],
+      labelExpanded = _ref3[3];
+    return (0, _react2.jsx)(_form.EuiFormRow, {
+      label: densityLabel,
+      display: "columnCompressed"
+    }, (0, _react2.jsx)(_button.EuiButtonGroup, {
+      legend: densityLabel,
+      buttonSize: "compressed",
+      isFullWidth: true,
+      options: [{
+        id: densityOptions[0],
+        label: labelCompact
+      }, {
+        id: densityOptions[1],
+        label: labelNormal
+      }, {
+        id: densityOptions[2],
+        label: labelExpanded
+      }],
+      onChange: setDensity,
+      idSelected: getDensity,
+      "data-test-subj": "densityButtonGroup"
+    }));
+  });
+};
 
-// Row height options and utilities
-var rowHeightButtonOptions = ['undefined', 'auto', 'lineCount'];
+/**
+ * Row heights
+ */
+
+var rowHeightSelectionOptions = ['auto', 'static'];
 var convertRowHeightsOptionsToSelection = function convertRowHeightsOptionsToSelection(rowHeightsOptions) {
   var defaultHeight = rowHeightsOptions.defaultHeight;
-  if (defaultHeight === 'auto') {
-    return rowHeightButtonOptions[1];
-  }
-  if (_typeof(defaultHeight) === 'object' && defaultHeight !== null && defaultHeight !== void 0 && defaultHeight.lineCount) {
-    return rowHeightButtonOptions[2];
-  }
+
+  // Custom pixel row height values don't have a corresponding UI element
   if (typeof defaultHeight === 'number' || _typeof(defaultHeight) === 'object' && defaultHeight.height) {
     return '';
   }
-  return rowHeightButtonOptions[0];
+  if (defaultHeight === 'auto') {
+    return rowHeightSelectionOptions[0];
+  }
+  return rowHeightSelectionOptions[1];
+};
+var _ref7 = process.env.NODE_ENV === "production" ? {
+  name: "ueqtrq-RowHeightControl",
+  styles: "flex-shrink:0;flex-basis:66.6%;label:RowHeightControl;"
+} : {
+  name: "ueqtrq-RowHeightControl",
+  styles: "flex-shrink:0;flex-basis:66.6%;label:RowHeightControl;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var defaultLineCountValue = String(2);
-var useDataGridDisplaySelector = exports.useDataGridDisplaySelector = function useDataGridDisplaySelector(showDisplaySelector, initialStyles, initialRowHeightsOptions) {
-  var _showDisplaySelector$, _rowHeightsOptions$de2;
-  var _useState = (0, _react.useState)(false),
+var RowHeightControl = function RowHeightControl(_ref4) {
+  var rowHeightsOptions = _ref4.rowHeightsOptions,
+    onChange = _ref4.onChange;
+  var autoBelowLineCount = rowHeightsOptions.autoBelowLineCount;
+  var _useState = (0, _react.useState)(1),
     _useState2 = _slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var showDensityControls = (0, _data_grid_toolbar.getNestedObjectOptions)(showDisplaySelector, 'allowDensity');
-  var showRowHeightControls = (0, _data_grid_toolbar.getNestedObjectOptions)(showDisplaySelector, 'allowRowHeight');
-  var allowResetButton = (0, _data_grid_toolbar.getNestedObjectOptions)(showDisplaySelector, 'allowResetButton');
-  var additionalDisplaySettings = typeof showDisplaySelector === 'boolean' ? null : (_showDisplaySelector$ = showDisplaySelector === null || showDisplaySelector === void 0 ? void 0 : showDisplaySelector.additionalDisplaySettings) !== null && _showDisplaySelector$ !== void 0 ? _showDisplaySelector$ : null;
-
-  // Track styles specified by the user at run time
-  var _useState3 = (0, _react.useState)({}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    userGridStyles = _useState4[0],
-    setUserGridStyles = _useState4[1];
-  var _useState5 = (0, _react.useState)({}),
-    _useState6 = _slicedToArray(_useState5, 2),
-    userRowHeightsOptions = _useState6[0],
-    setUserRowHeightsOptions = _useState6[1];
-
-  // Density logic
-  var setGridStyles = (0, _react.useCallback)(function (density) {
-    setUserGridStyles(densityStyles[density]);
-  }, []);
+    lineCountInput = _useState2[0],
+    setLineCountInput = _useState2[1];
+  var setLineCountHeight = (0, _react.useCallback)(function (event) {
+    var newLineCount = Number(event.currentTarget.value);
+    setLineCountInput(newLineCount);
+    onChange({
+      rowHeights: {},
+      // Unset all row-specific line counts
+      defaultHeight: newLineCount > 1 ? {
+        lineCount: newLineCount
+      } : undefined // lineCount: 1 is the same as undefined, and this helps correctly display the reset button
+    });
+  }, [onChange]);
+  (0, _react.useEffect)(function () {
+    var passedLineCount = _typeof(rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.defaultHeight) === 'object' ? rowHeightsOptions.defaultHeight.lineCount : undefined;
 
-  // Row height logic
-  var _useState7 = (0, _react.useState)(defaultLineCountValue),
-    _useState8 = _slicedToArray(_useState7, 2),
-    lineCountInput = _useState8[0],
-    setLineCountInput = _useState8[1];
+    // If lineCount updates come in from consumer changes, update the input to reflect that
+    if (passedLineCount) {
+      setLineCountInput(passedLineCount);
+    }
+    // If set back to undefined/single line height (typically from the reset button)
+    if ((rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.defaultHeight) === undefined) {
+      setLineCountInput(1);
+    }
+  }, [rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.defaultHeight]);
+  var rowHeightSelection = (0, _react.useMemo)(function () {
+    return convertRowHeightsOptionsToSelection(rowHeightsOptions);
+  }, [rowHeightsOptions]);
   var setRowHeight = (0, _react.useCallback)(function (option) {
     var rowHeightsOptions = {
       rowHeights: {} // Unset all row-specific heights
     };
-    if (option === 'auto') {
+    if (option === rowHeightSelectionOptions[0]) {
       rowHeightsOptions.defaultHeight = 'auto';
-    } else if (option === 'lineCount') {
-      rowHeightsOptions.defaultHeight = {
-        lineCount: Number(lineCountInput)
-      };
-    } else {
-      rowHeightsOptions.defaultHeight = undefined;
-    }
-    setUserRowHeightsOptions(rowHeightsOptions);
-  }, [lineCountInput]);
-  var setLineCountHeight = (0, _react.useCallback)(function (event) {
-    setLineCountInput(event.currentTarget.value);
-    var newLineCount = Number(event.currentTarget.value);
-
-    // Don't let users set a 0 or negative line count
-    if (newLineCount > 0) {
-      setUserRowHeightsOptions({
-        rowHeights: {},
-        // Unset all row-specific line counts
-        defaultHeight: {
-          lineCount: newLineCount
-        }
-      });
+    } else if (option === rowHeightSelectionOptions[1]) {
+      var lineCount = Number(lineCountInput);
+      if (lineCount > 1) {
+        rowHeightsOptions.defaultHeight = {
+          lineCount: lineCount
+        };
+      } else {
+        // lineCount: 1 is the same as single/undefined
+        rowHeightsOptions.defaultHeight = undefined;
+      }
     }
-  }, []);
+    onChange(rowHeightsOptions);
+  }, [lineCountInput, onChange]);
+  return (0, _react2.jsx)(_i18n.EuiI18n, {
+    tokens: ['euiDisplaySelector.rowHeightLabel', 'euiDisplaySelector.labelAuto', 'euiDisplaySelector.labelStatic', 'euiDisplaySelector.labelMax'],
+    defaults: ['Lines per row', 'Auto', 'Static', 'Max']
+  }, function (_ref5) {
+    var _ref6 = _slicedToArray(_ref5, 4),
+      rowHeightLabel = _ref6[0],
+      labelAuto = _ref6[1],
+      labelStatic = _ref6[2],
+      labelMax = _ref6[3];
+    return (0, _react2.jsx)(_form.EuiFormRow, {
+      label: rowHeightLabel,
+      display: "columnCompressed"
+    }, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+      gutterSize: "s",
+      responsive: false
+    }, (0, _react2.jsx)(_button.EuiButtonGroup, {
+      legend: rowHeightLabel,
+      css: _ref7,
+      buttonSize: "compressed",
+      isFullWidth: true,
+      options: [{
+        id: rowHeightSelectionOptions[0],
+        label: labelAuto
+      }, {
+        id: rowHeightSelectionOptions[1],
+        label: autoBelowLineCount ? labelMax : labelStatic
+      }],
+      onChange: setRowHeight,
+      idSelected: rowHeightSelection,
+      "data-test-subj": "rowHeightButtonGroup"
+    }), (0, _react2.jsx)(_form.EuiFieldNumber, {
+      "aria-label": rowHeightLabel,
+      compressed: true,
+      min: 1,
+      max: 20,
+      disabled: rowHeightSelection !== rowHeightSelectionOptions[1],
+      value: lineCountInput,
+      onChange: setLineCountHeight,
+      "data-test-subj": "lineCountNumber"
+    })));
+  });
+};
 
-  // Merge the developer-specified configurations with user overrides
-  var gridStyles = (0, _react.useMemo)(function () {
-    return _objectSpread(_objectSpread({}, initialStyles), userGridStyles);
-  }, [initialStyles, userGridStyles]);
-  var rowHeightsOptions = (0, _react.useMemo)(function () {
-    return _objectSpread(_objectSpread({}, initialRowHeightsOptions), userRowHeightsOptions);
-  }, [initialRowHeightsOptions, userRowHeightsOptions]);
+/**
+ * Display settings/selector popover
+ */
 
-  // Set UI controls based on current configurations, on init & when either developer or user settings change
-  var gridDensity = (0, _react.useMemo)(function () {
-    return convertGridStylesToSelection(gridStyles);
-  }, [gridStyles]);
-  var rowHeightSelection = (0, _react.useMemo)(function () {
-    return convertRowHeightsOptionsToSelection(rowHeightsOptions);
-  }, [rowHeightsOptions]);
-  (0, _react.useEffect)(function () {
-    var _rowHeightsOptions$de;
-    setLineCountInput(
-    // @ts-ignore - optional chaining operator handles types & cases that aren't lineCount
-    (rowHeightsOptions === null || rowHeightsOptions === void 0 || (_rowHeightsOptions$de = rowHeightsOptions.defaultHeight) === null || _rowHeightsOptions$de === void 0 ? void 0 : _rowHeightsOptions$de.lineCount) || defaultLineCountValue);
-    // @ts-ignore - same as above
-  }, [rowHeightsOptions === null || rowHeightsOptions === void 0 || (_rowHeightsOptions$de2 = rowHeightsOptions.defaultHeight) === null || _rowHeightsOptions$de2 === void 0 ? void 0 : _rowHeightsOptions$de2.lineCount]);
+var useDataGridDisplaySelector = exports.useDataGridDisplaySelector = function useDataGridDisplaySelector(showDisplaySelector, passedGridStyles) {
+  var _showDisplaySelector$;
+  var passedRowHeightsOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : emptyRowHeightsOptions;
+  /**
+   * Grid style changes
+   */
+  var _useState3 = (0, _react.useState)(passedGridStyles),
+    _useState4 = _slicedToArray(_useState3, 2),
+    gridStyles = _useState4[0],
+    setGridStyles = _useState4[1];
 
-  // Show a reset button whenever users manually change settings, and
-  // invoke onChange callbacks (removing the callback value itself, so that only configuration values are returned)
-  var _useState9 = (0, _react.useState)(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    showResetButton = _useState10[0],
-    setShowResetButton = _useState10[1];
+  // Update if consumers pass new grid style configurations
+  var stablePassedGridStyles = (0, _services.useDeepEqual)(passedGridStyles);
   (0, _services.useUpdateEffect)(function () {
-    var _initialStyles$onChan;
-    if (allowResetButton) {
-      var hasUserChanges = Object.keys(userGridStyles).length > 0;
-      if (hasUserChanges) setShowResetButton(true);
-    }
-    var onChange = gridStyles.onChange,
-      currentGridStyles = _objectWithoutProperties(gridStyles, _excluded);
-    initialStyles === null || initialStyles === void 0 || (_initialStyles$onChan = initialStyles.onChange) === null || _initialStyles$onChan === void 0 || _initialStyles$onChan.call(initialStyles, currentGridStyles);
-  }, [userGridStyles, allowResetButton]);
+    setGridStyles(stablePassedGridStyles);
+  }, [stablePassedGridStyles]);
+
+  // Update on user display selector change
+  var onUserGridStyleChange = (0, _react.useCallback)(function (styles) {
+    return setGridStyles(function (prevStyles) {
+      var changedStyles = _objectSpread(_objectSpread({}, prevStyles), styles);
+      var onChange = changedStyles.onChange,
+        rest = _objectWithoutProperties(changedStyles, _excluded);
+      onChange === null || onChange === void 0 || onChange(rest);
+      return changedStyles;
+    });
+  }, []);
+  var densityControl = (0, _react.useMemo)(function () {
+    var show = (0, _data_grid_toolbar.getNestedObjectOptions)(showDisplaySelector, 'allowDensity');
+    return show ? (0, _react2.jsx)(DensityControl, {
+      gridStyles: gridStyles,
+      onChange: onUserGridStyleChange
+    }) : null;
+  }, [showDisplaySelector, gridStyles, onUserGridStyleChange]);
+
+  /**
+   * Row height changes
+   */
+  var _useState5 = (0, _react.useState)(passedRowHeightsOptions),
+    _useState6 = _slicedToArray(_useState5, 2),
+    rowHeightsOptions = _useState6[0],
+    setRowHeightsOptions = _useState6[1];
+
+  // Update if consumers pass new row height configurations
+  var stablePassedRowHeights = (0, _services.useDeepEqual)(passedRowHeightsOptions);
   (0, _services.useUpdateEffect)(function () {
-    var _initialRowHeightsOpt;
-    if (allowResetButton) {
-      var hasUserChanges = Object.keys(userRowHeightsOptions).length > 0;
-      if (hasUserChanges) setShowResetButton(true);
-    }
-    var onChange = rowHeightsOptions.onChange,
-      currentRowHeightsOptions = _objectWithoutProperties(rowHeightsOptions, _excluded2);
-    initialRowHeightsOptions === null || initialRowHeightsOptions === void 0 || (_initialRowHeightsOpt = initialRowHeightsOptions.onChange) === null || _initialRowHeightsOpt === void 0 || _initialRowHeightsOpt.call(initialRowHeightsOptions, currentRowHeightsOptions);
-  }, [userRowHeightsOptions, allowResetButton]);
+    setRowHeightsOptions(stablePassedRowHeights);
+  }, [stablePassedRowHeights]);
 
-  // Allow resetting to initial developer-specified configurations
+  // Update on user display selector change
+  var onUserRowHeightChange = (0, _react.useCallback)(function (options) {
+    return setRowHeightsOptions(function (prevOptions) {
+      var changedOptions = _objectSpread(_objectSpread({}, prevOptions), options);
+      var onChange = changedOptions.onChange,
+        rest = _objectWithoutProperties(changedOptions, _excluded2);
+      onChange === null || onChange === void 0 || onChange(rest);
+      return changedOptions;
+    });
+  }, []);
+  var rowHeightControl = (0, _react.useMemo)(function () {
+    var show = (0, _data_grid_toolbar.getNestedObjectOptions)(showDisplaySelector, 'allowRowHeight');
+    return show ? (0, _react2.jsx)(RowHeightControl, {
+      rowHeightsOptions: rowHeightsOptions,
+      onChange: onUserRowHeightChange
+    }) : null;
+  }, [showDisplaySelector, rowHeightsOptions, onUserRowHeightChange]);
+
+  /**
+   * Reset button
+   */
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    showResetButton = _useState8[0],
+    setShowResetButton = _useState8[1];
+  var initialGridStyles = (0, _react.useRef)(passedGridStyles);
+  var initialRowHeightsOptions = (0, _react.useRef)(passedRowHeightsOptions);
   var resetToInitialState = (0, _react.useCallback)(function () {
-    setUserGridStyles({});
-    setUserRowHeightsOptions({});
-    setShowResetButton(false);
+    setGridStyles(initialGridStyles.current);
+    setRowHeightsOptions(initialRowHeightsOptions.current);
   }, []);
+  (0, _services.useUpdateEffect)(function () {
+    setShowResetButton(!(0, _isEqual.default)(rowHeightsOptions.defaultHeight, initialRowHeightsOptions.current.defaultHeight) || gridStyles.fontSize !== initialGridStyles.current.fontSize || gridStyles.cellPadding !== initialGridStyles.current.cellPadding);
+  }, [rowHeightsOptions.defaultHeight, gridStyles.fontSize, gridStyles.cellPadding]);
+  var resetButton = (0, _react.useMemo)(function () {
+    var allowed = (0, _data_grid_toolbar.getNestedObjectOptions)(showDisplaySelector, 'allowResetButton');
+    if (!allowed || !showResetButton) return null;
+    return (0, _react2.jsx)(ResetButton, {
+      onClick: resetToInitialState
+    });
+  }, [showDisplaySelector, showResetButton, resetToInitialState]);
+
+  /**
+   * Display settings popover
+   */
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isOpen = _useState10[0],
+    setIsOpen = _useState10[1];
   var buttonLabel = (0, _i18n.useEuiI18n)('euiDisplaySelector.buttonText', 'Display options');
-  var resetButtonLabel = (0, _i18n.useEuiI18n)('euiDisplaySelector.resetButtonText', 'Reset to default');
+  var additionalDisplaySettings = typeof showDisplaySelector === 'boolean' ? null : (_showDisplaySelector$ = showDisplaySelector === null || showDisplaySelector === void 0 ? void 0 : showDisplaySelector.additionalDisplaySettings) !== null && _showDisplaySelector$ !== void 0 ? _showDisplaySelector$ : null;
+  var customRender = typeof showDisplaySelector === 'boolean' ? undefined : showDisplaySelector === null || showDisplaySelector === void 0 ? void 0 : showDisplaySelector.customRender;
   var euiTheme = (0, _services.useEuiTheme)();
   var displaySelector = (0, _react.useMemo)(function () {
     var paddingSize = 's';
@@ -217,7 +355,7 @@ var useDataGridDisplaySelector = exports.useDataGridDisplaySelector = function u
     var popoverWidth = (0, _global_styling.mathWithUnits)([formMaxWidth, euiTheme.euiTheme.size[paddingSize]], function (x, y) {
       return x + y * 2;
     });
-    return showDensityControls || showRowHeightControls || additionalDisplaySettings ? (0, _react2.jsx)(_popover.EuiPopover, {
+    return densityControl || rowHeightControl || additionalDisplaySettings ? (0, _react2.jsx)(_popover.EuiPopover, {
       "data-test-subj": "dataGridDisplaySelectorPopover",
       isOpen: isOpen,
       closePopover: function closePopover() {
@@ -242,92 +380,25 @@ var useDataGridDisplaySelector = exports.useDataGridDisplaySelector = function u
         },
         "aria-label": buttonLabel
       }))
-    }, showDensityControls && (0, _react2.jsx)(_i18n.EuiI18n, {
-      tokens: ['euiDisplaySelector.densityLabel', 'euiDisplaySelector.labelCompact', 'euiDisplaySelector.labelNormal', 'euiDisplaySelector.labelExpanded'],
-      defaults: ['Density', 'Compact', 'Normal', 'Expanded']
-    }, function (_ref) {
-      var _ref2 = _slicedToArray(_ref, 4),
-        densityLabel = _ref2[0],
-        labelCompact = _ref2[1],
-        labelNormal = _ref2[2],
-        labelExpanded = _ref2[3];
-      return (0, _react2.jsx)(_form.EuiFormRow, {
-        label: densityLabel,
-        display: "columnCompressed"
-      }, (0, _react2.jsx)(_button.EuiButtonGroup, {
-        legend: densityLabel,
-        buttonSize: "compressed",
-        isFullWidth: true,
-        options: [{
-          id: densityOptions[0],
-          label: labelCompact
-        }, {
-          id: densityOptions[1],
-          label: labelNormal
-        }, {
-          id: densityOptions[2],
-          label: labelExpanded
-        }],
-        onChange: setGridStyles,
-        idSelected: gridDensity,
-        "data-test-subj": "densityButtonGroup"
-      }));
-    }), showRowHeightControls && (0, _react2.jsx)(_i18n.EuiI18n, {
-      tokens: ['euiDisplaySelector.rowHeightLabel', 'euiDisplaySelector.labelSingle', 'euiDisplaySelector.labelAuto', 'euiDisplaySelector.labelCustom', 'euiDisplaySelector.lineCountLabel'],
-      defaults: ['Row height', 'Single', 'Auto fit', 'Custom', 'Lines per row']
-    }, function (_ref3) {
-      var _ref4 = _slicedToArray(_ref3, 5),
-        rowHeightLabel = _ref4[0],
-        labelSingle = _ref4[1],
-        labelAuto = _ref4[2],
-        labelCustom = _ref4[3],
-        lineCountLabel = _ref4[4];
-      return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_form.EuiFormRow, {
-        label: rowHeightLabel,
-        display: "columnCompressed"
-      }, (0, _react2.jsx)(_button.EuiButtonGroup, {
-        legend: rowHeightLabel,
-        buttonSize: "compressed",
-        isFullWidth: true,
-        options: [{
-          id: rowHeightButtonOptions[0],
-          label: labelSingle
-        }, {
-          id: rowHeightButtonOptions[1],
-          label: labelAuto
-        }, {
-          id: rowHeightButtonOptions[2],
-          label: labelCustom
-        }],
-        onChange: setRowHeight,
-        idSelected: rowHeightSelection,
-        "data-test-subj": "rowHeightButtonGroup"
-      })), rowHeightSelection === rowHeightButtonOptions[2] && (0, _react2.jsx)(_form.EuiFormRow, {
-        label: lineCountLabel,
-        display: "columnCompressed"
-      }, (0, _react2.jsx)(_form.EuiRange, {
-        compressed: true,
-        fullWidth: true,
-        showInput: true,
-        min: 1,
-        max: 20,
-        step: 1,
-        required: true,
-        value: lineCountInput,
-        onChange: setLineCountHeight,
-        "data-test-subj": "lineCountNumber"
-      })));
-    }), additionalDisplaySettings, showResetButton && (0, _react2.jsx)(_popover.EuiPopoverFooter, null, (0, _react2.jsx)(_flex.EuiFlexGroup, {
-      justifyContent: "flexEnd",
-      responsive: false
-    }, (0, _react2.jsx)(_flex.EuiFlexItem, {
-      grow: false
-    }, (0, _react2.jsx)("div", null, (0, _react2.jsx)(_button.EuiButtonEmpty, {
-      flush: "both",
-      size: "xs",
-      onClick: resetToInitialState,
-      "data-test-subj": "resetDisplaySelector"
-    }, resetButtonLabel)))))) : null;
-  }, [euiTheme, additionalDisplaySettings, buttonLabel, isOpen, resetButtonLabel, showDensityControls, showResetButton, showRowHeightControls, gridDensity, rowHeightSelection, lineCountInput, setGridStyles, setRowHeight, setLineCountHeight, resetToInitialState]);
+    }, customRender ? customRender({
+      densityControl: densityControl,
+      rowHeightControl: rowHeightControl,
+      additionalDisplaySettings: additionalDisplaySettings,
+      resetButton: resetButton
+    }) : (0, _react2.jsx)(_react.default.Fragment, null, densityControl, rowHeightControl, additionalDisplaySettings, resetButton)) : null;
+  }, [euiTheme, densityControl, rowHeightControl, additionalDisplaySettings, resetButton, customRender, buttonLabel, isOpen]);
   return [displaySelector, gridStyles, rowHeightsOptions];
+};
+var ResetButton = function ResetButton(_ref8) {
+  var onClick = _ref8.onClick;
+  var resetButtonLabel = (0, _i18n.useEuiI18n)('euiDisplaySelector.resetButtonText', 'Reset to default');
+  return (0, _react2.jsx)(_popover.EuiPopoverFooter, null, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+    justifyContent: "flexEnd",
+    responsive: false
+  }, (0, _react2.jsx)(_button.EuiButtonEmpty, {
+    flush: "both",
+    size: "xs",
+    onClick: onClick,
+    "data-test-subj": "resetDisplaySelector"
+  }, resetButtonLabel)));
 };

package/lib/components/datagrid/data_grid.stories.utils.js

@@ -1063,7 +1063,12 @@ EuiDataGridToolbarPropsComponent.propTypes = {
       /**
          * Allows appending additional content to the bottom of the display settings popover
          */
-      additionalDisplaySettings: _propTypes.default.node
+      additionalDisplaySettings: _propTypes.default.node,
+      /**
+         * Allows completely custom rendering of the display selector popover via render prop.
+         * Passes back the default controls as arguments for optional rendering.
+         */
+      customRender: _propTypes.default.func
     }).isRequired]),
     /**
        * Allows the ability for the user to sort rows based upon column values
@@ -1214,6 +1219,14 @@ EuiDataGridToolbarPropsComponent.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.
        *
@@ -1273,7 +1286,12 @@ EuiDataGridToolbarPropsComponent.propTypes = {
     /**
        * Allows appending additional content to the bottom of the display settings popover
        */
-    additionalDisplaySettings: _propTypes.default.node
+    additionalDisplaySettings: _propTypes.default.node,
+    /**
+       * Allows completely custom rendering of the display selector popover via render prop.
+       * Passes back the default controls as arguments for optional rendering.
+       */
+    customRender: _propTypes.default.func
   }).isRequired]),
   /**
      * Allows the ability for the user to sort rows based upon column values
@@ -1403,6 +1421,14 @@ EuiDataGridRowHeightsPropsComponent.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/data_grid.styles.js

@@ -53,7 +53,7 @@ var euiDataGridStyles = exports.euiDataGridStyles = function euiDataGridStyles(e
     euiDataGrid: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;align-items:stretch;", (0, _global_styling.logicalCSS)('height', '100%'), " overflow:hidden;*:where(& .euiDataGridRow){background-color:", euiTheme.colors.emptyShade, ";}*:where(&.euiDataGrid--stripes .euiDataGridRow--striped){background-color:", euiTheme.colors.lightestShade, ";}*:where(&.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover){background-color:", euiTheme.colors.highlight, ";};label:euiDataGrid;"),
     cellPadding: {
       cellPadding: function cellPadding(size) {
-        return /*#__PURE__*/(0, _react.css)(".euiDataGridHeaderCell,.euiDataGridRowCell__content{padding:", _cellPadding[size], ";}/* Workaround to trim line-clamp and padding - @see https://github.com/elastic/eui/issues/7780 */.euiDataGridRowCell__content--lineCountHeight{", (0, _global_styling.logicalCSS)('padding-bottom', 0), " ", (0, _global_styling.logicalCSS)('border-bottom', "".concat(_cellPadding[size], " solid transparent")), ";}.euiDataGridHeaderCell__button{margin-block:-", _cellPadding[size], ";};label:cellPadding;");
+        return /*#__PURE__*/(0, _react.css)(".euiDataGridHeaderCell,.euiDataGridRowCell__content{padding:", _cellPadding[size], ";}/* Workaround to trim line-clamp and padding - @see https://github.com/elastic/eui/issues/7780 */.euiDataGridRowCell__content--lineCountHeight,.euiDataGridRowCell__content--autoBelowLineCountHeight{", (0, _global_styling.logicalCSS)('padding-bottom', 0), " ", (0, _global_styling.logicalCSS)('border-bottom', "".concat(_cellPadding[size], " solid transparent")), ";}.euiDataGridHeaderCell__button{margin-block:-", _cellPadding[size], ";};label:cellPadding;");
       },
       get s() {
         return /*#__PURE__*/(0, _react.css)(this.cellPadding('s'), ";label:s;");

package/lib/components/datagrid/utils/grid_height_width.js

@@ -111,7 +111,7 @@ var useUnconstrainedHeight = exports.useUnconstrainedHeight = function useUncons
       if (rowHeightOption) {
         // this row's height is known
         knownRowCount++;
-        knownHeight += rowHeightUtils.getCalculatedHeight(rowHeightOption, defaultRowHeight, correctRowIndex, rowHeightUtils.isRowHeightOverride(correctRowIndex, rowHeightsOptions));
+        knownHeight += rowHeightUtils.getCalculatedHeight(rowHeightOption, defaultRowHeight, correctRowIndex, rowHeightsOptions);
       }
     }