@elastic/eui 63.0.3 → 65.0.0

package/es/components/card/card_select/card_select.js

@@ -0,0 +1,133 @@
+var _excluded = ["isSelected", "isDisabled", "disabled", "color", "children"];
+
+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; }
+
+/*
+ * 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 from 'react';
+import PropTypes from "prop-types";
+import { EuiI18n } from '../../i18n';
+import { EuiButton } from '../../button/button';
+import { euiCardSelectStyles } from './card_select.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiCardSelect = function EuiCardSelect(_ref) {
+  var _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      isDisabled = _ref.isDisabled,
+      disabled = _ref.disabled,
+      color = _ref.color,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var styles = euiCardSelectStyles();
+  var baseCSS = [styles.euiCardSelect];
+  var child = euiCardSelectableText(isSelected, isDisabled || disabled, children);
+  return ___EmotionJSX(EuiButton, _extends({
+    css: baseCSS,
+    color: euiCardSelectableColor(color, isSelected),
+    size: "m",
+    isDisabled: isDisabled || disabled,
+    iconType: isSelected ? 'check' : undefined,
+    role: "switch",
+    "aria-checked": isSelected,
+    fullWidth: true
+  }, rest), child);
+};
+EuiCardSelect.propTypes = {
+  href: PropTypes.string,
+  onClick: PropTypes.func,
+  children: PropTypes.node,
+
+  /**
+     * Make button a solid color for prominence
+     */
+
+  /**
+     * Make button a solid color for prominence
+     */
+  fill: PropTypes.bool,
+
+  /**
+     * Any of the named color palette options.
+     * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
+     */
+
+  /**
+     * Any of the named color palette options.
+     * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
+     */
+  color: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf(["ghost"])]),
+
+  /**
+     * Use size `s` in confined spaces
+     */
+
+  /**
+     * Use size `s` in confined spaces
+     */
+  size: PropTypes.any,
+
+  /**
+     * `disabled` is also allowed
+     */
+
+  /**
+     * `disabled` is also allowed
+     */
+  isDisabled: PropTypes.bool,
+  className: PropTypes.string,
+  "aria-label": PropTypes.string,
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
+  buttonRef: PropTypes.any
+};
+
+function euiCardSelectableText(isSelected, isDisabled, children) {
+  if (children) {
+    return children;
+  }
+
+  var text;
+
+  if (isSelected) {
+    text = ___EmotionJSX(EuiI18n, {
+      token: "euiCardSelect.selected",
+      default: "Selected"
+    });
+  } else if (isDisabled) {
+    text = ___EmotionJSX(EuiI18n, {
+      token: "euiCardSelect.unavailable",
+      default: "Unavailable"
+    });
+  } else {
+    text = ___EmotionJSX(EuiI18n, {
+      token: "euiCardSelect.select",
+      default: "Select"
+    });
+  }
+
+  return text;
+}
+
+export function euiCardSelectableColor(color, isSelected) {
+  var calculatedColor;
+
+  if (color) {
+    calculatedColor = color;
+  } else if (isSelected) {
+    calculatedColor = 'success';
+  } else {
+    calculatedColor = 'text';
+  }
+
+  return calculatedColor;
+}

package/es/components/card/card_select/card_select.styles.js

@@ -0,0 +1,25 @@
+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)."; }
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { css } from '@emotion/react';
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "g3lgnd-euiCardSelect",
+  styles: "transform:none!important;label:euiCardSelect;"
+} : {
+  name: "g3lgnd-euiCardSelect",
+  styles: "transform:none!important;label:euiCardSelect;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiCardSelectStyles = function euiCardSelectStyles() {
+  return {
+    euiCardSelect: _ref
+  };
+};

package/es/components/card/card_select/index.js

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+export { EuiCardSelect, euiCardSelectableColor } from './card_select';

package/es/components/card/checkable_card/checkable_card.js

@@ -18,6 +18,8 @@ import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { EuiRadio, EuiCheckbox } from '../../form';
 import { EuiSplitPanel } from '../../panel';
+import { useEuiTheme } from '../../../services';
+import { euiCheckableCardStyles } from './checkable_card.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiCheckableCard = function EuiCheckableCard(_ref) {
   var children = _ref.children,
@@ -32,12 +34,14 @@ export var EuiCheckableCard = function EuiCheckableCard(_ref) {
       hasBorder = _ref$hasBorder === void 0 ? true : _ref$hasBorder,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var euiThemeContext = useEuiTheme();
+  var styles = euiCheckableCardStyles(euiThemeContext);
+  var baseStyles = [styles.euiCheckableCard, checked && !disabled && styles.isChecked];
+  var labelStyles = [styles.label.euiCheckableCard__label, disabled && styles.label.isDisabled];
+  var childStyles = [styles.euiCheckableCard__children];
   var id = rest.id;
   var labelEl = useRef(null);
-  var classes = classNames('euiCheckableCard', {
-    'euiCheckableCard-isChecked': checked,
-    'euiCheckableCard-isDisabled': disabled
-  }, className);
+  var classes = classNames('euiCheckableCard', className);
   var checkableElement;
 
   if (checkableType === 'radio') {
@@ -52,9 +56,7 @@ export var EuiCheckableCard = function EuiCheckableCard(_ref) {
     }, rest));
   }
 
-  var labelClasses = classNames('euiCheckableCard__label', {
-    'euiCheckableCard__label-isDisabled': disabled
-  });
+  var labelClasses = classNames('euiCheckableCard__label');
 
   var onChangeAffordance = function onChangeAffordance() {
     if (labelEl.current) {
@@ -67,7 +69,8 @@ export var EuiCheckableCard = function EuiCheckableCard(_ref) {
     hasShadow: hasShadow,
     hasBorder: hasBorder,
     direction: "row",
-    className: classes
+    className: classes,
+    css: baseStyles
   }, ___EmotionJSX(EuiSplitPanel.Inner, {
     // Bubbles up the change event when clicking on the whole div for extra affordance
     onClick: disabled ? undefined : onChangeAffordance,
@@ -76,11 +79,13 @@ export var EuiCheckableCard = function EuiCheckableCard(_ref) {
   }, checkableElement), ___EmotionJSX(EuiSplitPanel.Inner, null, ___EmotionJSX("label", {
     ref: labelEl,
     className: labelClasses,
+    css: labelStyles,
     htmlFor: id,
     "aria-describedby": children ? "".concat(id, "-details") : undefined
   }, label), children && ___EmotionJSX("div", {
     id: "".concat(id, "-details"),
-    className: "euiCheckableCard__children"
+    className: "euiCheckableCard__children",
+    css: childStyles
   }, children)));
 };
 EuiCheckableCard.propTypes = {

package/es/components/card/checkable_card/checkable_card.styles.js

@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { css } from '@emotion/react';
+import { euiCanAnimate, euiPaddingSize, logicalCSS, logicals } from '../../../global_styling';
+export var euiCheckableCardStyles = function euiCheckableCardStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var padding = euiPaddingSize(euiThemeContext, 'm');
+  return {
+    euiCheckableCard: /*#__PURE__*/css(euiCanAnimate, "{transition:border-color ", euiTheme.animation.normal, " ease-in;};label:euiCheckableCard;"),
+    isChecked: /*#__PURE__*/css("border-color:", euiTheme.colors.primary, ";;label:isChecked;"),
+    label: {
+      euiCheckableCard__label: /*#__PURE__*/css("cursor:pointer;display:block;", logicals.width, ":calc(100% + (", padding, " * 2));padding:", padding, ";margin:-", padding, ";;label:euiCheckableCard__label;"),
+      isDisabled: /*#__PURE__*/css("color:", euiTheme.colors.disabledText, ";cursor:not-allowed;;label:isDisabled;")
+    },
+    euiCheckableCard__children: /*#__PURE__*/css(logicalCSS('margin-top', euiTheme.size.base), ";;label:euiCheckableCard__children;")
+  };
+};

package/es/components/code/code.js

@@ -53,6 +53,7 @@ EuiCode.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
        * Sets the syntax highlighting for a specific language

package/es/components/code/code_block.js

@@ -230,6 +230,7 @@ EuiCodeBlock.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
        * Sets the syntax highlighting for a specific language

package/es/components/collapsible_nav/collapsible_nav.js

@@ -2,14 +2,6 @@ var _excluded = ["id", "children", "className", "isDocked", "isOpen", "button",
 
 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 _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 _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; }
-
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -39,10 +31,10 @@ 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, { cloneElement, useEffect, useRef, useState } from 'react';
+import React, { cloneElement, useRef } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useGeneratedHtmlId, isWithinMinBreakpoint, throttle, useCombinedRefs } from '../../services';
+import { useGeneratedHtmlId, useIsWithinMinBreakpoint, useCombinedRefs } from '../../services';
 import { EuiFlyout } from '../flyout'; // Extend all the flyout props except `onClose` because we handle this internally
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -89,43 +81,9 @@ export var EuiCollapsibleNav = function EuiCollapsibleNav(_ref) {
   var focusTrapProps = _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
     shards: [buttonRef].concat(_toConsumableArray(_focusTrapProps.shards || []))
   });
-  /**
-   * Setting the initial state of pushed based on the `type` prop
-   * and if the current window size is large enough (larger than `pushBreakpoint`)
-   */
-
-
-  var _useState = useState(isWithinMinBreakpoint(typeof window === 'undefined' ? 0 : window.innerWidth, dockedBreakpoint)),
-      _useState2 = _slicedToArray(_useState, 2),
-      windowIsLargeEnoughToPush = _useState2[0],
-      setWindowIsLargeEnoughToPush = _useState2[1];
 
+  var windowIsLargeEnoughToPush = useIsWithinMinBreakpoint(dockedBreakpoint);
   var navIsDocked = isDocked && 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, dockedBreakpoint)) {
-      setWindowIsLargeEnoughToPush(true);
-    } else {
-      setWindowIsLargeEnoughToPush(false);
-    } // reacts every 50ms to resize changes and always gets the final update
-
-  }, 50);
-  useEffect(function () {
-    if (isDocked) {
-      // Only add the event listener if we'll need to accommodate with padding
-      window.addEventListener('resize', functionToCallOnWindowResize);
-    }
-
-    return function () {
-      if (isDocked) {
-        window.removeEventListener('resize', functionToCallOnWindowResize);
-      }
-    };
-  }, [isDocked, functionToCallOnWindowResize]);
   var classes = classNames('euiCollapsibleNav', className); // Show a trigger button if one was passed but
   // not if navIsDocked and showButtonIfDocked is false
 
@@ -169,6 +127,7 @@ EuiCollapsibleNav.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
      * Sets the HTML element for `EuiFlyout`
@@ -225,6 +184,7 @@ EuiCollapsibleNav.propTypes = {
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
 
     /**
        * Function that applies to clicking the mask itself and not the children
@@ -266,9 +226,9 @@ EuiCollapsibleNav.propTypes = {
   role: PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.string.isRequired]),
 
   /**
-     * Named breakpoint or pixel value for customizing the minimum window width to enable docking
+     * Named breakpoint (`xs` through `xl`) for customizing the minimum window width to enable docking
      */
-  pushMinBreakpoint: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.number.isRequired]),
+  pushMinBreakpoint: PropTypes.any,
   style: PropTypes.any,
 
   /**
@@ -292,7 +252,7 @@ EuiCollapsibleNav.propTypes = {
      * Keeps navigation flyout visible and push `<body>` content via padding
      */
   isDocked: PropTypes.bool,
-  dockedBreakpoint: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.number.isRequired]),
+  dockedBreakpoint: PropTypes.any,
 
   /**
      * Button for controlling visible state of the nav

package/es/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.js

@@ -129,6 +129,7 @@ EuiCollapsibleNavGroup.propTypes = {
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
 
     /**
          * One of EUI's color palette or a valid CSS color value https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.
@@ -197,6 +198,7 @@ EuiCollapsibleNavGroup.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
        * Applied to the entire .euiAccordion wrapper.
@@ -215,7 +217,8 @@ EuiCollapsibleNavGroup.propTypes = {
   buttonProps: PropTypes.shape({
     className: PropTypes.string,
     "aria-label": PropTypes.string,
-    "data-test-subj": PropTypes.string
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
   }),
 
   /**
@@ -279,6 +282,11 @@ EuiCollapsibleNavGroup.propTypes = {
        */
   isLoadingMessage: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.node.isRequired]),
 
+  /**
+       * Disable the open/close interaction and visually subdues the trigger
+       */
+  isDisabled: PropTypes.bool,
+
   /**
      * If `true`, wraps children in the body of an accordion,
      * requiring the prop `title` to be used as the button.

package/es/components/color_picker/color_palette_display/color_palette_display.js

@@ -62,6 +62,7 @@ EuiColorPaletteDisplay.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
      * Array of color `strings` or an array of #ColorStop. The stops must be numbers in an ordered range.

package/es/components/color_picker/color_palette_display/color_palette_display_fixed.js

@@ -42,6 +42,7 @@ EuiColorPaletteDisplayFixed.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
      * Array of color `strings` or an array of #ColorStop. The stops must be numbers in an ordered range.

package/es/components/color_picker/color_palette_display/color_palette_display_gradient.js

@@ -45,6 +45,7 @@ EuiColorPaletteDisplayGradient.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
      * Array of color `strings` or an array of #ColorStop. The stops must be numbers in an ordered range.

package/es/components/color_picker/color_palette_picker/color_palette_picker.js

@@ -97,6 +97,7 @@ EuiColorPalettePicker.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   compressed: PropTypes.bool,
   fullWidth: PropTypes.bool,
   isInvalid: PropTypes.bool,
@@ -184,7 +185,8 @@ EuiColorPalettePicker.propTypes = {
     }).isRequired).isRequired]),
     className: PropTypes.string,
     "aria-label": PropTypes.string,
-    "data-test-subj": PropTypes.string
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
   }).isRequired, PropTypes.shape({
     /**
        *  For storing unique value of item
@@ -210,7 +212,8 @@ EuiColorPalettePicker.propTypes = {
     }).isRequired).isRequired]).isRequired,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
-    "data-test-subj": PropTypes.string
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
   }).isRequired, PropTypes.shape({
     /**
        *  For storing unique value of item
@@ -236,6 +239,7 @@ EuiColorPalettePicker.propTypes = {
     }).isRequired).isRequired]).isRequired,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
-    "data-test-subj": PropTypes.string
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
   }).isRequired]).isRequired).isRequired
 };

package/es/components/color_picker/color_picker.js

@@ -620,6 +620,7 @@ EuiColorPicker.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
      * hex (string)

package/es/components/color_picker/color_picker_swatch.js

@@ -55,6 +55,7 @@ EuiColorPickerSwatch.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   color: PropTypes.string
 };
 EuiColorPickerSwatch.displayName = 'EuiColorPickerSwatch';

package/es/components/color_picker/color_stops/color_stop_thumb.js

@@ -383,6 +383,7 @@ EuiColorStopThumb.propTypes = {
   valueInputProps: PropTypes.any,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   stop: PropTypes.number.isRequired,
   color: PropTypes.string.isRequired
 };

package/es/components/color_picker/color_stops/color_stops.js

@@ -533,5 +533,6 @@ EuiColorStops.propTypes = {
      */
   valueInputProps: PropTypes.any,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };

package/es/components/color_picker/hue.js

@@ -58,6 +58,7 @@ EuiHue.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   hex: PropTypes.string,
   hue: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.number.isRequired]),
   onChange: PropTypes.func.isRequired

package/es/components/color_picker/saturation.js

@@ -213,6 +213,7 @@ EuiSaturation.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   color: PropTypes.any,
   onChange: PropTypes.func.isRequired,
   hex: PropTypes.string

package/es/components/combo_box/combo_box.js

@@ -1049,5 +1049,6 @@ EuiComboBox.propTypes = {
      * Reference ID of a text element containing the visible label for the combo box when not
      * supplied by `aria-label` or from [EuiFormRow](/#/forms/form-layouts).
      */
-  "aria-labelledby": PropTypes.string
+  "aria-labelledby": PropTypes.string,
+  css: PropTypes.any
 };

package/es/components/combo_box/combo_box_input/combo_box_input.js

@@ -306,12 +306,14 @@ EuiComboBoxInput.propTypes = {
       value: PropTypes.any,
       className: PropTypes.string,
       "aria-label": PropTypes.string,
-      "data-test-subj": PropTypes.string
+      "data-test-subj": PropTypes.string,
+      css: PropTypes.any
     }).isRequired),
     value: PropTypes.any,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
-    "data-test-subj": PropTypes.string
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
   }).isRequired),
   singleSelection: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.shape({
     asPlainText: PropTypes.bool
@@ -326,5 +328,6 @@ EuiComboBoxInput.propTypes = {
   "aria-label": PropTypes.string,
   "aria-labelledby": PropTypes.string,
   className: PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };

package/es/components/combo_box/combo_box_input/combo_box_pill.js

@@ -157,13 +157,16 @@ EuiComboBoxPill.propTypes = {
       value: PropTypes.any,
       className: PropTypes.string,
       "aria-label": PropTypes.string,
-      "data-test-subj": PropTypes.string
+      "data-test-subj": PropTypes.string,
+      css: PropTypes.any
     }).isRequired),
     value: PropTypes.any,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
-    "data-test-subj": PropTypes.string
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
   }).isRequired,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };

package/es/components/combo_box/combo_box_options_list/combo_box_option.js

@@ -145,14 +145,17 @@ EuiComboBoxOption.propTypes = {
       value: PropTypes.any,
       className: PropTypes.string,
       "aria-label": PropTypes.string,
-      "data-test-subj": PropTypes.string
+      "data-test-subj": PropTypes.string,
+      css: PropTypes.any
     }).isRequired),
     value: PropTypes.any,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
-    "data-test-subj": PropTypes.string
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
   }).isRequired,
   optionRef: PropTypes.any,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };