@elastic/eui 97.1.0 → 97.3.0

package/es/components/context_menu/context_menu_panel.js

@@ -164,7 +164,7 @@ export var EuiContextMenuPanelClass = /*#__PURE__*/function (_Component) {
         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,
@@ -207,6 +207,16 @@ export var EuiContextMenuPanelClass = /*#__PURE__*/function (_Component) {
           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];
@@ -399,6 +409,12 @@ EuiContextMenuPanelClass.propTypes = {
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.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.number,
   items: PropTypes.arrayOf(PropTypes.element.isRequired),
   onClose: PropTypes.func,

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

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-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"];
@@ -58,15 +58,20 @@ var EuiDataGridCellContent = /*#__PURE__*/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 = 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 = useMemo(function () {
     return classNames('euiDataGridRowCell__content', "euiDataGridRowCell__content--".concat(cellHeightType, "Height"), !isControlColumn && {
       'eui-textBreakWord': cellHeightType !== 'default',
@@ -77,9 +82,9 @@ var EuiDataGridCellContent = /*#__PURE__*/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 ___EmotionJSX(RenderTruncatedCellContent, {
-    hasLineCountTruncation: cellHeightType === 'lineCount' && !isControlColumn,
+    hasLineCountTruncation: (cellHeightType === 'lineCount' || cellHeightType === 'autoBelowLineCount') && !isControlColumn,
     rowHeight: rowHeight
   }, ___EmotionJSX("div", {
     ref: setCellContentsRef,
@@ -512,6 +517,14 @@ EuiDataGridCellContent.propTypes = {
       lineCount: PropTypes.number,
       height: PropTypes.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.bool,
     /**
        * Defines the height for a specific row. It can be line count or just height.
        *
@@ -652,6 +665,9 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         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) {
@@ -956,7 +972,6 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         // 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 && !IS_JEST_ENVIRONMENT ? rowManager.getRow({
         rowIndex: rowIndex,
         visibleRowIndex: visibleRowIndex,
@@ -988,7 +1003,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         isExpandable: isExpandable,
         isExpanded: popoverIsOpen,
         setCellContentsRef: this.setCellContentsRef,
-        rowHeight: rowHeight,
+        rowHeightsOptions: rowHeightsOptions,
         rowHeightUtils: rowHeightUtils,
         isControlColumn: isControlColumn,
         rowIndex: rowIndex,
@@ -1373,6 +1388,14 @@ EuiDataGridCell.propTypes = {
       lineCount: PropTypes.number,
       height: PropTypes.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.bool,
     /**
        * Defines the height for a specific row. It can be line count or just height.
        *

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

@@ -573,6 +573,14 @@ EuiDataGridBody.propTypes = {
       lineCount: PropTypes.number,
       height: PropTypes.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.bool,
     /**
        * Defines the height for a specific row. It can be line count or just height.
        *

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

@@ -83,7 +83,6 @@ export var EuiDataGridBodyCustomRender = /*#__PURE__*/memo(function (_ref) {
    */
   var rowHeightUtils = useRowHeightUtils({
     rowHeightsOptions: rowHeightsOptions,
-    gridStyles: gridStyles,
     columns: columns
   });
   var _useDefaultRowHeight = useDefaultRowHeight({
@@ -738,6 +737,14 @@ EuiDataGridBodyCustomRender.propTypes = {
       lineCount: PropTypes.number,
       height: PropTypes.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.bool,
     /**
        * Defines the height for a specific row. It can be line count or just height.
        *

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

@@ -216,7 +216,6 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
       gridItemsRenderedRef: gridItemsRendered
     },
     rowHeightsOptions: rowHeightsOptions,
-    gridStyles: gridStyles,
     columns: columns
   });
   var _useDefaultRowHeight = useDefaultRowHeight({
@@ -863,6 +862,14 @@ EuiDataGridBodyVirtualized.propTypes = {
       lineCount: PropTypes.number,
       height: PropTypes.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.bool,
     /**
        * Defines the height for a specific row. It can be line count or just height.
        *

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

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