@elastic/eui 81.1.0 → 81.2.0

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

@@ -18,10 +18,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _moment = _interopRequireDefault(require("moment"));
 var _datemath = _interopRequireDefault(require("@elastic/datemath"));
+var _predicate = require("../../../services/predicate");
 var _context = require("../../context");
 var _date_picker_range = require("../date_picker_range");
 var _form = require("../../form");
-var _flex = require("../../flex");
 var _time_options = require("./time_options");
 var _pretty_duration = require("./pretty_duration");
 var _async_interval = require("./async_interval");
@@ -228,7 +228,7 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         customQuickSelectRender: customQuickSelectRender,
         dateFormat: dateFormat,
         end: end,
-        isDisabled: isDisabled,
+        isDisabled: !!isDisabled,
         isPaused: isPaused,
         recentlyUsedRanges: recentlyUsedRanges,
         refreshInterval: refreshInterval,
@@ -259,41 +259,38 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         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'];
+        onFocus = _this$props3.onFocus;
       var autoRefreshAppend = !isPaused ? (0, _react2.jsx)(_auto_refresh.EuiAutoRefreshButton, {
         refreshInterval: refreshInterval,
-        isDisabled: isDisabled,
+        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,
+        disabled: !!isDisabled,
         prepend: _this.renderQuickSelect(),
-        append: autoRefreshAppend,
-        'data-test-subj': dataTestSubj
+        append: autoRefreshAppend
       };
       if (isQuickSelectOnly) {
         return (0, _react2.jsx)(_form.EuiFormControlLayout, (0, _extends2.default)({
           iconsPosition: "static"
         }, formControlLayoutProps));
       }
-      if (showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
+      var isDisabledDisplay = (0, _predicate.isObject)(isDisabled) && (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled.display);
+      if (isDisabledDisplay || showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
         return (0, _react2.jsx)(_form.EuiFormControlLayout, formControlLayoutProps, (0, _react2.jsx)("button", {
           className: (0, _classnames.default)('euiSuperDatePicker__prettyFormat', {
             'euiSuperDatePicker__prettyFormat--disabled': isDisabled
           }),
           "data-test-subj": "superDatePickerShowDatesButton",
-          disabled: isDisabled,
+          disabled: !!isDisabled,
           onClick: _this.hidePrettyDuration,
           onFocus: onFocus
-        }, (0, _react2.jsx)(_pretty_duration.PrettyDuration, {
+        }, isDisabledDisplay ? isDisabled.display : (0, _react2.jsx)(_pretty_duration.PrettyDuration, {
           timeFrom: start,
           timeTo: end,
           quickRanges: commonlyUsedRanges,
@@ -303,9 +300,6 @@ 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, (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, {
@@ -314,7 +308,7 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
             position: "start",
             needsUpdating: hasChanged,
             isInvalid: isInvalid,
-            isDisabled: isDisabled,
+            isDisabled: !!isDisabled,
             onChange: _this.setStart,
             value: start,
             dateFormat: dateFormat,
@@ -334,7 +328,7 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
             compressed: compressed,
             needsUpdating: hasChanged,
             isInvalid: isInvalid,
-            isDisabled: isDisabled,
+            isDisabled: !!isDisabled,
             onChange: _this.setEnd,
             value: end,
             dateFormat: dateFormat,
@@ -376,18 +370,16 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         showUpdateButton = _this$props5.showUpdateButton,
         compressed = _this$props5.compressed;
       if (!showUpdateButton) return null;
-      return (0, _react2.jsx)(_flex.EuiFlexItem, {
-        grow: false
-      }, (0, _react2.jsx)(_super_update_button.EuiSuperUpdateButton, (0, _extends2.default)({
+      return (0, _react2.jsx)(_super_update_button.EuiSuperUpdateButton, (0, _extends2.default)({
         needsUpdate: _this.state.hasChanged,
         showTooltip: !_this.state.isStartDatePopoverOpen && !_this.state.isEndDatePopoverOpen,
         isLoading: isLoading,
-        isDisabled: isDisabled || _this.state.isInvalid,
+        isDisabled: !!isDisabled || _this.state.isInvalid,
         onClick: _this.handleClickUpdateButton,
         "data-test-subj": "superDatePickerApplyTimeButton",
         size: compressed ? 's' : 'm',
         iconOnly: showUpdateButton === 'iconOnly'
-      }, updateButtonProps)));
+      }, updateButtonProps));
     });
     return _this;
   }
@@ -406,30 +398,32 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         isQuickSelectOnly = _this$props6.isQuickSelectOnly,
         compressed = _this$props6.compressed,
         className = _this$props6.className;
+      var _this$state2 = this.state,
+        hasChanged = _this$state2.hasChanged,
+        isInvalid = _this$state2.isInvalid;
 
       // Force reduction in width if showing quick select only
       var width = isQuickSelectOnly ? 'auto' : _width;
-      var flexWrapperClasses = (0, _classnames.default)('euiSuperDatePicker__flexWrapper', {
-        'euiSuperDatePicker__flexWrapper--noUpdateButton': !showUpdateButton,
-        'euiSuperDatePicker__flexWrapper--isAutoRefreshOnly': isAutoRefreshOnly,
-        'euiSuperDatePicker__flexWrapper--isQuickSelectOnly': isQuickSelectOnly,
-        'euiSuperDatePicker__flexWrapper--fullWidth': width === 'full',
-        'euiSuperDatePicker__flexWrapper--autoWidth': width === 'auto'
+      var classes = (0, _classnames.default)('euiSuperDatePicker', className, {
+        'euiSuperDatePicker--needsUpdating': hasChanged && !isDisabled && !isInvalid,
+        'euiSuperDatePicker--noUpdateButton': !showUpdateButton,
+        'euiSuperDatePicker--isAutoRefreshOnly': isAutoRefreshOnly,
+        'euiSuperDatePicker--isQuickSelectOnly': isQuickSelectOnly,
+        'euiSuperDatePicker--fullWidth': width === 'full',
+        'euiSuperDatePicker--autoWidth': width === 'auto'
       });
-      return (0, _react2.jsx)(_flex.EuiFlexGroup, {
-        gutterSize: "s",
-        responsive: false,
-        className: flexWrapperClasses
-      }, isAutoRefreshOnly && onRefreshChange ? (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_auto_refresh.EuiAutoRefresh, {
+      return (0, _react2.jsx)("div", {
+        className: classes,
+        "data-test-subj": dataTestSubj
+      }, isAutoRefreshOnly && onRefreshChange ? (0, _react2.jsx)(_auto_refresh.EuiAutoRefresh, {
         isPaused: isPaused,
         refreshInterval: refreshInterval,
         onRefreshChange: onRefreshChange,
         fullWidth: width === 'full',
         compressed: compressed,
-        isDisabled: isDisabled,
-        "data-test-subj": dataTestSubj,
+        isDisabled: !!isDisabled,
         className: className
-      })) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_flex.EuiFlexItem, null, this.renderDatePickerRange()), this.renderUpdateButton()));
+      }) : (0, _react2.jsx)(_react.default.Fragment, null, this.renderDatePickerRange(), this.renderUpdateButton()));
     }
   }], [{
     key: "getDerivedStateFromProps",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "81.1.0",
+  "version": "81.2.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/src/components/date_picker/super_date_picker/_super_date_picker.scss

@@ -1,4 +1,6 @@
-.euiSuperDatePicker__flexWrapper {
+.euiSuperDatePicker {
+  display: flex;
+  gap: $euiSizeS;
   max-width: 100%;
   // Set a sensible min-width for when width is auto
   min-width: MIN(($euiFormMaxWidth / 2) + $euiSuperDatePickerButtonWidth + $euiSizeS, 100%);
@@ -8,36 +10,38 @@
     width: 100%;
   }
 
-  &.euiSuperDatePicker__flexWrapper--fullWidth {
+  &--isAutoRefreshOnly {
+    min-width: MIN($euiFormMaxWidth / 2, 100%);
+    width: $euiFormMaxWidth;
+  }
+
+  &--noUpdateButton {
+    min-width: MIN($euiFormMaxWidth / 2, 100%);
+    width: $euiSuperDatePickerWidth;
+  }
+
+  &--fullWidth {
     width: 100%;
   }
 
-  &.euiSuperDatePicker__flexWrapper--isQuickSelectOnly {
+  &--isQuickSelectOnly {
     min-width: 0;
   }
 
-  &.euiSuperDatePicker__flexWrapper--autoWidth {
+  &--autoWidth {
     display: inline-flex;
     width: auto;
   }
-}
-
-.euiSuperDatePicker__flexWrapper--isAutoRefreshOnly {
-  min-width: MIN($euiFormMaxWidth / 2, 100%);
-  width: $euiFormMaxWidth;
-}
 
-.euiSuperDatePicker__flexWrapper--noUpdateButton {
-  min-width: MIN($euiFormMaxWidth / 2, 100%);
-  width: $euiSuperDatePickerWidth;
-}
+  .euiDatePickerRange {
+    flex-grow: 1;
+  }
 
-.euiSuperDatePicker {
-  // Allow it to always grow to fit the container since the default form max width is too small
-  // stylelint-disable-next-line declaration-no-important
-  max-width: 100% !important;
+  .euiFormControlLayout {
+    max-width: 100%; // Allow it to always grow to fit the container since the default form max width is too small
+  }
 
-  > .euiFormControlLayout__childrenWrapper {
+  .euiFormControlLayout__childrenWrapper {
     display: flex;
     align-items: center;
     overflow: hidden;
@@ -74,16 +78,18 @@
 /**
 * Make the arrow delimiter match the colors of `.euiDatePopoverButton-needsUpdating`
 */
-.euiSuperDatePicker--needsUpdating.euiFormControlLayoutDelimited { // Extra specificity needed to override default delimited styles
-  .euiFormControlLayout__childrenWrapper {
-    background-color: $euiSuperDatePickerNeedsUpdatingBackgroundColor;
-  }
+.euiSuperDatePicker--needsUpdating {
+  .euiFormControlLayoutDelimited { // Extra specificity needed to override default delimited styles
+    .euiFormControlLayout__childrenWrapper {
+      background-color: $euiSuperDatePickerNeedsUpdatingBackgroundColor;
+    }
 
-  .euiFormControlLayoutDelimited__delimiter {
-    color: $euiSuperDatePickerNeedsUpdatingTextColor;
+    .euiFormControlLayoutDelimited__delimiter {
+      color: $euiSuperDatePickerNeedsUpdatingTextColor;
+    }
   }
-}
 
-.euiSuperDatePicker .euiFormControlLayout__childrenWrapper {
-  transition: background $euiAnimSpeedFast ease-in; // Match @mixin euiSuperDatePickerText / .euiDatePopoverButton
+  .euiFormControlLayout__childrenWrapper {
+    transition: background $euiAnimSpeedFast ease-in; // Match @mixin euiSuperDatePickerText / .euiDatePopoverButton
+  }
 }

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

@@ -19,10 +19,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _moment = _interopRequireDefault(require("moment"));
 var _datemath = _interopRequireDefault(require("@elastic/datemath"));
+var _predicate = require("../../../services/predicate");
 var _context = require("../../context");
 var _date_picker_range = require("../date_picker_range");
 var _form = require("../../form");
-var _flex = require("../../flex");
 var _time_options = require("./time_options");
 var _pretty_duration = require("./pretty_duration");
 var _async_interval = require("./async_interval");
@@ -229,7 +229,7 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         customQuickSelectRender: customQuickSelectRender,
         dateFormat: dateFormat,
         end: end,
-        isDisabled: isDisabled,
+        isDisabled: !!isDisabled,
         isPaused: isPaused,
         recentlyUsedRanges: recentlyUsedRanges,
         refreshInterval: refreshInterval,
@@ -260,41 +260,38 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         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'];
+        onFocus = _this$props3.onFocus;
       var autoRefreshAppend = !isPaused ? (0, _react2.jsx)(_auto_refresh.EuiAutoRefreshButton, {
         refreshInterval: refreshInterval,
-        isDisabled: isDisabled,
+        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,
+        disabled: !!isDisabled,
         prepend: _this.renderQuickSelect(),
-        append: autoRefreshAppend,
-        'data-test-subj': dataTestSubj
+        append: autoRefreshAppend
       };
       if (isQuickSelectOnly) {
         return (0, _react2.jsx)(_form.EuiFormControlLayout, (0, _extends2.default)({
           iconsPosition: "static"
         }, formControlLayoutProps));
       }
-      if (showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
+      var isDisabledDisplay = (0, _predicate.isObject)(isDisabled) && (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled.display);
+      if (isDisabledDisplay || showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
         return (0, _react2.jsx)(_form.EuiFormControlLayout, formControlLayoutProps, (0, _react2.jsx)("button", {
           className: (0, _classnames.default)('euiSuperDatePicker__prettyFormat', {
             'euiSuperDatePicker__prettyFormat--disabled': isDisabled
           }),
           "data-test-subj": "superDatePickerShowDatesButton",
-          disabled: isDisabled,
+          disabled: !!isDisabled,
           onClick: _this.hidePrettyDuration,
           onFocus: onFocus
-        }, (0, _react2.jsx)(_pretty_duration.PrettyDuration, {
+        }, isDisabledDisplay ? isDisabled.display : (0, _react2.jsx)(_pretty_duration.PrettyDuration, {
           timeFrom: start,
           timeTo: end,
           quickRanges: commonlyUsedRanges,
@@ -304,9 +301,6 @@ 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, (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, {
@@ -315,7 +309,7 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
             position: "start",
             needsUpdating: hasChanged,
             isInvalid: isInvalid,
-            isDisabled: isDisabled,
+            isDisabled: !!isDisabled,
             onChange: _this.setStart,
             value: start,
             dateFormat: dateFormat,
@@ -335,7 +329,7 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
             compressed: compressed,
             needsUpdating: hasChanged,
             isInvalid: isInvalid,
-            isDisabled: isDisabled,
+            isDisabled: !!isDisabled,
             onChange: _this.setEnd,
             value: end,
             dateFormat: dateFormat,
@@ -377,18 +371,16 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         showUpdateButton = _this$props5.showUpdateButton,
         compressed = _this$props5.compressed;
       if (!showUpdateButton) return null;
-      return (0, _react2.jsx)(_flex.EuiFlexItem, {
-        grow: false
-      }, (0, _react2.jsx)(_super_update_button.EuiSuperUpdateButton, (0, _extends2.default)({
+      return (0, _react2.jsx)(_super_update_button.EuiSuperUpdateButton, (0, _extends2.default)({
         needsUpdate: _this.state.hasChanged,
         showTooltip: !_this.state.isStartDatePopoverOpen && !_this.state.isEndDatePopoverOpen,
         isLoading: isLoading,
-        isDisabled: isDisabled || _this.state.isInvalid,
+        isDisabled: !!isDisabled || _this.state.isInvalid,
         onClick: _this.handleClickUpdateButton,
         "data-test-subj": "superDatePickerApplyTimeButton",
         size: compressed ? 's' : 'm',
         iconOnly: showUpdateButton === 'iconOnly'
-      }, updateButtonProps)));
+      }, updateButtonProps));
     });
     return _this;
   }
@@ -407,30 +399,32 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         isQuickSelectOnly = _this$props6.isQuickSelectOnly,
         compressed = _this$props6.compressed,
         className = _this$props6.className;
+      var _this$state2 = this.state,
+        hasChanged = _this$state2.hasChanged,
+        isInvalid = _this$state2.isInvalid;
 
       // Force reduction in width if showing quick select only
       var width = isQuickSelectOnly ? 'auto' : _width;
-      var flexWrapperClasses = (0, _classnames.default)('euiSuperDatePicker__flexWrapper', {
-        'euiSuperDatePicker__flexWrapper--noUpdateButton': !showUpdateButton,
-        'euiSuperDatePicker__flexWrapper--isAutoRefreshOnly': isAutoRefreshOnly,
-        'euiSuperDatePicker__flexWrapper--isQuickSelectOnly': isQuickSelectOnly,
-        'euiSuperDatePicker__flexWrapper--fullWidth': width === 'full',
-        'euiSuperDatePicker__flexWrapper--autoWidth': width === 'auto'
+      var classes = (0, _classnames.default)('euiSuperDatePicker', className, {
+        'euiSuperDatePicker--needsUpdating': hasChanged && !isDisabled && !isInvalid,
+        'euiSuperDatePicker--noUpdateButton': !showUpdateButton,
+        'euiSuperDatePicker--isAutoRefreshOnly': isAutoRefreshOnly,
+        'euiSuperDatePicker--isQuickSelectOnly': isQuickSelectOnly,
+        'euiSuperDatePicker--fullWidth': width === 'full',
+        'euiSuperDatePicker--autoWidth': width === 'auto'
       });
-      return (0, _react2.jsx)(_flex.EuiFlexGroup, {
-        gutterSize: "s",
-        responsive: false,
-        className: flexWrapperClasses
-      }, isAutoRefreshOnly && onRefreshChange ? (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_auto_refresh.EuiAutoRefresh, {
+      return (0, _react2.jsx)("div", {
+        className: classes,
+        "data-test-subj": dataTestSubj
+      }, isAutoRefreshOnly && onRefreshChange ? (0, _react2.jsx)(_auto_refresh.EuiAutoRefresh, {
         isPaused: isPaused,
         refreshInterval: refreshInterval,
         onRefreshChange: onRefreshChange,
         fullWidth: width === 'full',
         compressed: compressed,
-        isDisabled: isDisabled,
-        "data-test-subj": dataTestSubj,
+        isDisabled: !!isDisabled,
         className: className
-      })) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_flex.EuiFlexItem, null, this.renderDatePickerRange()), this.renderUpdateButton()));
+      }) : (0, _react2.jsx)(_react.default.Fragment, null, this.renderDatePickerRange(), this.renderUpdateButton()));
     }
   }], [{
     key: "getDerivedStateFromProps",
@@ -503,7 +497,15 @@ EuiSuperDatePickerInternal.propTypes = {
      * Set isAutoRefreshOnly to true to limit the component to only display auto refresh content.
      */
   isAutoRefreshOnly: _propTypes.default.bool,
-  isDisabled: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.bool.isRequired]),
+  /**
+     * Accepts either a true/false boolean or an object configuration.
+     *
+     * The configuration will render the component as disabled, and allow you to
+     * customize the displayed disabled text.
+     */
+  isDisabled: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.shape({
+    display: _propTypes.default.node.isRequired
+  }).isRequired]),
   isLoading: _propTypes.default.bool,
   isPaused: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.bool.isRequired]),
   /**
@@ -702,7 +704,15 @@ EuiSuperDatePicker.propTypes = {
      * Set isAutoRefreshOnly to true to limit the component to only display auto refresh content.
      */
   isAutoRefreshOnly: _propTypes.default.bool,
-  isDisabled: _propTypes.default.bool,
+  /**
+     * Accepts either a true/false boolean or an object configuration.
+     *
+     * The configuration will render the component as disabled, and allow you to
+     * customize the displayed disabled text.
+     */
+  isDisabled: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.shape({
+    display: _propTypes.default.node.isRequired
+  }).isRequired]),
   isLoading: _propTypes.default.bool,
   isPaused: _propTypes.default.bool,
   /**