@elastic/eui 77.1.0 → 77.2.0

package/optimize/lib/components/basic_table/basic_table.a11y.js

@@ -0,0 +1,188 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _basic_table = require("./basic_table");
+var _button = require("../button");
+var _health = require("../health");
+var _link = require("../link");
+var _accessibility = require("../accessibility");
+var _services = require("../../services");
+var _faker = require("@faker-js/faker");
+var _react2 = require("@emotion/react");
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var users = [];
+for (var i = 0; i < 20; i++) {
+  users.push({
+    id: i + 1,
+    firstName: _faker.faker.name.firstName(),
+    lastName: _faker.faker.name.lastName(),
+    github: _faker.faker.internet.userName(),
+    dateOfBirth: _faker.faker.date.past(),
+    online: _faker.faker.datatype.boolean(),
+    location: {
+      city: _faker.faker.address.city(),
+      country: _faker.faker.address.country()
+    }
+  });
+}
+var columns = [{
+  field: 'firstName',
+  name: 'First Name',
+  sortable: true,
+  truncateText: true,
+  mobileOptions: {
+    render: function render(user) {
+      return (0, _react2.jsx)("span", null, user.firstName, " ", user.lastName);
+    },
+    header: false,
+    truncateText: false,
+    enlarge: true,
+    width: '100%'
+  }
+}, {
+  field: 'lastName',
+  name: 'Last Name',
+  truncateText: true,
+  mobileOptions: {
+    show: false
+  }
+}, {
+  field: 'github',
+  name: 'Github',
+  render: function render(username) {
+    return (0, _react2.jsx)(_link.EuiLink, {
+      href: "#",
+      target: "_blank"
+    }, username);
+  }
+}, {
+  field: 'dateOfBirth',
+  name: 'Date of Birth',
+  dataType: 'date',
+  render: function render(dateOfBirth) {
+    return (0, _services.formatDate)(dateOfBirth, 'dobLong');
+  },
+  sortable: true
+}, {
+  field: 'location',
+  name: 'Location',
+  truncateText: true,
+  textOnly: true,
+  render: function render(location) {
+    return "".concat(location.city, ", ").concat(location.country);
+  }
+}, {
+  field: 'online',
+  name: 'Online',
+  dataType: 'boolean',
+  render: function render(online) {
+    var color = online ? 'success' : 'danger';
+    var label = online ? 'Online' : 'Offline';
+    return (0, _react2.jsx)(_health.EuiHealth, {
+      color: color
+    }, label);
+  },
+  sortable: true,
+  mobileOptions: {
+    show: false
+  }
+}];
+describe('EuiTable', function () {
+  var BasicTable = function BasicTable() {
+    return (0, _react2.jsx)(_basic_table.EuiBasicTable, {
+      tableCaption: "Demo of EuiBasicTable",
+      columns: columns,
+      items: users,
+      "data-test-subj": "cy-basic-table"
+    });
+  };
+  describe('Basic table', function () {
+    describe('Automated accessibility check', function () {
+      it('has zero violations on render', function () {
+        cy.viewport(1024, 768); // medium breakpoint
+        cy.realMount((0, _react2.jsx)(BasicTable, null));
+        cy.get('[data-test-subj="cy-basic-table"]').should('exist');
+        cy.checkAxe();
+      });
+    });
+  });
+  describe('Mobile basic table', function () {
+    describe('Automated accessibility check', function () {
+      it('has zero violations on render', function () {
+        cy.viewport(375, 667); // small breakpoint
+        cy.realMount((0, _react2.jsx)(BasicTable, null));
+        cy.get('[data-test-subj="cy-basic-table"]').should('exist');
+        cy.checkAxe();
+      });
+    });
+  });
+  describe('Expandable rows', function () {
+    var ExpandableRowTable = function ExpandableRowTable() {
+      var _useState = (0, _react.useState)({}),
+        _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+        itemIdToExpandedRowMap = _useState2[0],
+        setItemIdToExpandedRowMap = _useState2[1];
+      var toggleDetails = function toggleDetails(user) {
+        var itemIdToExpandedRowMapValues = _objectSpread({}, itemIdToExpandedRowMap);
+        if (itemIdToExpandedRowMapValues[user.id]) {
+          delete itemIdToExpandedRowMapValues[user.id];
+        } else {
+          itemIdToExpandedRowMapValues[user.id] = (0, _react2.jsx)("div", null, (0, _react2.jsx)("p", null, "Location: ".concat(user.location.city)), (0, _react2.jsx)("p", null, "This person is online."));
+        }
+        setItemIdToExpandedRowMap(itemIdToExpandedRowMapValues);
+      };
+      var columnsWithExpandingRowToggle = [].concat(columns, [{
+        align: 'right',
+        width: '40px',
+        isExpander: true,
+        name: (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, "Expand rows")),
+        render: function render(user) {
+          var itemIdToExpandedRowMapValues = _objectSpread({}, itemIdToExpandedRowMap);
+          return (0, _react2.jsx)(_button.EuiButtonIcon, {
+            id: user.id.toString(),
+            onClick: function onClick() {
+              return toggleDetails(user);
+            },
+            "aria-label": itemIdToExpandedRowMapValues[user.id] ? 'Collapse' : 'Expand',
+            iconType: itemIdToExpandedRowMapValues[user.id] ? 'arrowDown' : 'arrowRight'
+          });
+        }
+      }]);
+      return (0, _react2.jsx)(_basic_table.EuiBasicTable, {
+        tableCaption: "Demo of EuiBasicTable with expanding rows",
+        itemIdToExpandedRowMap: itemIdToExpandedRowMap,
+        isExpandable: true,
+        columns: columnsWithExpandingRowToggle,
+        items: users,
+        itemId: "id",
+        "data-test-subj": "cy-expandable-row-table"
+      });
+    };
+    beforeEach(function () {
+      cy.viewport(1024, 768); // medium breakpoint
+      cy.realMount((0, _react2.jsx)(ExpandableRowTable, null));
+      cy.get('[data-test-subj="cy-expandable-row-table"]').should('exist');
+    });
+    describe('Automated accessibility check', function () {
+      it('has zero violations on render', function () {
+        cy.checkAxe();
+      });
+    });
+    describe('Keyboard accessibility', function () {
+      it('has zero violations after expanding a row', function () {
+        cy.repeatRealPress('Tab');
+        cy.get('button#1').should('have.focus');
+        cy.realPress('Enter');
+        cy.get('tr.euiTableRow-isExpandedRow div.euiTableCellContent').should('exist');
+        cy.checkAxe();
+      });
+    });
+  });
+});

package/{test-env/components/basic_table/table.a11y.js → optimize/lib/components/basic_table/in_memory_table.a11y.js}

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _faker = require("@faker-js/faker");
-var _index = require("./index");
+var _ = require(".");
 var _health = require("../health");
 var _link = require("../link");
 var _services = require("../../services");
@@ -99,7 +99,7 @@ var columns = [{
 }];
 describe('EuiInMemoryTable', function () {
   var mountTable = function mountTable() {
-    cy.realMount((0, _react2.jsx)(_index.EuiInMemoryTable, {
+    cy.realMount((0, _react2.jsx)(_.EuiInMemoryTable, {
       "data-test-subj": "cy-in-memory-table",
       tableCaption: "Demo of EuiInMemoryTable",
       items: users,

package/optimize/lib/components/date_picker/date_picker.js

@@ -17,7 +17,7 @@ var _services = require("../../services");
 var _context = require("../context");
 var _reactDatepicker = require("./react-datepicker");
 var _react2 = require("@emotion/react");
-var _excluded = ["adjustDateOnChange", "calendarClassName", "className", "customInput", "dateFormat", "dayClassName", "disabled", "excludeDates", "filterDate", "fullWidth", "iconType", "injectTimes", "inline", "inputRef", "isInvalid", "isLoading", "locale", "maxDate", "maxTime", "minDate", "minTime", "onChange", "onClear", "openToDate", "placeholder", "popperClassName", "popoverPlacement", "selected", "shadow", "shouldCloseOnSelect", "showIcon", "showTimeSelect", "showTimeSelectOnly", "timeFormat", "utcOffset"];
+var _excluded = ["adjustDateOnChange", "calendarClassName", "className", "controlOnly", "customInput", "dateFormat", "dayClassName", "disabled", "excludeDates", "filterDate", "fullWidth", "iconType", "injectTimes", "inline", "inputRef", "isInvalid", "isLoading", "locale", "maxDate", "maxTime", "minDate", "minTime", "onChange", "onClear", "openToDate", "placeholder", "popperClassName", "popoverPlacement", "selected", "shadow", "shouldCloseOnSelect", "showIcon", "showTimeSelect", "showTimeSelectOnly", "timeFormat", "utcOffset"];
 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 euiDatePickerDefaultDateFormat = 'MM/DD/YYYY';
@@ -56,6 +56,7 @@ var EuiDatePicker = function EuiDatePicker(_ref) {
     adjustDateOnChange = _ref$adjustDateOnChan === void 0 ? true : _ref$adjustDateOnChan,
     calendarClassName = _ref.calendarClassName,
     className = _ref.className,
+    controlOnly = _ref.controlOnly,
     customInput = _ref.customInput,
     _ref$dateFormat = _ref.dateFormat,
     dateFormat = _ref$dateFormat === void 0 ? euiDatePickerDefaultDateFormat : _ref$dateFormat,
@@ -101,7 +102,7 @@ var EuiDatePicker = function EuiDatePicker(_ref) {
     'euiDatePicker--shadow': shadow,
     'euiDatePicker--inline': inline
   });
-  var numIconsClass = (0, _num_icons.getFormControlClassNameForIconCount)({
+  var numIconsClass = controlOnly ? false : (0, _num_icons.getFormControlClassNameForIconCount)({
     isInvalid: isInvalid,
     isLoading: isLoading
   });
@@ -142,17 +143,7 @@ var EuiDatePicker = function EuiDatePicker(_ref) {
     controlEl: inputValidityRef
   });
   var inputRefs = (0, _services.useCombinedRefs)([inputRef, setInputValidityRef]);
-  return (0, _react2.jsx)("span", {
-    className: classes
-  }, (0, _react2.jsx)(_form.EuiFormControlLayout, {
-    icon: optionalIcon,
-    fullWidth: fullWidth,
-    clear: selected && onClear ? {
-      onClick: onClear
-    } : undefined,
-    isLoading: isLoading,
-    isInvalid: isInvalid
-  }, (0, _react2.jsx)(_context.EuiI18nConsumer, null, function (_ref2) {
+  var control = (0, _react2.jsx)(_context.EuiI18nConsumer, null, function (_ref2) {
     var contextLocale = _ref2.locale;
     return (0, _react2.jsx)(_reactDatepicker.ReactDatePicker, (0, _extends2.default)({
       adjustDateOnChange: adjustDateOnChange,
@@ -188,6 +179,18 @@ var EuiDatePicker = function EuiDatePicker(_ref) {
       accessibleMode: true,
       popperPlacement: popoverPlacement
     }, rest));
-  })));
+  });
+  if (controlOnly) return control;
+  return (0, _react2.jsx)("span", {
+    className: classes
+  }, (0, _react2.jsx)(_form.EuiFormControlLayout, {
+    icon: optionalIcon,
+    fullWidth: fullWidth,
+    clear: selected && onClear ? {
+      onClick: onClear
+    } : undefined,
+    isLoading: isLoading,
+    isInvalid: isInvalid
+  }, control));
 };
 exports.EuiDatePicker = EuiDatePicker;

package/optimize/lib/components/date_picker/date_picker_range.js

@@ -10,9 +10,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _icon = require("../icon");
+var _form = require("../form");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "fullWidth", "isCustom", "readOnly", "isInvalid", "disabled", "onFocus", "onBlur"];
+var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "fullWidth", "isCustom", "readOnly", "isInvalid", "disabled", "onFocus", "onBlur", "append", "prepend"];
 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 EuiDatePickerRange = function EuiDatePickerRange(_ref) {
@@ -29,6 +29,8 @@ var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     disabled = _ref.disabled,
     _onFocus = _ref.onFocus,
     _onBlur = _ref.onBlur,
+    append = _ref.append,
+    prepend = _ref.prepend,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiDatePickerRange', {
     'euiDatePickerRange--fullWidth': fullWidth,
@@ -40,8 +42,8 @@ var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
   var endControl = endDateControl;
   if (!isCustom) {
     startControl = /*#__PURE__*/(0, _react.cloneElement)(startDateControl, {
-      iconType: typeof iconType === 'boolean' ? undefined : iconType,
-      showIcon: !!iconType,
+      controlOnly: true,
+      showIcon: false,
       fullWidth: fullWidth,
       readOnly: readOnly,
       disabled: disabled || startDateControl.props.disabled,
@@ -59,6 +61,7 @@ var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
       }
     });
     endControl = /*#__PURE__*/(0, _react.cloneElement)(endDateControl, {
+      controlOnly: true,
       showIcon: false,
       fullWidth: fullWidth,
       readOnly: readOnly,
@@ -78,14 +81,17 @@ var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
       }
     });
   }
-  var delimiter = (0, _react2.jsx)("span", {
-    className: "euiDatePickerRange__delimeter"
-  }, (0, _react2.jsx)(_icon.EuiIcon, {
-    color: isInvalid ? 'danger' : 'subdued',
-    type: "sortRight"
-  }));
-  return (0, _react2.jsx)("div", (0, _extends2.default)({
-    className: classes
-  }, rest), children ? children : (0, _react2.jsx)(_react.Fragment, null, startControl, delimiter, endControl));
+  return (0, _react2.jsx)(_form.EuiFormControlLayoutDelimited, (0, _extends2.default)({
+    icon: iconType === true ? 'calendar' : iconType || undefined,
+    className: classes,
+    startControl: startControl,
+    endControl: endControl,
+    fullWidth: fullWidth,
+    readOnly: readOnly,
+    isDisabled: disabled,
+    isInvalid: isInvalid,
+    append: append,
+    prepend: prepend
+  }, rest));
 };
 exports.EuiDatePickerRange = EuiDatePickerRange;

package/optimize/lib/components/date_picker/super_date_picker/super_date_picker.js

@@ -200,6 +200,36 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         _this.asyncInterval = new _async_interval.AsyncInterval(handler, refreshInterval);
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderQuickSelect", function () {
+      var _this$props2 = _this.props,
+        start = _this$props2.start,
+        end = _this$props2.end,
+        customQuickSelectPanels = _this$props2.customQuickSelectPanels,
+        customQuickSelectRender = _this$props2.customQuickSelectRender,
+        commonlyUsedRanges = _this$props2.commonlyUsedRanges,
+        timeOptions = _this$props2.timeOptions,
+        dateFormat = _this$props2.dateFormat,
+        onRefreshChange = _this$props2.onRefreshChange,
+        recentlyUsedRanges = _this$props2.recentlyUsedRanges,
+        refreshInterval = _this$props2.refreshInterval,
+        isPaused = _this$props2.isPaused,
+        isDisabled = _this$props2.isDisabled;
+      return (0, _react2.jsx)(_quick_select_popover.EuiQuickSelectPopover, {
+        applyRefreshInterval: onRefreshChange ? _this.onRefreshChange : undefined,
+        applyTime: _this.applyQuickTime,
+        commonlyUsedRanges: commonlyUsedRanges,
+        customQuickSelectPanels: customQuickSelectPanels,
+        customQuickSelectRender: customQuickSelectRender,
+        dateFormat: dateFormat,
+        end: end,
+        isDisabled: isDisabled,
+        isPaused: isPaused,
+        recentlyUsedRanges: recentlyUsedRanges,
+        refreshInterval: refreshInterval,
+        start: start,
+        timeOptions: timeOptions
+      });
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderDatePickerRange", function () {
       var _this$state = _this.state,
         end = _this$state.end,
@@ -209,24 +239,47 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         isStartDatePopoverOpen = _this$state.isStartDatePopoverOpen,
         showPrettyDuration = _this$state.showPrettyDuration,
         start = _this$state.start;
-      var _this$props2 = _this.props,
-        commonlyUsedRanges = _this$props2.commonlyUsedRanges,
-        timeOptions = _this$props2.timeOptions,
-        dateFormat = _this$props2.dateFormat,
-        isDisabled = _this$props2.isDisabled,
-        locale = _this$props2.locale,
-        timeFormat = _this$props2.timeFormat,
-        utcOffset = _this$props2.utcOffset,
-        compressed = _this$props2.compressed,
-        onFocus = _this$props2.onFocus;
+      var _this$props3 = _this.props,
+        isQuickSelectOnly = _this$props3.isQuickSelectOnly,
+        showUpdateButton = _this$props3.showUpdateButton,
+        commonlyUsedRanges = _this$props3.commonlyUsedRanges,
+        timeOptions = _this$props3.timeOptions,
+        dateFormat = _this$props3.dateFormat,
+        refreshInterval = _this$props3.refreshInterval,
+        isPaused = _this$props3.isPaused,
+        isDisabled = _this$props3.isDisabled,
+        isLoading = _this$props3.isLoading,
+        locale = _this$props3.locale,
+        timeFormat = _this$props3.timeFormat,
+        utcOffset = _this$props3.utcOffset,
+        compressed = _this$props3.compressed,
+        onFocus = _this$props3.onFocus,
+        className = _this$props3.className,
+        dataTestSubj = _this$props3['data-test-subj'];
+      var autoRefreshAppend = !isPaused ? (0, _react2.jsx)(_auto_refresh.EuiAutoRefreshButton, {
+        refreshInterval: refreshInterval,
+        isDisabled: isDisabled,
+        isPaused: isPaused,
+        onRefreshChange: _this.onRefreshChange,
+        shortHand: true
+      }) : undefined;
+      var formControlLayoutProps = {
+        className: (0, _classnames.default)('euiSuperDatePicker', className),
+        compressed: compressed,
+        isInvalid: isInvalid,
+        isLoading: isLoading && !showUpdateButton,
+        disabled: isDisabled,
+        prepend: _this.renderQuickSelect(),
+        append: autoRefreshAppend,
+        'data-test-subj': dataTestSubj
+      };
+      if (isQuickSelectOnly) {
+        return (0, _react2.jsx)(_form.EuiFormControlLayout, (0, _extends2.default)({
+          iconsPosition: "static"
+        }, formControlLayoutProps));
+      }
       if (showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
-        return (0, _react2.jsx)(_date_picker_range.EuiDatePickerRange, {
-          className: "euiDatePickerRange--inGroup",
-          iconType: false,
-          isCustom: true,
-          startDateControl: (0, _react2.jsx)("div", null),
-          endDateControl: (0, _react2.jsx)("div", null)
-        }, (0, _react2.jsx)("button", {
+        return (0, _react2.jsx)(_form.EuiFormControlLayout, formControlLayoutProps, (0, _react2.jsx)("button", {
           className: (0, _classnames.default)('euiSuperDatePicker__prettyFormat', {
             'euiSuperDatePicker__prettyFormat--disabled': isDisabled
           }),
@@ -243,12 +296,12 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
       }
       return (0, _react2.jsx)(_context.EuiI18nConsumer, null, function (_ref4) {
         var contextLocale = _ref4.locale;
-        return (0, _react2.jsx)(_date_picker_range.EuiDatePickerRange, {
-          className: "euiDatePickerRange--inGroup",
-          iconType: false,
-          isInvalid: isInvalid,
-          disabled: isDisabled,
+        return (0, _react2.jsx)(_date_picker_range.EuiDatePickerRange, (0, _extends2.default)({}, formControlLayoutProps, {
+          className: (0, _classnames.default)(formControlLayoutProps.className, {
+            'euiSuperDatePicker--needsUpdating': hasChanged && !isDisabled && !isInvalid
+          }),
           isCustom: true,
+          iconType: false,
           startDateControl: (0, _react2.jsx)(_date_popover_button.EuiDatePopoverButton, {
             className: "euiSuperDatePicker__startPopoverButton",
             compressed: compressed,
@@ -291,15 +344,15 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
               onFocus: onFocus
             }
           })
-        });
+        }));
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClickUpdateButton", function () {
       if (!_this.state.hasChanged && _this.props.onRefresh) {
-        var _this$props3 = _this.props,
-          start = _this$props3.start,
-          end = _this$props3.end,
-          refreshInterval = _this$props3.refreshInterval;
+        var _this$props4 = _this.props,
+          start = _this$props4.start,
+          end = _this$props4.end,
+          refreshInterval = _this$props4.refreshInterval;
         _this.props.onRefresh({
           start: start,
           end: end,
@@ -310,12 +363,12 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderUpdateButton", function () {
-      var _this$props4 = _this.props,
-        isLoading = _this$props4.isLoading,
-        isDisabled = _this$props4.isDisabled,
-        updateButtonProps = _this$props4.updateButtonProps,
-        showUpdateButton = _this$props4.showUpdateButton,
-        compressed = _this$props4.compressed;
+      var _this$props5 = _this.props,
+        isLoading = _this$props5.isLoading,
+        isDisabled = _this$props5.isDisabled,
+        updateButtonProps = _this$props5.updateButtonProps,
+        showUpdateButton = _this$props5.showUpdateButton,
+        compressed = _this$props5.compressed;
       if (!showUpdateButton) return null;
       return (0, _react2.jsx)(_flex.EuiFlexItem, {
         grow: false
@@ -335,52 +388,21 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
   (0, _createClass2.default)(EuiSuperDatePickerInternal, [{
     key: "render",
     value: function render() {
-      var _this$props5 = this.props,
-        commonlyUsedRanges = _this$props5.commonlyUsedRanges,
-        timeOptions = _this$props5.timeOptions,
-        customQuickSelectPanels = _this$props5.customQuickSelectPanels,
-        customQuickSelectRender = _this$props5.customQuickSelectRender,
-        dateFormat = _this$props5.dateFormat,
-        end = _this$props5.end,
-        isAutoRefreshOnly = _this$props5.isAutoRefreshOnly,
-        isDisabled = _this$props5.isDisabled,
-        isPaused = _this$props5.isPaused,
-        onRefreshChange = _this$props5.onRefreshChange,
-        recentlyUsedRanges = _this$props5.recentlyUsedRanges,
-        refreshInterval = _this$props5.refreshInterval,
-        showUpdateButton = _this$props5.showUpdateButton,
-        start = _this$props5.start,
-        dataTestSubj = _this$props5['data-test-subj'],
-        _width = _this$props5.width,
-        isQuickSelectOnly = _this$props5.isQuickSelectOnly,
-        compressed = _this$props5.compressed,
-        className = _this$props5.className;
+      var _this$props6 = this.props,
+        isAutoRefreshOnly = _this$props6.isAutoRefreshOnly,
+        isDisabled = _this$props6.isDisabled,
+        isPaused = _this$props6.isPaused,
+        onRefreshChange = _this$props6.onRefreshChange,
+        refreshInterval = _this$props6.refreshInterval,
+        showUpdateButton = _this$props6.showUpdateButton,
+        dataTestSubj = _this$props6['data-test-subj'],
+        _width = _this$props6.width,
+        isQuickSelectOnly = _this$props6.isQuickSelectOnly,
+        compressed = _this$props6.compressed,
+        className = _this$props6.className;
 
       // Force reduction in width if showing quick select only
       var width = isQuickSelectOnly ? 'auto' : _width;
-      var autoRefreshAppend = !isPaused ? (0, _react2.jsx)(_auto_refresh.EuiAutoRefreshButton, {
-        className: "euiFormControlLayout__append",
-        refreshInterval: refreshInterval,
-        isDisabled: isDisabled,
-        isPaused: isPaused,
-        onRefreshChange: this.onRefreshChange,
-        shortHand: true
-      }) : undefined;
-      var quickSelect = (0, _react2.jsx)(_quick_select_popover.EuiQuickSelectPopover, {
-        applyRefreshInterval: onRefreshChange ? this.onRefreshChange : undefined,
-        applyTime: this.applyQuickTime,
-        commonlyUsedRanges: commonlyUsedRanges,
-        customQuickSelectPanels: customQuickSelectPanels,
-        customQuickSelectRender: customQuickSelectRender,
-        dateFormat: dateFormat,
-        end: end,
-        isDisabled: isDisabled,
-        isPaused: isPaused,
-        recentlyUsedRanges: recentlyUsedRanges,
-        refreshInterval: refreshInterval,
-        start: start,
-        timeOptions: timeOptions
-      });
       var flexWrapperClasses = (0, _classnames.default)('euiSuperDatePicker__flexWrapper', {
         'euiSuperDatePicker__flexWrapper--noUpdateButton': !showUpdateButton,
         'euiSuperDatePicker__flexWrapper--isAutoRefreshOnly': isAutoRefreshOnly,
@@ -401,14 +423,7 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         isDisabled: isDisabled,
         "data-test-subj": dataTestSubj,
         className: className
-      })) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_form.EuiFormControlLayout, {
-        className: (0, _classnames.default)('euiSuperDatePicker', className),
-        compressed: compressed,
-        isDisabled: isDisabled,
-        prepend: quickSelect,
-        append: autoRefreshAppend,
-        "data-test-subj": dataTestSubj
-      }, !isQuickSelectOnly && this.renderDatePickerRange())), this.renderUpdateButton()));
+      })) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_flex.EuiFlexItem, null, this.renderDatePickerRange()), this.renderUpdateButton()));
     }
   }], [{
     key: "getDerivedStateFromProps",