@elastic/eui 90.0.0 → 91.1.0

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

@@ -81,6 +81,7 @@ var convertRowHeightsOptionsToSelection = function convertRowHeightsOptionsToSel
   }
   return rowHeightButtonOptions[0];
 };
+var defaultLineCountValue = String(2);
 export var useDataGridDisplaySelector = function useDataGridDisplaySelector(showDisplaySelector, initialStyles, initialRowHeightsOptions) {
   var _showDisplaySelector$, _rowHeightsOptions$de2;
   var _useState = useState(false),
@@ -108,10 +109,10 @@ export var useDataGridDisplaySelector = function useDataGridDisplaySelector(show
   }, []);
 
   // Row height logic
-  var _useState7 = useState(2),
+  var _useState7 = useState(defaultLineCountValue),
     _useState8 = _slicedToArray(_useState7, 2),
-    lineCount = _useState8[0],
-    setLineCount = _useState8[1];
+    lineCountInput = _useState8[0],
+    setLineCountInput = _useState8[1];
   var setRowHeight = useCallback(function (option) {
     var rowHeightsOptions = {
       rowHeights: {} // Unset all row-specific heights
@@ -121,25 +122,27 @@ export var useDataGridDisplaySelector = function useDataGridDisplaySelector(show
       rowHeightsOptions.defaultHeight = 'auto';
     } else if (option === 'lineCount') {
       rowHeightsOptions.defaultHeight = {
-        lineCount: lineCount
+        lineCount: Number(lineCountInput)
       };
     } else {
       rowHeightsOptions.defaultHeight = undefined;
     }
     setUserRowHeightsOptions(rowHeightsOptions);
-  }, [lineCount]);
+  }, [lineCountInput]);
   var setLineCountHeight = 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
@@ -159,8 +162,9 @@ export var useDataGridDisplaySelector = function useDataGridDisplaySelector(show
   }, [rowHeightsOptions]);
   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]);
 
@@ -214,7 +218,6 @@ export var useDataGridDisplaySelector = function useDataGridDisplaySelector(show
     }, ___EmotionJSX(EuiButtonIcon, {
       size: "xs",
       iconType: "controlsHorizontal",
-      className: "euiDataGrid__controlBtn",
       color: "text",
       "data-test-subj": "dataGridDisplaySelectorButton",
       onClick: function onClick() {
@@ -292,7 +295,8 @@ export var useDataGridDisplaySelector = function useDataGridDisplaySelector(show
       min: 1,
       max: 20,
       step: 1,
-      value: lineCount,
+      required: true,
+      value: lineCountInput,
       onChange: setLineCountHeight,
       "data-test-subj": "lineCountNumber"
     })));

package/es/components/datagrid/controls/fullscreen_selector.js

@@ -13,7 +13,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  */
 
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import classNames from 'classnames';
 import { keys } from '../../../services';
 import { EuiToolTip } from '../../tool_tip';
 import { EuiButtonIcon } from '../../button';
@@ -29,9 +28,6 @@ export var useDataGridFullScreenSelector = function useDataGridFullScreenSelecto
     _useEuiI18n2 = _slicedToArray(_useEuiI18n, 2),
     fullScreenButton = _useEuiI18n2[0],
     fullScreenButtonActive = _useEuiI18n2[1];
-  var controlBtnClasses = classNames('euiDataGrid__controlBtn', {
-    'euiDataGrid__controlBtn--active': isFullScreen
-  });
   var fullScreenSelector = useMemo(function () {
     return ___EmotionJSX(EuiToolTip, {
       content: isFullScreen ? ___EmotionJSX(React.Fragment, null, fullScreenButtonActive, " (", ___EmotionJSX("kbd", null, "esc"), ")") : fullScreenButton,
@@ -40,14 +36,14 @@ export var useDataGridFullScreenSelector = function useDataGridFullScreenSelecto
       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 = useCallback(function (event) {
     switch (event.key) {
       case keys.ESCAPE:

package/es/components/datagrid/controls/index.js

@@ -11,4 +11,5 @@ export { useDataGridColumnSorting } from './column_sorting';
 export { useDataGridDisplaySelector, startingStyles } from './display_selector';
 export { useDataGridKeyboardShortcuts } from './keyboard_shortcuts';
 export { useDataGridFullScreenSelector } from './fullscreen_selector';
-export { checkOrDefaultToolBarDisplayOptions, EuiDataGridToolbar } from './data_grid_toolbar';
+export { checkOrDefaultToolBarDisplayOptions, EuiDataGridToolbar } from './data_grid_toolbar';
+export { EuiDataGridToolbarControl } from './data_grid_toolbar_control';