@elastic/eui 73.0.0 → 74.0.0

package/i18ntokens.json

@@ -21,11 +21,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 312,
+        "line": 319,
         "column": 6
       },
       "end": {
-        "line": 312,
+        "line": 319,
         "column": 79
       }
     },
@@ -37,11 +37,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 674,
+        "line": 621,
         "column": 10
       },
       "end": {
-        "line": 678,
+        "line": 625,
         "column": 12
       }
     },
@@ -53,11 +53,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 687,
+        "line": 634,
         "column": 12
       },
       "end": {
-        "line": 691,
+        "line": 638,
         "column": 14
       }
     },
@@ -69,11 +69,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 695,
+        "line": 642,
         "column": 12
       },
       "end": {
-        "line": 699,
+        "line": 646,
         "column": 14
       }
     },
@@ -85,11 +85,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 704,
+        "line": 651,
         "column": 10
       },
       "end": {
-        "line": 708,
+        "line": 655,
         "column": 12
       }
     },
@@ -101,11 +101,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 750,
+        "line": 697,
         "column": 6
       },
       "end": {
-        "line": 750,
+        "line": 697,
         "column": 77
       }
     },
@@ -117,11 +117,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 1143,
+        "line": 1097,
         "column": 8
       },
       "end": {
-        "line": 1143,
+        "line": 1097,
         "column": 79
       }
     },
@@ -133,11 +133,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 1363,
+        "line": 1318,
         "column": 8
       },
       "end": {
-        "line": 1367,
+        "line": 1322,
         "column": 9
       }
     },
@@ -5189,11 +5189,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 314,
+        "line": 318,
         "column": 32
       },
       "end": {
-        "line": 317,
+        "line": 321,
         "column": 3
       }
     },

package/lib/components/basic_table/basic_table.js

@@ -42,6 +42,8 @@ var _delay_render = require("../delay_render");
 
 var _accessibility2 = require("../../services/accessibility");
 
+var _basic_table = require("./basic_table.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "loading", "items", "itemId", "columns", "pagination", "sorting", "selection", "onChange", "error", "noItemsMessage", "compressed", "itemIdToExpandedRowMap", "responsive", "isSelectable", "isExpandable", "hasActions", "rowProps", "cellProps", "tableCaption", "rowHeader", "tableLayout"],
@@ -202,45 +204,6 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
 
     _this = _super.call(this, props);
 
-    _defineProperty(_assertThisInitialized(_this), "cleanups", []);
-
-    _defineProperty(_assertThisInitialized(_this), "tbody", null);
-
-    _defineProperty(_assertThisInitialized(_this), "setTbody", function (tbody) {
-      // remove listeners from an existing element
-      _this.removeLoadingListeners(); // update the ref
-
-
-      _this.tbody = tbody; // if loading, add listeners
-
-      if (_this.props.loading === true && tbody) {
-        _this.addLoadingListeners(tbody);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "addLoadingListeners", function (tbody) {
-      var listener = function listener(event) {
-        event.stopPropagation();
-        event.preventDefault();
-      };
-
-      ['mousedown', 'mouseup', 'mouseover', 'mouseout', 'mouseenter', 'mouseleave', 'click', 'dblclick', 'keydown', 'keyup', 'keypress'].forEach(function (event) {
-        tbody.addEventListener(event, listener, true);
-
-        _this.cleanups.push(function () {
-          tbody.removeEventListener(event, listener, true);
-        });
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "removeLoadingListeners", function () {
-      _this.cleanups.forEach(function (cleanup) {
-        return cleanup();
-      });
-
-      _this.cleanups.length = 0;
-    });
-
     _defineProperty(_assertThisInitialized(_this), "tableId", (0, _accessibility2.htmlIdGenerator)('__table')());
 
     _defineProperty(_assertThisInitialized(_this), "selectAllIdGenerator", (0, _accessibility2.htmlIdGenerator)('_selection_column-checkbox'));
@@ -332,27 +295,13 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
   _createClass(EuiBasicTable, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      if (this.props.loading && this.tbody) this.addLoadingListeners(this.tbody);
       this.getInitialSelection();
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (prevProps.loading !== this.props.loading) {
-        if (this.props.loading && this.tbody) {
-          this.addLoadingListeners(this.tbody);
-        } else {
-          this.removeLoadingListeners();
-        }
-      }
-
+    value: function componentDidUpdate() {
       this.getInitialSelection();
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.removeLoadingListeners();
-    }
   }, {
     key: "getInitialSelection",
     value: function getInitialSelection() {
@@ -513,7 +462,8 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
       var _this$props3 = this.props,
           compressed = _this$props3.compressed,
           responsive = _this$props3.responsive,
-          tableLayout = _this$props3.tableLayout;
+          tableLayout = _this$props3.tableLayout,
+          loading = _this$props3.loading;
       var mobileHeader = responsive ? (0, _react2.jsx)(_table.EuiTableHeaderMobile, null, (0, _react2.jsx)(_flex.EuiFlexGroup, {
         responsive: false,
         justifyContent: "spaceBetween",
@@ -531,7 +481,8 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
         id: this.tableId,
         tableLayout: tableLayout,
         responsive: responsive,
-        compressed: compressed
+        compressed: compressed,
+        css: loading && _basic_table.safariLoadingWorkaround
       }, caption, head, body, footer));
     }
   }, {
@@ -794,30 +745,35 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
     value: function renderTableBody() {
       var _this4 = this;
 
-      if (this.props.error) {
-        return this.renderErrorBody(this.props.error);
-      }
-
-      var items = this.props.items;
-
-      if (items.length === 0) {
-        return this.renderEmptyBody();
+      var _this$props8 = this.props,
+          error = _this$props8.error,
+          loading = _this$props8.loading,
+          items = _this$props8.items;
+      var content;
+
+      if (error) {
+        content = this.renderErrorMessage(error);
+      } else if (items.length === 0) {
+        content = this.renderEmptyMessage();
+      } else {
+        content = items.map(function (item, index) {
+          // if there's pagination the item's index must be adjusted to the where it is in the whole dataset
+          var tableItemIndex = hasPagination(_this4.props) && _this4.props.pagination.pageSize > 0 ? _this4.props.pagination.pageIndex * _this4.props.pagination.pageSize + index : index;
+          return _this4.renderItemRow(item, tableItemIndex);
+        });
       }
 
-      var rows = items.map(function (item, index) {
-        // if there's pagination the item's index must be adjusted to the where it is in the whole dataset
-        var tableItemIndex = hasPagination(_this4.props) && _this4.props.pagination.pageSize > 0 ? _this4.props.pagination.pageIndex * _this4.props.pagination.pageSize + index : index;
-        return _this4.renderItemRow(item, tableItemIndex);
+      return (0, _react2.jsx)(_services.RenderWithEuiTheme, null, function (theme) {
+        return (0, _react2.jsx)(_table.EuiTableBody, {
+          css: loading && (0, _basic_table.euiBasicTableBodyLoading)(theme)
+        }, content);
       });
-      return (0, _react2.jsx)(_table.EuiTableBody, {
-        bodyRef: this.setTbody
-      }, rows);
     }
   }, {
-    key: "renderErrorBody",
-    value: function renderErrorBody(error) {
+    key: "renderErrorMessage",
+    value: function renderErrorMessage(error) {
       var colSpan = this.props.columns.length + (this.props.selection ? 1 : 0);
-      return (0, _react2.jsx)(_table.EuiTableBody, null, (0, _react2.jsx)(_table.EuiTableRow, null, (0, _react2.jsx)(_table.EuiTableRowCell, {
+      return (0, _react2.jsx)(_table.EuiTableRow, null, (0, _react2.jsx)(_table.EuiTableRowCell, {
         align: "center",
         colSpan: colSpan,
         mobileOptions: {
@@ -826,38 +782,38 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
       }, (0, _react2.jsx)(_icon.EuiIcon, {
         type: "minusInCircle",
         color: "danger"
-      }), " ", error)));
+      }), " ", error));
     }
   }, {
-    key: "renderEmptyBody",
-    value: function renderEmptyBody() {
-      var _this$props8 = this.props,
-          columns = _this$props8.columns,
-          selection = _this$props8.selection,
-          noItemsMessage = _this$props8.noItemsMessage;
+    key: "renderEmptyMessage",
+    value: function renderEmptyMessage() {
+      var _this$props9 = this.props,
+          columns = _this$props9.columns,
+          selection = _this$props9.selection,
+          noItemsMessage = _this$props9.noItemsMessage;
       var colSpan = columns.length + (selection ? 1 : 0);
-      return (0, _react2.jsx)(_table.EuiTableBody, null, (0, _react2.jsx)(_table.EuiTableRow, null, (0, _react2.jsx)(_table.EuiTableRowCell, {
+      return (0, _react2.jsx)(_table.EuiTableRow, null, (0, _react2.jsx)(_table.EuiTableRowCell, {
         align: "center",
         colSpan: colSpan,
         mobileOptions: {
           width: '100%'
         }
-      }, noItemsMessage)));
+      }, noItemsMessage));
     }
   }, {
     key: "renderItemRow",
     value: function renderItemRow(item, rowIndex) {
       var _this5 = this;
 
-      var _this$props9 = this.props,
-          columns = _this$props9.columns,
-          selection = _this$props9.selection,
-          isSelectable = _this$props9.isSelectable,
-          hasActions = _this$props9.hasActions,
-          rowHeader = _this$props9.rowHeader,
-          _this$props9$itemIdTo = _this$props9.itemIdToExpandedRowMap,
-          itemIdToExpandedRowMap = _this$props9$itemIdTo === void 0 ? {} : _this$props9$itemIdTo,
-          isExpandable = _this$props9.isExpandable;
+      var _this$props10 = this.props,
+          columns = _this$props10.columns,
+          selection = _this$props10.selection,
+          isSelectable = _this$props10.isSelectable,
+          hasActions = _this$props10.hasActions,
+          rowHeader = _this$props10.rowHeader,
+          _this$props10$itemIdT = _this$props10.itemIdToExpandedRowMap,
+          itemIdToExpandedRowMap = _this$props10$itemIdT === void 0 ? {} : _this$props10$itemIdT,
+          isExpandable = _this$props10.isExpandable;
       var cells = [];
       var itemIdCallback = this.props.itemId;
       var itemId = getItemId(item, itemIdCallback) != null ? getItemId(item, itemIdCallback) : rowIndex;
@@ -1009,7 +965,8 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
         key: key,
         align: "right",
         textOnly: false,
-        hasActions: true
+        hasActions: true,
+        css: _basic_table.euiBasicTableActionsWrapper
       }, tools);
     }
   }, {
@@ -1094,11 +1051,11 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
     value: function renderPaginationBar() {
       var _this8 = this;
 
-      var _this$props10 = this.props,
-          error = _this$props10.error,
-          pagination = _this$props10.pagination,
-          tableCaption = _this$props10.tableCaption,
-          onChange = _this$props10.onChange;
+      var _this$props11 = this.props,
+          error = _this$props11.error,
+          pagination = _this$props11.pagination,
+          tableCaption = _this$props11.tableCaption,
+          onChange = _this$props11.onChange;
 
       if (!error && pagination && pagination.totalItemCount > 0) {
         if (!onChange) {
@@ -1150,8 +1107,7 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
       }
 
       return null;
-    } // used for moving in & out of `loading` state
-
+    }
   }]);
 
   return EuiBasicTable;

package/lib/components/basic_table/basic_table.styles.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.safariLoadingWorkaround = exports.euiBasicTableBodyLoading = exports.euiBasicTableActionsWrapper = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+var _templateObject;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var tableLoadingLine = (0, _react.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    ", "\n    ", "\n  }\n\n  20% {\n    ", "\n    ", "\n  }\n\n  80% {\n    ", "\n    ", "\n  }\n\n  100% {\n    ", "\n    ", "\n  }\n"])), (0, _global_styling.logicalCSS)('left', 0), (0, _global_styling.logicalCSS)('width', 0), (0, _global_styling.logicalCSS)('left', 0), (0, _global_styling.logicalCSS)('width', '40%'), (0, _global_styling.logicalCSS)('left', '60%'), (0, _global_styling.logicalCSS)('width', '40%'), (0, _global_styling.logicalCSS)('left', '100%'), (0, _global_styling.logicalCSS)('width', 0));
+
+var euiBasicTableBodyLoading = function euiBasicTableBodyLoading(_ref2) {
+  var euiTheme = _ref2.euiTheme;
+  return /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;&::before{position:absolute;content:'';", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('height', euiTheme.border.width.thick), " background-color:", euiTheme.colors.primary, ";animation:", tableLoadingLine, " 1s linear infinite;", _global_styling.euiCantAnimate, "{animation-duration:2s;}};label:euiBasicTableBodyLoading;");
+}; // Fix to make the loading indicator position correctly in Safari
+// For whatever annoying reason, Safari doesn't respect `position: relative;`
+// on `tbody` without `position: relative` on the parent `table`
+
+
+exports.euiBasicTableBodyLoading = euiBasicTableBodyLoading;
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "6xbnw4-safariLoadingWorkaround",
+  styles: "position:relative;label:safariLoadingWorkaround;"
+} : {
+  name: "6xbnw4-safariLoadingWorkaround",
+  styles: "position:relative;label:safariLoadingWorkaround;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var safariLoadingWorkaround = function safariLoadingWorkaround() {
+  return _ref;
+}; // Unsets the extra height caused by tooltip/popover wrappers around table action buttons
+// Without this, the row height jumps whenever actions are disabled
+
+
+exports.safariLoadingWorkaround = safariLoadingWorkaround;
+var euiBasicTableActionsWrapper = process.env.NODE_ENV === "production" ? {
+  name: "1mshepa-euiBasicTableActionsWrapper",
+  styles: "line-height:1;label:euiBasicTableActionsWrapper;"
+} : {
+  name: "1mshepa-euiBasicTableActionsWrapper",
+  styles: "line-height:1;label:euiBasicTableActionsWrapper;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+exports.euiBasicTableActionsWrapper = euiBasicTableActionsWrapper;

package/lib/components/modal/confirm_modal.js

@@ -33,7 +33,7 @@ var _text = require("../text");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "title", "onCancel", "onConfirm", "cancelButtonText", "confirmButtonText", "confirmButtonDisabled", "className", "buttonColor", "defaultFocusedButton", "isLoading"];
+var _excluded = ["children", "title", "titleProps", "onCancel", "onConfirm", "cancelButtonText", "confirmButtonText", "confirmButtonDisabled", "className", "buttonColor", "defaultFocusedButton", "isLoading"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -67,6 +67,7 @@ exports.CANCEL_BUTTON = CANCEL_BUTTON;
 var EuiConfirmModal = function EuiConfirmModal(_ref) {
   var children = _ref.children,
       title = _ref.title,
+      titleProps = _ref.titleProps,
       onCancel = _ref.onCancel,
       onConfirm = _ref.onConfirm,
       cancelButtonText = _ref.cancelButtonText,
@@ -118,9 +119,9 @@ var EuiConfirmModal = function EuiConfirmModal(_ref) {
   var modalTitle;
 
   if (title) {
-    modalTitle = (0, _react2.jsx)(_modal_header.EuiModalHeader, null, (0, _react2.jsx)(_modal_header_title.EuiModalHeaderTitle, {
+    modalTitle = (0, _react2.jsx)(_modal_header.EuiModalHeader, null, (0, _react2.jsx)(_modal_header_title.EuiModalHeaderTitle, _extends({
       "data-test-subj": "confirmModalTitleText"
-    }, title));
+    }, titleProps), title));
   }
 
   var message;
@@ -159,6 +160,7 @@ EuiConfirmModal.propTypes = {
      */
   children: _propTypes.default.node,
   title: _propTypes.default.node,
+  titleProps: _propTypes.default.any,
   cancelButtonText: _propTypes.default.node,
   confirmButtonText: _propTypes.default.node,
   onCancel: _propTypes.default.func.isRequired,

package/lib/components/modal/modal.a11y.js

@@ -47,7 +47,7 @@ var Modal = function Modal() {
   };
   return (0, _react2.jsx)("div", null, (0, _react2.jsx)(_button.EuiButton, {
     onClick: showModal
-  }, "Show confirm modal"), isModalVisible && (0, _react2.jsx)(_index.EuiModal, modalProps, (0, _react2.jsx)(_index.EuiModalHeader, null, (0, _react2.jsx)(_index.EuiModalHeaderTitle, null, (0, _react2.jsx)("h1", null, "Title of modal"))), (0, _react2.jsx)(_index.EuiModalBody, null, (0, _react2.jsx)("p", null, "This is a simple modal body")), (0, _react2.jsx)(_index.EuiModalFooter, null, (0, _react2.jsx)(_button.EuiButton, {
+  }, "Show confirm modal"), isModalVisible && (0, _react2.jsx)(_index.EuiModal, modalProps, (0, _react2.jsx)(_index.EuiModalHeader, null, (0, _react2.jsx)(_index.EuiModalHeaderTitle, null, "Title of modal")), (0, _react2.jsx)(_index.EuiModalBody, null, (0, _react2.jsx)("p", null, "This is a simple modal body")), (0, _react2.jsx)(_index.EuiModalFooter, null, (0, _react2.jsx)(_button.EuiButton, {
     onClick: closeModal,
     fill: true
   }, "Close"))));

package/lib/components/modal/modal_header_title.js

@@ -15,7 +15,7 @@ var _title = require("../title");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "children"];
+var _excluded = ["className", "children", "component"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -28,13 +28,15 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var EuiModalHeaderTitle = function EuiModalHeaderTitle(_ref) {
   var className = _ref.className,
       children = _ref.children,
+      _ref$component = _ref.component,
+      Component = _ref$component === void 0 ? 'h1' : _ref$component,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = (0, _classnames.default)('euiModalHeader__title', className);
   return (0, _react2.jsx)(_title.EuiTitle, _extends({
     size: "m",
     className: classes
-  }, rest), /*#__PURE__*/_react.default.isValidElement(children) ? children : (0, _react2.jsx)("h1", null, children));
+  }, rest), (0, _react2.jsx)(Component, null, children));
 };
 
 exports.EuiModalHeaderTitle = EuiModalHeaderTitle;
@@ -42,5 +44,12 @@ EuiModalHeaderTitle.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
-  css: _propTypes.default.any
+  css: _propTypes.default.any,
+
+  /**
+         * The tag to render. Can be changed to a lower heading
+         * level like `h2` or a container `div`.
+         * @default h1
+         */
+  component: _propTypes.default.any
 };

package/lib/components/resizable_container/resizable_panel.js

@@ -329,6 +329,11 @@ EuiResizablePanel.propTypes = {
      */
   style: _propTypes.default.any,
 
+  /**
+     * tabIndex={0} provides full keyboard access when content overflows `<EuiResizablePanel />`
+     */
+  tabIndex: _propTypes.default.number,
+
   /**
      * Props to add to the wrapping `.euiResizablePanel` div
      */

package/lib/services/security/get_secure_rel_for_target.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getSecureRelForTarget = void 0;
 
-var _url = require("../url");
-
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -20,18 +18,13 @@ var _url = require("../url");
  * https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/
  */
 var getSecureRelForTarget = function getSecureRelForTarget(_ref) {
-  var href = _ref.href,
-      _ref$target = _ref.target,
+  var _ref$target = _ref.target,
       target = _ref$target === void 0 ? '' : _ref$target,
       rel = _ref.rel;
-  var isElasticHref = !!href && (0, _url.isDomainSecure)(href);
   var relParts = !!rel ? rel.split(' ').filter(function (part) {
     return !!part.length && part !== 'noreferrer';
   }) : [];
-
-  if (!isElasticHref) {
-    relParts.push('noreferrer');
-  }
+  relParts.push('noreferrer');
 
   if (target.includes('_blank') && relParts.indexOf('noopener') === -1) {
     relParts.push('noopener');

package/lib/services/theme/hooks.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withEuiTheme = exports.useEuiTheme = void 0;
+exports.withEuiTheme = exports.useEuiTheme = exports.RenderWithEuiTheme = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -22,6 +22,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var providerMessage = "`EuiProvider` is missing which can result in negative effects.\nWrap your component in `EuiProvider`: https://ela.st/euiprovider.";
+/**
+ * Hook for function components
+ */
 
 var useEuiTheme = function useEuiTheme() {
   var theme = (0, _react.useContext)(_context.EuiThemeContext);
@@ -57,6 +60,10 @@ var useEuiTheme = function useEuiTheme() {
   }, [theme, colorMode, modifications]);
   return assembledTheme;
 };
+/**
+ * HOC for class components
+ */
+
 
 exports.useEuiTheme = useEuiTheme;
 
@@ -77,5 +84,18 @@ var withEuiTheme = function withEuiTheme(Component) {
   WithEuiTheme.displayName = componentName;
   return WithEuiTheme;
 };
+/**
+ * Render prop alternative for complex class components
+ * Most useful for scenarios where a HOC may interfere with typing
+ */
+
+
+exports.withEuiTheme = withEuiTheme;
+
+var RenderWithEuiTheme = function RenderWithEuiTheme(_ref) {
+  var children = _ref.children;
+  var theme = useEuiTheme();
+  return children(theme);
+};
 
-exports.withEuiTheme = withEuiTheme;
+exports.RenderWithEuiTheme = RenderWithEuiTheme;

package/lib/services/theme/index.js

@@ -45,6 +45,12 @@ Object.defineProperty(exports, "EuiThemeProvider", {
     return _provider.EuiThemeProvider;
   }
 });
+Object.defineProperty(exports, "RenderWithEuiTheme", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.RenderWithEuiTheme;
+  }
+});
 Object.defineProperty(exports, "buildTheme", {
   enumerable: true,
   get: function get() {