@elastic/eui 97.1.0 → 97.3.0

package/i18ntokens.json

@@ -1031,14 +1031,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 738,
+        "line": 748,
         "column": 23,
-        "index": 23328
+        "index": 23788
       },
       "end": {
-        "line": 742,
+        "line": 752,
         "column": 3,
-        "index": 23475
+        "index": 23935
       }
     },
     "filepath": "src/components/datagrid/body/cell/data_grid_cell.tsx"
@@ -1049,14 +1049,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 743,
+        "line": 753,
         "column": 25,
-        "index": 23502
+        "index": 23962
       },
       "end": {
-        "line": 746,
+        "line": 756,
         "column": 3,
-        "index": 23608
+        "index": 24068
       }
     },
     "filepath": "src/components/datagrid/body/cell/data_grid_cell.tsx"
@@ -1710,199 +1710,181 @@
     "filepath": "src/components/datagrid/controls/data_grid_toolbar_control.tsx"
   },
   {
-    "token": "euiDisplaySelector.buttonText",
-    "defString": "Display options",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 228,
-        "column": 22,
-        "index": 7412
-      },
-      "end": {
-        "line": 231,
-        "column": 3,
-        "index": 7486
-      }
-    },
-    "filepath": "src/components/datagrid/controls/display_selector.tsx"
-  },
-  {
-    "token": "euiDisplaySelector.resetButtonText",
-    "defString": "Reset to default",
+    "token": "euiDisplaySelector.densityLabel",
+    "defString": "Density",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 232,
-        "column": 27,
-        "index": 7515
+        "line": 96,
+        "column": 4,
+        "index": 2610
       },
       "end": {
-        "line": 235,
-        "column": 3,
-        "index": 7595
+        "line": 104,
+        "column": 5,
+        "index": 2883
       }
     },
     "filepath": "src/components/datagrid/controls/display_selector.tsx"
   },
   {
-    "token": "euiDisplaySelector.densityLabel",
-    "defString": "Density",
+    "token": "euiDisplaySelector.labelCompact",
+    "defString": "Compact",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 272,
-        "column": 10,
-        "index": 8779
+        "line": 96,
+        "column": 4,
+        "index": 2610
       },
       "end": {
-        "line": 280,
-        "column": 11,
-        "index": 9100
+        "line": 104,
+        "column": 5,
+        "index": 2883
       }
     },
     "filepath": "src/components/datagrid/controls/display_selector.tsx"
   },
   {
-    "token": "euiDisplaySelector.labelCompact",
-    "defString": "Compact",
+    "token": "euiDisplaySelector.labelNormal",
+    "defString": "Normal",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 272,
-        "column": 10,
-        "index": 8779
+        "line": 96,
+        "column": 4,
+        "index": 2610
       },
       "end": {
-        "line": 280,
-        "column": 11,
-        "index": 9100
+        "line": 104,
+        "column": 5,
+        "index": 2883
       }
     },
     "filepath": "src/components/datagrid/controls/display_selector.tsx"
   },
   {
-    "token": "euiDisplaySelector.labelNormal",
-    "defString": "Normal",
+    "token": "euiDisplaySelector.labelExpanded",
+    "defString": "Expanded",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 272,
-        "column": 10,
-        "index": 8779
+        "line": 96,
+        "column": 4,
+        "index": 2610
       },
       "end": {
-        "line": 280,
-        "column": 11,
-        "index": 9100
+        "line": 104,
+        "column": 5,
+        "index": 2883
       }
     },
     "filepath": "src/components/datagrid/controls/display_selector.tsx"
   },
   {
-    "token": "euiDisplaySelector.labelExpanded",
-    "defString": "Expanded",
+    "token": "euiDisplaySelector.rowHeightLabel",
+    "defString": "Lines per row",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 272,
-        "column": 10,
-        "index": 8779
+        "line": 227,
+        "column": 4,
+        "index": 6476
       },
       "end": {
-        "line": 280,
-        "column": 11,
-        "index": 9100
+        "line": 235,
+        "column": 5,
+        "index": 6741
       }
     },
     "filepath": "src/components/datagrid/controls/display_selector.tsx"
   },
   {
-    "token": "euiDisplaySelector.rowHeightLabel",
-    "defString": "Row height",
+    "token": "euiDisplaySelector.labelAuto",
+    "defString": "Auto",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 315,
-        "column": 10,
-        "index": 10207
+        "line": 227,
+        "column": 4,
+        "index": 6476
       },
       "end": {
-        "line": 330,
-        "column": 11,
-        "index": 10680
+        "line": 235,
+        "column": 5,
+        "index": 6741
       }
     },
     "filepath": "src/components/datagrid/controls/display_selector.tsx"
   },
   {
-    "token": "euiDisplaySelector.labelSingle",
-    "defString": "Single",
+    "token": "euiDisplaySelector.labelStatic",
+    "defString": "Static",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 315,
-        "column": 10,
-        "index": 10207
+        "line": 227,
+        "column": 4,
+        "index": 6476
       },
       "end": {
-        "line": 330,
-        "column": 11,
-        "index": 10680
+        "line": 235,
+        "column": 5,
+        "index": 6741
       }
     },
     "filepath": "src/components/datagrid/controls/display_selector.tsx"
   },
   {
-    "token": "euiDisplaySelector.labelAuto",
-    "defString": "Auto fit",
+    "token": "euiDisplaySelector.labelMax",
+    "defString": "Max",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 315,
-        "column": 10,
-        "index": 10207
+        "line": 227,
+        "column": 4,
+        "index": 6476
       },
       "end": {
-        "line": 330,
-        "column": 11,
-        "index": 10680
+        "line": 235,
+        "column": 5,
+        "index": 6741
       }
     },
     "filepath": "src/components/datagrid/controls/display_selector.tsx"
   },
   {
-    "token": "euiDisplaySelector.labelCustom",
-    "defString": "Custom",
+    "token": "euiDisplaySelector.buttonText",
+    "defString": "Display options",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 315,
-        "column": 10,
-        "index": 10207
+        "line": 393,
+        "column": 22,
+        "index": 11825
       },
       "end": {
-        "line": 330,
-        "column": 11,
-        "index": 10680
+        "line": 396,
+        "column": 3,
+        "index": 11899
       }
     },
     "filepath": "src/components/datagrid/controls/display_selector.tsx"
   },
   {
-    "token": "euiDisplaySelector.lineCountLabel",
-    "defString": "Lines per row",
+    "token": "euiDisplaySelector.resetButtonText",
+    "defString": "Reset to default",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 315,
-        "column": 10,
-        "index": 10207
+        "line": 472,
+        "column": 27,
+        "index": 14023
       },
       "end": {
-        "line": 330,
-        "column": 11,
-        "index": 10680
+        "line": 475,
+        "column": 3,
+        "index": 14103
       }
     },
     "filepath": "src/components/datagrid/controls/display_selector.tsx"
@@ -5119,12 +5101,12 @@
       "start": {
         "line": 114,
         "column": 4,
-        "index": 3416
+        "index": 3423
       },
       "end": {
         "line": 114,
         "column": 75,
-        "index": 3487
+        "index": 3494
       }
     },
     "filepath": "src/components/header/header_links/header_links.tsx"
@@ -5137,12 +5119,12 @@
       "start": {
         "line": 131,
         "column": 4,
-        "index": 3915
+        "index": 3922
       },
       "end": {
         "line": 131,
         "column": 69,
-        "index": 3980
+        "index": 3987
       }
     },
     "filepath": "src/components/header/header_links/header_links.tsx"

package/lib/components/context_menu/context_menu_panel.js

@@ -171,7 +171,7 @@ var EuiContextMenuPanelClass = exports.EuiContextMenuPanelClass = /*#__PURE__*/f
         items: _this.props.items
       },
       menuItems: [],
-      focusedItemIndex: props.onClose && props.initialFocusedItemIndex != null ? props.initialFocusedItemIndex + 1 // Account for panel title back button
+      focusedItemIndex: props.onClose && props.initialFocusedItemIndex != null && props.initialFocusedItemIndex !== -1 ? props.initialFocusedItemIndex + 1 // Account for panel title back button
       : props.initialFocusedItemIndex,
       currentHeight: undefined,
       waitingForInitialPopover: false,
@@ -214,6 +214,16 @@ var EuiContextMenuPanelClass = exports.EuiContextMenuPanelClass = /*#__PURE__*/f
           return;
         }
 
+        // `initialFocusedItemIndex={-1}` should only be used when preventing initial item focus is desired
+        if (_this2.state.focusedItemIndex === -1) {
+          // Resetting the focusedItemIndex to 0 allows keyboard up/down behavior to
+          // still work correctly later if the panel is manually tabbed into
+          return _this2.setState({
+            tookInitialFocus: true,
+            focusedItemIndex: 0
+          });
+        }
+
         // If an item should be focused, focus it (if it exists)
         if (_this2.state.focusedItemIndex != null && _this2.state.menuItems.length) {
           var focusedItem = _this2.state.menuItems[_this2.state.focusedItemIndex];
@@ -406,6 +416,12 @@ EuiContextMenuPanelClass.propTypes = {
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
+  /**
+       * Determines the initially focused menu item for keyboard and screen reader users.
+       *
+       * Can be set to `-1` to prevent autofocus (an uncommon case that must have
+       * keyboard accessibility accounted for manually if used)
+       */
   initialFocusedItemIndex: _propTypes.default.number,
   items: _propTypes.default.arrayOf(_propTypes.default.element.isRequired),
   onClose: _propTypes.default.func,

package/lib/components/datagrid/body/cell/data_grid_cell.js

@@ -21,7 +21,7 @@ var _data_grid_cell_popover = require("./data_grid_cell_popover");
 var _focus_utils = require("./focus_utils");
 var _data_grid_cell = require("./data_grid_cell.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["renderCellValue", "cellContext", "column", "setCellContentsRef", "rowIndex", "colIndex", "rowHeight", "rowHeightUtils", "isControlColumn"],
+var _excluded = ["renderCellValue", "cellContext", "column", "setCellContentsRef", "rowIndex", "colIndex", "rowHeightsOptions", "rowHeightUtils", "isControlColumn"],
   _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager", "pagination"],
   _excluded3 = ["isExpandable", "style", "className", "data-test-subj"],
   _excluded4 = ["columnId", "columnIndex", "rowIndex", "visibleRowIndex"];
@@ -66,15 +66,20 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     setCellContentsRef = _ref.setCellContentsRef,
     rowIndex = _ref.rowIndex,
     colIndex = _ref.colIndex,
-    rowHeight = _ref.rowHeight,
+    rowHeightsOptions = _ref.rowHeightsOptions,
     rowHeightUtils = _ref.rowHeightUtils,
     isControlColumn = _ref.isControlColumn,
     rest = _objectWithoutProperties(_ref, _excluded);
   // React is more permissive than the TS types indicate
   var CellElement = renderCellValue;
+
+  // Cell height type
+  var rowHeight = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions);
   var cellHeightType = (0, _react.useMemo)(function () {
-    return (rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getHeightType(rowHeight)) || 'default';
-  }, [rowHeightUtils, rowHeight]);
+    return rowHeightUtils !== null && rowHeightUtils !== void 0 && rowHeightUtils.isAutoBelowLineCount(rowHeightsOptions, rowHeight) ? 'autoBelowLineCount' : (rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getHeightType(rowHeight)) || 'default';
+  }, [rowHeightUtils, rowHeight, rowHeightsOptions]);
+
+  // Classes and styles
   var classes = (0, _react.useMemo)(function () {
     return (0, _classnames.default)('euiDataGridRowCell__content', "euiDataGridRowCell__content--".concat(cellHeightType, "Height"), !isControlColumn && {
       'eui-textBreakWord': cellHeightType !== 'default',
@@ -85,9 +90,9 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var cssStyles = [styles.content.euiDataGridRowCell__content].concat(_toConsumableArray(isControlColumn ? [styles.content.controlColumn, styles.content.autoHeight] : [
   // Regular data cells should always inherit height from the row wrapper,
   // except for auto height
-  cellHeightType === 'auto' ? styles.content.autoHeight : styles.content.defaultHeight]));
+  cellHeightType === 'auto' || cellHeightType === 'autoBelowLineCount' ? styles.content.autoHeight : styles.content.defaultHeight]));
   return (0, _react2.jsx)(RenderTruncatedCellContent, {
-    hasLineCountTruncation: cellHeightType === 'lineCount' && !isControlColumn,
+    hasLineCountTruncation: (cellHeightType === 'lineCount' || cellHeightType === 'autoBelowLineCount') && !isControlColumn,
     rowHeight: rowHeight
   }, (0, _react2.jsx)("div", {
     ref: setCellContentsRef,
@@ -520,6 +525,14 @@ EuiDataGridCellContent.propTypes = {
       lineCount: _propTypes.default.number,
       height: _propTypes.default.number
     }).isRequired]),
+    /**
+       * Feature flag for custom `lineCount` behavior, where `lineCount` acts like a
+       * *max* number of lines (instead of a set number of lines for all rows).
+       *
+       * This functionality is in beta and has performance implications;
+       * we do not yet fully recommend/support it for heavy production usage.
+       */
+    autoBelowLineCount: _propTypes.default.bool,
     /**
        * Defines the height for a specific row. It can be line count or just height.
        *
@@ -660,6 +673,9 @@ var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Componen
         rowHeightsOptions = _this$props3.rowHeightsOptions,
         rowIndex = _this$props3.rowIndex;
       var rowHeightOption = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions);
+      if (rowHeightUtils !== null && rowHeightUtils !== void 0 && rowHeightUtils.isAutoBelowLineCount(rowHeightsOptions, rowHeightOption)) {
+        return; // Using auto height instead
+      }
       var isSingleLine = rowHeightOption == null; // Undefined rowHeightsOptions default to a single line
       var lineCount = isSingleLine ? 1 : rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getLineCount(rowHeightOption);
       if (lineCount) {
@@ -964,7 +980,6 @@ var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Componen
         // column width, can be undefined
         lineHeight: (_rowHeightsOptions$li = rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.lineHeight) !== null && _rowHeightsOptions$li !== void 0 ? _rowHeightsOptions$li : undefined
       }, cellPropsStyle);
-      var rowHeight = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions);
       var row = rowManager && !_utils.IS_JEST_ENVIRONMENT ? rowManager.getRow({
         rowIndex: rowIndex,
         visibleRowIndex: visibleRowIndex,
@@ -996,7 +1011,7 @@ var EuiDataGridCell = exports.EuiDataGridCell = /*#__PURE__*/function (_Componen
         isExpandable: isExpandable,
         isExpanded: popoverIsOpen,
         setCellContentsRef: this.setCellContentsRef,
-        rowHeight: rowHeight,
+        rowHeightsOptions: rowHeightsOptions,
         rowHeightUtils: rowHeightUtils,
         isControlColumn: isControlColumn,
         rowIndex: rowIndex,
@@ -1380,6 +1395,14 @@ EuiDataGridCell.propTypes = {
       lineCount: _propTypes.default.number,
       height: _propTypes.default.number
     }).isRequired]),
+    /**
+       * Feature flag for custom `lineCount` behavior, where `lineCount` acts like a
+       * *max* number of lines (instead of a set number of lines for all rows).
+       *
+       * This functionality is in beta and has performance implications;
+       * we do not yet fully recommend/support it for heavy production usage.
+       */
+    autoBelowLineCount: _propTypes.default.bool,
     /**
        * Defines the height for a specific row. It can be line count or just height.
        *

package/lib/components/datagrid/body/data_grid_body.js

@@ -579,6 +579,14 @@ EuiDataGridBody.propTypes = {
       lineCount: _propTypes.default.number,
       height: _propTypes.default.number
     }).isRequired]),
+    /**
+       * Feature flag for custom `lineCount` behavior, where `lineCount` acts like a
+       * *max* number of lines (instead of a set number of lines for all rows).
+       *
+       * This functionality is in beta and has performance implications;
+       * we do not yet fully recommend/support it for heavy production usage.
+       */
+    autoBelowLineCount: _propTypes.default.bool,
     /**
        * Defines the height for a specific row. It can be line count or just height.
        *

package/lib/components/datagrid/body/data_grid_body_custom.js

@@ -90,7 +90,6 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = /*#__PUR
    */
   var rowHeightUtils = (0, _row_heights.useRowHeightUtils)({
     rowHeightsOptions: rowHeightsOptions,
-    gridStyles: gridStyles,
     columns: columns
   });
   var _useDefaultRowHeight = (0, _row_heights.useDefaultRowHeight)({
@@ -745,6 +744,14 @@ EuiDataGridBodyCustomRender.propTypes = {
       lineCount: _propTypes.default.number,
       height: _propTypes.default.number
     }).isRequired]),
+    /**
+       * Feature flag for custom `lineCount` behavior, where `lineCount` acts like a
+       * *max* number of lines (instead of a set number of lines for all rows).
+       *
+       * This functionality is in beta and has performance implications;
+       * we do not yet fully recommend/support it for heavy production usage.
+       */
+    autoBelowLineCount: _propTypes.default.bool,
     /**
        * Defines the height for a specific row. It can be line count or just height.
        *

package/lib/components/datagrid/body/data_grid_body_virtualized.js

@@ -223,7 +223,6 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
       gridItemsRenderedRef: gridItemsRendered
     },
     rowHeightsOptions: rowHeightsOptions,
-    gridStyles: gridStyles,
     columns: columns
   });
   var _useDefaultRowHeight = (0, _row_heights.useDefaultRowHeight)({
@@ -870,6 +869,14 @@ EuiDataGridBodyVirtualized.propTypes = {
       lineCount: _propTypes.default.number,
       height: _propTypes.default.number
     }).isRequired]),
+    /**
+       * Feature flag for custom `lineCount` behavior, where `lineCount` acts like a
+       * *max* number of lines (instead of a set number of lines for all rows).
+       *
+       * This functionality is in beta and has performance implications;
+       * we do not yet fully recommend/support it for heavy production usage.
+       */
+    autoBelowLineCount: _propTypes.default.bool,
     /**
        * Defines the height for a specific row. It can be line count or just height.
        *

package/lib/components/datagrid/controls/data_grid_toolbar.styles.js

@@ -18,7 +18,7 @@ var euiDataGridToolbarStyles = exports.euiDataGridToolbarStyles = function euiDa
   var euiTheme = _ref.euiTheme;
   return {
     euiDataGrid__controls: /*#__PURE__*/(0, _react.css)("z-index:2;position:relative;display:flex;justify-content:space-between;align-items:center;gap:", euiTheme.size.base, ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xs), " background-color:", euiTheme.colors.emptyShade, ";;label:euiDataGrid__controls;"),
-    euiDataGrid__rightControls: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:flex-end;flex-wrap:wrap;column-gap:", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.xs), "&:only-child{", (0, _global_styling.logicalCSS)('margin-left', 'auto'), ";};label:euiDataGrid__rightControls;"),
-    euiDataGrid__leftControls: /*#__PURE__*/(0, _react.css)("display:flex;flex-wrap:wrap;gap:", euiTheme.size.xxs, ";;label:euiDataGrid__leftControls;")
+    euiDataGrid__rightControls: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;column-gap:", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.xs), "&:only-child{", (0, _global_styling.logicalCSS)('margin-left', 'auto'), ";};label:euiDataGrid__rightControls;"),
+    euiDataGrid__leftControls: /*#__PURE__*/(0, _react.css)("display:flex;flex-wrap:wrap;align-items:center;gap:", euiTheme.size.xxs, ";;label:euiDataGrid__leftControls;")
   };
 };