@elastic/eui 96.0.0 → 97.0.0

package/README.md

@@ -1 +1,19 @@
-## See [the top-level repo README](../../#readme) and [wiki](../../wiki) for more information on consuming and contributing to EUI.
+<!-- Note: this README is what renders to our published NPM package, and should remain nice-looking & have useful links without repeating too much information from the top-level README -->
+<img src="https://repository-images.githubusercontent.com/107422373/b6180480-a1d7-11eb-8a3c-902086232aa7" alt="" />
+
+# Elastic UI Framework
+
+**The Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic.**
+
+## Resources
+
+- Check out our [full documentation site](https://eui.elastic.co), which contains many examples of components in the EUI framework aesthetic, and how to use them in your products.
+- [Our FAQ](https://github.com/elastic/eui#frequently-asked-questions) covers common usage questions — for other general questions regarding EUI, check out the [Discussions tab](https://github.com/elastic/eui/discussions).
+- For technical instructions and guidelines on usage and development, please [refer to our wiki](https://github.com/elastic/eui/tree/main/wiki).
+
+## License
+
+[Dual-licensed under Elastic v2 and Server Side Public License, v1][license]. See Elastic's [licensing FAQ][licensing-faq] for details.
+
+[license]: LICENSE.txt
+[licensing-faq]: https://www.elastic.co/pricing/faq/licensing#im-using-eui-or-elastic-charts-in-my-application-outside-of-kibana-how-does-this-affect-me

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

@@ -26,7 +26,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
  * Side Public License, v 1.
  */
 
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, memo } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { useDefaultColumnWidth, useColumnWidths } from '../utils/col_widths';
@@ -35,7 +35,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,
@@ -91,27 +91,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,
@@ -125,7 +129,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;
 
   /**
@@ -152,19 +158,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
@@ -172,15 +181,22 @@ 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.propTypes = {
   leadingControlColumns: PropTypes.arrayOf(PropTypes.shape({
     /**
@@ -801,4 +817,5 @@ EuiDataGridBodyCustomRender.propTypes = {
   gridItemsRendered: PropTypes.any.isRequired,
   wrapperRef: PropTypes.any.isRequired,
   className: PropTypes.string
-};
+};
+EuiDataGridBodyCustomRender.displayName = 'EuiDataGridBodyCustomRender';

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

@@ -15,7 +15,7 @@ import PropTypes from "prop-types";
 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';
 
 /**
@@ -33,16 +33,18 @@ 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)"
+  }))))));
 };
 EuiExternalLinkIcon.propTypes = {
   target: PropTypes.any,

package/eui.d.ts

@@ -14913,6 +14913,18 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	     * It's best to wrap calls to `setCustomGridBodyProps` in a `useEffect` hook
 	     */
 	    setCustomGridBodyProps: (props: EuiDataGridSetCustomGridBodyProps) => void;
+	    /**
+	     * The width of the grid, can be used by consumer as a layout utility
+	     */
+	    gridWidth: number;
+	    /**
+	     * Header row component to render by custom renderer
+	     * */
+	    headerRow: React.JSX.Element;
+	    /**
+	     * Footer row component to render by custom renderer
+	     * */
+	    footerRow: React.JSX.Element | null;
 	}
 	export type EuiDataGridSetCustomGridBodyProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
 	    ref?: MutableRefObject<HTMLDivElement> | Ref<HTMLDivElement>;
@@ -31362,8 +31374,8 @@ declare module '@elastic/eui' {
 "euiInlineEditForm.cancelButtonAriaLabel": any;
 "euiInlineEditForm.inputKeyboardInstructions": any;
 "euiInlineEditForm.activateEditModeDescription": any;
-"euiExternalLinkIcon.ariaLabel": any;
 "euiExternalLinkIcon.newTarget.screenReaderOnlyText": any;
+"euiExternalLinkIcon.externalTarget.screenReaderOnlyText": any;
 "euiPinnableListGroup.pinExtraActionLabel": any;
 "euiPinnableListGroup.pinnedExtraActionLabel": any;
 "euiLoadingStrings.ariaLabel": any;

package/i18ntokens.json

@@ -5256,37 +5256,37 @@
     "filepath": "src/components/inline_edit/inline_edit_form.tsx"
   },
   {
-    "token": "euiExternalLinkIcon.ariaLabel",
-    "defString": "External link",
+    "token": "euiExternalLinkIcon.newTarget.screenReaderOnlyText",
+    "defString": "(external, opens in a new tab or window)",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 42,
-        "column": 24,
-        "index": 1528
+        "line": 56,
+        "column": 16,
+        "index": 1824
       },
       "end": {
-        "line": 45,
-        "column": 3,
-        "index": 1600
+        "line": 59,
+        "column": 18,
+        "index": 1997
       }
     },
     "filepath": "src/components/link/external_link_icon.tsx"
   },
   {
-    "token": "euiExternalLinkIcon.newTarget.screenReaderOnlyText",
-    "defString": "(opens in a new tab or window)",
+    "token": "euiExternalLinkIcon.externalTarget.screenReaderOnlyText",
+    "defString": "(external)",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 61,
-        "column": 12,
-        "index": 1911
+        "line": 66,
+        "column": 18,
+        "index": 2163
       },
       "end": {
-        "line": 64,
-        "column": 14,
-        "index": 2062
+        "line": 69,
+        "column": 20,
+        "index": 2317
       }
     },
     "filepath": "src/components/link/external_link_icon.tsx"

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

@@ -42,7 +42,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-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,
@@ -98,27 +98,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,
@@ -132,7 +136,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;
 
   /**
@@ -159,19 +165,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 = _objectWithoutProperties(_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 = _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 (0, _react2.jsx)(_cell.CellWrapper, _extends({}, props, rest));
     };
-    var props = _objectSpread({
-      colIndex: colIndex,
-      visibleRowIndex: visibleRowIndex,
-      style: style
-    }, cellProps);
-    return (0, _react2.jsx)(_cell.CellWrapper, _extends({}, props, rest));
   }, [cellProps, getRowHeight, rowHeightUtils, rowHeightsOptions]);
 
   // Allow consumers to pass custom props/attributes/listeners etc. to the wrapping div
@@ -179,15 +188,22 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = function
     _useState2 = _slicedToArray(_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", _extends({}, 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({
     /**
@@ -808,4 +824,5 @@ EuiDataGridBodyCustomRender.propTypes = {
   gridItemsRendered: _propTypes.default.any.isRequired,
   wrapperRef: _propTypes.default.any.isRequired,
   className: _propTypes.default.string
-};
+};
+EuiDataGridBodyCustomRender.displayName = 'EuiDataGridBodyCustomRender';

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

@@ -38,16 +38,18 @@ var EuiExternalLinkIcon = exports.EuiExternalLinkIcon = function EuiExternalLink
     rest = _objectWithoutProperties(_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, _extends({
+  return (0, _react2.jsx)(_react.default.Fragment, null, showExternalLinkIcon && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_icon.EuiIcon, _extends({
     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/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",