@elastic/eui 97.2.0 → 97.3.0

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

@@ -8,9 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDataGridDisplaySelector = exports.startingStyles = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 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");
@@ -27,7 +28,8 @@ var _excluded = ["onChange"],
 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" != _typeof3(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 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) { (0, _defineProperty2.default)(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 _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) { (0, _defineProperty2.default)(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
  * 2.0 and the Server Side Public License, v 1; you may not use this file except
@@ -44,8 +46,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: {
@@ -67,143 +73,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 = (0, _slicedToArray2.default)(_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 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 ((0, _typeof2.default)(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' || (0, _typeof2.default)(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 = (0, _slicedToArray2.default)(_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 = (0, _slicedToArray2.default)(_useState3, 2),
-    userGridStyles = _useState4[0],
-    setUserGridStyles = _useState4[1];
-  var _useState5 = (0, _react.useState)({}),
-    _useState6 = (0, _slicedToArray2.default)(_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 = (0, _typeof2.default)(rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.defaultHeight) === 'object' ? rowHeightsOptions.defaultHeight.lineCount : undefined;
 
-  // Row height logic
-  var _useState7 = (0, _react.useState)(defaultLineCountValue),
-    _useState8 = (0, _slicedToArray2.default)(_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 = (0, _slicedToArray2.default)(_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 = (0, _slicedToArray2.default)(_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 = (0, _slicedToArray2.default)(_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 = (0, _objectWithoutProperties2.default)(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 = (0, _objectWithoutProperties2.default)(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 = (0, _slicedToArray2.default)(_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 = (0, _objectWithoutProperties2.default)(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 = (0, _objectWithoutProperties2.default)(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 = (0, _slicedToArray2.default)(_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 = (0, _slicedToArray2.default)(_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';
@@ -211,7 +348,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() {
@@ -236,92 +373,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 = (0, _slicedToArray2.default)(_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 = (0, _slicedToArray2.default)(_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/optimize/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/optimize/lib/components/datagrid/utils/grid_height_width.js

@@ -109,7 +109,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);
       }
     }