@elastic/eui 90.0.0 → 91.1.0

package/test-env/components/datagrid/controls/display_selector.js

@@ -82,6 +82,7 @@ var convertRowHeightsOptionsToSelection = function convertRowHeightsOptionsToSel
   }
   return rowHeightButtonOptions[0];
 };
+var defaultLineCountValue = String(2);
 var useDataGridDisplaySelector = function useDataGridDisplaySelector(showDisplaySelector, initialStyles, initialRowHeightsOptions) {
   var _showDisplaySelector$, _rowHeightsOptions$de2;
   var _useState = (0, _react.useState)(false),
@@ -109,10 +110,10 @@ var useDataGridDisplaySelector = function useDataGridDisplaySelector(showDisplay
   }, []);
 
   // Row height logic
-  var _useState7 = (0, _react.useState)(2),
+  var _useState7 = (0, _react.useState)(defaultLineCountValue),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    lineCount = _useState8[0],
-    setLineCount = _useState8[1];
+    lineCountInput = _useState8[0],
+    setLineCountInput = _useState8[1];
   var setRowHeight = (0, _react.useCallback)(function (option) {
     var rowHeightsOptions = {
       rowHeights: {} // Unset all row-specific heights
@@ -122,25 +123,27 @@ var useDataGridDisplaySelector = function useDataGridDisplaySelector(showDisplay
       rowHeightsOptions.defaultHeight = 'auto';
     } else if (option === 'lineCount') {
       rowHeightsOptions.defaultHeight = {
-        lineCount: lineCount
+        lineCount: Number(lineCountInput)
       };
     } else {
       rowHeightsOptions.defaultHeight = undefined;
     }
     setUserRowHeightsOptions(rowHeightsOptions);
-  }, [lineCount]);
+  }, [lineCountInput]);
   var setLineCountHeight = (0, _react.useCallback)(function (event) {
+    setLineCountInput(event.currentTarget.value);
     var newLineCount = Number(event.currentTarget.value);
-    if (newLineCount < 1) return; // Don't let users set a 0 or negative line count
 
-    setLineCount(newLineCount);
-    setUserRowHeightsOptions({
-      rowHeights: {},
-      // Unset all row-specific line counts
-      defaultHeight: {
-        lineCount: newLineCount
-      }
-    });
+    // 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
+        }
+      });
+    }
   }, []);
 
   // Merge the developer-specified configurations with user overrides
@@ -160,8 +163,9 @@ var useDataGridDisplaySelector = function useDataGridDisplaySelector(showDisplay
   }, [rowHeightsOptions]);
   (0, _react.useEffect)(function () {
     var _rowHeightsOptions$de;
+    setLineCountInput(
     // @ts-ignore - optional chaining operator handles types & cases that aren't lineCount
-    setLineCount((rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : (_rowHeightsOptions$de = rowHeightsOptions.defaultHeight) === null || _rowHeightsOptions$de === void 0 ? void 0 : _rowHeightsOptions$de.lineCount) || 2);
+    (rowHeightsOptions === null || rowHeightsOptions === void 0 ? 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 ? void 0 : (_rowHeightsOptions$de2 = rowHeightsOptions.defaultHeight) === null || _rowHeightsOptions$de2 === void 0 ? void 0 : _rowHeightsOptions$de2.lineCount]);
 
@@ -215,7 +219,6 @@ var useDataGridDisplaySelector = function useDataGridDisplaySelector(showDisplay
     }, (0, _react2.jsx)(_button.EuiButtonIcon, {
       size: "xs",
       iconType: "controlsHorizontal",
-      className: "euiDataGrid__controlBtn",
       color: "text",
       "data-test-subj": "dataGridDisplaySelectorButton",
       onClick: function onClick() {
@@ -293,7 +296,8 @@ var useDataGridDisplaySelector = function useDataGridDisplaySelector(showDisplay
       min: 1,
       max: 20,
       step: 1,
-      value: lineCount,
+      required: true,
+      value: lineCountInput,
       onChange: setLineCountHeight,
       "data-test-subj": "lineCountNumber"
     })));

package/test-env/components/datagrid/controls/fullscreen_selector.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDataGridFullScreenSelector = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../services");
 var _tool_tip = require("../../tool_tip");
 var _button = require("../../button");
@@ -34,9 +33,6 @@ var useDataGridFullScreenSelector = function useDataGridFullScreenSelector() {
     _useEuiI18n2 = (0, _slicedToArray2.default)(_useEuiI18n, 2),
     fullScreenButton = _useEuiI18n2[0],
     fullScreenButtonActive = _useEuiI18n2[1];
-  var controlBtnClasses = (0, _classnames.default)('euiDataGrid__controlBtn', {
-    'euiDataGrid__controlBtn--active': isFullScreen
-  });
   var fullScreenSelector = (0, _react.useMemo)(function () {
     return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
       content: isFullScreen ? (0, _react2.jsx)(_react.default.Fragment, null, fullScreenButtonActive, " (", (0, _react2.jsx)("kbd", null, "esc"), ")") : fullScreenButton,
@@ -45,14 +41,14 @@ var useDataGridFullScreenSelector = function useDataGridFullScreenSelector() {
       size: "xs",
       iconType: isFullScreen ? 'fullScreenExit' : 'fullScreen',
       color: "text",
-      className: controlBtnClasses,
+      "aria-pressed": isFullScreen,
       "data-test-subj": "dataGridFullScreenButton",
       onClick: function onClick() {
         return setIsFullScreen(!isFullScreen);
       },
       "aria-label": isFullScreen ? fullScreenButtonActive : fullScreenButton
     }));
-  }, [isFullScreen, controlBtnClasses, fullScreenButton, fullScreenButtonActive]);
+  }, [isFullScreen, fullScreenButton, fullScreenButtonActive]);
   var handleGridKeyDown = (0, _react.useCallback)(function (event) {
     switch (event.key) {
       case _services.keys.ESCAPE:

package/test-env/components/datagrid/controls/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "EuiDataGridToolbar", {
     return _data_grid_toolbar.EuiDataGridToolbar;
   }
 });
+Object.defineProperty(exports, "EuiDataGridToolbarControl", {
+  enumerable: true,
+  get: function get() {
+    return _data_grid_toolbar_control.EuiDataGridToolbarControl;
+  }
+});
 Object.defineProperty(exports, "checkOrDefaultToolBarDisplayOptions", {
   enumerable: true,
   get: function get() {
@@ -56,4 +62,5 @@ var _column_sorting = require("./column_sorting");
 var _display_selector = require("./display_selector");
 var _keyboard_shortcuts = require("./keyboard_shortcuts");
 var _fullscreen_selector = require("./fullscreen_selector");
-var _data_grid_toolbar = require("./data_grid_toolbar");
+var _data_grid_toolbar = require("./data_grid_toolbar");
+var _data_grid_toolbar_control = require("./data_grid_toolbar_control");