@elastic/eui 103.0.0 → 103.1.0-amsterdam.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "103.0.0",
+  "version": "103.1.0-amsterdam.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -50,7 +50,7 @@
     "url": "https://github.com/elastic/eui.git"
   },
   "dependencies": {
-    "@elastic/eui-theme-common": "1.2.0",
+    "@elastic/eui-theme-common": "1.2.1",
     "@elastic/prismjs-esql": "^1.1.0",
     "@hello-pangea/dnd": "^16.6.0",
     "@types/lodash": "^4.14.202",

package/src/themes/amsterdam/_colors_dark.scss

@@ -120,14 +120,14 @@ $euiColorBorderBaseFloating: $euiColorLightShade !default;
 $euiColorBorderBaseFormsColorSwatch: transparentize($euiColorFullShade, 0.1) !default;
 $euiColorBorderBaseFormsControl: tint($euiColorLightestShade, 0.31) !default;
 
-$euiColorBorderStrongPrimary: $euiColorBorderBasePrimary !default;
-$euiColorBorderStrongAccent: $euiColorBorderBaseAccent !default;
-$euiColorBorderStrongAccentSecondary: $euiColorBorderBaseAccentSecondary !default;
-$euiColorBorderStrongNeutral: $euiColorBorderBasePrimary !default;
-$euiColorBorderStrongSuccess: $euiColorBorderBaseSuccess !default;
-$euiColorBorderStrongWarning: $euiColorBorderBaseWarning !default;
-$euiColorBorderStrongRisk: $euiColorBorderBaseWarning !default;
-$euiColorBorderStrongDanger: $euiColorBorderBaseDanger !default;
+$euiColorBorderStrongPrimary: $euiColorPrimary !default;
+$euiColorBorderStrongAccent: $euiColorAccent !default;
+$euiColorBorderStrongAccentSecondary: $euiColorAccentSecondary !default;
+$euiColorBorderStrongNeutral: $euiColorSeverityNeutral !default;
+$euiColorBorderStrongSuccess: $euiColorSuccess !default;
+$euiColorBorderStrongWarning: $euiColorWarning !default;
+$euiColorBorderStrongRisk: tint($euiColorSeverityRisk, 0.2) !default;
+$euiColorBorderStrongDanger: $euiColorDanger !default;
 
 // Charts
 $euiColorChartLines: $euiColorLightShade !default;

package/src/themes/amsterdam/_colors_light.scss

@@ -120,14 +120,14 @@ $euiColorBorderBaseFloating: 'transparent' !default;
 $euiColorBorderBaseFormsColorSwatch: transparentize($euiColorFullShade, 0.1) !default;
 $euiColorBorderBaseFormsControl: shade($euiColorLightestShade, 0.4) !default;
 
-$euiColorBorderStrongPrimary: $euiColorBorderBasePrimary !default;
-$euiColorBorderStrongAccent: $euiColorBorderBaseAccent !default;
-$euiColorBorderStrongAccentSecondary: $euiColorBorderBaseAccentSecondary !default;
-$euiColorBorderStrongNeutral: $euiColorBorderBasePrimary !default;
-$euiColorBorderStrongSuccess: $euiColorBorderBaseSuccess !default;
-$euiColorBorderStrongWarning: $euiColorBorderBaseWarning !default;
-$euiColorBorderStrongRisk: $euiColorBorderBaseWarning !default;
-$euiColorBorderStrongDanger: $euiColorBorderBaseDanger !default;
+$euiColorBorderStrongPrimary: $euiColorPrimary !default;
+$euiColorBorderStrongAccent: $euiColorAccent !default;
+$euiColorBorderStrongAccentSecondary: $euiColorAccentSecondary !default;
+$euiColorBorderStrongNeutral: shade($euiColorSeverityNeutral, 0.2) !default;
+$euiColorBorderStrongSuccess: $euiColorSuccess !default;
+$euiColorBorderStrongWarning: $euiColorWarning !default;
+$euiColorBorderStrongRisk: $euiColorSeverityRisk !default;
+$euiColorBorderStrongDanger: $euiColorDanger !default;
 
 // Charts
 $euiColorChartLines: shade($euiColorLightestShade, 3%) !default;

package/test-env/components/card/checkable_card/checkable_card.js

@@ -49,6 +49,7 @@ var EuiCheckableCard = exports.EuiCheckableCard = function EuiCheckableCard(_ref
   var childStyles = [styles.euiCheckableCard__children];
   var id = rest.id;
   var labelEl = (0, _react.useRef)(null);
+  var inputEl = (0, _react.useRef)(null);
   var classes = (0, _classnames.default)('euiCheckableCard', className);
   var checkableElement;
   if (checkableType === 'radio') {
@@ -58,13 +59,14 @@ var EuiCheckableCard = exports.EuiCheckableCard = function EuiCheckableCard(_ref
     }, rest));
   } else {
     checkableElement = (0, _react2.jsx)(_form.EuiCheckbox, (0, _extends2.default)({
+      inputRef: inputEl,
       checked: checked,
       disabled: disabled
     }, rest));
   }
   var labelClasses = (0, _classnames.default)('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/test-env/components/combo_box/combo_box.js

@@ -28,7 +28,7 @@ var _combo_box_input = require("./combo_box_input/combo_box_input");
 var _combo_box_options_list = require("./combo_box_options_list");
 var _combo_box = require("./combo_box.styles");
 var _react2 = require("@emotion/react");
-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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -483,6 +483,7 @@ var EuiComboBox = exports.EuiComboBox = /*#__PURE__*/function (_Component) {
         optionMatcher = _this$props11.optionMatcher,
         ariaLabel = _this$props11['aria-label'],
         ariaLabelledby = _this$props11['aria-labelledby'],
+        ariaDescribedby = _this$props11['aria-describedby'],
         rest = (0, _objectWithoutProperties2.default)(_this$props11, _excluded);
       var _this$state2 = this.state,
         activeOptionIndex = _this$state2.activeOptionIndex,
@@ -602,7 +603,8 @@ var EuiComboBox = exports.EuiComboBox = /*#__PURE__*/function (_Component) {
               isInvalid: markAsInvalid,
               autoFocus: autoFocus,
               "aria-label": ariaLabel,
-              "aria-labelledby": ariaLabelledby
+              "aria-labelledby": ariaLabelledby,
+              "aria-describedby": ariaDescribedby
             })
           }), optionsList));
         })

package/test-env/components/combo_box/combo_box_input/combo_box_input.js

@@ -203,7 +203,8 @@ var EuiComboBoxInput = exports.EuiComboBoxInput = /*#__PURE__*/function (_Compon
         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) {
@@ -277,6 +278,7 @@ var EuiComboBoxInput = exports.EuiComboBoxInput = /*#__PURE__*/function (_Compon
           "aria-expanded": isListOpen,
           "aria-label": ariaLabel,
           "aria-labelledby": ariaLabelledby,
+          "aria-describedby": ariaDescribedby,
           "aria-invalid": isInvalid,
           "aria-haspopup": "listbox",
           css: styles.euiComboBoxInput,
@@ -383,6 +385,7 @@ EuiComboBoxInput.propTypes = {
   autoFocus: _propTypes.default.bool,
   "aria-label": _propTypes.default.string,
   "aria-labelledby": _propTypes.default.string,
+  "aria-describedby": _propTypes.default.string,
   className: _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any

package/test-env/components/datagrid/controls/fullscreen_selector.js

@@ -25,11 +25,17 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 
 var GRID_IS_FULLSCREEN_CLASSNAME = 'euiDataGrid__restrictBody';
-var useDataGridFullScreenSelector = exports.useDataGridFullScreenSelector = function useDataGridFullScreenSelector() {
+var useDataGridFullScreenSelector = exports.useDataGridFullScreenSelector = function useDataGridFullScreenSelector(onFullScreenChange) {
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isFullScreen = _useState2[0],
     setIsFullScreen = _useState2[1];
+  var toggleFullScreen = (0, _react.useCallback)(function () {
+    setIsFullScreen(function (prevValue) {
+      onFullScreenChange === null || onFullScreenChange === void 0 || onFullScreenChange(!prevValue);
+      return !prevValue;
+    });
+  }, [onFullScreenChange]);
   var _useEuiI18n = (0, _i18n.useEuiI18n)(['euiFullscreenSelector.fullscreenButton', 'euiFullscreenSelector.fullscreenButtonActive'], ['Enter fullscreen', 'Exit fullscreen']),
     _useEuiI18n2 = (0, _slicedToArray2.default)(_useEuiI18n, 2),
     fullScreenButton = _useEuiI18n2[0],
@@ -44,22 +50,21 @@ var useDataGridFullScreenSelector = exports.useDataGridFullScreenSelector = func
       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 = (0, _react.useCallback)(function (event) {
     switch (event.key) {
       case _services.keys.ESCAPE:
         if (isFullScreen) {
           event.preventDefault();
           setIsFullScreen(false);
+          onFullScreenChange === null || onFullScreenChange === void 0 || onFullScreenChange(false);
         }
         break;
     }
-  }, [isFullScreen]);
+  }, [isFullScreen, onFullScreenChange]);
   var styles = (0, _services.useEuiMemoizedStyles)(_fullscreen_selector.euiDataGridFullScreenStyles);
   (0, _react.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/test-env/components/datagrid/data_grid.js

@@ -32,7 +32,7 @@ var _ref = require("./utils/ref");
 var _data_grid_types = require("./data_grid_types");
 var _data_grid = require("./data_grid.styles");
 var _react2 = require("@emotion/react");
-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"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -102,6 +102,7 @@ var EuiDataGrid = exports.EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE
     virtualizationOptions = props.virtualizationOptions,
     renderCustomGridBody = props.renderCustomGridBody,
     renderCustomToolbar = props.renderCustomToolbar,
+    onFullScreenChange = props.onFullScreenChange,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
 
   /**
@@ -244,7 +245,7 @@ var EuiDataGrid = exports.EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE
   var showToolbar = !!toolbarVisibility;
   var _useDataGridKeyboardS = (0, _controls.useDataGridKeyboardShortcuts)(),
     keyboardShortcuts = _useDataGridKeyboardS.keyboardShortcuts;
-  var _useDataGridFullScree = (0, _controls.useDataGridFullScreenSelector)(),
+  var _useDataGridFullScree = (0, _controls.useDataGridFullScreenSelector)(onFullScreenChange),
     isFullScreen = _useDataGridFullScree.isFullScreen,
     setIsFullScreen = _useDataGridFullScree.setIsFullScreen,
     fullScreenSelector = _useDataGridFullScree.fullScreenSelector,

package/test-env/components/form/checkbox/checkbox.js

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

package/test-env/components/provider/provider.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiProvider = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _euiThemeBorealis = require("@elastic/eui-theme-borealis");
+var _themes = require("../../themes");
 var _services = require("../../services");
 var _warning = require("../../services/theme/warning");
 var _css = require("../../services/emotion/css");
@@ -33,7 +33,7 @@ var EuiProvider = exports.EuiProvider = function EuiProvider(_ref) {
   var _ref$cache = _ref.cache,
     cache = _ref$cache === void 0 ? _css.cache : _ref$cache,
     _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? _euiThemeBorealis.EuiThemeBorealis : _ref$theme,
+    theme = _ref$theme === void 0 ? _themes.EuiThemeAmsterdam : _ref$theme,
     _ref$globalStyles = _ref.globalStyles,
     Globals = _ref$globalStyles === void 0 ? _global_styles.EuiGlobalStyles : _ref$globalStyles,
     _ref$utilityClasses = _ref.utilityClasses,

package/test-env/services/color/vis_color_store.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EUI_VIS_COLOR_STORE = void 0;
 var _euiThemeCommon = require("@elastic/eui-theme-common");
-var _euiThemeBorealis = require("@elastic/eui-theme-borealis");
+var _colors_vis = require("../../themes/amsterdam/global_styling/variables/_colors_vis");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -15,4 +15,4 @@ var _euiThemeBorealis = require("@elastic/eui-theme-borealis");
  */
 
 // initialsetup of Vis color storage with default colors
-var EUI_VIS_COLOR_STORE = exports.EUI_VIS_COLOR_STORE = _euiThemeCommon.EuiVisColorStore.getInstance(_euiThemeBorealis.colorVis, true);
+var EUI_VIS_COLOR_STORE = exports.EUI_VIS_COLOR_STORE = _euiThemeCommon.EuiVisColorStore.getInstance(_colors_vis.colorVis, true);

package/test-env/services/theme/context.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultComputedTheme = exports.EuiThemeContext = exports.EuiSystemContext = exports.EuiNestedThemeContext = exports.EuiModificationsContext = exports.EuiHighContrastModeContext = exports.EuiColorModeContext = exports.DEFAULTS = void 0;
 var _react = require("react");
-var _euiThemeBorealis = require("@elastic/eui-theme-borealis");
+var _theme = require("../../themes/amsterdam/theme");
 var _utils = require("./utils");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -16,7 +16,7 @@ var _utils = require("./utils");
  */
 
 var DEFAULTS = exports.DEFAULTS = {
-  system: _euiThemeBorealis.EuiThemeBorealis,
+  system: _theme.EuiThemeAmsterdam,
   modifications: {},
   colorMode: _utils.DEFAULT_COLOR_MODE,
   highContrastMode: false