@elastic/eui 97.2.0 → 97.3.0

package/test-env/components/datagrid/utils/row_heights.js

@@ -67,7 +67,7 @@ var RowHeightUtils = exports.RowHeightUtils = /*#__PURE__*/function () {
     }
   }, {
     key: "getCalculatedHeight",
-    value: function getCalculatedHeight(heightOption, defaultHeight, rowIndex, isRowHeightOverride) {
+    value: function getCalculatedHeight(heightOption, defaultHeight, rowIndex, rowHeightsOptions) {
       if ((0, _predicate.isObject)(heightOption) && heightOption.height) {
         return Math.max(heightOption.height, defaultHeight);
       }
@@ -75,8 +75,13 @@ var RowHeightUtils = exports.RowHeightUtils = /*#__PURE__*/function () {
         return Math.max(heightOption, defaultHeight);
       }
       if ((0, _predicate.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
         }
@@ -107,6 +112,14 @@ var RowHeightUtils = exports.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
@@ -118,6 +131,9 @@ var RowHeightUtils = exports.RowHeightUtils = /*#__PURE__*/function () {
       if (height === AUTO_HEIGHT) {
         return true;
       }
+      if (this.isAutoBelowLineCount(rowHeightsOptions, height)) {
+        return true;
+      }
       return false;
     }
   }, {
@@ -147,8 +163,8 @@ var RowHeightUtils = exports.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;
@@ -258,10 +274,10 @@ var RowHeightVirtualizationUtils = exports.RowHeightVirtualizationUtils = /*#__P
  * Hook for instantiating RowHeightUtils, setting internal class vars,
  * and setting up various row-height-related side effects
  */
-var useRowHeightUtils = exports.useRowHeightUtils = function useRowHeightUtils(_ref2) {
-  var virtualization = _ref2.virtualization,
-    rowHeightsOptions = _ref2.rowHeightsOptions,
-    columns = _ref2.columns;
+var useRowHeightUtils = exports.useRowHeightUtils = function useRowHeightUtils(_ref3) {
+  var virtualization = _ref3.virtualization,
+    rowHeightsOptions = _ref3.rowHeightsOptions,
+    columns = _ref3.columns;
   var forceRenderRef = (0, _services.useLatest)((0, _services.useForceRender)());
   var _useState = (0, _react.useState)(function () {
       if (virtualization) {
@@ -294,9 +310,9 @@ var useRowHeightUtils = exports.useRowHeightUtils = function useRowHeightUtils(_
   }, [rowHeightUtils, columns]);
   return rowHeightUtils;
 };
-var useDefaultRowHeight = exports.useDefaultRowHeight = function useDefaultRowHeight(_ref3) {
-  var rowHeightsOptions = _ref3.rowHeightsOptions,
-    rowHeightUtils = _ref3.rowHeightUtils;
+var useDefaultRowHeight = exports.useDefaultRowHeight = function useDefaultRowHeight(_ref4) {
+  var rowHeightsOptions = _ref4.rowHeightsOptions,
+    rowHeightUtils = _ref4.rowHeightUtils;
   var _useContext = (0, _react.useContext)(_sorting.DataGridSortedContext),
     getCorrectRowIndex = _useContext.getCorrectRowIndex;
 
@@ -320,7 +336,7 @@ var useDefaultRowHeight = exports.useDefaultRowHeight = function useDefaultRowHe
     // 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/test-env/components/header/header.styles.js

@@ -57,5 +57,12 @@ var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext) {
   var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
     controlPlaceholderText = _euiFormVariables.controlPlaceholderText;
   var backgroundColor = colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.lightestShade, 0.5) : (0, _services.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((0, _services.makeHighContrastColor)(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat((0, _services.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((0, _services.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((0, _services.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: (0, _services.transparentize)(euiTheme.colors.ghost, 0.3),
+    placeholderColor: (0, _services.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((0, _services.makeHighContrastColor)(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat((0, _services.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/test-env/services/hooks/useDeepEqual.js

@@ -5,8 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useDeepEqual = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+var _useUpdateEffect = require("./useUpdateEffect");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -21,9 +23,14 @@ var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
  * reference on every rerender unless passed through this hook).
  */
 var useDeepEqual = exports.useDeepEqual = function useDeepEqual(object) {
-  var ref = (0, _react.useRef)(object);
-  if (!(0, _isEqual.default)(object, ref.current)) {
-    ref.current = object;
-  }
-  return ref.current;
+  var _useState = (0, _react.useState)(object),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    memoizedObject = _useState2[0],
+    setMemoizedObject = _useState2[1];
+  (0, _useUpdateEffect.useUpdateEffect)(function () {
+    if (!(0, _isEqual.default)(object, memoizedObject)) {
+      setMemoizedObject(object);
+    }
+  }, [object]);
+  return memoizedObject;
 };