@elastic/eui 63.0.3 → 65.0.0

package/es/components/date_picker/date_picker_range.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "fullWidth", "isCustom", "readOnly", "isInvalid", "disabled"];
+var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "fullWidth", "isCustom", "readOnly", "isInvalid", "disabled", "onFocus", "onBlur"];
 
 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); }
 
@@ -30,6 +30,8 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
       readOnly = _ref.readOnly,
       isInvalid = _ref.isInvalid,
       disabled = _ref.disabled,
+      _onFocus = _ref.onFocus,
+      _onBlur = _ref.onBlur,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classNames('euiDatePickerRange', {
@@ -49,7 +51,19 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
       readOnly: readOnly,
       disabled: disabled || startDateControl.props.disabled,
       isInvalid: isInvalid || startDateControl.props.isInvalid,
-      className: classNames('euiDatePickerRange__start', startDateControl.props.className)
+      className: classNames('euiDatePickerRange__start', startDateControl.props.className),
+      onBlur: function onBlur(event) {
+        var _startDateControl$pro, _startDateControl$pro2;
+
+        (_startDateControl$pro = startDateControl.props) === null || _startDateControl$pro === void 0 ? void 0 : (_startDateControl$pro2 = _startDateControl$pro.onBlur) === null || _startDateControl$pro2 === void 0 ? void 0 : _startDateControl$pro2.call(_startDateControl$pro, event);
+        _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(event);
+      },
+      onFocus: function onFocus(event) {
+        var _startDateControl$pro3, _startDateControl$pro4;
+
+        (_startDateControl$pro3 = startDateControl.props) === null || _startDateControl$pro3 === void 0 ? void 0 : (_startDateControl$pro4 = _startDateControl$pro3.onFocus) === null || _startDateControl$pro4 === void 0 ? void 0 : _startDateControl$pro4.call(_startDateControl$pro3, event);
+        _onFocus === null || _onFocus === void 0 ? void 0 : _onFocus(event);
+      }
     });
     endControl = /*#__PURE__*/cloneElement(endDateControl, {
       showIcon: false,
@@ -58,7 +72,19 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
       disabled: disabled || endDateControl.props.disabled,
       isInvalid: isInvalid || endDateControl.props.isInvalid,
       popoverPlacement: 'downRight',
-      className: classNames('euiDatePickerRange__end', endDateControl.props.className)
+      className: classNames('euiDatePickerRange__end', endDateControl.props.className),
+      onBlur: function onBlur(event) {
+        var _endDateControl$props, _endDateControl$props2;
+
+        (_endDateControl$props = endDateControl.props) === null || _endDateControl$props === void 0 ? void 0 : (_endDateControl$props2 = _endDateControl$props.onBlur) === null || _endDateControl$props2 === void 0 ? void 0 : _endDateControl$props2.call(_endDateControl$props, event);
+        _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(event);
+      },
+      onFocus: function onFocus(event) {
+        var _endDateControl$props3, _endDateControl$props4;
+
+        (_endDateControl$props3 = endDateControl.props) === null || _endDateControl$props3 === void 0 ? void 0 : (_endDateControl$props4 = _endDateControl$props3.onFocus) === null || _endDateControl$props4 === void 0 ? void 0 : _endDateControl$props4.call(_endDateControl$props3, event);
+        _onFocus === null || _onFocus === void 0 ? void 0 : _onFocus(event);
+      }
     });
   }
 
@@ -77,6 +103,7 @@ EuiDatePickerRange.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
      * Including any children will replace all innards with the provided children
@@ -117,5 +144,19 @@ EuiDatePickerRange.propTypes = {
      * Passes through to each control
      */
   readOnly: PropTypes.bool,
-  fullWidth: PropTypes.bool
+
+  /**
+     * Passes through to each control
+     */
+  fullWidth: PropTypes.bool,
+
+  /**
+     * Triggered whenever the start or end controls are blurred
+     */
+  onBlur: PropTypes.any,
+
+  /**
+     * Triggered whenever the start or end controls are focused
+     */
+  onFocus: PropTypes.any
 };

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

@@ -503,6 +503,7 @@ EuiSuperDatePickerInternal.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   // The below options are marked as required because they have default fallbacks
   commonlyUsedRanges: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
     end: PropTypes.oneOfType([PropTypes.oneOf(["now"]), PropTypes.string.isRequired]).isRequired,
@@ -614,10 +615,20 @@ EuiSuperDatePickerInternal.propTypes = {
        */
     toolTipProps: PropTypes.shape({
       /**
-         * Passes onto the the trigger.
+         * Passes onto the span wrapping the trigger.
          */
       anchorClassName: PropTypes.string,
 
+      /**
+         * Passes onto the span wrapping the trigger.
+         */
+      anchorProps: PropTypes.shape({
+        className: PropTypes.string,
+        "aria-label": PropTypes.string,
+        "data-test-subj": PropTypes.string,
+        css: PropTypes.any
+      }),
+
       /**
          * The in-view trigger for your tooltip.
          */
@@ -704,6 +715,7 @@ EuiSuperDatePicker.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   commonlyUsedRanges: PropTypes.arrayOf(PropTypes.shape({
     end: PropTypes.oneOfType([PropTypes.oneOf(["now"]), PropTypes.string.isRequired]).isRequired,
     label: PropTypes.string,
@@ -799,6 +811,12 @@ EuiSuperDatePicker.propTypes = {
     showTooltip: PropTypes.bool,
     toolTipProps: PropTypes.shape({
       anchorClassName: PropTypes.string,
+      anchorProps: PropTypes.shape({
+        className: PropTypes.string,
+        "aria-label": PropTypes.string,
+        "data-test-subj": PropTypes.string,
+        css: PropTypes.any
+      }),
       children: PropTypes.element.isRequired,
       className: PropTypes.string,
       content: PropTypes.node,

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

@@ -227,10 +227,20 @@ EuiSuperUpdateButton.propTypes = {
      */
   toolTipProps: PropTypes.shape({
     /**
-       * Passes onto the the trigger.
+       * Passes onto the span wrapping the trigger.
        */
     anchorClassName: PropTypes.string,
 
+    /**
+       * Passes onto the span wrapping the trigger.
+       */
+    anchorProps: PropTypes.shape({
+      className: PropTypes.string,
+      "aria-label": PropTypes.string,
+      "data-test-subj": PropTypes.string,
+      css: PropTypes.any
+    }),
+
     /**
        * The in-view trigger for your tooltip.
        */

package/es/components/description_list/description_list.js

@@ -74,6 +74,7 @@ EuiDescriptionList.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   listItems: PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.any.isRequired,
     description: PropTypes.any.isRequired
@@ -106,7 +107,8 @@ EuiDescriptionList.propTypes = {
   titleProps: PropTypes.shape({
     className: PropTypes.string,
     "aria-label": PropTypes.string,
-    "data-test-subj": PropTypes.string
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
   }),
 
   /**
@@ -115,6 +117,7 @@ EuiDescriptionList.propTypes = {
   descriptionProps: PropTypes.shape({
     className: PropTypes.string,
     "aria-label": PropTypes.string,
-    "data-test-subj": PropTypes.string
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
   })
 };

package/es/components/description_list/description_list_description.js

@@ -72,5 +72,6 @@ export var EuiDescriptionListDescription = function EuiDescriptionListDescriptio
 EuiDescriptionListDescription.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };

package/es/components/description_list/description_list_title.js

@@ -72,5 +72,6 @@ export var EuiDescriptionListTitle = function EuiDescriptionListTitle(_ref) {
 EuiDescriptionListTitle.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };

package/es/components/drag_and_drop/draggable.js

@@ -123,5 +123,6 @@ EuiDraggable.propTypes = {
   spacing: PropTypes.oneOf(["none", "s", "m", "l"]),
   style: PropTypes.any,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };

package/es/components/drag_and_drop/droppable.js

@@ -114,5 +114,6 @@ EuiDroppable.propTypes = {
      */
   grow: PropTypes.bool,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };

package/es/components/empty_prompt/empty_prompt.js

@@ -139,6 +139,7 @@ EuiEmptyPrompt.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   element: PropTypes.oneOf(["div"]),
 
   /**

package/es/components/error_boundary/error_boundary.js

@@ -116,6 +116,7 @@ _EuiErrorBoundary.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
        * ReactNode to render as this component's content

package/es/components/expression/expression.js

@@ -89,6 +89,7 @@ EuiExpression.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
      * First part of the expression

package/es/components/expression/expression.styles.js

@@ -10,42 +10,24 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { euiFontSize, logicalCSS, euiTextBreakWord, euiTextTruncate } from '../../global_styling';
+import { euiFontSize, logicalCSS, logicalTextAlignCSS, euiTextBreakWord, euiTextTruncate } from '../../global_styling';
 import { transparentize } from '../../services/color';
 
 var _colorCSS = function _colorCSS(color) {
   return "\n    &:focus {\n      background-color: ".concat(transparentize(color, 0.1), ";\n    }\n  ");
 };
 
-var _ref3 = process.env.NODE_ENV === "production" ? {
-  name: "6151l-base",
-  styles: "border-bottom-style:solid;label:base;"
-} : {
-  name: "6151l-base",
-  styles: "border-bottom-style:solid;label:base;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-var _ref4 = process.env.NODE_ENV === "production" ? {
-  name: "1372s1f-truncate",
-  styles: "max-width:100%;label:truncate;"
-} : {
-  name: "1372s1f-truncate",
-  styles: "max-width:100%;label:truncate;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
 export var euiExpressionStyles = function euiExpressionStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiExpression: /*#__PURE__*/css(euiTextBreakWord(), ";font-family:", euiTheme.font.familyCode, ";border-bottom:", euiTheme.border.width.thick, " solid transparent;", euiFontSize(euiThemeContext, 's'), ";display:inline-block;text-align:left;padding:calc(", euiTheme.size.s, " / 2) 0;color:", euiTheme.colors.text, ";&:focus{border-bottom-style:solid;}&+.euiExpression{", logicalCSS('margin-left', euiTheme.size.s), ";};label:euiExpression;"),
+    euiExpression: /*#__PURE__*/css(euiTextBreakWord(), ";display:inline-block;font-family:", euiTheme.font.familyCode, ";", logicalCSS('border-bottom', "".concat(euiTheme.border.width.thick, " solid transparent")), " ", euiFontSize(euiThemeContext, 's'), ";", logicalTextAlignCSS('left'), " padding:", parseFloat(euiTheme.size.s) / 2, "px 0;color:", euiTheme.colors.text, ";&:focus{", logicalCSS('border-bottom-style', 'solid'), ";}&+.euiExpression{", logicalCSS('margin-left', euiTheme.size.s), ";};label:euiExpression;"),
     // Variants
-    columns: /*#__PURE__*/css("border-color:transparent;border-bottom-style:solid;", logicalCSS('margin-bottom', euiTheme.size.xs), " width:100%;display:flex;padding:", euiTheme.size.xs, ";border-radius:", euiTheme.size.xs, ";;label:columns;"),
-    truncate: _ref4,
+    columns: /*#__PURE__*/css("border-color:transparent;", logicalCSS('border-bottom-style', 'solid'), " ", logicalCSS('margin-bottom', euiTheme.size.xs), " ", logicalCSS('width', '100%'), " display:flex;padding:", euiTheme.size.xs, ";border-radius:", euiTheme.size.xs, ";;label:columns;"),
+    truncate: /*#__PURE__*/css(logicalCSS('max-width', '100%'), ";;label:truncate;"),
     // States
-    isClickable: /*#__PURE__*/css("cursor:pointer;border-bottom:", euiTheme.border.editable, ";&[class*='-columns']{background-color:", euiTheme.colors.lightestShade, ";&:focus,&:hover:not(:disabled){[class*='euiExpression__description'],[class*='euiExpression__value']{text-decoration:underline;}}};label:isClickable;"),
+    isClickable: /*#__PURE__*/css("cursor:pointer;", logicalCSS('border-bottom', euiTheme.border.editable), " &[class*='-columns']{background-color:", euiTheme.colors.lightestShade, ";&:focus,&:hover:not(:disabled){[class*='euiExpression__description'],[class*='euiExpression__value']{text-decoration:underline;}}};label:isClickable;"),
     isActive: {
-      base: _ref3,
+      base: /*#__PURE__*/css(logicalCSS('border-bottom-style', 'solid'), ";;label:base;"),
       subdued: /*#__PURE__*/css("border-color:", euiTheme.colors.subduedText, ";;label:subdued;"),
       primary: /*#__PURE__*/css("border-color:", euiTheme.colors.primary, ";;label:primary;"),
       success: /*#__PURE__*/css("border-color:", euiTheme.colors.success, ";;label:success;"),
@@ -71,8 +53,8 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-export var euiExpressionDescriptionStyles = function euiExpressionDescriptionStyles(_ref5) {
-  var euiTheme = _ref5.euiTheme;
+export var euiExpressionDescriptionStyles = function euiExpressionDescriptionStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
   return {
     euiExpression__description: /*#__PURE__*/css(";label:euiExpression__description;"),
     truncate: /*#__PURE__*/css(euiTextTruncate(), " display:inline-block;vertical-align:bottom;;label:truncate;"),
@@ -83,7 +65,7 @@ export var euiExpressionDescriptionStyles = function euiExpressionDescriptionSty
     danger: /*#__PURE__*/css("color:", euiTheme.colors.dangerText, ";;label:danger;"),
     accent: /*#__PURE__*/css("color:", euiTheme.colors.accentText, ";;label:accent;"),
     isUppercase: _ref2,
-    columns: /*#__PURE__*/css("text-align:end;", logicalCSS('margin-right', euiTheme.size.s), ";flex-shrink:0;;label:columns;")
+    columns: /*#__PURE__*/css(logicalTextAlignCSS('right'), " ", logicalCSS('margin-right', euiTheme.size.s), ";flex-shrink:0;;label:columns;")
   };
 };
 
@@ -96,8 +78,8 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-export var euiExpressionValueStyles = function euiExpressionValueStyles(_ref6) {
-  _objectDestructuringEmpty(_ref6);
+export var euiExpressionValueStyles = function euiExpressionValueStyles(_ref4) {
+  _objectDestructuringEmpty(_ref4);
 
   return {
     euiExpression__value: /*#__PURE__*/css(";label:euiExpression__value;"),
@@ -105,8 +87,8 @@ export var euiExpressionValueStyles = function euiExpressionValueStyles(_ref6) {
     columns: _ref
   };
 };
-export var euiExpressionIconStyles = function euiExpressionIconStyles(_ref7) {
-  var euiTheme = _ref7.euiTheme;
+export var euiExpressionIconStyles = function euiExpressionIconStyles(_ref5) {
+  var euiTheme = _ref5.euiTheme;
   return {
     euiExpression__icon: /*#__PURE__*/css(logicalCSS('margin-left', euiTheme.size.xs), ";;label:euiExpression__icon;"),
     columns: /*#__PURE__*/css(logicalCSS('margin-top', euiTheme.size.xs), ";;label:columns;")

package/es/components/facet/facet_button.js

@@ -22,7 +22,7 @@ import { EuiInnerText } from '../inner_text';
 import { cloneElementWithCss } from '../../services/theme/clone_element';
 import { useEuiTheme } from '../../services';
 import { euiFacetButtonStyles, euiFacetButtonTextStyles, euiFacetButtonIconStyles, euiFacetButtonQuantityStyles, euiFacetButtonLoadingSpinnerStyles } from './facet_button.styles';
-import { EuiButtonDisplay } from '../button/button_display/_button_display';
+import { EuiButtonDisplay, isButtonDisabled } from '../button/button_display/_button_display';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFacetButton = function EuiFacetButton(_ref) {
   var children = _ref.children,
@@ -39,7 +39,10 @@ export var EuiFacetButton = function EuiFacetButton(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   // If in the loading state, force disabled to true
-  isDisabled = isLoading ? true : isDisabled;
+  isDisabled = isButtonDisabled({
+    isDisabled: isDisabled,
+    isLoading: isLoading
+  });
   var selection = isSelected ? 'isSelected' : 'unSelected';
   var classes = classNames('euiFacetButton', className);
   var theme = useEuiTheme();
@@ -84,7 +87,6 @@ export var EuiFacetButton = function EuiFacetButton(_ref) {
     return ___EmotionJSX(EuiButtonDisplay, _extends({
       className: classes,
       css: cssStyles,
-      element: "button",
       isDisabled: isDisabled,
       ref: buttonRef,
       title: rest['aria-label'] || innerText,
@@ -120,7 +122,6 @@ EuiFacetButton.propTypes = {
      * Changes visual of button to indicate it's currently selected
      */
   isSelected: PropTypes.bool,
-  onClick: PropTypes.func,
 
   /**
      * Adds a notification indicator for displaying the quantity provided
@@ -128,5 +129,6 @@ EuiFacetButton.propTypes = {
   quantity: PropTypes.number,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };

package/es/components/facet/facet_group.js

@@ -43,6 +43,7 @@ EuiFacetGroup.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
        * Vertically in a column, or horizontally in one wrapping line

package/es/components/filter_group/filter_group.js

@@ -37,6 +37,7 @@ EuiFilterGroup.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   children: PropTypes.node,
 
   /**

package/es/components/filter_group/filter_select_item.js

@@ -162,5 +162,6 @@ EuiFilterSelectItem.propTypes = {
   isFocused: PropTypes.bool,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };

package/es/components/flex/flex_grid.js

@@ -69,6 +69,7 @@ EuiFlexGrid.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
      * ReactNode to render as this component's content

package/es/components/flex/flex_group.js

@@ -102,6 +102,7 @@ EuiFlexGroup.propTypes = {
   wrap: PropTypes.bool,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };
 EuiFlexGroup.displayName = 'EuiFlexGroup';

package/es/components/flex/flex_item.js

@@ -43,6 +43,7 @@ EuiFlexItem.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   grow: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, true, false, null]),
   component: PropTypes.any
 };

package/es/components/flyout/flyout.js

@@ -33,7 +33,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  */
 import React, { useEffect, useRef, useState, forwardRef, Fragment } from 'react';
 import classnames from 'classnames';
-import { keys, EuiWindowEvent, useCombinedRefs, isWithinMinBreakpoint, throttle } from '../../services';
+import { keys, EuiWindowEvent, useCombinedRefs, useIsWithinMinBreakpoint } from '../../services';
 import { keysOf } from '../common';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiOverlayMask } from '../overlay_mask';
@@ -110,39 +110,17 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   var Element = as || defaultElement;
   var maskRef = useRef(null);
-  /**
-   * Setting the initial state of pushed based on the `type` prop
-   * and if the current window size is large enough (larger than `pushMinBreakpoint`)
-   */
-
-  var _useState = useState(isWithinMinBreakpoint(typeof window === 'undefined' ? 0 : window.innerWidth, pushMinBreakpoint)),
-      _useState2 = _slicedToArray(_useState, 2),
-      windowIsLargeEnoughToPush = _useState2[0],
-      setWindowIsLargeEnoughToPush = _useState2[1];
-
+  var windowIsLargeEnoughToPush = useIsWithinMinBreakpoint(pushMinBreakpoint);
   var isPushed = type === 'push' && windowIsLargeEnoughToPush;
-  /**
-   * Watcher added to the window to maintain `isPushed` state depending on
-   * the window size compared to the `pushBreakpoint`
-   */
-
-  var functionToCallOnWindowResize = throttle(function () {
-    if (isWithinMinBreakpoint(window.innerWidth, pushMinBreakpoint)) {
-      setWindowIsLargeEnoughToPush(true);
-    } else {
-      setWindowIsLargeEnoughToPush(false);
-    } // reacts every 50ms to resize changes and always gets the final update
-
-  }, 50);
   /**
    * Setting up the refs on the actual flyout element in order to
    * accommodate for the `isPushed` state by adding padding to the body equal to the width of the element
    */
 
-  var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      resizeRef = _useState4[0],
-      setResizeRef = _useState4[1];
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      resizeRef = _useState2[0],
+      setResizeRef = _useState2[1];
 
   var setRef = useCombinedRefs([setResizeRef, ref]); // TODO: Allow this hook to be conditional
 
@@ -155,9 +133,6 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
      */
 
     if (type === 'push') {
-      // Only add the event listener if we'll need to accommodate with padding
-      window.addEventListener('resize', functionToCallOnWindowResize);
-
       if (isPushed) {
         if (side === 'right') {
           document.body.style.paddingRight = "".concat(dimensions.width, "px");
@@ -171,8 +146,6 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
       document.body.classList.remove('euiBody--hasFlyout');
 
       if (type === 'push') {
-        window.removeEventListener('resize', functionToCallOnWindowResize);
-
         if (side === 'right') {
           document.body.style.paddingRight = '';
         } else if (side === 'left') {
@@ -180,7 +153,7 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
         }
       }
     };
-  }, [type, side, dimensions, isPushed, functionToCallOnWindowResize]);
+  }, [type, side, dimensions, isPushed]);
   /**
    * ESC key closes flyout (always?)
    */

package/es/components/flyout/flyout_body.js

@@ -42,6 +42,7 @@ EuiFlyoutBody.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
          * Use to display a banner at the top of the body. It is suggested to use `EuiCallOut` for it.

package/es/components/flyout/flyout_footer.js

@@ -30,5 +30,6 @@ export var EuiFlyoutFooter = function EuiFlyoutFooter(_ref) {
 EuiFlyoutFooter.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };

package/es/components/flyout/flyout_header.js

@@ -35,5 +35,6 @@ EuiFlyoutHeader.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   hasBorder: PropTypes.bool
 };

package/es/components/focus_trap/focus_trap.js

@@ -181,6 +181,7 @@ EuiFocusTrap.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
      * Whether `onClickOutside` should be called on mouseup instead of mousedown.

package/es/components/form/checkbox/checkbox.js

@@ -173,9 +173,11 @@ EuiCheckbox.propTypes = {
   labelProps: PropTypes.shape({
     className: PropTypes.string,
     "aria-label": PropTypes.string,
-    "data-test-subj": PropTypes.string
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
   }),
   className: PropTypes.string,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };

package/es/components/form/checkbox/checkbox_group.js

@@ -64,6 +64,7 @@ EuiCheckboxGroup.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   options: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string.isRequired
   }).isRequired).isRequired,
@@ -86,6 +87,7 @@ EuiCheckboxGroup.propTypes = {
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
 
     /**
          * ReactNode to render as this component's content

package/es/components/form/described_form_group/described_form_group.js

@@ -99,6 +99,7 @@ EuiDescribedFormGroup.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
        * One or more `EuiFormRow`s.

package/es/components/form/field_number/field_number.js

@@ -90,6 +90,7 @@ EuiFieldNumber.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   icon: PropTypes.oneOfType([PropTypes.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "alert", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "asterisk", "auditbeatApp", "beaker", "bell", "bellSlash", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossInACircleFilled", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "document", "documentEdit", "documentation", "documents", "dot", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "eql", "eraser", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "inputOutput", "inspect", "invert", "ip", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipelineApp", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spacesApp", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelionApp", "timeRefresh", "timeslider", "training", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDenseVector", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable"]).isRequired, PropTypes.string.isRequired, PropTypes.elementType.isRequired]),
   isInvalid: PropTypes.bool,
   fullWidth: PropTypes.bool,

package/es/components/form/field_password/field_password.js

@@ -152,6 +152,7 @@ EuiFieldPassword.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   isInvalid: PropTypes.bool,
   fullWidth: PropTypes.bool,
   isLoading: PropTypes.bool,