@elastic/eui 103.0.0 → 103.1.0

package/dist/eui_theme_amsterdam_dark.json

@@ -416,12 +416,12 @@
   "euiColorBorderBaseFloating": "transparent",
   "euiColorBorderBaseFormsColorSwatch": "rgba(255,255,255,0.1)",
   "euiColorBorderBaseFormsControl": "#69696f",
-  "euiColorBorderStrongPrimary": "#164160",
-  "euiColorBorderStrongAccent": "#62394c",
-  "euiColorBorderStrongAccentSecondary": "#325956",
-  "euiColorBorderStrongNeutral": "#4c535b",
-  "euiColorBorderStrongSuccess": "#325956",
-  "euiColorBorderStrongWarning": "#927f44",
-  "euiColorBorderStrongRisk": "#835329",
-  "euiColorBorderStrongDanger": "#632b28"
+  "euiColorBorderStrongPrimary": "#36A2EF",
+  "euiColorBorderStrongAccent": "#F68FBE",
+  "euiColorBorderStrongAccentSecondary": "#7DDED8",
+  "euiColorBorderStrongNeutral": "#B9CFE3",
+  "euiColorBorderStrongSuccess": "#7DDED8",
+  "euiColorBorderStrongWarning": "#F3D371",
+  "euiColorBorderStrongRisk": "#E1A26A",
+  "euiColorBorderStrongDanger": "#F86B63"
 }

package/dist/eui_theme_amsterdam_light.json

@@ -416,12 +416,12 @@
   "euiColorBorderBaseFloating": "transparent",
   "euiColorBorderBaseFormsColorSwatch": "rgba(0,0,0,0.1)",
   "euiColorBorderBaseFormsControl": "#919296",
-  "euiColorBorderStrongPrimary": "#99c9eb",
-  "euiColorBorderStrongAccent": "#f9b8d6",
-  "euiColorBorderStrongAccentSecondary": "#99e5e1",
-  "euiColorBorderStrongNeutral": "#e5ecf4",
-  "euiColorBorderStrongSuccess": "#99e5e1",
-  "euiColorBorderStrongWarning": "#fedc72",
-  "euiColorBorderStrongRisk": "#e9b98f",
-  "euiColorBorderStrongDanger": "#e5a9a5"
+  "euiColorBorderStrongPrimary": "#0077CC",
+  "euiColorBorderStrongAccent": "#F04E98",
+  "euiColorBorderStrongAccentSecondary": "#00BFB3",
+  "euiColorBorderStrongNeutral": "#94A6B6",
+  "euiColorBorderStrongSuccess": "#00BFB3",
+  "euiColorBorderStrongWarning": "#FEC514",
+  "euiColorBorderStrongRisk": "#DA8B45",
+  "euiColorBorderStrongDanger": "#BD271E"
 }

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

@@ -43,6 +43,7 @@ export var EuiCheckableCard = function EuiCheckableCard(_ref) {
   var childStyles = [styles.euiCheckableCard__children];
   var id = rest.id;
   var labelEl = useRef(null);
+  var inputEl = useRef(null);
   var classes = classNames('euiCheckableCard', className);
   var checkableElement;
   if (checkableType === 'radio') {
@@ -52,13 +53,14 @@ export var EuiCheckableCard = function EuiCheckableCard(_ref) {
     }, rest));
   } else {
     checkableElement = ___EmotionJSX(EuiCheckbox, _extends({
+      inputRef: inputEl,
       checked: checked,
       disabled: disabled
     }, rest));
   }
   var labelClasses = classNames('euiCheckableCard__label');
-  var onChangeAffordance = function onChangeAffordance() {
-    if (labelEl.current) {
+  var onChangeAffordance = function onChangeAffordance(e) {
+    if (labelEl.current && e.target !== inputEl.current) {
       labelEl.current.click();
     }
   };

package/es/components/combo_box/combo_box.js

@@ -1,4 +1,4 @@
-var _excluded = ["data-test-subj", "async", "className", "compressed", "customOptionText", "fullWidth", "id", "inputRef", "isCaseSensitive", "isClearable", "isDisabled", "isInvalid", "isLoading", "noSuggestions", "onBlur", "onChange", "onCreateOption", "onSearchChange", "options", "placeholder", "renderOption", "rowHeight", "selectedOptions", "singleSelection", "prepend", "sortMatchesBy", "delimiter", "append", "autoFocus", "truncationProps", "inputPopoverProps", "optionMatcher", "aria-label", "aria-labelledby"];
+var _excluded = ["data-test-subj", "async", "className", "compressed", "customOptionText", "fullWidth", "id", "inputRef", "isCaseSensitive", "isClearable", "isDisabled", "isInvalid", "isLoading", "noSuggestions", "onBlur", "onChange", "onCreateOption", "onSearchChange", "options", "placeholder", "renderOption", "rowHeight", "selectedOptions", "singleSelection", "prepend", "sortMatchesBy", "delimiter", "append", "autoFocus", "truncationProps", "inputPopoverProps", "optionMatcher", "aria-label", "aria-labelledby", "aria-describedby"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
@@ -490,6 +490,7 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
         optionMatcher = _this$props11.optionMatcher,
         ariaLabel = _this$props11['aria-label'],
         ariaLabelledby = _this$props11['aria-labelledby'],
+        ariaDescribedby = _this$props11['aria-describedby'],
         rest = _objectWithoutProperties(_this$props11, _excluded);
       var _this$state2 = this.state,
         activeOptionIndex = _this$state2.activeOptionIndex,
@@ -609,7 +610,8 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
               isInvalid: markAsInvalid,
               autoFocus: autoFocus,
               "aria-label": ariaLabel,
-              "aria-labelledby": ariaLabelledby
+              "aria-labelledby": ariaLabelledby,
+              "aria-describedby": ariaDescribedby
             })
           }), optionsList));
         })

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

@@ -206,7 +206,8 @@ export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         isInvalid = _this$props5.isInvalid,
         autoFocus = _this$props5.autoFocus,
         ariaLabel = _this$props5['aria-label'],
-        ariaLabelledby = _this$props5['aria-labelledby'];
+        ariaLabelledby = _this$props5['aria-labelledby'],
+        ariaDescribedby = _this$props5['aria-describedby'];
       var removeOptionMessage;
       var removeOptionMessageId;
       if (this.state.hasFocus) {
@@ -280,6 +281,7 @@ export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
           "aria-expanded": isListOpen,
           "aria-label": ariaLabel,
           "aria-labelledby": ariaLabelledby,
+          "aria-describedby": ariaDescribedby,
           "aria-invalid": isInvalid,
           "aria-haspopup": "listbox",
           css: styles.euiComboBoxInput,
@@ -386,6 +388,7 @@ EuiComboBoxInput.propTypes = {
   autoFocus: PropTypes.bool,
   "aria-label": PropTypes.string,
   "aria-labelledby": PropTypes.string,
+  "aria-describedby": PropTypes.string,
   className: PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any

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

@@ -20,11 +20,17 @@ import { useEuiI18n } from '../../i18n';
 import { euiDataGridFullScreenStyles } from './fullscreen_selector.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var GRID_IS_FULLSCREEN_CLASSNAME = 'euiDataGrid__restrictBody';
-export var useDataGridFullScreenSelector = function useDataGridFullScreenSelector() {
+export var useDataGridFullScreenSelector = function useDataGridFullScreenSelector(onFullScreenChange) {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isFullScreen = _useState2[0],
     setIsFullScreen = _useState2[1];
+  var toggleFullScreen = useCallback(function () {
+    setIsFullScreen(function (prevValue) {
+      onFullScreenChange === null || onFullScreenChange === void 0 || onFullScreenChange(!prevValue);
+      return !prevValue;
+    });
+  }, [onFullScreenChange]);
   var _useEuiI18n = useEuiI18n(['euiFullscreenSelector.fullscreenButton', 'euiFullscreenSelector.fullscreenButtonActive'], ['Enter fullscreen', 'Exit fullscreen']),
     _useEuiI18n2 = _slicedToArray(_useEuiI18n, 2),
     fullScreenButton = _useEuiI18n2[0],
@@ -39,22 +45,21 @@ export var useDataGridFullScreenSelector = function useDataGridFullScreenSelecto
       color: "text",
       "aria-pressed": isFullScreen,
       "data-test-subj": "dataGridFullScreenButton",
-      onClick: function onClick() {
-        return setIsFullScreen(!isFullScreen);
-      },
+      onClick: toggleFullScreen,
       "aria-label": isFullScreen ? fullScreenButtonActive : fullScreenButton
     }));
-  }, [isFullScreen, fullScreenButton, fullScreenButtonActive]);
+  }, [isFullScreen, fullScreenButtonActive, fullScreenButton, toggleFullScreen]);
   var handleGridKeyDown = useCallback(function (event) {
     switch (event.key) {
       case keys.ESCAPE:
         if (isFullScreen) {
           event.preventDefault();
           setIsFullScreen(false);
+          onFullScreenChange === null || onFullScreenChange === void 0 || onFullScreenChange(false);
         }
         break;
     }
-  }, [isFullScreen]);
+  }, [isFullScreen, onFullScreenChange]);
   var styles = useEuiMemoizedStyles(euiDataGridFullScreenStyles);
   useEffect(function () {
     // When the data grid is fullscreen, we add a class to the body to remove the extra scrollbar and stay above any fixed headers

package/es/components/datagrid/data_grid.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "columnVisibility", "schemaDetectors", "rowCount", "renderCellValue", "cellContext", "renderCellPopover", "renderFooterCellValue", "className", "gridStyle", "toolbarVisibility", "pagination", "sorting", "inMemory", "onColumnResize", "minSizeForControls", "height", "width", "rowHeightsOptions", "virtualizationOptions", "renderCustomGridBody", "renderCustomToolbar"];
+var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "columnVisibility", "schemaDetectors", "rowCount", "renderCellValue", "cellContext", "renderCellPopover", "renderFooterCellValue", "className", "gridStyle", "toolbarVisibility", "pagination", "sorting", "inMemory", "onColumnResize", "minSizeForControls", "height", "width", "rowHeightsOptions", "virtualizationOptions", "renderCustomGridBody", "renderCustomToolbar", "onFullScreenChange"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _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."); }
@@ -106,6 +106,7 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
     virtualizationOptions = props.virtualizationOptions,
     renderCustomGridBody = props.renderCustomGridBody,
     renderCustomToolbar = props.renderCustomToolbar,
+    onFullScreenChange = props.onFullScreenChange,
     rest = _objectWithoutProperties(props, _excluded);
 
   /**
@@ -248,7 +249,7 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
   var showToolbar = !!toolbarVisibility;
   var _useDataGridKeyboardS = useDataGridKeyboardShortcuts(),
     keyboardShortcuts = _useDataGridKeyboardS.keyboardShortcuts;
-  var _useDataGridFullScree = useDataGridFullScreenSelector(),
+  var _useDataGridFullScree = useDataGridFullScreenSelector(onFullScreenChange),
     isFullScreen = _useDataGridFullScree.isFullScreen,
     setIsFullScreen = _useDataGridFullScree.setIsFullScreen,
     fullScreenSelector = _useDataGridFullScree.fullScreenSelector,

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

@@ -76,7 +76,7 @@ EuiCheckbox.propTypes = {
   checked: PropTypes.bool,
   onChange: PropTypes.any.isRequired,
   // overriding to make it required
-  inputRef: PropTypes.func,
+  inputRef: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.func.isRequired]),
   label: PropTypes.node,
   disabled: PropTypes.bool,
   indeterminate: PropTypes.bool,