@elastic/eui 70.0.0 → 70.1.0

package/eui.d.ts

@@ -1711,8 +1711,9 @@ declare module '@elastic/eui/src/components/loading/loading_content' {
 }
 declare module '@elastic/eui/src/components/loading/loading_spinner.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	import { EuiLoadingSpinnerProps } from '@elastic/eui/src/components/loading/loading_spinner';
-	export const euiLoadingSpinnerStyles: ({ euiTheme }: UseEuiTheme, color?: EuiLoadingSpinnerProps['color']) => {
+	import { EuiLoadingSpinnerColor } from '@elastic/eui/src/components/loading/loading_spinner';
+	export const euiSpinnerBorderColorsCSS: ({ euiTheme }: UseEuiTheme, colors?: EuiLoadingSpinnerColor) => string;
+	export const euiLoadingSpinnerStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiLoadingSpinner: import("@emotion/utils").SerializedStyles;
 	    s: import("@emotion/utils").SerializedStyles;
 	    m: import("@emotion/utils").SerializedStyles;
@@ -1910,12 +1911,6 @@ declare module '@elastic/eui/src/components/button/button_display/_button_displa
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiButtonDisplayContentStyles: ({ euiTheme }: UseEuiTheme) => {
 	    euiButtonDisplayContent: import("@emotion/utils").SerializedStyles;
-	    left: import("@emotion/utils").SerializedStyles;
-	    right: import("@emotion/utils").SerializedStyles;
-	    euiButtonDisplayContent__spinner: import("@emotion/utils").SerializedStyles;
-	    euiButtonDisplayContent__icon: import("@emotion/utils").SerializedStyles;
-	    s: import("@emotion/utils").SerializedStyles;
-	    m: import("@emotion/utils").SerializedStyles;
 	};
 
 }
@@ -4504,6 +4499,13 @@ declare module '@elastic/eui/src/components/popover/popover_panel/_popover_panel
 	        left: import("@emotion/utils").SerializedStyles;
 	        right: import("@emotion/utils").SerializedStyles;
 	    };
+	    hasDragDrop: {
+	        hasDragDrop: import("@emotion/utils").SerializedStyles;
+	        top: import("@emotion/utils").SerializedStyles;
+	        bottom: import("@emotion/utils").SerializedStyles;
+	        left: import("@emotion/utils").SerializedStyles;
+	        right: import("@emotion/utils").SerializedStyles;
+	    };
 	};
 
 }
@@ -4520,6 +4522,7 @@ declare module '@elastic/eui/src/components/popover/popover_panel/_popover_panel
 	    isOpen?: boolean;
 	    isAttached?: boolean;
 	    position?: EuiPopoverArrowPositions | null;
+	    hasDragDrop?: boolean;
 	};
 	/**
 	 * *INTERNAL ONLY*
@@ -4640,6 +4643,11 @@ declare module '@elastic/eui/src/components/popover/popover' {
 	     * an `EuiPopover` in a scrollable container, `repositionOnScroll` should be `true`
 	     */
 	    repositionOnScroll?: boolean;
+	    /**
+	     * Must be set to true if using `EuiDragDropContext` within a popover,
+	     * otherwise your nested drag & drop will have incorrect positioning
+	     */
+	    hasDragDrop?: boolean;
 	    /**
 	     * By default, popover content inherits the z-index of the anchor
 	     * component; pass `zIndex` to override
@@ -12993,43 +13001,46 @@ declare module '@elastic/eui/src/components/date_picker/date_picker' {
 	export {};
 
 }
-declare module '@elastic/eui/src/components/tabs/tab' {
-	import { MouseEventHandler, AnchorHTMLAttributes, ButtonHTMLAttributes, FunctionComponent, ReactNode } from 'react';
-	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
-	export interface EuiTabProps extends CommonProps {
-	    isSelected?: boolean;
-	    disabled?: boolean;
-	    /**
-	     * Places content before the tab content/children.
-	     * Will be excluded from interactive effects.
-	     */
-	    prepend?: ReactNode;
-	    /**
-	     * Places content after the tab content/children.
-	     * Will be excluded from interactive effects.
-	     */
-	    append?: ReactNode;
-	} type EuiTabPropsForAnchor = EuiTabProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick' | 'href'> & {
-	    href?: string;
-	    onClick?: MouseEventHandler<HTMLAnchorElement>;
-	}; type EuiTabPropsForButton = EuiTabProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
-	    onClick?: MouseEventHandler<HTMLButtonElement>;
+declare module '@elastic/eui/src/components/tabs/tab.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiTabStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiTab: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    l: import("@emotion/utils").SerializedStyles;
+	    xl: import("@emotion/utils").SerializedStyles;
+	    expanded: import("@emotion/utils").SerializedStyles;
+	    selected: import("@emotion/utils").SerializedStyles;
+	    disabled: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiTabContentStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiTab__content: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    l: import("@emotion/utils").SerializedStyles;
+	    xl: import("@emotion/utils").SerializedStyles;
+	    selected: import("@emotion/utils").SerializedStyles;
+	    disabled: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/tabs/tabs.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiTabsStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiTabs: import("@emotion/utils").SerializedStyles;
+	    bottomBorder: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    l: import("@emotion/utils").SerializedStyles;
+	    xl: import("@emotion/utils").SerializedStyles;
 	};
-	export type Props = ExclusiveUnion<EuiTabPropsForAnchor, EuiTabPropsForButton>;
-	export const EuiTab: FunctionComponent<Props>;
-	export {};
 
 }
 declare module '@elastic/eui/src/components/tabs/tabs' {
 	import React, { HTMLAttributes, ReactNode } from 'react';
-	import { CommonProps } from '@elastic/eui/src/components/common'; const sizeToClassNameMap: {
-	    s: string;
-	    m: null;
-	    l: string;
-	    xl: string;
-	};
-	export const SIZES: ("s" | "m" | "l" | "xl")[];
-	export type EuiTabsSizes = keyof typeof sizeToClassNameMap;
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	export const SIZES: readonly ["s", "m", "l", "xl"];
+	export type EuiTabSizes = typeof SIZES[number];
 	export type EuiTabsProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
 	    /**
 	     * ReactNode to render as this component's content
@@ -13048,7 +13059,7 @@ declare module '@elastic/eui/src/components/tabs/tabs' {
 	     * Sizes affect both font size and overall size.
 	     * Only use the `xl` size when displayed as page titles.
 	     */
-	    size?: EuiTabsSizes;
+	    size?: EuiTabSizes;
 	};
 	export type EuiTabRef = HTMLDivElement;
 	export const EuiTabs: React.ForwardRefExoticComponent<CommonProps & React.HTMLAttributes<HTMLDivElement> & {
@@ -13073,12 +13084,48 @@ declare module '@elastic/eui/src/components/tabs/tabs' {
 	} & {
 	    children?: React.ReactNode;
 	} & React.RefAttributes<HTMLDivElement>>;
+
+}
+declare module '@elastic/eui/src/components/tabs/tab' {
+	import { MouseEventHandler, AnchorHTMLAttributes, ButtonHTMLAttributes, FunctionComponent, ReactNode } from 'react';
+	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
+	import { EuiTabsProps, EuiTabSizes } from '@elastic/eui/src/components/tabs/tabs';
+	export interface EuiTabProps extends CommonProps {
+	    isSelected?: boolean;
+	    disabled?: boolean;
+	    /**
+	     * Places content before the tab content/children.
+	     * Will be excluded from interactive effects.
+	     */
+	    prepend?: ReactNode;
+	    /**
+	     * Places content after the tab content/children.
+	     * Will be excluded from interactive effects.
+	     */
+	    append?: ReactNode;
+	    /**
+	     * Evenly stretches each tab to fill the
+	     * horizontal space
+	     */
+	    expand?: EuiTabsProps['expand'];
+	    /**
+	     * Sizes affect both font size and overall size.
+	     * Only use the `xl` size when displayed as page titles.
+	     */
+	    size?: EuiTabSizes;
+	} type EuiTabPropsForAnchor = EuiTabProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick' | 'href'> & {
+	    href?: string;
+	    onClick?: MouseEventHandler<HTMLAnchorElement>;
+	}; type EuiTabPropsForButton = EuiTabProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
+	    onClick?: MouseEventHandler<HTMLButtonElement>;
+	};
+	export type Props = ExclusiveUnion<EuiTabPropsForAnchor, EuiTabPropsForButton>;
+	export const EuiTab: FunctionComponent<Props>;
 	export {};
 
 }
 declare module '@elastic/eui/src/components/tabs/tabbed_content/tabbed_content' {
 	import { Component, HTMLAttributes, ReactNode, FocusEvent } from 'react';
-	import { EuiTabsSizes } from '@elastic/eui/src/components/tabs/tabs';
 	import { EuiTabProps } from '@elastic/eui/src/components/tabs/tab';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	/**
@@ -13115,7 +13162,7 @@ declare module '@elastic/eui/src/components/tabs/tabbed_content/tabbed_content'
 	     * Use this prop if you want to control selection state within the owner component
 	     */
 	    selectedTab?: EuiTabbedContentTab;
-	    size?: EuiTabsSizes;
+	    size?: 's' | 'm' | 'l' | 'xl';
 	    /**
 	     * Each tab needs id and content properties, so we can associate it with its panel for accessibility.
 	     * The name property (a node) is also required to display to the user.
@@ -16751,6 +16798,7 @@ declare module '@elastic/eui/src/components/tree_view' {
 declare module '@elastic/eui/src/components/search_bar/search_box' {
 	import { Component } from 'react';
 	import { EuiFieldSearchProps } from '@elastic/eui/src/components/form';
+	import { EuiSearchBarProps } from '@elastic/eui/src/components/search_bar/search_bar';
 	export interface SchemaType {
 	    strict?: boolean;
 	    fields?: any;
@@ -16759,6 +16807,11 @@ declare module '@elastic/eui/src/components/search_bar/search_box' {
 	export interface EuiSearchBoxProps extends EuiFieldSearchProps {
 	    query: string;
 	    onSearch: (queryText: string) => void;
+	    hint?: {
+	        id: string;
+	        isVisible: boolean;
+	        setIsVisible: (isVisible: boolean) => void;
+	    } & EuiSearchBarProps['hint'];
 	} type DefaultProps = Pick<EuiSearchBoxProps, 'placeholder' | 'incremental'>;
 	export class EuiSearchBox extends Component<EuiSearchBoxProps> {
 	    static defaultProps: DefaultProps;
@@ -18085,12 +18138,13 @@ declare module '@elastic/eui/src/components/search_bar/search_filters' {
 
 }
 declare module '@elastic/eui/src/components/search_bar/search_bar' {
-	import { Component, ReactElement } from 'react';
+	import React, { Component, ReactElement } from 'react';
 	import { SchemaType } from '@elastic/eui/src/components/search_bar/search_box';
 	import { SearchFilterConfig } from '@elastic/eui/src/components/search_bar/search_filters';
 	import { Query } from '@elastic/eui/src/components/search_bar/query';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiFieldSearchProps } from '@elastic/eui/src/components/form/field_search';
+	import { EuiInputPopoverProps } from '@elastic/eui/src/components/popover';
 	export { Query, AST as Ast } from '@elastic/eui/src/components/search_bar/query';
 	export type QueryType = Query | string; type Tools = ReactElement | ReactElement[];
 	interface ArgsWithQuery {
@@ -18103,7 +18157,7 @@ declare module '@elastic/eui/src/components/search_bar/search_bar' {
 	    queryText: string;
 	    error: Error;
 	}
-	export type EuiSearchBarOnChangeArgs = ArgsWithQuery | ArgsWithError;
+	export type EuiSearchBarOnChangeArgs = ArgsWithQuery | ArgsWithError; type HintPopOverProps = Partial<Pick<EuiInputPopoverProps, 'isOpen' | 'closePopover' | 'fullWidth' | 'disableFocusTrap' | 'panelClassName' | 'panelPaddingSize' | 'panelStyle' | 'panelProps' | 'popoverScreenReaderText' | 'repositionOnScroll' | 'zIndex' | 'data-test-subj'>>;
 	export interface EuiSearchBarProps extends CommonProps {
 	    onChange?: (args: EuiSearchBarOnChangeArgs) => void | boolean;
 	    /**
@@ -18136,19 +18190,28 @@ declare module '@elastic/eui/src/components/search_bar/search_bar' {
 	     * Date formatter to use when parsing date values
 	     */
 	    dateFormat?: object;
+	    /**
+	     * Hint to render below the search bar
+	     */
+	    hint?: {
+	        content: React.ReactNode;
+	        popoverProps?: HintPopOverProps;
+	    };
 	}
 	interface State {
 	    query: Query;
 	    queryText: string;
 	    error: null | Error;
-	} type StateWithOptionalQuery = Omit<State, 'query'> & {
+	    isHintVisible: boolean;
+	} type NotifyControllingParent = Pick<State, 'queryText' | 'error'> & {
 	    query: Query | null;
 	};
 	export class EuiSearchBar extends Component<EuiSearchBarProps, State> {
 	    static Query: typeof Query;
+	    hintId: string;
 	    constructor(props: EuiSearchBarProps);
 	    static getDerivedStateFromProps(nextProps: EuiSearchBarProps, prevState: State): State | null;
-	    notifyControllingParent(newState: StateWithOptionalQuery): void;
+	    notifyControllingParent(newState: NotifyControllingParent): void;
 	    onSearch: (queryText: string) => void;
 	    onFiltersChange: (query: Query) => void;
 	    renderTools(tools?: Tools): JSX.Element | JSX.Element[] | undefined;

package/i18ntokens.json

@@ -4229,11 +4229,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 88,
+        "line": 107,
         "column": 10
       },
       "end": {
-        "line": 91,
+        "line": 110,
         "column": 11
       }
     },
@@ -4661,11 +4661,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 677,
+        "line": 684,
         "column": 16
       },
       "end": {
-        "line": 680,
+        "line": 687,
         "column": 18
       }
     },

package/lib/components/badge/beta_badge/beta_badge.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SIZES = exports.EuiBetaBadge = exports.COLORS = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -25,10 +25,6 @@ var _excluded = ["className", "label", "color", "tooltipContent", "tooltipPositi
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 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); }
 
 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); }
@@ -117,7 +113,7 @@ var EuiBetaBadge = function EuiBetaBadge(_ref) {
         anchorProps: anchorProps
       }, content);
     } else {
-      return (0, _react2.jsx)(_react.Fragment, null, content);
+      return (0, _react2.jsx)("span", anchorProps, content);
     }
   } else {
     if (tooltipContent) {
@@ -139,11 +135,11 @@ var EuiBetaBadge = function EuiBetaBadge(_ref) {
         console.warn("Only string titles are permitted on badges that do not use tooltips. Found: ".concat(_typeof(spanTitle)));
       }
 
-      return (0, _react2.jsx)("span", _extends({
-        css: cssStyles,
+      return (0, _react2.jsx)("span", anchorProps, (0, _react2.jsx)("span", _extends({
         className: classes,
-        title: spanTitle
-      }, rest), icon || label);
+        title: spanTitle,
+        css: cssStyles
+      }, rest), icon || label));
     }
   }
 };

package/lib/components/basic_table/in_memory_table.js

@@ -1155,6 +1155,14 @@ EuiInMemoryTable.propTypes = {
        * Date formatter to use when parsing date values
        */
     dateFormat: _propTypes.default.any,
+
+    /**
+       * Hint to render below the search bar
+       */
+    hint: _propTypes.default.shape({
+      content: _propTypes.default.node.isRequired,
+      popoverProps: _propTypes.default.any
+    }),
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,

package/lib/components/button/button_display/_button_display.js

@@ -32,14 +32,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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 _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 _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; }
@@ -62,7 +62,8 @@ function isButtonDisabled(_ref) {
 var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   var children = _ref2.children,
       iconType = _ref2.iconType,
-      iconSide = _ref2.iconSide,
+      _ref2$iconSide = _ref2.iconSide,
+      iconSide = _ref2$iconSide === void 0 ? 'left' : _ref2$iconSide,
       iconSize = _ref2.iconSize,
       _ref2$size = _ref2.size,
       size = _ref2$size === void 0 ? 'm' : _ref2$size,
@@ -97,7 +98,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
     iconType: iconType,
     iconSide: iconSide,
     iconSize: iconSize,
-    textProps: _objectSpread({}, textProps)
+    textProps: textProps
   }, contentProps), children);
   var element = href && !buttonIsDisabled ? 'a' : 'button';
   var elementProps = {}; // Element-specific attributes
@@ -125,8 +126,8 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
 
   return (0, _react2.createElement)(element, _objectSpread(_objectSpread(_objectSpread({
     css: cssStyles,
-    style: minWidth ? _objectSpread(_objectSpread({}, style), {}, {
-      minWidth: minWidth
+    style: minWidth != null ? _objectSpread(_objectSpread({}, style), {}, {
+      minInlineSize: minWidth
     }) : style,
     ref: ref
   }, elementProps), relObj), rest), innerNode);

package/lib/components/button/button_display/_button_display.styles.js

@@ -24,11 +24,11 @@ var _buttonSize = function _buttonSize(size) {
 };
 
 var _ref = process.env.NODE_ENV === "production" ? {
-  name: "vifhyf-isDisabled",
-  styles: "pointer-events:none;cursor:not-allowed;label:isDisabled;"
+  name: "8595p9-isDisabled",
+  styles: "cursor:not-allowed;label:isDisabled;"
 } : {
-  name: "vifhyf-isDisabled",
-  styles: "pointer-events:none;cursor:not-allowed;label:isDisabled;",
+  name: "8595p9-isDisabled",
+  styles: "cursor:not-allowed;label:isDisabled;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 

package/lib/components/button/button_display/_button_display_content.js

@@ -46,14 +46,13 @@ var EuiButtonDisplayContent = function EuiButtonDisplayContent(_ref) {
       iconType = _ref.iconType,
       _ref$iconSize = _ref.iconSize,
       iconSize = _ref$iconSize === void 0 ? 'm' : _ref$iconSize,
-      iconSide = _ref.iconSide,
+      _ref$iconSide = _ref.iconSide,
+      iconSide = _ref$iconSide === void 0 ? 'left' : _ref$iconSide,
       contentProps = _objectWithoutProperties(_ref, _excluded);
 
   var theme = (0, _services.useEuiTheme)();
   var styles = (0, _button_display_content.euiButtonDisplayContentStyles)(theme);
-  var cssStyles = [styles.euiButtonDisplayContent, iconSide && styles[iconSide]];
-  var cssSpinnerStyles = [styles.euiButtonDisplayContent__spinner];
-  var cssIconStyles = [styles.euiButtonDisplayContent__icon, iconSize && styles[iconSize]]; // Add an icon to the button if one exists.
+  var cssStyles = [styles.euiButtonDisplayContent]; // Add an icon to the button if one exists.
 
   var icon; // When the button is disabled the text gets gray
   // and in some buttons the background gets a light gray
@@ -62,18 +61,16 @@ var EuiButtonDisplayContent = function EuiButtonDisplayContent(_ref) {
   // are always visible. The default spinner color could be very light.
 
   var loadingSpinnerColor = isDisabled ? {
-    border: 'currentColor'
+    border: 'currentcolor'
   } : undefined;
 
   if (isLoading) {
     icon = (0, _react2.jsx)(_loading.EuiLoadingSpinner, {
-      css: cssSpinnerStyles,
       size: iconSize,
       color: loadingSpinnerColor
     });
   } else if (iconType) {
     icon = (0, _react2.jsx)(_icon.EuiIcon, {
-      css: cssIconStyles,
       type: iconType,
       size: iconSize,
       color: "inherit" // forces the icon to inherit its parent color
@@ -84,9 +81,9 @@ var EuiButtonDisplayContent = function EuiButtonDisplayContent(_ref) {
   var isText = typeof children === 'string';
   return (0, _react2.jsx)("span", _extends({
     css: cssStyles
-  }, contentProps), icon, isText ? (0, _react2.jsx)("span", _extends({}, textProps, {
+  }, contentProps), iconSide === 'left' && icon, isText || textProps ? (0, _react2.jsx)("span", _extends({}, textProps, {
     className: (0, _classnames.default)('eui-textTruncate', textProps === null || textProps === void 0 ? void 0 : textProps.className)
-  }), children) : children);
+  }), children) : children, iconSide === 'right' && icon);
 };
 
 exports.EuiButtonDisplayContent = EuiButtonDisplayContent;

package/lib/components/button/button_display/_button_display_content.styles.js

@@ -9,48 +9,18 @@ var _react = require("@emotion/react");
 
 var _global_styling = require("../../../global_styling");
 
-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 _ref = process.env.NODE_ENV === "production" ? {
-  name: "gtg6j-euiButtonDisplayContent__icon",
-  styles: "flex-shrink:0;label:euiButtonDisplayContent__icon;"
-} : {
-  name: "gtg6j-euiButtonDisplayContent__icon",
-  styles: "flex-shrink:0;label:euiButtonDisplayContent__icon;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "10wlo76-euiButtonDisplayContent__spinner",
-  styles: "flex-shrink:0;label:euiButtonDisplayContent__spinner;"
-} : {
-  name: "10wlo76-euiButtonDisplayContent__spinner",
-  styles: "flex-shrink:0;label:euiButtonDisplayContent__spinner;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-var _ref3 = process.env.NODE_ENV === "production" ? {
-  name: "qfl6yj-right",
-  styles: "flex-direction:row-reverse;label:right;"
-} : {
-  name: "qfl6yj-right",
-  styles: "flex-direction:row-reverse;label:right;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-var euiButtonDisplayContentStyles = function euiButtonDisplayContentStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+/*
+ * 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 euiButtonDisplayContentStyles = function euiButtonDisplayContentStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
   return {
     // Base
-    euiButtonDisplayContent: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), ";", (0, _global_styling.logicalCSS)('width', '100%'), ";display:flex;justify-content:center;align-items:center;vertical-align:middle;gap:", euiTheme.size.s, ";;label:euiButtonDisplayContent;"),
-    // Icon side
-    left: /*#__PURE__*/(0, _react.css)(";label:left;"),
-    right: _ref3,
-    euiButtonDisplayContent__spinner: _ref2,
-    euiButtonDisplayContent__icon: _ref,
-    // Icon size
-    s: /*#__PURE__*/(0, _react.css)(";label:s;"),
-    m: /*#__PURE__*/(0, _react.css)(";label:m;")
+    euiButtonDisplayContent: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), ";", (0, _global_styling.logicalCSS)('width', '100%'), ";display:flex;justify-content:center;align-items:center;vertical-align:middle;gap:", euiTheme.size.s, ";;label:euiButtonDisplayContent;")
   };
 };
 

package/lib/components/datagrid/controls/column_selector.js

@@ -147,7 +147,7 @@ var useDataGridColumnSelector = function useDataGridColumnSelector(availableColu
     },
     anchorPosition: "downLeft",
     panelPaddingSize: "s",
-    panelClassName: "euiDataGrid__controlPopoverWithDragDrop",
+    hasDragDrop: true,
     button: (0, _react2.jsx)(_button.EuiButtonEmpty, {
       size: "xs",
       iconType: allowColumnHiding ? 'listAdd' : 'list',

package/lib/components/datagrid/controls/column_sorting.js

@@ -159,7 +159,7 @@ var useDataGridColumnSorting = function useDataGridColumnSorting(columns, sortin
     },
     anchorPosition: "downLeft",
     panelPaddingSize: "s",
-    panelClassName: "euiDataGrid__controlPopoverWithDragDrop",
+    hasDragDrop: true,
     button: (0, _react2.jsx)(_button.EuiButtonEmpty, {
       size: "xs",
       iconType: "sortable",

package/lib/components/header/header_links/header_links.js

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

package/lib/components/loading/loading_spinner.js

@@ -19,12 +19,18 @@ var _loading_spinner = require("./loading_spinner.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["size", "className", "aria-label", "color"];
+var _excluded = ["size", "className", "aria-label", "color", "style"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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); }
 
+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; }
@@ -38,16 +44,21 @@ var EuiLoadingSpinner = function EuiLoadingSpinner(_ref) {
       className = _ref.className,
       ariaLabel = _ref['aria-label'],
       color = _ref.color,
+      style = _ref.style,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _loading_spinner.euiLoadingSpinnerStyles)(euiTheme, color);
+  var styles = (0, _loading_spinner.euiLoadingSpinnerStyles)(euiTheme);
   var cssStyles = [styles.euiLoadingSpinner, styles[size]];
   var classes = (0, _classnames.default)('euiLoadingSpinner', className);
   var defaultLabel = (0, _loading_strings.useLoadingAriaLabel)();
+  var customColorStyle = color ? _objectSpread(_objectSpread({}, style), {}, {
+    borderColor: (0, _loading_spinner.euiSpinnerBorderColorsCSS)(euiTheme, color)
+  }) : style;
   return (0, _react2.jsx)("span", _extends({
     className: classes,
     css: cssStyles,
+    style: customColorStyle,
     role: "progressbar",
     "aria-label": ariaLabel || defaultLabel
   }, rest));