@elastic/eui 97.2.0 → 97.3.0

package/optimize/es/components/datagrid/utils/row_heights.js

@@ -62,7 +62,7 @@ export var RowHeightUtils = /*#__PURE__*/function () {
     }
   }, {
     key: "getCalculatedHeight",
-    value: function getCalculatedHeight(heightOption, defaultHeight, rowIndex, isRowHeightOverride) {
+    value: function getCalculatedHeight(heightOption, defaultHeight, rowIndex, rowHeightsOptions) {
       if (isObject(heightOption) && heightOption.height) {
         return Math.max(heightOption.height, defaultHeight);
       }
@@ -70,8 +70,13 @@ export var RowHeightUtils = /*#__PURE__*/function () {
         return Math.max(heightOption, defaultHeight);
       }
       if (isObject(heightOption) && heightOption.lineCount) {
-        if (isRowHeightOverride) {
-          return this.getRowHeight(rowIndex) || defaultHeight; // lineCount overrides are stored in the heights cache
+        var _ref = rowHeightsOptions || {},
+          autoBelowLineCount = _ref.autoBelowLineCount; // uses auto height cache
+        var isRowHeightOverride =
+        // lineCount overrides are stored in the heights cache
+        rowIndex != null && this.isRowHeightOverride(rowIndex, rowHeightsOptions);
+        if (autoBelowLineCount || isRowHeightOverride) {
+          return this.getRowHeight(rowIndex) || defaultHeight;
         } else {
           return defaultHeight; // default lineCount height is set in minRowHeight state in grid_row_body
         }
@@ -102,6 +107,14 @@ export var RowHeightUtils = /*#__PURE__*/function () {
       // Assumes both padding-top and bottom are the same
       return contentHeight + padding * 2;
     }
+  }, {
+    key: "isAutoBelowLineCount",
+    value: function isAutoBelowLineCount(options, option) {
+      var _this$getLineCount;
+      if (!(options !== null && options !== void 0 && options.autoBelowLineCount)) return false;
+      if (((_this$getLineCount = this.getLineCount(option)) !== null && _this$getLineCount !== void 0 ? _this$getLineCount : 0) > 1) return true;
+      return false;
+    }
 
     /**
      * Auto height utils
@@ -113,6 +126,9 @@ export var RowHeightUtils = /*#__PURE__*/function () {
       if (height === AUTO_HEIGHT) {
         return true;
       }
+      if (this.isAutoBelowLineCount(rowHeightsOptions, height)) {
+        return true;
+      }
       return false;
     }
   }, {
@@ -142,8 +158,8 @@ export var RowHeightUtils = /*#__PURE__*/function () {
   }, {
     key: "pruneHiddenColumnHeights",
     value: function pruneHiddenColumnHeights(visibleColumns) {
-      var visibleColumnIds = new Set(visibleColumns.map(function (_ref) {
-        var id = _ref.id;
+      var visibleColumnIds = new Set(visibleColumns.map(function (_ref2) {
+        var id = _ref2.id;
         return id;
       }));
       var didModify = false;
@@ -255,10 +271,10 @@ export var RowHeightVirtualizationUtils = /*#__PURE__*/function (_RowHeightUtils
  * Hook for instantiating RowHeightUtils, setting internal class vars,
  * and setting up various row-height-related side effects
  */
-export var useRowHeightUtils = function useRowHeightUtils(_ref2) {
-  var virtualization = _ref2.virtualization,
-    rowHeightsOptions = _ref2.rowHeightsOptions,
-    columns = _ref2.columns;
+export var useRowHeightUtils = function useRowHeightUtils(_ref3) {
+  var virtualization = _ref3.virtualization,
+    rowHeightsOptions = _ref3.rowHeightsOptions,
+    columns = _ref3.columns;
   var forceRenderRef = useLatest(useForceRender());
   var _useState = useState(function () {
       if (virtualization) {
@@ -291,9 +307,9 @@ export var useRowHeightUtils = function useRowHeightUtils(_ref2) {
   }, [rowHeightUtils, columns]);
   return rowHeightUtils;
 };
-export var useDefaultRowHeight = function useDefaultRowHeight(_ref3) {
-  var rowHeightsOptions = _ref3.rowHeightsOptions,
-    rowHeightUtils = _ref3.rowHeightUtils;
+export var useDefaultRowHeight = function useDefaultRowHeight(_ref4) {
+  var rowHeightsOptions = _ref4.rowHeightsOptions,
+    rowHeightUtils = _ref4.rowHeightUtils;
   var _useContext = useContext(DataGridSortedContext),
     getCorrectRowIndex = _useContext.getCorrectRowIndex;
 
@@ -317,7 +333,7 @@ export var useDefaultRowHeight = function useDefaultRowHeight(_ref3) {
     // Account for row-specific height overrides
     var rowHeightOption = rowHeightUtils.getRowHeightOption(correctRowIndex, rowHeightsOptions);
     if (rowHeightOption) {
-      rowHeight = rowHeightUtils.getCalculatedHeight(rowHeightOption, minRowHeight, correctRowIndex, rowHeightUtils.isRowHeightOverride(correctRowIndex, rowHeightsOptions));
+      rowHeight = rowHeightUtils.getCalculatedHeight(rowHeightOption, minRowHeight, correctRowIndex, rowHeightsOptions);
     }
 
     // Use the row-specific height if it exists, if not, fall back to the default

package/optimize/es/components/header/header.styles.js

@@ -50,5 +50,12 @@ var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext) {
   var _euiFormVariables = euiFormVariables(euiThemeContext),
     controlPlaceholderText = _euiFormVariables.controlPlaceholderText;
   var backgroundColor = colorMode === 'DARK' ? shade(euiTheme.colors.lightestShade, 0.5) : shade(euiTheme.colors.darkestShade, 0.28);
-  return "\n    background-color: ".concat(backgroundColor, ";\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat(makeHighContrastColor(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat(shade(euiTheme.colors.primary, 0.5), ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      &--group {\n        border-color: ").concat(transparentize(euiTheme.colors.ghost, 0.3), ";\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(euiTheme.colors.ghost, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat(makeHighContrastColor(controlPlaceholderText, 8)(backgroundColor), ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append,\n        .euiFormControlLayout__prepend {\n          background-color: transparent;\n        }\n\n        .euiFormLabel {\n          color: inherit;\n        }\n      }\n    }\n  ");
+
+  // Specific color overrides for EuiSelectableTemplateSitewide
+  var selectableSitewide = {
+    color: euiTheme.colors.ghost,
+    borderColor: transparentize(euiTheme.colors.ghost, 0.3),
+    placeholderColor: makeHighContrastColor(controlPlaceholderText, 8)(backgroundColor)
+  };
+  return "\n    background-color: ".concat(backgroundColor, ";\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat(makeHighContrastColor(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat(shade(euiTheme.colors.primary, 0.5), ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      input {\n        box-shadow: inset 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(selectableSitewide.borderColor, ";\n      }\n\n      &--group {\n        border-color: ").concat(selectableSitewide.borderColor, ";\n\n        input {\n          box-shadow: none;\n        }\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(selectableSitewide.color, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat(selectableSitewide.placeholderColor, ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append,\n        .euiFormControlLayout__prepend {\n          background-color: transparent;\n        }\n\n        .euiFormLabel {\n          color: inherit;\n        }\n      }\n    }\n  ");
 };

package/optimize/es/services/hooks/useDeepEqual.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -6,8 +7,9 @@
  * Side Public License, v 1.
  */
 
-import { useRef } from 'react';
+import { useState } from 'react';
 import isEqual from 'lodash/isEqual';
+import { useUpdateEffect } from './useUpdateEffect';
 
 /**
  * This hook is mostly a performance concern for third-party objs/arrays that EUI
@@ -15,9 +17,14 @@ import isEqual from 'lodash/isEqual';
  * reference on every rerender unless passed through this hook).
  */
 export var useDeepEqual = function useDeepEqual(object) {
-  var ref = useRef(object);
-  if (!isEqual(object, ref.current)) {
-    ref.current = object;
-  }
-  return ref.current;
+  var _useState = useState(object),
+    _useState2 = _slicedToArray(_useState, 2),
+    memoizedObject = _useState2[0],
+    setMemoizedObject = _useState2[1];
+  useUpdateEffect(function () {
+    if (!isEqual(object, memoizedObject)) {
+      setMemoizedObject(object);
+    }
+  }, [object]);
+  return memoizedObject;
 };

package/optimize/lib/components/context_menu/context_menu_panel.js

@@ -164,7 +164,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,
@@ -207,6 +207,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];

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

@@ -30,7 +30,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"];
@@ -54,15 +54,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 = (0, _objectWithoutProperties2.default)(_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',
@@ -73,9 +78,9 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var cssStyles = [styles.content.euiDataGridRowCell__content].concat((0, _toConsumableArray2.default)(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,
@@ -144,6 +149,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) {
@@ -448,7 +456,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,
@@ -480,7 +487,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,

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

@@ -79,7 +79,6 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = /*#__PUR
    */
   var rowHeightUtils = (0, _row_heights.useRowHeightUtils)({
     rowHeightsOptions: rowHeightsOptions,
-    gridStyles: gridStyles,
     columns: columns
   });
   var _useDefaultRowHeight = (0, _row_heights.useDefaultRowHeight)({

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

@@ -219,7 +219,6 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
       gridItemsRenderedRef: gridItemsRendered
     },
     rowHeightsOptions: rowHeightsOptions,
-    gridStyles: gridStyles,
     columns: columns
   });
   var _useDefaultRowHeight = (0, _row_heights.useDefaultRowHeight)({

package/optimize/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;")
   };
 };