@elastic/eui 95.10.1 → 95.12.0

package/lib/components/provider/system_color_mode/system_color_mode_provider.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiSystemColorModeProvider = exports.COLOR_MODE_MEDIA_QUERY = void 0;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /*
+ * 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.
+ */
+var COLOR_MODE_MEDIA_QUERY = exports.COLOR_MODE_MEDIA_QUERY = '(prefers-color-scheme: dark)';
+var EuiSystemColorModeProvider = exports.EuiSystemColorModeProvider = function EuiSystemColorModeProvider(_ref) {
+  var children = _ref.children;
+  // Use optional chaining here for SSR or test environments
+  var _useState = (0, _react.useState)(function () {
+      var _window, _window$matchMedia;
+      return (_window = window) !== null && _window !== void 0 && (_window$matchMedia = _window.matchMedia) !== null && _window$matchMedia !== void 0 && _window$matchMedia.call(_window, COLOR_MODE_MEDIA_QUERY).matches ? 'DARK' : 'LIGHT';
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    systemColorMode = _useState2[0],
+    setSystemColorMode = _useState2[1];
+
+  // Listen for system changes
+  (0, _react.useEffect)(function () {
+    var _window$matchMedia2, _window2, _window$matchMedia2$c, _window$matchMedia2$c2;
+    var eventListener = function eventListener(event) {
+      setSystemColorMode(event.matches ? 'DARK' : 'LIGHT');
+    };
+
+    // Optional chaining here is for test environments - SSR should not run useEffect
+    (_window$matchMedia2 = (_window2 = window).matchMedia) === null || _window$matchMedia2 === void 0 || (_window$matchMedia2$c = (_window$matchMedia2$c2 = _window$matchMedia2.call(_window2, COLOR_MODE_MEDIA_QUERY)).addEventListener) === null || _window$matchMedia2$c === void 0 || _window$matchMedia2$c.call(_window$matchMedia2$c2, 'change', eventListener);
+
+    // Clean up the listener on unmount
+    return function () {
+      var _window$matchMedia3, _window3, _window$matchMedia3$c, _window$matchMedia3$c2;
+      (_window$matchMedia3 = (_window3 = window).matchMedia) === null || _window$matchMedia3 === void 0 || (_window$matchMedia3$c = (_window$matchMedia3$c2 = _window$matchMedia3.call(_window3, COLOR_MODE_MEDIA_QUERY)).removeEventListener) === null || _window$matchMedia3$c === void 0 || _window$matchMedia3$c.call(_window$matchMedia3$c2, 'change', eventListener);
+    };
+  }, []);
+  return children(systemColorMode);
+};
+EuiSystemColorModeProvider.propTypes = {
+  children: _propTypes.default.func.isRequired
+};

package/lib/components/resizable_container/resizable_button.js

@@ -13,7 +13,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
@@ -44,12 +44,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 = _objectWithoutProperties(_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']
@@ -88,6 +89,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/lib/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/lib/components/table/table_header_cell.js

@@ -17,7 +17,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
@@ -82,6 +82,7 @@ var EuiTableHeaderCell = exports.EuiTableHeaderCell = function EuiTableHeaderCel
     style = _ref2.style,
     readOnly = _ref2.readOnly,
     description = _ref2.description,
+    append = _ref2.append,
     rest = _objectWithoutProperties(_ref2, _excluded);
   var styles = (0, _services.useEuiMemoizedStyles)(_table_cells_shared.euiTableHeaderFooterCellStyles);
   var isResponsive = (0, _responsive_context.useEuiTableIsResponsive)();
@@ -124,7 +125,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,
@@ -142,5 +143,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/lib/components/table/table_header_cell_checkbox.js

@@ -11,7 +11,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
@@ -30,6 +30,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 = _objectWithoutProperties(_ref, _excluded);
   var classes = (0, _classnames.default)('euiTableHeaderCellCheckbox', className);
   var styles = (0, _services.useEuiMemoizedStyles)(_table_cells_shared.euiTableCellCheckboxStyles);
@@ -41,7 +42,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,
@@ -49,5 +50,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/lib/components/table/table_row_cell.js

@@ -14,7 +14,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
@@ -53,6 +53,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 = _objectWithoutProperties(_ref, _excluded);
   var isResponsive = (0, _responsive_context.useEuiTableIsResponsive)();
   var styles = (0, _services.useEuiMemoizedStyles)(_table_row_cell.euiTableRowCellStyles);
@@ -92,7 +93,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
@@ -101,7 +102,7 @@ var EuiTableRowCell = exports.EuiTableRowCell = function EuiTableRowCell(_ref) {
     } else {
       return (0, _react2.jsx)(Element, _extends({
         className: cellClasses
-      }, sharedProps), (0, _react2.jsx)(_table_cell_content.EuiTableCellContent, sharedContentProps, children));
+      }, sharedProps), (0, _react2.jsx)(_table_cell_content.EuiTableCellContent, sharedContentProps, children), append);
     }
   }
 };
@@ -183,6 +184,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/lib/components/table/table_row_cell_checkbox.js

@@ -11,7 +11,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
@@ -26,6 +26,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 var EuiTableRowCellCheckbox = exports.EuiTableRowCellCheckbox = function EuiTableRowCellCheckbox(_ref) {
   var children = _ref.children,
     className = _ref.className,
+    append = _ref.append,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isResponsive = (0, _responsive_context.useEuiTableIsResponsive)();
   var styles = (0, _services.useEuiMemoizedStyles)(_table_cells_shared.euiTableCellCheckboxStyles);
@@ -36,11 +37,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/lib/components/text/text.js

@@ -8,11 +8,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
@@ -26,7 +26,9 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 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,
@@ -38,12 +40,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", _extends({
+  var Component = component;
+  var text = (0, _react2.jsx)(Component, _extends({
     css: cssStyles,
     className: classes
   }, rest), children);
   if (color) {
     text = (0, _react2.jsx)(_text_color.EuiTextColor, {
+      component: component,
       color: color,
       className: classes,
       cloneElement: true
@@ -51,6 +55,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
@@ -63,15 +68,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/lib/components/text/text_align.js

@@ -10,7 +10,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
@@ -31,6 +31,8 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; 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,
@@ -43,7 +45,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 = {
@@ -51,10 +53,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/lib/components/text/text_color.js

@@ -37,7 +37,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,
@@ -62,7 +62,6 @@ var EuiTextColor = exports.EuiTextColor = function EuiTextColor(_ref) {
       style: childrenStyle
     }));
   } else {
-    var Component = component;
     return (0, _react2.jsx)(Component, props, children);
   }
 };
@@ -72,16 +71,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/lib/components/text/types.js

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

package/lib/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/lib/services/copy/tabular_copy.js

@@ -0,0 +1,111 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tabularCopyMarkers = exports.onTabularCopy = exports.OverrideCopiedTabularContent = exports.CHARS = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+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; }
+/*
+ * 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.
+ */
+
+/**
+ * Clipboard text cleaning logic
+ */
+
+// Special visually hidden unicode characters that we use to manually clean content
+// and force our own newlines/horizontal tabs
+var CHARS = exports.CHARS = {
+  NEWLINE: '↵',
+  TAB: '↦',
+  // Use multiple characters to reduce the chances of consumers also using these characters
+  TABULAR_CONTENT_BOUND: '𐘂𐘂',
+  NO_COPY_BOUND: '✄𐘗'
+};
+// This regex finds all content between two bounds
+var noCopyBoundsRegex = new RegExp("".concat(CHARS.NO_COPY_BOUND, "[^").concat(CHARS.NO_COPY_BOUND, "]*").concat(CHARS.NO_COPY_BOUND), 'gs');
+var hasCharsToReplace = function hasCharsToReplace(text) {
+  for (var _i = 0, _Object$values = Object.values(CHARS); _i < _Object$values.length; _i++) {
+    var char = _Object$values[_i];
+    if (text.indexOf(char) >= 0) return true;
+  }
+  return false;
+};
+
+// Strip all existing newlines and replace our special hidden characters
+// with the desired spacing needed to paste cleanly into a spreadsheet
+var onTabularCopy = exports.onTabularCopy = function onTabularCopy(event) {
+  var _window$getSelection;
+  if (!event.clipboardData) return;
+  var selectedText = (_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.toString();
+  if (!selectedText || !hasCharsToReplace(selectedText)) return;
+  var amendedText = selectedText.split(CHARS.TABULAR_CONTENT_BOUND).map(function (text) {
+    return hasCharsToReplace(text) ? text.replace(/\r?\n/g, '') // remove all other newlines generated by content or block display
+    .replaceAll(CHARS.NEWLINE, '\n') // insert newline for each table/grid row
+    .replace(/\t/g, '') // remove tabs generated by content or automatically by <td> elements
+    .replaceAll(CHARS.TAB, "\t") // insert horizontal tab for each table/grid cell
+    .replace(noCopyBoundsRegex, '') // remove text that should not be copied (e.g. screen reader instructions)
+    : text;
+  }).join('');
+  event.clipboardData.setData('text/plain', amendedText);
+  event.preventDefault();
+};
+
+/**
+ * JSX utils for rendering the hidden marker characters
+ */
+
+var VisuallyHide = function VisuallyHide(_ref) {
+  var children = _ref.children,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'true' : _ref$type;
+  return (
+    // Hides the characters to both sighted user and screen readers
+    // Sadly, we can't use `hidden` as that hides the chars from the clipboard as well
+    (0, _react2.jsx)("span", {
+      className: "euiScreenReaderOnly",
+      "aria-hidden": true,
+      "data-tabular-copy-marker": type
+    }, children)
+  );
+};
+var tabularCopyMarkers = exports.tabularCopyMarkers = {
+  hiddenTab: (0, _react2.jsx)(VisuallyHide, {
+    type: "tab"
+  }, CHARS.TAB),
+  hiddenNewline: (0, _react2.jsx)(VisuallyHide, {
+    type: "newline"
+  }, CHARS.NEWLINE),
+  hiddenWrapperBoundary: (0, _react2.jsx)(VisuallyHide, {
+    type: "boundary"
+  }, CHARS.TABULAR_CONTENT_BOUND),
+  hiddenNoCopyBoundary: (0, _react2.jsx)(VisuallyHide, {
+    type: "no-copy"
+  }, CHARS.NO_COPY_BOUND)
+};
+
+/**
+ * Wrapper setup around table/grid tabular content we want to override/clean up on copy
+ */
+
+var OverrideCopiedTabularContent = exports.OverrideCopiedTabularContent = function OverrideCopiedTabularContent(_ref2) {
+  var children = _ref2.children;
+  (0, _react.useEffect)(function () {
+    // Chrome and webkit browsers work perfectly when passing `onTabularCopy` to a React
+    // `onCopy` prop, but sadly Firefox does not if copying more than just the table/grid
+    // (e.g. Ctrl+A). So we have to set up a global window event listener
+    window.document.addEventListener('copy', onTabularCopy);
+    // Note: Since onCopy is static, we don't have to worry about duplicate
+    // event listeners - it's automatically handled by the browser. See:
+    // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Multiple_identical_event_listeners
+  }, []);
+  return (0, _react2.jsx)(_react.default.Fragment, null, tabularCopyMarkers.hiddenWrapperBoundary, children, tabularCopyMarkers.hiddenWrapperBoundary);
+};