@elastic/eui 96.0.0 → 97.0.0

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/link/external_link_icon.js

@@ -36,14 +36,16 @@ var EuiExternalLinkIcon = exports.EuiExternalLinkIcon = function EuiExternalLink
     rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   var iconCssStyle = (0, _services.useEuiMemoizedStyles)(iconStyle);
   var showExternalLinkIcon = target === '_blank' && external !== false || external === true;
-  var iconAriaLabel = (0, _i18n.useEuiI18n)('euiExternalLinkIcon.ariaLabel', 'External link');
-  return (0, _react2.jsx)(_react.default.Fragment, null, showExternalLinkIcon && (0, _react2.jsx)(_icon.EuiIcon, (0, _extends2.default)({
+  return (0, _react2.jsx)(_react.default.Fragment, null, showExternalLinkIcon && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_icon.EuiIcon, (0, _extends2.default)({
     css: iconCssStyle,
-    "aria-label": iconAriaLabel,
     size: "s",
-    type: "popout"
-  }, rest)), target === '_blank' && (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, (0, _react2.jsx)(_i18n.EuiI18n, {
+    type: "popout",
+    role: "presentation"
+  }, rest)), target === '_blank' ? (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiExternalLinkIcon.newTarget.screenReaderOnlyText",
-    default: "(opens in a new tab or window)"
-  }))));
+    default: "(external, opens in a new tab or window)"
+  }))) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiExternalLinkIcon.externalTarget.screenReaderOnlyText",
+    default: "(external)"
+  }))))));
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "96.0.0",
+  "version": "97.0.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/src/global_styling/mixins/_index.scss

@@ -5,7 +5,4 @@
 @import 'helpers';
 @import 'states';
 
-@import 'button';
-@import 'form';
-@import 'panel';
-@import 'tool_tip';
+@import 'tool_tip'; // Needed by Elastic Charts

package/src/global_styling/mixins/_tool_tip.scss

@@ -16,10 +16,3 @@
     background-color: $euiTooltipBorderColor;
   }
 }
-
-@mixin euiToolTipTitle {
-  font-weight: $euiFontWeightBold;
-  border-bottom: solid $euiBorderWidthThin $euiTooltipBorderColor;
-  padding-bottom: $euiSizeXS;
-  margin-bottom: $euiSizeXS;
-}

package/src/themes/amsterdam/global_styling/mixins/_index.scss

@@ -7,7 +7,4 @@
 @import '../../../../global_styling/mixins/helpers';
 @import 'states';
 
-@import '../../../../global_styling/mixins/button';
-@import '../../../../global_styling/mixins/form';
-@import '../../../../global_styling/mixins/panel';
-@import '../../../../global_styling/mixins/tool_tip';
+@import '../../../../global_styling/mixins/tool_tip'; // Needed by Elastic Charts

package/test-env/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/test-env/components/datagrid/body/data_grid_body_custom.js

@@ -32,7 +32,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,
@@ -88,27 +88,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,
@@ -122,7 +126,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;
 
   /**
@@ -149,19 +155,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
@@ -169,15 +178,22 @@ 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.propTypes = {
   leadingControlColumns: _propTypes.default.arrayOf(_propTypes.default.shape({
     /**
@@ -798,4 +814,5 @@ EuiDataGridBodyCustomRender.propTypes = {
   gridItemsRendered: _propTypes.default.any.isRequired,
   wrapperRef: _propTypes.default.any.isRequired,
   className: _propTypes.default.string
-};
+};
+EuiDataGridBodyCustomRender.displayName = 'EuiDataGridBodyCustomRender';

package/test-env/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/test-env/components/link/external_link_icon.js

@@ -37,16 +37,18 @@ var EuiExternalLinkIcon = exports.EuiExternalLinkIcon = function EuiExternalLink
     rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   var iconCssStyle = (0, _services.useEuiMemoizedStyles)(iconStyle);
   var showExternalLinkIcon = target === '_blank' && external !== false || external === true;
-  var iconAriaLabel = (0, _i18n.useEuiI18n)('euiExternalLinkIcon.ariaLabel', 'External link');
-  return (0, _react2.jsx)(_react.default.Fragment, null, showExternalLinkIcon && (0, _react2.jsx)(_icon.EuiIcon, (0, _extends2.default)({
+  return (0, _react2.jsx)(_react.default.Fragment, null, showExternalLinkIcon && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_icon.EuiIcon, (0, _extends2.default)({
     css: iconCssStyle,
-    "aria-label": iconAriaLabel,
     size: "s",
-    type: "popout"
-  }, rest)), target === '_blank' && (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, (0, _react2.jsx)(_i18n.EuiI18n, {
+    type: "popout",
+    role: "presentation"
+  }, rest)), target === '_blank' ? (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiExternalLinkIcon.newTarget.screenReaderOnlyText",
-    default: "(opens in a new tab or window)"
-  }))));
+    default: "(external, opens in a new tab or window)"
+  }))) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiExternalLinkIcon.externalTarget.screenReaderOnlyText",
+    default: "(external)"
+  }))))));
 };
 EuiExternalLinkIcon.propTypes = {
   target: _propTypes.default.any,

package/src/global_styling/mixins/_button.scss

@@ -1,149 +0,0 @@
-// Provides a solid reset and base for handling sizing layout
-// Does not include any visual styles
-@mixin euiButtonBase {
-  display: inline-block;
-  appearance: none;
-  cursor: pointer;
-  height: $euiButtonHeight;
-  line-height: $euiButtonHeight; // prevents descenders from getting cut off
-  text-align: center;
-  white-space: nowrap;
-  max-width: 100%;
-  vertical-align: middle;
-}
-
-// Adds the focus (and hover) animation for translating up 1px
-@mixin euiButtonFocus {
-  @include euiCanAnimate {
-    transition: transform $euiAnimSpeedNormal ease-in-out, background-color $euiAnimSpeedNormal ease-in-out;
-
-    &:hover:not(:disabled) {
-      transform: translateY(-1px);
-    }
-
-    &:focus {
-      animation: euiButtonActive $euiAnimSpeedNormal $euiAnimSlightBounce;
-    }
-
-    &:active:not(:disabled) {
-      transform: translateY(1px);
-    }
-  }
-}
-
-// All of the button base styles including the base, focus, font, and initial styles
-// Does not include individual alterations like color or sizes
-@mixin euiButton {
-  @include euiButtonBase;
-  @include euiFont;
-  @include euiFontSize;
-  @include euiButtonFocus;
-
-  font-weight: $euiButtonFontWeight;
-  text-decoration: none;
-  outline-offset: -1px;
-
-  &:hover:not(:disabled),
-  &:focus {
-    text-decoration: underline;
-  }
-}
-
-// Correctly lays out the contents of a button when using the proper dom elements of:
-// <button>
-//   <span className="__content">
-//     {icon/spinner}
-//     {child}
-//   </span>
-// </button>
-// 1. Apply margin to all but last item in the flex.
-// 2. Margin gets flipped because of the row-reverse.
-@mixin euiButtonContent($isReverse: false) {
-  height: 100%;
-  width: 100%;
-  vertical-align: middle;
-
-  .euiButtonContent__icon,
-  .euiButtonContent__spinner {
-    flex-shrink: 0; // Ensures the icons/spinner don't scale down below their intended size
-  }
-
-  @if ($isReverse) {
-    flex-direction: row-reverse;
-
-    > * + * {
-      margin-inline-start: 0; // 1, 2
-      margin-inline-end: $euiSizeS; // 1, 2
-    }
-  } @else {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    > * + * {
-      margin-inline-start: $euiSizeS; // 1
-    }
-  }
-}
-
-@mixin euiButtonContentDisabled {
-  pointer-events: auto;
-  cursor: not-allowed;
-
-  &:hover,
-  &:focus,
-  &:focus-within {
-    text-decoration: none;
-  }
-
-  .euiButtonContent__spinner {
-    border-color: euiLoadingSpinnerBorderColors(currentColor);
-  }
-}
-
-/*
- * Creates the Amsterdam style of button with a transparent background
- */
-@mixin euiButtonDefaultStyle($color: 'primary', $includeStates: true, $transparency: $euiButtonDefaultTransparency) {
-  $backgroundColor: $color;
-
-  @if (map-has-key($euiButtonTypes, $color)) {
-    $backgroundColor: map-get($euiButtonTypes, $color);
-  }
-
-  $percentConversion: $transparency * 100%;
-  // This variable simulates the possibly darkest background the button could be on
-  // Simulates the 20% opaque color on top of the page background color
-  $backgroundColorSimulated: mix($euiPageBackgroundColor, $backgroundColor, $percentConversion);
-  // Then we can calculate the darkest text color needed
-  color: makeHighContrastColor($backgroundColor, $backgroundColorSimulated);
-  // But still use transparency
-  background-color: transparentize($backgroundColor, $transparency);
-
-  @if ($includeStates) {
-    &:not([class*='isDisabled']) {
-      &:hover,
-      &:focus {
-        // Duplicated from inert state simply to override default theme
-        background-color: transparentize($backgroundColor, $transparency);
-      }
-    }
-  }
-}
-
-/*
- * Creates the Amsterdam style of fill button
- */
-@mixin euiButtonFillStyle($color: 'primary') {
-  $backgroundColor: $color;
-
-  @if (map-has-key($euiButtonTypes, $color)) {
-    $backgroundColor: map-get($euiButtonTypes, $color);
-  }
-
-  background-color: $backgroundColor;
-  color: chooseLightOrDarkText($backgroundColor);
-}
-
-// Keyframe animation declarations can be found in
-// utility/animations.scss

package/src/global_styling/mixins/_form.scss

@@ -1,28 +0,0 @@
-// 1. Must supply both values to background-size or some browsers apply the single value to both directions
-
-@mixin euiFormControlDefaultShadow($borderOnly: false) {
-  background-color: $euiFormBackgroundColor;
-  background-repeat: no-repeat;
-  background-size: 0% 100%; // 1
-
-  @if ($borderOnly) {
-    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
-  } @else {
-    box-shadow:
-      #{$euiFormControlBoxShadow},
-      inset 0 0 0 1px $euiFormBorderColor;
-  }
-
-  transition:
-    box-shadow $euiAnimSpeedFast ease-in,
-    background-image $euiAnimSpeedFast ease-in,
-    background-size $euiAnimSpeedFast ease-in,
-    background-color $euiAnimSpeedFast ease-in;
-
-  // Fixes bug in Firefox where adding a transition to the background-color
-  // caused a flash of differently styled dropdown.
-  @supports (-moz-appearance: none) {
-    // List *must* be in the same order as the above.
-    transition-property: box-shadow, background-image, background-size;
-  }
-}