@elastic/eui 71.1.0 → 72.0.0

package/lib/components/icon/icon_elastic.a11y.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _icon = require("./icon");
+
+var _react2 = require("@emotion/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * 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.
+ */
+/// <reference types="../../../cypress/support"/>
+describe('EuiIcons', function () {
+  describe('Automated accessibility check for Elastic logos', function () {
+    var ElasticLogos = ['logoElastic', 'logoElasticStack', 'logoElasticsearch', 'logoAppSearch', 'logoBeats', 'logoBusinessAnalytics', 'logoCloud', 'logoCloudEnterprise', 'logoEnterpriseSearch', 'logoKibana', 'logoLogging', 'logoLogstash', 'logoMaps', 'logoMetrics', 'logoObservability', 'logoSecurity', 'logoSiteSearch', 'logoUptime', 'logoWorkplaceSearch'];
+
+    var ElasticGrid = function ElasticGrid() {
+      return (0, _react2.jsx)("div", null, ElasticLogos.map(function (glyph) {
+        return (0, _react2.jsx)(_icon.EuiIcon, {
+          className: "eui-alignMiddle",
+          type: glyph
+        });
+      }));
+    };
+
+    it('has zero violations on first render', function () {
+      cy.mount((0, _react2.jsx)(ElasticGrid, null));
+      cy.get('div[data-cy-root]').find('svg', {
+        timeout: 5000
+      }).should('have.length', 19);
+      cy.checkAxe();
+    });
+  });
+});

package/lib/components/icon/icon_glyphs.a11y.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _icon = require("./icon");
+
+var _react2 = require("@emotion/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * 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.
+ */
+/// <reference types="../../../cypress/support"/>
+describe('EuiIcons', function () {
+  describe('Automated accessibility check for glyph icons', function () {
+    var GlyphIcons = ['accessibility', 'aggregate', 'alert', 'analyzeEvent', 'annotation', 'apmTrace', 'apps', 'arrowDown', 'arrowLeft', 'arrowRight', 'arrowUp', 'arrowStart', 'arrowEnd', 'article', 'asterisk', 'beaker', 'bell', 'bellSlash', 'beta', 'bolt', 'boxesHorizontal', 'boxesVertical', 'branch', 'branchUser', 'broom', 'brush', 'bug', 'bullseye', 'calendar', 'check', 'checkInCircleFilled', 'cheer', 'clock', 'cloudDrizzle', 'cloudStormy', 'cloudSunny', 'cluster', 'color', 'compute', 'console', 'container', 'continuityAbove', 'continuityAboveBelow', 'continuityBelow', 'continuityWithin', 'controlsHorizontal', 'controlsVertical', 'copy', 'copyClipboard', 'cross', 'crosshairs', 'crossInACircleFilled', 'currency', 'cut', 'database', 'desktop', 'discuss', 'document', 'documents', 'documentEdit', 'documentation', 'dot', 'dotInCircle', 'doubleArrowLeft', 'doubleArrowRight', 'download', 'email', 'empty', 'eql', 'eraser', 'exit', 'expand', 'expandMini', 'exportAction', 'eye', 'eyeClosed', 'faceHappy', 'faceNeutral', 'faceSad', 'filter', 'filterExclude', 'filterIgnore', 'filterInclude', 'filterInCircle', 'flag', 'fold', 'folderCheck', 'folderClosed', 'folderExclamation', 'folderOpen', 'frameNext', 'framePrevious', 'fullScreen', 'fullScreenExit', 'function', 'gear', 'glasses', 'globe', 'grab', 'grabHorizontal', 'grid', 'heart', 'heatmap', 'help', 'home', 'iInCircle', 'image', 'importAction', 'indexClose', 'indexEdit', 'indexFlush', 'indexMapping', 'indexOpen', 'indexRuntime', 'indexSettings', 'indexTemporary', 'infinity', 'inputOutput', 'inspect', 'invert', 'ip', 'keyboard', 'kqlField', 'kqlFunction', 'kqlOperand', 'kqlSelector', 'kqlValue', 'kubernetesNode', 'kubernetesPod', 'launch', 'layers', 'lettering', 'lineDashed', 'lineDotted', 'lineSolid', 'link', 'list', 'listAdd', 'lock', 'lockOpen', 'logstashFilter', 'logstashIf', 'logstashInput', 'logstashOutput', 'logstashQueue', 'magnifyWithExclamation', 'magnifyWithMinus', 'magnifyWithPlus', 'magnet', 'mapMarker', 'memory', 'merge', 'menu', 'menuDown', 'menuLeft', 'menuRight', 'menuUp', 'minimize', 'minus', 'minusInCircle', 'minusInCircleFilled', 'mobile', 'moon', 'namespace', 'nested', 'node', 'number', 'offline', 'online', 'package', 'pageSelect', 'pagesSelect', 'paperClip', 'partial', 'pause', 'payment', 'pencil', 'percent', 'pin', 'pinFilled', 'play', 'playFilled', 'plus', 'plusInCircle', 'plusInCircleFilled', 'popout', 'push', 'questionInCircle', 'quote', 'refresh', 'reporter', 'returnKey', 'save', 'scale', 'search', 'securitySignal', 'securitySignalDetected', 'securitySignalResolved', 'sessionViewer', 'shard', 'share', 'snowflake', 'sortable', 'sortAscending', 'sortDescending', 'sortDown', 'sortLeft', 'sortRight', 'sortUp', 'spaces', 'starEmpty', 'starEmptySpace', 'starFilled', 'starFilledSpace', 'starMinusEmpty', 'starMinusFilled', 'starPlusEmpty', 'starPlusFilled', 'stats', 'stop', 'stopFilled', 'stopSlash', 'storage', 'string', 'submodule', 'sun', 'symlink', 'tableOfContents', 'tableDensityExpanded', 'tableDensityCompact', 'tableDensityNormal', 'tag', 'tear', 'temperature', 'timeline', 'timeRefresh', 'timeslider', 'training', 'trash', 'unfold', 'unlink', 'user', 'userAvatar', 'users', 'vector', 'videoPlayer', 'visArea', 'visAreaStacked', 'visBarHorizontal', 'visBarHorizontalStacked', 'visBarVertical', 'visBarVerticalStacked', 'visGauge', 'visGoal', 'visLine', 'visMapCoordinate', 'visMapRegion', 'visMetric', 'visPie', 'visTable', 'visTagCloud', 'visText', 'visTimelion', 'visVega', 'visVisualBuilder', 'wordWrap', 'wordWrapDisabled', 'wrench'];
+
+    var GlyphGrid = function GlyphGrid() {
+      return (0, _react2.jsx)("div", null, GlyphIcons.map(function (glyph) {
+        return (0, _react2.jsx)(_icon.EuiIcon, {
+          className: "eui-alignMiddle",
+          type: glyph
+        });
+      }));
+    };
+
+    it('has zero violations on first render', function () {
+      cy.mount((0, _react2.jsx)(GlyphGrid, null));
+      cy.get('svg[data-icon-type="wrench"]', {
+        timeout: 5000
+      }).should('exist');
+      cy.checkAxe();
+    });
+  });
+});

package/lib/components/icon/icon_tokens.a11y.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _icon = require("./icon");
+
+var _react2 = require("@emotion/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * 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.
+ */
+/// <reference types="../../../cypress/support"/>
+describe('EuiIcons', function () {
+  describe('Automated accessibility check for token icons', function () {
+    var TokenIcons = ['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'];
+
+    var TokenGrid = function TokenGrid() {
+      return (0, _react2.jsx)("div", null, TokenIcons.map(function (glyph) {
+        return (0, _react2.jsx)(_icon.EuiIcon, {
+          className: "eui-alignMiddle",
+          type: glyph
+        });
+      }));
+    };
+
+    it('has zero violations on first render', function () {
+      cy.mount((0, _react2.jsx)(TokenGrid, null));
+      cy.get('div[data-cy-root]').find('svg', {
+        timeout: 5000
+      }).should('have.length', 53);
+      cy.checkAxe();
+    });
+  });
+});

package/lib/components/markdown_editor/plugins/markdown_default_plugins/parsing_plugins.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getDefaultEuiMarkdownParsingPlugins = exports.defaultParsingPlugins = void 0;
 
-var _remarkParse = _interopRequireDefault(require("remark-parse"));
+var _remarkParseNoTrim = _interopRequireDefault(require("remark-parse-no-trim"));
 
 var _remarkEmoji = _interopRequireDefault(require("remark-emoji"));
 
@@ -43,7 +43,7 @@ var getDefaultEuiMarkdownParsingPlugins = function getDefaultEuiMarkdownParsingP
       exclude = _ref.exclude;
 
   var excludeSet = new Set(exclude);
-  var parsingPlugins = [[_remarkParse.default, {}], [_remark_prismjs.default, {}], [_remarkEmoji.default, {
+  var parsingPlugins = [[_remarkParseNoTrim.default, {}], [_remark_prismjs.default, {}], [_remarkEmoji.default, {
     emoticon: false
   }], [_remarkBreaks.default, {}], [_markdown_link_validator.euiMarkdownLinkValidator, {
     allowRelative: true,

package/lib/components/selectable/selectable.js

@@ -294,7 +294,7 @@ var EuiSelectable = /*#__PURE__*/function (_Component) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onOptionClick", function (options, event) {
+    _defineProperty(_assertThisInitialized(_this), "onOptionClick", function (options, event, clickedOption) {
       var _this$props = _this.props,
           isPreFiltered = _this$props.isPreFiltered,
           onChange = _this$props.onChange;
@@ -306,7 +306,7 @@ var EuiSelectable = /*#__PURE__*/function (_Component) {
       });
 
       if (onChange) {
-        onChange(options, event);
+        onChange(options, event, clickedOption);
       }
     });
 
@@ -740,7 +740,8 @@ EuiSelectable.propTypes = {
 
   /**
        * Passes back the altered `options` array with selected options having `checked: 'on'`.
-       * Also passes back the React click/keyboard event as a second argument.
+       * Also passes back the React click/keyboard event as a second argument,
+       * and the option that triggered the onChange event as a third argument.
        */
   onChange: _propTypes.default.func,
 

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

@@ -241,6 +241,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);
@@ -252,11 +255,12 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
 
         if (option === addedOption) {
           updatedOption.checked = 'on';
+          changedOption = updatedOption;
         }
 
         return updatedOption;
       });
-      onOptionClick(updatedOptions, event);
+      onOptionClick(updatedOptions, event, changedOption);
     });
 
     _defineProperty(_assertThisInitialized(_this), "onRemoveOption", function (removedOption, event) {
@@ -264,33 +268,40 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
           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);
     });
 
     _defineProperty(_assertThisInitialized(_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;
@@ -606,7 +617,8 @@ EuiSelectableList.propTypes = {
   searchValue: _propTypes.default.string.isRequired,
 
   /**
-     * Returns the array of options with altered checked state
+     * Returns the array of options with altered checked state, the click/keyboard event,
+     * and the option that triggered the click/keyboard event
      */
   onOptionClick: _propTypes.default.func.isRequired,
 

package/lib/components/tabs/tab.js

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiTab = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -17,12 +19,18 @@ 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
+
 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; }
@@ -39,11 +47,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 = _objectWithoutProperties(_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
@@ -122,18 +131,6 @@ EuiTab.propTypes = {
      * Will be excluded from interactive effects.
      */
   append: _propTypes.default.node,
-
-  /**
-     * Evenly stretches each tab to fill the
-     * horizontal space
-     */
-  expand: _propTypes.default.bool,
-
-  /**
-     * Sizes affect both font size and overall size.
-     * Only use the `xl` size when displayed as page titles.
-     */
-  size: _propTypes.default.any,
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,

package/lib/components/tabs/tabbed_content/tabbed_content.js

@@ -254,18 +254,6 @@ EuiTabbedContent.propTypes = {
        * Will be excluded from interactive effects.
        */
     append: _propTypes.default.node,
-
-    /**
-       * Evenly stretches each tab to fill the
-       * horizontal space
-       */
-    expand: _propTypes.default.bool,
-
-    /**
-       * Sizes affect both font size and overall size.
-       * Only use the `xl` size when displayed as page titles.
-       */
-    size: _propTypes.default.any,
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
@@ -284,8 +272,6 @@ EuiTabbedContent.propTypes = {
     disabled: _propTypes.default.bool,
     prepend: _propTypes.default.node,
     append: _propTypes.default.node,
-    expand: _propTypes.default.bool,
-    size: _propTypes.default.any,
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
@@ -305,8 +291,6 @@ EuiTabbedContent.propTypes = {
     disabled: _propTypes.default.bool,
     prepend: _propTypes.default.node,
     append: _propTypes.default.node,
-    expand: _propTypes.default.bool,
-    size: _propTypes.default.any,
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,

package/lib/components/tabs/tabs.js

@@ -13,10 +13,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"];
@@ -50,24 +50,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", _extends({
     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/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/optimize/es/components/date_picker/auto_refresh/refresh_interval.js

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

package/optimize/es/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.js

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

package/optimize/es/components/date_picker/super_date_picker/quick_select_popover/quick_select.js

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