@elastic/eui 95.10.1 → 95.11.0

package/es/components/datagrid/data_grid.styles.js

@@ -0,0 +1,88 @@
+/*
+ * 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.
+ */
+
+import { css } from '@emotion/react';
+import { tintOrShade } from '../../services';
+import { euiFontSize, logicalCSS, logicalSizeCSS, mathWithUnits } from '../../global_styling';
+export var euiDataGridVariables = function euiDataGridVariables(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    cellPadding: {
+      s: euiTheme.size.xs,
+      m: mathWithUnits(euiTheme.size.m, function (x) {
+        return x / 2;
+      }),
+      l: euiTheme.size.s
+    },
+    lineHeight: {
+      s: euiFontSize(euiThemeContext, 'xs').lineHeight,
+      m: euiFontSize(euiThemeContext, 'm').lineHeight
+    },
+    fontSize: {
+      s: euiFontSize(euiThemeContext, 'xs').fontSize,
+      m: euiFontSize(euiThemeContext, 's').fontSize
+    },
+    levels: {
+      cellPopover: Number(euiTheme.levels.header),
+      // Same z-index as EuiFlyout mask overlays - cell popovers should be under both modal and flyout overlays
+      get stickyHeader() {
+        return this.cellPopover - 1; // Needs to sit above the content + cell focus outlines/actions, but below actual popovers
+      }
+    }
+  };
+};
+export var euiDataGridStyles = function euiDataGridStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+    colorMode = euiThemeContext.colorMode;
+  var _euiDataGridVariables = euiDataGridVariables(euiThemeContext),
+    _cellPadding = _euiDataGridVariables.cellPadding,
+    lineHeight = _euiDataGridVariables.lineHeight,
+    _fontSize = _euiDataGridVariables.fontSize;
+  return {
+    euiDataGrid: /*#__PURE__*/css("display:flex;flex-direction:column;align-items:stretch;", logicalCSS('height', '100%'), " overflow:hidden;*:where(& .euiDataGridRow){background-color:", euiTheme.colors.emptyShade, ";}*:where(&.euiDataGrid--stripes .euiDataGridRow--striped){background-color:", euiTheme.colors.lightestShade, ";}*:where(&.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover){background-color:", euiTheme.colors.highlight, ";};label:euiDataGrid;"),
+    cellPadding: {
+      cellPadding: function cellPadding(size) {
+        return /*#__PURE__*/css(".euiDataGridHeaderCell,.euiDataGridRowCell__content{padding:", _cellPadding[size], ";}/* Workaround to trim line-clamp and padding - @see https://github.com/elastic/eui/issues/7780 */.euiDataGridRowCell__content--lineCountHeight{", logicalCSS('padding-bottom', 0), " ", logicalCSS('border-bottom', "".concat(_cellPadding[size], " solid transparent")), ";}.euiDataGridHeaderCell__button{margin-block:-", _cellPadding[size], ";};label:cellPadding;");
+      },
+      get s() {
+        return /*#__PURE__*/css(this.cellPadding('s'), ";label:s;");
+      },
+      get m() {
+        return /*#__PURE__*/css(this.cellPadding('m'), ";label:m;");
+      },
+      get l() {
+        return /*#__PURE__*/css(this.cellPadding('l'), ";label:l;");
+      }
+    },
+    fontSize: {
+      fontSize: function fontSize(size) {
+        return /*#__PURE__*/css(".euiDataGridHeaderCell,.euiDataGridRowCell{font-size:", _fontSize[size], ";line-height:", lineHeight[size], ";};label:fontSize;");
+      },
+      get s() {
+        return /*#__PURE__*/css(this.fontSize('s'), ";label:s;");
+      },
+      get m() {
+        return /*#__PURE__*/css(this.fontSize('m'), ";label:m;");
+      },
+      get l() {
+        // On the Amsterdam theme, the l fontSize is the same as m
+        return /*#__PURE__*/css(this.fontSize('m'), ";label:l;");
+      }
+    },
+    borders: {
+      none: null,
+      horizontal: /*#__PURE__*/css("label:borders;.euiDataGridRowCell:not(.euiDataGridFooterCell),.euiDataGridFooter,&:not(.euiDataGrid--headerUnderline) .euiDataGridHeader{", logicalCSS('border-bottom', euiTheme.border.thin), ";}&:not(.euiDataGrid--footerOverline) .euiDataGridFooter{", logicalCSS('border-top', euiTheme.border.thin), " ", logicalCSS('margin-top', "-".concat(euiTheme.border.width.thin)), ";}.euiDataGridHeader{", logicalCSS('border-top', euiTheme.border.thin), ";};label:horizontal;"),
+      all: /*#__PURE__*/css("label:borders;.euiDataGridRowCell{&:not(.euiDataGridFooterCell){", logicalCSS('border-bottom', euiTheme.border.thin), " ", logicalCSS('border-right', // Visually lighten vertical borders
+      "".concat(euiTheme.border.width.thin, " solid ").concat(tintOrShade(euiTheme.border.color, 0.3, colorMode))), ";}&--firstColumn{", logicalCSS('border-left', euiTheme.border.thin), ";}&--lastColumn{", logicalCSS('border-right-color', euiTheme.border.color), ";}}.euiDataGridFooterCell,.euiDataGridHeaderCell{", logicalCSS('border-right', euiTheme.border.thin), " &:first-of-type{", logicalCSS('border-left', euiTheme.border.thin), ";}}.euiDataGridFooter{", logicalCSS('border-bottom', euiTheme.border.thin), ";}&:not(.euiDataGrid--footerOverline) .euiDataGridFooter{", logicalCSS('border-top', euiTheme.border.thin), " ", logicalCSS('margin-top', "-".concat(euiTheme.border.width.thin)), ";}&:not(.euiDataGrid--headerUnderline) .euiDataGridHeader{", logicalCSS('border-bottom', euiTheme.border.thin), ";}&:is(.euiDataGrid--noControls) .euiDataGridHeader{", logicalCSS('border-top', euiTheme.border.thin), ";}.euiDataGrid__controls{border:", euiTheme.border.thin, ";background-color:", euiTheme.colors.body, ";};label:all;")
+    },
+    // Sits below the controls above it and pagination below it
+    euiDataGrid__content: /*#__PURE__*/css("z-index:1;position:relative;flex-grow:1;", logicalSizeCSS('100%'), " ", logicalCSS('max-width', '100%'), " overflow:hidden;background-color:", euiTheme.colors.body, ";font-feature-settings:'tnum' 1;;label:euiDataGrid__content;"),
+    // Wrapper around EuiDataGrid
+    euiDataGrid__focusWrap: /*#__PURE__*/css(logicalCSS('height', '100%'), ";;label:euiDataGrid__focusWrap;")
+  };
+};

package/es/components/datagrid/{utils → pagination}/data_grid_pagination.js

@@ -13,22 +13,35 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
  */
 
 import React, { useCallback, useContext } from 'react';
-import { useEuiI18n } from '../../i18n'; // Note: this file must be named data_grid_pagination to match i18n tokens
-import { EuiTablePagination, useEuiTablePaginationDefaults } from '../../table/table_pagination';
-import { DataGridFocusContext } from './focus';
+import { useEuiMemoizedStyles } from '../../../services';
+import { useEuiI18n } from '../../i18n';
+import { EuiTablePagination } from '../../table/table_pagination';
+import { DataGridFocusContext } from '../utils/focus';
+import { euiDataGridPaginationStyles } from './data_grid_pagination.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiDataGridPaginationRenderer = function EuiDataGridPaginationRenderer(_ref) {
-  var pageIndex = _ref.pageIndex,
-    _pageSize = _ref.pageSize,
-    _pageSizeOptions = _ref.pageSizeOptions,
-    _onChangePage = _ref.onChangePage,
-    onChangeItemsPerPage = _ref.onChangeItemsPerPage,
-    rowCount = _ref.rowCount,
-    controls = _ref.controls,
-    ariaLabel = _ref['aria-label'];
-  var defaults = useEuiTablePaginationDefaults();
-  var pageSize = _pageSize !== null && _pageSize !== void 0 ? _pageSize : defaults.itemsPerPage;
-  var pageSizeOptions = _pageSizeOptions !== null && _pageSizeOptions !== void 0 ? _pageSizeOptions : defaults.itemsPerPageOptions;
+/**
+ * Do not render the pagination when:
+ * 1. Rows count is less than min pagination option (rows per page)
+ * 2. Rows count is less than pageSize (the case when there are no pageSizeOptions provided)
+ */
+export var shouldRenderPagination = function shouldRenderPagination(rowCount, _ref) {
+  var pageSize = _ref.pageSize,
+    pageSizeOptions = _ref.pageSizeOptions;
+  var minSizeOption = _toConsumableArray(pageSizeOptions).sort(function (a, b) {
+    return a - b;
+  })[0];
+  return !(rowCount < (minSizeOption || pageSize));
+};
+export var EuiDataGridPagination = function EuiDataGridPagination(_ref2) {
+  var pageIndex = _ref2.pageIndex,
+    pageSize = _ref2.pageSize,
+    pageSizeOptions = _ref2.pageSizeOptions,
+    _onChangePage = _ref2.onChangePage,
+    onChangeItemsPerPage = _ref2.onChangeItemsPerPage,
+    rowCount = _ref2.rowCount,
+    controls = _ref2.controls,
+    ariaLabel = _ref2['aria-label'];
+  var styles = useEuiMemoizedStyles(euiDataGridPaginationStyles);
   var detailedPaginationLabel = useEuiI18n('euiDataGridPagination.detailedPaginationLabel', 'Pagination for preceding grid: {label}', {
     label: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ''
   });
@@ -42,28 +55,15 @@ export var EuiDataGridPaginationRenderer = function EuiDataGridPaginationRendere
     setFocusedCell([0, 0]);
   }, [setFocusedCell, _onChangePage]);
   var pageCount = pageSize ? Math.ceil(rowCount / pageSize) : 1;
-  var minSizeOption = _toConsumableArray(pageSizeOptions).sort(function (a, b) {
-    return a - b;
-  })[0];
-  if (rowCount < (minSizeOption || pageSize)) {
-    /**
-     * Do not render the pagination when:
-     * 1. Rows count is less than min pagination option (rows per page)
-     * 2. Rows count is less than pageSize (the case when there are no pageSizeOptions provided)
-     */
-    return null;
-  }
-
-  // Hide select rows per page if pageSizeOptions is an empty array
-  var hidePerPageOptions = pageSizeOptions.length === 0;
   return ___EmotionJSX("div", {
+    css: styles.euiDataGrid__pagination,
     className: "euiDataGrid__pagination"
   }, ___EmotionJSX(EuiTablePagination, {
     "aria-controls": controls,
     activePage: pageIndex,
-    showPerPageOptions: !hidePerPageOptions,
     itemsPerPage: pageSize,
     itemsPerPageOptions: pageSizeOptions,
+    showPerPageOptions: pageSizeOptions.length > 0,
     pageCount: pageCount,
     onChangePage: onChangePage,
     onChangeItemsPerPage: onChangeItemsPerPage,

package/es/components/datagrid/pagination/data_grid_pagination.styles.js

@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../../global_styling';
+export var euiDataGridPaginationStyles = function euiDataGridPaginationStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiDataGrid__pagination: /*#__PURE__*/css("z-index:2;flex-grow:0;", logicalCSS('padding-top', euiTheme.size.xs), " .euiDataGrid--fullScreen &{", logicalCSS('padding-bottom', euiTheme.size.xs), " background-color:", euiTheme.colors.lightestShade, ";box-shadow:", euiTheme.border.width.thin, " 0 0 ", euiTheme.border.width.thin, " ", euiTheme.border.color, ";};label:euiDataGrid__pagination;")
+  };
+};

package/es/components/datagrid/pagination/index.js

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { shouldRenderPagination, EuiDataGridPagination } from './data_grid_pagination';

package/es/components/datagrid/utils/row_heights.js

@@ -29,18 +29,12 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  */
 
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { useForceRender, useLatest } from '../../../services';
+import { useForceRender, useLatest, useEuiMemoizedStyles } from '../../../services';
 import { isNumber, isObject } from '../../../services/predicate';
+import { euiDataGridVariables } from '../data_grid.styles';
 import { DataGridSortedContext } from './sorting';
-
-// TODO: Once JS variables are available, use them here instead of hard-coded maps
-export var cellPaddingsMap = {
-  s: 4,
-  m: 6,
-  l: 8
-};
-export var AUTO_HEIGHT = 'auto';
-export var DEFAULT_ROW_HEIGHT = 34;
+var AUTO_HEIGHT = 'auto';
+var DEFAULT_ROW_HEIGHT = 34;
 export var RowHeightUtils = /*#__PURE__*/function () {
   function RowHeightUtils() {
     var _this = this;
@@ -108,10 +102,13 @@ export var RowHeightUtils = /*#__PURE__*/function () {
     }
   }, {
     key: "cacheStyles",
-    value: function cacheStyles(gridStyles) {
+    value: function cacheStyles(gridStyles, cellPaddingsMap) {
+      var _gridStyles$cellPaddi;
+      var paddingSize = (_gridStyles$cellPaddi = gridStyles.cellPadding) !== null && _gridStyles$cellPaddi !== void 0 ? _gridStyles$cellPaddi : 'm';
+      var padding = parseFloat(cellPaddingsMap[paddingSize]);
       this.styles = {
-        paddingTop: cellPaddingsMap[gridStyles.cellPadding || 'm'],
-        paddingBottom: cellPaddingsMap[gridStyles.cellPadding || 'm']
+        paddingTop: padding,
+        paddingBottom: padding
       };
     }
   }, {
@@ -317,11 +314,12 @@ export var useRowHeightUtils = function useRowHeightUtils(_ref2) {
   rowHeightUtils, forceRenderRef]);
 
   // Re-cache styles whenever grid density changes
+  var styleVars = useEuiMemoizedStyles(euiDataGridVariables);
   useEffect(function () {
     rowHeightUtils.cacheStyles({
       cellPadding: gridStyles.cellPadding
-    });
-  }, [gridStyles.cellPadding, rowHeightUtils]);
+    }, styleVars.cellPadding);
+  }, [gridStyles.cellPadding, rowHeightUtils, styleVars.cellPadding]);
 
   // Update row heights map to remove hidden columns whenever orderedVisibleColumns change
   useEffect(function () {

package/es/components/datagrid/utils/scrolling.js

@@ -11,8 +11,11 @@ function _asyncToGenerator(n) { return function () { var t = this, e = arguments
  */
 
 import React, { useContext, useEffect, useCallback, useMemo } from 'react';
+import { useEuiMemoizedStyles } from '../../../services';
+import { logicalStyles } from '../../../global_styling';
 import { DataGridCellPopoverContext } from '../body/cell';
 import { DataGridFocusContext } from './focus';
+import { euiDataGridScrollBarStyles } from './scrolling.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 /**
  * The primary goal of this scroll logic is to ensure keyboard navigation works accessibly,
@@ -208,6 +211,7 @@ export var useScrollBars = function useScrollBars(outerGridRef) {
   // If the grid scrolls or has scrollbars, we add custom border overlays
   // (since borders are normally set by cells) to ensure our grid body has
   // ending borders regardless of scroll position
+  var styles = useEuiMemoizedStyles(euiDataGridScrollBarStyles);
   var scrollBorderOverlay = useMemo(function () {
     if (!hasHorizontalScroll && !hasVerticalScroll) {
       return null; // Nothing to render if the grid doesn't scroll
@@ -216,22 +220,25 @@ export var useScrollBars = function useScrollBars(outerGridRef) {
       return null; // Nothing to render if the grid doesn't use borders
     }
     return ___EmotionJSX("div", {
+      css: styles.euiDataGrid__scrollOverlay,
       className: "euiDataGrid__scrollOverlay",
       role: "presentation"
     }, scrollBarHeight > 0 && ___EmotionJSX("div", {
+      css: styles.euiDataGrid__scrollBarOverlayBottom,
       className: "euiDataGrid__scrollBarOverlayBottom",
-      style: {
-        bottom: scrollBarHeight,
-        right: 0
-      }
+      style: logicalStyles({
+        bottom: scrollBarHeight
+      })
     }), scrollBarWidth > 0 && ___EmotionJSX("div", {
+      css: styles.euiDataGrid__scrollBarOverlayRight,
       className: "euiDataGrid__scrollBarOverlayRight",
-      style: {
+      style: logicalStyles({
+        top: 0,
         bottom: scrollBarHeight,
         right: scrollBarWidth
-      }
+      })
     }));
-  }, [hasHorizontalScroll, hasVerticalScroll, scrollBarHeight, scrollBarWidth, borderStyle]);
+  }, [hasHorizontalScroll, hasVerticalScroll, scrollBarHeight, scrollBarWidth, borderStyle, styles]);
   return {
     scrollBarHeight: scrollBarHeight,
     scrollBarWidth: scrollBarWidth,

package/es/components/datagrid/utils/scrolling.styles.js

@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS, mathWithUnits } from '../../../global_styling';
+export var euiDataGridScrollBarStyles = function euiDataGridScrollBarStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+
+  // Note that 'borders' *must* be rendered with inset box-shadow, because actual
+  // `border` CSS will affect the relative position of the child scroll bar overlays
+  // and cause them to be off by the width of the border
+  var borderWidth = euiTheme.border.width.thin;
+  var borderColor = euiTheme.border.color;
+  return {
+    euiDataGrid__scrollOverlay: /*#__PURE__*/css("position:absolute;inset:0;", logicalCSS('top', "-".concat(borderWidth)), "pointer-events:none;box-shadow:inset 0 0 0 ", borderWidth, " ", borderColor, ";.euiDataGrid--bordersHorizontal &{box-shadow:inset 0 -", mathWithUnits(borderWidth, function (x) {
+      return x * 2;
+    }), " 0 -", borderWidth, " ", borderColor, ";};label:euiDataGrid__scrollOverlay;"),
+    // Ensure the horizontal scrollbar has a top border
+    euiDataGrid__scrollBarOverlayBottom: /*#__PURE__*/css("position:absolute;inset-inline:0;", logicalCSS('height', borderWidth), " background-color:", borderColor, ";;label:euiDataGrid__scrollBarOverlayBottom;"),
+    // Ensure the vertical scrollbar has a left border
+    euiDataGrid__scrollBarOverlayRight: /*#__PURE__*/css("position:absolute;", logicalCSS('width', borderWidth), " background-color:", borderColor, ";;label:euiDataGrid__scrollBarOverlayRight;")
+    // 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
+  };
+};

package/es/components/flyout/flyout_resizable.js

@@ -1,4 +1,4 @@
-var _excluded = ["size", "maxWidth", "minWidth", "onResize", "side", "type", "children"];
+var _excluded = ["size", "maxWidth", "minWidth", "onResize", "side", "type", "ownFocus", "children"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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."); }
@@ -35,10 +35,13 @@ export var EuiFlyoutResizable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     side = _ref$side === void 0 ? 'right' : _ref$side,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'overlay' : _ref$type,
+    _ref$ownFocus = _ref.ownFocus,
+    ownFocus = _ref$ownFocus === void 0 ? true : _ref$ownFocus,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var hasOverlay = type === 'overlay' && ownFocus;
   var styles = useEuiMemoizedStyles(euiFlyoutResizableButtonStyles);
-  var cssStyles = [styles.euiFlyoutResizableButton, styles[type][side]];
+  var cssStyles = [styles.euiFlyoutResizableButton, styles[type][side], !hasOverlay && styles.noOverlay.noOverlay, !hasOverlay && styles.noOverlay[side]];
   var getFlyoutMinMaxWidth = useCallback(function (width) {
     return Math.min(Math.max(width, minWidth), maxWidth || Infinity, window.innerWidth - 20 // Leave some offset
     );
@@ -142,6 +145,7 @@ export var EuiFlyoutResizable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     maxWidth: maxWidth,
     side: side,
     type: type,
+    ownFocus: ownFocus,
     ref: setRefs
   }), ___EmotionJSX(EuiResizableButton, {
     isHorizontal: true,

package/es/components/flyout/flyout_resizable.styles.js

@@ -10,6 +10,30 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css } from '@emotion/react';
 import { logicalCSS } from '../../global_styling';
 var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1vfos8p-right",
+  styles: "justify-content:flex-start;label:right;"
+} : {
+  name: "1vfos8p-right",
+  styles: "justify-content:flex-start;label:right;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "1ydooaf-left",
+  styles: "justify-content:flex-end;label:left;"
+} : {
+  name: "1ydooaf-left",
+  styles: "justify-content:flex-end;label:left;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "1cw850z-noOverlay",
+  styles: "margin-inline:0;label:noOverlay;"
+} : {
+  name: "1cw850z-noOverlay",
+  styles: "margin-inline:0;label:noOverlay;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref4 = process.env.NODE_ENV === "production" ? {
   name: "1gfwqnd-euiFlyoutResizableButton",
   styles: "position:absolute;label:euiFlyoutResizableButton;"
 } : {
@@ -17,17 +41,22 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "position:absolute;label:euiFlyoutResizableButton;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiFlyoutResizableButtonStyles = function euiFlyoutResizableButtonStyles(_ref2) {
-  var euiTheme = _ref2.euiTheme;
+export var euiFlyoutResizableButtonStyles = function euiFlyoutResizableButtonStyles(_ref5) {
+  var euiTheme = _ref5.euiTheme;
   return {
-    euiFlyoutResizableButton: _ref,
+    euiFlyoutResizableButton: _ref4,
     overlay: {
       left: /*#__PURE__*/css(logicalCSS('right', 0), ";;label:left;"),
       right: /*#__PURE__*/css(logicalCSS('left', 0), ";;label:right;")
     },
     push: {
-      left: /*#__PURE__*/css(logicalCSS('right', "-".concat(euiTheme.border.width.thin)), ";;label:left;"),
-      right: /*#__PURE__*/css(logicalCSS('left', "-".concat(euiTheme.border.width.thin)), ";;label:right;")
+      left: /*#__PURE__*/css(logicalCSS('right', "-".concat(euiTheme.border.width.thick)), ";;label:left;"),
+      right: /*#__PURE__*/css(logicalCSS('left', "-".concat(euiTheme.border.width.thick)), ";;label:right;")
+    },
+    noOverlay: {
+      noOverlay: _ref3,
+      left: _ref2,
+      right: _ref
     }
   };
 };

package/es/components/popover/popover.js

@@ -437,7 +437,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
           }), popoverScreenReaderText));
         }
         var returnFocus = this.state.isOpenStable ? returnFocusConfig : false;
-        panel = ___EmotionJSX(EuiPortal, {
+        panel = ___EmotionJSX(EuiPortal, insert && {
           insert: insert
         }, ___EmotionJSX(EuiFocusTrap, _extends({
           clickOutsideDisables: true,

package/es/components/text/text.js

@@ -1,4 +1,4 @@
-var _excluded = ["size", "color", "grow", "textAlign", "children", "className"];
+var _excluded = ["component", "size", "color", "grow", "textAlign", "children", "className"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return 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; }
@@ -14,13 +14,15 @@ import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { useEuiMemoizedStyles } from '../../services';
-import { euiTextStyles } from './text.styles';
 import { EuiTextColor } from './text_color';
 import { EuiTextAlign } from './text_align';
+import { euiTextStyles } from './text.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var TEXT_SIZES = ['xs', 's', 'm', 'relative'];
 export var 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,
@@ -32,12 +34,14 @@ export var EuiText = function EuiText(_ref) {
   var styles = useEuiMemoizedStyles(euiTextStyles);
   var cssStyles = [styles.euiText, !grow ? styles.constrainedWidth : undefined, styles[size]];
   var classes = classNames('euiText', className);
-  var text = ___EmotionJSX("div", _extends({
+  var Component = component;
+  var text = ___EmotionJSX(Component, _extends({
     css: cssStyles,
     className: classes
   }, rest), children);
   if (color) {
     text = ___EmotionJSX(EuiTextColor, {
+      component: component,
       color: color,
       className: classes,
       cloneElement: true
@@ -45,6 +49,7 @@ export var EuiText = function EuiText(_ref) {
   }
   if (textAlign) {
     text = ___EmotionJSX(EuiTextAlign, {
+      component: component,
       textAlign: textAlign,
       className: classes,
       cloneElement: true
@@ -57,15 +62,26 @@ EuiText.propTypes = {
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.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.oneOf(["div", "span", "p"]),
+  /**
+     * Any of our named colors or a `hex`, `rgb` or `rgba` value.
+     * @default inherit
+     */
+  color: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.any.isRequired]),
+  /**
+     * Applies horizontal text alignment
+     * @default left
+     */
   textAlign: PropTypes.any,
   /**
        * Determines the text size. Choose `relative` to control the `font-size` based on the value of a parent container.
        */
   size: PropTypes.any,
-  /**
-       * Any of our named colors or a `hex`, `rgb` or `rgba` value.
-       * @default inherit
-       */
-  color: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.any.isRequired]),
   grow: PropTypes.bool
 };

package/es/components/text/text_align.js

@@ -1,5 +1,5 @@
 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); }
-var _excluded = ["children", "textAlign", "cloneElement"];
+var _excluded = ["children", "component", "textAlign", "cloneElement"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -23,6 +23,8 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export var ALIGNMENTS = ['left', 'right', 'center'];
 export var 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,
@@ -35,7 +37,7 @@ export var EuiTextAlign = function EuiTextAlign(_ref) {
   if ( /*#__PURE__*/isValidElement(children) && cloneElement) {
     return cloneElementWithCss(children, props);
   } else {
-    return ___EmotionJSX("div", props, children);
+    return ___EmotionJSX(Component, props, children);
   }
 };
 EuiTextAlign.propTypes = {
@@ -43,10 +45,21 @@ EuiTextAlign.propTypes = {
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
-  textAlign: PropTypes.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.bool
+  component: PropTypes.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.bool,
+  /**
+     * Applies horizontal text alignment
+     * @default left
+     */
+  textAlign: PropTypes.any
 };

package/es/components/text/text_color.js

@@ -29,7 +29,7 @@ export var 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,
@@ -54,7 +54,6 @@ export var EuiTextColor = function EuiTextColor(_ref) {
       style: childrenStyle
     }));
   } else {
-    var Component = component;
     return ___EmotionJSX(Component, props, children);
   }
 };
@@ -64,16 +63,20 @@ EuiTextColor.propTypes = {
   "data-test-subj": PropTypes.string,
   css: PropTypes.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.oneOfType([PropTypes.any.isRequired, PropTypes.any.isRequired]),
+  component: PropTypes.oneOf(["div", "span", "p"]),
   /**
-       * Determines the root element
-       */
-  component: PropTypes.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.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.bool
+     * Any of our named colors or a `hex`, `rgb` or `rgba` value.
+     * @default inherit
+     */
+  color: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.any.isRequired])
 };

package/es/components/text/types.js

@@ -0,0 +1 @@
+export {};