@elastic/eui 71.1.0 → 72.0.0

package/optimize/lib/components/selectable/selectable.js

@@ -261,7 +261,7 @@ var EuiSelectable = /*#__PURE__*/function (_Component) {
         isFocused: false
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onOptionClick", function (options, event) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onOptionClick", function (options, event, clickedOption) {
       var _this$props = _this.props,
           isPreFiltered = _this$props.isPreFiltered,
           onChange = _this$props.onChange;
@@ -273,7 +273,7 @@ var EuiSelectable = /*#__PURE__*/function (_Component) {
       });
 
       if (onChange) {
-        onChange(options, event);
+        onChange(options, event, clickedOption);
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "scrollToItem", function (index, align) {

package/optimize/lib/components/selectable/selectable_list/selectable_list.js

@@ -223,6 +223,9 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
           onOptionClick = _this$props4.onOptionClick,
           options = _this$props4.options,
           singleSelection = _this$props4.singleSelection;
+
+      var changedOption = _objectSpread({}, addedOption);
+
       var updatedOptions = options.map(function (option) {
         // if singleSelection is enabled, uncheck any selected option(s)
         var updatedOption = _objectSpread({}, option);
@@ -234,43 +237,51 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
 
         if (option === addedOption) {
           updatedOption.checked = 'on';
+          changedOption = updatedOption;
         }
 
         return updatedOption;
       });
-      onOptionClick(updatedOptions, event);
+      onOptionClick(updatedOptions, event, changedOption);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRemoveOption", function (removedOption, event) {
       var _this$props5 = _this.props,
           onOptionClick = _this$props5.onOptionClick,
           singleSelection = _this$props5.singleSelection,
           options = _this$props5.options;
+
+      var changedOption = _objectSpread({}, removedOption);
+
       var updatedOptions = options.map(function (option) {
         var updatedOption = _objectSpread({}, option);
 
         if (option === removedOption && singleSelection !== 'always') {
           delete updatedOption.checked;
+          changedOption = updatedOption;
         }
 
         return updatedOption;
       });
-      onOptionClick(updatedOptions, event);
+      onOptionClick(updatedOptions, event, changedOption);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onExcludeOption", function (excludedOption, event) {
       var _this$props6 = _this.props,
           onOptionClick = _this$props6.onOptionClick,
           options = _this$props6.options;
-      excludedOption.checked = 'off';
+
+      var changedOption = _objectSpread({}, excludedOption);
+
       var updatedOptions = options.map(function (option) {
         var updatedOption = _objectSpread({}, option);
 
         if (option === excludedOption) {
           updatedOption.checked = 'off';
+          changedOption = updatedOption;
         }
 
         return updatedOption;
       });
-      onOptionClick(updatedOptions, event);
+      onOptionClick(updatedOptions, event, changedOption);
     });
     return _this;
   }

package/optimize/lib/components/tabs/tab.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,7 +13,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -21,9 +23,15 @@ var _href_validator = require("../../services/security/href_validator");
 
 var _tab = require("./tab.styles");
 
+var _tabs_context = require("./tabs_context");
+
 var _react2 = require("@emotion/react");
 
-var _excluded = ["isSelected", "children", "className", "disabled", "href", "target", "rel", "prepend", "append", "size", "expand"];
+var _excluded = ["isSelected", "children", "className", "disabled", "href", "target", "rel", "prepend", "append"];
+
+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; }
 
 var EuiTab = function EuiTab(_ref) {
   var isSelected = _ref.isSelected,
@@ -35,10 +43,12 @@ var EuiTab = function EuiTab(_ref) {
       rel = _ref.rel,
       prepend = _ref.prepend,
       append = _ref.append,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'm' : _ref$size,
-      expand = _ref.expand,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useContext = (0, _react.useContext)(_tabs_context.EuiTabsContext),
+      size = _useContext.size,
+      expand = _useContext.expand;
+
   var euiTheme = (0, _services.useEuiTheme)();
   var isHrefValid = !href || (0, _href_validator.validateHref)(href);
   var disabled = _disabled || !isHrefValid; // Keep CSS classnames for reference

package/optimize/lib/components/tabs/tabs.js

@@ -19,10 +19,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _services = require("../../services");
 
-var _clone_element = require("../../services/theme/clone_element");
-
 var _tabs = require("./tabs.styles");
 
+var _tabs_context = require("./tabs_context");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "className", "bottomBorder", "expand", "size"];
@@ -47,24 +47,18 @@ var EuiTabs = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var classes = (0, _classnames.default)('euiTabs', className);
   var styles = (0, _tabs.euiTabsStyles)(euiTheme);
   var cssStyles = [styles.euiTabs, styles[size], bottomBorder && styles.bottomBorder];
-
-  var tabItems = _react.default.Children.map(children, function (child) {
-    if ( /*#__PURE__*/_react.default.isValidElement(child)) {
-      return (0, _clone_element.cloneElementWithCss)(child, {
-        // we're passing the parent `size` and `expand` down to the children
-        size: size,
-        expand: expand
-      });
-    }
-  });
-
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     ref: ref,
     className: classes,
     css: cssStyles
   }, children && {
     role: 'tablist'
-  }, rest), tabItems);
+  }, rest), (0, _react2.jsx)(_tabs_context.EuiTabsContext.Provider, {
+    value: {
+      expand: expand,
+      size: size
+    }
+  }, children));
 });
 exports.EuiTabs = EuiTabs;
 EuiTabs.displayName = 'EuiTabs';

package/optimize/lib/components/tabs/tabs_context.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.contextDefaults = exports.EuiTabsContext = void 0;
+
+var _react = require("react");
+
+/*
+ * 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 contextDefaults = {
+  expand: false,
+  size: 'm'
+};
+exports.contextDefaults = contextDefaults;
+var EuiTabsContext = /*#__PURE__*/(0, _react.createContext)(contextDefaults);
+exports.EuiTabsContext = EuiTabsContext;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "71.1.0",
+  "version": "72.0.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -52,9 +52,7 @@
   },
   "resolutions": {
     "**/prismjs": "1.27.0",
-    "**/trim": "0.0.3",
-    "**/react": "^17.0.0",
-    "**/known-css-properties": "0.24.0"
+    "**/react": "^17.0.0"
   },
   "pre-commit": [
     "test-staged"
@@ -90,7 +88,7 @@
     "rehype-stringify": "^8.0.0",
     "remark-breaks": "^2.0.2",
     "remark-emoji": "^2.1.0",
-    "remark-parse": "^8.0.3",
+    "remark-parse-no-trim": "^8.0.4",
     "remark-rehype": "^8.0.0",
     "tabbable": "^5.2.1",
     "text-diff": "^1.0.1",
@@ -115,7 +113,7 @@
     "@cypress/code-coverage": "^3.10.0",
     "@cypress/react": "^5.10.3",
     "@cypress/webpack-dev-server": "^1.7.0",
-    "@elastic/charts": "^51.1.1",
+    "@elastic/charts": "^51.2.0",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eslint-config-kibana": "^0.15.0",
     "@emotion/babel-preset-css-prop": "^11.10.0",

package/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss

@@ -1,6 +1,19 @@
 .euiQuickSelectPopover__content {
   width: $euiFormMaxWidth;
   max-width: 100%;
+
+  .euiQuickSelectPopover__panel {
+    &:not(:first-child) {
+      border-top: $euiBorderThin;
+      padding-top: $euiSizeM;
+      margin-top: $euiSizeM;
+    }
+
+    .euiQuickSelectPopover__panelTitle {
+      float: left;
+      margin-bottom: $euiSizeM;
+    }
+  }
 }
 
 .euiQuickSelectPopover__section {
@@ -9,6 +22,7 @@
   overflow: hidden;
   overflow-y: auto;
   margin: $euiSizeS 0 0;
+  clear: both;
 }
 
 .euiQuickSelectPopover__buttonText {

package/src/components/form/file_picker/_file_picker.scss

@@ -64,30 +64,28 @@
 /**
   * 1. Don't block the user from dropping files onto the filepicker.
   * 2. Ensure space for import icon, loading spinner, and clear button (only if it has files)
-  * 3. Delay focus gradient or else it will only partially transition while file chooser opens
   * 4. Static height so that it doesn't shift its surrounding contents around
   */
 .euiFilePicker__prompt {
-  @include euiFormControlDefaultShadow;
   @include euiFormControlWithIcon; /* 2 */
   height: $euiFormControlHeight;
   padding-top: $euiFormControlPadding;
   padding-right: $euiFormControlPadding;
   padding-bottom: $euiFormControlPadding;
   pointer-events: none; /* 1 */
+  border: $euiBorderWidthThick dashed $euiColorLightShade;
   border-radius: $euiFormControlBorderRadius;
 
   transition:
-    box-shadow $euiAnimSpeedFast ease-in,
-    background-color $euiAnimSpeedFast ease-in,
-    background-image $euiAnimSpeedFast ease-in,
-    background-size $euiAnimSpeedFast ease-in $euiAnimSpeedFast; /* 3 */
+    border-color $euiAnimSpeedFast ease-in,
+    background-color $euiAnimSpeedFast ease-in;
 
   .euiFilePicker--compressed & {
     @include euiFormControlStyleCompressed($includeStates: false);
     @include euiFormControlWithIcon($compressed: true); /* 2 */
     height: $euiFormControlCompressedHeight;
     border-radius: $euiFormControlCompressedBorderRadius;
+    box-shadow: none;
   }
 
   .euiFilePicker--large & {
@@ -104,7 +102,7 @@
   }
 
   .euiFilePicker-isInvalid & {
-    @include euiFormControlInvalidStyle;
+    border: $euiBorderWidthThick dashed $euiColorDanger;
   }
 }
 
@@ -113,9 +111,14 @@
   @include euiTextTruncate;
   line-height: $euiSize;
 
-  // make normal sized prompt look like placeholder
+  // Make normal sized prompt stand out a bit more - on the large size we don't need this as it's already identifiable
   .euiFilePicker:not(.euiFilePicker--large):not(.euiFilePicker-hasFiles) & {
-    color: $euiColorMediumShade;
+    color: $euiColorPrimaryText;
+  }
+
+  // Offset/center prompt text for non-large file-pickers
+  .euiFilePicker:not(.euiFilePicker--large) & {
+    margin-top: $euiSizeXS / -2;
   }
 }
 
@@ -150,16 +153,13 @@
 // Focus
 .euiFilePicker__showDrop .euiFilePicker__prompt,
 .euiFilePicker__input:focus + .euiFilePicker__prompt {
-  @include euiFormControlFocusStyle;
-
-  .euiFilePicker--compressed & {
-    @include euiFormControlFocusStyle($borderOnly: true);
-  }
+  border-color: $euiColorPrimary;
 }
 
 // Disabled
 .euiFilePicker__input:disabled + .euiFilePicker__prompt {
   @include euiFormControlDisabledStyle;
+  box-shadow: none;
 }
 
 // Make space for the icons on the right

package/test-env/components/date_picker/auto_refresh/refresh_interval.js

@@ -225,7 +225,9 @@ var EuiRefreshInterval = /*#__PURE__*/function (_Component) {
           units = _this$state5.units;
       return (0, _react2.jsx)(_time_options.RenderI18nTimeOptions, null, function (_ref3) {
         var refreshUnitsOptions = _ref3.refreshUnitsOptions;
-        return (0, _react2.jsx)("fieldset", null, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+        return (0, _react2.jsx)("fieldset", {
+          className: "euiQuickSelectPopover__panel"
+        }, (0, _react2.jsx)(_flex.EuiFlexGroup, {
           alignItems: "center",
           gutterSize: "s",
           responsive: false,

package/test-env/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.js

@@ -56,10 +56,13 @@ var EuiCommonlyUsedTimeRanges = function EuiCommonlyUsedTimeRanges(_ref) {
       "data-test-subj": dataTestSubj
     }, label));
   });
-  return (0, _react2.jsx)("fieldset", null, (0, _react2.jsx)(_title.EuiTitle, {
+  return (0, _react2.jsx)("fieldset", {
+    className: "euiQuickSelectPopover__panel"
+  }, (0, _react2.jsx)(_title.EuiTitle, {
     size: "xxxs"
   }, (0, _react2.jsx)("legend", {
-    id: legendId
+    id: legendId,
+    className: "euiQuickSelectPopover__panelTitle"
   }, (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiCommonlyUsedTimeRanges.legend",
     default: "Commonly used"

package/test-env/components/date_picker/super_date_picker/quick_select_popover/quick_select.js

@@ -193,7 +193,9 @@ var EuiQuickSelect = /*#__PURE__*/function (_Component) {
         return value === timeUnits;
       });
       var timeUnit = matchedTimeUnit ? matchedTimeUnit.text : '';
-      return (0, _react2.jsx)("fieldset", null, (0, _react2.jsx)(_i18n.EuiI18n, {
+      return (0, _react2.jsx)("fieldset", {
+        className: "euiQuickSelectPopover__panel"
+      }, (0, _react2.jsx)(_i18n.EuiI18n, {
         token: "euiQuickSelect.legendText",
         default: "Quick select a time range"
       }, function (legendText) {