@elastic/eui 97.2.0 → 97.3.0

package/optimize/es/components/datagrid/controls/display_selector.js

@@ -1,11 +1,12 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _typeof from "@babel/runtime/helpers/typeof";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["onChange"],
   _excluded2 = ["onChange"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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)."; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -14,15 +15,16 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Side Public License, v 1.
  */
 
-import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import React, { useState, useMemo, useCallback, useEffect, useRef } from 'react';
+import isEqual from 'lodash/isEqual';
 import { logicalStyle, mathWithUnits } from '../../../global_styling';
-import { useUpdateEffect, useEuiTheme } from '../../../services';
+import { useUpdateEffect, useDeepEqual, useEuiTheme } from '../../../services';
 import { EuiI18n, useEuiI18n } from '../../i18n';
 import { EuiPopover, EuiPopoverFooter } from '../../popover';
 import { EuiButtonIcon, EuiButtonGroup, EuiButtonEmpty } from '../../button';
-import { EuiFormRow, EuiRange } from '../../form';
+import { EuiFormRow, EuiFieldNumber } from '../../form';
 import { euiFormMaxWidth } from '../../form/form.styles';
-import { EuiFlexGroup, EuiFlexItem } from '../../flex';
+import { EuiFlexGroup } from '../../flex';
 import { EuiToolTip } from '../../tool_tip';
 import { getNestedObjectOptions } from './data_grid_toolbar';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -36,8 +38,12 @@ export var 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: {
@@ -59,143 +65,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 = useMemo(function () {
+    return convertGridStylesToSelection(gridStyles);
+  }, [gridStyles]);
+  var setDensity = useCallback(function (density) {
+    onChange(densityStyles[density]);
+  }, [onChange]);
+  return ___EmotionJSX(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 ___EmotionJSX(EuiFormRow, {
+      label: densityLabel,
+      display: "columnCompressed"
+    }, ___EmotionJSX(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 heights
+ */
 
-// Row height options and utilities
-var rowHeightButtonOptions = ['undefined', 'auto', 'lineCount'];
+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);
-export var useDataGridDisplaySelector = function useDataGridDisplaySelector(showDisplaySelector, initialStyles, initialRowHeightsOptions) {
-  var _showDisplaySelector$, _rowHeightsOptions$de2;
-  var _useState = useState(false),
+var RowHeightControl = function RowHeightControl(_ref4) {
+  var rowHeightsOptions = _ref4.rowHeightsOptions,
+    onChange = _ref4.onChange;
+  var autoBelowLineCount = rowHeightsOptions.autoBelowLineCount;
+  var _useState = useState(1),
     _useState2 = _slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var showDensityControls = getNestedObjectOptions(showDisplaySelector, 'allowDensity');
-  var showRowHeightControls = getNestedObjectOptions(showDisplaySelector, 'allowRowHeight');
-  var allowResetButton = 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 = useState({}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    userGridStyles = _useState4[0],
-    setUserGridStyles = _useState4[1];
-  var _useState5 = useState({}),
-    _useState6 = _slicedToArray(_useState5, 2),
-    userRowHeightsOptions = _useState6[0],
-    setUserRowHeightsOptions = _useState6[1];
-
-  // Density logic
-  var setGridStyles = useCallback(function (density) {
-    setUserGridStyles(densityStyles[density]);
-  }, []);
+    lineCountInput = _useState2[0],
+    setLineCountInput = _useState2[1];
+  var setLineCountHeight = 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]);
+  useEffect(function () {
+    var passedLineCount = _typeof(rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.defaultHeight) === 'object' ? rowHeightsOptions.defaultHeight.lineCount : undefined;
 
-  // Row height logic
-  var _useState7 = 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 = useMemo(function () {
+    return convertRowHeightsOptionsToSelection(rowHeightsOptions);
+  }, [rowHeightsOptions]);
   var setRowHeight = 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 = 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 ___EmotionJSX(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 ___EmotionJSX(EuiFormRow, {
+      label: rowHeightLabel,
+      display: "columnCompressed"
+    }, ___EmotionJSX(EuiFlexGroup, {
+      gutterSize: "s",
+      responsive: false
+    }, ___EmotionJSX(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"
+    }), ___EmotionJSX(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 = useMemo(function () {
-    return _objectSpread(_objectSpread({}, initialStyles), userGridStyles);
-  }, [initialStyles, userGridStyles]);
-  var rowHeightsOptions = 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 = useMemo(function () {
-    return convertGridStylesToSelection(gridStyles);
-  }, [gridStyles]);
-  var rowHeightSelection = useMemo(function () {
-    return convertRowHeightsOptionsToSelection(rowHeightsOptions);
-  }, [rowHeightsOptions]);
-  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]);
+export var useDataGridDisplaySelector = function useDataGridDisplaySelector(showDisplaySelector, passedGridStyles) {
+  var _showDisplaySelector$;
+  var passedRowHeightsOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : emptyRowHeightsOptions;
+  /**
+   * Grid style changes
+   */
+  var _useState3 = 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 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    showResetButton = _useState10[0],
-    setShowResetButton = _useState10[1];
+  // Update if consumers pass new grid style configurations
+  var stablePassedGridStyles = useDeepEqual(passedGridStyles);
   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 = 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 = useMemo(function () {
+    var show = getNestedObjectOptions(showDisplaySelector, 'allowDensity');
+    return show ? ___EmotionJSX(DensityControl, {
+      gridStyles: gridStyles,
+      onChange: onUserGridStyleChange
+    }) : null;
+  }, [showDisplaySelector, gridStyles, onUserGridStyleChange]);
+
+  /**
+   * Row height changes
+   */
+  var _useState5 = useState(passedRowHeightsOptions),
+    _useState6 = _slicedToArray(_useState5, 2),
+    rowHeightsOptions = _useState6[0],
+    setRowHeightsOptions = _useState6[1];
+
+  // Update if consumers pass new row height configurations
+  var stablePassedRowHeights = useDeepEqual(passedRowHeightsOptions);
   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 = 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 = useMemo(function () {
+    var show = getNestedObjectOptions(showDisplaySelector, 'allowRowHeight');
+    return show ? ___EmotionJSX(RowHeightControl, {
+      rowHeightsOptions: rowHeightsOptions,
+      onChange: onUserRowHeightChange
+    }) : null;
+  }, [showDisplaySelector, rowHeightsOptions, onUserRowHeightChange]);
+
+  /**
+   * Reset button
+   */
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    showResetButton = _useState8[0],
+    setShowResetButton = _useState8[1];
+  var initialGridStyles = useRef(passedGridStyles);
+  var initialRowHeightsOptions = useRef(passedRowHeightsOptions);
   var resetToInitialState = useCallback(function () {
-    setUserGridStyles({});
-    setUserRowHeightsOptions({});
-    setShowResetButton(false);
+    setGridStyles(initialGridStyles.current);
+    setRowHeightsOptions(initialRowHeightsOptions.current);
   }, []);
+  useUpdateEffect(function () {
+    setShowResetButton(!isEqual(rowHeightsOptions.defaultHeight, initialRowHeightsOptions.current.defaultHeight) || gridStyles.fontSize !== initialGridStyles.current.fontSize || gridStyles.cellPadding !== initialGridStyles.current.cellPadding);
+  }, [rowHeightsOptions.defaultHeight, gridStyles.fontSize, gridStyles.cellPadding]);
+  var resetButton = useMemo(function () {
+    var allowed = getNestedObjectOptions(showDisplaySelector, 'allowResetButton');
+    if (!allowed || !showResetButton) return null;
+    return ___EmotionJSX(ResetButton, {
+      onClick: resetToInitialState
+    });
+  }, [showDisplaySelector, showResetButton, resetToInitialState]);
+
+  /**
+   * Display settings popover
+   */
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isOpen = _useState10[0],
+    setIsOpen = _useState10[1];
   var buttonLabel = useEuiI18n('euiDisplaySelector.buttonText', 'Display options');
-  var resetButtonLabel = 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 = useEuiTheme();
   var displaySelector = useMemo(function () {
     var paddingSize = 's';
@@ -203,7 +340,7 @@ export var useDataGridDisplaySelector = function useDataGridDisplaySelector(show
     var popoverWidth = mathWithUnits([formMaxWidth, euiTheme.euiTheme.size[paddingSize]], function (x, y) {
       return x + y * 2;
     });
-    return showDensityControls || showRowHeightControls || additionalDisplaySettings ? ___EmotionJSX(EuiPopover, {
+    return densityControl || rowHeightControl || additionalDisplaySettings ? ___EmotionJSX(EuiPopover, {
       "data-test-subj": "dataGridDisplaySelectorPopover",
       isOpen: isOpen,
       closePopover: function closePopover() {
@@ -228,92 +365,25 @@ export var useDataGridDisplaySelector = function useDataGridDisplaySelector(show
         },
         "aria-label": buttonLabel
       }))
-    }, showDensityControls && ___EmotionJSX(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 ___EmotionJSX(EuiFormRow, {
-        label: densityLabel,
-        display: "columnCompressed"
-      }, ___EmotionJSX(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 && ___EmotionJSX(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 ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiFormRow, {
-        label: rowHeightLabel,
-        display: "columnCompressed"
-      }, ___EmotionJSX(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] && ___EmotionJSX(EuiFormRow, {
-        label: lineCountLabel,
-        display: "columnCompressed"
-      }, ___EmotionJSX(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 && ___EmotionJSX(EuiPopoverFooter, null, ___EmotionJSX(EuiFlexGroup, {
-      justifyContent: "flexEnd",
-      responsive: false
-    }, ___EmotionJSX(EuiFlexItem, {
-      grow: false
-    }, ___EmotionJSX("div", null, ___EmotionJSX(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
+    }) : ___EmotionJSX(React.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 = useEuiI18n('euiDisplaySelector.resetButtonText', 'Reset to default');
+  return ___EmotionJSX(EuiPopoverFooter, null, ___EmotionJSX(EuiFlexGroup, {
+    justifyContent: "flexEnd",
+    responsive: false
+  }, ___EmotionJSX(EuiButtonEmpty, {
+    flush: "both",
+    size: "xs",
+    onClick: onClick,
+    "data-test-subj": "resetDisplaySelector"
+  }, resetButtonLabel)));
 };

package/optimize/es/components/datagrid/data_grid.styles.js

@@ -47,7 +47,7 @@ export var euiDataGridStyles = function euiDataGridStyles(euiThemeContext) {
     euiDataGrid: /*#__PURE__*/css("display:flex;flex-direction:column;align-items:stretch;", 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__*/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{", logicalCSS('padding-bottom', 0), " ", logicalCSS('border-bottom', "".concat(_cellPadding[size], " solid transparent")), ";}.euiDataGridHeaderCell__button{margin-block:-", _cellPadding[size], ";};label:cellPadding;");
+        return /*#__PURE__*/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{", logicalCSS('padding-bottom', 0), " ", logicalCSS('border-bottom', "".concat(_cellPadding[size], " solid transparent")), ";}.euiDataGridHeaderCell__button{margin-block:-", _cellPadding[size], ";};label:cellPadding;");
       },
       get s() {
         return /*#__PURE__*/css(this.cellPadding('s'), ";label:s;");

package/optimize/es/components/datagrid/utils/grid_height_width.js

@@ -102,7 +102,7 @@ export var useUnconstrainedHeight = function useUnconstrainedHeight(_ref2) {
       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);
       }
     }