@elastic/eui 96.0.0 → 97.0.0-backport.0

package/optimize/es/components/button/button_display/_button_display.styles.js

@@ -7,12 +7,12 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { euiFontSize, logicalCSS, logicalShorthandCSS, logicalTextAlignStyle } from '../../../global_styling';
+import { euiFontSize, logicalCSS, logicalShorthandCSS, logicalTextAlignCSS } from '../../../global_styling';
 import { euiButtonSizeMap } from '../../../themes/amsterdam/global_styling/mixins';
 // Provides a solid reset and base for handling sizing layout
 // Does not include any visual styles
 export var euiButtonBaseCSS = function euiButtonBaseCSS() {
-  return "\n    display: inline-block;\n    appearance: none;\n    cursor: pointer;\n    ".concat(logicalTextAlignStyle('center'), ";\n    white-space: nowrap;\n    ").concat(logicalCSS('max-width', '100%'), ";\n    vertical-align: middle;\n  ");
+  return "\n    display: inline-block;\n    appearance: none;\n    cursor: pointer;\n    ".concat(logicalTextAlignCSS('center'), ";\n    white-space: nowrap;\n    ").concat(logicalCSS('max-width', '100%'), ";\n    vertical-align: middle;\n  ");
 };
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "8595p9-isDisabled",

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

@@ -14,7 +14,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Side Public License, v 1.
  */
 
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, memo } from 'react';
 import classNames from 'classnames';
 import { useDefaultColumnWidth, useColumnWidths } from '../utils/col_widths';
 import { useRowHeightUtils, useDefaultRowHeight } from '../utils/row_heights';
@@ -22,7 +22,7 @@ import { useDataGridHeader } from './header';
 import { useDataGridFooter } from './footer';
 import { CellWrapper } from './cell';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_ref) {
+export var EuiDataGridBodyCustomRender = /*#__PURE__*/memo(function (_ref) {
   var renderCustomGridBody = _ref.renderCustomGridBody,
     renderCellValue = _ref.renderCellValue,
     cellContext = _ref.cellContext,
@@ -78,27 +78,31 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
     }),
     setRowHeight = _useDefaultRowHeight.setRowHeight,
     getRowHeight = _useDefaultRowHeight.getRowHeight;
-
-  /**
-   * Header & footer
-   */
-  var _useDataGridHeader = useDataGridHeader({
+  var headerRowProps = useMemo(function () {
+    return {
       leadingControlColumns: leadingControlColumns,
       trailingControlColumns: trailingControlColumns,
       columns: columns,
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
       setColumnWidth: setColumnWidth,
-      visibleColCount: visibleColCount,
       setVisibleColumns: setVisibleColumns,
+      visibleColCount: visibleColCount,
       switchColumnPos: switchColumnPos,
       sorting: sorting,
       schema: schema,
       schemaDetectors: schemaDetectors,
       gridStyles: gridStyles
-    }),
+    };
+  }, [leadingControlColumns, trailingControlColumns, columns, columnWidths, defaultColumnWidth, setColumnWidth, visibleColCount, setVisibleColumns, switchColumnPos, sorting, schema, schemaDetectors, gridStyles]);
+
+  /**
+   * Header & footer
+   */
+  var _useDataGridHeader = useDataGridHeader(headerRowProps),
     headerRow = _useDataGridHeader.headerRow;
-  var _useDataGridFooter = useDataGridFooter({
+  var footerRowProps = useMemo(function () {
+    return {
       renderFooterCellValue: renderFooterCellValue,
       renderCellPopover: renderCellPopover,
       rowIndex: visibleRows.visibleRowCount,
@@ -112,7 +116,9 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
       defaultColumnWidth: defaultColumnWidth,
       schema: schema,
       gridStyles: gridStyles
-    }),
+    };
+  }, [renderFooterCellValue, renderCellPopover, visibleRows.visibleRowCount, visibleColCount, interactiveCellId, leadingControlColumns, trailingControlColumns, columns, columnWidths, defaultColumnWidth, schema, gridStyles]);
+  var _useDataGridFooter = useDataGridFooter(footerRowProps),
     footerRow = _useDataGridFooter.footerRow;
 
   /**
@@ -139,19 +145,22 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
       gridStyles: gridStyles
     };
   }, [schema, schemaDetectors, pagination, columns, leadingControlColumns, trailingControlColumns, visibleColCount, columnWidths, defaultColumnWidth, renderCellValue, cellContext, renderCellPopover, interactiveCellId, setRowHeight, rowHeightsOptions, rowHeightUtils, gridStyles]);
-  var Cell = useCallback(function (_ref2) {
-    var colIndex = _ref2.colIndex,
-      visibleRowIndex = _ref2.visibleRowIndex,
-      rest = _objectWithoutProperties(_ref2, _excluded);
-    var style = {
-      height: rowHeightUtils.isAutoHeight(visibleRowIndex, rowHeightsOptions) ? 'auto' : getRowHeight(visibleRowIndex)
+  var Cell = useMemo(function () {
+    return function (_ref2) {
+      var _rest$rowHeightsOptio;
+      var colIndex = _ref2.colIndex,
+        visibleRowIndex = _ref2.visibleRowIndex,
+        rest = _objectWithoutProperties(_ref2, _excluded);
+      var style = {
+        height: rowHeightUtils.isAutoHeight(visibleRowIndex, (_rest$rowHeightsOptio = rest.rowHeightsOptions) !== null && _rest$rowHeightsOptio !== void 0 ? _rest$rowHeightsOptio : rowHeightsOptions) ? 'auto' : getRowHeight(visibleRowIndex)
+      };
+      var props = _objectSpread({
+        colIndex: colIndex,
+        visibleRowIndex: visibleRowIndex,
+        style: style
+      }, cellProps);
+      return ___EmotionJSX(CellWrapper, _extends({}, props, rest));
     };
-    var props = _objectSpread({
-      colIndex: colIndex,
-      visibleRowIndex: visibleRowIndex,
-      style: style
-    }, cellProps);
-    return ___EmotionJSX(CellWrapper, _extends({}, props, rest));
   }, [cellProps, getRowHeight, rowHeightUtils, rowHeightsOptions]);
 
   // Allow consumers to pass custom props/attributes/listeners etc. to the wrapping div
@@ -159,12 +168,20 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
     _useState2 = _slicedToArray(_useState, 2),
     customGridBodyProps = _useState2[0],
     setCustomGridBodyProps = _useState2[1];
+  var customDataGridBodyProps = useMemo(function () {
+    return {
+      gridWidth: gridWidth,
+      visibleColumns: visibleColumns,
+      visibleRowData: visibleRows,
+      Cell: Cell,
+      setCustomGridBodyProps: setCustomGridBodyProps,
+      headerRow: headerRow,
+      footerRow: footerRow
+    };
+  }, [gridWidth, visibleColumns, visibleRows, Cell, setCustomGridBodyProps, headerRow, footerRow]);
+  var BodyElement = renderCustomGridBody;
   return ___EmotionJSX("div", _extends({}, customGridBodyProps, {
     className: classNames('euiDataGrid__customRenderBody', className, customGridBodyProps === null || customGridBodyProps === void 0 ? void 0 : customGridBodyProps.className)
-  }), headerRow, renderCustomGridBody({
-    visibleColumns: visibleColumns,
-    visibleRowData: visibleRows,
-    Cell: Cell,
-    setCustomGridBodyProps: setCustomGridBodyProps
-  }), footerRow);
-};
+  }), ___EmotionJSX(BodyElement, customDataGridBodyProps));
+});
+EuiDataGridBodyCustomRender.displayName = 'EuiDataGridBodyCustomRender';

package/optimize/es/components/date_picker/date_picker_range.styles.js

@@ -11,7 +11,7 @@ import { css } from '@emotion/react';
 import { logicalCSS } from '../../global_styling';
 import { euiShadowMedium } from '../../themes/amsterdam/global_styling/mixins';
 export var euiDatePickerRangeStyles = {
-  euiDatePickerRange: /*#__PURE__*/css(".euiPopover,.react-datepicker__input-container,.euiDatePicker{", logicalCSS('height', '100%'), ";};label:euiDatePickerRange;")
+  euiDatePickerRange: /*#__PURE__*/css(".euiPopover,.react-datepicker__input-container,.euiDatePicker{", logicalCSS('height', '100%'), ";}.euiPopover{flex:1;};label:euiDatePickerRange;")
 };
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "bicgs9-noShadow",

package/optimize/es/components/date_picker/super_date_picker/date_popover/absolute_tab.js

@@ -32,6 +32,8 @@ export var EuiAbsoluteTab = function EuiAbsoluteTab(_ref) {
     locale = _ref.locale,
     roundUp = _ref.roundUp,
     utcOffset = _ref.utcOffset,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate,
     labelPrefix = _ref.labelPrefix;
   var styles = useEuiMemoizedStyles(euiAbsoluteTabDateFormStyles);
   var _useState = useState(function () {
@@ -125,7 +127,9 @@ export var EuiAbsoluteTab = function EuiAbsoluteTab(_ref) {
     dateFormat: dateFormat,
     timeFormat: timeFormat,
     locale: locale,
-    utcOffset: utcOffset
+    utcOffset: utcOffset,
+    minDate: minDate,
+    maxDate: maxDate
   }), ___EmotionJSX(EuiFlexGroup, {
     component: "form",
     onSubmit: function onSubmit(e) {

package/optimize/es/components/date_picker/super_date_picker/date_popover/date_popover_button.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["position", "isDisabled", "isInvalid", "needsUpdating", "value", "buttonProps", "canRoundRelativeUnits", "roundUp", "onChange", "locale", "dateFormat", "utcOffset", "timeFormat", "isOpen", "onPopoverToggle", "onPopoverClose", "compressed", "timeOptions"];
+var _excluded = ["position", "isDisabled", "isInvalid", "needsUpdating", "value", "buttonProps", "canRoundRelativeUnits", "roundUp", "onChange", "locale", "dateFormat", "utcOffset", "minDate", "maxDate", "timeFormat", "isOpen", "onPopoverToggle", "onPopoverClose", "compressed", "timeOptions"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -33,6 +33,8 @@ export var EuiDatePopoverButton = function EuiDatePopoverButton(props) {
     locale = props.locale,
     dateFormat = props.dateFormat,
     utcOffset = props.utcOffset,
+    minDate = props.minDate,
+    maxDate = props.maxDate,
     timeFormat = props.timeFormat,
     isOpen = props.isOpen,
     onPopoverToggle = props.onPopoverToggle,
@@ -93,7 +95,9 @@ export var EuiDatePopoverButton = function EuiDatePopoverButton(props) {
     locale: locale,
     position: position,
     utcOffset: utcOffset,
-    timeOptions: timeOptions
+    timeOptions: timeOptions,
+    minDate: minDate,
+    maxDate: maxDate
   }));
 };
 EuiDatePopoverButton.displayName = 'EuiDatePopoverButton';

package/optimize/es/components/date_picker/super_date_picker/date_popover/date_popover_content.js

@@ -30,7 +30,9 @@ export var EuiDatePopoverContent = function EuiDatePopoverContent(_ref) {
     locale = _ref.locale,
     position = _ref.position,
     utcOffset = _ref.utcOffset,
-    timeOptions = _ref.timeOptions;
+    timeOptions = _ref.timeOptions,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate;
   var styles = useEuiMemoizedStyles(euiDatePopoverContentStyles);
   var onTabClick = function onTabClick(selectedTab) {
     switch (selectedTab.id) {
@@ -59,7 +61,9 @@ export var EuiDatePopoverContent = function EuiDatePopoverContent(_ref) {
       onChange: onChange,
       roundUp: roundUp,
       labelPrefix: labelPrefix,
-      utcOffset: utcOffset
+      utcOffset: utcOffset,
+      minDate: minDate,
+      maxDate: maxDate
     }),
     'data-test-subj': 'superDatePickerAbsoluteTab',
     'aria-label': "".concat(labelPrefix, ": ").concat(absoluteLabel)

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

@@ -37,7 +37,7 @@ import { EuiDatePopoverButton } from './date_popover/date_popover_button';
 import { EuiAutoRefresh, EuiAutoRefreshButton } from '../auto_refresh/auto_refresh';
 import { euiSuperDatePickerStyles } from './super_date_picker.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-function isRangeInvalid(start, end) {
+function isRangeInvalid(start, end, minDate, maxDate) {
   if (start === 'now' && end === 'now') {
     return true;
   }
@@ -45,7 +45,7 @@ function isRangeInvalid(start, end) {
   var endMoment = dateMath.parse(end, {
     roundUp: true
   });
-  var isInvalid = !startMoment || !endMoment || !startMoment.isValid() || !endMoment.isValid() || !moment(startMoment).isValid() || !moment(endMoment).isValid() || startMoment.isAfter(endMoment);
+  var isInvalid = !startMoment || !endMoment || !startMoment.isValid() || !endMoment.isValid() || !moment(startMoment).isValid() || !moment(endMoment).isValid() || startMoment.isAfter(endMoment) || endMoment.isBefore(startMoment) || minDate != null && startMoment.isBefore(minDate) || maxDate != null && endMoment.isAfter(maxDate);
   return isInvalid;
 }
 export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
@@ -64,7 +64,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
       },
       start: _this.props.start,
       end: _this.props.end,
-      isInvalid: isRangeInvalid(_this.props.start, _this.props.end),
+      isInvalid: isRangeInvalid(_this.props.start, _this.props.end, _this.props.minDate, _this.props.maxDate),
       hasChanged: false,
       showPrettyDuration: showPrettyDuration(_this.props.start, _this.props.end, _this.props.commonlyUsedRanges),
       isStartDatePopoverOpen: false,
@@ -73,7 +73,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
     _defineProperty(_this, "setTime", function (_ref) {
       var end = _ref.end,
         start = _ref.start;
-      var isInvalid = isRangeInvalid(start, end);
+      var isInvalid = isRangeInvalid(start, end, _this.props.minDate, _this.props.maxDate);
       _this.setState({
         start: start,
         end: end,
@@ -262,6 +262,8 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         locale = _this$props3.locale,
         timeFormat = _this$props3.timeFormat,
         utcOffset = _this$props3.utcOffset,
+        minDate = _this$props3.minDate,
+        maxDate = _this$props3.maxDate,
         compressed = _this$props3.compressed,
         onFocus = _this$props3.onFocus,
         styles = _this$props3.memoizedStyles;
@@ -336,6 +338,8 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
             utcOffset: utcOffset,
             timeFormat: timeFormat,
             locale: locale || contextLocale,
+            minDate: minDate,
+            maxDate: maxDate,
             canRoundRelativeUnits: canRoundRelativeUnits,
             isOpen: _this.state.isStartDatePopoverOpen,
             onPopoverToggle: _this.onStartDatePopoverToggle,
@@ -358,6 +362,8 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
             utcOffset: utcOffset,
             timeFormat: timeFormat,
             locale: locale || contextLocale,
+            minDate: minDate,
+            maxDate: maxDate,
             canRoundRelativeUnits: canRoundRelativeUnits,
             roundUp: true,
             isOpen: _this.state.isEndDatePopoverOpen,
@@ -463,7 +469,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
           },
           start: nextProps.start,
           end: nextProps.end,
-          isInvalid: isRangeInvalid(nextProps.start, nextProps.end),
+          isInvalid: isRangeInvalid(nextProps.start, nextProps.end, nextProps.minDate, nextProps.maxDate),
           hasChanged: false,
           showPrettyDuration: showPrettyDuration(nextProps.start, nextProps.end, nextProps.commonlyUsedRanges)
         };

package/optimize/es/components/link/external_link_icon.js

@@ -13,7 +13,7 @@ import React from 'react';
 import { useEuiMemoizedStyles } from '../../services';
 import { logicalStyle } from '../../global_styling';
 import { EuiIcon } from '../icon';
-import { EuiI18n, useEuiI18n } from '../i18n';
+import { EuiI18n } from '../i18n';
 import { EuiScreenReaderOnly } from '../accessibility';
 
 /**
@@ -31,14 +31,16 @@ export var EuiExternalLinkIcon = function EuiExternalLinkIcon(_ref2) {
     rest = _objectWithoutProperties(_ref2, _excluded);
   var iconCssStyle = useEuiMemoizedStyles(iconStyle);
   var showExternalLinkIcon = target === '_blank' && external !== false || external === true;
-  var iconAriaLabel = useEuiI18n('euiExternalLinkIcon.ariaLabel', 'External link');
-  return ___EmotionJSX(React.Fragment, null, showExternalLinkIcon && ___EmotionJSX(EuiIcon, _extends({
+  return ___EmotionJSX(React.Fragment, null, showExternalLinkIcon && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiIcon, _extends({
     css: iconCssStyle,
-    "aria-label": iconAriaLabel,
     size: "s",
-    type: "popout"
-  }, rest)), target === '_blank' && ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, ___EmotionJSX(EuiI18n, {
+    type: "popout",
+    role: "presentation"
+  }, rest)), target === '_blank' ? ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, ___EmotionJSX(EuiI18n, {
     token: "euiExternalLinkIcon.newTarget.screenReaderOnlyText",
-    default: "(opens in a new tab or window)"
-  }))));
+    default: "(external, opens in a new tab or window)"
+  }))) : ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, ___EmotionJSX(EuiI18n, {
+    token: "euiExternalLinkIcon.externalTarget.screenReaderOnlyText",
+    default: "(external)"
+  }))))));
 };

package/optimize/lib/components/button/button_display/_button_display.styles.js

@@ -17,7 +17,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 // Provides a solid reset and base for handling sizing layout
 // Does not include any visual styles
 var euiButtonBaseCSS = exports.euiButtonBaseCSS = function euiButtonBaseCSS() {
-  return "\n    display: inline-block;\n    appearance: none;\n    cursor: pointer;\n    ".concat((0, _global_styling.logicalTextAlignStyle)('center'), ";\n    white-space: nowrap;\n    ").concat((0, _global_styling.logicalCSS)('max-width', '100%'), ";\n    vertical-align: middle;\n  ");
+  return "\n    display: inline-block;\n    appearance: none;\n    cursor: pointer;\n    ".concat((0, _global_styling.logicalTextAlignCSS)('center'), ";\n    white-space: nowrap;\n    ").concat((0, _global_styling.logicalCSS)('max-width', '100%'), ";\n    vertical-align: middle;\n  ");
 };
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "8595p9-isDisabled",

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

@@ -31,7 +31,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_ref) {
+var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var renderCustomGridBody = _ref.renderCustomGridBody,
     renderCellValue = _ref.renderCellValue,
     cellContext = _ref.cellContext,
@@ -87,27 +87,31 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = function
     }),
     setRowHeight = _useDefaultRowHeight.setRowHeight,
     getRowHeight = _useDefaultRowHeight.getRowHeight;
-
-  /**
-   * Header & footer
-   */
-  var _useDataGridHeader = (0, _header.useDataGridHeader)({
+  var headerRowProps = (0, _react.useMemo)(function () {
+    return {
       leadingControlColumns: leadingControlColumns,
       trailingControlColumns: trailingControlColumns,
       columns: columns,
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
       setColumnWidth: setColumnWidth,
-      visibleColCount: visibleColCount,
       setVisibleColumns: setVisibleColumns,
+      visibleColCount: visibleColCount,
       switchColumnPos: switchColumnPos,
       sorting: sorting,
       schema: schema,
       schemaDetectors: schemaDetectors,
       gridStyles: gridStyles
-    }),
+    };
+  }, [leadingControlColumns, trailingControlColumns, columns, columnWidths, defaultColumnWidth, setColumnWidth, visibleColCount, setVisibleColumns, switchColumnPos, sorting, schema, schemaDetectors, gridStyles]);
+
+  /**
+   * Header & footer
+   */
+  var _useDataGridHeader = (0, _header.useDataGridHeader)(headerRowProps),
     headerRow = _useDataGridHeader.headerRow;
-  var _useDataGridFooter = (0, _footer.useDataGridFooter)({
+  var footerRowProps = (0, _react.useMemo)(function () {
+    return {
       renderFooterCellValue: renderFooterCellValue,
       renderCellPopover: renderCellPopover,
       rowIndex: visibleRows.visibleRowCount,
@@ -121,7 +125,9 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = function
       defaultColumnWidth: defaultColumnWidth,
       schema: schema,
       gridStyles: gridStyles
-    }),
+    };
+  }, [renderFooterCellValue, renderCellPopover, visibleRows.visibleRowCount, visibleColCount, interactiveCellId, leadingControlColumns, trailingControlColumns, columns, columnWidths, defaultColumnWidth, schema, gridStyles]);
+  var _useDataGridFooter = (0, _footer.useDataGridFooter)(footerRowProps),
     footerRow = _useDataGridFooter.footerRow;
 
   /**
@@ -148,19 +154,22 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = function
       gridStyles: gridStyles
     };
   }, [schema, schemaDetectors, pagination, columns, leadingControlColumns, trailingControlColumns, visibleColCount, columnWidths, defaultColumnWidth, renderCellValue, cellContext, renderCellPopover, interactiveCellId, setRowHeight, rowHeightsOptions, rowHeightUtils, gridStyles]);
-  var Cell = (0, _react.useCallback)(function (_ref2) {
-    var colIndex = _ref2.colIndex,
-      visibleRowIndex = _ref2.visibleRowIndex,
-      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-    var style = {
-      height: rowHeightUtils.isAutoHeight(visibleRowIndex, rowHeightsOptions) ? 'auto' : getRowHeight(visibleRowIndex)
+  var Cell = (0, _react.useMemo)(function () {
+    return function (_ref2) {
+      var _rest$rowHeightsOptio;
+      var colIndex = _ref2.colIndex,
+        visibleRowIndex = _ref2.visibleRowIndex,
+        rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+      var style = {
+        height: rowHeightUtils.isAutoHeight(visibleRowIndex, (_rest$rowHeightsOptio = rest.rowHeightsOptions) !== null && _rest$rowHeightsOptio !== void 0 ? _rest$rowHeightsOptio : rowHeightsOptions) ? 'auto' : getRowHeight(visibleRowIndex)
+      };
+      var props = _objectSpread({
+        colIndex: colIndex,
+        visibleRowIndex: visibleRowIndex,
+        style: style
+      }, cellProps);
+      return (0, _react2.jsx)(_cell.CellWrapper, (0, _extends2.default)({}, props, rest));
     };
-    var props = _objectSpread({
-      colIndex: colIndex,
-      visibleRowIndex: visibleRowIndex,
-      style: style
-    }, cellProps);
-    return (0, _react2.jsx)(_cell.CellWrapper, (0, _extends2.default)({}, props, rest));
   }, [cellProps, getRowHeight, rowHeightUtils, rowHeightsOptions]);
 
   // Allow consumers to pass custom props/attributes/listeners etc. to the wrapping div
@@ -168,12 +177,20 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = function
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     customGridBodyProps = _useState2[0],
     setCustomGridBodyProps = _useState2[1];
+  var customDataGridBodyProps = (0, _react.useMemo)(function () {
+    return {
+      gridWidth: gridWidth,
+      visibleColumns: visibleColumns,
+      visibleRowData: visibleRows,
+      Cell: Cell,
+      setCustomGridBodyProps: setCustomGridBodyProps,
+      headerRow: headerRow,
+      footerRow: footerRow
+    };
+  }, [gridWidth, visibleColumns, visibleRows, Cell, setCustomGridBodyProps, headerRow, footerRow]);
+  var BodyElement = renderCustomGridBody;
   return (0, _react2.jsx)("div", (0, _extends2.default)({}, customGridBodyProps, {
     className: (0, _classnames.default)('euiDataGrid__customRenderBody', className, customGridBodyProps === null || customGridBodyProps === void 0 ? void 0 : customGridBodyProps.className)
-  }), headerRow, renderCustomGridBody({
-    visibleColumns: visibleColumns,
-    visibleRowData: visibleRows,
-    Cell: Cell,
-    setCustomGridBodyProps: setCustomGridBodyProps
-  }), footerRow);
-};
+  }), (0, _react2.jsx)(BodyElement, customDataGridBodyProps));
+});
+EuiDataGridBodyCustomRender.displayName = 'EuiDataGridBodyCustomRender';

package/optimize/lib/components/date_picker/date_picker_range.styles.js

@@ -15,7 +15,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 var euiDatePickerRangeStyles = exports.euiDatePickerRangeStyles = {
-  euiDatePickerRange: /*#__PURE__*/(0, _react.css)(".euiPopover,.react-datepicker__input-container,.euiDatePicker{", (0, _global_styling.logicalCSS)('height', '100%'), ";};label:euiDatePickerRange;")
+  euiDatePickerRange: /*#__PURE__*/(0, _react.css)(".euiPopover,.react-datepicker__input-container,.euiDatePicker{", (0, _global_styling.logicalCSS)('height', '100%'), ";}.euiPopover{flex:1;};label:euiDatePickerRange;")
 };
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "bicgs9-noShadow",

package/optimize/lib/components/date_picker/super_date_picker/date_popover/absolute_tab.js

@@ -41,6 +41,8 @@ var EuiAbsoluteTab = exports.EuiAbsoluteTab = function EuiAbsoluteTab(_ref) {
     locale = _ref.locale,
     roundUp = _ref.roundUp,
     utcOffset = _ref.utcOffset,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate,
     labelPrefix = _ref.labelPrefix;
   var styles = (0, _services.useEuiMemoizedStyles)(_absolute_tab.euiAbsoluteTabDateFormStyles);
   var _useState = (0, _react.useState)(function () {
@@ -134,7 +136,9 @@ var EuiAbsoluteTab = exports.EuiAbsoluteTab = function EuiAbsoluteTab(_ref) {
     dateFormat: dateFormat,
     timeFormat: timeFormat,
     locale: locale,
-    utcOffset: utcOffset
+    utcOffset: utcOffset,
+    minDate: minDate,
+    maxDate: maxDate
   }), (0, _react2.jsx)(_flex.EuiFlexGroup, {
     component: "form",
     onSubmit: function onSubmit(e) {

package/optimize/lib/components/date_picker/super_date_picker/date_popover/date_popover_button.js

@@ -16,7 +16,7 @@ var _pretty_duration = require("../pretty_duration");
 var _date_popover_content = require("./date_popover_content");
 var _date_popover_button = require("./date_popover_button.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["position", "isDisabled", "isInvalid", "needsUpdating", "value", "buttonProps", "canRoundRelativeUnits", "roundUp", "onChange", "locale", "dateFormat", "utcOffset", "timeFormat", "isOpen", "onPopoverToggle", "onPopoverClose", "compressed", "timeOptions"];
+var _excluded = ["position", "isDisabled", "isInvalid", "needsUpdating", "value", "buttonProps", "canRoundRelativeUnits", "roundUp", "onChange", "locale", "dateFormat", "utcOffset", "minDate", "maxDate", "timeFormat", "isOpen", "onPopoverToggle", "onPopoverClose", "compressed", "timeOptions"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -38,6 +38,8 @@ var EuiDatePopoverButton = exports.EuiDatePopoverButton = function EuiDatePopove
     locale = props.locale,
     dateFormat = props.dateFormat,
     utcOffset = props.utcOffset,
+    minDate = props.minDate,
+    maxDate = props.maxDate,
     timeFormat = props.timeFormat,
     isOpen = props.isOpen,
     onPopoverToggle = props.onPopoverToggle,
@@ -98,7 +100,9 @@ var EuiDatePopoverButton = exports.EuiDatePopoverButton = function EuiDatePopove
     locale: locale,
     position: position,
     utcOffset: utcOffset,
-    timeOptions: timeOptions
+    timeOptions: timeOptions,
+    minDate: minDate,
+    maxDate: maxDate
   }));
 };
 EuiDatePopoverButton.displayName = 'EuiDatePopoverButton';

package/optimize/lib/components/date_picker/super_date_picker/date_popover/date_popover_content.js

@@ -37,7 +37,9 @@ var EuiDatePopoverContent = exports.EuiDatePopoverContent = function EuiDatePopo
     locale = _ref.locale,
     position = _ref.position,
     utcOffset = _ref.utcOffset,
-    timeOptions = _ref.timeOptions;
+    timeOptions = _ref.timeOptions,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate;
   var styles = (0, _services.useEuiMemoizedStyles)(_date_popover_content.euiDatePopoverContentStyles);
   var onTabClick = function onTabClick(selectedTab) {
     switch (selectedTab.id) {
@@ -66,7 +68,9 @@ var EuiDatePopoverContent = exports.EuiDatePopoverContent = function EuiDatePopo
       onChange: onChange,
       roundUp: roundUp,
       labelPrefix: labelPrefix,
-      utcOffset: utcOffset
+      utcOffset: utcOffset,
+      minDate: minDate,
+      maxDate: maxDate
     }),
     'data-test-subj': 'superDatePickerAbsoluteTab',
     'aria-label': "".concat(labelPrefix, ": ").concat(absoluteLabel)

package/optimize/lib/components/date_picker/super_date_picker/super_date_picker.js

@@ -45,7 +45,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */ // eslint-disable-line import/named
-function isRangeInvalid(start, end) {
+function isRangeInvalid(start, end, minDate, maxDate) {
   if (start === 'now' && end === 'now') {
     return true;
   }
@@ -53,7 +53,7 @@ function isRangeInvalid(start, end) {
   var endMoment = _datemath.default.parse(end, {
     roundUp: true
   });
-  var isInvalid = !startMoment || !endMoment || !startMoment.isValid() || !endMoment.isValid() || !(0, _moment.default)(startMoment).isValid() || !(0, _moment.default)(endMoment).isValid() || startMoment.isAfter(endMoment);
+  var isInvalid = !startMoment || !endMoment || !startMoment.isValid() || !endMoment.isValid() || !(0, _moment.default)(startMoment).isValid() || !(0, _moment.default)(endMoment).isValid() || startMoment.isAfter(endMoment) || endMoment.isBefore(startMoment) || minDate != null && startMoment.isBefore(minDate) || maxDate != null && endMoment.isAfter(maxDate);
   return isInvalid;
 }
 var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
@@ -72,7 +72,7 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
       },
       start: _this.props.start,
       end: _this.props.end,
-      isInvalid: isRangeInvalid(_this.props.start, _this.props.end),
+      isInvalid: isRangeInvalid(_this.props.start, _this.props.end, _this.props.minDate, _this.props.maxDate),
       hasChanged: false,
       showPrettyDuration: (0, _pretty_duration.showPrettyDuration)(_this.props.start, _this.props.end, _this.props.commonlyUsedRanges),
       isStartDatePopoverOpen: false,
@@ -81,7 +81,7 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
     (0, _defineProperty2.default)(_this, "setTime", function (_ref) {
       var end = _ref.end,
         start = _ref.start;
-      var isInvalid = isRangeInvalid(start, end);
+      var isInvalid = isRangeInvalid(start, end, _this.props.minDate, _this.props.maxDate);
       _this.setState({
         start: start,
         end: end,
@@ -270,6 +270,8 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
         locale = _this$props3.locale,
         timeFormat = _this$props3.timeFormat,
         utcOffset = _this$props3.utcOffset,
+        minDate = _this$props3.minDate,
+        maxDate = _this$props3.maxDate,
         compressed = _this$props3.compressed,
         onFocus = _this$props3.onFocus,
         styles = _this$props3.memoizedStyles;
@@ -344,6 +346,8 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
             utcOffset: utcOffset,
             timeFormat: timeFormat,
             locale: locale || contextLocale,
+            minDate: minDate,
+            maxDate: maxDate,
             canRoundRelativeUnits: canRoundRelativeUnits,
             isOpen: _this.state.isStartDatePopoverOpen,
             onPopoverToggle: _this.onStartDatePopoverToggle,
@@ -366,6 +370,8 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
             utcOffset: utcOffset,
             timeFormat: timeFormat,
             locale: locale || contextLocale,
+            minDate: minDate,
+            maxDate: maxDate,
             canRoundRelativeUnits: canRoundRelativeUnits,
             roundUp: true,
             isOpen: _this.state.isEndDatePopoverOpen,
@@ -471,7 +477,7 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
           },
           start: nextProps.start,
           end: nextProps.end,
-          isInvalid: isRangeInvalid(nextProps.start, nextProps.end),
+          isInvalid: isRangeInvalid(nextProps.start, nextProps.end, nextProps.minDate, nextProps.maxDate),
           hasChanged: false,
           showPrettyDuration: (0, _pretty_duration.showPrettyDuration)(nextProps.start, nextProps.end, nextProps.commonlyUsedRanges)
         };