@elastic/eui 95.10.1 → 95.12.0

package/test-env/components/resizable_container/resizable_button.js

@@ -17,7 +17,7 @@ var _services = require("../../services");
 var _context = require("./context");
 var _resizable_button = require("./resizable_button.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["isHorizontal", "indicator", "alignIndicator", "className"],
+var _excluded = ["isHorizontal", "indicator", "alignIndicator", "accountForScrollbars", "className"],
   _excluded2 = ["registration", "id", "disabled", "onFocus"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -38,12 +38,13 @@ var EuiResizableButton = exports.EuiResizableButton = /*#__PURE__*/(0, _react.fo
     indicator = _ref$indicator === void 0 ? 'handle' : _ref$indicator,
     _ref$alignIndicator = _ref.alignIndicator,
     alignIndicator = _ref$alignIndicator === void 0 ? 'center' : _ref$alignIndicator,
+    accountForScrollbars = _ref.accountForScrollbars,
     className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiResizableButton', className);
   var resizeDirection = isHorizontal ? 'horizontal' : 'vertical';
   var styles = (0, _services.useEuiMemoizedStyles)(_resizable_button.euiResizableButtonStyles);
-  var cssStyles = [styles.euiResizableButton, styles[indicator], styles["".concat(indicator, "Direction")][resizeDirection], styles[resizeDirection], indicator === 'handle' && styles.alignIndicator[alignIndicator]];
+  var cssStyles = [styles.euiResizableButton, styles[indicator], styles["".concat(indicator, "Direction")][resizeDirection], styles[resizeDirection], indicator === 'handle' && styles.alignIndicator[alignIndicator], styles.accountForScrollbars[resizeDirection][accountForScrollbars !== null && accountForScrollbars !== void 0 ? accountForScrollbars : 'none']];
   return (0, _react2.jsx)(_i18n.EuiI18n, {
     tokens: ['euiResizableButton.horizontalResizerAriaLabel', 'euiResizableButton.verticalResizerAriaLabel'],
     defaults: ['Press the left or right arrow keys to adjust panels size', 'Press the up or down arrow keys to adjust panels size']
@@ -82,6 +83,12 @@ EuiResizableButton.propTypes = {
        * tall content that scrolls off-screen
        */
   alignIndicator: _propTypes.default.oneOf(["center", "start", "end"]),
+  /**
+       * By default, EuiResizableButton will overlap into the panels before/after it.
+       * This can occasionally occlude interactive elements like scrollbars. To prevent
+       * this overlap, use this prop to remove the overlap for the specified side.
+       */
+  accountForScrollbars: _propTypes.default.oneOf(["before", "after", "both"]),
   /**
        * When disabled, the resizer button will be completely hidden
        */

package/test-env/components/resizable_container/resizable_button.styles.js

@@ -41,6 +41,9 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 var euiResizableButtonStyles = exports.euiResizableButtonStyles = function euiResizableButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var buttonSize = euiTheme.size.base;
+  var negativeMargin = (0, _global_styling.mathWithUnits)(buttonSize, function (x) {
+    return x / -2;
+  });
   var grabHandleWidth = euiTheme.size.m;
   var grabHandleHeight = euiTheme.border.width.thin;
   var transitionSpeed = euiTheme.animation.fast;
@@ -53,12 +56,22 @@ var euiResizableButtonStyles = exports.euiResizableButtonStyles = function euiRe
     euiResizableButton: /*#__PURE__*/(0, _react.css)("z-index:1;flex-shrink:0;display:flex;justify-content:center;&:disabled{display:none;}&::before,&::after{content:'';display:block;", _global_styling.euiCanAnimate, "{transition:width ", transition, ",height ", transition, ",margin ", transition, ",background-color ", transition, ";}}&:hover{&::before,&::after{background-color:", euiTheme.colors.mediumShade, ";}}&:focus,&:active{background-color:", (0, _services.transparentize)(euiTheme.colors.primary, 0.1), ";&::before,&::after{background-color:", euiTheme.colors.primary, ";", _global_styling.euiCanAnimate, "{transition:width ", transition, ",height ", transition, ";transition-delay:", (0, _global_styling.mathWithUnits)(transitionSpeed, function (x) {
       return x / 2;
     }), ";}}};label:euiResizableButton;"),
-    horizontal: /*#__PURE__*/(0, _react.css)("cursor:col-resize;", (0, _global_styling.logicalCSS)('height', '100%'), " ", (0, _global_styling.logicalCSS)('width', buttonSize), " margin-inline:", (0, _global_styling.mathWithUnits)(buttonSize, function (x) {
-      return x / -2;
-    }), ";;label:horizontal;"),
-    vertical: /*#__PURE__*/(0, _react.css)("flex-direction:column;cursor:row-resize;", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('height', buttonSize), " margin-block:", (0, _global_styling.mathWithUnits)(buttonSize, function (x) {
-      return x / -2;
-    }), ";;label:vertical;"),
+    horizontal: /*#__PURE__*/(0, _react.css)("cursor:col-resize;", (0, _global_styling.logicalCSS)('height', '100%'), " ", (0, _global_styling.logicalCSS)('width', buttonSize), ";;label:horizontal;"),
+    vertical: /*#__PURE__*/(0, _react.css)("flex-direction:column;cursor:row-resize;", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('height', buttonSize), ";;label:vertical;"),
+    accountForScrollbars: {
+      horizontal: {
+        both: /*#__PURE__*/(0, _react.css)(";label:both;"),
+        before: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-right', negativeMargin), ";label:before;"),
+        after: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', negativeMargin), ";label:after;"),
+        none: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-horizontal', negativeMargin), ";label:none;")
+      },
+      vertical: {
+        both: /*#__PURE__*/(0, _react.css)(";label:both;"),
+        before: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-bottom', negativeMargin), ";label:before;"),
+        after: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-top', negativeMargin), ";label:after;"),
+        none: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-vertical', negativeMargin), ";label:none;")
+      }
+    },
     border: /*#__PURE__*/(0, _react.css)("&::before,&::after{background-color:", euiTheme.border.color, ";};label:border;"),
     borderDirection: {
       horizontal: /*#__PURE__*/(0, _react.css)("&::before{", (0, _global_styling.logicalCSS)('width', euiTheme.border.width.thin), " ", (0, _global_styling.logicalCSS)('height', '100%'), ";}&:hover,&:focus,&:active{&::after{", (0, _global_styling.logicalCSS)('width', euiTheme.border.width.thin), " ", (0, _global_styling.logicalCSS)('height', '100%'), ";}};label:horizontal;"),

package/test-env/components/table/table_header_cell.js

@@ -20,7 +20,7 @@ var _responsive_context = require("./mobile/responsive_context");
 var _table_cell_content = require("./_table_cell_content");
 var _table_cells_shared = require("./table_cells_shared.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "align", "onSort", "isSorted", "isSortAscending", "className", "scope", "mobileOptions", "width", "style", "readOnly", "description"];
+var _excluded = ["children", "align", "onSort", "isSorted", "isSortAscending", "className", "scope", "mobileOptions", "width", "style", "readOnly", "description", "append"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -81,6 +81,7 @@ var EuiTableHeaderCell = exports.EuiTableHeaderCell = function EuiTableHeaderCel
     style = _ref2.style,
     readOnly = _ref2.readOnly,
     description = _ref2.description,
+    append = _ref2.append,
     rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   var styles = (0, _services.useEuiMemoizedStyles)(_table_cells_shared.euiTableHeaderFooterCellStyles);
   var isResponsive = (0, _responsive_context.useEuiTableIsResponsive)();
@@ -123,7 +124,7 @@ var EuiTableHeaderCell = exports.EuiTableHeaderCell = function EuiTableHeaderCel
     }),
     onClick: onSort,
     "data-test-subj": "tableHeaderSortButton"
-  }, (0, _react2.jsx)(CellContents, cellContentsProps)) : (0, _react2.jsx)(CellContents, cellContentsProps));
+  }, (0, _react2.jsx)(CellContents, cellContentsProps)) : (0, _react2.jsx)(CellContents, cellContentsProps), append);
 };
 EuiTableHeaderCell.propTypes = {
   className: _propTypes.default.string,
@@ -141,5 +142,11 @@ EuiTableHeaderCell.propTypes = {
   /**
        * Shows the sort indicator but removes the button
        */
-  readOnly: _propTypes.default.bool
+  readOnly: _propTypes.default.bool,
+  /**
+       * Content rendered outside the visible cell content wrapper. Useful for, e.g. screen reader text.
+       *
+       * Used by EuiBasicTable to render hidden copy markers
+       */
+  append: _propTypes.default.node
 };

package/test-env/components/table/table_header_cell_checkbox.js

@@ -14,7 +14,7 @@ var _services = require("../../services");
 var _utils = require("./utils");
 var _table_cells_shared = require("./table_cells_shared.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "scope", "style", "width"];
+var _excluded = ["children", "className", "scope", "style", "width", "append"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -29,6 +29,7 @@ var EuiTableHeaderCellCheckbox = exports.EuiTableHeaderCellCheckbox = function E
     scope = _ref$scope === void 0 ? 'col' : _ref$scope,
     style = _ref.style,
     width = _ref.width,
+    append = _ref.append,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiTableHeaderCellCheckbox', className);
   var styles = (0, _services.useEuiMemoizedStyles)(_table_cells_shared.euiTableCellCheckboxStyles);
@@ -40,7 +41,7 @@ var EuiTableHeaderCellCheckbox = exports.EuiTableHeaderCellCheckbox = function E
     style: inlineStyles
   }, rest), (0, _react2.jsx)("div", {
     className: "euiTableCellContent"
-  }, children));
+  }, children), append);
 };
 EuiTableHeaderCellCheckbox.propTypes = {
   className: _propTypes.default.string,
@@ -48,5 +49,6 @@ EuiTableHeaderCellCheckbox.propTypes = {
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
   width: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.number.isRequired]),
-  scope: _propTypes.default.any
+  scope: _propTypes.default.any,
+  append: _propTypes.default.node
 };

package/test-env/components/table/table_row_cell.js

@@ -18,7 +18,7 @@ var _utils = require("./utils");
 var _table_cell_content = require("./_table_cell_content");
 var _table_row_cell = require("./table_row_cell.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["align", "children", "className", "truncateText", "setScopeRow", "textOnly", "hasActions", "isExpander", "style", "width", "valign", "mobileOptions"];
+var _excluded = ["align", "children", "className", "truncateText", "setScopeRow", "textOnly", "hasActions", "isExpander", "style", "width", "valign", "mobileOptions", "append"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -44,6 +44,7 @@ var EuiTableRowCell = exports.EuiTableRowCell = function EuiTableRowCell(_ref) {
     _ref$valign = _ref.valign,
     valign = _ref$valign === void 0 ? 'middle' : _ref$valign,
     mobileOptions = _ref.mobileOptions,
+    append = _ref.append,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var isResponsive = (0, _responsive_context.useEuiTableIsResponsive)();
   var styles = (0, _services.useEuiMemoizedStyles)(_table_row_cell.euiTableRowCellStyles);
@@ -83,7 +84,7 @@ var EuiTableRowCell = exports.EuiTableRowCell = function EuiTableRowCell(_ref) {
         ,
         truncateText: (_mobileOptions$trunca = mobileOptions === null || mobileOptions === void 0 ? void 0 : mobileOptions.truncateText) !== null && _mobileOptions$trunca !== void 0 ? _mobileOptions$trunca : truncateText,
         textOnly: (_mobileOptions$textOn = mobileOptions === null || mobileOptions === void 0 ? void 0 : mobileOptions.textOnly) !== null && _mobileOptions$textOn !== void 0 ? _mobileOptions$textOn : textOnly
-      }), (mobileOptions === null || mobileOptions === void 0 ? void 0 : mobileOptions.render) || children));
+      }), (mobileOptions === null || mobileOptions === void 0 ? void 0 : mobileOptions.render) || children), append);
     }
   } else {
     // Desktop view
@@ -92,7 +93,7 @@ var EuiTableRowCell = exports.EuiTableRowCell = function EuiTableRowCell(_ref) {
     } else {
       return (0, _react2.jsx)(Element, (0, _extends2.default)({
         className: cellClasses
-      }, sharedProps), (0, _react2.jsx)(_table_cell_content.EuiTableCellContent, sharedContentProps, children));
+      }, sharedProps), (0, _react2.jsx)(_table_cell_content.EuiTableCellContent, sharedContentProps, children), append);
     }
   }
 };
@@ -174,6 +175,12 @@ EuiTableRowCell.propTypes = {
       lines: _propTypes.default.number.isRequired
     }).isRequired])
   }),
+  /**
+     * Content rendered outside the visible cell content wrapper. Useful for, e.g. screen reader text.
+     *
+     * Used by EuiBasicTable to render hidden copy markers
+     */
+  append: _propTypes.default.node,
   /**
      * Horizontal alignment of the text in the cell
      */

package/test-env/components/table/table_row_cell_checkbox.js

@@ -14,7 +14,7 @@ var _services = require("../../services");
 var _responsive_context = require("./mobile/responsive_context");
 var _table_cells_shared = require("./table_cells_shared.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className"];
+var _excluded = ["children", "className", "append"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -25,6 +25,7 @@ var _excluded = ["children", "className"];
 var EuiTableRowCellCheckbox = exports.EuiTableRowCellCheckbox = function EuiTableRowCellCheckbox(_ref) {
   var children = _ref.children,
     className = _ref.className,
+    append = _ref.append,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var isResponsive = (0, _responsive_context.useEuiTableIsResponsive)();
   var styles = (0, _services.useEuiMemoizedStyles)(_table_cells_shared.euiTableCellCheckboxStyles);
@@ -35,11 +36,12 @@ var EuiTableRowCellCheckbox = exports.EuiTableRowCellCheckbox = function EuiTabl
     className: classes
   }, rest), (0, _react2.jsx)("div", {
     className: "euiTableCellContent"
-  }, children));
+  }, children), append);
 };
 EuiTableRowCellCheckbox.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
-  css: _propTypes.default.any
+  css: _propTypes.default.any,
+  append: _propTypes.default.node
 };

package/test-env/components/text/text.js

@@ -11,11 +11,11 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
-var _text = require("./text.styles");
 var _text_color = require("./text_color");
 var _text_align = require("./text_align");
+var _text = require("./text.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["size", "color", "grow", "textAlign", "children", "className"];
+var _excluded = ["component", "size", "color", "grow", "textAlign", "children", "className"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -25,7 +25,9 @@ var _excluded = ["size", "color", "grow", "textAlign", "children", "className"];
  */
 var TEXT_SIZES = exports.TEXT_SIZES = ['xs', 's', 'm', 'relative'];
 var EuiText = exports.EuiText = function EuiText(_ref) {
-  var _ref$size = _ref.size,
+  var _ref$component = _ref.component,
+    component = _ref$component === void 0 ? 'div' : _ref$component,
+    _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'm' : _ref$size,
     color = _ref.color,
     _ref$grow = _ref.grow,
@@ -37,12 +39,14 @@ var EuiText = exports.EuiText = function EuiText(_ref) {
   var styles = (0, _services.useEuiMemoizedStyles)(_text.euiTextStyles);
   var cssStyles = [styles.euiText, !grow ? styles.constrainedWidth : undefined, styles[size]];
   var classes = (0, _classnames.default)('euiText', className);
-  var text = (0, _react2.jsx)("div", (0, _extends2.default)({
+  var Component = component;
+  var text = (0, _react2.jsx)(Component, (0, _extends2.default)({
     css: cssStyles,
     className: classes
   }, rest), children);
   if (color) {
     text = (0, _react2.jsx)(_text_color.EuiTextColor, {
+      component: component,
       color: color,
       className: classes,
       cloneElement: true
@@ -50,6 +54,7 @@ var EuiText = exports.EuiText = function EuiText(_ref) {
   }
   if (textAlign) {
     text = (0, _react2.jsx)(_text_align.EuiTextAlign, {
+      component: component,
       textAlign: textAlign,
       className: classes,
       cloneElement: true
@@ -62,15 +67,26 @@ EuiText.propTypes = {
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
+  /**
+       * The HTML element/tag to render.
+       * Use with care when nesting multiple components to ensure valid XHTML:
+       * - `<div>` and other block tags are not valid to use inside `<p>`. If using the `<p>` tag, we recommend passing strings/text only.
+       * - `<span>` is valid to be nested in any tag, and can have any tag nested within it.
+       */
+  component: _propTypes.default.oneOf(["div", "span", "p"]),
+  /**
+     * Any of our named colors or a `hex`, `rgb` or `rgba` value.
+     * @default inherit
+     */
+  color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.any.isRequired]),
+  /**
+     * Applies horizontal text alignment
+     * @default left
+     */
   textAlign: _propTypes.default.any,
   /**
        * Determines the text size. Choose `relative` to control the `font-size` based on the value of a parent container.
        */
   size: _propTypes.default.any,
-  /**
-       * Any of our named colors or a `hex`, `rgb` or `rgba` value.
-       * @default inherit
-       */
-  color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.any.isRequired]),
   grow: _propTypes.default.bool
 };

package/test-env/components/text/text_align.js

@@ -13,7 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _services = require("../../services");
 var _text_align = require("./text_align.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "textAlign", "cloneElement"];
+var _excluded = ["children", "component", "textAlign", "cloneElement"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -28,6 +28,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var ALIGNMENTS = exports.ALIGNMENTS = ['left', 'right', 'center'];
 var EuiTextAlign = exports.EuiTextAlign = function EuiTextAlign(_ref) {
   var children = _ref.children,
+    _ref$component = _ref.component,
+    Component = _ref$component === void 0 ? 'div' : _ref$component,
     _ref$textAlign = _ref.textAlign,
     textAlign = _ref$textAlign === void 0 ? 'left' : _ref$textAlign,
     _ref$cloneElement = _ref.cloneElement,
@@ -40,7 +42,7 @@ var EuiTextAlign = exports.EuiTextAlign = function EuiTextAlign(_ref) {
   if ( /*#__PURE__*/(0, _react.isValidElement)(children) && cloneElement) {
     return (0, _services.cloneElementWithCss)(children, props);
   } else {
-    return (0, _react2.jsx)("div", props, children);
+    return (0, _react2.jsx)(Component, props, children);
   }
 };
 EuiTextAlign.propTypes = {
@@ -48,10 +50,21 @@ EuiTextAlign.propTypes = {
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
-  textAlign: _propTypes.default.any,
   /**
-       * Applies text styling to the child element instead of rendering a parent wrapper `div`.
-       * Can only be used when wrapping a *single* child element/tag, and not raw text.
+       * The HTML element/tag to render.
+       * Use with care when nesting multiple components to ensure valid XHTML:
+       * - `<div>` and other block tags are not valid to use inside `<p>`. If using the `<p>` tag, we recommend passing strings/text only.
+       * - `<span>` is valid to be nested in any tag, and can have any tag nested within it.
        */
-  cloneElement: _propTypes.default.bool
+  component: _propTypes.default.oneOf(["div", "span", "p"]),
+  /**
+     * Applies text styling to the child element instead of rendering a parent wrapper.
+     * Can only be used when wrapping a *single* child element/tag, and not raw text.
+     */
+  cloneElement: _propTypes.default.bool,
+  /**
+     * Applies horizontal text alignment
+     * @default left
+     */
+  textAlign: _propTypes.default.any
 };

package/test-env/components/text/text_color.js

@@ -34,7 +34,7 @@ var EuiTextColor = exports.EuiTextColor = function EuiTextColor(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'default' : _ref$color,
     _ref$component = _ref.component,
-    component = _ref$component === void 0 ? 'span' : _ref$component,
+    Component = _ref$component === void 0 ? 'span' : _ref$component,
     _ref$cloneElement = _ref.cloneElement,
     cloneElement = _ref$cloneElement === void 0 ? false : _ref$cloneElement,
     style = _ref.style,
@@ -59,7 +59,6 @@ var EuiTextColor = exports.EuiTextColor = function EuiTextColor(_ref) {
       style: childrenStyle
     }));
   } else {
-    var Component = component;
     return (0, _react2.jsx)(Component, props, children);
   }
 };
@@ -69,16 +68,20 @@ EuiTextColor.propTypes = {
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
   /**
-       * Any of our named colors or a `hex`, `rgb` or `rgba` value.
+       * The HTML element/tag to render.
+       * Use with care when nesting multiple components to ensure valid XHTML:
+       * - `<div>` and other block tags are not valid to use inside `<p>`. If using the `<p>` tag, we recommend passing strings/text only.
+       * - `<span>` is valid to be nested in any tag, and can have any tag nested within it.
        */
-  color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.any.isRequired]),
+  component: _propTypes.default.oneOf(["div", "span", "p"]),
   /**
-       * Determines the root element
-       */
-  component: _propTypes.default.oneOf(["div", "span"]),
+     * Applies text styling to the child element instead of rendering a parent wrapper.
+     * Can only be used when wrapping a *single* child element/tag, and not raw text.
+     */
+  cloneElement: _propTypes.default.bool,
   /**
-       * Applies text styling to the child element instead of rendering a parent wrapper `span`/`div`.
-       * Can only be used when wrapping a *single* child element/tag, and not raw text.
-       */
-  cloneElement: _propTypes.default.bool
+     * Any of our named colors or a `hex`, `rgb` or `rgba` value.
+     * @default inherit
+     */
+  color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.any.isRequired])
 };

package/test-env/components/text/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/test-env/services/copy/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OverrideCopiedTabularContent", {
+  enumerable: true,
+  get: function get() {
+    return _tabular_copy.OverrideCopiedTabularContent;
+  }
+});
+Object.defineProperty(exports, "copyToClipboard", {
+  enumerable: true,
+  get: function get() {
+    return _copy_to_clipboard.copyToClipboard;
+  }
+});
+Object.defineProperty(exports, "tabularCopyMarkers", {
+  enumerable: true,
+  get: function get() {
+    return _tabular_copy.tabularCopyMarkers;
+  }
+});
+var _copy_to_clipboard = require("./copy_to_clipboard");
+var _tabular_copy = require("./tabular_copy");

package/test-env/services/copy/tabular_copy.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tabularCopyMarkers = exports.OverrideCopiedTabularContent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// Don't render these characters in Jest snapshots. I don't want to deal with the Kibana tests 🫠
+var tabularCopyMarkers = exports.tabularCopyMarkers = {
+  hiddenTab: (0, _react2.jsx)(_react.default.Fragment, null),
+  hiddenNewline: (0, _react2.jsx)(_react.default.Fragment, null),
+  hiddenWrapperBoundary: (0, _react2.jsx)(_react.default.Fragment, null),
+  hiddenNoCopyBoundary: (0, _react2.jsx)(_react.default.Fragment, null)
+};
+
+// Don't bother initializing in Kibana Jest either
+var OverrideCopiedTabularContent = exports.OverrideCopiedTabularContent = function OverrideCopiedTabularContent(_ref) {
+  var children = _ref.children;
+  return children;
+};

package/test-env/services/index.js

@@ -59,7 +59,6 @@ var _exportNames = {
   wcagContrastMin: true,
   useColorPickerState: true,
   useColorStopsState: true,
-  copyToClipboard: true,
   dateFormatAliases: true,
   formatAuto: true,
   formatBoolean: true,
@@ -207,12 +206,6 @@ Object.defineProperty(exports, "colorPalette", {
     return _color.colorPalette;
   }
 });
-Object.defineProperty(exports, "copyToClipboard", {
-  enumerable: true,
-  get: function get() {
-    return _copy_to_clipboard.copyToClipboard;
-  }
-});
 Object.defineProperty(exports, "darken", {
   enumerable: true,
   get: function get() {
@@ -588,7 +581,18 @@ Object.keys(_console).forEach(function (key) {
     }
   });
 });
-var _copy_to_clipboard = require("./copy_to_clipboard");
+var _copy = require("./copy");
+Object.keys(_copy).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _copy[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _copy[key];
+    }
+  });
+});
 var _emotion = require("./emotion");
 Object.keys(_emotion).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/src/components/datagrid/_data_grid.scss

@@ -1,121 +0,0 @@
-.euiDataGrid {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  overflow: hidden;
-  height: 100%;
-}
-
-.euiDataGrid--fullScreen {
-  height: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: $euiZDataGrid;
-  background: $euiColorEmptyShade;
-
-  .euiDataGrid__pagination {
-    padding-bottom: $euiSizeXS;
-    background: $euiColorLightestShade;
-    box-shadow: $euiBorderWidthThin 0 0 $euiBorderWidthThin $euiBorderColor; // Use box-shadow instead of border-top to avoid duplicating the border-bottom on grid cells
-  }
-}
-
-.euiDataGrid__content {
-  flex-grow: 1;
-  height: 100%;
-  max-width: 100%;
-  width: 100%;
-  overflow: hidden;
-  z-index: 1; // Sits below the controls above it and pagination below it
-  position: relative;
-  background: $euiPageBackgroundColor;
-  font-feature-settings: 'tnum' 1; // Tabular numbers
-}
-
-.euiDataGrid__customRenderBody {
-  @include euiScrollBar($euiColorDarkShade, $euiColorEmptyShade);
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-}
-
-.euiDataGrid__pagination {
-  z-index: 2; // Sits above the content above it
-  padding-top: $euiSizeXS;
-  flex-grow: 0;
-}
-
-// This is used to remove extra scrollbars on the body when fullscreen is enabled
-// and tweak any components that account for fixed headers
-.euiDataGrid__restrictBody {
-  height: 100vh;
-  overflow: hidden;
-
-  .euiHeader[data-fixed-header] {
-    // !important needed to override header inline styles
-    z-index: $euiZHeaderBelowDataGrid !important; // stylelint-disable-line declaration-no-important
-  }
-
-  .euiOverlayMask[data-relative-to-header='below'] {
-    top: 0;
-  }
-
-  .euiFlyout {
-    top: 0;
-    height: 100%;
-  }
-}
-
-.euiDataGrid__focusWrap {
-  height: 100%;
-}
-
-.euiDataGrid__virtualized {
-  @include euiScrollBar($euiColorDarkShade, $euiColorEmptyShade);
-  scroll-padding: 0;
-}
-
-.euiDataGrid__scrollOverlay {
-  position: absolute;
-  top: -1 * $euiBorderWidthThin; // Overlaps the toolbar border
-  right: 0;
-  bottom: 0;
-  left: 0;
-
-  // Ensure the underlying grid is still interactable
-  pointer-events: none;
-
-  // Ensure the scrolling data grid body always has border edges
-  // regardless of cell position
-  box-shadow: inset 0 0 0 $euiBorderWidthThin $euiBorderColor;
-  // Note that this *must* be an inset `box-shadow` and not `border`, because
-  // border will affect the relative position of the child scroll bar overlays
-  // and cause them to be off by the width of the border
-
-  // For grids with horizontal-only borders, only render a bottom 'border'
-  .euiDataGrid--bordersHorizontal & {
-    box-shadow: inset 0 (-2 * $euiBorderWidthThin) 0 (-1 * $euiBorderWidthThin) $euiBorderColor;
-  }
-
-  // Ensure the horizontal scrollbar has a top border
-  .euiDataGrid__scrollBarOverlayBottom {
-    position: absolute;
-    width: 100%;
-    height: $euiBorderWidthThin;
-    background-color: $euiBorderColor;
-  }
-
-  // Ensure the vertical scrollbar has a left border
-  .euiDataGrid__scrollBarOverlayRight {
-    position: absolute;
-    height: 100%;
-    width: $euiBorderWidthThin;
-    background-color: $euiBorderColor;
-  }
-
-  // Note: Scroll bar border positions are set via JS inline style, since
-  // JS has access to the exact OS scrollbar width/height and CSS doesn't
-}