@elastic/eui 93.3.0 → 93.4.0

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

@@ -12,11 +12,11 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * 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,
@@ -88,42 +88,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/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/es/components/datagrid/utils/row_heights.js

@@ -31,7 +31,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 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 = {
@@ -336,7 +336,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/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/es/components/date_picker/super_date_picker/super_date_picker.js

@@ -603,6 +603,14 @@ EuiSuperDatePickerInternal.propTypes = {
      * Props passed to the update button #EuiSuperUpdateButtonProps
      */
   updateButtonProps: PropTypes.shape({
+    /**
+       * Overrides the default button label with a custom React node.
+       *
+       * When defined, you're responsible for updating the custom label
+       * when the data needs updating (the `needsUpdate` prop)
+       * or is loading (the `isLoading` prop).
+       */
+    children: PropTypes.node,
     /**
        * Show the "Click to apply" tooltip
        */
@@ -836,6 +844,7 @@ EuiSuperDatePicker.propTypes = {
      * Props passed to the update button #EuiSuperUpdateButtonProps
      */
   updateButtonProps: PropTypes.shape({
+    children: PropTypes.node,
     showTooltip: PropTypes.bool,
     toolTipProps: PropTypes.shape({
       anchorClassName: PropTypes.string,

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

@@ -1,4 +1,4 @@
-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 _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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; }
@@ -89,6 +89,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,
@@ -104,31 +105,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',
@@ -136,9 +112,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'
@@ -150,7 +127,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,
@@ -158,7 +135,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;
@@ -176,6 +196,14 @@ EuiSuperUpdateButton.propTypes = {
   isLoading: PropTypes.bool,
   needsUpdate: PropTypes.bool,
   onClick: PropTypes.func.isRequired,
+  /**
+     * Overrides the default button label with a custom React node.
+     *
+     * When defined, you're responsible for updating the custom label
+     * when the data needs updating (the `needsUpdate` prop)
+     * or is loading (the `isLoading` prop).
+     */
+  children: PropTypes.node,
   /**
      * Show the "Click to apply" tooltip
      */

package/es/components/flex/flex_grid.js

@@ -1,5 +1,11 @@
-var _excluded = ["children", "className", "gutterSize", "direction", "alignItems", "responsive", "columns", "component"];
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["children", "className", "style", "gutterSize", "direction", "alignItems", "responsive", "columns", "component"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /*
@@ -10,10 +16,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from "prop-types";
 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'];
@@ -22,6 +28,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,
@@ -35,14 +42,21 @@ 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);
 };
 EuiFlexGrid.propTypes = {

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

@@ -82,6 +82,14 @@ var _ref9 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var _ref10 = process.env.NODE_ENV === "production" ? {
+  name: "1t690q7-column",
+  styles: "grid-auto-flow:column;label:column;"
+} : {
+  name: "1t690q7-column",
+  styles: "grid-auto-flow:column;label:column;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref11 = process.env.NODE_ENV === "production" ? {
   name: "1uinx0j-euiFlexGrid",
   styles: "display:grid;label:euiFlexGrid;"
 } : {
@@ -89,18 +97,17 @@ var _ref10 = process.env.NODE_ENV === "production" ? {
   styles: "display:grid;label:euiFlexGrid;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-// Note: the only way to get column direction working with `display: grid`
-// the same way `display: flex` works is to manually set `grid-template-rows`,
-// calculated based on the number of children in the grid
 export var euiFlexGridStyles = function euiFlexGridStyles(euiThemeContext) {
-  var gridTemplateRows = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiFlexGrid: _ref10,
+    euiFlexGrid: _ref11,
     responsive: /*#__PURE__*/css(euiMaxBreakpoint(euiThemeContext, 'm'), "{grid-template-columns:repeat(1, 1fr);grid-auto-flow:row;};label:responsive;"),
     direction: {
       row: /*#__PURE__*/css(";label:row;"),
-      column: /*#__PURE__*/css("grid-auto-flow:column;grid-template-rows:repeat(", gridTemplateRows, ", 1fr);;label:column;")
+      // Note: the only way to get column direction working with `display: grid`
+      // the same way `display: flex` works is to manually set `grid-template-rows`,
+      // calculated based on the number of children in the grid
+      column: _ref10
     },
     columnCount: {
       '1': _ref9,

package/es/components/flex/flex_group.js

@@ -10,19 +10,17 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * Side Public License, v 1.
  */
 
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useEffect } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { euiFlexGroupStyles } from './flex_group.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var GUTTER_SIZES = ['none', 'xs', 's', 'm', 'l', 'xl'];
 export var ALIGN_ITEMS = ['stretch', 'flexStart', 'flexEnd', 'center', 'baseline'];
 export var JUSTIFY_CONTENTS = ['flexStart', 'flexEnd', 'center', 'spaceBetween', 'spaceAround', 'spaceEvenly'];
 export var DIRECTIONS = ['row', 'rowReverse', 'column', 'columnReverse'];
-var isValidElement = function isValidElement(component) {
-  return ['div', 'span'].includes(component);
-};
+export var COMPONENT_TYPES = ['div', 'span'];
 export var EuiFlexGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -41,13 +39,14 @@ export var EuiFlexGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$component = _ref.component,
     component = _ref$component === void 0 ? 'div' : _ref$component,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiFlexGroupStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiFlexGroupStyles);
   var cssStyles = [styles.euiFlexGroup, responsive && !direction.includes('column') && styles.responsive, wrap && styles.wrap, styles.gutterSizes[gutterSize], styles.justifyContent[justifyContent], styles.alignItems[alignItems], styles.direction[direction]];
   var classes = classNames('euiFlexGroup', className);
-  if (!isValidElement(component)) {
-    throw new Error("".concat(component, " is not a valid element type. Use `div` or `span`."));
-  }
+  useEffect(function () {
+    if (!COMPONENT_TYPES.includes(component)) {
+      throw new Error("".concat(component, " is not a valid element type. Use `div` or `span`."));
+    }
+  }, [component]);
   return component === 'span' ? ___EmotionJSX("span", _extends({
     css: cssStyles,
     className: classes,
@@ -60,7 +59,7 @@ export var EuiFlexGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 EuiFlexGroup.propTypes = {
   alignItems: PropTypes.any,
-  component: PropTypes.oneOf(["div", "span"]),
+  component: PropTypes.any,
   direction: PropTypes.any,
   gutterSize: PropTypes.any,
   justifyContent: PropTypes.any,

package/es/components/flex/flex_item.js

@@ -10,11 +10,12 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { euiFlexItemStyles } from './flex_item.styles';
+import { euiFlexItemStyles as styles } from './flex_item.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var VALID_GROW_VALUES = [null, undefined, true, false, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 export var EuiFlexItem = function EuiFlexItem(_ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -23,8 +24,11 @@ export var EuiFlexItem = function EuiFlexItem(_ref) {
     _ref$component = _ref.component,
     Component = _ref$component === void 0 ? 'div' : _ref$component,
     rest = _objectWithoutProperties(_ref, _excluded);
-  validateGrowValue(grow);
-  var styles = euiFlexItemStyles();
+  useEffect(function () {
+    if (VALID_GROW_VALUES.indexOf(grow) === -1) {
+      throw new Error("Prop `grow` passed to `EuiFlexItem` must be a boolean or an integer between 0 and 10, received `".concat(grow, "`"));
+    }
+  }, [grow]);
   var cssStyles = [styles.euiFlexItem, !grow ? styles.growZero : styles.grow, grow && (typeof grow === 'number' ? styles.growSizes[grow] : styles.growSizes['1'])];
   var classes = classNames('euiFlexItem', className);
   return ___EmotionJSX(Component, _extends({
@@ -43,10 +47,4 @@ EuiFlexItem.propTypes = {
      * @default div
      */
   component: PropTypes.any
-};
-export var VALID_GROW_VALUES = [null, undefined, true, false, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-function validateGrowValue(value) {
-  if (VALID_GROW_VALUES.indexOf(value) === -1) {
-    throw new Error("Prop `grow` passed to `EuiFlexItem` must be a boolean or an integer between 0 and 10, received `".concat(value, "`"));
-  }
-}
+};