@elastic/eui 90.0.0 → 91.0.0

package/test-env/components/datagrid/body/header/data_grid_header_cell.js

@@ -110,7 +110,7 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     title: displayAsText || id
   }, display || displayAsText || id), sortingScreenReaderText && (0, _react2.jsx)(_accessibility2.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", null, sortingScreenReaderText))) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
     className: "eui-fullWidth",
-    anchorClassName: "eui-fullWidth",
+    display: "block",
     panelPaddingSize: "none",
     offset: 7,
     button: (0, _react2.jsx)("button", {

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

@@ -123,7 +123,7 @@ var useDataGridColumnSelector = function useDataGridColumnSelector(availableColu
         return setIsOpen(!isOpen);
       }
     }, buttonText)
-  }, (0, _react2.jsx)("div", null, allowColumnHiding && (0, _react2.jsx)(_popover.EuiPopoverTitle, null, (0, _react2.jsx)(_i18n.EuiI18n, {
+  }, allowColumnHiding && (0, _react2.jsx)(_popover.EuiPopoverTitle, null, (0, _react2.jsx)(_i18n.EuiI18n, {
     tokens: ['euiColumnSelector.search', 'euiColumnSelector.searchcolumns'],
     defaults: ['Search', 'Search columns']
   }, function (_ref3) {
@@ -140,13 +140,12 @@ var useDataGridColumnSelector = function useDataGridColumnSelector(availableColu
       },
       "data-test-subj": "dataGridColumnSelectorSearch"
     });
-  })), (0, _react2.jsx)("div", {
-    className: "euiDataGrid__controlScroll"
-  }, (0, _react2.jsx)(_drag_and_drop.EuiDragDropContext, {
+  })), (0, _react2.jsx)(_drag_and_drop.EuiDragDropContext, {
     onDragEnd: onDragEnd
   }, (0, _react2.jsx)(_drag_and_drop.EuiDroppable, {
     droppableId: "columnOrder",
-    isDropDisabled: !isDragEnabled
+    isDropDisabled: !isDragEnabled,
+    className: "euiDataGrid__controlScroll"
   }, (0, _react2.jsx)(_react.default.Fragment, null, filteredColumns.map(function (id, index) {
     return (0, _react2.jsx)(_drag_and_drop.EuiDraggable, {
       key: id,
@@ -199,7 +198,7 @@ var useDataGridColumnSelector = function useDataGridColumnSelector(availableColu
         color: "subdued"
       }))));
     });
-  })))))), allowColumnHiding && (0, _react2.jsx)(_popover.EuiPopoverFooter, null, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+  })))), allowColumnHiding && (0, _react2.jsx)(_popover.EuiPopoverFooter, null, (0, _react2.jsx)(_flex.EuiFlexGroup, {
     gutterSize: "s",
     responsive: false,
     justifyContent: "spaceBetween"

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

@@ -130,15 +130,12 @@ var useDataGridColumnSorting = function useDataGridColumnSorting(columns, sortin
         return setIsOpen(!isOpen);
       }
     }, sorting.columns.length > 0 ? sortingButtonTextActive : sortingButtonText)
-  }, sorting.columns.length > 0 ? (0, _react2.jsx)("div", {
-    role: "region",
-    "aria-live": "assertive",
-    className: "euiDataGrid__controlScroll"
-  }, (0, _react2.jsx)(_drag_and_drop.EuiDragDropContext, {
+  }, sorting.columns.length > 0 ? (0, _react2.jsx)(_drag_and_drop.EuiDragDropContext, {
     onDragEnd: onDragEnd
   }, (0, _react2.jsx)(_drag_and_drop.EuiDroppable, {
-    droppableId: "columnSorting"
-  }, (0, _react2.jsx)(_react.Fragment, null, sorting.columns.map(function (_ref6, index) {
+    droppableId: "columnSorting",
+    className: "euiDataGrid__controlScroll"
+  }, (0, _react2.jsx)(_react.default.Fragment, null, sorting.columns.map(function (_ref6, index) {
     var id = _ref6.id,
       direction = _ref6.direction;
     return (0, _react2.jsx)(_column_sorting_draggable.EuiDataGridColumnSortingDraggable, {
@@ -151,7 +148,7 @@ var useDataGridColumnSorting = function useDataGridColumnSorting(columns, sortin
       schema: schema,
       schemaDetectors: schemaDetectors
     });
-  }))))) : (0, _react2.jsx)(_text.EuiText, {
+  })))) : (0, _react2.jsx)(_text.EuiText, {
     size: "s",
     color: "subdued"
   }, (0, _react2.jsx)("p", {

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]);
 
@@ -293,7 +297,8 @@ var useDataGridDisplaySelector = function useDataGridDisplaySelector(showDisplay
       min: 1,
       max: 20,
       step: 1,
-      value: lineCount,
+      required: true,
+      value: lineCountInput,
       onChange: setLineCountHeight,
       "data-test-subj": "lineCountNumber"
     })));