@elastic/eui 93.2.0 → 93.4.0

package/optimize/es/components/datagrid/data_grid.js

@@ -3,8 +3,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "columnVisibility", "schemaDetectors", "rowCount", "renderCellValue", "renderCellPopover", "renderFooterCellValue", "className", "gridStyle", "toolbarVisibility", "pagination", "sorting", "inMemory", "onColumnResize", "minSizeForControls", "height", "width", "rowHeightsOptions", "virtualizationOptions", "renderCustomGridBody", "renderCustomToolbar"],
-  _excluded2 = ["focusProps"];
+var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "columnVisibility", "schemaDetectors", "rowCount", "renderCellValue", "cellContext", "renderCellPopover", "renderFooterCellValue", "className", "gridStyle", "toolbarVisibility", "pagination", "sorting", "inMemory", "onColumnResize", "minSizeForControls", "height", "width", "rowHeightsOptions", "virtualizationOptions", "renderCustomGridBody", "renderCustomToolbar"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /*
@@ -16,7 +15,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 
 import classNames from 'classnames';
-import React, { forwardRef, useMemo, useRef, useState, memo } from 'react';
+import React, { forwardRef, useMemo, useRef, useState, memo, useCallback } from 'react';
 import { useGeneratedHtmlId } from '../../services';
 import { useEuiTablePaginationDefaults } from '../table/table_pagination';
 import { EuiFocusTrap } from '../focus_trap';
@@ -25,7 +24,7 @@ import { useMutationObserver } from '../observer/mutation_observer';
 import { useResizeObserver } from '../observer/resize_observer';
 import { EuiDataGridBody } from './body';
 import { useDataGridColumnSelector, useDataGridColumnSorting, useDataGridDisplaySelector, startingStyles, useDataGridFullScreenSelector, useDataGridKeyboardShortcuts, checkOrDefaultToolBarDisplayOptions, EuiDataGridToolbar } from './controls';
-import { DataGridSortingContext, useSorting } from './utils/sorting';
+import { DataGridSortedContext, useSorting } from './utils/sorting';
 import { DataGridFocusContext, useFocus, createKeyDownHandler, preventTabbing } from './utils/focus';
 import { useInMemoryValues, EuiDataGridInMemoryRenderer } from './utils/in_memory';
 import { DataGridCellPopoverContext, useCellPopover } from './body/cell';
@@ -65,8 +64,8 @@ var cellPaddingsToClassMap = {
   m: '',
   l: 'euiDataGrid--paddingLarge'
 };
+var emptyVirtualizationOptions = {};
 export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
-  var _gridItemsRendered$cu;
   var _props$leadingControl = props.leadingControlColumns,
     leadingControlColumns = _props$leadingControl === void 0 ? emptyControlColumns : _props$leadingControl,
     _props$trailingContro = props.trailingControlColumns,
@@ -76,6 +75,7 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
     schemaDetectors = props.schemaDetectors,
     rowCount = props.rowCount,
     renderCellValue = props.renderCellValue,
+    cellContext = props.cellContext,
     renderCellPopover = props.renderCellPopover,
     renderFooterCellValue = props.renderFooterCellValue,
     className = props.className,
@@ -185,8 +185,14 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
   /**
    * Sorting
    */
-  var columnSorting = useDataGridColumnSorting(orderedVisibleColumns, sorting, mergedSchema, allSchemaDetectors, displayValues);
-  var sortingContext = useSorting({
+  var columnSorting = useDataGridColumnSorting({
+    sorting: sorting,
+    columns: orderedVisibleColumns,
+    displayValues: displayValues,
+    schema: mergedSchema,
+    schemaDetectors: allSchemaDetectors
+  });
+  var sortedContext = useSorting({
     sorting: sorting,
     inMemory: inMemory,
     inMemoryValues: inMemoryValues,
@@ -200,7 +206,20 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
    */
   var _useFocus = useFocus(),
     wrappingDivFocusProps = _useFocus.focusProps,
-    focusContext = _objectWithoutProperties(_useFocus, _excluded2);
+    onFocusUpdate = _useFocus.onFocusUpdate,
+    focusedCell = _useFocus.focusedCell,
+    setFocusedCell = _useFocus.setFocusedCell,
+    setIsFocusedCellInView = _useFocus.setIsFocusedCellInView,
+    focusFirstVisibleInteractiveCell = _useFocus.focusFirstVisibleInteractiveCell;
+  var focusContext = useMemo(function () {
+    return {
+      onFocusUpdate: onFocusUpdate,
+      focusedCell: focusedCell,
+      setFocusedCell: setFocusedCell,
+      setIsFocusedCellInView: setIsFocusedCellInView,
+      focusFirstVisibleInteractiveCell: focusFirstVisibleInteractiveCell
+    };
+  }, [onFocusUpdate, focusedCell, setFocusedCell, setIsFocusedCellInView, focusFirstVisibleInteractiveCell]);
 
   /**
    * Cell popover
@@ -230,7 +249,7 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
     setIsFullScreen: setIsFullScreen,
     focusContext: focusContext,
     cellPopoverContext: cellPopoverContext,
-    sortingContext: sortingContext,
+    sortedContext: sortedContext,
     pagination: pagination,
     rowCount: rowCount,
     visibleColCount: visibleColCount
@@ -277,12 +296,25 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
     gridAriaProps['aria-labelledby'] = "".concat(rest['aria-labelledby'], " ").concat(pagination ? ariaLabelledById : '');
     delete rest['aria-labelledby'];
   }
+  var onKeyDown = useCallback(function (event) {
+    var _gridItemsRendered$cu;
+    createKeyDownHandler({
+      gridElement: contentRef.current,
+      visibleColCount: visibleColCount,
+      visibleRowCount: visibleRowCount,
+      visibleRowStartIndex: ((_gridItemsRendered$cu = gridItemsRendered.current) === null || _gridItemsRendered$cu === void 0 ? void 0 : _gridItemsRendered$cu.visibleRowStartIndex) || 0,
+      rowCount: rowCount,
+      pagination: pagination,
+      hasFooter: !!renderFooterCellValue,
+      focusContext: focusContext
+    })(event);
+  }, [focusContext, visibleColCount, visibleRowCount, rowCount, pagination, renderFooterCellValue]);
   return ___EmotionJSX(DataGridFocusContext.Provider, {
     value: focusContext
   }, ___EmotionJSX(DataGridCellPopoverContext.Provider, {
     value: cellPopoverContext
-  }, ___EmotionJSX(DataGridSortingContext.Provider, {
-    value: sortingContext
+  }, ___EmotionJSX(DataGridSortedContext.Provider, {
+    value: sortedContext
   }, ___EmotionJSX(EuiFocusTrap, {
     disabled: !isFullScreen,
     className: "euiDataGrid__focusWrap"
@@ -318,16 +350,7 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
   }) : null, ___EmotionJSX("div", _extends({
     // eslint-disable-line jsx-a11y/interactive-supports-focus
     ref: contentRef,
-    onKeyDown: createKeyDownHandler({
-      gridElement: contentRef.current,
-      visibleColCount: visibleColCount,
-      visibleRowCount: visibleRowCount,
-      visibleRowStartIndex: ((_gridItemsRendered$cu = gridItemsRendered.current) === null || _gridItemsRendered$cu === void 0 ? void 0 : _gridItemsRendered$cu.visibleRowStartIndex) || 0,
-      rowCount: rowCount,
-      pagination: pagination,
-      hasFooter: !!renderFooterCellValue,
-      focusContext: focusContext
-    }),
+    onKeyDown: onKeyDown,
     "data-test-subj": "euiDataGridBody",
     className: "euiDataGrid__content",
     role: "grid",
@@ -343,15 +366,17 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
     switchColumnPos: switchColumnPos,
     onColumnResize: onColumnResize,
     schemaDetectors: allSchemaDetectors,
+    sorting: sorting,
     pagination: pagination,
     renderCellValue: renderCellValue,
+    cellContext: cellContext,
     renderCellPopover: renderCellPopover,
     renderFooterCellValue: renderFooterCellValue,
     rowCount: rowCount,
     visibleRows: visibleRows,
     interactiveCellId: interactiveCellId,
     rowHeightsOptions: rowHeightsOptions,
-    virtualizationOptions: virtualizationOptions || {},
+    virtualizationOptions: virtualizationOptions || emptyVirtualizationOptions,
     isFullScreen: isFullScreen,
     gridStyles: gridStyles,
     gridWidth: gridWidth,

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

@@ -1,5 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -48,10 +48,12 @@ export var useColumnWidths = function useColumnWidths(_ref) {
     onColumnResize = _ref.onColumnResize;
   var computeColumnWidths = useCallback(function () {
     return columns.filter(doesColumnHaveAnInitialWidth).reduce(function (initialWidths, column) {
-      initialWidths[column.id] = column.initialWidth;
-      return initialWidths;
+      return _objectSpread(_objectSpread({}, initialWidths), {}, _defineProperty({}, column.id, column.initialWidth));
     }, {});
   }, [columns]);
+
+  // Passes initializer function for performance, so computing only runs once on init
+  // @see https://react.dev/reference/react/useState#examples-initializer
   var _useState = useState(computeColumnWidths),
     _useState2 = _slicedToArray(_useState, 2),
     columnWidths = _useState2[0],
@@ -60,14 +62,16 @@ export var useColumnWidths = function useColumnWidths(_ref) {
     setColumnWidths(computeColumnWidths());
   }, [computeColumnWidths]);
   var setColumnWidth = useCallback(function (columnId, width) {
-    setColumnWidths(_objectSpread(_objectSpread({}, columnWidths), {}, _defineProperty({}, columnId, width)));
+    setColumnWidths(function (prevColumnWidths) {
+      return _objectSpread(_objectSpread({}, prevColumnWidths), {}, _defineProperty({}, columnId, width));
+    });
     if (onColumnResize) {
       onColumnResize({
         columnId: columnId,
         width: width
       });
     }
-  }, [columnWidths, onColumnResize]);
+  }, [onColumnResize]);
 
   // Used by react-window to determine actual column widths
   var getColumnWidth = useCallback(function (index) {

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

@@ -87,14 +87,16 @@ export var useFocus = function useFocus() {
       }
     };
   }, [isFocusedCellInView, focusFirstVisibleInteractiveCell]);
-  return {
-    onFocusUpdate: onFocusUpdate,
-    focusedCell: focusedCell,
-    setFocusedCell: setFocusedCell,
-    setIsFocusedCellInView: setIsFocusedCellInView,
-    focusFirstVisibleInteractiveCell: focusFirstVisibleInteractiveCell,
-    focusProps: focusProps
-  };
+  return useMemo(function () {
+    return {
+      onFocusUpdate: onFocusUpdate,
+      focusedCell: focusedCell,
+      setFocusedCell: setFocusedCell,
+      setIsFocusedCellInView: setIsFocusedCellInView,
+      focusFirstVisibleInteractiveCell: focusFirstVisibleInteractiveCell,
+      focusProps: focusProps
+    };
+  }, [onFocusUpdate, focusedCell, setFocusedCell, setIsFocusedCellInView, focusFirstVisibleInteractiveCell, focusProps]);
 };
 export var notifyCellOfFocusState = function notifyCellOfFocusState(cellsUpdateFocus, cell, isFocused) {
   var key = "".concat(cell[0], "-").concat(cell[1]);

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

@@ -7,11 +7,11 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * Side Public License, v 1.
  */
 
-import { useEffect, useState, useContext } from 'react';
+import { useEffect, useState, useContext, useMemo } from 'react';
 import { IS_JEST_ENVIRONMENT } from '../../../utils';
 import { useUpdateEffect, useForceRender } from '../../../services';
 import { useResizeObserver } from '../../observer/resize_observer';
-import { DataGridSortingContext } from './sorting';
+import { DataGridSortedContext } from './sorting';
 export var useFinalGridDimensions = function useFinalGridDimensions(_ref) {
   var unconstrainedHeight = _ref.unconstrainedHeight,
     unconstrainedWidth = _ref.unconstrainedWidth,
@@ -83,42 +83,43 @@ export var useUnconstrainedHeight = function useUnconstrainedHeight(_ref2) {
     footerRowHeight = _ref2.footerRowHeight,
     scrollBarHeight = _ref2.scrollBarHeight,
     innerGridRef = _ref2.innerGridRef;
-  var _useContext = useContext(DataGridSortingContext),
+  var _useContext = useContext(DataGridSortedContext),
     getCorrectRowIndex = _useContext.getCorrectRowIndex;
-  var knownHeight = 0; // tracks the pixel height of rows we know the size of
-  var knownRowCount = 0; // how many rows we know the size of
-  for (var i = startRow; i < endRow; i++) {
-    var correctRowIndex = getCorrectRowIndex(i); // map visible row to logical row
-
-    // lookup the height configuration of this row
-    var rowHeightOption = rowHeightUtils.getRowHeightOption(correctRowIndex, rowHeightsOptions);
-    if (rowHeightOption) {
-      // this row's height is known
-      knownRowCount++;
-      knownHeight += rowHeightUtils.getCalculatedHeight(rowHeightOption, defaultRowHeight, correctRowIndex, rowHeightUtils.isRowHeightOverride(correctRowIndex, rowHeightsOptions));
-    }
-  }
-
-  // how many rows to provide space for on the screen
-  var rowCountToAffordFor = endRow - startRow;
-
   // watch the inner element for a change to its width
   // which may cause the horizontal scrollbar to be added or removed
   var _useResizeObserver = useResizeObserver(innerGridRef.current, 'width'),
     innerWidth = _useResizeObserver.width;
   var forceRender = useForceRender();
   useUpdateEffect(forceRender, [innerWidth]);
-  var unconstrainedHeight = defaultRowHeight * (rowCountToAffordFor - knownRowCount) +
-  // guess how much space is required for unknown rows
-  knownHeight +
-  // computed pixel height of the known rows
-  headerRowHeight +
-  // account for header
-  footerRowHeight +
-  // account for footer
-  scrollBarHeight; // account for horizontal scrollbar
+  return useMemo(function () {
+    var knownHeight = 0; // tracks the pixel height of rows we know the size of
+    var knownRowCount = 0; // how many rows we know the size of
+    for (var i = startRow; i < endRow; i++) {
+      var correctRowIndex = getCorrectRowIndex(i); // map visible row to logical row
+
+      // lookup the height configuration of this row
+      var rowHeightOption = rowHeightUtils.getRowHeightOption(correctRowIndex, rowHeightsOptions);
+      if (rowHeightOption) {
+        // this row's height is known
+        knownRowCount++;
+        knownHeight += rowHeightUtils.getCalculatedHeight(rowHeightOption, defaultRowHeight, correctRowIndex, rowHeightUtils.isRowHeightOverride(correctRowIndex, rowHeightsOptions));
+      }
+    }
+
+    // how many rows to provide space for on the screen
+    var rowCountToAffordFor = endRow - startRow;
+    var unconstrainedHeight = defaultRowHeight * (rowCountToAffordFor - knownRowCount) +
+    // guess how much space is required for unknown rows
+    knownHeight +
+    // computed pixel height of the known rows
+    headerRowHeight +
+    // account for header
+    footerRowHeight +
+    // account for footer
+    scrollBarHeight; // account for horizontal scrollbar
 
-  return unconstrainedHeight;
+    return unconstrainedHeight;
+  }, [defaultRowHeight, endRow, footerRowHeight, headerRowHeight, startRow, getCorrectRowIndex, rowHeightUtils, rowHeightsOptions, scrollBarHeight]);
 };
 
 /**

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

@@ -13,7 +13,7 @@ export var useImperativeGridRef = function useImperativeGridRef(_ref) {
     setIsFullScreen = _ref.setIsFullScreen,
     focusContext = _ref.focusContext,
     cellPopoverContext = _ref.cellPopoverContext,
-    sortedRowMap = _ref.sortingContext.sortedRowMap,
+    sortedRowMap = _ref.sortedContext.sortedRowMap,
     pagination = _ref.pagination,
     rowCount = _ref.rowCount,
     visibleColCount = _ref.visibleColCount;

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

@@ -20,7 +20,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useForceRender, useLatest } from '../../../services';
 import { isNumber, isObject } from '../../../services/predicate';
-import { DataGridSortingContext } from './sorting';
+import { DataGridSortedContext } from './sorting';
 
 // TODO: Once JS variables are available, use them here instead of hard-coded maps
 export var cellPaddingsMap = {
@@ -325,7 +325,7 @@ export var useRowHeightUtils = function useRowHeightUtils(_ref2) {
 export var useDefaultRowHeight = function useDefaultRowHeight(_ref3) {
   var rowHeightsOptions = _ref3.rowHeightsOptions,
     rowHeightUtils = _ref3.rowHeightUtils;
-  var _useContext = useContext(DataGridSortingContext),
+  var _useContext = useContext(DataGridSortedContext),
     getCorrectRowIndex = _useContext.getCorrectRowIndex;
 
   // `minRowHeight` is primarily used by undefined & lineCount heights

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

@@ -7,9 +7,9 @@
  */
 
 import { createContext, useMemo, useCallback } from 'react';
+import { useDeepEqual } from '../../../services';
 import { defaultComparator } from './data_grid_schema';
-export var DataGridSortingContext = /*#__PURE__*/createContext({
-  sorting: undefined,
+export var DataGridSortedContext = /*#__PURE__*/createContext({
   sortedRowMap: [],
   getCorrectRowIndex: function getCorrectRowIndex(number) {
     return number;
@@ -22,22 +22,18 @@ export var useSorting = function useSorting(_ref) {
     schema = _ref.schema,
     schemaDetectors = _ref.schemaDetectors,
     startRow = _ref.startRow;
-  var sortingColumns = sorting === null || sorting === void 0 ? void 0 : sorting.columns;
-  var sortedRowMap = useMemo(function () {
-    var rowMap = [];
+  var sortingColumns = useDeepEqual(sorting === null || sorting === void 0 ? void 0 : sorting.columns);
+  var sortedWrappedValues = useMemo(function () {
     if ((inMemory === null || inMemory === void 0 ? void 0 : inMemory.level) === 'sorting' && sortingColumns != null && sortingColumns.length > 0) {
       var inMemoryRowIndices = Object.keys(inMemoryValues);
-      var wrappedValues = [];
-      for (var i = 0; i < inMemoryRowIndices.length; i++) {
-        var inMemoryRow = inMemoryValues[inMemoryRowIndices[i]];
-        wrappedValues.push({
-          index: i,
-          values: inMemoryRow
-        });
-      }
-      wrappedValues.sort(function (a, b) {
-        for (var _i = 0; _i < sortingColumns.length; _i++) {
-          var column = sortingColumns[_i];
+      return inMemoryRowIndices.map(function (row, index) {
+        return {
+          index: index,
+          values: inMemoryValues[row]
+        };
+      }).sort(function (a, b) {
+        for (var i = 0; i < sortingColumns.length; i++) {
+          var column = sortingColumns[i];
           var aValue = a.values[column.id];
           var bValue = b.values[column.id];
 
@@ -45,8 +41,8 @@ export var useSorting = function useSorting(_ref) {
           var comparator = defaultComparator;
           if (schema.hasOwnProperty(column.id)) {
             var columnType = schema[column.id].columnType;
-            for (var _i2 = 0; _i2 < schemaDetectors.length; _i2++) {
-              var detector = schemaDetectors[_i2];
+            for (var _i = 0; _i < schemaDetectors.length; _i++) {
+              var detector = schemaDetectors[_i];
               if (detector.type === columnType && detector.hasOwnProperty('comparator')) {
                 comparator = detector.comparator;
               }
@@ -61,12 +57,17 @@ export var useSorting = function useSorting(_ref) {
         }
         return 0;
       });
-      for (var _i3 = 0; _i3 < wrappedValues.length; _i3++) {
-        rowMap[_i3] = wrappedValues[_i3].index;
-      }
     }
-    return rowMap;
   }, [inMemory === null || inMemory === void 0 ? void 0 : inMemory.level, inMemoryValues, sortingColumns, schema, schemaDetectors]);
+  var sortedRowMap = useMemo(function () {
+    if ((inMemory === null || inMemory === void 0 ? void 0 : inMemory.level) === 'sorting' && sortingColumns != null && sortingColumns.length > 0 && sortedWrappedValues != null) {
+      return sortedWrappedValues.map(function (row) {
+        return row.index;
+      });
+    } else {
+      return [];
+    }
+  }, [inMemory === null || inMemory === void 0 ? void 0 : inMemory.level, sortingColumns, sortedWrappedValues]);
 
   // Given a visible row index, obtain the unpaginated & unsorted
   // row index from the passed cell data
@@ -76,9 +77,10 @@ export var useSorting = function useSorting(_ref) {
     var unsortedRowIndex = unpaginatedRowIndex in sortedRowMap ? sortedRowMap[unpaginatedRowIndex] : unpaginatedRowIndex;
     return unsortedRowIndex;
   }, [startRow, sortedRowMap]);
-  return {
-    sorting: sorting,
-    sortedRowMap: sortedRowMap,
-    getCorrectRowIndex: getCorrectRowIndex
-  };
+  return useMemo(function () {
+    return {
+      sortedRowMap: sortedRowMap,
+      getCorrectRowIndex: getCorrectRowIndex
+    };
+  }, [sortedRowMap, getCorrectRowIndex]);
 };

package/optimize/es/components/date_picker/super_date_picker/super_update_button.js

@@ -7,7 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["className", "needsUpdate", "isLoading", "isDisabled", "onClick", "toolTipProps", "showTooltip", "iconOnly", "responsive", "textProps", "fill"];
+var _excluded = ["children", "className", "needsUpdate", "isLoading", "isDisabled", "onClick", "toolTipProps", "showTooltip", "iconOnly", "responsive", "textProps", "fill"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -82,6 +82,7 @@ export var EuiSuperUpdateButton = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
+        children = _this$props.children,
         className = _this$props.className,
         needsUpdate = _this$props.needsUpdate,
         isLoading = _this$props.isLoading,
@@ -97,31 +98,6 @@ export var EuiSuperUpdateButton = /*#__PURE__*/function (_Component) {
       // Force responsive for "all" if `iconOnly = true`
       var responsive = iconOnly ? 'all' : _responsive;
       var classes = classNames('euiSuperUpdateButton', className);
-      var buttonText = ___EmotionJSX(EuiI18n, {
-        token: "euiSuperUpdateButton.refreshButtonLabel",
-        default: "Refresh"
-      });
-      if (needsUpdate || isLoading) {
-        buttonText = isLoading ? ___EmotionJSX(EuiI18n, {
-          token: "euiSuperUpdateButton.updatingButtonLabel",
-          default: "Updating"
-        }) : ___EmotionJSX(EuiI18n, {
-          token: "euiSuperUpdateButton.updateButtonLabel",
-          default: "Update"
-        });
-      }
-      var tooltipContent;
-      if (isDisabled) {
-        tooltipContent = ___EmotionJSX(EuiI18n, {
-          token: "euiSuperUpdateButton.cannotUpdateTooltip",
-          default: "Cannot update"
-        });
-      } else if (needsUpdate && !isLoading) {
-        tooltipContent = ___EmotionJSX(EuiI18n, {
-          token: "euiSuperUpdateButton.clickToApplyTooltip",
-          default: "Click to apply"
-        });
-      }
       var sharedButtonProps = {
         color: needsUpdate || isLoading ? 'success' : 'primary',
         iconType: needsUpdate || isLoading ? 'kqlFunction' : 'refresh',
@@ -129,9 +105,10 @@ export var EuiSuperUpdateButton = /*#__PURE__*/function (_Component) {
         onClick: onClick,
         isLoading: isLoading
       };
+      var buttonContent = this.renderButtonContent();
       return ___EmotionJSX(EuiToolTip, _extends({
         ref: this.setTootipRef,
-        content: tooltipContent,
+        content: this.renderTooltipContent(),
         position: "bottom"
       }, toolTipProps), ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiShowFor, {
         sizes: responsive || 'none'
@@ -143,7 +120,7 @@ export var EuiSuperUpdateButton = /*#__PURE__*/function (_Component) {
         textProps: _objectSpread(_objectSpread({}, restTextProps), {}, {
           className: classNames('euiScreenReaderOnly', restTextProps && restTextProps.className)
         })
-      }, rest), buttonText)), ___EmotionJSX(EuiHideFor, {
+      }, rest), buttonContent)), ___EmotionJSX(EuiHideFor, {
         sizes: responsive || 'none'
       }, ___EmotionJSX(EuiButton, _extends({
         className: classes,
@@ -151,7 +128,50 @@ export var EuiSuperUpdateButton = /*#__PURE__*/function (_Component) {
       }, sharedButtonProps, {
         fill: fill,
         textProps: restTextProps
-      }, rest), buttonText))));
+      }, rest), buttonContent))));
+    }
+  }, {
+    key: "renderButtonContent",
+    value: function renderButtonContent() {
+      var _this$props2 = this.props,
+        children = _this$props2.children,
+        isLoading = _this$props2.isLoading,
+        needsUpdate = _this$props2.needsUpdate;
+      if (children) {
+        return children;
+      }
+      if (isLoading) {
+        return ___EmotionJSX(EuiI18n, {
+          token: "euiSuperUpdateButton.updatingButtonLabel",
+          default: "Updating"
+        });
+      }
+      if (needsUpdate) {
+        return ___EmotionJSX(EuiI18n, {
+          token: "euiSuperUpdateButton.updateButtonLabel",
+          default: "Update"
+        });
+      }
+      return ___EmotionJSX(EuiI18n, {
+        token: "euiSuperUpdateButton.refreshButtonLabel",
+        default: "Refresh"
+      });
+    }
+  }, {
+    key: "renderTooltipContent",
+    value: function renderTooltipContent() {
+      if (this.props.isDisabled) {
+        return ___EmotionJSX(EuiI18n, {
+          token: "euiSuperUpdateButton.cannotUpdateTooltip",
+          default: "Cannot update"
+        });
+      }
+      if (this.props.needsUpdate && !this.props.isLoading) {
+        return ___EmotionJSX(EuiI18n, {
+          token: "euiSuperUpdateButton.clickToApplyTooltip",
+          default: "Click to apply"
+        });
+      }
     }
   }]);
   return EuiSuperUpdateButton;

package/optimize/es/components/facet/facet_button.styles.js

@@ -9,12 +9,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { euiTextTruncate, euiTextShift, logicalTextAlignCSS } from '../../global_styling';
-import { euiLinkFocusCSS } from '../link/link.styles';
 export var euiFacetButtonStyles = function euiFacetButtonStyles(_ref3) {
   var euiTheme = _ref3.euiTheme;
   return {
     // Base
-    euiFacetButton: /*#__PURE__*/css(logicalTextAlignCSS('left'), " &:hover,&:focus{&:not(:disabled) [class*='euiFacetButton__text']{text-decoration:underline;}}&:focus:not(:disabled) [class*='euiFacetButton__text']{", euiLinkFocusCSS(euiTheme), ";}&:disabled{color:", euiTheme.colors.disabledText, ";pointer-events:none;&:hover,&:focus{text-decoration:none;}};label:euiFacetButton;")
+    euiFacetButton: /*#__PURE__*/css(logicalTextAlignCSS('left'), " &:not(:disabled){&:hover,&:focus{text-decoration:none;.euiFacetButton__text{text-decoration:underline;}}&:focus .euiFacetButton__text{text-decoration-thickness:", euiTheme.border.width.thick, ";}}&:disabled{color:", euiTheme.colors.disabledText, ";pointer-events:none;};label:euiFacetButton;")
   };
 };
 export var euiFacetButtonTextStyles = function euiFacetButtonTextStyles(_ref4) {

package/optimize/es/components/flex/flex_grid.js

@@ -1,6 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "gutterSize", "direction", "alignItems", "responsive", "columns", "component"];
+var _excluded = ["children", "className", "style", "gutterSize", "direction", "alignItems", "responsive", "columns", "component"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -9,9 +12,9 @@ var _excluded = ["children", "className", "gutterSize", "direction", "alignItems
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { euiFlexGridStyles } from './flex_grid.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var DIRECTIONS = ['row', 'column'];
@@ -20,6 +23,7 @@ export var GUTTER_SIZES = ['none', 's', 'm', 'l', 'xl'];
 export var EuiFlexGrid = function EuiFlexGrid(_ref) {
   var children = _ref.children,
     className = _ref.className,
+    style = _ref.style,
     _ref$gutterSize = _ref.gutterSize,
     gutterSize = _ref$gutterSize === void 0 ? 'l' : _ref$gutterSize,
     _ref$direction = _ref.direction,
@@ -33,13 +37,20 @@ export var EuiFlexGrid = function EuiFlexGrid(_ref) {
     _ref$component = _ref.component,
     Component = _ref$component === void 0 ? 'div' : _ref$component,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var gridTemplateRows = direction === 'column' ? Math.ceil(React.Children.count(children) / columns) : 0;
-  var euiTheme = useEuiTheme();
-  var styles = euiFlexGridStyles(euiTheme, gridTemplateRows);
-  var cssStyles = [styles.euiFlexGrid, styles.gutterSizes[gutterSize], styles.direction[direction], styles.alignItems[alignItems], styles.columnCount[columns], responsive && styles.responsive];
   var classes = classNames('euiFlexGrid', className);
+  var styles = useEuiMemoizedStyles(euiFlexGridStyles);
+  var cssStyles = [styles.euiFlexGrid, styles.gutterSizes[gutterSize], styles.direction[direction], styles.alignItems[alignItems], styles.columnCount[columns], responsive && styles.responsive];
+  var columnDirectionStyles = useMemo(function () {
+    if (direction === 'column') {
+      var rowsToRender = Math.ceil(React.Children.count(children) / columns);
+      return {
+        gridTemplateRows: "repeat(".concat(rowsToRender, ", 1fr)")
+      };
+    }
+  }, [direction, columns, children]);
   return ___EmotionJSX(Component, _extends({
     css: cssStyles,
-    className: classes
+    className: classes,
+    style: columnDirectionStyles ? _objectSpread(_objectSpread({}, style), columnDirectionStyles) : style
   }, rest), children);
 };