@elastic/eui 70.0.0 → 70.2.0

package/es/components/datagrid/controls/keyboard_shortcuts.js

@@ -0,0 +1,191 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/*
+ * 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 React, { useState, useMemo } from 'react';
+import { useGeneratedHtmlId } from '../../../services';
+import { EuiButtonIcon } from '../../button';
+import { EuiToolTip } from '../../tool_tip';
+import { EuiPopover, EuiPopoverTitle } from '../../popover';
+import { EuiDescriptionList } from '../../description_list';
+import { EuiText } from '../../text';
+import { useEuiI18n, EuiI18n } from '../../i18n';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var useDataGridKeyboardShortcuts = function useDataGridKeyboardShortcuts() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var title = useEuiI18n('euiKeyboardShortcuts.title', 'Keyboard shortcuts');
+  var titleId = useGeneratedHtmlId();
+  var keyboardShortcuts = useMemo(function () {
+    return ___EmotionJSX(EuiPopover, {
+      "data-test-subj": "dataGridKeyboardShortcutsPopover",
+      isOpen: isOpen,
+      closePopover: function closePopover() {
+        return setIsOpen(false);
+      },
+      anchorPosition: "downRight",
+      button: ___EmotionJSX(EuiToolTip, {
+        content: title,
+        delay: "long"
+      }, ___EmotionJSX(EuiButtonIcon, {
+        size: "xs",
+        iconType: "keyboard",
+        color: "text",
+        "data-test-subj": "dataGridKeyboardShortcutsButton",
+        onClick: function onClick() {
+          return setIsOpen(!isOpen);
+        },
+        "aria-label": title
+      }))
+    }, ___EmotionJSX(EuiPopoverTitle, {
+      paddingSize: "s"
+    }, ___EmotionJSX("h2", {
+      id: titleId
+    }, title)), ___EmotionJSX(EuiText, {
+      className: "euiDataGrid__keyboardShortcuts",
+      size: "xs"
+    }, ___EmotionJSX(EuiDescriptionList, {
+      "aria-labelledby": titleId,
+      type: "column",
+      align: "center",
+      compressed: true,
+      gutterSize: "s",
+      listItems: [{
+        title: ___EmotionJSX("kbd", null, ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.upArrowTitle",
+          default: "Up arrow"
+        })),
+        description: ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.upArrowDescription",
+          default: "Move one cell up"
+        })
+      }, {
+        title: ___EmotionJSX("kbd", null, ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.downArrowTitle",
+          default: "Down arrow"
+        })),
+        description: ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.downArrowDescription",
+          default: "Move one cell down"
+        })
+      }, {
+        title: ___EmotionJSX("kbd", null, ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.rightArrowTitle",
+          default: "Right arrow"
+        })),
+        description: ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.rightArrowDescription",
+          default: "Move one cell right"
+        })
+      }, {
+        title: ___EmotionJSX("kbd", null, ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.leftArrowTitle",
+          default: "Left arrow"
+        })),
+        description: ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.leftArrowDescription",
+          default: "Move one cell left"
+        })
+      }, {
+        title: ___EmotionJSX("kbd", null, ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.homeTitle",
+          default: "Home"
+        })),
+        description: ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.homeDescription",
+          default: "Move to the first cell of the current row"
+        })
+      }, {
+        title: ___EmotionJSX("kbd", null, ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.endTitle",
+          default: "End"
+        })),
+        description: ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.endDescription",
+          default: "Move to the last cell of the current row"
+        })
+      }, {
+        title: ___EmotionJSX(React.Fragment, null, ___EmotionJSX("kbd", null, ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.ctrl",
+          default: "Ctrl"
+        })), ' ', ___EmotionJSX("kbd", null, ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.homeTitle",
+          default: "Home"
+        }))),
+        description: ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.ctrlHomeDescription",
+          default: "Move to the first cell of the current page"
+        })
+      }, {
+        title: ___EmotionJSX(React.Fragment, null, ___EmotionJSX("kbd", null, ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.ctrl",
+          default: "Ctrl"
+        })), ' ', ___EmotionJSX("kbd", null, ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.endTitle",
+          default: "End"
+        }))),
+        description: ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.ctrlEndDescription",
+          default: "Move to the last cell of the current page"
+        })
+      }, {
+        title: ___EmotionJSX("kbd", null, ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.pageUpTitle",
+          default: "Page Up"
+        })),
+        description: ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.pageUpDescription",
+          default: "Go to the last row of the previous page"
+        })
+      }, {
+        title: ___EmotionJSX("kbd", null, ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.pageDownTitle",
+          default: "Page Down"
+        })),
+        description: ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.pageDownDescription",
+          default: "Go to the first row of the next page"
+        })
+      }, {
+        title: ___EmotionJSX("kbd", null, ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.enterTitle",
+          default: "Enter"
+        })),
+        description: ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.enterDescription",
+          default: "Open cell details and actions"
+        })
+      }, {
+        title: ___EmotionJSX("kbd", null, ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.escapeTitle",
+          default: "Escape"
+        })),
+        description: ___EmotionJSX(EuiI18n, {
+          token: "euiKeyboardShortcuts.escapeDescription",
+          default: "Close cell details and actions"
+        })
+      }]
+    })));
+  }, [isOpen, title, titleId]);
+  return {
+    keyboardShortcuts: keyboardShortcuts
+  };
+};

package/es/components/datagrid/data_grid.js

@@ -49,7 +49,7 @@ import { EuiI18n, useEuiI18n } from '../i18n';
 import { useMutationObserver } from '../observer/mutation_observer';
 import { useResizeObserver } from '../observer/resize_observer';
 import { EuiDataGridBody } from './body';
-import { useDataGridColumnSelector, useDataGridColumnSorting, useDataGridDisplaySelector, startingStyles, useDataGridFullScreenSelector, checkOrDefaultToolBarDisplayOptions, EuiDataGridToolbar } from './controls';
+import { useDataGridColumnSelector, useDataGridColumnSorting, useDataGridDisplaySelector, startingStyles, useDataGridFullScreenSelector, useDataGridKeyboardShortcuts, checkOrDefaultToolBarDisplayOptions, EuiDataGridToolbar } from './controls';
 import { DataGridSortingContext, useSorting } from './utils/sorting';
 import { DataGridFocusContext, useFocus, createKeyDownHandler, preventTabbing } from './utils/focus';
 import { useInMemoryValues, EuiDataGridInMemoryRenderer } from './utils/in_memory';
@@ -239,12 +239,15 @@ export var EuiDataGrid = /*#__PURE__*/forwardRef(function (props, ref) {
       cellPopoverContext = _useCellPopover.cellPopoverContext,
       cellPopover = _useCellPopover.cellPopover;
   /**
-   * Toolbar & fullscreen
+   * Toolbar, keyboard shortcuts, & fullscreen
    */
 
 
   var showToolbar = !!toolbarVisibility;
 
+  var _useDataGridKeyboardS = useDataGridKeyboardShortcuts(),
+      keyboardShortcuts = _useDataGridKeyboardS.keyboardShortcuts;
+
   var _useDataGridFullScree = useDataGridFullScreenSelector(),
       isFullScreen = _useDataGridFullScree.isFullScreen,
       setIsFullScreen = _useDataGridFullScree.setIsFullScreen,
@@ -333,6 +336,7 @@ export var EuiDataGrid = /*#__PURE__*/forwardRef(function (props, ref) {
     toolbarVisibility: toolbarVisibility,
     isFullScreen: isFullScreen,
     fullScreenSelector: fullScreenSelector,
+    keyboardShortcuts: keyboardShortcuts,
     displaySelector: displaySelector,
     columnSelector: columnSelector,
     columnSorting: columnSorting
@@ -1110,6 +1114,12 @@ EuiDataGrid.propTypes = {
        */
     showSortSelector: PropTypes.bool,
 
+    /**
+       * Displays a popover listing all keyboard controls and shortcuts for the data grid.
+       * If set to `false`, the toggle will be visually hidden, but still focusable by keyboard and screen reader users.
+       */
+    showKeyboardShortcuts: PropTypes.bool,
+
     /**
        * Allows user to be able to fullscreen the data grid. If set to `false` make sure your grid fits within a large enough panel to still show the other controls.
        */

package/es/components/date_picker/super_date_picker/super_date_picker.js

@@ -269,7 +269,8 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
           locale = _this$props2.locale,
           timeFormat = _this$props2.timeFormat,
           utcOffset = _this$props2.utcOffset,
-          compressed = _this$props2.compressed;
+          compressed = _this$props2.compressed,
+          onFocus = _this$props2.onFocus;
 
       if (showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
         return ___EmotionJSX(EuiDatePickerRange, {
@@ -284,7 +285,8 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
           }),
           "data-test-subj": "superDatePickerShowDatesButton",
           disabled: isDisabled,
-          onClick: _this.hidePrettyDuration
+          onClick: _this.hidePrettyDuration,
+          onFocus: onFocus
         }, ___EmotionJSX(PrettyDuration, {
           timeFrom: start,
           timeTo: end,
@@ -317,7 +319,10 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
             isOpen: _this.state.isStartDatePopoverOpen,
             onPopoverToggle: _this.onStartDatePopoverToggle,
             onPopoverClose: _this.onStartDatePopoverClose,
-            timeOptions: timeOptions
+            timeOptions: timeOptions,
+            buttonProps: {
+              onFocus: onFocus
+            }
           }),
           endDateControl: ___EmotionJSX(EuiDatePopoverButton, {
             position: "end",
@@ -335,7 +340,10 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
             isOpen: _this.state.isEndDatePopoverOpen,
             onPopoverToggle: _this.onEndDatePopoverToggle,
             onPopoverClose: _this.onEndDatePopoverClose,
-            timeOptions: timeOptions
+            timeOptions: timeOptions,
+            buttonProps: {
+              onFocus: onFocus
+            }
           })
         });
       });
@@ -552,6 +560,11 @@ EuiSuperDatePickerInternal.propTypes = {
      */
   locale: PropTypes.any,
 
+  /**
+     * Triggered whenever the EuiSuperDatePicker's dates are focused
+     */
+  onFocus: PropTypes.any,
+
   /**
      * Callback for when the refresh interval is fired.
      * EuiSuperDatePicker will only manage a refresh interval timer when onRefresh callback is supplied
@@ -759,6 +772,11 @@ EuiSuperDatePicker.propTypes = {
      */
   locale: PropTypes.any,
 
+  /**
+     * Triggered whenever the EuiSuperDatePicker's dates are focused
+     */
+  onFocus: PropTypes.any,
+
   /**
      * Callback for when the refresh interval is fired.
      * EuiSuperDatePicker will only manage a refresh interval timer when onRefresh callback is supplied

package/es/components/header/header_links/header_links.js

@@ -252,6 +252,12 @@ EuiHeaderLinks.propTypes = {
        */
     repositionOnScroll: PropTypes.bool,
 
+    /**
+       * Must be set to true if using `EuiDragDropContext` within a popover,
+       * otherwise your nested drag & drop will have incorrect positioning
+       */
+    hasDragDrop: PropTypes.bool,
+
     /**
        * By default, popover content inherits the z-index of the anchor
        * component; pass `zIndex` to override

package/es/components/loading/loading_spinner.js

@@ -1,7 +1,13 @@
-var _excluded = ["size", "className", "aria-label", "color"];
+var _excluded = ["size", "className", "aria-label", "color", "style"];
 
 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); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -18,7 +24,7 @@ import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { useEuiTheme } from '../..//services';
 import { useLoadingAriaLabel } from './_loading_strings';
-import { euiLoadingSpinnerStyles } from './loading_spinner.styles';
+import { euiLoadingSpinnerStyles, euiSpinnerBorderColorsCSS } from './loading_spinner.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var SIZES = ['s', 'm', 'l', 'xl', 'xxl'];
 export var EuiLoadingSpinner = function EuiLoadingSpinner(_ref) {
@@ -27,16 +33,21 @@ export var EuiLoadingSpinner = function EuiLoadingSpinner(_ref) {
       className = _ref.className,
       ariaLabel = _ref['aria-label'],
       color = _ref.color,
+      style = _ref.style,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var euiTheme = useEuiTheme();
-  var styles = euiLoadingSpinnerStyles(euiTheme, color);
+  var styles = euiLoadingSpinnerStyles(euiTheme);
   var cssStyles = [styles.euiLoadingSpinner, styles[size]];
   var classes = classNames('euiLoadingSpinner', className);
   var defaultLabel = useLoadingAriaLabel();
+  var customColorStyle = color ? _objectSpread(_objectSpread({}, style), {}, {
+    borderColor: euiSpinnerBorderColorsCSS(euiTheme, color)
+  }) : style;
   return ___EmotionJSX("span", _extends({
     className: classes,
     css: cssStyles,
+    style: customColorStyle,
     role: "progressbar",
     "aria-label": ariaLabel || defaultLabel
   }, rest));

package/es/components/loading/loading_spinner.styles.js

@@ -21,15 +21,19 @@ var spinnerSizes = {
   xl: 'xl',
   xxl: 'xxl'
 };
-
-var spinnerColorsCSS = function spinnerColorsCSS(border, highlight) {
-  return "\n    border-color: ".concat(highlight, " ").concat(border, " ").concat(border, " ").concat(border, ";\n  ");
-};
-
-export var euiLoadingSpinnerStyles = function euiLoadingSpinnerStyles(_ref, color) {
+export var euiSpinnerBorderColorsCSS = function euiSpinnerBorderColorsCSS(_ref) {
   var euiTheme = _ref.euiTheme;
+  var colors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _colors$border = colors.border,
+      border = _colors$border === void 0 ? euiTheme.colors.lightShade : _colors$border,
+      _colors$highlight = colors.highlight,
+      highlight = _colors$highlight === void 0 ? euiTheme.colors.primary : _colors$highlight;
+  return "".concat(highlight, " ").concat(border, " ").concat(border, " ").concat(border);
+};
+export var euiLoadingSpinnerStyles = function euiLoadingSpinnerStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiLoadingSpinner: /*#__PURE__*/css("flex-shrink:0;display:inline-block;border-radius:50%;border:", euiTheme.border.thick, ";", spinnerColorsCSS((color === null || color === void 0 ? void 0 : color.border) || euiTheme.colors.lightShade, (color === null || color === void 0 ? void 0 : color.highlight) || euiTheme.colors.primary), ";", euiCanAnimate, "{animation:", _loadingSpinner, " 0.6s infinite linear;};label:euiLoadingSpinner;"),
+    euiLoadingSpinner: /*#__PURE__*/css("flex-shrink:0;display:inline-block;border-radius:50%;border:", euiTheme.border.thick, ";border-color:", euiSpinnerBorderColorsCSS(euiThemeContext), ";", euiCanAnimate, "{animation:", _loadingSpinner, " 0.6s infinite linear;};label:euiLoadingSpinner;"),
     // Sizes
     s: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.s], euiTheme.size[spinnerSizes.s]), " border-width:calc(", euiTheme.border.width.thin, " * 1.5);;label:s;"),
     m: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.m], euiTheme.size[spinnerSizes.m]), " border-width:calc(", euiTheme.border.width.thin, " * 1.5);;label:m;"),

package/es/components/modal/modal.js

@@ -19,7 +19,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React from 'react';
+import React, { useRef, useCallback } from 'react';
 import PropTypes from "prop-types";
 import classnames from 'classnames';
 import { keys } from '../../services';
@@ -38,6 +38,19 @@ export var EuiModal = function EuiModal(_ref) {
       style = _ref.style,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  // TODO: Remove this onFocus scroll workaround after react-focus-on supports focusOptions
+  // @see https://github.com/elastic/eui/issues/6304
+  var bodyScrollTop = useRef(typeof window === 'undefined' ? undefined : window.scrollY // Account for SSR
+  );
+  var onFocus = useCallback(function () {
+    if (bodyScrollTop.current != null) {
+      window.scrollTo({
+        top: bodyScrollTop.current
+      });
+      bodyScrollTop.current = undefined; // Unset after first auto focus
+    }
+  }, []);
+
   var onKeyDown = function onKeyDown(event) {
     if (event.key === keys.ESCAPE) {
       event.preventDefault();
@@ -60,11 +73,13 @@ export var EuiModal = function EuiModal(_ref) {
 
   var classes = classnames('euiModal', widthClassName, className);
   return ___EmotionJSX(EuiOverlayMask, null, ___EmotionJSX(EuiFocusTrap, {
-    initialFocus: initialFocus
+    initialFocus: initialFocus,
+    scrollLock: true
   }, ___EmotionJSX("div", _extends({
     className: classes,
     onKeyDown: onKeyDown,
     tabIndex: 0,
+    onFocus: onFocus,
     style: newStyle || style
   }, rest), ___EmotionJSX(EuiI18n, {
     token: "euiModal.closeModal",

package/es/components/page_template/page_template.js

@@ -149,15 +149,12 @@ export var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
   React.Children.toArray(children).forEach(function (child, index) {
     if (! /*#__PURE__*/React.isValidElement(child)) return; // Skip non-components
 
-    switch (child.type) {
-      case EuiPageSidebar:
-        sidebar.push( /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({
-          key: "sidebar".concat(index)
-        }, getSideBarProps()), child.props)));
-        break;
-
-      default:
-        sections.push(child);
+    if (child.type === EuiPageSidebar || child.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__ === EuiPageSidebar) {
+      sidebar.push( /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({
+        key: "sidebar".concat(index)
+      }, getSideBarProps()), child.props)));
+    } else {
+      sections.push(child);
     }
   });
 

package/es/components/popover/popover.js

@@ -1,7 +1,7 @@
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 import { css as _css } from "@emotion/react";
-var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "zIndex", "attachToAnchor", "display", "offset", "onPositionChange", "onTrapDeactivation", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "initialFocus", "tabIndex"];
+var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "hasDragDrop", "zIndex", "attachToAnchor", "display", "offset", "onPositionChange", "onTrapDeactivation", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "initialFocus", "tabIndex"];
 
 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); }
 
@@ -419,7 +419,8 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this4 = this;
+      var _panelProps$tabIndex,
+          _this4 = this;
 
       var _this$props = this.props,
           anchorClassName = _this$props.anchorClassName,
@@ -442,6 +443,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
           hasArrow = _this$props.hasArrow,
           arrowChildren = _this$props.arrowChildren,
           repositionOnScroll = _this$props.repositionOnScroll,
+          hasDragDrop = _this$props.hasDragDrop,
           zIndex = _this$props.zIndex,
           attachToAnchor = _this$props.attachToAnchor,
           display = _this$props.display,
@@ -454,9 +456,10 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
           container = _this$props.container,
           focusTrapProps = _this$props.focusTrapProps,
           initialFocusProp = _this$props.initialFocus,
-          tabIndexProp = _this$props.tabIndex,
+          _tabIndexProp = _this$props.tabIndex,
           rest = _objectWithoutProperties(_this$props, _excluded);
 
+      var tabIndexProp = (_panelProps$tabIndex = panelProps === null || panelProps === void 0 ? void 0 : panelProps.tabIndex) !== null && _panelProps$tabIndex !== void 0 ? _panelProps$tabIndex : _tabIndexProp;
       var styles = euiPopoverStyles();
       var popoverStyles = [styles.euiPopover, {
         display: display
@@ -520,6 +523,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
           position: this.state.arrowPosition,
           isAttached: attachToAnchor,
           className: classNames(panelClassName, panelProps === null || panelProps === void 0 ? void 0 : panelProps.className),
+          hasDragDrop: hasDragDrop,
           hasShadow: false,
           paddingSize: panelPaddingSize,
           tabIndex: tabIndex,
@@ -738,6 +742,12 @@ EuiPopover.propTypes = {
      */
   repositionOnScroll: PropTypes.bool,
 
+  /**
+     * Must be set to true if using `EuiDragDropContext` within a popover,
+     * otherwise your nested drag & drop will have incorrect positioning
+     */
+  hasDragDrop: PropTypes.bool,
+
   /**
      * By default, popover content inherits the z-index of the anchor
      * component; pass `zIndex` to override

package/es/components/popover/popover_arrow/_popover_arrow.js

@@ -28,6 +28,7 @@ export var EuiPopoverArrow = function EuiPopoverArrow(_ref) {
   var styles = euiPopoverArrowStyles(euiTheme);
   var cssStyles = [styles.euiPopoverArrow, styles[position]];
   return ___EmotionJSX("div", _extends({
+    className: "euiPopover__arrow",
     "data-popover-arrow": position,
     css: cssStyles
   }, rest), children);

package/es/components/popover/popover_panel/_popover_panel.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "isOpen", "isAttached", "position"];
+var _excluded = ["children", "className", "isOpen", "isAttached", "hasDragDrop", "position"];
 
 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); }
 
@@ -45,6 +45,7 @@ export var EuiPopoverPanel = function EuiPopoverPanel(_ref) {
       className = _ref.className,
       isOpen = _ref.isOpen,
       isAttached = _ref.isAttached,
+      hasDragDrop = _ref.hasDragDrop,
       position = _ref.position,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -60,6 +61,10 @@ export var EuiPopoverPanel = function EuiPopoverPanel(_ref) {
     panelCSS = [].concat(_toConsumableArray(panelCSS), [isOpen && styles.attached.isOpen, position && styles.attached[position]]);
   }
 
+  if (hasDragDrop) {
+    panelCSS = [].concat(_toConsumableArray(panelCSS), [styles.hasDragDrop.hasDragDrop, position && styles.hasDragDrop[position]]);
+  }
+
   return ___EmotionJSX(EuiPopoverPanelContext.Provider, {
     value: panelContext
   }, ___EmotionJSX(EuiPanel, _extends({
@@ -111,5 +116,6 @@ EuiPopoverPanel.propTypes = {
   css: PropTypes.any,
   isOpen: PropTypes.bool,
   isAttached: PropTypes.bool,
-  position: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf([null])])
+  position: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf([null])]),
+  hasDragDrop: PropTypes.bool
 };

package/es/components/popover/popover_panel/_popover_panel.styles.js

@@ -7,6 +7,7 @@
  */
 import { css } from '@emotion/react';
 import { euiShadow, euiShadowFlat, euiShadowMedium } from '../../../themes/amsterdam/global_styling/mixins';
+import { getShadowColor } from '../../../themes/amsterdam/global_styling/functions';
 import { euiCanAnimate, logicalCSS } from '../../../global_styling';
 export var openAnimationTiming = 'slow';
 var translateDistance = 's';
@@ -17,7 +18,8 @@ var translateDistance = 's';
  */
 
 export var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+      colorMode = euiThemeContext.colorMode;
   return {
     // Base
     euiPopover__panel: /*#__PURE__*/css("position:absolute;", logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), ";", logicalCSS('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), ";backface-visibility:hidden;pointer-events:none;opacity:0;transform:translateY(0) translateX(0) translateZ(0);", euiShadowMedium(euiThemeContext, {
@@ -38,6 +40,18 @@ export var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContex
       // Satisfies TS
       left: /*#__PURE__*/css(";label:left;"),
       right: /*#__PURE__*/css(";label:right;")
+    },
+    // Overrides for drag & drop contexts within popovers. This is required because
+    // the fixed positions of drag and drop don't work inside of transformed elements
+    hasDragDrop: {
+      hasDragDrop: /*#__PURE__*/css("transform:none;filter:none;", euiShadowMedium(euiThemeContext, {
+        property: 'box-shadow'
+      }), ";;label:hasDragDrop;"),
+      // The offset transforms must be recreated in margins
+      top: /*#__PURE__*/css("margin-block-start:", euiTheme.size[translateDistance], ";;label:top;"),
+      bottom: /*#__PURE__*/css("margin-block-start:-", euiTheme.size[translateDistance], ";.euiPopover__arrow{filter:drop-shadow(\n            0 -6px 6px ", getShadowColor(euiTheme.colors.shadow, 0.12, colorMode), "\n          );};label:bottom;"),
+      left: /*#__PURE__*/css("margin-inline-start:", euiTheme.size[translateDistance], ";.euiPopover__arrow{filter:drop-shadow(\n            6px 0 6px ", getShadowColor(euiTheme.colors.shadow, 0.12, colorMode), "\n          );};label:left;"),
+      right: /*#__PURE__*/css("margin-inline-start:-", euiTheme.size[translateDistance], ";.euiPopover__arrow{filter:drop-shadow(\n            -6px 0 6px ", getShadowColor(euiTheme.colors.shadow, 0.12, colorMode), "\n          );};label:right;")
     }
   };
 };